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) {
    var numDownloads = 0;
    let absoluteURL = new URL(url, location.href).href;
    performance.getEntriesByName(absoluteURL).forEach(entry => {
        if (entry.transferSize > 0) {
            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);
    });
}

promise_test(function(t) {
    var link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = 'resources/dummy.js';
    return attachAndWaitForLoad(link).then(() => {
        verifyNumberOfDownloads('resources/dummy.js', 1);

        // Verify that <script> doesn't fetch the module again.
        var script = document.createElement('script');
        script.type = 'module';
        script.src = 'resources/dummy.js';
        return attachAndWaitForLoad(script);
    }).then(() => {
        verifyNumberOfDownloads('resources/dummy.js', 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);

        // 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);
    });
}, '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);

        // 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);
    });
}, '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);

        // 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);
    });
}, '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';
    return attachAndWaitForLoad(link).then(() => {
        verifyNumberOfDownloads('resources/module1.js', 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';
        return attachAndWaitForLoad(script);
    }).then(() => {
        verifyNumberOfDownloads('resources/module1.js', 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 invalid as= value');

promise_test(function(t) {
    var link = document.createElement('link');
    link.rel = 'modulepreload';
    link.href = 'resources/module1.js?integrity-match';
    link.integrity = 'sha256-ZPBZ+J9CiHzZXaBBluSeCpjzuTUkT+rSWIdXUV3AtVo='
    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.js?integrity-doesnotmatch';
    link.integrity = 'sha384-doesnotmatch'
    return attachAndWaitForError(link);
}, 'link rel=modulepreload with integrity mismatch');

</script>
</body>