third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-class-any-pseudo.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 :-webkit-any(.a1) { background-color: green }
   5 .a2 :-webkit-any(.b2) { background-color: green }
   6 .a3 :-webkit-any(.b3, .c3) { background-color: green }
   7 .a4 :-webkit-any(:not(.b4), .c4) { background-color: green }
   8 :-webkit-any(.a5, .b5) ~ .c5 .d5 { background-color: green }
   9
  10 </style>
  11 <div id="t1">
  12     <span></span>
  13     <span></span>
  14     <span></span>
  15     <span></span>
  16 </div>
  17 <div id="t2">
  18     <span></span>
  19     <span></span>
  20     <span></span>
  21     <span class="b2"></span>
  22 </div>
  23 <div id="t3">
  24     <span></span>
  25     <span></span>
  26     <span class="b3"></span>
  27     <span class="c3"></span>
  28 </div>
  29 <div id="t4">
  30     <span></span>
  31     <span class="b4"></span>
  32     <span class="b4"></span>
  33     <span class="c4"></span>
  34 </div>
  35 <div>
  36     <span id="t5"></span>
  37     <span class="c5">
  38         <span class="d5"></span>
  39     </span>
  40 </div>
  41 <script>
  42 description("Check that targeted class invalidation works with :-webkit-any selectors.");
  43
  44 var transparent = "rgba(0, 0, 0, 0)";
  45 var green = "rgb(0, 128, 0)";
  46
  47 var t1 = document.getElementById("t1");
  48 var b2 = document.querySelector("#t2 .b2");
  49 var b3 = document.querySelector("#t3 .b3");
  50 var c3 = document.querySelector("#t3 .c3");
  51 var spans4 = document.querySelectorAll("#t4 span");
  52 var d5 = document.querySelector("#t5 ~ .c5 .d5");
  53
  54 shouldBe("getComputedStyle(t1, null).backgroundColor", "transparent");
  55 shouldBe("getComputedStyle(b2, null).backgroundColor", "transparent");
  56 shouldBe("getComputedStyle(b3, null).backgroundColor", "transparent");
  57 shouldBe("getComputedStyle(c3, null).backgroundColor", "transparent");
  58
  59 for (var i=0; i<4; i++)
  60     shouldBe("getComputedStyle(spans4[i], null).backgroundColor", "transparent");
  61
  62 shouldBe("getComputedStyle(d5, null).backgroundColor", "transparent");
  63
  64 document.body.offsetLeft; // force style recalc.
  65
  66 t1.className = "a1";
  67 if (window.internals)
  68     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  69 shouldBe("getComputedStyle(t1, null).backgroundColor", "green");
  70
  71 document.body.offsetLeft; // force style recalc.
  72
  73 document.getElementById("t2").className = "a2";
  74 if (window.internals)
  75     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  76 shouldBe("getComputedStyle(b2, null).backgroundColor", "green");
  77
  78 document.body.offsetLeft; // force style recalc.
  79
  80 document.getElementById("t3").className = "a3";
  81 if (window.internals)
  82     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  83 shouldBe("getComputedStyle(b3, null).backgroundColor", "green");
  84 shouldBe("getComputedStyle(c3, null).backgroundColor", "green");
  85
  86 document.body.offsetLeft; // force style recalc.
  87
  88 document.getElementById("t4").className = "a4";
  89 if (window.internals)
  90     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5");
  91 shouldBe("getComputedStyle(spans4[0], null).backgroundColor", "green");
  92 shouldBe("getComputedStyle(spans4[1], null).backgroundColor", "transparent");
  93 shouldBe("getComputedStyle(spans4[2], null).backgroundColor", "transparent");
  94 shouldBe("getComputedStyle(spans4[3], null).backgroundColor", "green");
  95
  96 document.body.offsetLeft; // force style recalc.
  97
  98 document.getElementById("t5").className = "a5";
  99 if (window.internals)
 100     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
 101 shouldBe("getComputedStyle(d5, null).backgroundColor", "green");
 102 </script>