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