| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
| 5 <style> | 5 <style> |
| 6 :valid { background: red; } | 6 :valid { background: red; } |
| 7 :invalid { background: red; } | 7 :invalid { background: red; } |
| 8 input { background: lime; } | 8 input { background: lime; } |
| 9 fieldset { background: lime; } | |
| 10 object { background: lime; } | 9 object { background: lime; } |
| 11 button { background: lime; } | 10 button { background: lime; } |
| 12 progress { background: lime; } | 11 progress { background: lime; } |
| 13 meter { background: lime; } | 12 meter { background: lime; } |
| 14 option { background: lime; } | 13 option { background: lime; } |
| 15 select { background: lime; } | 14 select { background: lime; } |
| 16 </style> | 15 </style> |
| 17 </head> | 16 </head> |
| 18 <body> | 17 <body> |
| 19 <p id="description"></p> | 18 <p id="description"></p> |
| 20 <form method="get"> | 19 <form method="get"> |
| 21 <input name="input-text-readonly" type="text" value="Lorem ipsum" readonly/> | 20 <input name="input-text-readonly" type="text" value="Lorem ipsum" readonly/> |
| 22 <input name="input-text-disabled" type="text" value="Lorem ipsum" disabled/> | 21 <input name="input-text-disabled" type="text" value="Lorem ipsum" disabled/> |
| 23 <input name="input-button" type="button" value="Lorem ipsum"> | 22 <input name="input-button" type="button" value="Lorem ipsum"> |
| 24 <input name="input-reset" type="reset" value="Lorem ipsum"/> | 23 <input name="input-reset" type="reset" value="Lorem ipsum"/> |
| 25 <input name="input-hidden" type="hidden" value="Lorem ipsum"/> | 24 <input name="input-hidden" type="hidden" value="Lorem ipsum"/> |
| 26 <input name="input-image" type="image"> | 25 <input name="input-image" type="image"> |
| 27 <fieldset name="fieldset"></fieldset> | |
| 28 <object name="object"></object> | 26 <object name="object"></object> |
| 29 <button name="button-button" type="button">Lorem ipsum</button> | 27 <button name="button-button" type="button">Lorem ipsum</button> |
| 30 <button name="button-reset" type="reset">Lorem ipsum</button> | 28 <button name="button-reset" type="reset">Lorem ipsum</button> |
| 31 <progress id="progress" value=50 max=100>50</progress> | 29 <progress id="progress" value=50 max=100>50</progress> |
| 32 <meter id="meter" value=50 max=100>50</meter> | 30 <meter id="meter" value=50 max=100>50</meter> |
| 33 <select id="select" required><option id="option" value="1">One</option></select> | 31 <select id="select" required><option id="option" value="1">One</option></select> |
| 34 </form> | 32 </form> |
| 35 <div id="console"></div> | 33 <div id="console"></div> |
| 36 <script> | 34 <script> |
| 37 description("This test performs a check for the :valid CSS selector on various i
nput elements and other elements where it shouldn't be applied."); | 35 description("This test performs a check for the :valid CSS selector on various i
nput elements and other elements where it shouldn't be applied."); |
| 38 | 36 |
| 39 function getBackgroundColor(nameOrId) { | 37 function getBackgroundColor(nameOrId) { |
| 40 var list = document.getElementsByName(nameOrId); | 38 var list = document.getElementsByName(nameOrId); |
| 41 var element = list.length > 0 ? list[0] : document.getElementById(nameOrId); | 39 var element = list.length > 0 ? list[0] : document.getElementById(nameOrId); |
| 42 return document.defaultView.getComputedStyle(element, null).getPropertyValue
('background-color') | 40 return document.defaultView.getComputedStyle(element, null).getPropertyValue
('background-color') |
| 43 } | 41 } |
| 44 | 42 |
| 45 var names = [ | 43 var names = [ |
| 46 "input-text-readonly", | 44 "input-text-readonly", |
| 47 "input-text-disabled", | 45 "input-text-disabled", |
| 48 "input-button", | 46 "input-button", |
| 49 "input-reset", | 47 "input-reset", |
| 50 "input-hidden", | 48 "input-hidden", |
| 51 "input-image", | 49 "input-image", |
| 52 "fieldset", | |
| 53 "object", | 50 "object", |
| 54 "button-button", | 51 "button-button", |
| 55 "button-reset", | 52 "button-reset", |
| 56 "progress", | 53 "progress", |
| 57 "meter", | 54 "meter", |
| 58 "option", | 55 "option", |
| 59 ]; | 56 ]; |
| 60 | 57 |
| 61 var normalColor = "rgb(0, 255, 0)"; | 58 var normalColor = "rgb(0, 255, 0)"; |
| 62 for (var i = 0; i < names.length; i++) | 59 for (var i = 0; i < names.length; i++) |
| 63 shouldBe("getBackgroundColor('" + names[i] + "')", "normalColor"); | 60 shouldBe("getBackgroundColor('" + names[i] + "')", "normalColor"); |
| 64 | 61 |
| 65 document.forms[0].style.display = 'none'; | 62 document.forms[0].style.display = 'none'; |
| 66 </script> | 63 </script> |
| 67 </body> | 64 </body> |
| 68 </html> | 65 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 646273004:
Implement :valid and :invalid pseudoclass for <fieldset> (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master