gecko/toolkit/content/tests/widgets/test_videocontrols.html

257 lines
8.5 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Video controls test</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content">
<video width="320" height="240" id="video" src="video.ogg" controls mozNoDynamicControls preload="auto"></video>
</div>
<pre id="test">
<script type="text/javascript" src="use_large_cache.js"></script>
<script class="testbody" type="text/javascript">
/*
* Positions of the UI elements, relative to the upper-left corner of the
* <video> box.
*/
const videoWidth = 320;
const videoHeight = 240;
const videoDuration = 3.8329999446868896;
const playButtonWidth = 28;
const playButtonHeight = 28;
const muteButtonWidth = 33;
const muteButtonHeight = 28;
const durationWidth = 34;
const scrubberWidth = videoWidth - playButtonWidth - muteButtonWidth - durationWidth;
const scrubberHeight = 28;
// Play button is on the bottom-left
const playButtonCenterX = 0 + Math.round(playButtonWidth / 2);
const playButtonCenterY = videoHeight - Math.round(playButtonHeight / 2);
// Mute button is on the bottom-right
const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2);
const muteButtonCenterY = videoHeight - Math.round(muteButtonHeight / 2);
// Scrubber bar is between the play and mute buttons. We don't need it's
// X center, just the offset of its box.
const scrubberOffsetX = 0 + playButtonWidth;
const scrubberCenterY = videoHeight - Math.round(scrubberHeight / 2);
function runTest(event) {
ok(true, "----- test #" + testnum + " -----");
switch (testnum) {
/*
* Check operation of play/pause/mute/unmute buttons.
*/
case 1:
// Check initial state upon load
is(event.type, "canplaythrough", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, false, "checking video mute state");
// Click the play button
synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { });
break;
case 2:
is(event.type, "play", "checking event type");
is(video.paused, false, "checking video play state");
is(video.muted, false, "checking video mute state");
// Click the pause button
synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { });
break;
case 3:
is(event.type, "pause", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, false, "checking video mute state");
// Click the mute button
synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { });
break;
case 4:
is(event.type, "volumechange", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, true, "checking video mute state");
// Click the unmute button
synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { });
break;
/*
* Bug 470596: Make sure that having CSS border or padding doesn't
* break the controls (though it should move them)
*/
case 5:
is(event.type, "volumechange", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, false, "checking video mute state");
video.style.border = "medium solid purple";
video.style.borderWidth = "30px 40px 50px 60px";
video.style.padding = "10px 20px 30px 40px";
// totals: top: 40px, right: 60px, bottom: 80px, left: 100px
// Click the play button
synthesizeMouse(video, 100 + playButtonCenterX, 40 + playButtonCenterY, { });
break;
case 6:
is(event.type, "play", "checking event type");
is(video.paused, false, "checking video play state");
is(video.muted, false, "checking video mute state");
video.pause();
break;
case 7:
is(event.type, "pause", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, false, "checking video mute state");
// Click the mute button
synthesizeMouse(video, 100 + muteButtonCenterX, 40 + muteButtonCenterY, { });
break;
case 8:
is(event.type, "volumechange", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, true, "checking video mute state");
// Clear the style set in test 5.
video.style.border = "";
video.style.borderWidth = "";
video.style.padding = "";
video.muted = false;
break;
/*
* Previous tests have moved playback postion, reset it to 0.
*/
case 9:
is(event.type, "volumechange", "checking event type");
is(video.paused, true, "checking video play state");
is(video.muted, false, "checking video mute state");
ok(true, "video position is at " + video.currentTime);
video.currentTime = 0.0;
break;
case 10:
is(event.type, "seeking", "checking event type");
ok(true, "video position is at " + video.currentTime);
break;
/*
* Drag the slider's thumb to the halfway point with the mouse.
*/
case 11:
is(event.type, "seeked", "checking event type");
ok(true, "video position is at " + video.currentTime);
// Bug 477434 -- sometimes we get 0.098999 here instead of 0!
// is(video.currentTime, 0.0, "checking playback position");
var beginDragX = scrubberOffsetX;
var endDragX = scrubberOffsetX + (scrubberWidth / 2);
synthesizeMouse(video, beginDragX, scrubberCenterY, { type: "mousedown", button: 0 });
synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mousemove", button: 0 });
synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mouseup", button: 0 });
break;
case 12:
is(event.type, "seeking", "checking event type");
ok(true, "video position is at " + video.currentTime);
break;
/*
* Click the slider at the 1/4 point with the mouse (jump backwards)
*/
case 13:
is(event.type, "seeked", "checking event type");
ok(true, "video position is at " + video.currentTime);
var expectedTime = videoDuration / 2;
ok(Math.abs(video.currentTime - expectedTime) < 0.1, "checking expected playback position");
synthesizeMouse(video, scrubberOffsetX + (scrubberWidth / 4), scrubberCenterY, { });
break;
case 14:
is(event.type, "seeking", "checking event type");
ok(true, "video position is at " + video.currentTime);
break;
case 15:
is(event.type, "seeked", "checking event type");
ok(true, "video position is at " + video.currentTime);
// The scrubber currently just jumps towards the nearest pageIncrement point, not
// precisely to the point clicked. So, expectedTime isn't (videoDuration / 4).
// We should end up at 1.733, but sometimes we end up at 1.498. I guess
// it's timing depending if the <scale> things it's click-and-hold, or a
// single click. So, just make sure we end up less that the previous
// position.
lastPosition = (videoDuration / 2) - 0.1;
ok(video.currentTime < lastPosition, "checking expected playback position");
SimpleTest.finish();
break;
default:
throw "unexpected test #" + testnum + " w/ event " + event.type;
}
testnum++;
}
var canplaythroughsavedevent = null;
var gotcanplaythroughevent = false;
var gotloadevent = false;
function canplaythroughevent(event) {
canplaythroughsavedevent = event;
gotcanplaythroughevent = true;
video.removeEventListener("canplaythrough", canplaythroughevent, false);
maybeStartTest();
}
function loadevent(event) {
gotloadevent = true;
maybeStartTest();
}
// setTimeout so that test starts after paint suppression ends
function maybeStartTest() {
if (!gotcanplaythroughevent || !gotloadevent)
return;
setTimeout("runTest(canplaythroughsavedevent);", 0);
}
var testnum = 1;
var video = document.getElementById("video");
// Kick off test once video has loaded.
video.addEventListener("canplaythrough", canplaythroughevent, false);
window.addEventListener("load", loadevent, false);
// Other events expected by the test.
video.addEventListener("play", runTest, false);
video.addEventListener("pause", runTest, false);
video.addEventListener("volumechange", runTest, false);
video.addEventListener("seeking", runTest, false);
video.addEventListener("seeked", runTest, false);
SimpleTest.waitForExplicitFinish();
</script>
</pre>
</body>
</html>