commit 575a9bc8f9d5233b5217ceb2865b554d20631296
parent 32876d0057056db4dc720a0e4d9b1dd6caed8c3d
Author: Kurt Catti-Schmidt <kschmi@microsoft.com>
Date: Fri, 31 Oct 2025 08:53:44 +0000
Bug 1996609 [wpt PR 55681] - [CSS Modules] shadowrootadoptedstylesheets support on <template>, a=testonly
Automatic update from web-platform-tests
[CSS Modules] shadowrootadoptedstylesheets support on <template>
This CL adds support for the shadowrootadoptedstylesheets attribute as
well as basic support for adding a previously-fetched entry from the
module map to adoptedStyleSheets.
Basic tests were added for both scenarios. More tests will be added in
follow ups.
This currently treats the attribute value as a single specifier - a
follow-up will treat it as a space-separated list of specifiers.
Bug: 448174611
Change-Id: I403c578f37645517c922a28949398743c59d0964
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7047401
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1536084}
--
wpt-commits: edd39d47d5de30357655461ac03677fbf703d6d3
wpt-pr: 55681
Diffstat:
3 files changed, 88 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-basic.html b/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-basic.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Basic shadowrootadoptedstylesheets support on <template></title>
+<meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" />
+<link rel='help' href='https://github.com/whatwg/html/pull/11687'>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+
+<!-- Use a dataURI + import map so this can be performed in-document. -->
+<script type="importmap">
+{
+ "imports": {
+ "foo": "data:text/css,span {color:blue}"
+ }
+}
+</script>
+
+<div id="host">
+ <template shadowrootmode="open" shadowrootadoptedstylesheets="foo">
+ <span id="test_element">Test content</span>
+ </template>
+</div>
+
+<script>
+ 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.",
+ );
+
+ }, "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>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-fetched-module.html b/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-fetched-module.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>Basic shadowrootadoptedstylesheets support on <template></title>
+<meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" />
+<link rel='help' href='https://github.com/whatwg/html/pull/11687'>
+<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>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/support/styles.css b/testing/web-platform/tests/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/support/styles.css
@@ -0,0 +1 @@
+span {color:blue}
+\ No newline at end of file
