| <!DOCTYPE html> |
| <html> |
| <title>Test that playing a video shows a pause icon in the non-overlay play button.</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../media-controls.js"></script> |
| <video controls width=90 preload=metadata src="../content/60_sec_video.webm"></video> |
| <script> |
| async_test(t => { |
| const video = document.querySelector('video'); |
| const button = playButton(video); |
| let currentImage; |
| |
| video.addEventListener('canplay', t.step_func(() => { |
| // Get the data string for the play button. |
| currentImage = getCurrentImage(); |
| video.play(); |
| }), { once: true }); |
| |
| video.addEventListener('playing', t.step_func(() => { |
| const newImage = getCurrentImage(); |
| assert_not_equals(currentImage, newImage, "Play button should change to pause button."); |
| currentImage = newImage; |
| video.pause(); |
| }), { once: true }); |
| |
| video.addEventListener('pause', t.step_func_done(() => { |
| const newImage = getCurrentImage(); |
| assert_not_equals(currentImage, newImage, "Pause button should change back to play button"); |
| }), { once: true }); |
| |
| function getCurrentImage() { |
| return getComputedStyle(button).backgroundImage; |
| } |
| }); |
| </script> |
| </html> |
