<!DOCTYPE html>
<html>
<title>Test that touching the video will show the controls.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video id="video" controls width=500 preload="none" src="../content/60_sec_video.webm"></video>
<script>
async_test(t => {
  const video = document.getElementById('video');

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

  video.addEventListener('playing', t.step_func(() => {
    // Wait until the controls hide, and then try to show via touch.
    runAfterHideMediaControlsTimerFired(t.step_func(touchToShowControls), video);
  }), { once: true });

  function touchToShowControls() {
    assert_false(isControlsPanelVisible(video), "Controls should not be shown before we tap");
    // Touch on the video to show the controls.
    singleTouchOnControl(video, t.step_func(() => {
      runAfterDoubleTapTimerFired(t.step_func_done(() => {
        assert_true(isControlsPanelVisible(video), "Controls should be shown after a tap");
      }));
    }));
  }

  video.load();
});
</script>
</html>