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