tab-into-controls-after-touch.html | Explore in Territory

<!DOCTYPE html>
<html>
<title>Test that when a video is touched to play, you can still tab into the controls.</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');
  enableTestMode(video);

  video.addEventListener('loadedmetadata', t.step_func(() => {
    assert_true(isControlsPanelVisible(video),
        'controls should be visible before tapping');

    // Touch the play button to start the video and hide the controls.
    singleTouchOnControl(enabledPlayButton(video));
  }));

  video.addEventListener('playing', t.step_func(() => {
    // Once the video is playing, wait for the controls to hide.
    runAfterHideMediaControlsTimerFired(t.step_func_done(() => {
      assert_false(isControlsPanelVisible(video),
          'controls should hide after tapping on the play button');

      // Tab to focus the video.
      eventSender.keyDown('Tab');
      assert_true(isControlsPanelVisible(video),
          'controls should show when tabbed into')
    }), video);
  }));

  video.load();
});
</script>
</html>
chromium/third_party/blink/web_tests/media/controls/tab-into-controls-after-touch.html
