click-anywhere-to-play-pause.html | Explore in Territory

<!DOCTYPE html>
<html>
<title>Test that the user can click anywhere to play/pause.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls width=500 preload=none src="../content/60_sec_video.webm"></video>
<script>
async_test(t => {
  const video = document.querySelector('video');

  video.addEventListener('loadedmetadata', t.step_func(() => {
    // Start playback normally.
    singleTapOnControl(enabledPlayButton(video));
  }), { once: true });

  video.addEventListener('play', t.step_func(() => {
    video.addEventListener('fullscreenchange',
        t.step_func(testFullscreenContinuesPlayback), { once: true });

    // Double-tap to go fullscreen.
    doubleTapAnywhere();
  }), { once: true });

  function testFullscreenContinuesPlayback() {
    assert_equals(video, document.fullscreenElement, 'video should have gone fullscreen');
    assert_false(video.paused, 'video should not be paused');

    video.addEventListener('pause',
        t.step_func(testSingleTapAnywherePauses), { once: true });

    // Single-tap to pause.
    singleTapAnywhere();
  }

  function testSingleTapAnywherePauses() {
    assert_equals(video, document.fullscreenElement, 'video should remain in fullscreen');
    assert_true(video.paused, 'video should be paused');

    video.addEventListener('fullscreenchange',
        t.step_func(testFullscreenKeepsPaused), { once: true });

    // Prevent these taps from being double-taps with the previous single-tap.
    runAfterDoubleTapTimerFired(t.step_func(() => {
      // Double-tap to exit fullscreen.
      doubleTapAnywhere();
    }));
  }

  function testFullscreenKeepsPaused() {
    assert_equals(null, document.fullscreenElement, 'video should exit fullscreen');
    assert_true(video.paused, 'video should still be paused');

    video.addEventListener('playing',
        t.step_func_done(testSingleTapAnywherePlays), { once: true });

    // Single-tap to play.
    singleTapAnywhere();
  }

  function testSingleTapAnywherePlays() {
    assert_equals(null, document.fullscreenElement, 'video should remain out of fullscreen');
    assert_false(video.paused, 'video should no longer be paused');
  }

  function doubleTapAnywhere() {
    const coords = videoLeftEdgeCoordinates(video);
    doubleTapAtCoordinates(coords[0], coords[1]);
  }

  function singleTapAnywhere() {
    const coords = videoLeftEdgeCoordinates(video);
    singleTapAtCoordinates(coords[0], coords[1]);
  }

  video.load();
});
</script>
</html>
chromium/third_party/blink/web_tests/media/controls/click-anywhere-to-play-pause.html
