modulepreload-consumed-by-script.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /preload/modulepreload-consumed-by-script.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>link rel=modulepreload fires its event when a script element consumes the same module</title>

<meta name="timeout" content="long">

<link rel="help" href="https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload">

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

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

<script src="/common/utils.js"></script>

<script src="./resources/preload-module-helper.js"></script>

<body>

<script>

// A <link rel=modulepreload> can be satisfied by a fetch of its URL that is

// already in flight, and a <script type=module> for that URL added while the

// fetch is still outstanding can then consume that same preload as its own load.

// The link element must get its event either way: it is the element that asked

// for the preload, and what the module ends up being used for afterwards is none

// of its business.

promise_test(async t => {

  const uuid = token();

  const url = moduleUrl({ block: 1, uuid });

  // Puts the URL in the module map as fetching, and the server holds the

  // response until the release below, so it stays that way.

  const importPromise = import(url).catch(() => {});

  // Satisfied by the fetch above rather than by a fetch of its own.

  const link = makeModulePreload(url);

  const linkEvent = eventFor(link);

  document.head.appendChild(link);

  // Consumes the preload while that fetch is still outstanding.

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

  script.type = "module";

  script.crossOrigin = "";

  script.src = url;

  const scriptEvent = eventFor(script);

  document.body.appendChild(script);

  await release(uuid);

  assert_equals(await linkEvent, "load", "the modulepreload fired load");

  assert_equals(await scriptEvent, "load", "the script element loaded as well");

  await importPromise;

}, "modulepreload satisfied by an in-flight fetch fires load when a script " +

   "element consumes it");

</script>

</body>