<!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>