<!DOCTYPE html>
<title>Test that cues are rendered when only the track mode is changed.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
async_test(function(t) {
var video = document.createElement('video');
video.src = '../content/test.ogv';
video.play();
video.onplaying = t.step_func_done(function() {
addTracks();
testCueActiveState();
testCueVisibility();
});
var testTrackArabic;
var testTrackEnglish;
var testCueDisplayBox;
function addTracks() {
// Add 'Arabic' text track with one cue.
testTrackArabic = video.addTextTrack('captions', 'Arabic', 'ar');
testTrackArabic.addCue(new VTTCue(0, 10, 'Arabic'));
// Add 'English' text track with one cue.
testTrackEnglish = video.addTextTrack('captions', 'English', 'en');
testTrackEnglish.addCue(new VTTCue(0, 10, 'English'));
// Set the mode of the 'Arabic' track to showing.
testTrackArabic.mode = 'showing';
// Set the mode of the 'English' track to hidden.
testTrackEnglish.mode = 'hidden';
}
function testCueActiveState() {
// Both cues should be active.
assert_equals(testTrackEnglish.activeCues.length, 1);
assert_equals(testTrackEnglish.activeCues[0].text, 'English');
assert_equals(testTrackArabic.activeCues.length, 1);
assert_equals(testTrackArabic.activeCues[0].text, 'Arabic');
}
function testCueVisibility() {
// Only one cue should be visible.
testCueDisplayBox = textTrackCueElementByIndex(video, 0);
assert_equals(testCueDisplayBox.innerText, 'Arabic');
assert_equals(testCueDisplayBox.nextSibling, null);
// Set the mode of the 'English' track to showing.
testTrackEnglish.mode = 'showing';
// Both cues shold be visible.
testCueDisplayBox = textTrackCueElementByIndex(video, 0);
assert_equals(testCueDisplayBox.innerText, 'Arabic');
testCueDisplayBox = textTrackCueElementByIndex(video, 1);
assert_equals(testCueDisplayBox.innerText, 'English');
}
});
</script>