| <DOCTYPE html> |
| <title>Test media controls video keyboard navigation</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../media-file.js"></script> |
| <script src="../media-controls.js"></script> |
| <video controls></video> |
| <script> |
| test(_ => { |
| assert_true('eventSender' in window); |
| }, 'eventSender required'); |
| |
| async_test(function(t) { |
| var video = document.querySelector("video"); |
| video.src = findMediaFile("video", "../content/test"); |
| assert_equals(video.volume, 1); |
| assert_equals(video.currentTime, 0); |
| |
| video.oncanplaythrough = t.step_func_done(function() { |
| // Focus the video. |
| video.focus(); |
| |
| // 'Enter' plays the video. |
| eventSender.keyDown("Enter"); |
| assert_false(video.paused); |
| |
| // 'Down' reduces volume. |
| eventSender.keyDown("ArrowDown"); |
| assert_less_than(video.volume, 1); |
| |
| // 'Up' increases volume. |
| eventSender.keyDown("ArrowUp"); |
| assert_equals(video.volume, 1); |
| |
| // 'Enter' again pauses the video. |
| eventSender.keyDown("Enter"); |
| assert_true(video.paused); |
| |
| // 'Space' also pauses/plays the video. |
| eventSender.keyDown(" "); |
| assert_false(video.paused); |
| |
| eventSender.keyDown(" "); |
| assert_true(video.paused); |
| |
| var cur = video.currentTime; |
| |
| // 'Right' scrubs the timeline forward. |
| // Used to move the timeline off the first frame which is neccessary to |
| // test 'Home', otherwise 'Home' is a no-op. |
| eventSender.keyDown("ArrowRight"); |
| assert_greater_than(video.currentTime, cur); |
| |
| // 'Home' sets the timeline to 0. |
| eventSender.keyDown("Home"); |
| assert_equals(video.currentTime, 0); |
| |
| // 'End' sets the timeline to end. |
| eventSender.keyDown("End"); |
| assert_equals(video.currentTime, video.duration); |
| |
| // 'Left' scrubs the timeline back. |
| eventSender.keyDown("ArrowLeft"); |
| assert_less_than(video.currentTime, video.duration); |
| }); |
| }); |
| </script> |