third_party/WebKit/LayoutTests/fast/css/invalidation/required-optional-pseudo.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 input { background-color: transparent }
   5 #inputOptional:optional,
   6 #inputRequired:required {
   7     background-color: green
   8 }
   9
  10 input + div {
  11     color: pink
  12 }
  13 </style>
  14 <input id="inputOptional" required></input>
  15 <div>
  16     <div></div>
  17     <div></div>
  18 </div>
  19 <input id="inputRequired"></input>
  20 <div>
  21     <div></div>
  22     <div></div>
  23 </div>
  24 <script>
  25 description("Use descendant invalidation sets for :required and :optional pseudo classes.")
  26
  27 var transparent = "rgba(0, 0, 0, 0)";
  28 var green = "rgb(0, 128, 0)";
  29
  30 shouldBe("getComputedStyle(inputOptional, '').backgroundColor", "transparent");
  31 document.body.offsetTop; // Force recalc.
  32 inputOptional.removeAttribute("required");
  33 if (window.internals)
  34     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  35 shouldBe("getComputedStyle(inputOptional, '').backgroundColor", "green");
  36
  37 shouldBe("getComputedStyle(inputRequired, '').backgroundColor", "transparent");
  38 document.body.offsetTop; // Force recalc.
  39 inputRequired.setAttribute("required", "");
  40 if (window.internals)
  41     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  42 shouldBe("getComputedStyle(inputRequired, '').backgroundColor", "green");
  43
  44 </script>