third_party/WebKit/LayoutTests/fast/css/invalidation/valid-invalid-pseudo.html

   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 classes.")
  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>