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
|
<!DOCTYPE html>
<title>Makes sure that preload font destination needs crossorigin attribute</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/preload/resources/preload_helper.js"></script>
<script src="/common/get-host-info.sub.js"></script>
<body>
<script>
const run_test = (preload_success, main_load_success, name,
resource_url, cross_origin, number_of_requests) => {
const test = async_test(name);
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'font';
link.href = resource_url;
if (cross_origin) {
link.crossOrigin = 'anonymous';
}
const valid_preload_failed = test.step_func(() => {
assert_unreached('Valid preload fired error handler.');
});
const invalid_preload_succeeded = test.step_func(() => {
assert_unreached('Invalid preload load succeeded.');
});
const valid_main_load_failed = test.step_func(() => {
assert_unreached('Valid main load fired error handler.');
});
const invalid_main_load_succeeded = test.step_func(() => {
assert_unreached('Invalid main load succeeded.');
});
const main_load_pass = test.step_func(() => {
verifyNumberOfResourceTimingEntries(resource_url, number_of_requests);
test.done();
});
const preload_pass = test.step_func(async () => {
try {
await new FontFace('CanvasTest', `url("${resource_url}")`).load();
} catch (error) {
if (main_load_success) {
valid_main_load_failed();
} else {
main_load_pass();
}
}
if (main_load_success) {
main_load_pass();
} else {
invalid_main_load_succeeded();
}
});
if (preload_success) {
link.onload = preload_pass;
link.onerror = valid_preload_failed;
} else {
link.onload = invalid_preload_succeeded;
link.onerror = preload_pass;
}
document.body.appendChild(link);
};
verifyPreloadAndRTSupport();
const anonymous = '&pipe=header(Access-Control-Allow-Origin,*)';
const cross_origin_prefix = get_host_info().REMOTE_ORIGIN;
const file_path = '/fonts/CanvasTest.ttf';
// The CSS Font spec defines that font files always have to be fetched using
// anonymous-mode CORS.
// See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches
// and https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements
// So that font loading (@font-face in CSS and FontFace.load()) always sends request
// with anonymous-mode CORS. The crossOrigin attribute of <link rel="preload" as="font">
// should be set as anonymout mode, too, even for same origin fetch. Otherwise,
// main font loading doesn't match the corresponding preloading due to credentials
// mode mismatch and the main font loading invokes another request.
run_test(true, true, 'Same origin font preload with crossorigin attribute',
file_path + '?with_crossorigin', true, 1);
run_test(true, true, 'Same origin font preload without crossorigin attribute',
file_path + '?without_crossorigin', false, 2);
run_test(true, true, 'Cross origin font preload with crossorigin attribute',
cross_origin_prefix + file_path + '?with_crossorigin' + anonymous, true, 1);
run_test(true, true, 'Cross origin font preload without crossorigin attribute',
cross_origin_prefix + file_path + '?without_crossorigin' + anonymous, false, 2);
</script>
</body>
</html>
|
