| <!DOCTYPE html> |
| <html> |
| <title>Test that the panel doesn't stay transparent when the controls are hidden.</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../media-controls.js"></script> |
| <!-- video with native controls hidden --> |
| <video width=500 preload=none src="../content/60_sec_video.webm"></video> |
| <script> |
| async_test(t => { |
| const video = document.querySelector('video'); |
| const panel = panelElement(video); |
| enableTestMode(video); |
| |
| video.addEventListener('canplaythrough', t.step_func(() => { |
| assert_false(isPanelTransparent(), 'panel should start opaque'); |
| video.play(); |
| }), { once: true }); |
| |
| video.addEventListener('playing', t.step_func(() => { |
| runAfterHideMediaControlsTimerFired(t.step_func(() => { |
| assert_true(isPanelTransparent(), 'panel should be transparent after hide timer fires'); |
| video.pause(); |
| }), video); |
| }), { once: true }); |
| |
| video.addEventListener('pause', t.step_func_done(() => { |
| assert_false(isPanelTransparent(), 'panel should now be opaque again'); |
| }), { once: true }); |
| |
| function isPanelTransparent() { |
| return panel.classList.contains('transparent'); |
| } |
| |
| video.load(); |
| |
| }); |
| </script> |
| </html> |
