Pass the correct sourceURLs to DevTools for constructed stylesheets

dandclark · chromium-wpt-export-bot · commit d6c0330b8162 · 2021-06-21T17:29:53.000-07:00
A CSSStyleSheet imported as a CSS module script has the constructed flag set (https://wicg.github.io/construct-stylesheets/#cssstylesheet-constructed-flag). This is because it is useful to treat imported CSSStyleSheets the same way as stylesheets created via `new`. For example we want to be able to add both to document.adoptedStyleSheets, and we want both to treat @import rules the same way. However, we want DevTools to display them differently. Sheets created with `new` don't have a source file to show, but imported sheets do, so we want the latter to be shown more like "normal" stylesheets. To enable DevTools to tell these types of constructed stylesheets apart, start passing an empty sourceURL to DevTools for constructed stylesheets created by `new`. The corresponding frontend change https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2964580 will check for an empty sourceURL to determine whether to try to link the stylesheet to a source file or not. Additionally, a CSSStyleSheet for a module import now stores the URL of the module request as its base URL. This is later passed to DevTools as the source URL of the stylesheet. This works because the base URL and source URL for a CSS module script are always the same. This also happens to fix a bug with resolution of relative URLs in CSS modules. The previous behavior was to resolve these using the URL of the importing document. The new, correct, behavior is to resolve them using the URL of the stylesheet resource. Bug: 1219441 Change-Id: I48de349e1f7c8e10a329bff016cef68ac9901bb6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2964539 Reviewed-by: Andrey Kosyakov <caseq@chromium.org> Reviewed-by: Kouhei Ueno <kouhei@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org> Reviewed-by: Sigurd Schneider <sigurds@chromium.org> Commit-Queue: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/master@{#894456}
diff --git a/html/semantics/scripting-1/the-script-element/css-module/relative-urls.html b/html/semantics/scripting-1/the-script-element/css-module/relative-urls.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<head>
+  <title>Test resolution of relative URL in CSS module</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="target"></div>
+  <script type="module">
+    import styleSheet from "./resources/load-relative-url.css" assert { type: "css"};
+    test(() => {
+      const target = document.querySelector("#target");
+      document.adoptedStyleSheets = [ styleSheet ];
+      let backgroundStyle = window.getComputedStyle(target).background;
+      assert_not_equals(backgroundStyle.indexOf("css-module/resources/image.png"), -1);
+    }, "A relative URL in a CSS module should be resolved relative to the CSS file's URL, not the importing document's URL");
+  </script>
+</body>
diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/load-relative-url.css b/html/semantics/scripting-1/the-script-element/css-module/resources/load-relative-url.css
@@ -0,0 +1,5 @@
+
+#target {
+    /* image.png doesn't exist, but that's irrelevant to the test. */
+    background: url('./image.png');
+}
