shadowdom-dynamic-styling.html | Explore in Territory

<!doctype html>
<html>
<head>
  <script src="../../../resources/js-test.js"></script>
  <script>
description("Test for https://bugs.webkit.org/show_bug.cgi?id=92899. Dynamically styling ShadowDom content on a node distributed to another shadow insertion point fails.");
  </script>
</head>
<body>
  <div id="box" style="border: 1px solid black;">
    <div id="item"><div>Content required here to reproduce bug.</div></div>
  </div>
<script>
var box = document.querySelector("#box");
var oldestShadowRoot = box.attachShadow({mode: 'open'});
oldestShadowRoot.innerHTML = "<content></content>";
    
var youngestShadowRoot = document.querySelector("#item").attachShadow({mode: 'open'});
youngestShadowRoot.innerHTML = "<style>" +
      ".selected {background: red;}" +
      "</style>" +
      "<div id='target'>Content</div>";

document.body.offsetLeft;
    
target = youngestShadowRoot.querySelector("div");
target.classList.add("selected");
shouldBe('window.getComputedStyle(target).backgroundColor', '"rgb(255, 0, 0)"');
</script>
</body>
</html>

chromium/third_party/blink/web_tests/fast/dom/shadow/shadowdom-dynamic-styling.html