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
|
<!DOCTYPE HTML>
<html>
<head>
<title>Test various interactions between fetch, service-workers and resource timing</title>
<meta charset="utf-8" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/echo-helper.js"></script>
<link rel=help href="https://github.com/w3c/csswg-drafts/pull/6715">
</head>
<body>
<script>
const image_url = '/css/support/1x1-green.png'
const font_url = '/fonts/pass.woff'
const stylesheet_url = '/css/support/a-green.css'
async function load_image({url, prop, uid}, t) {
const element = document.createElement('div');
const echo = get_resource_echo_url(uid, url)
element.style[prop] = `url(${echo})`
document.body.appendChild(element);
t.add_cleanup(() => element.remove());
await wait_for_resource(echo);
const headers = await get_headers(uid);
return headers[url]
}
async function load_font({url, uid}, t) {
const echo = get_resource_echo_url(uid, url)
const style = `
@font-face { font-family: "SomeFont"; src: url(${echo}); }
`
const styleElement = document.createElement('style')
styleElement.innerHTML = style
document.head.appendChild(styleElement)
const element = document.createElement('p')
element.innerText = "SomeFont"
element.style.fontFamily = 'SomeFont'
document.body.appendChild(element)
t.add_cleanup(() => element.remove())
t.add_cleanup(() => styleElement.remove())
await wait_for_resource(echo);
const headers = await get_headers(uid);
return headers[url]
}
async function load_stylesheet({url, uid}, t) {
const echo = get_resource_echo_url(uid, url)
const styleElement = document.createElement('style')
styleElement.innerHTML = `@import "${echo}"`
document.head.appendChild(styleElement)
t.add_cleanup(() => styleElement.remove())
await wait_for_resource(echo);
const headers = await get_headers(uid);
return headers[url]
}
function load_style(text, host, t) {
const styleElement = document.createElement('style');
const styleURL = `${host || window.origin}/css/fetching/support/echo-css.py?content=${encodeURIComponent(text)}`;
styleElement.innerHTML = `@import "${styleURL}"`;
document.head.appendChild(styleElement);
t.add_cleanup(() => styleElement.remove());
return styleURL
}
function extract_cors_mode(result) {
const fetchMode = result['sec-fetch-mode'];
if (fetchMode)
return fetchMode;
return Reflect.has(result, 'origin') ? 'cors' : 'no-cors';
}
promise_test(async t => {
const uid = "{{uuid()}}";
const result = await load_image({uid, url: image_url, prop: 'background'}, t)
assert_equals(extract_cors_mode(result), 'no-cors');
}, 'Background images should fetch with no-cors');
promise_test(async t => {
const uid = "{{uuid()}}";
const result = await load_image({uid, url: image_url, prop: 'shape-outside'}, t)
assert_equals(extract_cors_mode(result), 'cors');
}, 'Shape images should fetched with cors');
promise_test(async t => {
const uid = "{{uuid()}}";
const result = await load_font({uid, url: font_url}, t)
assert_equals(extract_cors_mode(result), 'cors');
}, "WebFonts should be fetched with cors")
promise_test(async t => {
const uid = "{{uuid()}}";
const result = await load_stylesheet({uid, url: stylesheet_url}, t)
assert_equals(extract_cors_mode(result), 'no-cors');
}, "CSS imports should be fetched without cors")
</script>
</body>
</html>
|
