Quelle 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

¤ Dauer der Verarbeitung: 0.7 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.