The Tor Browser / file comparison
comparison: toolkit/content/tests/widgets/test_videocontrols.html
toolkit/content/tests/widgets/test_videocontrols.html
- branch
- TOR_BUG_3246
- changeset 7
- 129ffea94266
equal
deleted
inserted
replaced
| -1:000000000000 | 0:478d33004cf3 |
|---|---|
| 1 <!DOCTYPE HTML> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>Video controls test</title> | |
| 5 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> | |
| 6 <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script> | |
| 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> | |
| 8 </head> | |
| 9 <body> | |
| 10 <p id="display"></p> | |
| 11 | |
| 12 <div id="content"> | |
| 13 <video width="320" height="240" id="video" controls mozNoDynamicControls preload="auto"></video> | |
| 14 </div> | |
| 15 | |
| 16 <pre id="test"> | |
| 17 <script class="testbody" type="text/javascript"> | |
| 18 | |
| 19 /* | |
| 20 * Positions of the UI elements, relative to the upper-left corner of the | |
| 21 * <video> box. | |
| 22 */ | |
| 23 const videoWidth = 320; | |
| 24 const videoHeight = 240; | |
| 25 const videoDuration = 3.8329999446868896; | |
| 26 | |
| 27 const playButtonWidth = 28; | |
| 28 const playButtonHeight = 28; | |
| 29 const muteButtonWidth = 33; | |
| 30 const muteButtonHeight = 28; | |
| 31 const durationWidth = 34; | |
| 32 const fullscreenButtonWidth = document.mozFullScreenEnabled ? 28 : 0; | |
| 33 const volumeSliderWidth = 32; | |
| 34 const scrubberWidth = videoWidth - playButtonWidth - durationWidth - muteButtonWidth - volumeSliderWidth - fullscreenButtonWidth; | |
| 35 const scrubberHeight = 28; | |
| 36 | |
| 37 // Play button is on the bottom-left | |
| 38 const playButtonCenterX = 0 + Math.round(playButtonWidth / 2); | |
| 39 const playButtonCenterY = videoHeight - Math.round(playButtonHeight / 2); | |
| 40 // Mute button is on the bottom-right before the full screen button and volume slider | |
| 41 const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2) - volumeSliderWidth - fullscreenButtonWidth; | |
| 42 const muteButtonCenterY = videoHeight - Math.round(muteButtonHeight / 2); | |
| 43 // Scrubber bar is between the play and mute buttons. We don't need it's | |
| 44 // X center, just the offset of its box. | |
| 45 const scrubberOffsetX = 0 + playButtonWidth; | |
| 46 const scrubberCenterY = videoHeight - Math.round(scrubberHeight / 2); | |
| 47 | |
| 48 function runTest(event) { | |
| 49 ok(true, "----- test #" + testnum + " -----"); | |
| 50 | |
| 51 switch (testnum) { | |
| 52 /* | |
| 53 * Check operation of play/pause/mute/unmute buttons. | |
| 54 */ | |
| 55 case 1: | |
| 56 // Check initial state upon load | |
| 57 is(event.type, "canplaythrough", "checking event type"); | |
| 58 is(video.paused, true, "checking video play state"); | |
| 59 is(video.muted, false, "checking video mute state"); | |
| 60 | |
| 61 // Click the play button | |
| 62 synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { }); | |
| 63 break; | |
| 64 | |
| 65 case 2: | |
| 66 is(event.type, "play", "checking event type"); | |
| 67 is(video.paused, false, "checking video play state"); | |
| 68 is(video.muted, false, "checking video mute state"); | |
| 69 | |
| 70 // Click the pause button | |
| 71 synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { }); | |
| 72 break; | |
| 73 | |
| 74 case 3: | |
| 75 is(event.type, "pause", "checking event type"); | |
| 76 is(video.paused, true, "checking video play state"); | |
| 77 is(video.muted, false, "checking video mute state"); | |
| 78 | |
| 79 // Click the mute button | |
| 80 synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { }); | |
| 81 break; | |
| 82 | |
| 83 case 4: | |
| 84 is(event.type, "volumechange", "checking event type"); | |
| 85 is(video.paused, true, "checking video play state"); | |
| 86 is(video.muted, true, "checking video mute state"); | |
| 87 | |
| 88 // Click the unmute button | |
| 89 synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { }); | |
| 90 break; | |
| 91 | |
| 92 /* | |
| 93 * Bug 470596: Make sure that having CSS border or padding doesn't | |
| 94 * break the controls (though it should move them) | |
| 95 */ | |
| 96 case 5: | |
| 97 is(event.type, "volumechange", "checking event type"); | |
| 98 is(video.paused, true, "checking video play state"); | |
| 99 is(video.muted, false, "checking video mute state"); | |
| 100 | |
| 101 video.style.border = "medium solid purple"; | |
| 102 video.style.borderWidth = "30px 40px 50px 60px"; | |
| 103 video.style.padding = "10px 20px 30px 40px"; | |
| 104 // totals: top: 40px, right: 60px, bottom: 80px, left: 100px | |
| 105 | |
| 106 // Click the play button | |
| 107 synthesizeMouse(video, 100 + playButtonCenterX, 40 + playButtonCenterY, { }); | |
| 108 break; | |
| 109 | |
| 110 case 6: | |
| 111 is(event.type, "play", "checking event type"); | |
| 112 is(video.paused, false, "checking video play state"); | |
| 113 is(video.muted, false, "checking video mute state"); | |
| 114 video.pause(); | |
| 115 break; | |
| 116 | |
| 117 case 7: | |
| 118 is(event.type, "pause", "checking event type"); | |
| 119 is(video.paused, true, "checking video play state"); | |
| 120 is(video.muted, false, "checking video mute state"); | |
| 121 | |
| 122 // Click the mute button | |
| 123 synthesizeMouse(video, 100 + muteButtonCenterX, 40 + muteButtonCenterY, { }); | |
| 124 break; | |
| 125 | |
| 126 case 8: | |
| 127 is(event.type, "volumechange", "checking event type"); | |
| 128 is(video.paused, true, "checking video play state"); | |
| 129 is(video.muted, true, "checking video mute state"); | |
| 130 // Clear the style set in test 5. | |
| 131 video.style.border = ""; | |
| 132 video.style.borderWidth = ""; | |
| 133 video.style.padding = ""; | |
| 134 | |
| 135 video.muted = false; | |
| 136 break; | |
| 137 | |
| 138 /* | |
| 139 * Previous tests have moved playback postion, reset it to 0. | |
| 140 */ | |
| 141 case 9: | |
| 142 is(event.type, "volumechange", "checking event type"); | |
| 143 is(video.paused, true, "checking video play state"); | |
| 144 is(video.muted, false, "checking video mute state"); | |
| 145 ok(true, "video position is at " + video.currentTime); | |
| 146 video.currentTime = 0.0; | |
| 147 break; | |
| 148 | |
| 149 case 10: | |
| 150 is(event.type, "seeking", "checking event type"); | |
| 151 ok(true, "video position is at " + video.currentTime); | |
| 152 break; | |
| 153 | |
| 154 /* | |
| 155 * Drag the slider's thumb to the halfway point with the mouse. | |
| 156 */ | |
| 157 case 11: | |
| 158 is(event.type, "seeked", "checking event type"); | |
| 159 ok(true, "video position is at " + video.currentTime); | |
| 160 // Bug 477434 -- sometimes we get 0.098999 here instead of 0! | |
| 161 // is(video.currentTime, 0.0, "checking playback position"); | |
| 162 | |
| 163 var beginDragX = scrubberOffsetX; | |
| 164 var endDragX = scrubberOffsetX + (scrubberWidth / 2); | |
| 165 synthesizeMouse(video, beginDragX, scrubberCenterY, { type: "mousedown", button: 0 }); | |
| 166 synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mousemove", button: 0 }); | |
| 167 synthesizeMouse(video, endDragX, scrubberCenterY, { type: "mouseup", button: 0 }); | |
| 168 break; | |
| 169 | |
| 170 case 12: | |
| 171 is(event.type, "seeking", "checking event type"); | |
| 172 ok(true, "video position is at " + video.currentTime); | |
| 173 break; | |
| 174 | |
| 175 /* | |
| 176 * Click the slider at the 1/4 point with the mouse (jump backwards) | |
| 177 */ | |
| 178 case 13: | |
| 179 is(event.type, "seeked", "checking event type"); | |
| 180 ok(true, "video position is at " + video.currentTime); | |
| 181 var expectedTime = videoDuration / 2; | |
| 182 ok(Math.abs(video.currentTime - expectedTime) < 0.1, "checking expected playback position"); | |
| 183 | |
| 184 synthesizeMouse(video, scrubberOffsetX + (scrubberWidth / 4), scrubberCenterY, { }); | |
| 185 break; | |
| 186 | |
| 187 case 14: | |
| 188 is(event.type, "seeking", "checking event type"); | |
| 189 ok(true, "video position is at " + video.currentTime); | |
| 190 break; | |
| 191 | |
| 192 case 15: | |
| 193 is(event.type, "seeked", "checking event type"); | |
| 194 ok(true, "video position is at " + video.currentTime); | |
| 195 // The scrubber currently just jumps towards the nearest pageIncrement point, not | |
| 196 // precisely to the point clicked. So, expectedTime isn't (videoDuration / 4). | |
| 197 // We should end up at 1.733, but sometimes we end up at 1.498. I guess | |
| 198 // it's timing depending if the <scale> things it's click-and-hold, or a | |
| 199 // single click. So, just make sure we end up less that the previous | |
| 200 // position. | |
| 201 lastPosition = (videoDuration / 2) - 0.1; | |
| 202 ok(video.currentTime < lastPosition, "checking expected playback position"); | |
| 203 | |
| 204 SimpleTest.finish(); | |
| 205 break; | |
| 206 | |
| 207 default: | |
| 208 throw "unexpected test #" + testnum + " w/ event " + event.type; | |
| 209 } | |
| 210 | |
| 211 testnum++; | |
| 212 } | |
| 213 | |
| 214 | |
| 215 var testnum = 1; | |
| 216 var video = document.getElementById("video"); | |
| 217 | |
| 218 function canplaythroughevent(event) { | |
| 219 video.removeEventListener("canplaythrough", canplaythroughevent, false); | |
| 220 // Other events expected by the test. | |
| 221 video.addEventListener("play", runTest, false); | |
| 222 video.addEventListener("pause", runTest, false); | |
| 223 video.addEventListener("volumechange", runTest, false); | |
| 224 video.addEventListener("seeking", runTest, false); | |
| 225 video.addEventListener("seeked", runTest, false); | |
| 226 // Begin the test. | |
| 227 runTest(event); | |
| 228 } | |
| 229 | |
| 230 function startMediaLoad() { | |
| 231 // Kick off test once video has loaded, in its canplaythrough event handler. | |
| 232 video.src = "seek_with_sound.ogg"; | |
| 233 video.addEventListener("canplaythrough", canplaythroughevent, false); | |
| 234 } | |
| 235 | |
| 236 function loadevent(event) { | |
| 237 SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startMediaLoad); | |
| 238 } | |
| 239 | |
| 240 window.addEventListener("load", loadevent, false); | |
| 241 | |
| 242 SimpleTest.waitForExplicitFinish(); | |
| 243 | |
| 244 </script> | |
| 245 </pre> | |
| 246 </body> | |
| 247 </html> |
