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
web-platform-tests · Jan 26, 2022 · 4de7e1f · 4de7e1f
1 parent f94b510
commit 4de7e1f
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 0 deletions.
diff --git a/dom/render-blocking-mechanism/parser-inserted-style-element.tentative.html b/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/dom/render-blocking-mechanism/parser-inserted-stylesheet.tentative.html b/dom/render-blocking-mechanism/parser-inserted-stylesheet.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/dom/render-blocking-mechanism/support/target-red.css b/dom/render-blocking-mechanism/support/target-red.css
@@ -0,0 +1,3 @@
+.target {
+  color: red;
+}
diff --git a/dom/render-blocking-mechanism/support/test-render-blocking.js b/dom/render-blocking-mechanism/support/test-render-blocking.js
@@ -0,0 +1,39 @@
+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;
+  }
+}
+
+function test_render_blocking(finalTest, finalTestTitle) {
+  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,
+                          `${entry.name} should occur after loading render-blocking resources`);
+    }
+  }, 'Rendering is blocked before render-blocking resources are loaded');
+
+  if (finalTest) {
+    promise_test(() => {
+      return loadObserver.load.then(finalTest);
+    }, finalTestTitle);
+  }
+}
+