Move manual-tests out of WebCore.
[WebKit-https.git] / ManualTests / media-controls.html
1 <html>
2 <head>
3 <style>
4
5 body {
6     display: -webkit-box;
7     margin: 0;
8     font-family: Sans-serif;
9     overflow: hidden;
10 }
11
12 #list {
13     width: 200px;
14     padding: 10px;
15 }
16
17 #list h1 {
18     margin: 0;
19     font-size: 16px;
20     padding: 0 0 14px 8px;
21     border-right: 4px solid LightGray;
22 }
23
24 #list ul {
25     margin: 0;
26     padding: 2px 0 0 0;
27     list-style: none;
28 }
29
30 #list a:target {
31     cursor: default;
32     pointer-events: none;
33     background-color: #eee;
34     border-right: 4px solid Gray;
35 }
36
37 #list li {
38     padding-bottom: 2px;
39 }
40
41 #list a {
42     padding: 8px 8px 8px 8px;
43     display: block;
44     border-right: 4px solid LightGray;
45     color: initial;
46     -webkit-transition-property: border-right, background-color;
47     -webkit-transition-duration: 0.4s;
48 }
49
50 #test {
51     display: -webkit-box;
52     -webkit-box-orient: vertical;
53     -webkit-box-flex: 0.5;
54 }
55
56 #arena {
57     -webkit-box-flex: 0.5;
58     border: none;
59     display: -webkit-box;
60 }
61
62 #description {
63     height: 200px;
64     font-size: 12px;
65     padding-right: 16px;
66     overflow: auto;
67 }
68
69 </style>
70 <!-- LayoutTests location is hard-coded to avoid duplication of code. -->
71 <script src="http://svn.webkit.org/repository/webkit/trunk/LayoutTests/media/media-file.js"></script>
72 <script>
73
74 var MEDIA_FILES_LOCATION = 'http://svn.webkit.org/repository/webkit/trunk/LayoutTests/media/content';
75
76 var MEDIA_FILES;
77
78 var TESTS = {
79
80 'video': {
81     title: 'Typical video with controls',
82     description: '<p>Should have "Rewind", "Play", "Mute" buttons, timeline with time current and remaining shown.</p>' +
83                  '<p>You may see brief resize of the video when the metadata arrives and a brief flash of the "Loading..." status.</p>' +
84                  '<p>"Play" button should turn into "Pause" when playing, with current and remaining time should changing and the thumb ' +
85                  'of the timeline gliding smoothly along the track, updated every 200ms or so.</p>',
86     html: '<video controls src={video}></video>',
87 },
88 'audio': {
89     title: 'Typical audio with controls',
90     description: '<p>Should have "Rewind", "Play", "Mute" buttons, timeline with time current and remaining shown.</p>' +
91                  '<p>You may see brief resize of the video when the metadata arrives and a brief flash of the "Loading..." status.</p>' +
92                  '<p>"Play" button should turn into "Pause" when playing, with current and remaining time should changing and the thumb ' +
93                  'of the timeline gliding smoothly along the track, updated every 200ms or so.</p>',
94     html: '<audio controls src={audio}></audio>',
95 },
96 'video-volume': {
97     title: 'Video volume controls',
98     description: '<p>When hovering over the "Mute" button, a volume control should appear, showing its own "Mute" button and a volume slider.</p>' +
99                  '<p>You should be able to control the volume with the slider and mute/unmute using the "Mute" button</p>' +
100                  '<p>Moving the mouse away from the volume control should make the control disappear.</p>',
101     html: '<video controls src={video}></video>',
102 },
103 'audio-volume': {
104     title: 'Audio volume controls',
105     description: '<p>When hovering over the "Mute" button, a volume control should appear, showing its own "Mute" button and a volume slider.</p>' +
106                  '<p>You should be able to control the volume with the slider and mute/unmute using the "Mute" button</p>' +
107                  '<p>Moving the mouse away from the volume control should make the control disappear.</p>',
108     html: '<audio style="padding-top: 200px;" controls src={video}></audio>',
109 },
110 'audio-volume-neg': {
111     title: 'Audio volume controls (negative offset)',
112     description: '<p>When hovering over the "Mute" button, a volume control should appear, showing its own "Mute" button and a volume slider.</p>' +
113                  '<p>In this particular layout, the volume control should be positioned directly under the "Mute" button, showing two "Mute" buttons --' +
114                  'one on the main controls and another on the volume control.</p>' +
115                  '<p>You should be able to control the volume with the slider and mute/unmute using the "Mute" button</p>' +
116                  '<p>Moving the mouse away from the volume control or the "Mute" button should make the control disappear.</p>',
117     html: '<audio controls src={video}></audio>',
118 },
119 'video-zoomed': {
120     title: 'Magnified video',
121     description: '<p>Should have the same appearance as a typical video, except magnified 1.5 times.</p>' +
122                  '<p>Make sure that the appearance of controls does not changed when changing the page zoom.</p>',
123     html: '<video controls src={video} style="zoom:150%"></video>',
124 },
125 'controls-fade': {
126     title: 'Fading video controls',
127     description: '<p>When the video is playing, the controls should fade out when the mouse is away from the video and fade back in when the mouse is over the video.</p>' +
128                  '<p>The controls should not fade when the video is paused.</p>',
129     html: '<video controls src={video} autoplay></video>',
130 },
131 'timeline-resize': {
132     title: 'Timeline reacting to a resize',
133     description: '<p>When changing the width of the screen, the timeline should be the only one part of the controls changing its width.</p>' +
134                  '<p>At a certain minimum point, the current and remaining time should disappear, giving up their space to the timeline.</p>' +
135                  '<p>Conversely, when sizing the width up, the current and remaining time should come back into their places.',
136     html: '<video controls src={video} style="width:60%"></video>',
137 },
138 'toggle-controls': {
139     title: 'Toggling video controls',
140     description: '<p>When clicking on "Toggle Controls" button, the controls should appear and disappear.</p>' +
141                  '<p>The controls should have "Rewind", "Play", "Mute" buttons, timeline with time current and remaining shown.</p>',
142     js: function(click) {
143         if (!click)
144             return;
145
146         var video = document.getElementsByTagName('video')[0];
147         video.controls = !video.controls;
148     },
149     html: '<video src={video}></video><br><button onclick="test(true)">Toggle Controls</button>',
150 },
151 'toggle-controls-autoplay': {
152     title: 'Toggling video controls while playing',
153     description: '<p>When clicking on "Toggle Controls" button, the controls should appear and disappear.</p>' +
154                  '<p>The controls should have "Rewind", "Pause", "Mute" buttons, timeline with time current and remaining shown,' +
155                  'with current and remaining time should changing and the thumb of the timeline gliding smoothly along the track, updated every 200ms or so.</p>' +
156                  '<p>The controls should fade quickly if the mouse is not over the video.</p>',
157     js: function(click) {
158         if (!click)
159             return;
160
161         var video = document.getElementsByTagName('video')[0];
162         video.controls = !video.controls;
163     },
164     html: '<video src={video} autoplay></video><br><button onclick="test(true)">Toggle Controls</button>',
165 },
166 'closed-captions': {
167     title: 'Closed-captioned video',
168     description: '<p>If supported, should show a "CC" button, which should toggle display of closed captions.</p>' +
169                  '<p>The state of the button should reflect the state of closed-captioning in the video (on at the start of the test).</p>',
170     js: function() {
171         var video = document.getElementsByTagName('video')[0];
172         video.webkitClosedCaptionsVisible = true;
173         video.addEventListener('canplaythrough', function()
174         {
175             video.webkitClosedCaptionsVisible = true;
176         }, false);
177     },
178     html: '<video controls src={video-captioned}></video>',
179 },
180 'invalid': {
181     title: 'Video with invalid media',
182     description: 'Should have "Rewind" and "Play" buttons, and "Loading..." status ' +
183                  'if supported. Should blink "Loading...", but not twitch or flash other controls if reloaded',
184     html: '<video controls src="foobar"></video>'
185 },
186 'video-no-source': {
187     title: 'Video with no source',
188     description: 'Should have "Rewind" and "Play" buttons. Should not blink/twitch if reloaded.',
189     html: '<video controls></video>'
190 },
191 'audio-no-source': {
192     title: 'Audio with no source',
193     description: 'Should have "Rewind" and "Play" buttons. Should not blink/twitch if reloaded.',
194     html: '<audio controls></audio>'
195 }
196
197 };
198
199 function configureMediaFiles()
200 {
201     MEDIA_FILES = {
202         'audio': absoluteUrl(findMediaFile('audio', MEDIA_FILES_LOCATION + '/test')),
203         'video': absoluteUrl(findMediaFile('video', MEDIA_FILES_LOCATION + '/test')),
204         'video-captioned': absoluteUrl(MEDIA_FILES_LOCATION + '/counting-captioned.mov')
205     }
206
207     // FIXME: Add error reporting when resolving these fails.
208
209     function absoluteUrl(url)
210     {
211         var a = document.createElement('a');
212         a.href = url;
213         return '"' + a.href + '"';
214     }
215 }
216
217 function runTest()
218 {
219     var test = TESTS[location.hash.substr(1)];
220     if (!test)
221         return;
222
223     var arena = document.getElementById('arena');
224     document.getElementById('description').innerHTML = '<h2>' + test.title + '</h2>' + test.description;
225     if (test.html) {
226         arena.contentDocument.body.innerHTML = test.html.replace(/{([\w-]+)}/g, function(s, type)
227         {
228             return (MEDIA_FILES[type] || '');
229         });
230     }
231
232     arena.contentDocument.body.appendChild(arena.contentDocument.createElement('script')).textContent = 'window.test = ' + (test.js ? String(test.js) : 'function() {}') + ';\nwindow.test()';
233 }
234
235 window.addEventListener('hashchange', runTest, false);
236
237 window.addEventListener('DOMContentLoaded', function()
238 {
239     configureMediaFiles();
240
241     var list = document.getElementById('list').appendChild(document.createElement('ul'));
242     for(var key in TESTS)
243         list.appendChild(document.createElement('li')).innerHTML = '<a href="#' + key + '" id="' + key + '">' + TESTS[key].title + '</a>';
244     runTest();
245 }, false);
246
247 </script>
248 </head>
249 <body>
250 <div id="list">
251     <h1>Manual Tests of Media Controls Appearance</h1>
252 </div>
253 <div id="test">
254     <iframe id="arena"></iframe>
255     <div id="description"></div>
256 </div>
257 </body>
258 </html>