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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset='utf-8'>
   5   <title>WebVTT : position align test</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   8 </head>
   9 <body>
  10 <div id="content">
  11 </div>
  12 <script class="testbody" type="text/javascript">
  13 SimpleTest.waitForExplicitFinish();
  14
  15 var video = document.createElement("video");
  16 var trackElement = document.createElement("track");
  17 var cuesNumber = 22;
  18
  19 function isTrackElemenLoaded() {
  20   // Re-que isTrackElemenLoaded() at the end of the event loop until the track
  21   // element has loaded its data.
  22   if (trackElement.readyState == 1) {
  23     setTimeout(isTrackElemenLoaded, 0);
  24     return;
  25   }
  26
  27   is(trackElement.readyState, 2, "Track::ReadyState should be set to LOADED.");
  28   runTest();
  29 }
  30
  31 function runTest() {
  32   info("--- check cues number ---");
  33   var cues = trackElement.track.cues;
  34   is(cues.length, cuesNumber, "Cues number is correct.");
  35
  36   info("--- check the typedef of TextTrackCue and VTTCue ---");
  37   isnot(window.TextTrackCue, undefined, "TextTrackCue should be defined.");
  38   isnot(window.VTTCue, undefined, "VTTCue should be defined.");
  39
  40   info("--- check the type of first parsed cue ---");
  41   ok(cues[0] instanceof TextTrackCue, "Cue should be an instanceof TextTrackCue.");
  42   ok(cues[0] instanceof VTTCue, "Cue should be an instanceof VTTCue.");
  43
  44   info("--- check the cue's position alignment ---");
  45   let expectedAlignment = ["auto", "line-left", "center", "line-right", "auto"];
  46   let idx = 0;
  47   for (;idx < expectedAlignment.length; idx++) {
  48     is(cues[idx].positionAlign, expectedAlignment[idx], cues[idx].text);
  49   }
  50
  51   info("--- check the cue's computed position alignment ---");
  52   // The "computedPositionAlign" is the chrome-only attributes, we need to get
  53   // the chrome privilege for cues.
  54   let cuesChrome = SpecialPowers.wrap(cues);
  55   expectedAlignment.push("line-left", "line-right", "center");
  56   for (;idx < expectedAlignment.length; idx++) {
  57     is(cuesChrome[idx].computedPositionAlign, expectedAlignment[idx],
  58        cuesChrome[idx].text);
  59   }
  60
  61   info(`test only setting text alignment with "start"`);
  62   expectedAlignment.push("line-left", "line-right", "line-left", "line-right",
  63                          "line-left", "line-left", "line-right");
  64   for (;idx < expectedAlignment.length; idx++) {
  65     is(cuesChrome[idx].computedPositionAlign, expectedAlignment[idx],
  66        cuesChrome[idx].text);
  67   }
  68
  69   info(`test only setting text alignment with "end"`);
  70   expectedAlignment.push("line-right", "line-left", "line-right", "line-left",
  71                          "line-right", "line-right", "line-left");
  72   for (;idx < expectedAlignment.length; idx++) {
  73     is(cuesChrome[idx].computedPositionAlign, expectedAlignment[idx],
  74        cuesChrome[idx].text);
  75   }
  76   is(idx, cuesNumber, "finished checking all cues");
  77
  78   info("--- check the cue's computed position alignment from DOM API ---");
  79   is(cuesChrome[0].computedPositionAlign, "center", "Cue's computedPositionAlign align is center.");
  80
  81   cuesChrome[0].positionAlign = "auto";
  82   is(cuesChrome[0].positionAlign, "auto", "Change cue's position align to \"auto\"");
  83
  84   cuesChrome[0].align = "left";
  85   is(cuesChrome[0].align, "left", "Change cue's align to \"left\".");
  86
  87   is(cuesChrome[0].computedPositionAlign, "line-left",  "Cue's computedPositionAlign becomes to \"line-left\"");
  88
  89   info("--- finish test ---");
  90   SimpleTest.finish();
  91 }
  92
  93 function setupTest() {
  94   info("--- setup test ---");
  95   video.src = "seek.webm";
  96   video.preload = "auto";
  97
  98   trackElement.src = "vttPositionAlign.vtt";
  99   trackElement.kind = "subtitles";
 100   trackElement.default = true;
 101
 102   document.getElementById("content").appendChild(video);
 103   video.appendChild(trackElement);
 104   video.addEventListener("loadedmetadata", function() {
 105     isTrackElemenLoaded();
 106   }, {once: true});
 107 }
 108
 109 onload = setupTest;
 110 </script>
 111 </body>
 112 </html>