link-title.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="resources/shadow-dom.js"></script>
<body>
  <div id="host">
    <template mode-data="open">
      <link rel="stylesheet" title="preferred1" href="data:text/css,%23shadowChild1 { color: green }">
      <link rel="stylesheet" title="title1" href="data:text/css,%23shadowChild2 { color: green }">
      <link rel="alternate stylesheet" title="prefered1" href="data:text/css,%23shadowChild3 { color: green }">
      <link rel="alternate stylesheet" title="title1" href="data:text/css,%23shadowChild4 { color: green }">
      <div id="shadowChild1"></div>
      <div id="shadowChild2"></div>
      <div id="shadowChild3"></div>
      <div id="shadowChild4"></div>
     </template>
  </div>
  <div id="bodyChild1"></div>
  <div id="bodyChild2"></div>
  <script>convertTemplatesToShadowRootsWithin(host);</script>
  <link rel="stylesheet" title="preferred1" href="data:text/css,%23bodyChild1 { color: green }">
  <link rel="stylesheet" title="non-preferred" href="data:text/css,%23bodyChild2 { color: green }">
</body>
<script>
function colorFor(elem) {
  return document.defaultView.getComputedStyle(elem, '').color;
}

test(() => {
  assert_equals(colorFor(bodyChild1), 'rgb(0, 128, 0)', 'A link in a shadow tree does not have any effect on the preferred stylesheet on a document tree.');
  assert_equals(colorFor(bodyChild2), 'rgb(0, 0, 0)', 'A non-preferred stylesheet should not be used.');
}, '<link rel="stylesheet" title="xxx"> in a document tree should work without interference from a shadow tree.');

test(() => {
  assert_equals(colorFor(host.shadowRoot.querySelector('#shadowChild1')), 'rgb(0, 128, 0)');
  assert_equals(colorFor(host.shadowRoot.querySelector('#shadowChild2')), 'rgb(0, 128, 0)');
}, '<link rel="stylesheet" title="xxx"> shoule behave as <link rel="stylesheet"> (always enabled because title is ignored) in a connected shadow tree.');

test(() => {
  assert_equals(colorFor(host.shadowRoot.querySelector('#shadowChild3')), 'rgb(0, 0, 0)');
  assert_equals(colorFor(host.shadowRoot.querySelector('#shadowChild4')), 'rgb(0, 0, 0)');
}, '<link rel="alternate stylesheet" title="xxx"> shoule behave as <link rel="alternate stylesheet"> (never enabled because title is ignored) in a connected shadow tree.');

test(() => {
  assert_equals(host.shadowRoot.styleSheets.length, 4);
  assert_equals(host.shadowRoot.styleSheets[0].title, null);
  assert_equals(host.shadowRoot.styleSheets[1].title, null);
  assert_equals(host.shadowRoot.styleSheets[2].title, null);
  assert_equals(host.shadowRoot.styleSheets[3].title, null);
}, 'StyleSheet.title should always be null in shadow trees.');
</script>
chromium/third_party/blink/web_tests/shadow-dom/link-title.html
