The Tor Browser: toolkit/content/tests/widgets/test

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     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>

    12 <div id="content">

    13   <video width="320" height="240" id="video" controls mozNoDynamicControls preload="auto"></video>

    14 </div>

    16 <pre id="test">

    17 <script class="testbody" type="text/javascript">

    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;

    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;

    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);

    48 function runTest(event) {

    49   ok(true, "----- test #" + testnum + " -----");

    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");

    61       // Click the play button

    62       synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { });

    63       break;

    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");

    70       // Click the pause button

    71       synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { });

    72       break;

    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");

    79       // Click the mute button

    80       synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { });

    81       break;

    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");

    88       // Click the unmute button

    89       synthesizeMouse(video, muteButtonCenterX, muteButtonCenterY, { });

    90       break;

    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");

   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

   106       // Click the play button

   107       synthesizeMouse(video, 100 + playButtonCenterX, 40 + playButtonCenterY, { });

   108       break;

   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;

   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");

   122       // Click the mute button

   123       synthesizeMouse(video, 100 + muteButtonCenterX, 40 + muteButtonCenterY, { });

   124       break;

   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 = "";

   135       video.muted = false;

   136       break;

   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;

   149     case 10:

   150       is(event.type, "seeking", "checking event type");

   151       ok(true, "video position is at " + video.currentTime);

   152       break;

   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");

   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;

   170     case 12:

   171       is(event.type, "seeking", "checking event type");

   172       ok(true, "video position is at " + video.currentTime);

   173       break;

   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");

   184       synthesizeMouse(video, scrubberOffsetX + (scrubberWidth / 4), scrubberCenterY, { });

   185       break;

   187     case 14:

   188       is(event.type, "seeking", "checking event type");

   189       ok(true, "video position is at " + video.currentTime);

   190       break;

   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");

   204       SimpleTest.finish();

   205       break;

   207     default:

   208       throw "unexpected test #" + testnum + " w/ event " + event.type;

   209   }

   211   testnum++;

   212 }

   215 var testnum = 1;

   216 var video = document.getElementById("video");

   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 }

   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 }

   236 function loadevent(event) {

   237   SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startMediaLoad);

   238 }

   240 window.addEventListener("load",  loadevent, false);

   242 SimpleTest.waitForExplicitFinish();

   244 </script>

   245 </pre>

   246 </body>

   247 </html>

The Tor Browser / file revision

toolkit/content/tests/widgets/test_videocontrols.html@6474c204b198

toolkit/content/tests/widgets/test_videocontrols.html