[Modern Media Controls] Turn media/modern-media-controls/ios-inline-media-controls...
[WebKit-https.git] / LayoutTests / media / video-controls-show-on-kb-or-ax-event.html
1 <!-- webkit-test-runner [ enableModernMediaControls=false ] -->
2 <body onload="initialChecksBeforePlay()">
3 <p>
4     This tests:<br>
5     1. Initially, toolbar is visible, "Show Controls" button is not.<br>
6     2. After the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the invisible "Show Controls" button.<br>
7     3. When the video is paused, the controls become visible and the "Show Controls" button is hidden.<br>
8 </p>
9
10 <video id="video" controls onplaying="testPlaying()"  onpause="testPausing()" src="content/long-test.mp4"></video><br>
11
12 <p id="result">
13     FAIL: Test did not run.<br>
14 </p>
15 <script>
16     if (window.testRunner) {
17         testRunner.waitUntilDone();
18         testRunner.dumpAsText();
19     }
20
21     var result = document.getElementById("result");
22     result.innerHTML = "";
23     // Initially, the showControls Button should be hidden.
24     var root = internals.shadowRoot(document.getElementById("video"));
25     var button = root.firstChild.querySelector('button');
26     var controls = root.firstChild.querySelector('[role="toolbar"]');
27     var video = document.getElementById('video');
28
29     function isElementHidden(elem) {
30         return (elem.hidden && getComputedStyle(elem).display === 'none')
31     }
32     function initialChecksBeforePlay() {
33         // Before we start, check to make sure toolbar is in place and showControlsbutton is hidden.
34         result.innerHTML += (!isElementHidden(controls))? 'PASS<br>': 'FAIL: Controls are not available at the beginning.<br>';
35         result.innerHTML += (isElementHidden(button))? 'PASS<br>': 'FAIL: "Show Controls" button is not hidden initially.<br>';
36
37         video.play();
38     }
39
40     function testPlaying() {
41         // Make sure we are getting the updated root and button.
42         root = internals.shadowRoot(document.getElementById("video"));
43
44         // We give it a 100ms buffer for the video to set all the properties before sending mouse events.
45         setTimeout(function () {
46             // Mouse over the video then mouse out to hide controls more quickly.
47             eventSender.mouseMoveTo(150,150);
48             eventSender.mouseMoveTo(0,0);
49         }, 100);
50
51         // 300ms after the mouse events, all UI changes should complete and we can start making assertions.
52         setTimeout(function() {
53             // Make sure we are getting the latest copy of the element.
54             controls = root.firstChild.querySelector('[role="toolbar"]');
55             result.innerHTML += !controls? 'PASS<br>': 'FAIL: Toolbar still around after mouseout.<br>';
56
57             // Make sure we are getting the latest copy of the element.
58             button = root.firstChild.querySelector('button');
59             result.innerHTML += !isElementHidden(button)? 'PASS<br>': 'FAIL: Button should be visible.<br>';
60
61             if(button && !isElementHidden(button)) {
62                 button.focus();
63                 eventSender.keyDown(' ');
64             } else 
65                 result.innerHTML += 'FAIL: "Show Controls" button is hidden or unavailable.<br>';
66
67             // Make sure we are getting the latest copy of the element.
68             controls = root.firstChild.querySelector('[role="toolbar"]');
69             result.innerHTML += controls? 'PASS<br>': 'FAIL: Toolbar should exist<br>';
70
71             eventSender.mouseMoveTo(150,150);
72             eventSender.mouseMoveTo(0,0);
73
74             setTimeout(function () {
75                 controls = root.firstChild.querySelector('[role="toolbar"]');
76                 result.innerHTML += !controls? 'PASS<br>': 'FAIL: Toolbar should not exist<br>';
77                 // We are done testing playing state, moving on to testing the paused state.
78                 video.pause();
79             }, 300);
80         }, 400);
81     }
82
83     function testPausing() {
84         // We are giving 100ms + 300s buffer for the video to set its properties and make UI changes.
85         setTimeout(function () {
86             controls = root.firstChild.querySelector('[role="toolbar"]');
87             result.innerHTML += controls? 'PASS<br>': 'FAIL: Toolbar should exist<br>';
88
89             button = root.firstChild.querySelector('button');
90             result.innerHTML += isElementHidden(button)? 'PASS<br>': 'FAIL: Button should not be visible.<br>';
91
92             testRunner.notifyDone();
93         }, 400);
94     }
95 </script>
96 </body>