Quelle modulepreload.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/testing/web-platform/tests/preload/modulepreload.html

<!DOCTYPE html>
<meta name="timeout" content="long">
<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) {
    let numDownloads = 0;
    const 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(t => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = 'resources/dummy-module.js?unique';
    return attachAndWaitForLoad(link).then(() => {
        verifyNumberOfDownloads('resources/dummy-module.js?unique', 1);

        // Verify that <script> doesn't fetch the module again.
        const script = document.createElement('script');
        script.type = 'module';
        script.src = 'resources/dummy-module.js?unique';
        return attachAndWaitForLoad(script);
    }).then(() => {
        verifyNumberOfDownloads('resources/dummy-module.js?unique', 1, true);
    });
}, "link rel=modulepreload with script shares a cache with <script> tags");

/**
* Begin tests to ensure crossorigin value behaves the same on
* link rel=modulepreload as it does script elements.
*/
promise_test(t => {
    document.cookie = 'same=1';
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.crossOrigin = 'anonymous';
    link.href = 'resources/dummy-module.js?sameOriginAnonymous';
    return attachAndWaitForLoad(link).then(() => {
        verifyNumberOfDownloads('resources/dummy-module.js?sameOriginAnonymous', 1);

        // Verify that <script> doesn't fetch the module again.
        const script = document.createElement('script');
        script.type = 'module';
        script.crossOrigin = 'anonymous';
        script.src = 'resources/dummy-module.js?sameOriginAnonymous';
        return attachAndWaitForLoad(script);
    }).then(() => {
        verifyNumberOfDownloads('resources/dummy-module.js?sameOriginAnonymous', 1, true);
    });
}, 'same-origin link rel=modulepreload crossorigin=anonymous');

promise_test(t => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.crossOrigin = 'use-credentials';
    link.href = 'resources/dummy-module.js?sameOriginUseCredentials';
    return attachAndWaitForLoad(link).then(() => {
        verifyNumberOfDownloads('resources/dummy-module.js?sameOriginUseCredentials', 1);

        // Verify that <script> doesn't fetch the module again.
        const script = document.createElement('script');
        script.type = 'module';
        script.crossOrigin = 'use-credentials';
        script.src = 'resources/dummy-module.js?sameOriginUseCredentials';
        return attachAndWaitForLoad(script);
    }).then(() => {
        verifyNumberOfDownloads('resources/dummy-module.js?sameOriginUseCredentials', 1, true);
    });
}, 'same-origin link rel=modulepreload crossorigin=use-credentials');

promise_test(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(() => {
        const 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.
        const 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(t => {
    const 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.
        const 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(t => {
    const 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.
        const 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(t => {
    const 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);

        const 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(t => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = null;
    return attachAndWaitForError(link);
}, 'link rel=modulepreload with bad href attribute');

promise_test(t => {
    const 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(t => {
    const 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(t => {
    const 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(t => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = 'resources/module1.js?as-style';
    link.as = 'style'
    return attachAndWaitForError(link);
}, 'link rel=modulepreload with non-style as= value (style)');

promise_test(t => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = 'resources/module1.js?as-json';
    link.as = 'json'
    return attachAndWaitForError(link);
}, 'link rel=modulepreload with non-JSON as= value (JSON)');

promise_test(t => {
    const 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(t => {
    const 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(t => {
    const 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(t => {
    const 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(t => {
    const link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = 'resources/module1.mjs?integrity-invalid';
    link.integrity = 'sha256-dOxReWMnMSPfUvxEbBqIrjNh8ZN8n05j7h3JmhF8gQc=%'
    return attachAndWaitForLoad(link);
}, 'link rel=modulepreload with invalid integrity');

promise_test(t => {
    const link1 = document.createElement('link');
    const 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(t => {
    const 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(t => {
    const link = document.createElement('link');
    const 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(t => {
    const link = document.createElement('link');
    const 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(t => {
    const link = document.createElement('link');
    const moduleScript = document.createElement('script');
    const classicScript = document.createElement('script');
    link.rel = 'modulepreload';
    moduleScript.type = 'module';
    link.href = 'resources/dummy-module.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');

// The following tests apply to all supported preload destinations.
const types = [
    {"destination": "script", "file_extension" : "js",   "import_attribute_type" : null},
    {"destination": "style",  "file_extension" : "css",  "import_attribute_type" : "css"},
    {"destination": "json",   "file_extension" : "json", "import_attribute_type" : "json"},
    {"destination": "text",   "file_extension" : "txt",  "import_attribute_type" : "text"}
];

for (const { destination, file_extension, import_attribute_type } of types) {
    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = `resources/dummy.${file_extension}?unique_fetch`;
        return attachAndWaitForLoad(link).then(() => {
            verifyNumberOfDownloads(`resources/dummy.${file_extension}?unique_fetch`, 1, true);

            // Verify that importing doesn't fetch the module again. Note that there
            // is no valid import attribute for script imports, so the `with` statement
            // must be absent.
            if (import_attribute_type) {
                return import(`./resources/dummy.${file_extension}?unique_fetch`, { with: { type: import_attribute_type } });
            } else {
                return import(`./resources/dummy.${file_extension}?unique_fetch`);
            }
        }).then(() => {
            verifyNumberOfDownloads(`resources/dummy.${file_extension}?unique_fetch`, 1, true);
        });
    }, `link rel=modulepreload with ${destination} doesn't re-fetch when imported`);

    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = `resources/syntax-error.${file_extension}`;
        return attachAndWaitForLoad(link);
    }, `link rel=modulepreload for a ${destination} module with syntax error will still load`);

    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = `resources/not-exist.${file_extension}`;
        return attachAndWaitForError(link);
    }, `link rel=modulepreload for a ${destination} module with network error`);

    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = `resources/dummy.${file_extension}?matching-media`;
        link.media = 'all';
        return attachAndWaitForLoad(link);
    }, `link rel=modulepreload with ${destination} and matching media`);

    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = `resources/dummy.${file_extension}?non-matching-media`;
        link.media = 'not all';
        return attachAndWaitForTimeout(link, t);
    }, `link rel=modulepreload with ${destination} and non-matching media`);

    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = `resources/dummy.${file_extension}?empty-media`;
        link.media = '';
        return attachAndWaitForLoad(link);
    }, `link rel=modulepreload with ${destination} and empty media`);

    promise_test(t => {
        const link = document.createElement('link');
        link.rel = 'modulepreload';
        link.as = destination;
        link.href = '';
        return attachAndWaitForTimeout(link, t);
    }, `link rel=modulepreload with ${destination} and empty href`);

    promise_test(t => {
        const link1 = document.createElement('link');
        const link2 = document.createElement('link');
        link1.rel = 'modulepreload';
        link2.rel = 'modulepreload';
        link1.as = destination;
        link2.as = destination;
        link1.href = `resources/dummy.${file_extension}?same-url`;
        link2.href = `resources/dummy.${file_extension}?same-url`;
        return Promise.all([
            attachAndWaitForLoad(link1),
            attachAndWaitForLoad(link2),
        ]);
    }, `multiple ${destination} link rel=modulepreload with same href`);
};
</script>
</body>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.5 Sekunden ¤

Wurzel

Suchen

PVS Prover

Isabelle Prover

NIST Cobol Testsuite

Cephes Mathematical Library

Vienna Development Method

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.