track-mode.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/media-elements/track/track-element/track-mode.html - WPT Dashboard Interop Dashboard

<!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>