SSL modulepreload.html
Sprache: HTML
products/sources/formale Sprachen/C/Firefox/testing/web-platform/tests/preload/modulepreload.html
<!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 >
Messung V0.5 C=94 H=94 G=93
¤ Dauer der Verarbeitung: 0.31 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland
2026-04-02