<!DOCTYPE html>
<title>A single track should not show overflow on caption button-press, instead just toggle.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls></video>
<script>
async_test(t => {
var captions = ["Caption"];
var video = document.querySelector("video");
enableTestMode(video);
video.oncanplaythrough = t.step_func(_ => {
video.oncanplaythrough = undefined;
var track1 = video.addTextTrack("captions");
for (var i = 0; i < captions.length; ++i)
track1.addCue(new VTTCue(0, 120, captions[i]));
// The controls are updated asynchronously.
assert_false(isClosedCaptionsButtonEnabled(video));
setTimeout(t.step_func(_ => {
assert_true(isClosedCaptionsButtonEnabled(video));
// The captions track should be listed in textTracks, but not yet loaded.
assert_equals(video.textTracks.length, 1);
assert_equals(video.textTracks[0].mode, "hidden");
checkCaptionsHidden(video);
// Get the menu that displays the list of text tracks.
var captionsList = mediaControlsElement(internals.shadowRoot(video).firstChild,
"-internal-media-controls-text-track-list");
clickCaptionButton(video, t.step_func(() => {
// Captions should still be hidden until playback begins
assert_equals(getComputedStyle(captionsList).display, "none");
checkCaptionsHidden(video);
video.play();
video.onplaying = t.step_func(() => {
// Captions track should become visible after playback begins
checkCaptionsVisible(video, captions);
checkButtonHasClass(toggleClosedCaptionsButton(video), "visible");
// Click the closed captions button again and make sure the menu does not appear.
clickCaptionButton(video, t.step_func_done(() => {
assert_equals(getComputedStyle(captionsList).display, "none");
// Captions track should become invisible after the closed caption button is pressed.
checkCaptionsHidden(video);
checkButtonNotHasClass(toggleClosedCaptionsButton(video), "visible");
}));
});
}));
}));
});
video.src = "../content/counting.ogv";
});
</script>