blob: 6734861b5e8f2ca7a3b72ee0ca75191b0da10db4 [file] [log] [blame]
<!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>