track-cue-rendering-after-controls-removed.html (1019B)
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-removed-ref.html"> 5 <title>Text track cue layout after controls are removed</title> 6 <style> 7 ::cue { 8 font-size: 50px; 9 } 10 </style> 11 <video controls style="border:1px solid gray"> 12 <source src="/media/white.webm" type="video/webm"> 13 <source src="/media/white.mp4" type="video/mp4"> 14 </video> 15 <script> 16 // Add a cue that will overlap with the video controls. 17 var video = document.querySelector("video"); 18 var track = video.addTextTrack("captions"); 19 track.addCue(new VTTCue(0, 1, "text")); 20 track.mode = "showing"; 21 22 video.onloadeddata = function() { 23 // Double nesting of requestAnimationFrame to 24 // make sure cue layout and paint happens. 25 window.requestAnimationFrame(function() { 26 window.requestAnimationFrame(function() { 27 // Remove the controls. The cue should not move. 28 video.controls = false; 29 takeScreenshot(); 30 }); 31 }); 32 }; 33 </script> 34 </html>