ManualTests/media-controls.html - WebKit - Git at Google

 <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>
	<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>