| <!DOCTYPE html> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function waitForVideoPresentation(video) { |
| return new Promise(resolve => { |
| video.requestVideoFrameCallback(resolve); |
| }); |
| } |
| function loadAndQueueVideoPresentation(video) { |
| video.src = '../content/test.ogv'; |
| videoPresentations.push(waitForVideoPresentation(video)); |
| } |
| let videoPresentations = []; |
| |
| function addTrackWithCueData(video, cueData) { |
| var track = video.addTextTrack('subtitles'); |
| var cue = new VTTCue(0, 10, 'XXX'); |
| for (var prop in cueData) |
| cue[prop] = cueData[prop]; |
| track.addCue(cue); |
| track.mode = 'showing'; |
| } |
| </script> |
| <style> |
| video::cue { |
| font-size: 50px; |
| color: green; |
| background-color: green; |
| } |
| </style> |
| <video preload="auto" autoplay> |
| <script> |
| var video = document.currentScript.parentNode; |
| addTrackWithCueData(video, { align: 'start', line: 0 }); |
| loadAndQueueVideoPresentation(video); |
| </script> |
| </video> |
| <video preload="auto" autoplay> |
| <script> |
| var video = document.currentScript.parentNode; |
| addTrackWithCueData(video, { align: 'center', line: 0 }); |
| loadAndQueueVideoPresentation(video); |
| </script> |
| </video> |
| <video preload="auto" autoplay> |
| <script> |
| var video = document.currentScript.parentNode; |
| addTrackWithCueData(video, { align: 'end', line: 0 }); |
| loadAndQueueVideoPresentation(video); |
| </script> |
| </video> |
| <script> |
| Promise.all(videoPresentations).then(() => { |
| testRunner.notifyDone(); |
| }); |
| </script> |
