| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>WebVTT two-cue layout after the first cue has ended</title> |
| <link rel="match" href="track-webvtt-two-cue-layout-after-first-end-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| <video style="border:1px solid gray"> |
| <source src="/media/white.webm" type="video/webm"> |
| <source src="/media/white.mp4" type="video/mp4"> |
| </video> |
| <script> |
| // Add two cues, where the first cue ends before the second. |
| var video = document.querySelector("video"); |
| var track = video.addTextTrack("captions"); |
| let cue1 = new VTTCue(-1, 1, "cue 1"); |
| track.addCue(cue1); |
| // As video's duration is 10s, it ensures that this cue would always be displayed. |
| track.addCue(new VTTCue(0, 10, "cue 2")); |
| track.mode = "showing"; |
| video.play(); |
| cue1.onexit = () => { |
| cue1.onexit = null; |
| video.pause(); |
| takeScreenshot(); |
| }; |
| </script> |
| </html> |
