<!DOCTYPE html>
<title>TextTrack mode attribute</title>
<meta name="timeout" content="long">
<script src="/common/media.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<video>
    <track src="resources/captions-fast.vtt" default>
    <script>
    async_test(function(t) {
        var video = document.querySelector("video");
        var track = document.querySelector("track");
        if (track.readyState != HTMLTrackElement.LOADED) {
            assert_not_equals(track.readyState, HTMLTrackElement.ERROR,
                              "track failed to load resource.");
            track.onload = t.step_func(trackLoaded);
        } else {
            trackLoaded();
        }

        var cueCount = 0;
        var textTrack;
        function trackLoaded() {
            textTrack = track.track;
            // Test default attribute value.
            assert_equals(textTrack.mode, "showing");
            assert_equals(video.textTracks[0].mode, "showing");
            // Set to bogus value, should return default.
            var value = "bogus";
            textTrack.mode = value;
            assert_equals(textTrack.mode, "showing");
            assert_equals(video.textTracks[0].mode, "showing");

            // Set to numeric value (no longer supported), should return default.
            textTrack.mode = 2;
            assert_equals(textTrack.mode, "showing");
            assert_equals(video.textTracks[0].mode, "showing");

            // Set to known values.
            setModeAndCheck("disabled");

            video.src = getVideoURI("/media/test");
            video.play();

            // Wait for end of first cue (no events should fire while track is disabled).
            video.ontimeupdate = () => {
                if (video.currentTime > 0.4) {
                    testHiddenAndShowing();
                    video.ontimeupdate = null;
                }
            }
        }

        track.oncuechange = t.step_func(function(event) {
            cueCount++;
            // As the 'enter' and the 'exit' event would be fired for the second
            // and the third cue, so there would be 4 times 'oncuechange' event.
            if (cueCount == 4)
                t.done();
        });

        function setModeAndCheck(value) {
            textTrack.mode =  value;
            assert_equals(textTrack.mode, value);
            assert_equals(video.textTracks[0].mode, value);
            if (value == "disabled")
                assert_equals(textTrack.cues, null);
        }

        function testHiddenAndShowing() {
            setModeAndCheck("hidden");
            setModeAndCheck("showing");
        }
    });
    </script>
</video>