style-element-basic-import.html (1114B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" /> 4 <meta name="timeout" content="long" /> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#the-style-element" /> 6 <link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md" /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style type="module" specifier="foo"> 11 #test {color:blue} 12 </style> 13 14 <div id="test">Test content</div> 15 16 <script type="module"> 17 import sheet from "foo" with { type: "css"}; 18 19 test(function (t) { 20 assert_equals( 21 sheet.cssRules.length, 22 1, 23 "Declaratively defined rules were imported imperatively.", 24 ); 25 26 document.adoptedStyleSheets = [sheet]; 27 const test_element = document.getElementById("test"); 28 assert_equals(getComputedStyle(test_element) 29 .color, "rgb(0, 0, 255)", 30 "Declarative styles were applied."); 31 32 }, "CSS Modules can be defined declaratively."); 33 </script>