| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Selecting from a list of tracks</title> |
| <script src="media-controls.js"></script> |
| <script src="media-file.js"></script> |
| <script src="video-test.js"></script> |
| <script src="trackmenu-test.js"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function startTest() |
| { |
| consoleWrite("<br>*** Add another text track."); |
| run('video.addTextTrack("captions", "Commentary", "ru")'); |
| showTrackMenu() |
| window.setTimeout(turnCaptionsOn, 100); |
| consoleWrite(""); |
| } |
| |
| function trackMenuList() |
| { |
| var trackListElement = getTrackListElement(); |
| if (!trackListElement) |
| return; |
| // Track list should have a <ul> with <li> children (One of them is "Off"). |
| var trackList = trackListElement.querySelector("ul"); |
| if (!trackList) { |
| failTest("Could not find a child ul element in track list menu"); |
| return; |
| } |
| var trackListItems = trackList.querySelectorAll("li"); |
| if (!trackListItems) { |
| failTest("Could not find child li elements in track list menu"); |
| return; |
| } |
| |
| return trackListItems; |
| } |
| |
| function testMenu() |
| { |
| trackListItems = trackMenuList(); |
| var expectedItemCount = video.textTracks.length + 2; |
| consoleWrite("There should be " + expectedItemCount + " items in the menu."); |
| testExpected("trackListItems.length", expectedItemCount); |
| } |
| |
| function selectCaptionMenuItem(index, nextStep) |
| { |
| // Click on the selected item |
| var trackListItems = trackMenuList(); |
| var selectedTrackItem = trackListItems[index]; |
| var boundingRect = selectedTrackItem.getBoundingClientRect(); |
| var x = boundingRect.left + boundingRect.width / 2; |
| var y = boundingRect.top + boundingRect.height / 2; |
| eventSender.mouseMoveTo(x, y); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| window.setTimeout(function() { testMenu(); nextStep(); }, 100); |
| } |
| |
| function turnCaptionsOn() |
| { |
| consoleWrite("*** Turning captions on"); |
| // Click on the third item, which is the second track (Off is the first item, Automatic is second) |
| selectCaptionMenuItem(3, testCaptionsVisible); |
| } |
| |
| function testCaptionsVisible() |
| { |
| testExpected("video.textTracks.length", 4); |
| consoleWrite("Track 0 should be showing"); |
| testExpected("video.textTracks[0].mode", "showing"); |
| consoleWrite("Track 1 should be disabled"); |
| testExpected("video.textTracks[1].mode", "disabled"); |
| consoleWrite("Track 2 should be disabled"); |
| testExpected("video.textTracks[2].mode", "disabled"); |
| consoleWrite("Track 3 should be disabled"); |
| testExpected("video.textTracks[3].mode", "disabled"); |
| testExpected("textTrackDisplayElement(video, 'display').innerText", "Lorem"); |
| |
| consoleWrite("<br>*** Remove a track."); |
| run('video.removeChild(document.querySelectorAll("track")[0])'); |
| |
| clickCCButton(); |
| window.setTimeout(turnCaptionsOff, 100); |
| } |
| |
| function turnCaptionsOff() |
| { |
| consoleWrite("*** Turning captions off"); |
| selectCaptionMenuItem(0, testCaptionsDisabled); |
| } |
| |
| function testCaptionsDisabled() |
| { |
| testExpected("video.textTracks.length", 3); |
| consoleWrite("Track 0 should be disabled"); |
| testExpected("video.textTracks[0].mode", "disabled"); |
| consoleWrite("Track 1 should be disabled"); |
| testExpected("video.textTracks[1].mode", "disabled"); |
| consoleWrite("Track 2 should be disabled"); |
| testExpected("video.textTracks[2].mode", "disabled"); |
| testExpected("textTrackDisplayElement(video, 'display').innerText", "Lorem"); |
| endTest(); |
| } |
| |
| function start() |
| { |
| findMediaElement(); |
| video.src = findMediaFile('video', 'content/test'); |
| waitForEvent('canplaythrough', function () { startTrackMenuTest(startTest); }); |
| } |
| </script> |
| </head> |
| |
| <body onload="start()"> |
| <p>Test that we are able to trigger the list of captions, and select from the list.</p> |
| <video width="500" height="300" controls> |
| <track kind="captions" src="track/captions-webvtt/captions-fast.vtt" srclang="fr"> |
| <track kind="captions" src="track/captions-webvtt/captions-fast.vtt" srclang="en"> |
| <track kind="captions" src="track/captions-webvtt/captions-fast.vtt" srclang="ja"> |
| </video> |
| </body> |
| </html> |
| |
