dom/media/webvtt/test/mochitest/test_webvtt_seeking.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <title>WebVTT : cue should be displayed properly after seeking</title>
   5   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6   <script src="manifest.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   8 </head>
   9 <body>
  10 <script class="testbody" type="text/javascript">
  11 /**
  12  * This test is used to ensure that the cue should be showed or hid correctly
  13  * after seeking. In this test, we have two cues which are not overlapped, so
  14  * there should only have one cue showing at a time.
  15  */
  16 var CUES_INFO = [
  17   { id: 0, startTime: 1, endTime: 3, text: "This is cue 0."},
  18   { id: 1, startTime: 4, endTime: 6, text: "This is cue 1."},
  19 ];
  20
  21 async function startTest() {
  22   const video = createVideo();
  23   const cues = createCues(video);
  24   await startVideo(video);
  25
  26   await seekVideo(video, cues[0].startTime);
  27   await waitUntilCueIsShowing(cues[0]);
  28   checkActiveCueAndInactiveCue(cues[0], cues[1]);
  29
  30   await seekVideo(video, cues[1].startTime);
  31   await waitUntilCueIsShowing(cues[1]);
  32   checkActiveCueAndInactiveCue(cues[1], cues[0]);
  33
  34   // seek forward again
  35   await seekVideo(video, cues[0].startTime);
  36   await waitUntilCueIsShowing(cues[0]);
  37   checkActiveCueAndInactiveCue(cues[0], cues[1]);
  38
  39   removeNodeAndSource(video);
  40   SimpleTest.finish();
  41 }
  42
  43 SimpleTest.waitForExplicitFinish();
  44 onload = startTest;
  45 /**
  46  * The following are test helper functions.
  47  */
  48 function checkActiveCueAndInactiveCue(activeCue, inactiveCue) {
  49   ok(activeCue.getActive,
  50      `cue ${activeCue.id} [${activeCue.startTime}:${activeCue.endTime}] is active`);
  51   ok(!inactiveCue.getActive,
  52      `cue ${inactiveCue.id} [${inactiveCue.startTime}:${inactiveCue.endTime}] is inactive`);
  53 }
  54
  55 function createVideo() {
  56   let video = document.createElement("video");
  57   video.src = "gizmo.mp4";
  58   video.controls = true;
  59   document.body.appendChild(video);
  60   return video;
  61 }
  62
  63 function createCues(video) {
  64   let track = video.addTextTrack("subtitles");
  65   track.mode = "showing";
  66   let cue0 = new VTTCue(CUES_INFO[0].startTime, CUES_INFO[0].endTime,
  67                         CUES_INFO[0].text);
  68   cue0.id = CUES_INFO[0].id;
  69   let cue1 = new VTTCue(CUES_INFO[1].startTime, CUES_INFO[1].endTime,
  70                         CUES_INFO[1].text);
  71   cue1.id = CUES_INFO[1].id;
  72   track.addCue(cue0);
  73   track.addCue(cue1);
  74   // Convert them to chrome objects in order to use chrome privilege APIs.
  75   cue0 = SpecialPowers.wrap(cue0);
  76   cue1 = SpecialPowers.wrap(cue1);
  77   return [cue0, cue1];
  78 }
  79
  80 async function startVideo(video) {
  81   info(`start play video`);
  82   const played = video && await video.play().then(() => true, () => false);
  83   ok(played, "video has started playing");
  84 }
  85
  86 async function waitUntilCueIsShowing(cue) {
  87   info(`wait until cue ${cue.id} shows`);
  88   // cue has not been showing yet.
  89   if (!cue.getActive) {
  90     await once(cue, "enter");
  91   }
  92   info(`cue ${cue.id} is showing`);
  93 }
  94
  95 async function seekVideo(video, time) {
  96   ok(isInRange(time, CUES_INFO[0].startTime, CUES_INFO[0].endTime) ||
  97      isInRange(time, CUES_INFO[1].startTime, CUES_INFO[1].endTime),
  98      `seek target time ${time} is within the correct range`)
  99   info(`seek video to ${time}`);
 100   video.currentTime = time;
 101   await once(video, "seeked");
 102   info(`seek succeeded, current time=${video.currentTime}`);
 103 }
 104
 105 function isInRange(value, lowerBound, higherBound) {
 106   return lowerBound <= value && value <= higherBound;
 107 }
 108 </script>
 109 </body>
 110 </html>