[CSS Modules] Bypass fetch for Blob URL's

KurtCattiSchmidt · chromium-wpt-export-bot · commit fe5fa0ebfe13 · 2025-11-05T16:46:56.000-08:00
After switching to Blob URL's in CL:7075691, I noticed that the fetched
stylesheet is not always available immediately in a fully declarative
scenario (where both the style tag is a module and
shadowrootadoptedstylesheets references it), which wasn't the case for
dataURI's. Typically, the first n fetches fail to fetch, where n is
random.

I discovered that dataURI's were always synchronously returned from
ResourceFetcher via CreateResourceForStaticData.

To match this behavior with Blob URL's, this CL immediately creates a
module map entry for a &lt;style type="module"&gt; upon parsing. This entry
can then be immediately queried when referenced from the
`shadowrootadoptedstylesheets` attribute, avoiding a fetch entirely.
DataURI's still need a fetch to generate the underlying object.

A test was added that failed ~50% of the time without this change.

Bug: 448174611
Change-Id: If50701981f7eaa138fff7d9ca799431c3303fa72
diff --git a/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-with-declarative-module.html b/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets/shadowrootadoptedstylesheets-with-declarative-module.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>shadowrootadoptedstylesheets with Declarative CSS Module</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>
+
+<style type="module" specifier="foo">
+span {color:blue}
+</style>
+
+<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>
