Add some tentative WPT tests for render-blocking stylesheets

This patch adds a minimal test suite required by the HTML spec PR for render-blocking: whatwg/html#7474 Current browsers should already pass these tests. Since the Blink test runner forced frame updates, this patch also adds a NoForcedFrameUpdates flag to allow the tests to be run in a virtual test suite that doesn't force frame updates. Bug: 1271296 Change-Id: I66f9c13d461fc4838a26ee3d1a66db9d21289ef6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3417175 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Reviewed-by: Domenic Denicola <domenic@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#963779}
web-platform-tests · Jan 26, 2022 · 9b2f957 · 9b2f957
1 parent f70d614
commit 9b2f957
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 0 deletions.
diff --git a/html/dom/render-blocking-mechanism/parser-inserted-style-element.tentative.html b/html/dom/render-blocking-mechanism/parser-inserted-style-element.tentative.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>Parser-inserted style elements are implicitly render-blocking</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-render-blocking.js"></script>
+<script>
+// Test case must be set up before the stylesheet, because the stylesheet is
+// script-blocking, which means we can't set it up while the stylesheet is
+// loading.
+test_render_blocking(() => {
+  let color = getComputedStyle(document.querySelector('.target')).color;
+  assert_equals(color, 'rgb(255, 0, 0)');
+}, 'Render-blocking stylesheet is applied');
+</script>
+<style>
+@import url('support/target-red.css?pipe=trickle(d1)');
+</style>
+<div class="target">
+  This should be red
+</div>
diff --git a/html/dom/render-blocking-mechanism/parser-inserted-stylesheet-link.tentative.html b/html/dom/render-blocking-mechanism/parser-inserted-stylesheet-link.tentative.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>Parser-inserted stylesheet links are implicitly render-blocking</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-render-blocking.js"></script>
+<script>
+// Test case must be set up before the stylesheet, because the stylesheet is
+// script-blocking, which means we can't set it up while the stylesheet is
+// loading.
+test_render_blocking(() => {
+  let color = getComputedStyle(document.querySelector('.target')).color;
+  assert_equals(color, 'rgb(255, 0, 0)');
+}, 'Render-blocking stylesheet is applied');
+</script>
+<link rel="stylesheet" href="support/target-red.css?pipe=trickle(d1)">
+<div class="target">
+  This should be red
+</div>
diff --git a/html/dom/render-blocking-mechanism/support/target-red.css b/html/dom/render-blocking-mechanism/support/target-red.css
@@ -0,0 +1,3 @@
+.target {
+  color: red;
+}
diff --git a/html/dom/render-blocking-mechanism/support/test-render-blocking.js b/html/dom/render-blocking-mechanism/support/test-render-blocking.js
@@ -0,0 +1,46 @@
+class LoadObserver {
+  constructor(object) {
+    this.finishTime = null;
+    this.load = new Promise((resolve, reject) => {
+      object.onload = ev => {
+        this.finishTime = ev.timeStamp;
+        resolve(ev);
+      };
+      object.onerror = reject;
+    });
+  }
+
+  get finished() {
+    return this.finishTime !== null;
+  }
+}
+
+// Error margin for comparing timestamps of paint and load events, in case they
+// are reported by different threads.
+const epsilon = 50;
+
+function test_render_blocking(finalTest, finalTestTitle) {
+  // Ideally, we should observe the 'load' event on the specific render-blocking
+  // elements. However, this is not possible for script-blocking stylesheets, so
+  // we have to observe the 'load' event on 'window' instead.
+  // TODO(xiaochengh): Add tests for other types of render-blocking elements and
+  // observe the specific 'load' events on them.
+  const loadObserver = new LoadObserver(window);
+
+  promise_test(async test => {
+    assert_implements(window.PerformancePaintTiming);
+
+    await test.step_wait(() => performance.getEntriesByType('paint').length);
+
+    assert_true(loadObserver.finished);
+    for (let entry of performance.getEntriesByType('paint')) {
+      assert_greater_than(entry.startTime, loadObserver.finishTime - epsilon,
+                          `${entry.name} should occur after loading render-blocking resources`);
+    }
+  }, 'Rendering is blocked before render-blocking resources are loaded');
+
+  promise_test(test => {
+    return loadObserver.load.then(() => finalTest(test));
+  }, finalTestTitle);
+}
+