toggle-class-with-state-source.html

<!DOCTYPE html>
<html>
<title>Test that player source state is reflected in CSS classes.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../../media-resources/media-controls.js"></script>
<video controls width=400 preload=metadata></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  let was_paused = false;

  checkControlsHasClasses(video, ["phase-pre-ready", "state-no-source", "use-default-poster"]);

  video.onstalled = t.step_func(() => {
    checkControlsHasClass(video, "state-loading-metadata-playing");
  });

  video.onloadeddata = t.step_func(() => {
    const currentClasses = internals.shadowRoot(video).firstChild.classList;
    assert_true(currentClasses.contains("phase-ready") &&
        (currentClasses.contains("state-buffering") || currentClasses.contains("state-playing")),
        "Controls should have 'phase-ready' class and either 'state-buffering' or 'state-playing' classes.");
  });

  video.onplaying = t.step_func(() => {
    if (was_paused) {
      t.done();
    } else {
      video.pause();
      was_paused = true;
    }
  });

  video.onpause = t.step_func(() => {
    checkControlsHasClasses(video, ["phase-ready", "state-stopped"]);
    video.play();
  });

  // Use a .webm to ensure metadata is near the beginning of the file.
  const mediaFile = "resources/media-source/webm/test.webm";
  video.src = "http://127.0.0.1:8000/media/video-throttled-load.cgi?" +
      "nph=1&name=" + mediaFile + "&throttle=40&type=video/webm";
  video.play();
});
</script>
</html>
chromium/third_party/blink/web_tests/http/tests/media/controls/toggle-class-with-state-source.html
