Refactor wpt for cross-origin css fetched from cache
This CL is to de-flake the wpt
resource-timing/no-entries-for-cross-origin-css-fetched-memory-cache.sub.html.
It refactors the test in a way that makes sure the css loads in the main
frame after the same css has already loaded in the iframe so that it
comes from cache. It passed 50 runs locally.
Bug: 1357760
Change-Id: Ia1096c877336c5f56dadb5c65035aab1e6a520cd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4234154
Reviewed-by: Ian Clelland <iclelland@chromium.org>
Commit-Queue: Hao Liu <haoliuk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1105039}
diff --git a/resource-timing/no-entries-for-cross-origin-css-fetched-memory-cache.sub.html b/resource-timing/no-entries-for-cross-origin-css-fetched-memory-cache.sub.html
index 2cfcfc7..6b60305 100644
--- a/resource-timing/no-entries-for-cross-origin-css-fetched-memory-cache.sub.html
+++ b/resource-timing/no-entries-for-cross-origin-css-fetched-memory-cache.sub.html
@@ -4,35 +4,50 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/get-host-info.sub.js"></script>
+<!--
+ This test is mostly the same as no-entries-for-cross-origin-css-fetched.html
+ but loads the sub-resources from another Document (<iframe>) earlier before
+ they are loaded via cross-origin CSSs, so that the resources are loaded from
+ cache and therefore no resource timing entries are created.
+-->
+
<body>
-<script>
-// This test is mostly the same as no-entries-for-cross-origin-css-fetched.html
-// but loads the subresources from another Document (<iframe>) earlier before
-// they are loaded via cross-origin CSSs, because the ResourceTiming processing
-// goes through a different code path in Chrome when served from MemoryCache
-// (`ResourceFetcher::DidLoadResourceFromMemoryCache`).
-function runTest() {
- const link = document.createElement("LINK");
- link.rel = "stylesheet";
- link.id = "cross_origin_style";
- link.href = "http://{{hosts[][www1]}}:{{ports[http][1]}}/resource-timing/resources/nested.css";
- document.body.appendChild(link);
-}
-</script>
-<script>
- const t = async_test("Make sure that resources fetched by cross origin CSS are not in the timeline.");
- window.addEventListener("load", function() {
- // A timeout is needed as entries are not guaranteed to be in the timeline before onload triggers.
- t.step_timeout(function() {
- const url = (new URL(document.getElementById("cross_origin_style").href));
- const prefix = url.protocol + "//" + url.host;
- assert_equals(performance.getEntriesByName(prefix + "/resource-timing/resources/resource_timing_test0.css?id=n1").length, 0, "Import should not be in timeline");
- assert_equals(performance.getEntriesByName(prefix + "/fonts/Ahem.ttf?id=n1").length, 0, "Font should not be in timeline");
- assert_equals(performance.getEntriesByName(prefix + "/resource-timing/resources/blue.png?id=n1").length, 0, "Image should not be in timeline");
- t.done();
- }, 200);
- });
-</script>
-<iframe src="resources/no-entries-for-cross-origin-css-fetched-memory-cache-iframe.sub.html" onload="runTest()"></iframe>
-<ol>Some content</ol>
+ <script>
+ const addLink = () => {
+ return new Promise(resolve => {
+ const link = document.createElement('LINK');
+ link.rel = 'stylesheet';
+ link.id = 'cross_origin_style';
+ link.href = 'http://{{hosts[][www1]}}:{{ports[http][1]}}/resource-timing/resources/nested.css';
+ link.addEventListener('load', resolve);
+ document.body.appendChild(link);
+ });
+ }
+
+ const addFrame = () => {
+ return new Promise(resolve => {
+ const iframe = document.createElement('iframe');
+ iframe.src = 'resources/no-entries-for-cross-origin-css-fetched-memory-cache-iframe.sub.html';
+ iframe.addEventListener('load', resolve);
+ document.body.appendChild(iframe);
+ });
+ }
+
+ promise_test(async t => {
+ await addFrame();
+ await addLink();
+ // Assert no resource timing entries are created when the link is attached.
+ const url = (new URL(document.getElementById('cross_origin_style').href));
+ const prefix = url.protocol + '//' + url.host;
+ assert_equals(performance.getEntriesByName(
+ prefix + '/resource-timing/resources/resource_timing_test0.css?id=n1').length, 0,
+ 'Import should not be in timeline');
+ assert_equals(performance.getEntriesByName(
+ prefix + '/fonts/Ahem.ttf?id=n1').length, 0, 'Font should not be in timeline');
+ assert_equals(performance.getEntriesByName(
+ prefix + '/resource-timing/resources/blue.png?id=n1').length, 0,
+ 'Image should not be in timeline');
+ }, 'Make sure that resources fetched by cross origin CSS are not in the timeline.');
+ </script>
+ <ol>Some content</ol>
</body>
