Skip to content

Commit da43adc

Browse files
vmpstrchromium-wpt-export-bot
vmpstr
authored and
chromium-wpt-export-bot
committed
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}
1 parent 562cd97 commit da43adc

30 files changed

+918
-67
lines changed

‎html/dom/render-blocking/document-render-blocking-partial.tentative.html

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎html/dom/render-blocking/document-render-blocking.tentative.html

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎html/dom/render-blocking/element-render-blocking-001.tentative.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>`link rel=expect` defers frames until href element is parsed</title>
7+
8+
<link rel=expect href="#last" blocking="render">
9+
<script>
10+
async_test((t) => {
11+
requestAnimationFrame(() => {
12+
t.step(() => assert_true(!!document.getElementById("last")));
13+
t.done();
14+
});
15+
}, "blocking defers frames until full parsing");
16+
</script>
17+
</head>
18+
<body>
19+
<div id="first"></div>
20+
<script>
21+
jankMany(100, 10);
22+
</script>
23+
<div id="second"></div>
24+
<script>
25+
jankMany(100, 10);
26+
</script>
27+
<div id="last"></div>
28+
</body>

‎html/dom/render-blocking/element-render-blocking-002.tentative.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Frames starts after href element is parsed before the end</title>
7+
8+
<link rel=expect href="#third" blocking="render">
9+
<script>
10+
async_test((t) => {
11+
requestAnimationFrame(() => {
12+
t.step(() => assert_true(!!document.getElementById("third")));
13+
t.step(() => assert_false(!!document.getElementById("last")));
14+
t.done();
15+
});
16+
}, "blocking defers until needed element is parsed");
17+
</script>
18+
</head>
19+
<body>
20+
<div id="first"></div>
21+
<script>
22+
jankMany(100, 10);
23+
</script>
24+
<div id="second"></div>
25+
<script>
26+
jankMany(100, 10);
27+
</script>
28+
<div id="third"></div>
29+
<script>
30+
jankMany(100, 10);
31+
</script>
32+
<div id="fourth"></div>
33+
<script>
34+
jankMany(100, 10);
35+
</script>
36+
<div id="last"></div>
37+
</body>

‎html/dom/render-blocking/element-render-blocking-003.tentative.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Adding link in the head has an effect</title>
7+
8+
<script>
9+
let link = document.createElement("link");
10+
link.rel = "expect";
11+
link.href = "#last";
12+
link.blocking = "render";
13+
document.head.appendChild(link)
14+
15+
async_test((t) => {
16+
requestAnimationFrame(() => {
17+
t.step(() => assert_true(!!document.getElementById("last")));
18+
t.done();
19+
});
20+
}, "adding link in the head defers frames");
21+
</script>
22+
</head>
23+
<body>
24+
<div id="first"></div>
25+
<script>
26+
jankMany(100, 10);
27+
</script>
28+
<div id="second"></div>
29+
<script>
30+
jankMany(100, 10);
31+
</script>
32+
<div id="last"></div>
33+
</body>

‎html/dom/render-blocking/element-render-blocking-004.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Removing link in the head has an effect</title>
7+
8+
<link id=link rel=expect href="#last" blocking="render">
9+
<script>
10+
link.remove();
11+
12+
async_test((t) => {
13+
requestAnimationFrame(() => {
14+
t.step(() => assert_false(!!document.getElementById("last")));
15+
t.done();
16+
});
17+
}, "removing link in the head makes it no longer blocking");
18+
</script>
19+
</head>
20+
<body>
21+
<div id="first"></div>
22+
<script>
23+
jankMany(100, 10);
24+
</script>
25+
<div id="second"></div>
26+
<script>
27+
jankMany(100, 10);
28+
</script>
29+
<div id="last"></div>
30+
</body>

‎html/dom/render-blocking/element-render-blocking-005.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Removing blocking attr in the head has an effect</title>
7+
8+
<link id=link rel=expect href="#last" blocking="render">
9+
<script>
10+
link.blocking = ""
11+
12+
async_test((t) => {
13+
requestAnimationFrame(() => {
14+
t.step(() => assert_false(!!document.getElementById("last")));
15+
t.done();
16+
});
17+
}, "removing 'blocking' makes it no longer blocking");
18+
</script>
19+
</head>
20+
<body>
21+
<div id="first"></div>
22+
<script>
23+
jankMany(100, 10);
24+
</script>
25+
<div id="second"></div>
26+
<script>
27+
jankMany(100, 10);
28+
</script>
29+
<div id="last"></div>
30+
</body>

