audio-loading-lazy-to-eager.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-audio-element/audio-loading-lazy-to-eager.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel="author" title="Squarespace" href="https://www.squarespace.com/">

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

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

<style>

  .below-viewport {

    margin-top: 1000vh;

</style>

<body>

<script>

  async_test(t => {

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

    audio.loading = "lazy";

    audio.src = "/media/sine440.mp3";

    audio.className = "below-viewport";

    audio.controls = true;

    let loadstartFired = false;

    let testPhase = 0; // 0: initial lazy, 1: after eager, 2: after remove attribute

    audio.addEventListener("loadstart", () => {

      if (testPhase === 0) {

        loadstartFired = true;

      } else if (testPhase === 1) {

        assert_true(true, "Audio should fire loadstart after setting loading='eager'");

        testPhase = 2;

        audio.loading = "lazy";

        audio.src = "/media/sine440.mp3?remove-attr";

        loadstartFired = false;

        audio.removeAttribute("loading");

      } else if (testPhase === 2) {

        assert_true(true, "Audio should fire loadstart after removing loading attribute");

        t.done();

});

    document.body.appendChild(audio);

    t.step_timeout(() => {

      assert_false(loadstartFired, "Audio should not fire loadstart when lazy and outside viewport");

      testPhase = 1;

      audio.loading = "eager";

    }, 500);

  }, "Below-viewport audio with loading='lazy' loads when changed to loading='eager' or when loading attribute is removed");

</script>

</body>