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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <title>WebVTT : cues with overlapping time should be displayed correctly </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 <video id ="v" src="gizmo.mp4" controls>
  11 <script class="testbody" type="text/javascript">
  12 /**
  13  * This test is used to ensure that when cues with overlapping times, the one
  14  * with earlier end timestamp should disappear when the media time reaches its
  15  * end time. In this test, we have two cues with overlapping time, when the video
  16  * starts, both cues should be displayed. When the time passes 1 seconds, the
  17  * first cue should disappear and the second cues should be still displayed.
  18  */
  19 var CUES_INFO = [
  20   { id: 0, startTime: 0, endTime: 1, text: "This is cue 0."},
  21   { id: 1, startTime: 0, endTime: 6, text: "This is cue 1."},
  22 ];
  23
  24 var video = document.getElementById("v");
  25
  26 async function startTest() {
  27   const cues = createCues();
  28   await startVideo();
  29
  30   await waitUntilCueIsShowing(cues[0]);
  31   await waitUntilCueIsShowing(cues[1]);
  32
  33   await waitUntilCueIsHiding(cues[0]);
  34   await waitUntilCueIsShowing(cues[1]);
  35   IsVideoStillPlaying();
  36
  37   endTestAndClearVideo();
  38 }
  39
  40 SimpleTest.waitForExplicitFinish();
  41 onload = startTest;
  42
  43 /**
  44  * The following are test helper functions.
  45  */
  46 function createCues() {
  47   let track = video.addTextTrack("subtitles");
  48   track.mode = "showing";
  49   let cue0 = new VTTCue(CUES_INFO[0].startTime, CUES_INFO[0].endTime,
  50                         CUES_INFO[0].text);
  51   cue0.id = CUES_INFO[0].id;
  52   let cue1 = new VTTCue(CUES_INFO[1].startTime, CUES_INFO[1].endTime,
  53                         CUES_INFO[1].text);
  54   cue1.id = CUES_INFO[1].id;
  55   track.addCue(cue0);
  56   track.addCue(cue1);
  57   // Convert them to chrome objects in order to use chrome privilege APIs.
  58   cue0 = SpecialPowers.wrap(cue0);
  59   cue1 = SpecialPowers.wrap(cue1);
  60   return [cue0, cue1];
  61 }
  62
  63 async function startVideo() {
  64   info(`start play video`);
  65   const played = video && await video.play().then(() => true, () => false);
  66   ok(played, "video has started playing");
  67 }
  68
  69 async function waitUntilCueIsShowing(cue) {
  70   info(`wait until cue ${cue.id} is showing`);
  71   // cue has not been showing yet.
  72   if (!cue.getActive) {
  73     await once(cue, "enter");
  74   }
  75   info(`video current time=${video.currentTime}`);
  76   ok(cue.getActive, `cue ${cue.id} is showing`);
  77 }
  78
  79 async function waitUntilCueIsHiding(cue) {
  80   info(`wait until cue ${cue.id} is hiding`);
  81   // cue has not been hidden yet.
  82   if (cue.getActive) {
  83     await once(cue, "exit");
  84   }
  85   info(`video current time=${video.currentTime}`);
  86   ok(!cue.getActive, `cue ${cue.id} is hidding`);
  87 }
  88
  89 function IsVideoStillPlaying() {
  90   ok(!video.paused, `video is still playing, currentTime=${video.currentTime}`);
  91 }
  92
  93 function endTestAndClearVideo() {
  94   removeNodeAndSource(video);
  95   SimpleTest.finish();
  96 }
  97
  98 </script>
  99 </body>
 100 </html>