Google Git
Sign in
webkit / WebKit / 1bdbd28851e521a1575edd26fcaa118919202221 / . / Source / WebCore / manual-tests / media-controls.html
blob: a24d67c6a88b22da579977ebe6e9d7ab58461726 [file] [log] [blame]
dglazkov@chromium.org1bdbd282011-02-23 20:08:24 +0000[diff] [blame^]1<html>
2<head>
3<style>
4
5body {
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/http/tests/media/media-file.js"></script>
72<script>
73
74var MEDIA_FILES_LOCATION = 'http://svn.webkit.org/repository/webkit/trunk/LayoutTests/media/content';
75
76var MEDIA_FILES;
77
78var 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'video-volume': {
89 title: 'Volume controls',
90 description: '<p>When hovering over the "Mute" button, a volume control should appear, showing its own "Mute" button and a volume slider.</p>' +
91 '<p>You should be able to control the volume with the slider and mute/unmute using the "Mute" button</p>' +
92 '<p>Moving the mouse away from the volume control should make the control disappear.</p>',
93 html: '<video controls src={video}></video>',
94},
95'video-zoomed': {
96 title: 'Magnified video',
97 description: '<p>Should have the same appearance as a typical video, except magnified 1.5 times.</p>' +
98 '<p>Make sure that the appearance of controls does not changed when changing the page zoom.</p>',
99 html: '<video controls src={video} style="zoom:150%"></video>',
100},
101'controls-fade': {
102 title: 'Fading video controls',
103 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>' +
104 '<p>The controls should not fade when the video is paused.</p>',
105 html: '<video controls src={video} autoplay></video>',
106},
107'timeline-resize': {
108 title: 'Timeline reacting to a resize',
109 description: '<p>When changing the width of the screen, the timeline should be the only one part of the controls changing its width.</p>' +
110 '<p>At a certain minimum point, the current and remaining time should disappear, giving up their space to the timeline.</p>' +
111 '<p>Conversely, when sizing the width up, the current and remaining time should come back into their places.',
112 html: '<video controls src={video} style="width:60%"></video>',
113},
114'toggle-controls': {
115 title: 'Toggling video controls',
116 description: '<p>When clicking on "Toggle Controls" button, the controls should appear and disappear.</p>' +
117 '<p>The controls should have "Rewind", "Play", "Mute" buttons, timeline with time current and remaining shown.</p>',
118 js: function(click) {
119 if (!click)
120 return;
121
122 var video = document.getElementsByTagName('video')[0];
123 video.controls = !video.controls;
124 },
125 html: '<video src={video}></video><br><button onclick="test(true)">Toggle Controls</button>',
126},
127'toggle-controls-autoplay': {
128 title: 'Toggling video controls while playing',
129 description: '<p>When clicking on "Toggle Controls" button, the controls should appear and disappear.</p>' +
130 '<p>The controls should have "Rewind", "Pause", "Mute" buttons, timeline with time current and remaining shown,' +
131 'with current and remaining time should changing and the thumb of the timeline gliding smoothly along the track, updated every 200ms or so.</p>' +
132 '<p>The controls should fade quickly if the mouse is not over the video.</p>',
133 js: function(click) {
134 if (!click)
135 return;
136
137 var video = document.getElementsByTagName('video')[0];
138 video.controls = !video.controls;
139 },
140 html: '<video src={video} autoplay></video><br><button onclick="test(true)">Toggle Controls</button>',
141},
142'closed-captions': {
143 title: 'Closed-captioned video',
144 description: '<p>If supported, should show a "CC" button, which should toggle display of closed captions.</p>' +
145 '<p>The state of the button should reflect the state of closed-captioning in the video (on at the start of the test).</p>',
146 js: function() {
147 var video = document.getElementsByTagName('video')[0];
148 video.webkitClosedCaptionsVisible = true;
149 video.addEventListener('canplaythrough', function()
150 {
151 video.webkitClosedCaptionsVisible = true;
152 }, false);
153 },
154 html: '<video controls src={video-captioned}></video>',
155},
156'invalid': {
157 title: 'Video with invalid media',
158 description: 'Should have "Rewind" and "Play" buttons, and "Loading..." status ' +
159 'if supported. Should blink "Loading...", but not twitch or flash other controls if reloaded',
160 html: '<video controls src="foobar"></video>'
161},
162'no-source': {
163 title: 'Video with no source',
164 description: 'Should have "Rewind" and "Play" buttons. Should not blink/twitch if reloaded.',
165 html: '<video controls></video>'
166}
167
168};
169
170function configureMediaFiles()
171{
172 MEDIA_FILES = {
173 'audio': absoluteUrl(findMediaFile('audio', MEDIA_FILES_LOCATION + '/test')),
174 'video': absoluteUrl(findMediaFile('video', MEDIA_FILES_LOCATION + '/test')),
175 'video-captioned': absoluteUrl(MEDIA_FILES_LOCATION + '/counting-captioned.mov')
176 }
177
178 // FIXME: Add error reporting when resolving these fails.
179
180 function absoluteUrl(url)
181 {
182 var a = document.createElement('a');
183 a.href = url;
184 return '"' + a.href + '"';
185 }
186}
187
188function runTest()
189{
190 var test = TESTS[location.hash.substr(1)];
191 if (!test)
192 return;
193
194 var arena = document.getElementById('arena');
195 document.getElementById('description').innerHTML = '<h2>' + test.title + '</h2>' + test.description;
196 if (test.html) {
197 arena.contentDocument.body.innerHTML = test.html.replace(/{([\w-]+)}/g, function(s, type)
198 {
199 return (MEDIA_FILES[type] || '');
200 });
201 }
202
203 arena.contentDocument.body.appendChild(arena.contentDocument.createElement('script')).textContent = 'window.test = ' + (test.js ? String(test.js) : 'function() {}') + ';\nwindow.test()';
204}
205
206window.addEventListener('hashchange', runTest, false);
207
208window.addEventListener('DOMContentLoaded', function()
209{
210 configureMediaFiles();
211
212 var list = document.getElementById('list').appendChild(document.createElement('ul'));
213 for(var key in TESTS)
214 list.appendChild(document.createElement('li')).innerHTML = '<a href="#' + key + '" id="' + key + '">' + TESTS[key].title + '</a>';
215 runTest();
216}, false);
217
218</script>
219</head>
220<body>
221<div id="list">
222 <h1>Manual Tests of Media Controls Appearance</h1>
223</div>
224<div id="test">
225 <iframe id="arena"></iframe>
226 <div id="description"></div>
227</div>
228</body>
229</html>