| <!doctype html> |
| <html> |
| <head> |
| <style> |
| form, fieldset { |
| padding: 5px; |
| margin: 2px; |
| border: 1px solid black; |
| } |
| /* Pack them to fit everything in 800*600 */ |
| body > :not(p) { |
| float: left; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test the basics of the pseudo class :valid with the <form> and <fieldset> elements.</p> |
| |
| <!-- Empty stuff. --> |
| <form style="background-color: green"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| |
| <!-- Basic input as a descendant. --> |
| <form style="background-color: green"> |
| <fieldset style="background-color: green"> |
| <input> |
| </fieldset> |
| </form> |
| |
| <!-- Basic input associated. --> |
| <div> |
| <form id="basic_input1" style="background-color: green"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| <fieldset form="basic_input1" style="background-color: green"> |
| <input> |
| </fieldset> |
| </div> |
| |
| <div> |
| <form id="basic_input2" style="background-color: green"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| <fieldset style="background-color: green"> |
| <input form="basic_input2"> |
| </fieldset> |
| </div> |
| |
| <!-- Required input as a descendant. --> |
| <form style="background-color: red"> |
| <fieldset style="background-color: red"> |
| <input required> |
| </fieldset> |
| </form> |
| |
| <!-- Required input associated. --> |
| <div> |
| <form id="required_input1" style="background-color: red"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| <fieldset style="background-color: red"> |
| <input form="required_input1" required> |
| </fieldset> |
| </div> |
| |
| <div> |
| <form id="required_input2" style="background-color: green"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| <fieldset form="required_input2" style="background-color: red"> |
| <input required> |
| </fieldset> |
| </div> |
| |
| <!-- Valid required input as a descendant. --> |
| <form style="background-color: green"> |
| <fieldset style="background-color: green"> |
| <input value="WebKit!" required> |
| </fieldset> |
| </form> |
| |
| <!-- Valid required input associated. --> |
| <div> |
| <form id="valid_required_input1" style="background-color: green"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| <fieldset style="background-color: green"> |
| <input value="WebKit!" form="valid_required_input1" required> |
| </fieldset> |
| </div> |
| <div> |
| <form id="valid_required_input2" style="background-color: green"> |
| <fieldset style="background-color: green"></fieldset> |
| </form> |
| <fieldset form="valid_required_input2" style="background-color: green"> |
| <input value="WebKit!" required> |
| </fieldset> |
| </div> |
| </body> |
| </html> |
