[CSS Modules] synchronously process blob URLs

KurtCattiSchmidt · chromium-wpt-export-bot · commit 47f5499588c3 · 2025-10-30T16:01:37.000-07:00
After switching to Blob URL's in C: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 adds a new parameter to
synchronously fetch Blob URL's when initiated via
`shadowrootadoptedstylesheets`. Blob URL's remain async in all other
scenarios.

This behavior won't cause the same undesirable issues that synchronous
XHR faced because Blob URL's are typically local (and will always be
in-memory when generated via Declarative CSS Modules).

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

This change will address the current undesirable behavior, but I'll
investigate what this would look like to make fully async with a
callback. This will take some time and will need input from the WHATWG
so for now this change will make the current design usable.

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>
