track-cue-rendering-line-doesnt-fit.html (951B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <script src="/common/reftest-wait.js"></script> 4 <link rel="match" href="track-cue-rendering-line-doesnt-fit-ref.html"> 5 <script> 6 function addCue(track, cueData) { 7 var cue = new VTTCue(0, 10, 'XXX'); 8 for (var prop in cueData) 9 cue[prop] = cueData[prop]; 10 track.addCue(cue); 11 } 12 </script> 13 <style> 14 video::cue { 15 font-size: 120px; 16 color: green; 17 background-color: green; 18 } 19 </style> 20 <video autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();"> 21 <source src="/media/white.webm" type="video/webm"> 22 <source src="/media/white.mp4" type="video/mp4"> 23 <script> 24 var video = document.querySelector("video"); 25 var track = video.addTextTrack('subtitles'); 26 addCue(track, { line: 0, align: 'start', text: 'PAS' }); 27 // This cue will not fit, and will not be displayed. 28 addCue(track, { line: 1, align: 'start', text: 'FAI' }); 29 track.mode = 'showing'; 30 </script> 31 </video> 32 </html>