forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add more tentative WPT tests for render-blocking elements (web-platfo…
…rm-tests#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>
- Loading branch information
1 parent
6a50ce5
commit 53759a0
Showing
5 changed files
with
121 additions
and
4 deletions.
There are no files selected for viewing
27 changes: 27 additions & 0 deletions
27
html/dom/render-blocking/parser-inserted-preload-link.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
34 changes: 34 additions & 0 deletions
34
html/dom/render-blocking/script-inserted-preload-link.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
26 changes: 26 additions & 0 deletions
26
html/dom/render-blocking/script-inserted-style-element.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
27 changes: 27 additions & 0 deletions
27
html/dom/render-blocking/script-inserted-stylesheet-link.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters