| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/js-test.js"></script> |
| 3 <style> |
| 4 input { background-color: transparent } |
| 5 #inputValid:valid, |
| 6 #inputInvalid:invalid, |
| 7 #formValid:valid, |
| 8 #formInvalid:invalid { |
| 9 background-color: green |
| 10 } |
| 11 |
| 12 form + div, |
| 13 input + div { |
| 14 color: pink |
| 15 } |
| 16 </style> |
| 17 <input id="inputValid" required></input> |
| 18 <div> |
| 19 <div></div> |
| 20 <div></div> |
| 21 </div> |
| 22 <input id="inputInvalid"></input> |
| 23 <div> |
| 24 <div></div> |
| 25 <div></div> |
| 26 </div> |
| 27 <form id="formValid"> |
| 28 <input id="inputInFormValid" type="text" required></input> |
| 29 <input type="text"></input> |
| 30 <input type="text"></input> |
| 31 </form> |
| 32 <div> |
| 33 <div></div> |
| 34 <div></div> |
| 35 </div> |
| 36 <form id="formInvalid"> |
| 37 <input id="inputInFormInvalid" type="text"></input> |
| 38 <input type="text"></input> |
| 39 <input type="text"></input> |
| 40 </form> |
| 41 <div> |
| 42 <div></div> |
| 43 <div></div> |
| 44 </div> |
| 45 |
| 46 <script> |
| 47 description("Use descendant invalidation sets for :valid and :invalid pseudo cla
sses.") |
| 48 |
| 49 var transparent = "rgba(0, 0, 0, 0)"; |
| 50 var green = "rgb(0, 128, 0)"; |
| 51 |
| 52 shouldBe("getComputedStyle(inputValid, '').backgroundColor", "transparent"); |
| 53 document.body.offsetTop; // Force recalc. |
| 54 inputValid.removeAttribute("required"); |
| 55 if (window.internals) |
| 56 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| 57 shouldBe("getComputedStyle(inputValid, '').backgroundColor", "green"); |
| 58 |
| 59 shouldBe("getComputedStyle(inputInvalid, '').backgroundColor", "transparent"); |
| 60 document.body.offsetTop; // Force recalc. |
| 61 inputInvalid.setAttribute("required", ""); |
| 62 if (window.internals) |
| 63 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| 64 shouldBe("getComputedStyle(inputInvalid, '').backgroundColor", "green"); |
| 65 |
| 66 shouldBe("getComputedStyle(formInvalid, '').backgroundColor", "transparent"); |
| 67 document.body.offsetTop; // Force recalc. |
| 68 inputInFormValid.removeAttribute("required"); |
| 69 if (window.internals) |
| 70 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2"); |
| 71 shouldBe("getComputedStyle(formValid, '').backgroundColor", "green"); |
| 72 |
| 73 shouldBe("getComputedStyle(formInvalid, '').backgroundColor", "transparent"); |
| 74 document.body.offsetTop; // Force recalc. |
| 75 inputInFormInvalid.setAttribute("required", ""); |
| 76 if (window.internals) |
| 77 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2"); |
| 78 shouldBe("getComputedStyle(formInvalid, '').backgroundColor", "green"); |
| 79 |
| 80 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 620333002:
Use invalidation sets for :invalid/:valid/:required/:optional. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master