Blitz - WPT: media-loading-state-timing.sub.html

wpt / css / selectors / media / media-loading-state-timing.sub.html
Enable JavaScript in test iframe
/css/selectors/media/media-loading-state-timing.sub.html
<!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>