| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/common/get-host-info.sub.js"></script> |
| <body> |
| <script> |
| host_info = get_host_info(); |
| |
| function verifyNumberOfDownloads(url, number, allowTransferSizeOfZero = false) { |
| var numDownloads = 0; |
| let absoluteURL = new URL(url, location.href).href; |
| performance.getEntriesByName(absoluteURL).forEach(entry => { |
| if (entry.transferSize > 0 || allowTransferSizeOfZero) { |
| numDownloads++; |
| } |
| }); |
| assert_equals(numDownloads, number, url); |
| } |
| |
| function attachAndWaitForLoad(element) { |
| return new Promise((resolve, reject) => { |
| element.onload = resolve; |
| element.onerror = reject; |
| document.body.appendChild(element); |
| }); |
| } |
| |
| function attachAndWaitForError(element) { |
| return new Promise((resolve, reject) => { |
| element.onload = reject; |
| element.onerror = resolve; |
| document.body.appendChild(element); |
| }); |
| } |
| |
| function attachAndWaitForTimeout(element, t) { |
| return new Promise((resolve, reject) => { |
| element.onload = reject; |
| element.onerror = reject; |
| t.step_timeout(resolve, 1000); |
| document.body.appendChild(element); |
| }); |
| } |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/dummy.js?unique'; |
| return attachAndWaitForLoad(link).then(() => { |
| verifyNumberOfDownloads('resources/dummy.js?unique', 1); |
| |
| // Verify that <script> doesn't fetch the module again. |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.src = 'resources/dummy.js?unique'; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads('resources/dummy.js?unique', 1); |
| }); |
| }, 'link rel=modulepreload'); |
| |
| /** |
| * Begin tests to ensure crossorigin value behaves the same on |
| * link rel=modulepreload as it does script elements. |
| */ |
| promise_test(function(t) { |
| document.cookie = 'same=1'; |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.crossOrigin = 'anonymous'; |
| link.href = 'resources/dummy.js?sameOriginAnonymous'; |
| return attachAndWaitForLoad(link).then(() => { |
| verifyNumberOfDownloads('resources/dummy.js?sameOriginAnonymous', 1); |
| |
| // Verify that <script> doesn't fetch the module again. |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.crossOrigin = 'anonymous'; |
| script.src = 'resources/dummy.js?sameOriginAnonymous'; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads('resources/dummy.js?sameOriginAnonymous', 1); |
| }); |
| }, 'same-origin link rel=modulepreload crossorigin=anonymous'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.crossOrigin = 'use-credentials'; |
| link.href = 'resources/dummy.js?sameOriginUseCredentials'; |
| return attachAndWaitForLoad(link).then(() => { |
| verifyNumberOfDownloads('resources/dummy.js?sameOriginUseCredentials', 1); |
| |
| // Verify that <script> doesn't fetch the module again. |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.crossOrigin = 'use-credentials'; |
| script.src = 'resources/dummy.js?sameOriginUseCredentials'; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads('resources/dummy.js?sameOriginUseCredentials', 1); |
| }); |
| }, 'same-origin link rel=modulepreload crossorigin=use-credentials'); |
| |
| promise_test(function(t) { |
| const setCookiePromise = fetch( |
| `${host_info.HTTP_REMOTE_ORIGIN}/cookies/resources/set-cookie.py?name=cross&path=/preload/`, |
| { |
| mode: 'no-cors', |
| credentials: 'include', |
| }); |
| |
| return setCookiePromise.then(() => { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = `${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginNone`; |
| return attachAndWaitForLoad(link); |
| }).then(() => { |
| verifyNumberOfDownloads(`${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginNone`, 1, true); |
| |
| // Verify that <script> doesn't fetch the module again. |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.src = `${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginNone`; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads(`${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginNone`, 1, true); |
| }); |
| }, 'cross-origin link rel=modulepreload'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.crossOrigin = 'anonymous'; |
| link.href = `${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginAnonymous`; |
| return attachAndWaitForLoad(link).then(() => { |
| verifyNumberOfDownloads(`${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginAnonymous`, 1, true); |
| |
| // Verify that <script> doesn't fetch the module again. |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.crossOrigin = 'anonymous'; |
| script.src = `${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginAnonymous`; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads(`${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginAnonymous`, 1, true); |
| }); |
| }, 'cross-origin link rel=modulepreload crossorigin=anonymous'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.crossOrigin = 'use-credentials'; |
| link.href = `${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginUseCredentials`; |
| return attachAndWaitForLoad(link).then(() => { |
| verifyNumberOfDownloads(`${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginUseCredentials`, 1, true); |
| |
| // Verify that <script> doesn't fetch the module again. |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.crossOrigin = 'use-credentials'; |
| script.src = `${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginUseCredentials`; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads(`${host_info.HTTP_REMOTE_ORIGIN}/preload/resources/cross-origin-module.py?crossOriginUseCredentials`, 1, true); |
| }); |
| }, 'cross-origin link rel=modulepreload crossorigin=use-credentials'); |
| /** |
| * End link rel=modulepreload crossorigin attribute tests. |
| */ |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.js?submodule'; |
| return attachAndWaitForLoad(link).then(() => { |
| verifyNumberOfDownloads('resources/module1.js?submodule', 1); |
| // The load event fires before (optional) submodules fetch. |
| verifyNumberOfDownloads('resources/module2.js', 0); |
| |
| var script = document.createElement('script'); |
| script.type = 'module'; |
| script.src = 'resources/module1.js?submodule'; |
| return attachAndWaitForLoad(script); |
| }).then(() => { |
| verifyNumberOfDownloads('resources/module1.js?submodule', 1); |
| verifyNumberOfDownloads('resources/module2.js', 1); |
| }); |
| }, 'link rel=modulepreload with submodules'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/syntax-error.js'; |
| return attachAndWaitForLoad(link); |
| }, 'link rel=modulepreload for a module with syntax error'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/not-exist.js'; |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload for a module with network error'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = null; |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload with bad href attribute'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.js?as-script'; |
| link.as = 'script' |
| return attachAndWaitForLoad(link); |
| }, 'link rel=modulepreload as=script'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.js?as-image'; |
| link.as = 'image' |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload with non-script-like as= value (image)'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.js?as-xslt'; |
| link.as = 'xslt' |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload with non-script-like as= value (xslt)'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.js?integrity-match'; |
| link.integrity = 'sha256-+Ks3iNIiTq2ujlWhvB056cmXobrCFpU9hd60xZ1WCaA=' |
| return attachAndWaitForLoad(link); |
| }, 'link rel=modulepreload with integrity match'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.mjs?integrity-match'; |
| link.integrity = 'sha256-+Ks3iNIiTq2ujlWhvB056cmXobrCFpU9hd60xZ1WCaA=' |
| return attachAndWaitForLoad(link); |
| }, 'link rel=modulepreload with integrity match2'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.js?integrity-doesnotmatch'; |
| link.integrity = 'sha384-doesnotmatch' |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload with integrity mismatch'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.mjs?integrity-doesnotmatch'; |
| link.integrity = 'sha256-dOxReWMnMSPfUvxEbBqIrjNh8ZN8n05j7h3JmhF8gQc=' |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload with integrity mismatch2'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.mjs?integrity-invalid'; |
| link.integrity = 'sha256-dOxReWMnMSPfUvxEbBqIrjNh8ZN8n05j7h3JmhF8gQc=%' |
| return attachAndWaitForError(link); |
| }, 'link rel=modulepreload with integrity mismatch3'); |
| |
| promise_test(function(t) { |
| var link1 = document.createElement('link'); |
| var link2 = document.createElement('link'); |
| link1.rel = 'modulepreload'; |
| link2.rel = 'modulepreload'; |
| link1.href = 'resources/module1.js?same-url'; |
| link2.href = 'resources/module1.js?same-url'; |
| return Promise.all([ |
| attachAndWaitForLoad(link1), |
| attachAndWaitForLoad(link2), |
| ]); |
| }, 'multiple link rel=modulepreload with same href'); |
| |
| promise_test(function(t) { |
| var link1 = document.createElement('link'); |
| var link2 = document.createElement('link'); |
| link1.rel = 'modulepreload'; |
| link2.rel = 'modulepreload'; |
| link1.href = 'resources/module2.js?child-before'; |
| link2.href = 'resources/module1.js?child-before'; |
| return attachAndWaitForLoad(link1) |
| .then(() => attachAndWaitForLoad(link2)) |
| .then(() => new Promise(r => t.step_timeout(r, 1000))) |
| .then(() => { |
| verifyNumberOfDownloads('resources/module2.js?child-before', 1); |
| }); |
| |
| }, 'multiple link rel=modulepreload with child module before parent'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.mjs?matching-media'; |
| link.media = 'all'; |
| return attachAndWaitForLoad(link); |
| }, 'link rel=modulepreload with matching media'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.mjs?non-matching-media'; |
| link.media = 'not all'; |
| return attachAndWaitForTimeout(link, t); |
| }, 'link rel=modulepreload with non-matching media'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = 'resources/module1.mjs?empty-media'; |
| link.media = ''; |
| return attachAndWaitForLoad(link); |
| }, 'link rel=modulepreload with empty media'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = ''; |
| return attachAndWaitForTimeout(link, t); |
| }, 'link rel=modulepreload with empty href'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| link.rel = 'modulepreload'; |
| link.href = ''; |
| link.as = 'fetch'; |
| return attachAndWaitForTimeout(link, t); |
| }, 'link rel=modulepreload with empty href and invalid as= value'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| var script = document.createElement('script'); |
| link.rel = 'modulepreload'; |
| script.type = 'module'; |
| link.href = 'resources/module1.mjs?non-matching-crossorigin'; |
| script.src = link.href; |
| script.crossOrigin = 'anonymous'; |
| document.body.append(link); |
| return attachAndWaitForLoad(script); |
| }, 'link rel=modulepreload and script with non-matching crossorigin values'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| var script = document.createElement('script'); |
| link.rel = 'modulepreload'; |
| script.type = 'module'; |
| link.href = 'resources/module1.mjs?non-matching-crossorigin'; |
| script.src = link.href; |
| link.crossOrigin = 'anonymous'; |
| script.crossOrigin = 'use-credentials'; |
| document.body.append(link); |
| return attachAndWaitForLoad(script); |
| }, 'link rel=modulepreload and script with non-matching crossorigin values2'); |
| |
| promise_test(function(t) { |
| var link = document.createElement('link'); |
| var moduleScript = document.createElement('script'); |
| var classicScript = document.createElement('script'); |
| link.rel = 'modulepreload'; |
| moduleScript.type = 'module'; |
| link.href = 'resources/dummy.js?non-module script'; |
| classicScript.src = link.href; |
| moduleScript.src = link.href; |
| document.body.append(link); |
| document.body.append(classicScript); |
| return attachAndWaitForLoad(moduleScript); |
| }, 'link rel=modulepreload and non-module script'); |
| </script> |
| </body> |