style-element-basic-import.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/document-metadata/the-style-element/tentative/style-element-basic-import.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8" />

<meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" />

<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#the-style-element" />

<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style type="module" specifier="foo">

    #test {color:blue}

</style>

<div id="test">Test content</div>

<script type="module">

  const test_element = document.getElementById("test");

  assert_equals(getComputedStyle(test_element).color, "rgb(0, 0, 0)",

    "Styles from the declarative module are not applied automatically.");

  assert_equals(test_element.sheet, undefined, "The 'sheet' element is not exposed for declarative modules.");

  import sheet from "foo" with { type: "css"};

  test(function (t) {

    assert_equals(

      sheet.cssRules.length, 1,

      "Declaratively defined rules were imported imperatively.",

);

    document.adoptedStyleSheets = [sheet];

    assert_equals(getComputedStyle(test_element).color, "rgb(0, 0, 255)",

      "Declarative styles were applied.");

  }, "CSS Modules can be defined declaratively.");

</script>

<style type="module" specifier="foo">

    #test {color:red}

</style>

<script type="module">

  import sheet from "foo" with { type: "css"};

  test(function (t) {

    assert_equals(

      sheet.cssRules[0].cssText, "#test { color: blue; }",

      "Only the first declarative <style> module with a given specififer is imported.",

);

  }, "Duplicate specifiers.");

</script>