DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (5b81998bb7ab)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263
<!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="seek_with_sound.ogg" controls mozNoDynamicControls preload="auto"></video>
</div>

<pre id="test">
<script class="testbody" type="text/javascript">

if (navigator.platform.indexOf("Win") == 0) {
  SimpleTest.expectAssertions(0, 1);
}

/*
 * 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 fullscreenButtonWidth = document.mozFullScreenEnabled ? 28 : 0;
const scrubberWidth = videoWidth - playButtonWidth - muteButtonWidth - durationWidth - fullscreenButtonWidth;
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 before the full screen button
const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2) - fullscreenButtonWidth;
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");

SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startTest);
function startTest() {
  // 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>