Add more tentative WPT tests for render-blocking elements (#32669)

This patch adds more WPT tests for: - Parser-inserted preload links - Script-inserted stylesheet and preload links - Script-inserted style elements Bug: 1271296 Change-Id: I8f6ffc6a191370410da56b64d7ff8dba852e2732 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3435366 Reviewed-by: Domenic Denicola <domenic@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#967088} Co-authored-by: Xiaocheng Hu <xiaochengh@chromium.org>
web-platform-tests · Jun 26, 2023 · 1402089 · 1402089
1 parent bb08bdb
commit 1402089
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 4 deletions.
diff --git a/html/dom/render-blocking/parser-inserted-preload-link.tentative.html b/html/dom/render-blocking/parser-inserted-preload-link.tentative.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>Parser-inserted preload links with "blocking=render" are render-blocking</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-render-blocking.js"></script>
+
+<link id="font-preload" rel="preload" as="font" blocking="render" crossorigin
+      href="/fonts/Ahem.ttf?pipe=trickle(d1)">
+<style>
+@font-face {
+  font-family: custom-font;
+  src: url('/fonts/Ahem.ttf?pipe=trickle(d1)');
+}
+</style>
+<span id="target" style="font: 20px/1 custom-font">Lorem ipsum</span>
+
+<script>
+const preload = document.getElementById('font-preload');
+test_render_blocking(
+    preload,
+    () => {
+      const target = document.getElementById('target');
+      assert_equals(target.offsetHeight, 20);
+      assert_equals(target.offsetWidth, 220);
+    },
+    'Render-blocking web font is applied');
+</script>
diff --git a/html/dom/render-blocking/script-inserted-preload-link.tentative.html b/html/dom/render-blocking/script-inserted-preload-link.tentative.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>Script-inserted preload links with "blocking=render" are render-blocking</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-render-blocking.js"></script>
+
+<script>
+const preload = document.createElement('link');
+preload.rel = 'preload';
+preload.as = 'font';
+preload.href = '/fonts/Ahem.ttf?pipe=trickle(d1)';
+preload.crossOrigin = 'anonymous';
+preload.blocking = 'render';
+document.head.appendChild(preload);
+</script>
+
+<style>
+@font-face {
+  font-family: custom-font;
+  src: url('/fonts/Ahem.ttf?pipe=trickle(d1)');
+}
+</style>
+<span id="target" style="font: 20px/1 custom-font">Lorem ipsum</span>
+
+<script>
+test_render_blocking(
+    preload,
+    () => {
+      const target = document.getElementById('target');
+      assert_equals(target.offsetHeight, 20);
+      assert_equals(target.offsetWidth, 220);
+    },
+    'Render-blocking web font is applied');
+</script>
diff --git a/html/dom/render-blocking/script-inserted-style-element.tentative.html b/html/dom/render-blocking/script-inserted-style-element.tentative.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>Script-inserted style elements with "blocking=render" are render-blocking</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-render-blocking.js"></script>
+
+<script>
+const style = document.createElement('style');
+style.blocking = 'render';
+style.textContent = "@import url('support/target-red.css?pipe=trickle(d1)');";
+document.head.appendChild(style);
+</script>
+
+<div class="target">
+  This should be red
+</div>
+
+<script>
+test_render_blocking(
+    style,
+    () => {
+      let color = getComputedStyle(document.querySelector('.target')).color;
+      assert_equals(color, 'rgb(255, 0, 0)');
+    },
+    'Render-blocking stylesheet is applied');
+</script>
diff --git a/html/dom/render-blocking/script-inserted-stylesheet-link.tentative.html b/html/dom/render-blocking/script-inserted-stylesheet-link.tentative.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>Script-inserted stylesheet links with "blocking=render" are render-blocking</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-render-blocking.js"></script>
+
+<script>
+const stylesheet = document.createElement('link');
+stylesheet.rel = 'stylesheet';
+stylesheet.href = 'support/target-red.css?pipe=trickle(d1)';
+stylesheet.blocking = 'render';
+document.head.appendChild(stylesheet);
+</script>
+
+<div class="target">
+  This should be red
+</div>
+
+<script>
+test_render_blocking(
+    stylesheet,
+    () => {
+      let color = getComputedStyle(document.querySelector('.target')).color;
+      assert_equals(color, 'rgb(255, 0, 0)');
+    },
+    'Render-blocking stylesheet is applied');
+</script>
diff --git a/html/dom/render-blocking/support/test-render-blocking.js b/html/dom/render-blocking/support/test-render-blocking.js
@@ -57,13 +57,16 @@ function createAnimationTarget() {
 // are reported by different threads.
 const epsilon = 50;
 
-function test_render_blocking(finalTest, finalTestTitle) {
+function test_render_blocking(optional_element, 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);
+  if (!(optional_element instanceof HTMLElement)) {
+    finalTestTitle = finalTest;
+    finalTest = optional_element;
+    optional_element = undefined;
+  }
+  const loadObserver = new LoadObserver(optional_element || window);
 
   promise_test(async test => {
     assert_implements(window.PerformancePaintTiming);