| <!doctype html> |
| <html> |
| <head> |
| <style> |
| form { |
| padding: 5px; |
| margin: 2px; |
| border: 1px solid black; |
| } |
| form:invalid { |
| background-color: red; |
| } |
| form:not(:invalid) { |
| background-color: green; |
| } |
| </style> |
| <script> |
| function createTestDOM() { |
| var body = document.body; |
| |
| { |
| body.appendChild(document.createElement("form")); |
| } |
| { |
| var form = document.createElement("form"); |
| form.appendChild(document.createElement("input")); |
| body.appendChild(form); |
| } |
| { |
| var container = document.createElement("div"); |
| var form = document.createElement("form"); |
| form.setAttribute("id", "basic_input"); |
| container.appendChild(form); |
| |
| var input = document.createElement("input"); |
| input.setAttribute("form", "basic_input"); |
| container.appendChild(input); |
| |
| body.appendChild(container); |
| } |
| { |
| var form = document.createElement("form"); |
| var input = document.createElement("input"); |
| input.setAttribute("required", ""); |
| form.appendChild(input); |
| body.appendChild(form); |
| } |
| { |
| var container = document.createElement("div"); |
| var form = document.createElement("form"); |
| form.setAttribute("id", "required_input"); |
| container.appendChild(form); |
| |
| var input = document.createElement("input"); |
| input.setAttribute("form", "required_input"); |
| input.setAttribute("required", ""); |
| container.appendChild(input); |
| |
| body.appendChild(container); |
| } |
| { |
| var form = document.createElement("form"); |
| var input = document.createElement("input"); |
| input.setAttribute("required", ""); |
| input.value = "WebKit!"; |
| form.appendChild(input); |
| body.appendChild(form); |
| } |
| { |
| var container = document.createElement("div"); |
| var form = document.createElement("form"); |
| form.setAttribute("id", "valid_required_input"); |
| container.appendChild(form); |
| |
| var input = document.createElement("input"); |
| input.setAttribute("form", "valid_required_input"); |
| input.setAttribute("required", ""); |
| input.value = "WebKit!"; |
| container.appendChild(input); |
| |
| body.appendChild(container); |
| } |
| } |
| window.addEventListener("load", createTestDOM); |
| </script> |
| </head> |
| <body> |
| <p>Test the basics of the pseudo class :invalid with the <form> element. This test creates the test DOM with JavaScript.</p> |
| </body> |
| </html> |
