1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>This test validates the render blocking status of resources.</title>
<link rel="help" href="https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Start of test cases -->
<script>
// Dynamic style using document.write in head
document.write(`
<link rel=stylesheet
href='resources/empty_style.css?stylesheet-head-dynamic-docWrite'>
`);
document.write(`
<link rel=stylesheet
href='resources/empty_style.css?stylesheet-head-dynamic-docWrite-print'
media=print>
`);
</script>
<link rel=stylesheet href="resources/empty_style.css?stylesheet-head">
<link rel=stylesheet href="resources/empty_style.css?stylesheet-head-media-print"
media=print>
<link rel="alternate stylesheet"
href="resources/empty_style.css?stylesheet-head-alternate">
<link rel=preload as=style href="resources/empty_style.css?link-style-head-preload">
<link rel=preload as=style href="resources/empty_style.css?link-style-preload-used">
<link rel=stylesheet href="resources/importer.css?stylesheet-importer-head">
<link rel=stylesheet id="link-head-remove-attr" blocking="render"
href="resources/empty_style.css?stylesheet-head-blocking-render-remove-attr">
<link rel=modulepreload href="resources/empty_script.js?link-head-modulepreload">
<style>@import url(resources/empty_style.css?stylesheet-inline-imported);</style>
<style media=print>
@import url(resources/empty_style.css?stylesheet-inline-imported-print);
</style>
</head>
<body>
<link rel=stylesheet href="resources/empty_style.css?stylesheet-body">
<link rel=stylesheet href="resources/importer.css?stylesheet-importer-body">
<link rel=stylesheet href="resources/empty_style.css?stylesheet-body-media-print"
media=print>
<link rel=stylesheet blocking="render"
href="resources/empty_style.css?stylesheet-body-blocking-render">
<!-- https://html.spec.whatwg.org/multipage/urls-and-fetching.html#blocking-attributes
mentions that an element is potentially render-blocking if its blocking
tokens set contains "render", or if it is implicitly potentially
render-blocking. By default, an element is not implicitly potentially
render-blocking.
https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
specifies that a link element of type stylesheet is implicitly potentially
render-blocking only if the element was created by its node document's parser. -->
<script>
// Dynamic style using document.write in body
document.write(`
<link rel=stylesheet
href='resources/empty_style.css?stylesheet-body-dynamic-docWrite'>
`);
document.write(`
<link rel=stylesheet
href='resources/empty_style.css?stylesheet-body-dynamic-docWrite-print'
media=print>
`);
// Dynamic style using innerHTML
document.head.innerHTML += `
<link rel=stylesheet
href='resources/empty_style.css?stylesheet-head-dynamic-innerHTML'>
`;
document.head.innerHTML += `
<link rel=stylesheet
href='resources/empty_style.css?stylesheet-head-dynamic-innerHTML-print'
media=print>
`;
document.head.innerHTML += `
<link rel=stylesheet blocking=render
href='resources/empty_style.css?stylesheet-head-blocking-render-dynamic-innerHTML'>
`;
// Dynamic style using DOM API
var link = document.createElement("link");
link.href = "resources/empty_style.css?stylesheet-head-dynamic-dom";
link.rel = "stylesheet";
document.head.appendChild(link);
// Add a dynamic render-blocking style with DOM API
link = document.createElement("link");
link.href = "resources/empty_style.css?stylesheet-head-blocking-render-dynamic-dom";
link.rel = "stylesheet";
link.blocking = "render";
document.head.appendChild(link);
// Dynamic style preload using DOM API
link = document.createElement("link");
link.href = "resources/empty_style.css?link-style-head-preload-dynamic-dom";
link.rel = "preload";
link.as = "style";
document.head.appendChild(link);
// Dynamic module via modulepreload using DOM API
link = document.createElement("link");
link.href = "resources/empty_script.js?link-head-modulepreload-dynamic-dom";
link.rel = "modulepreload";
document.head.appendChild(link);
// Add a style preload with DOM API to be used later
link = document.createElement("link");
link.href = "resources/empty_style.css?link-style-preload-used-dynamic";
link.rel = "preload";
link.as = "style";
document.head.appendChild(link);
// Use the preload
link = document.createElement("link");
link.href = "resources/empty_style.css?link-style-preload-used-dynamic";
link.rel = "stylesheet";
document.head.appendChild(link);
// Dynamic inline CSS
// Add an inline CSS importer
document.write(`
<style>
@import url('resources/empty_style.css?stylesheet-inline-imported-dynamic-docwrite')
</style>
`);
document.write(`
<style media=print>
@import url('resources/empty_style.css?stylesheet-inline-imported-dynamic-docwrite-print')
</style>
`);
// Add a dynamic inline CSS importer using DOM API
let style = document.createElement("style");
style.textContent = "@import url('resources/empty_style.css?stylesheet-inline-imported-dynamic-dom')";
document.head.appendChild(style);
// Add a dynamic render-blocking inline CSS importer
style = document.createElement("style");
style.textContent = "@import url('resources/empty_style.css?stylesheet-inline-imported-blocking-render-dynamic-dom')";
style.blocking = "render";
document.head.appendChild(style);
// Dynamic CSS importer
document.write(`
<link rel=stylesheet href='resources/importer_dynamic.css'>
`);
document.write(`
<link rel=stylesheet href='resources/importer_print.css' media=print>
`);
// Removing blocking render attribute after request is made
const sheet = document.getElementById("link-head-remove-attr");
sheet.blocking = "";
</script>
<link rel=stylesheet href="resources/empty_style.css?link-style-preload-used">
<script>
const wait_for_onload = () => {
return new Promise(resolve => {
window.addEventListener("load", resolve);
})};
promise_test(
async () => {
const expectedRenderBlockingStatus = {
'stylesheet-head-dynamic-docWrite': 'blocking',
'stylesheet-head-dynamic-docWrite-print': 'non-blocking',
'stylesheet-head': 'blocking',
'stylesheet-head-media-print' : 'non-blocking',
'stylesheet-head-alternate' : 'non-blocking',
'link-style-head-preload' : 'non-blocking',
'stylesheet-importer-head' : 'blocking',
'stylesheet-head-blocking-render-remove-attr' : 'blocking',
'link-head-modulepreload' : 'non-blocking',
'stylesheet-inline-imported' : 'blocking',
'stylesheet-inline-imported-print' : 'non-blocking',
'stylesheet-body': 'non-blocking',
'stylesheet-importer-body' : 'non-blocking',
'stylesheet-body-media-print' : 'non-blocking',
'stylesheet-body-blocking-render' : 'non-blocking',
'stylesheet-body-dynamic-docWrite' : 'non-blocking',
'stylesheet-body-dynamic-docWrite-print': 'non-blocking',
'stylesheet-head-dynamic-innerHTML' : 'non-blocking',
'stylesheet-head-dynamic-innerHTML-print' : 'non-blocking',
'stylesheet-head-blocking-render-dynamic-innerHTML' : 'blocking',
'stylesheet-head-dynamic-dom' : 'non-blocking',
'stylesheet-head-blocking-render-dynamic-dom' : 'blocking',
'link-style-head-preload-dynamic-dom' : 'non-blocking',
'link-head-modulepreload-dynamic-dom' : 'non-blocking',
'link-style-preload-used' : 'non-blocking',
'link-style-preload-used-dynamic' : 'non-blocking',
'stylesheet-inline-imported-dynamic-docwrite': 'blocking',
'stylesheet-inline-imported-dynamic-docwrite-print' : 'non-blocking',
'stylesheet-inline-imported-dynamic-dom' : 'non-blocking',
'stylesheet-inline-imported-blocking-render-dynamic-dom' : 'blocking',
'stylesheet-imported' : 'blocking',
'stylesheet-imported-print' : 'non-blocking',
'stylesheet-imported-dynamic' : 'non-blocking'
};
await wait_for_onload();
const entry_list = performance.getEntriesByType("resource");
for (entry of entry_list) {
if (entry.name.includes("empty_style.css") ||
entry.name.includes("importer.css") ||
entry.name.includes("empty_script.js")) {
key = entry.name.split("?").pop();
expectedStatus = expectedRenderBlockingStatus[key];
assert_equals(entry.renderBlockingStatus, expectedStatus,
`render blocking status for ${entry.name} should be ${expectedStatus}`);
}
}
}, "Validate render blocking status of link resources in PerformanceResourceTiming");
</script>
|
