third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-class-shadow-combinator.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 .t1 #host1::shadow .match { background-color: green; }
   5 .t2 /deep/ .match { background-color: green; }
   6 </style>
   7 <div id="t1">
   8     <div id="host1"></div>
   9     <div></div>
  10 </div>
  11 <div id="t2">
  12     <div id="host2"></div>
  13     <div></div>
  14 </div>
  15 <script>
  16 description("Check that targeted class invalidation works for ::shadow and /deep/ combinators.");
  17
  18 // Create shadow trees
  19
  20 var host1 = document.getElementById("host1");
  21 var match1 = host1.createShadowRoot().appendChild(document.createElement("div"));
  22 match1.className = "match";
  23
  24 var host2 = document.getElementById("host2");
  25 var innerHost = host2.createShadowRoot().appendChild(document.createElement("div"));
  26 var match2 = innerHost.createShadowRoot().appendChild(document.createElement("div"));
  27 match2.className = "match";
  28
  29 var transparent = "rgba(0, 0, 0, 0)";
  30 var green = "rgb(0, 128, 0)";
  31
  32 shouldBe("getComputedStyle(match1, null).backgroundColor", "transparent");
  33 shouldBe("getComputedStyle(match2, null).backgroundColor", "transparent");
  34
  35 document.body.offsetLeft; // force style recalc.
  36
  37 document.getElementById("t1").className = "t1";
  38 if (window.internals)
  39     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  40 shouldBe("getComputedStyle(match1, null).backgroundColor", "green");
  41
  42 document.body.offsetLeft; // force style recalc.
  43
  44 document.getElementById("t2").className = "t2";
  45 if (window.internals)
  46     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  47 shouldBe("getComputedStyle(match2, null).backgroundColor", "green");
  48 </script>