test_texttrack.html (5563B)
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>