‎html/dom/render-blocking/element-render-blocking-006.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Adding blocking attr in the head has an effect</title>
7+
8+
<link id=link rel=expect href="#last">
9+
<script>
10+
link.blocking = "render"
11+
12+
async_test((t) => {
13+
requestAnimationFrame(() => {
14+
t.step(() => assert_true(!!document.getElementById("last")));
15+
t.done();
16+
});
17+
}, "adding 'blocking=render' in the head makes it blocking");
18+
</script>
19+
</head>
20+
<body>
21+
<div id="first"></div>
22+
<script>
23+
jankMany(100, 10);
24+
</script>
25+
<div id="second"></div>
26+
<script>
27+
jankMany(100, 10);
28+
</script>
29+
<div id="last"></div>
30+
</body>

‎html/dom/render-blocking/element-render-blocking-007.tentative.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Media attribute that doesn't match makes the link not apply</title>
7+
8+
<link rel=expect href="#last" blocking="render" media="(max-width: 10px)">
9+
<script>
10+
async_test((t) => {
11+
requestAnimationFrame(() => {
12+
t.step(() => assert_false(!!document.getElementById("last")));
13+
t.done();
14+
});
15+
}, "link with non-matching media has no effect");
16+
</script>
17+
</head>
18+
<body>
19+
<div id="first"></div>
20+
<script>
21+
jankMany(100, 10);
22+
</script>
23+
<div id="second"></div>
24+
<script>
25+
jankMany(100, 10);
26+
</script>
27+
<div id="last"></div>
28+
</body>

‎html/dom/render-blocking/element-render-blocking-008.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Media attribute changes in the head to apply</title>
7+
8+
<link id=link rel=expect href="#last" blocking="render" media="(max-width: 10px)">
9+
<script>
10+
link.media = "(min-width: 10px)";
11+
12+
async_test((t) => {
13+
requestAnimationFrame(() => {
14+
t.step(() => assert_true(!!document.getElementById("last")));
15+
t.done();
16+
});
17+
}, "changing media to matching causes link to have an effect");
18+
</script>
19+
</head>
20+
<body>
21+
<div id="first"></div>
22+
<script>
23+
jankMany(100, 10);
24+
</script>
25+
<div id="second"></div>
26+
<script>
27+
jankMany(100, 10);
28+
</script>
29+
<div id="last"></div>
30+
</body>

‎html/dom/render-blocking/element-render-blocking-009.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Media attribute changes in the head to not apply</title>
7+
8+
<link id=link rel=expect href="#last" blocking="render" media="(min-width: 10px)">
9+
<script>
10+
link.media = "(max-width: 10px)";
11+
12+
async_test((t) => {
13+
requestAnimationFrame(() => {
14+
t.step(() => assert_false(!!document.getElementById("last")));
15+
t.done();
16+
});
17+
}, "changing media to non-matching makes it non blocking");
18+
</script>
19+
</head>
20+
<body>
21+
<div id="first"></div>
22+
<script>
23+
jankMany(100, 10);
24+
</script>
25+
<div id="second"></div>
26+
<script>
27+
jankMany(100, 10);
28+
</script>
29+
<div id="last"></div>
30+
</body>

‎html/dom/render-blocking/element-render-blocking-010.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="support/utils.js"></script>
6+
<title>Rel attribute changes in the head to not apply</title>
7+
8+
<link id=link rel=expect href="#last" blocking="render">
9+
<script>
10+
link.rel = "stylesheet";
11+
12+
async_test((t) => {
13+
requestAnimationFrame(() => {
14+
t.step(() => assert_false(!!document.getElementById("last")));
15+
t.done();
16+
});
17+
}, "changing rel to non-expect makes it non blocking");
18+
</script>
19+
</head>
20+
<body>
21+
<div id="first"></div>
22+
<script>
23+
jankMany(100, 10);
24+
</script>
25+
<div id="second"></div>
26+
<script>
27+
jankMany(100, 10);
28+
</script>
29+
<div id="last"></div>
30+
</body>

0 commit comments

Comments
 (0)