Prototype JS form controls student project

Prototype a JavaScript implementation of HTML form controls

Background information: Form controls (e.g. checkboxes, text inputs, radio buttons, etc.) are a significant source of complexity in many web engines. Servo is interesting in exploring alternate ways of implementing them that are easier to maintain and implement than writing native Rust code. This project requires exploring the limitations of WebComponents as a platform for re-implementing the common HTML form controls using standard HTML elements, CSS, and JavaScript. No Rust code is required, and this work will be performed in feature-complete browsers like Firefox and Chrome.

Initial step: Set up a web development environment, including the Polymer library, and demonstrate a simple servo-checkbox element that is functionally identical to a regular checkbox input (it can simply contain a regular HTML input element for this initial step). It is highly recommended to take some time to learn about WebComponents, for which the Polymer library is a polyfill.

• In the servo-checkbox element, replicate the simple behaviour of a regular checkbox without using a native form control. Display some kind of visual indication of checked/unchecked state, support toggling via clicks.
• Create a servo-radio element, replicate the simple behaviour of a regular radio button. Ensure multiple unrelated radio groups are supported.
• Create a servo-input element that causes the appropriate input element specialization to appear based on the type attribute as described in the HTML specification.
• Implement a servo-text element that is a simple one-line text input, replicating the behaviour of <input type=text>, and hook it up to servo-input.
• Extend servo-text to support password input types (ie. replacing the content's visual display with '*')
• Implement servo-select, allowing both single and multiple selections, replicating the behaviour of <select> and <option>.
• Implement event dispatch for input and changed events per the subsections of 4.5.10.1, such listeners on the servo-input elements receive the proper events without knowledge of the underlying replaced content.
• Ensure that important properties of the HTMLInputElement interface function correctly for setting and getting - type, value, name, checked, form, size, disabled, readOnly
• Implement servo-button that replicates the behaviour of <input type=[button|submit|reset]>, including triggering the submit action on the form owner