third_party/WebKit/LayoutTests/fast/css/invalidation/shadow-boundary-crossing.html

   1 <!DOCTYPE html>
   2
   3 <script src="../../../resources/js-test.js"></script>
   4
   5 <style>
   6     .deep /deep/ .inside,
   7     .shallow .inside {
   8         padding: 0;
   9     }
  10 </style>
  11
  12 <div id="sandbox"></div>
  13
  14 <script>
  15 description("Invalidation sets should not apply across shadow roots if tree boundary crossing rules are not used.");
  16
  17 var sandbox = document.getElementById("sandbox");
  18 var sandboxRoot = sandbox.createShadowRoot();
  19 sandboxRoot.innerHTML = "<content></content>";
  20
  21 for (var j = 0; j < 10; ++j) {
  22     var childDiv = sandbox.appendChild(document.createElement("div"));
  23     childDiv.className = "inside";
  24     var shadowDiv = sandboxRoot.appendChild(document.createElement("div"));
  25     shadowDiv.className = "inside";
  26     shadowDiv.createShadowRoot().innerHTML = "<div class=inside><content></content></div>";
  27 }
  28
  29 getComputedStyle(sandbox).color;
  30 sandbox.className = "shallow";
  31 if (window.internals)
  32     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "10");
  33 sandbox.className = "";
  34
  35 getComputedStyle(sandbox).color;
  36 sandbox.className = "deep";
  37 if (window.internals)
  38     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "30");
  39 </script>