shadowrootadoptedstylesheets-basic.html (1395B)
1 <!DOCTYPE html> 2 <title>Basic shadowrootadoptedstylesheets support on <template></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 } 14 } 15 </script> 16 17 <div id="host"> 18 <template shadowrootmode="open" shadowrootadoptedstylesheets="foo"> 19 <span id="test_element">Test content</span> 20 </template> 21 </div> 22 23 <script> 24 const host = document.getElementById("host"); 25 test(function (t) { 26 assert_equals( 27 host.shadowRoot.adoptedStyleSheets.length, 28 1, 29 "The shadowrootadoptedstylesheets will declaratively import named specifiers into the adoptedStyleSheets array.", 30 ); 31 32 }, "adoptedStyleSheets is populated from a <template> element's shadowrootadoptedstylesheets attribute."); 33 const test_element = host.shadowRoot.getElementById("test_element"); 34 35 test(function (t) { 36 assert_equals(getComputedStyle(test_element) 37 .color, "rgb(0, 0, 255)", 38 "Declarative styles were applied."); 39 40 }, "Styles from the adoptedStyleSheets are applied to elements."); 41 </script>