third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-class-whole-subtree.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 .b .c { background-color: pink }
   5 .a * { background-color: green }
   6 </style>
   7 <div id="outer">
   8     <div id="inner">
   9         <div>
  10             <div></div>
  11             <div></div>
  12         </div>
  13     </div>
  14 </div>
  15 <script>
  16 description("Check that all children of inner are recalculated.");
  17
  18 var transparent = "rgba(0, 0, 0, 0)";
  19 var green = "rgb(0, 128, 0)";
  20
  21 var inner = document.getElementById("inner");
  22 var outer = document.getElementById("outer");
  23
  24 var innerDivs = inner.querySelectorAll("div");
  25
  26 for (var i=0; i < innerDivs.length; i++)
  27     shouldBe("getComputedStyle(innerDivs[i], null).backgroundColor", "transparent");
  28
  29 document.body.offsetTop; // Force style recalc.
  30
  31 outer.className = "b";
  32 inner.className = "a";
  33
  34 if (window.internals)
  35     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "4");
  36
  37 for (var i=0; i < innerDivs.length; i++)
  38     shouldBe("getComputedStyle(innerDivs[i], null).backgroundColor", "green");
  39 </script>