preload-font-crossorigin.html (3887B)
1 <!DOCTYPE html> 2 <title>Makes sure that preload font destination needs crossorigin attribute</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/preload/resources/preload_helper.js"></script> 6 <script src="/common/get-host-info.sub.js"></script> 7 <body> 8 <script> 9 const run_test = (preload_success, main_load_success, name, 10 resource_url, cross_origin, number_of_requests) => { 11 const test = async_test(name); 12 const link = document.createElement('link'); 13 link.rel = 'preload'; 14 link.as = 'font'; 15 link.href = resource_url; 16 if (cross_origin) { 17 link.crossOrigin = 'anonymous'; 18 } 19 20 const valid_preload_failed = test.step_func(() => { 21 assert_unreached('Valid preload fired error handler.'); 22 }); 23 const invalid_preload_succeeded = test.step_func(() => { 24 assert_unreached('Invalid preload load succeeded.'); 25 }); 26 const valid_main_load_failed = test.step_func(() => { 27 assert_unreached('Valid main load fired error handler.'); 28 }); 29 const invalid_main_load_succeeded = test.step_func(() => { 30 assert_unreached('Invalid main load succeeded.'); 31 }); 32 const main_load_pass = test.step_func(() => { 33 verifyNumberOfResourceTimingEntries(resource_url, number_of_requests); 34 test.done(); 35 }); 36 37 const preload_pass = test.step_func(async () => { 38 try { 39 await new FontFace('CanvasTest', `url("${resource_url}")`).load(); 40 } catch (error) { 41 if (main_load_success) { 42 valid_main_load_failed(); 43 } else { 44 main_load_pass(); 45 } 46 } 47 48 if (main_load_success) { 49 main_load_pass(); 50 } else { 51 invalid_main_load_succeeded(); 52 } 53 }); 54 55 if (preload_success) { 56 link.onload = preload_pass; 57 link.onerror = valid_preload_failed; 58 } else { 59 link.onload = invalid_preload_succeeded; 60 link.onerror = preload_pass; 61 } 62 63 document.body.appendChild(link); 64 }; 65 66 verifyPreloadAndRTSupport(); 67 68 const anonymous = '&pipe=header(Access-Control-Allow-Origin,*)'; 69 const cross_origin_prefix = get_host_info().REMOTE_ORIGIN; 70 const file_path = '/fonts/CanvasTest.ttf'; 71 72 // The CSS Font spec defines that font files always have to be fetched using 73 // anonymous-mode CORS. 74 // See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches 75 // and https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements 76 // So that font loading (@font-face in CSS and FontFace.load()) always sends request 77 // with anonymous-mode CORS. The crossOrigin attribute of <link rel="preload" as="font"> 78 // should be set as anonymout mode, too, even for same origin fetch. Otherwise, 79 // main font loading doesn't match the corresponding preloading due to credentials 80 // mode mismatch and the main font loading invokes another request. 81 run_test(true, true, 'Same origin font preload with crossorigin attribute', 82 file_path + '?with_crossorigin', true, 1); 83 run_test(true, true, 'Same origin font preload without crossorigin attribute', 84 file_path + '?without_crossorigin', false, 2); 85 run_test(true, true, 'Cross origin font preload with crossorigin attribute', 86 cross_origin_prefix + file_path + '?with_crossorigin' + anonymous, true, 1); 87 run_test(true, true, 'Cross origin font preload without crossorigin attribute', 88 cross_origin_prefix + file_path + '?without_crossorigin' + anonymous, false, 2); 89 </script> 90 </body> 91 </html>