WebCore/manual-tests/media-controls.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>'
}

};

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>