diff options
Diffstat (limited to 'dom/media/webvtt/test/mochitest/test_webvtt_overlapping_time.html')
-rw-r--r-- | dom/media/webvtt/test/mochitest/test_webvtt_overlapping_time.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/dom/media/webvtt/test/mochitest/test_webvtt_overlapping_time.html b/dom/media/webvtt/test/mochitest/test_webvtt_overlapping_time.html new file mode 100644 index 0000000000..5ce08ae77a --- /dev/null +++ b/dom/media/webvtt/test/mochitest/test_webvtt_overlapping_time.html @@ -0,0 +1,100 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>WebVTT : cues with overlapping time should be displayed correctly </title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="manifest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> +</head> +<body> +<video id ="v" src="gizmo.mp4" controls> +<script class="testbody" type="text/javascript"> +/** + * This test is used to ensure that when cues with overlapping times, the one + * with earlier end timestamp should disappear when the media time reaches its + * end time. In this test, we have two cues with overlapping time, when the video + * starts, both cues should be displayed. When the time passes 1 seconds, the + * first cue should disappear and the second cues should be still displayed. + */ +var CUES_INFO = [ + { id: 0, startTime: 0, endTime: 1, text: "This is cue 0."}, + { id: 1, startTime: 0, endTime: 6, text: "This is cue 1."}, +]; + +var video = document.getElementById("v"); + +async function startTest() { + const cues = createCues(); + await startVideo(); + + await waitUntilCueIsShowing(cues[0]); + await waitUntilCueIsShowing(cues[1]); + + await waitUntilCueIsHiding(cues[0]); + await waitUntilCueIsShowing(cues[1]); + IsVideoStillPlaying(); + + endTestAndClearVideo(); +} + +SimpleTest.waitForExplicitFinish(); +onload = startTest; + +/** + * The following are test helper functions. + */ +function createCues() { + let track = video.addTextTrack("subtitles"); + track.mode = "showing"; + let cue0 = new VTTCue(CUES_INFO[0].startTime, CUES_INFO[0].endTime, + CUES_INFO[0].text); + cue0.id = CUES_INFO[0].id; + let cue1 = new VTTCue(CUES_INFO[1].startTime, CUES_INFO[1].endTime, + CUES_INFO[1].text); + cue1.id = CUES_INFO[1].id; + track.addCue(cue0); + track.addCue(cue1); + // Convert them to chrome objects in order to use chrome privilege APIs. + cue0 = SpecialPowers.wrap(cue0); + cue1 = SpecialPowers.wrap(cue1); + return [cue0, cue1]; +} + +async function startVideo() { + info(`start play video`); + const played = video && await video.play().then(() => true, () => false); + ok(played, "video has started playing"); +} + +async function waitUntilCueIsShowing(cue) { + info(`wait until cue ${cue.id} is showing`); + // cue has not been showing yet. + if (!cue.getActive) { + await once(cue, "enter"); + } + info(`video current time=${video.currentTime}`); + ok(cue.getActive, `cue ${cue.id} is showing`); +} + +async function waitUntilCueIsHiding(cue) { + info(`wait until cue ${cue.id} is hiding`); + // cue has not been hidden yet. + if (cue.getActive) { + await once(cue, "exit"); + } + info(`video current time=${video.currentTime}`); + ok(!cue.getActive, `cue ${cue.id} is hidding`); +} + +function IsVideoStillPlaying() { + ok(!video.paused, `video is still playing, currentTime=${video.currentTime}`); +} + +function endTestAndClearVideo() { + removeNodeAndSource(video); + SimpleTest.finish(); +} + +</script> +</body> +</html> |