| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| :valid { background: red; } |
| :invalid { background: red; } |
| input { background: lime; } |
| object { background: lime; } |
| button { background: lime; } |
| progress { background: lime; } |
| meter { background: lime; } |
| option { background: lime; } |
| select { background: lime; } |
| </style> |
| </head> |
| <body> |
| <p id="description"></p> |
| <form method="get"> |
| <input name="input-text-readonly" type="text" value="Lorem ipsum" readonly/> |
| <input name="input-text-disabled" type="text" value="Lorem ipsum" disabled/> |
| <input name="input-button" type="button" value="Lorem ipsum"> |
| <input name="input-reset" type="reset" value="Lorem ipsum"/> |
| <input name="input-hidden" type="hidden" value="Lorem ipsum"/> |
| <input name="input-image" type="image"> |
| <object name="object"></object> |
| <button name="button-button" type="button">Lorem ipsum</button> |
| <button name="button-reset" type="reset">Lorem ipsum</button> |
| <progress id="progress" value=50 max=100>50</progress> |
| <meter id="meter" value=50 max=100>50</meter> |
| <select id="select" required><option id="option" value="1">One</option></select> |
| </form> |
| <div id="console"></div> |
| <script> |
| description("This test performs a check for the :valid CSS selector on various input elements and other elements where it shouldn't be applied."); |
| |
| function getBackgroundColor(nameOrId) { |
| var list = document.getElementsByName(nameOrId); |
| var element = list.length > 0 ? list[0] : document.getElementById(nameOrId); |
| return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color') |
| } |
| |
| var names = [ |
| "input-text-readonly", |
| "input-text-disabled", |
| "input-button", |
| "input-reset", |
| "input-hidden", |
| "input-image", |
| "object", |
| "button-button", |
| "button-reset", |
| "progress", |
| "meter", |
| "option", |
| ]; |
| |
| var normalColor = "rgb(0, 255, 0)"; |
| for (var i = 0; i < names.length; i++) |
| shouldBe("getBackgroundColor('" + names[i] + "')", "normalColor"); |
| |
| document.forms[0].style.display = 'none'; |
| </script> |
| </body> |
| </html> |
