commit 4045bd0a1b43344bd771b25b454ab0b6ba161774
parent 3d0b1f6784af5f031de174158f7355426d024b79
Author: Kurt Catti-Schmidt <kschmi@microsoft.com>
Date: Tue, 21 Oct 2025 10:35:57 +0000
Bug 1994470 [wpt PR 55456] - [CSS Modules] Create Import Map entry for Declarative CSS Modules, a=testonly
Automatic update from web-platform-tests
[CSS Modules] Create Import Map entry for Declarative CSS Modules
This change adds the `specifier` attribute and creates an import map
based on the attribute value and the contents of the associated <style>
tag.
This behavior is currently gated behind the existing `style-src` CSP, as
regular style tags obey today, and is subject to change based on
feedback.
A few basic WPT's were added to test functionality (and CSP behavior),
as well as a unit test verifying the internal import map structure. More
WPT's will come in a follow-up.
Bug: 448174611
Change-Id: I68fa88d900a72be2e004249687912098c7a97812
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7038416
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1531546}
--
wpt-commits: 95de8bf75101cc51bc5b0e0950c8f35eefd69216
wpt-pr: 55456
Diffstat:
3 files changed, 125 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/the-style-element/tentative/style-element-basic-import.html b/testing/web-platform/tests/html/semantics/the-style-element/tentative/style-element-basic-import.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<meta charset="utf-8" />
+<meta name="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com" />
+<meta name="timeout" content="long" />
+<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">
+ 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];
+ const test_element = document.getElementById("test");
+ assert_equals(getComputedStyle(test_element)
+ .color, "rgb(0, 0, 255)",
+ "Declarative styles were applied.");
+
+ }, "CSS Modules can be defined declaratively.");
+</script>
+
diff --git a/testing/web-platform/tests/html/semantics/the-style-element/tentative/style-element-csp-allowed.html b/testing/web-platform/tests/html/semantics/the-style-element/tentative/style-element-csp-allowed.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+<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>
+
+<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline' data:;">
+
+<script>
+ const t1 = async_test("Test securitypolicyviolation event doesn't fire on Declarative CSS Module when allowed via CSP");
+ document.documentElement.addEventListener("securitypolicyviolation", t1.unreached_func("securitypolicyviolation error fired."));
+
+ const t2 = async_test("Test error event doesn't fire on Declarative CSS Module when allowed via CSP");
+</script>
+
+<style type="module" specifier="foo" onerror="t2.unreached_func('onerror fired');">
+ #test {color:blue}
+</style>
+
+</head>
+<body>
+
+<div id="test">Test content</div>
+
+<script type="module">
+ import sheet from "foo" with { type: "css"};
+
+ test(function (t) {
+ assert_equals(
+ sheet.cssRules.length,
+ 1,
+ "Declaratively defined rules were imported with `unsafe-inline` CSP.",
+ );
+
+ document.adoptedStyleSheets = [sheet];
+ const test_element = document.getElementById("test");
+ assert_equals(getComputedStyle(test_element)
+ .color, "rgb(0, 0, 255)",
+ "Declarative styles were applied.");
+
+ }, "CSS Modules can be defined declaratively with `style-src` CSP set to `unsafe-inline` with the data protocol permitted.");
+ t1.done();
+ t2.done();
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/the-style-element/tentative/style-element-csp-blocked.html b/testing/web-platform/tests/html/semantics/the-style-element/tentative/style-element-csp-blocked.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+<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>
+
+<meta http-equiv="Content-Security-Policy" content="style-src 'none';">
+
+<script>
+ async_test(function(t1) {
+ document.documentElement.addEventListener("securitypolicyviolation",
+ t1.done());
+ }, "securitypolicyviolation events should be fired for declarative style violations.");
+
+ const t2 = async_test("Test error event fires on inline style");
+</script>
+
+<style type="module" specifier="foo" onerror="t2.done();">
+ #test {color:blue}
+</style>
+
+</head>
+<body>
+
+<div id="test">Test content</div>
+
+<script type="module">
+ test(function (t) {
+ const test_element = document.getElementById("test");
+ assert_equals(getComputedStyle(test_element)
+ .color, "rgb(0, 0, 0)",
+ "Declarative styles were blocked via CSP.");
+
+ }, "style-src CSP can block Declarative CSS Modules.");
+</script>
+</body>
+</html>
