track-cue-rendering-after-controls-added.html (1151B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <script src="/common/reftest-wait.js"></script> 4 <link rel="match" href="track-cue-rendering-after-controls-added-ref.html"> 5 <title>Text track cue layout after controls are added</title> 6 <style> 7 ::cue { 8 font-size: 50px; 9 } 10 </style> 11 <!-- Width should be large enough to display all of the media controls. --> 12 <video style="border:1px solid gray; width: 500px;"> 13 <source src="/media/white.webm" type="video/webm"> 14 <source src="/media/white.mp4" type="video/mp4"> 15 </video> 16 <script> 17 // Add a cue that will overlap with the video controls. 18 var video = document.querySelector("video"); 19 var track = video.addTextTrack("captions"); 20 track.addCue(new VTTCue(0, 1, "text")); 21 track.mode = "showing"; 22 23 video.onloadeddata = function() { 24 // Double nesting of requestAnimationFrame to 25 // make sure cue layout and paint happens. 26 window.requestAnimationFrame(function() { 27 window.requestAnimationFrame(function() { 28 video.controls = true; 29 // Wait for the relayout before screenshot. 30 window.requestAnimationFrame(function() { 31 takeScreenshot(); 32 }); 33 }); 34 }); 35 }; 36 </script> 37 </html>