media-loading-state-timing.sub.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/selectors/media/media-loading-state-timing.sub.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Media Loading State: the :buffering and :stalled pseudo-classes</title>

<link rel="help" href="https://drafts.csswg.org/selectors/#media-loading-state">

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

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

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

<body>

  <video width="300" height="300" muted autoplay></video>

  <script>

    // The order of "is currently stalled" changing and events firing changed in

    // https://github.com/whatwg/html/pull/11959 so that "is currently stalled"

    // is set before the stalled event fires. :stalled also requires readyState

    // to be HAVE_CURRENT_DATA or less, which is indicated by the waiting event.

    // Since the spec does not guarantee the order of stalled and waiting, we

    // await both before checking :stalled.

//

    // This uses a Python custom handler that sends the initial part of the

    // video and then waits for a POST request to send the rest.

    const key = "{{uuid()}}";

    // Wait for the load event so that the video delaying-the-load-event flag

    // doesn't interact with the test harness.

    window.addEventListener("load", () => {

      promise_test(async (t) => {

        assert_implements(CSS.supports("selector(:stalled)"),

          ":stalled is not supported");

        const video = document.querySelector("video");

        const waitingPromise = new Promise(

          r => video.addEventListener("waiting", r, { once: true }));

        const stalledPromise = new Promise(

          r => video.addEventListener("stalled", r, { once: true }));

        video.src = `support/stall-resume.py?video&key=${key}`;

        video.play();

        await Promise.all([waitingPromise, stalledPromise]);

        assert_true(video.matches(":stalled"),

          ":stalled matches after waiting and stalled events");

        fetch(`support/stall-resume.py?resume&key=${key}`, { method: 'POST' });

        await new Promise(

          r => video.addEventListener("timeupdate", r, { once: true }));

        assert_false(video.matches(":stalled"),

          ":stalled does not match after media recovers from stalled");

      }, "Test :stalled timing relative to waiting and timeupdate events");

});

  </script>

</body>