1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/tests/widgets/test_videocontrols.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,247 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<head>
1.7 + <title>Video controls test</title>
1.8 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
1.10 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.11 +</head>
1.12 +<body>
1.13 +<p id="display"></p>
1.14 +
1.15 +<div id="content">
1.16 + <video width="320" height="240" id="video" controls mozNoDynamicControls preload="auto"></video>
1.17 +</div>
1.18 +
1.19 +<pre id="test">
1.20 +<script class="testbody" type="text/javascript">
1.21 +
1.22 +/*
1.23 + * Positions of the UI elements, relative to the upper-left corner of the
1.24 + * <video> box.
1.25 + */
1.26 +const videoWidth = 320;
1.27 +const videoHeight = 240;
1.28 +const videoDuration = 3.8329999446868896;
1.29 +
1.30 +const playButtonWidth = 28;
1.31 +const playButtonHeight = 28;
1.32 +const muteButtonWidth = 33;
1.33 +const muteButtonHeight = 28;
1.34 +const durationWidth = 34;
1.35 +const fullscreenButtonWidth = document.mozFullScreenEnabled ? 28 : 0;
1.36 +const volumeSliderWidth = 32;
1.37 +const scrubberWidth = videoWidth - playButtonWidth - durationWidth - muteButtonWidth - volumeSliderWidth - fullscreenButtonWidth;
1.38 +const scrubberHeight = 28;
1.39 +
1.40 +// Play button is on the bottom-left
1.41 +const playButtonCenterX = 0 + Math.round(playButtonWidth / 2);
1.42 +const playButtonCenterY = videoHeight - Math.round(playButtonHeight / 2);
1.43 +// Mute button is on the bottom-right before the full screen button and volume slider
1.44 +const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2) - volumeSliderWidth - fullscreenButtonWidth;
1.45 +const muteButtonCenterY = videoHeight - Math.round(muteButtonHeight / 2);
1.46 +// Scrubber bar is between the play and mute buttons. We don't need it's
1.47 +// X center, just the offset of its box.
1.48 +const scrubberOffsetX = 0 + playButtonWidth;
1.49 +const scrubberCenterY = videoHeight - Math.round(scrubberHeight / 2);
1.50 +
1.51 +function runTest(event) {
1.52 + ok(true, "----- test #" + testnum + " -----");
1.53 +
1.54 + switch (testnum) {
1.55 + /*
1.56 + * Check operation of play/pause/mute/unmute buttons.
1.57 + */
1.58 + case 1:
1.59 + // Check initial state upon load
1.60 + is(event.type, "canplaythrough", "checking event type");
1.61 + is(video.paused, true, "checking video play state");
1.62 + is(video.muted, false, "checking video mute state");
1.63 +
1.64 + // Click the play button
1.65 + synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { });
1.66 + break;
1.67 +
1.68 + case 2:
1.69 + is(event.type, "play", "checking event type");
1.70 + is(video.paused, false, "checking video play state");
1.71 + is(video.muted, false, "checking video mute state");
1.72 +
1.73 + // Click the pause button
1.74 + synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { });
1.75 + break;
1.76 +
1.77 + case 3:
1.78 + is(event.type, "pause", "checking event type");
1.79 + is(video.paused, true, "checking video play state");
1.80 + is(video.muted, false, "checking video mute state");
1.81 +
1.82 + // Click the mute button
1.83 + synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { });
1.84 + break;
1.85 +
1.86 + case 4:
1.87 + is(event.type, "volumechange", "checking event type");
1.88 + is(video.paused, true, "checking video play state");
1.89 + is(video.muted, true, "checking video mute state");
1.90 +
1.91 + // Click the unmute button
1.92 + synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { });
1.93 + break;
1.94 +
1.95 + /*
1.96 + * Bug 470596: Make sure that having CSS border or padding doesn't
1.97 + * break the controls (though it should move them)
1.98 + */
1.99 + case 5:
1.100 + is(event.type, "volumechange", "checking event type");
1.101 + is(video.paused, true, "checking video play state");
1.102 + is(video.muted, false, "checking video mute state");
1.103 +
1.104 + video.style.border = "medium solid purple";
1.105 + video.style.borderWidth = "30px 40px 50px 60px";
1.106 + video.style.padding = "10px 20px 30px 40px";
1.107 + // totals: top: 40px, right: 60px, bottom: 80px, left: 100px
1.108 +
1.109 + // Click the play button
1.110 + synthesizeMouse(video, 100 + playButtonCenterX, 40 + playButtonCenterY, { });
1.111 + break;
1.112 +
1.113 + case 6:
1.114 + is(event.type, "play", "checking event type");
1.115 + is(video.paused, false, "checking video play state");
1.116 + is(video.muted, false, "checking video mute state");
1.117 + video.pause();
1.118 + break;
1.119 +
1.120 + case 7:
1.121 + is(event.type, "pause", "checking event type");
1.122 + is(video.paused, true, "checking video play state");
1.123 + is(video.muted, false, "checking video mute state");
1.124 +
1.125 + // Click the mute button
1.126 + synthesizeMouse(video, 100 + muteButtonCenterX, 40 + muteButtonCenterY, { });
1.127 + break;
1.128 +
1.129 + case 8:
1.130 + is(event.type, "volumechange", "checking event type");
1.131 + is(video.paused, true, "checking video play state");
1.132 + is(video.muted, true, "checking video mute state");
1.133 + // Clear the style set in test 5.
1.134 + video.style.border = "";
1.135 + video.style.borderWidth = "";
1.136 + video.style.padding = "";
1.137 +
1.138 + video.muted = false;
1.139 + break;
1.140 +
1.141 + /*
1.142 + * Previous tests have moved playback postion, reset it to 0.
1.143 + */
1.144 + case 9:
1.145 + is(event.type, "volumechange", "checking event type");
1.146 + is(video.paused, true, "checking video play state");
1.147 + is(video.muted, false, "checking video mute state");
1.148 + ok(true, "video position is at " + video.currentTime);
1.149 + video.currentTime = 0.0;
1.150 + break;
1.151 +
1.152 + case 10:
1.153 + is(event.type, "seeking", "checking event type");
1.154 + ok(true, "video position is at " + video.currentTime);
1.155 + break;
1.156 +
1.157 + /*
1.158 + * Drag the slider's thumb to the halfway point with the mouse.
1.159 + */
1.160 + case 11:
1.161 + is(event.type, "seeked", "checking event type");
1.162 + ok(true, "video position is at " + video.currentTime);
1.163 + // Bug 477434 -- sometimes we get 0.098999 here instead of 0!
1.164 + // is(video.currentTime, 0.0, "checking playback position");
1.165 +
1.166 + var beginDragX = scrubberOffsetX;
1.167 + var endDragX = scrubberOffsetX + (scrubberWidth / 2);
1.168 + synthesizeMouse(video, beginDragX, scrubberCenterY, { type: "mousedown", button: 0 });
1.169 + synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mousemove", button: 0 });
1.170 + synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mouseup", button: 0 });
1.171 + break;
1.172 +
1.173 + case 12:
1.174 + is(event.type, "seeking", "checking event type");
1.175 + ok(true, "video position is at " + video.currentTime);
1.176 + break;
1.177 +
1.178 + /*
1.179 + * Click the slider at the 1/4 point with the mouse (jump backwards)
1.180 + */
1.181 + case 13:
1.182 + is(event.type, "seeked", "checking event type");
1.183 + ok(true, "video position is at " + video.currentTime);
1.184 + var expectedTime = videoDuration / 2;
1.185 + ok(Math.abs(video.currentTime - expectedTime) < 0.1, "checking expected playback position");
1.186 +
1.187 + synthesizeMouse(video, scrubberOffsetX + (scrubberWidth / 4), scrubberCenterY, { });
1.188 + break;
1.189 +
1.190 + case 14:
1.191 + is(event.type, "seeking", "checking event type");
1.192 + ok(true, "video position is at " + video.currentTime);
1.193 + break;
1.194 +
1.195 + case 15:
1.196 + is(event.type, "seeked", "checking event type");
1.197 + ok(true, "video position is at " + video.currentTime);
1.198 + // The scrubber currently just jumps towards the nearest pageIncrement point, not
1.199 + // precisely to the point clicked. So, expectedTime isn't (videoDuration / 4).
1.200 + // We should end up at 1.733, but sometimes we end up at 1.498. I guess
1.201 + // it's timing depending if the <scale> things it's click-and-hold, or a
1.202 + // single click. So, just make sure we end up less that the previous
1.203 + // position.
1.204 + lastPosition = (videoDuration / 2) - 0.1;
1.205 + ok(video.currentTime < lastPosition, "checking expected playback position");
1.206 +
1.207 + SimpleTest.finish();
1.208 + break;
1.209 +
1.210 + default:
1.211 + throw "unexpected test #" + testnum + " w/ event " + event.type;
1.212 + }
1.213 +
1.214 + testnum++;
1.215 +}
1.216 +
1.217 +
1.218 +var testnum = 1;
1.219 +var video = document.getElementById("video");
1.220 +
1.221 +function canplaythroughevent(event) {
1.222 + video.removeEventListener("canplaythrough", canplaythroughevent, false);
1.223 + // Other events expected by the test.
1.224 + video.addEventListener("play", runTest, false);
1.225 + video.addEventListener("pause", runTest, false);
1.226 + video.addEventListener("volumechange", runTest, false);
1.227 + video.addEventListener("seeking", runTest, false);
1.228 + video.addEventListener("seeked", runTest, false);
1.229 + // Begin the test.
1.230 + runTest(event);
1.231 +}
1.232 +
1.233 +function startMediaLoad() {
1.234 + // Kick off test once video has loaded, in its canplaythrough event handler.
1.235 + video.src = "seek_with_sound.ogg";
1.236 + video.addEventListener("canplaythrough", canplaythroughevent, false);
1.237 +}
1.238 +
1.239 +function loadevent(event) {
1.240 + SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startMediaLoad);
1.241 +}
1.242 +
1.243 +window.addEventListener("load", loadevent, false);
1.244 +
1.245 +SimpleTest.waitForExplicitFinish();
1.246 +
1.247 +</script>
1.248 +</pre>
1.249 +</body>
1.250 +</html>
