execution-order.sub.html | Explore in Territory

<!doctype html>
<head>
  <meta name=variant content="?default">
  <meta name=variant content="?reload">
  <title>Async Script Execution Order</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <!-- Note: The following two async scripts are named as "label=async_preload_or_blocking_render".
       These are intentionally named with the same name because the ordering of these two scripts are not guaranteed. -->
  <link rel="preload" as="script" href="resources/script.sub.js?pipe=trickle(d1)&label=async_preload_or_blocking_render&1">
  <script async blocking=render src="resources/script.sub.js?pipe=trickle(d1)&label=async_preload_or_blocking_render&2"></script>
</head>
<body>
  <h1>
    This is the first (contentful) paint.
  </h1>
  <!-- Note: This test serves mainly to document the current scheduling behavior
       of async scripts with respect to other scripts and events in the loading
       pipeline. It does not represent the "ideal" or "desired" behavior, so
       changing it is probably fine. -->
  <script>
      const reload_key = 'run-after-reload';
      if (location.search == '?reload' && !window.localStorage.getItem(reload_key)) {
        window.localStorage.setItem(reload_key, true);
        location.reload();
      } else {
        window.localStorage.clear();
        test();
      }

    const logs = [];
    function logScript(msg) {
      logs.push(msg);
    }

  function test() {
    setup({ single_test: true })
      window.onload = e => {
        const actualOrder = logs.join(";");
        const expectedOrder = "async_preload_or_blocking_render;async_preload_or_blocking_render;async;async;async;inline1;external;inline2;defer;DOMContentLoaded";
        assert_equals(actualOrder, expectedOrder);
        done();
      };
      document.addEventListener('DOMContentLoaded', e => {
        logScript('DOMContentLoaded');
      });
    }
  </script>
  <script defer src="resources/script.sub.js?label=defer"></script>
  <!-- Note: The following two async scripts are named as "label=async". These are intentionally named with the same name
       because the ordering of these two scripts are not guaranteed even if different trickle values are specified. -->
  <script async src="resources/script.sub.js?pipe=trickle(d2)&label=async"></script>
  <!-- cross site async script -->
  <script async src="http://{{hosts[alt][]}}:{{ports[http][0]}}/wpt_internal/async-script-scheduling/resources/script.sub.js?pipe=trickle(d2)&label=async"></script>
  <!-- cross site async script matched in the allowlist -->
  <script async
    src="http://bad3p.test:{{ports[http][0]}}/wpt_internal/async-script-scheduling/resources/script.sub.js?pipe=trickle(d2)&label=async"></script>
  <script async src="resources/script.sub.js?pipe=trickle(d1)&label=async_preload_or_blocking_render&1"></script>
  <link rel=stylesheet href=resources/main.css?pipe=trickle(d3)>
  <script>
    logScript('inline1');
    assert_equals('rgb(255, 255, 0)', getComputedStyle(document.body)['backgroundColor']);
  </script>
  <script src="resources/script.sub.js?pipe=trickle(d1)&label=external"></script>
  <script>
    logScript('inline2');
  </script>
</body>
chromium/third_party/blink/web_tests/wpt_internal/async-script-scheduling/execution-order.sub.html
