render-blocking-status-script.html

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>This test validates the render blocking status of resources.</title>

<link rel="help" href="https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming"/>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<!-- Start of test cases -->

<script src="resources/empty_script.js?script-head"></script>

<script type="module" src="resources/empty_script.js?script-head-module"></script>

<script async type=module

        src="resources/empty_script.js?script-head-async-module">

</script>

<script async src="resources/empty_script.js?script-head-async"></script>

<script defer src="resources/empty_script.js?script-head-defer"></script>

<script blocking=render

        src="resources/empty_script.js?script-head-blocking-render">

</script>

<script async blocking=render

        src="resources/empty_script.js?script-head-async-blocking-render">

</script>

<script type=module blocking=render

        src="resources/empty_script.js?script-head-module-blocking-render">

</script>

<script async type=module blocking=render

        src="resources/empty_script.js?script-head-async-module-blocking-render">

</script>

<script defer blocking=render

        src="resources/empty_script.js?script-head-defer-blocking-render">

</script>

<script id="script-head-remove-attr" blocking=render

        src="resources/empty_script.js?script-head-blocking-render-remove-attr">

</script>

<script>

    document.write(`

        <script defer

            src="resources/empty_script.js?script-head-defer-dynamic-docwrite">

        <\/script>`);

</script>

</head>

<body>

<script src="resources/empty_script.js?script-body"></script>

<script type="module" src="resources/empty_script.js?script-body-module"></script>

<script async type=module

        src="resources/empty_script.js?script-body-async-module">

</script>

<script async src="resources/empty_script.js?script-body-async"></script>

<script defer src="resources/empty_script.js?script-body-defer"></script>

<script>

    const script = document.createElement("script");

    script.src = "resources/empty_script.js?script-head-dynamic-dom";

    document.head.appendChild(script);

    // Dynamic explicitly async script

    const async_script = document.createElement("script");

    async_script.src = "resources/empty_script.js?script-head-async-dynamic-dom";

    async_script.async = true;

    document.head.appendChild(async_script);

    // Dynamic non-async script

    // https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model

    // mentions that a script element has to be parser-inserted to be

    // implicitly potentially render-blocking

    const non_async_script = document.createElement("script");

    non_async_script.src = "resources/empty_script.js?script-head-non-async-dynamic-dom";

    non_async_script.async = false;

    document.head.appendChild(non_async_script);

    // Dynamic defer script

    const defer_script = document.createElement("script");

    defer_script.src = "resources/empty_script.js?script-head-defer-dynamic-dom";

    defer_script.defer = true;

    document.head.appendChild(defer_script);

    // Dynamic explicitly render-blocking script

    const blocking_script = document.createElement("script");

    blocking_script.src = "resources/empty_script.js?script-head-blocking-render-dynamic-dom";

    blocking_script.blocking = "render";

    document.head.appendChild(blocking_script);

    // Dynamic explicitly render-blocking module script

    const blocking_module_script = document.createElement("script");

    blocking_module_script.src = "resources/empty_script.js?script-head-module-blocking-render-dynamic-dom";

    blocking_module_script.type = "module";

    blocking_module_script.blocking = "render";

    document.head.appendChild(blocking_module_script);

    // Dynamic async module script

    const async_module_script = document.createElement("script");

    async_module_script.src = "resources/empty_script.js?script-head-async-module-dynamic-dom";

    async_module_script.type = "module";

    async_module_script.async = true;

    document.head.appendChild(async_module_script);

    // Dynamic async render-blocking module script

    const async_blocking_module_script = document.createElement("script");

    async_blocking_module_script.src = "resources/empty_script.js?script-head-async-module-blocking-render-dynamic-dom";

    async_blocking_module_script.type = "module";

    async_blocking_module_script.async = true;

    async_blocking_module_script.blocking = "render"

    document.head.appendChild(async_blocking_module_script);

    // Add a module that imports more modules

    const importer_script = document.createElement("script");

    importer_script.src = "resources/fake_responses.py?url=importer.js";

    importer_script.type = "module";

    document.head.appendChild(importer_script);

    // Add an async module that imports more modules

    const importer_async_script = document.createElement("script");

    importer_async_script.src = "resources/fake_responses.py?url=importer_async.js";

    importer_async_script.type = "module";

    importer_async_script.async = true;

    document.head.appendChild(importer_async_script);

    // Removing blocking render attribute after request is made

    const script_element = document.getElementById("script-head-remove-attr");

    script_element.blocking = "";

</script>

<script>

const wait_for_onload = () => {

  return new Promise(resolve => {

    window.addEventListener("load", resolve);

})};

promise_test(

  async () => {

    const expectedRenderBlockingStatus = {

        'script-head': 'blocking',

        'script-head-module' : 'non-blocking',

        'script-head-async-module' : 'non-blocking',

        'script-head-async' : 'non-blocking',

        'script-head-defer' : 'non-blocking',

        'script-head-blocking-render' : 'blocking',

        'script-head-async-blocking-render' : 'blocking',

        'script-head-module-blocking-render' : 'blocking',

        'script-head-async-module-blocking-render' : 'blocking',

        'script-head-defer-blocking-render' : 'blocking',

        'script-head-blocking-render-remove-attr' : 'blocking',

        'script-head-defer-dynamic-docwrite' : 'non-blocking',

        'script-body' : 'non-blocking',

        'script-body-module' : 'non-blocking',

        'script-body-async-module' : 'non-blocking',

        'script-body-async' : 'non-blocking',

        'script-body-defer' : 'non-blocking',

        'script-head-dynamic-dom': 'non-blocking',

        'script-head-async-dynamic-dom' : 'non-blocking',

        'script-head-non-async-dynamic-dom': 'non-blocking',

        'script-head-defer-dynamic-dom' : 'non-blocking',

        'script-head-blocking-render-dynamic-dom' : 'blocking',

        'script-head-module-blocking-render-dynamic-dom' : 'blocking',

        'script-head-async-module-dynamic-dom' : 'non-blocking',

        'script-head-async-module-blocking-render-dynamic-dom' : 'blocking',

        'script-head-import-defer' : 'non-blocking',

        'script-head-import-defer-dynamic' : 'non-blocking',

        'script-head-import-async' : 'non-blocking',

        'script-head-import-async-dynamic' : 'non-blocking',

        'script-importer' : 'non-blocking',

        'script-importer-async' : 'non-blocking'

};

    await wait_for_onload();

    const entry_list = performance.getEntriesByType("resource");

    for (entry of entry_list) {

        if (entry.name.includes("empty_script.js")) {

            key = entry.name.split("?").pop();

            expectedStatus = expectedRenderBlockingStatus[key];

            assert_equals(entry.renderBlockingStatus, expectedStatus,

                `render blocking status for ${entry.name} should be ${expectedStatus}`);

        else if (entry.name.includes("importer.js")){

            key = 'script-importer';

            expectedStatus = expectedRenderBlockingStatus[key];

            assert_equals(entry.renderBlockingStatus, expectedStatus,

                `render blocking status for ${entry.name} should be ${expectedStatus}`);

        else if (entry.name.includes("importer_async.js")){

            key = 'script-importer-async';

            expectedStatus = expectedRenderBlockingStatus[key];

            assert_equals(entry.renderBlockingStatus, expectedStatus,

                `render blocking status for ${entry.name} should be ${expectedStatus}`);

}, "Validate render blocking status of script resources in PerformanceResourceTiming");

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings