<!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>