[ResourceTiming]: Update cached-resources tests

This change updates the resource_reuse.sub.html and single-entry-per-resource.html Resource Timing WPTs. They covered the same case; when no network request is issued for a resource, there should be no associated PerformanceResourceTiming entry. The tests have been consolidated into cached-image-gets-single-entry.html and the style updated to conform to the guidelines in wpt/resource-timing/CodingConventions.md. GithubIssue: w3c/resource-timing#254 Bug: 1171767 Change-Id: Ibdc67dcedf70b96e317ace165eed4e5ec897e996 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3138444 Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Commit-Queue: Tom McKee <tommckee@chromium.org> Cr-Commit-Position: refs/heads/main@{#918104}
web-platform-tests · Sep 3, 2021 · 24836df · 24836df
1 parent e1be3c7
commit 24836df
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 142 deletions.
diff --git a/resource-timing/cached-image-gets-single-entry.html b/resource-timing/cached-image-gets-single-entry.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Resource Timing: test behavior for cached resources</title>
+<link rel="author" title="Google" href="http://www.google.com/" />
+<link rel="help" href="https://www.w3.org/TR/resource-timing-2/"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/observe-entry.js"></script>
+</head>
+<body>
+<h1>Description</h1>
+<p>Test that a reused resource only appears in the buffer once.</p>
+<script>
+// Need our own image loading helper because the one in resource-loaders.js
+// is desgined to always side-step the HTTP cache but this test relies on the
+// second request being resolved from the cache.
+const load_image = path => new Promise(resolve => {
+  const img = document.createElement('img');
+  img.onload = img.onerror = () => resolve();
+  img.src = path;
+  document.body.append(img);
+});
+
+promise_test(async () => {
+  const blue = "resources/blue.png";
+
+  // First request. Should appear in the timeline.
+  await load_image(blue + "?cacheable");
+
+  // Second request. Should not appear in the timeline.
+  await load_image(blue + "?cacheable");
+
+  // Third request. When this request shows up in the timeline, we know that, if
+  // the second request would generate an entry, that entry would have already
+  // shown up in the timeline. Without this, we'd need to guess at how long to
+  // wait which tends to be flaky.
+  await load_image(blue + "?avoid-cache");
+
+  const entries = await new Promise(resolve => {
+    const accumulator = [];
+    new PerformanceObserver(entry_list => {
+      entry_list.getEntries().forEach(entry => {
+        if (!entry.name.includes("blue.png")) {
+          // Ignore resources other than blue images.
+          return;
+        }
+        accumulator.push(entry);
+
+        // Once we see the 'canary' resource, we don't need to wait anymore.
+        if (entry.name.endsWith('avoid-cache')) {
+          resolve(accumulator);
+        }
+      });
+    }).observe({'type': 'resource', 'buffered': true});
+  });
+
+  assert_equals(entries.length, 2, "There must be exactly 2 entries in the " +
+    "Performance Timeline");
+  assert_true(entries[0].name.endsWith("blue.png?cacheable"));
+  assert_true(entries[1].name.endsWith("blue.png?avoid-cache"));
+}, "When a resource is resolved from cache, there must not be a " +
+  "corresponding entry in the Performance Timeline");
+</script>
+</body>
+</html>
diff --git a/resource-timing/resource_reuse.sub.html b/resource-timing/resource_reuse.sub.html
diff --git a/resource-timing/single-entry-per-resource.html b/resource-timing/single-entry-per-resource.html