closed-captions-switch-track.html | Explore in Territory

<!DOCTYPE html>
<title>Test that we can add multiple tracks and select between them from the track selection menu.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../media-controls.js'></script>
<!-- Width should be large enough to display closed captions button. -->
<video controls style='width: 500px'></video>
<script>
async_test(t => {
  var video = document.querySelector('video');
  var trackLanguages = ['en', 'ru', 'fr', 'jp', 'de'];
  var trackCueText = ['English', 'Russian', 'French', 'Japanese', 'German'];

  enableTestMode(video);

  video.addEventListener('playing', t.step_func(_ => {
    for (var i = 0; i < trackLanguages.length; i++) {
      var track = video.addTextTrack('captions', trackCueText[i], trackLanguages[i]);
      track.addCue(new VTTCue(0, 10, trackCueText[i]));
      track.mode = 'disabled';
    }

    // The controls are updated asynchronously.
    assert_false(isClosedCaptionsButtonEnabled(video));

    setTimeout(t.step_func(_ => {
      assert_true(isClosedCaptionsButtonEnabled(video));
      assert_equals(video.textTracks.length, trackLanguages.length);
      checkTrack(0);
    }));
  }), { once: true });

  video.src = '../content/test.ogv';
  video.play();

  function checkTrack(i) {
    // If we've reached the end, the test is complete.
    if (i == trackLanguages.length) {
      t.done();
      return;
    }

    clickTextTrackAtIndex(video, i, t.step_func(() => {
      assert_equals(video.textTracks[i].mode, 'showing');
      assert_equals(textTrackDisplayElement(video).innerText, trackCueText[i]);
      for (var j = 0; j < trackLanguages.length; j++) {
        if (j != i)
          assert_equals(video.textTracks[j].mode, 'disabled');
      }
      // Check the next track.
      checkTrack(i + 1);
    }));
  }
});
</script>
chromium/third_party/blink/web_tests/media/controls/closed-captions-switch-track.html
