Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-fetched-module.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Basic shadowrootadoptedstylesheets support on <template></title>
<meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" />
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<body>
<script type="module">
// Import a module so it's in the module map.
import("./support/styles.css", { with: { type: "css" } }).then((sheet) => {
// Setting 'shadowrootadoptedstylesheets' to the same specifier should appliy it immediately.
// Use setHTMLUnsafe, as declarative shadow DOM's don't get created via CreateElement or innerHTML.
document.body.setHTMLUnsafe(
"<div id='host'>" +
"<template shadowrootmode='open' shadowrootadoptedstylesheets='./support/styles.css'>" +
"<span id='test_element'>Test content</span>" +
"</template>" +
"</div>"
);
const host = document.getElementById("host");
test(function (t) {
assert_equals(
host.shadowRoot.adoptedStyleSheets.length,
1,
"The shadowrootadoptedstylesheets will declaratively import named specifiers into the adoptedStyleSheets array.",
);
assert_equals(
host.shadowRoot.adoptedStyleSheets[0],
sheet.default,
"The CSSStyleSheet imported imperatively matches the one imported declaratively.",
);
}, "adoptedStyleSheets is populated from a <template> element's shadowrootadoptedstylesheets attribute.");
const test_element = host.shadowRoot.getElementById("test_element");
test(function (t) {
assert_equals(getComputedStyle(test_element)
.color, "rgb(0, 0, 255)",
"Declarative styles were applied.");
}, "Styles from the adoptedStyleSheets are applied to elements.");
});
</script>
</body>