fetch-resources.sub.html (3830B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test various interactions between fetch, service-workers and resource timing</title> 5 <meta charset="utf-8" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/echo-helper.js"></script> 9 <link rel=help href="https://github.com/w3c/csswg-drafts/pull/6715"> 10 </head> 11 12 <body> 13 <script> 14 const image_url = '/css/support/1x1-green.png' 15 const font_url = '/fonts/pass.woff' 16 const stylesheet_url = '/css/support/a-green.css' 17 18 async function load_image({url, prop, uid}, t) { 19 const element = document.createElement('div'); 20 const echo = get_resource_echo_url(uid, url) 21 element.style[prop] = `url(${echo})` 22 document.body.appendChild(element); 23 t.add_cleanup(() => element.remove()); 24 await wait_for_resource(echo); 25 const headers = await get_headers(uid); 26 return headers[url] 27 } 28 29 async function load_font({url, uid}, t) { 30 const echo = get_resource_echo_url(uid, url) 31 const style = ` 32 @font-face { font-family: "SomeFont"; src: url(${echo}); } 33 ` 34 const styleElement = document.createElement('style') 35 styleElement.innerHTML = style 36 document.head.appendChild(styleElement) 37 const element = document.createElement('p') 38 element.innerText = "SomeFont" 39 element.style.fontFamily = 'SomeFont' 40 document.body.appendChild(element) 41 t.add_cleanup(() => element.remove()) 42 t.add_cleanup(() => styleElement.remove()) 43 await wait_for_resource(echo); 44 const headers = await get_headers(uid); 45 return headers[url] 46 } 47 48 async function load_stylesheet({url, uid}, t) { 49 const echo = get_resource_echo_url(uid, url) 50 const styleElement = document.createElement('style') 51 styleElement.innerHTML = `@import "${echo}"` 52 document.head.appendChild(styleElement) 53 t.add_cleanup(() => styleElement.remove()) 54 await wait_for_resource(echo); 55 const headers = await get_headers(uid); 56 return headers[url] 57 } 58 59 function load_style(text, host, t) { 60 const styleElement = document.createElement('style'); 61 const styleURL = `${host || window.origin}/css/fetching/support/echo-css.py?content=${encodeURIComponent(text)}`; 62 styleElement.innerHTML = `@import "${styleURL}"`; 63 document.head.appendChild(styleElement); 64 t.add_cleanup(() => styleElement.remove()); 65 return styleURL 66 } 67 68 function extract_cors_mode(result) { 69 const fetchMode = result['sec-fetch-mode']; 70 if (fetchMode) 71 return fetchMode; 72 73 return Reflect.has(result, 'origin') ? 'cors' : 'no-cors'; 74 } 75 76 promise_test(async t => { 77 const uid = "{{uuid()}}"; 78 const result = await load_image({uid, url: image_url, prop: 'background'}, t) 79 assert_equals(extract_cors_mode(result), 'no-cors'); 80 }, 'Background images should fetch with no-cors'); 81 82 promise_test(async t => { 83 const uid = "{{uuid()}}"; 84 const result = await load_image({uid, url: image_url, prop: 'shape-outside'}, t) 85 assert_equals(extract_cors_mode(result), 'cors'); 86 }, 'Shape images should fetched with cors'); 87 88 promise_test(async t => { 89 const uid = "{{uuid()}}"; 90 const result = await load_font({uid, url: font_url}, t) 91 assert_equals(extract_cors_mode(result), 'cors'); 92 }, "WebFonts should be fetched with cors") 93 94 promise_test(async t => { 95 const uid = "{{uuid()}}"; 96 const result = await load_stylesheet({uid, url: stylesheet_url}, t) 97 assert_equals(extract_cors_mode(result), 'no-cors'); 98 }, "CSS imports should be fetched without cors") 99 </script> 100 101 </body> 102 </html>