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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <title>Test for Bug 833386 - TextTrackList</title>
   5   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6   <script type="text/javascript" src="manifest.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   8 </head>
   9 <body>
  10 <video id="v">
  11 <script type="text/javascript">
  12 /**
  13  * This test is used to check different things.
  14  * (1) the default value of track element's attributes
  15  * (2) readonly attributes can't be modifted
  16  * (3) the order of tracks in the media element's track list
  17  */
  18 var enabledTrackElement = null;
  19
  20 async function runTest() {
  21   addFourTextTrackElementsToVideo();
  22   startLoadingVideo();
  23   await waitUntilEnableTrackLoaded();
  24   checkTracksStatus();
  25   SimpleTest.finish();
  26 }
  27
  28 SimpleTest.waitForExplicitFinish();
  29 onload = runTest;
  30
  31 /**
  32  * The following are test helper functions.
  33  */
  34 function addFourTextTrackElementsToVideo() {
  35   let video = document.getElementById("v");
  36   isnot(video.textTracks, undefined,
  37         "HTMLMediaElement::TextTrack() property should be available.")
  38
  39   let trackList = video.textTracks;
  40   is(trackList.length, 0, "Length should be 0.");
  41
  42   ok(typeof video.addTextTrack == "function",
  43      "HTMLMediaElement::AddTextTrack() function should be available.")
  44
  45   // Insert some tracks in an order that is not sorted, we will test if they
  46   // are sorted later.
  47   info(`- Add a track element with label 'third' -`);
  48   video.addTextTrack("subtitles", "third", "en-CA");
  49   is(trackList.length, 1, "Length should be 1.");
  50
  51   let textTrack = video.textTracks[0];
  52   checkAttributesDefaultValue(textTrack);
  53   checkTextTrackMode(textTrack);
  54   checkReadOnlyAttributes(textTrack);
  55
  56   info(`- Add a track element with label 'first' -`);
  57   let trackOne = document.createElement("track");
  58   video.appendChild(trackOne);
  59   trackOne.label = "first";
  60   trackOne.src = "basic.vtt";
  61   trackOne.default = true;
  62   trackOne.id = "2";
  63   // The automatic track selection would choose the first track element with
  64   // `default` attribute, so this track would be enable later.
  65   enabledTrackElement = trackOne;
  66
  67   info(`- Add a track element with label 'fourth' -`);
  68   video.addTextTrack("subtitles", "fourth", "en-CA");
  69
  70   info(`- Add a track element with label 'second' -`);
  71   let trackTwo = document.createElement("track");
  72   video.appendChild(trackTwo);
  73   trackTwo.label = "second";
  74   trackTwo.src = "basic.vtt";
  75   // Although this track has `default` attribute as well, it won't be enable by
  76   // the automatic track selection because it's not the first default track in
  77   // the media element's track list.
  78   trackTwo.default = true;
  79 }
  80
  81 function checkAttributesDefaultValue(track) {
  82   is(track.label, "third", "Label should be set to third.");
  83   is(track.language, "en-CA", "Language should be en-CA.");
  84   is(track.kind, "subtitles", "Default kind should be subtitles.");
  85   is(track.mode, "hidden", "Default mode should be hidden.");
  86 }
  87
  88 function checkTextTrackMode(track) {
  89   // Mode should not allow a bogus value.
  90   track.mode = 'bogus';
  91   is(track.mode, 'hidden', "Mode should be not allow a bogus value.");
  92
  93   // Should allow all these values for mode.
  94   changeTextTrackMode("showing");
  95   changeTextTrackMode("disabled");
  96   changeTextTrackMode("hidden");
  97
  98   function changeTextTrackMode(mode) {
  99     track.mode = mode;
 100     is(track.mode, mode, `Mode should allow \"${mode}\"`);
 101   }
 102 }
 103
 104 function checkReadOnlyAttributes(track) {
 105   // All below are read-only properties and so should not allow setting.
 106   track.label = "French subtitles";
 107   is(track.label, "third", "Label is read-only so should still be \"label\".");
 108   track.language = "en";
 109   is(track.language, "en-CA", "Language is read-only so should still be \"en-CA\".");
 110   track.kind = "captions";
 111   is(track.kind, "subtitles", "Kind is read-only so should still be \"subtitles\"");
 112 }
 113
 114 function startLoadingVideo() {
 115   let video = document.getElementById("v");
 116   video.src = "seek.webm";
 117   video.preload = "metadata";
 118 }
 119
 120 async function waitUntilEnableTrackLoaded() {
 121   info(`wait until the enabled track finishes loading`);
 122   await once(enabledTrackElement, "load");
 123   is(enabledTrackElement.readyState, 2, "Track::ReadyState should be set to LOADED.");
 124 }
 125
 126 function checkTracksStatus() {
 127   // We're testing two things here,
 128   // (1) the tracks created from a track element have a default mode 'disabled'
 129   // and tracks created from 'addTextTrack' method have a default
 130   // mode of 'hidden'.
 131   // (2) we're testing that the tracks are sorted properly. For the tracks to
 132   // be sorted the first two tracks, added through a TrackElement, must occupy
 133   // the first two indexes in their TrackElement tree order. The second two
 134   // tracks, added through the 'addTextTrack' method, will occupy the last two
 135   // indexes in the order that they were added in.
 136   let trackData = [
 137     { label: "first", mode: "showing", id: "2" },
 138     { label: "second", mode: "disabled", id: "" },
 139     { label: "third", mode: "hidden", id: "" },
 140     { label: "fourth", mode: "hidden", id: "" }
 141   ];
 142   let video = document.getElementById("v");
 143   is(video.textTracks.length, trackData.length,
 144      `TextTracks length should be ${trackData.length}`);
 145   for (let i = 0; i < trackData.length; i++) {
 146     let track = video.textTracks[i];
 147     isnot(track, null, `Video should have a text track at index ${i}`);
 148     let info = trackData[i];
 149     for (let key in info) {
 150       is(track[key], info[key],
 151          `Track at index ${i} should have a '${key}' property with a value of '${info[key]}'.`);
 152     }
 153   }
 154 }
 155
 156 </script>
 157 </body>
 158 </html>