102 lines
3.7 KiB
HTML
102 lines
3.7 KiB
HTML
<!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>
|