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>