<!DOCTYPE html>
<title>Test that cues are rendered when only the track mode is changed.</title>
<script src="../media-file.js"></script>
<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 = findMediaFile('video', '../content/test');

    video.oncanplaythrough = 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>