Bug 2052067 [wpt PR 61030] - [compression dictionary] Add WPT test to check fetch timing for Link header and <link> element., a=testonly

fred-wang · moz-wptsync-bot · commit 3124d2feb5e3 · 2026-07-10T09:23:57.000Z
Automatic update from web-platform-tests [compression dictionary] Add WPT test to check fetch timing for Link header and <link> element. This is currently not specified but there some discussions happening at whatwg/html#11620 and this is important for performance reasons. Bug: 522338661, 40255884 Change-Id: Id1494aa3693b24afaf75dae4e0f5ef5909fce9e1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7922747 Commit-Queue: Frédéric Wang Nélar <fwang@igalia.com> Reviewed-by: Patrick Meenan <pmeenan@chromium.org> Reviewed-by: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/main@{#1655866} -- wpt-commits: b62d7567fd2df9b5a40788a2e9a42f9de756fc21 wpt-pr: 61030
diff --git a/testing/web-platform/tests/fetch/compression-dictionary/dictionary-fetch-timing-001.tentative.https.html b/testing/web-platform/tests/fetch/compression-dictionary/dictionary-fetch-timing-001.tentative.https.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<meta name="timeout" content="long"/>
+<script src="./resources/compression-dictionary-util.sub.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://github.com/whatwg/html/pull/11620#discussion_r3385960016">
+<body>
+  <script>
+    compression_dictionary_promise_test(async t => {
+      let sortedEvents = await new Promise(resolve => {
+        const iframe = document.createElement("iframe");
+        iframe.src = "resources/dictionary-fetch-timing-001-subframe.https.html";
+        window.addEventListener("message", message => resolve(message.data.sortedEvents));
+        document.body.appendChild(iframe);
+        t.add_cleanup(() => iframe.remove());
+      });
+
+      // First verify observed fetches and load event...
+      const fetchedNonDictionaryResources = [
+        "/common/utils.js",
+        "/html/semantics/document-metadata/interactions-of-styling-and-scripting/stylesheet.py?delay=1",
+        "/images/wide-gamut-pattern.png",
+      ];
+      const fetchedLinkElement = "/fetch/compression-dictionary/resources/register-dictionary.py?linkElement";
+      const fetchedLinkHeader = "/fetch/compression-dictionary/resources/register-dictionary.py?linkHeader";
+      const loadEvent = "load event";
+      let expectedEvents = fetchedNonDictionaryResources.concat([fetchedLinkElement, fetchedLinkHeader, loadEvent]);
+      assert_array_equals(sortedEvents.toSorted(), expectedEvents.toSorted(), "Expected fetches and loaded events observed.");
+
+      // Non-dictionary resources are fetched before dictionary resources.
+      let indexOfLinkElement = sortedEvents.indexOf(fetchedLinkElement);
+      let indexOfLinkHeader = sortedEvents.indexOf(fetchedLinkHeader);
+      for (const resource of fetchedNonDictionaryResources) {
+        let indexOfResource = sortedEvents.indexOf(resource);
+        assert_less_than(indexOfResource, indexOfLinkElement, `${resource} fetched before link element with rel=compression-dictionary.`);
+        assert_less_than(indexOfResource, indexOfLinkHeader, `${resource} fetched before Link header with rel=compression-dictionary.`);
+      };
+
+      // Fetching link header is postponed after page load.
+      let indexOfLoadEvent = sortedEvents.indexOf(loadEvent);
+      assert_less_than(indexOfLoadEvent, indexOfLinkHeader, `Link header with rel=compression-dictionary is fetched after page load.`);
+    }, "Timing of compression dictionary fetches for <link> element and Link header.");
+  </script>
+</body>
diff --git a/testing/web-platform/tests/fetch/compression-dictionary/resources/dictionary-fetch-timing-001-subframe.https.html b/testing/web-platform/tests/fetch/compression-dictionary/resources/dictionary-fetch-timing-001-subframe.https.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<script>
+  let timedEntries = [];
+  const observer = new PerformanceObserver((list) => {
+    list.getEntries().forEach(entry => {
+      const url = new URL(entry.name);
+      timedEntries.push({pathname: url.pathname, search: url.search, time: entry.fetchStart});
+    });
+  });
+  observer.observe({ type: "resource", buffered: true});
+</script>
+<link rel="compression-dictionary" href="./register-dictionary.py?linkElement">
+<link rel="stylesheet" href="/html/semantics/document-metadata/interactions-of-styling-and-scripting/stylesheet.py?delay=1">
+<script src="/common/utils.js"></script>
+<img src="/images/wide-gamut-pattern.png"/>
+<script>
+  window.addEventListener("load", _ => {
+    timedEntries.push({name: "load event", time: performance.now()});
+    function waitForDictionaryLoad() {
+      if (timedEntries.find(e => e.search === "?linkHeader") &&
+          timedEntries.find(e => e.search === "?linkElement")) {
+        let sortedEvents = timedEntries.
+            sort((entry1, entry2) => entry1.time - entry2.time).
+            map(entry => entry.name || entry.pathname + entry.search);
+        window.parent.postMessage({sortedEvents});
+        return;
+      }
+      (window.requestIdleCallback || requestAnimationFrame)(waitForDictionaryLoad);
+    }
+    waitForDictionaryLoad();
+  });
+</script>
diff --git a/testing/web-platform/tests/fetch/compression-dictionary/resources/dictionary-fetch-timing-001-subframe.https.html.headers b/testing/web-platform/tests/fetch/compression-dictionary/resources/dictionary-fetch-timing-001-subframe.https.html.headers
@@ -0,0 +1,2 @@
+Clear-Site-Data: "cache"
+Link: <./register-dictionary.py?linkHeader>; rel="compression-dictionary"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+Clear-Site-Data: "cache"`
	`2`	`+Link: <./register-dictionary.py?linkHeader>; rel="compression-dictionary"`