From da43adc333052ac8808d17f4f92b9283e4dbd5dc Mon Sep 17 00:00:00 2001
From: Vladimir Levin <vmpstr@chromium.org>
Date: Thu, 14 Dec 2023 16:31:14 -0800
Subject: [PATCH] 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
R=bokan@chromium.org, khushalsagar@chromium.org

Change-Id: I0c092aa9cd6ad0281ac7eb1e7b8871eb24d8f0cc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5080596
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1237833}
---
 ...ent-render-blocking-partial.tentative.html | 34 -------------
 .../document-render-blocking.tentative.html   | 33 -------------
 ...element-render-blocking-001.tentative.html | 28 +++++++++++
 ...element-render-blocking-002.tentative.html | 37 ++++++++++++++
 ...element-render-blocking-003.tentative.html | 33 +++++++++++++
 ...element-render-blocking-004.tentative.html | 30 ++++++++++++
 ...element-render-blocking-005.tentative.html | 30 ++++++++++++
 ...element-render-blocking-006.tentative.html | 30 ++++++++++++
 ...element-render-blocking-007.tentative.html | 28 +++++++++++
 ...element-render-blocking-008.tentative.html | 30 ++++++++++++
 ...element-render-blocking-009.tentative.html | 30 ++++++++++++
 ...element-render-blocking-010.tentative.html | 30 ++++++++++++
 ...element-render-blocking-011.tentative.html | 30 ++++++++++++
 ...element-render-blocking-012.tentative.html | 30 ++++++++++++
 ...element-render-blocking-013.tentative.html | 30 ++++++++++++
 ...element-render-blocking-014.tentative.html | 36 ++++++++++++++
 ...element-render-blocking-015.tentative.html | 32 +++++++++++++
 ...element-render-blocking-016.tentative.html | 32 +++++++++++++
 ...element-render-blocking-017.tentative.html | 31 ++++++++++++
 ...element-render-blocking-018.tentative.html | 32 +++++++++++++
 ...element-render-blocking-019.tentative.html | 32 +++++++++++++
 ...element-render-blocking-020.tentative.html | 31 ++++++++++++
 ...element-render-blocking-021.tentative.html | 35 ++++++++++++++
 ...element-render-blocking-022.tentative.html | 32 +++++++++++++
 ...element-render-blocking-023.tentative.html | 31 ++++++++++++
 ...element-render-blocking-024.tentative.html | 36 ++++++++++++++
 ...element-render-blocking-025.tentative.html | 38 +++++++++++++++
 ...element-render-blocking-026.tentative.html | 38 +++++++++++++++
 ...element-render-blocking-027.tentative.html | 38 +++++++++++++++
 ...element-render-blocking-028.tentative.html | 48 +++++++++++++++++++
 30 files changed, 918 insertions(+), 67 deletions(-)
 delete mode 100644 html/dom/render-blocking/document-render-blocking-partial.tentative.html
 delete mode 100644 html/dom/render-blocking/document-render-blocking.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-001.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-002.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-003.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-004.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-005.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-006.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-007.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-008.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-009.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-010.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-011.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-012.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-013.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-014.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-015.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-016.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-017.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-018.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-019.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-020.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-021.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-022.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-023.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-024.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-025.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-026.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-027.tentative.html
 create mode 100644 html/dom/render-blocking/element-render-blocking-028.tentative.html

