link.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>
  <div id="host"></div>
  <div id="bodyChild"></div>
</body>
<script>
function colorFor(elem) {
  return document.defaultView.getComputedStyle(elem, '').color;
}

async_test((test) => {
  let link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('href', 'data:text/css,div { color: green }');
  link.addEventListener("load", test.step_func_done(() => {
      assert_equals(colorFor(bodyChild), 'rgb(0, 0, 0)', 'An element in a document tree should not be styled.');
      assert_equals(colorFor(shadowChild), 'rgb(0, 128, 0)', 'An element in a shadow tree should be styled.');
  }));
  let sr = host.attachShadow({ mode: 'open' });
  let shadowChild = document.createElement('div');
  sr.appendChild(shadowChild);
  sr.appendChild(link);
}, '<link rel=stylesheet> should load a stylesheet in a connected shadow tree.');
</script>
chromium/third_party/blink/web_tests/shadow-dom/link.html
