shadowrootadoptedstylesheets-multiple.html (1654B)
1 <!DOCTYPE html> 2 <title>Multiple specifiers in shadowrootadoptedstylesheets</title> 3 <meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" /> 4 <link rel='help' href='https://github.com/whatwg/html/pull/11687'> 5 <script src='/resources/testharness.js'></script> 6 <script src='/resources/testharnessreport.js'></script> 7 8 <!-- Use a dataURI + import map so this can be performed in-document. --> 9 <script type="importmap"> 10 { 11 "imports": { 12 "foo": "data:text/css,span {color:blue}", 13 "bar": "data:text/css,span {text-decoration: underline}" 14 } 15 } 16 </script> 17 18 <div id="host"> 19 <template shadowrootmode="open" shadowrootadoptedstylesheets="foo bar"> 20 <span id="test_element">Test content</span> 21 </template> 22 </div> 23 24 <script> 25 const host = document.getElementById("host"); 26 test(function (t) { 27 assert_equals( 28 host.shadowRoot.adoptedStyleSheets.length, 29 2, 30 "The shadowrootadoptedstylesheets will declaratively import all space-separated specifiers into the adoptedStyleSheets array.", 31 ); 32 33 }, "adoptedStyleSheets is populated from a <template> element's shadowrootadoptedstylesheets attribute."); 34 const test_element = host.shadowRoot.getElementById("test_element"); 35 36 test(function (t) { 37 assert_equals(getComputedStyle(test_element) 38 .color, "rgb(0, 0, 255)", 39 "The first specifier's style was applied."); 40 assert_equals(getComputedStyle(test_element) 41 .textDecoration, "underline", 42 "The second specifier's style was applied."); 43 44 }, "Styles from the sheets applied via shadowrootadoptedstylesheets are applied to elements."); 45 </script>