RenderBlocking: Implement element render blocking

This implements the following proposal: https://github.com/WICG/view-transitions/blob/main/document-render-blocking.md#blocking-element-id Bug: 1507845 [email protected], [email protected] Change-Id: I0c092aa9cd6ad0281ac7eb1e7b8871eb24d8f0cc Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5080596 Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Vladimir Levin <[email protected]> Reviewed-by: David Bokan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1237833}
web-platform-tests · Dec 15, 2023 · da43adc · da43adc
1 parent 562cd97
commit da43adc
Show file tree

Hide file tree

Showing 30 changed files with 918 additions and 67 deletions.
diff --git a/html/dom/render-blocking/document-render-blocking-partial.tentative.html b/html/dom/render-blocking/document-render-blocking-partial.tentative.html
diff --git a/html/dom/render-blocking/document-render-blocking.tentative.html b/html/dom/render-blocking/document-render-blocking.tentative.html
diff --git a/html/dom/render-blocking/element-render-blocking-001.tentative.html b/html/dom/render-blocking/element-render-blocking-001.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>`link rel=expect` defers frames until href element is parsed</title>
+
+<link rel=expect href="#last" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "blocking defers frames until full parsing");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-002.tentative.html b/html/dom/render-blocking/element-render-blocking-002.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Frames starts after href element is parsed before the end</title>
+
+<link rel=expect href="#third" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("third")));
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "blocking defers until needed element is parsed");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="third"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="fourth"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-003.tentative.html b/html/dom/render-blocking/element-render-blocking-003.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Adding link in the head has an effect</title>
+
+<script>
+let link = document.createElement("link");
+link.rel = "expect";
+link.href = "#last";
+link.blocking = "render";
+document.head.appendChild(link)
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "adding link in the head defers frames");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-004.tentative.html b/html/dom/render-blocking/element-render-blocking-004.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Removing link in the head has an effect</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+link.remove();
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing link in the head makes it no longer blocking");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-005.tentative.html b/html/dom/render-blocking/element-render-blocking-005.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Removing blocking attr in the head has an effect</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+link.blocking = ""
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing 'blocking' makes it no longer blocking");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-006.tentative.html b/html/dom/render-blocking/element-render-blocking-006.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Adding blocking attr in the head has an effect</title>
+
+<link id=link rel=expect href="#last">
+<script>
+link.blocking = "render"
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "adding 'blocking=render' in the head makes it blocking");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-007.tentative.html b/html/dom/render-blocking/element-render-blocking-007.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Media attribute that doesn't match makes the link not apply</title>
+
+<link rel=expect href="#last" blocking="render" media="(max-width: 10px)">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "link with non-matching media has no effect");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-008.tentative.html b/html/dom/render-blocking/element-render-blocking-008.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Media attribute changes in the head to apply</title>
+
+<link id=link rel=expect href="#last" blocking="render" media="(max-width: 10px)">
+<script>
+link.media = "(min-width: 10px)";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing media to matching causes link to have an effect");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-009.tentative.html b/html/dom/render-blocking/element-render-blocking-009.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Media attribute changes in the head to not apply</title>
+
+<link id=link rel=expect href="#last" blocking="render" media="(min-width: 10px)">
+<script>
+link.media = "(max-width: 10px)";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing media to non-matching makes it non blocking");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-010.tentative.html b/html/dom/render-blocking/element-render-blocking-010.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Rel attribute changes in the head to not apply</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+link.rel = "stylesheet";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing rel to non-expect makes it non blocking");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="second"></div>
+  <script>
+    jankMany(100, 10);
+  </script>
+  <div id="last"></div>
+</body>