diff --git a/html/dom/render-blocking/document-render-blocking-partial.tentative.html b/html/dom/render-blocking/document-render-blocking-partial.tentative.html
deleted file mode 100644
index 89ab05ed845da6..00000000000000
--- a/html/dom/render-blocking/document-render-blocking-partial.tentative.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-  <html blocking=render>
-  <script src="/resources/testharness.js"></script>
-  <script src="/resources/testharnessreport.js"></script>
-  <script src="support/utils.js"></script>
-  <title>`blocking=render` defers frames until the attribute is set</title>
-  <script>
-    assert_implements(document.documentElement.blocking, "no blocking attribute");
-
-    promise_test(() => {
-      return new Promise((resolve, reject) => {
-        requestAnimationFrame(() => {
-          if (document.getElementById("last"))
-            reject();
-          else
-            resolve();
-        });
-      });
-    }, "blocking defers frames until removed");
-  </script>
-  </head>
-  <body>
-    <div id="first"></div>
-    <script>
-      jankMany(100, 10);
-      document.documentElement.blocking="";
-    </script>
-    <div id="second"></div>
-    <script>
-      jankMany(100, 10);
-    </script>
-    <div id="last"></div>
-  </body>
-</html>
diff --git a/html/dom/render-blocking/document-render-blocking.tentative.html b/html/dom/render-blocking/document-render-blocking.tentative.html
deleted file mode 100644
index 909029b73db059..00000000000000
--- a/html/dom/render-blocking/document-render-blocking.tentative.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-  <html blocking=render>
-  <script src="/resources/testharness.js"></script>
-  <script src="/resources/testharnessreport.js"></script>
-  <script src="support/utils.js"></script>
-  <title>`blocking=render` defers frames until complete document parsed</title>
-  <script>
-    assert_implements(document.documentElement.blocking, "no blocking attribute");
-
-    promise_test(() => {
-      return new Promise((resolve, reject) => {
-        requestAnimationFrame(() => {
-          if (document.getElementById("last"))
-            resolve();
-          else
-            reject();
-        });
-      });
-    }, "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>
-</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
new file mode 100644
index 00000000000000..9624b41a194946
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..ab0fd511156bc9
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..eb3a347a6ebbb7
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..2c50f2d362a54c
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..04cdab467deff3
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..1c9da255a62250
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..df8f9ae3d12581
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..c2458a0bab3124
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..d765ac8a5d3c9b
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..7ef6a1baf35b46
--- /dev/null
+++ 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>
diff --git a/html/dom/render-blocking/element-render-blocking-011.tentative.html b/html/dom/render-blocking/element-render-blocking-011.tentative.html
new file mode 100644
index 00000000000000..31df9b068c01b5
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-011.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 apply</title>
+
+<link id=link rel=stylesheet href="#last" blocking="render">
+<script>
+link.rel = "expect";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing rel to expect in the head causes it to be 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-012.tentative.html b/html/dom/render-blocking/element-render-blocking-012.tentative.html
new file mode 100644
index 00000000000000..8f2594d25903a6
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-012.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>Href attribute changes in the head to apply</title>
+
+<link id=link rel=expect href="" blocking="render">
+<script>
+link.href = "#last";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "adding href 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-013.tentative.html b/html/dom/render-blocking/element-render-blocking-013.tentative.html
new file mode 100644
index 00000000000000..9d65bd96b73189
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-013.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>Href attribute changes in the head to not apply</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+link.href = "";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing href 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-014.tentative.html b/html/dom/render-blocking/element-render-blocking-014.tentative.html
new file mode 100644
index 00000000000000..d042b96b64370c
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-014.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Blocking link added in the body has no effect</title>
+
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "link in the body has no effect");
+</script>
+</head>
+<body>
+<link rel=expect href="#last" blocking="render">
+<script>
+let link = document.createElement("link");
+link.rel = "rel";
+link.href = "#last";
+link.blocking = "render";
+document.head.appendChild(link);
+</script>
+
+  <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-015.tentative.html b/html/dom/render-blocking/element-render-blocking-015.tentative.html
new file mode 100644
index 00000000000000..f7ac0b1015d796
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-015.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Blocking link removed in the body has an effect</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing link the body makes it non blocking");
+</script>
+</head>
+<body>
+<script>
+link.remove();
+</script>
+
+  <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-016.tentative.html b/html/dom/render-blocking/element-render-blocking-016.tentative.html
new file mode 100644
index 00000000000000..d32a0468e79b41
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-016.tentative.html
@@ -0,0 +1,32 @@
+<!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 body has an effect</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing 'blocking' in the body makes it non blocking");
+</script>
+</head>
+<body>
+<script>
+link.blocking = "";
+</script>
+
+  <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-017.tentative.html b/html/dom/render-blocking/element-render-blocking-017.tentative.html
new file mode 100644
index 00000000000000..d3a6046cbb37f9
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-017.tentative.html
@@ -0,0 +1,31 @@
+<!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 body has no effect</title>
+
+<link id=link rel=expect href="#last">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "adding 'blocking=render' in the body has no effect");
+</script>
+</head>
+<body>
+<script>
+link.blocking = "render"
+</script>
+  <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-018.tentative.html b/html/dom/render-blocking/element-render-blocking-018.tentative.html
new file mode 100644
index 00000000000000..0d7402201accb0
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-018.tentative.html
@@ -0,0 +1,32 @@
+<!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 body to apply, but has no effect</title>
+
+<link id=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();
+  });
+}, "changing media to matching in the body has no effect");
+</script>
+</head>
+<body>
+<script>
+link.media = "(min-width: 10px)";
+</script>
+
+  <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-019.tentative.html b/html/dom/render-blocking/element-render-blocking-019.tentative.html
new file mode 100644
index 00000000000000..fea9e3a2b21821
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-019.tentative.html
@@ -0,0 +1,32 @@
+<!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 body to not apply</title>
+
+<link id=link rel=expect href="#last" blocking="render" media="(min-width: 10px)">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing media to non-matching in the body makes it non blocking");
+</script>
+</head>
+<body>
+<script>
+link.media = "(max-width: 10px)";
+</script>
+
+  <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-020.tentative.html b/html/dom/render-blocking/element-render-blocking-020.tentative.html
new file mode 100644
index 00000000000000..7fc0fe19bbae57
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-020.tentative.html
@@ -0,0 +1,31 @@
+<!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 body to not apply</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing rel to non-expect in the body makes it non blocking");
+</script>
+</head>
+<body>
+<script>
+link.rel = "stylesheet";
+</script>
+  <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-021.tentative.html b/html/dom/render-blocking/element-render-blocking-021.tentative.html
new file mode 100644
index 00000000000000..29430349f04689
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-021.tentative.html
@@ -0,0 +1,35 @@
+<!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 body to apply, but has no effect</title>
+
+<link id=link rel=stylesheet href="#last" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "changing rel to expect in the body has no effect");
+</script>
+</head>
+<body>
+<script>
+link.rel = "expect";
+</script>
+  <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="last"></div>
+</body>
diff --git a/html/dom/render-blocking/element-render-blocking-022.tentative.html b/html/dom/render-blocking/element-render-blocking-022.tentative.html
new file mode 100644
index 00000000000000..6548c9ec4df211
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-022.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Href attribute changes in the body to apply, but has no effect</title>
+
+<link id=link rel=expect href="" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "adding href in the body has no effect");
+</script>
+</head>
+<body>
+<script>
+link.href = "#last";
+</script>
+
+  <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-023.tentative.html b/html/dom/render-blocking/element-render-blocking-023.tentative.html
new file mode 100644
index 00000000000000..c3661bcaa6a9c3
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-023.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Href attribute changes in the body to not apply</title>
+
+<link id=link rel=expect href="#last" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing href in the body makes it non blocking");
+</script>
+</head>
+<body>
+<script>
+link.href = "";
+</script>
+  <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-024.tentative.html b/html/dom/render-blocking/element-render-blocking-024.tentative.html
new file mode 100644
index 00000000000000..c98022cfeabef1
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-024.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Unknown href causes the whole document to be blocked</title>
+
+<link rel=expect href="#unknown" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "unknown href causes the whole document to be blocked");
+</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-025.tentative.html b/html/dom/render-blocking/element-render-blocking-025.tentative.html
new file mode 100644
index 00000000000000..29868b92cbc76a
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-025.tentative.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Adding an id to parsed element satisfies render block</title>
+
+<link rel=expect href="#first" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("first")));
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "adding an id in the body satisfies render block");
+</script>
+</head>
+<body>
+  <div id="willbefirst"></div>
+  <script>
+    willbefirst.id = "first";
+    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-026.tentative.html b/html/dom/render-blocking/element-render-blocking-026.tentative.html
new file mode 100644
index 00000000000000..dc23211b8b00d2
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-026.tentative.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Removing id keeps render block satisfied</title>
+
+<link rel=expect href="#first" blocking="render">
+<script>
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("wasfirst")));
+    t.step(() => assert_false(!!document.getElementById("last")));
+    t.done();
+  });
+}, "removing id after it was renderer keeps render block satisfied");
+</script>
+</head>
+<body>
+  <div id="first"></div>
+  <script>
+    first.id = "wasfirst";
+    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-027.tentative.html b/html/dom/render-blocking/element-render-blocking-027.tentative.html
new file mode 100644
index 00000000000000..5b8a5eb24d5e97
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-027.tentative.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Unknown href causes the whole document to be blocked</title>
+
+<link id=link rel=expect href="#unknown" blocking="render">
+<script>
+link.href = "#stillunknown";
+
+async_test((t) => {
+  requestAnimationFrame(() => {
+    t.step(() => assert_true(!!document.getElementById("last")));
+    t.done();
+  });
+}, "unknown href causes the whole document to be blocked (with href changes!)");
+</script>
+</head>
+<body>
+  <div id="notfirst"></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-028.tentative.html b/html/dom/render-blocking/element-render-blocking-028.tentative.html
new file mode 100644
index 00000000000000..57ba3d602602d5
--- /dev/null
+++ b/html/dom/render-blocking/element-render-blocking-028.tentative.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/utils.js"></script>
+<title>Multiple links and all but one removed</title>
+
+<link rel=expect href="#third" blocking="render">
+<link id=one rel=expect href="#third" blocking="render">
+<link id=two rel=expect href="#third" blocking="render">
+<link id=three rel=expect href="#third" blocking="render">
+<link id=four 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();
+  });
+}, "removing some links but not all keeps at least the matching link blocking");
+
+one.remove();
+two.remove();
+</script>
+</head>
+<body>
+<script>
+three.remove();
+four.remove();
+</script>
+  <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>