third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-class-host-context.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <div id="t1">
   5     <div id="host1"></div>
   6 </div>
   7 <div id="t2">
   8     <div id="host2"></div>
   9 </div>
  10 <div id="t3" class="t3">
  11     <div id="host3"></div>
  12 </div>
  13 <div id="t4">
  14     <div id="host4"></div>
  15 </div>
  16 <script>
  17
  18 // Create shadow trees
  19
  20 host1.createShadowRoot().innerHTML = "<style>:host-context(.t1) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>";
  21 host2.createShadowRoot().innerHTML = "<style>:host-context(.t2) #inner { background-color: green }</style><div></div><div></div><div></div><div><span id='inner'></span></div>";
  22 host3.createShadowRoot().innerHTML = "<style>:host-context(#t3:not(.t3)) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>";
  23 host4.createShadowRoot().innerHTML = "<style>:host-context(.nomatch, .t4) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>";
  24
  25 var transparent = "rgba(0, 0, 0, 0)";
  26 var green = "rgb(0, 128, 0)";
  27
  28 test(function(){
  29     assert_equals(getComputedStyle(host1, "").backgroundColor, transparent, "Background color before class change.");
  30     t1.className = "t1";
  31     if (window.internals)
  32         assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Element recalc count on class change.");
  33     assert_equals(getComputedStyle(host1, "").backgroundColor, green, "Background color after class change.");
  34 }, "Matching :host-context with class.");
  35
  36 test(function(){
  37     var inner = host2.shadowRoot.getElementById("inner");
  38     assert_equals(getComputedStyle(inner, "").backgroundColor, transparent, "Background color before class change.");
  39     t2.className = "t2";
  40     if (window.internals)
  41         assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Element recalc count on class change.");
  42     assert_equals(getComputedStyle(inner, "").backgroundColor, green, "Background color after class change.");
  43 }, "Matching id descendant of :host-context with class.");
  44
  45 test(function(){
  46     assert_equals(getComputedStyle(host3, "").backgroundColor, transparent, "Background color before class change.");
  47     t3.className = "";
  48     if (window.internals)
  49         assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Element recalc count on class change.");
  50     assert_equals(getComputedStyle(host3, "").backgroundColor, green, "Background color after class change.");
  51 }, "Matching :host-context with id and negated class.");
  52
  53 test(function(){
  54     assert_equals(getComputedStyle(host4, "").backgroundColor, transparent, "Background color before class change.");
  55     t4.className = "t4";
  56     if (window.internals)
  57         assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Element recalc count on class change.");
  58     assert_equals(getComputedStyle(host4, "").backgroundColor, green, "Background color after class change.");
  59 }, "Matching :host-context with selector list of classes.");
  60 </script>