track-cue-rendering-after-controls-added-ref.html (920B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <script src="/common/reftest-wait.js"></script> 4 <title>Text track cue layout after controls are added (reference)</title> 5 <style> 6 ::cue { 7 font-size: 50px; 8 } 9 10 /* Video width should be large enough to display all of the media controls. */ 11 video { 12 border: 1px solid gray; 13 width: 500px; 14 } 15 </style> 16 <video controls onloadeddata="this.onloadeddata = null; takeScreenshot();"> 17 <source src="/media/white.webm" type="video/webm"> 18 <source src="/media/white.mp4" type="video/mp4"> 19 </video> 20 <script> 21 // Add a single cue at line -2, where it would be if there were controls visible 22 // at the bottom. (This assumes that those controls are less than 50px high.) 23 // cue at line -1. 24 var video = document.querySelector("video"); 25 var track = video.addTextTrack("captions"); 26 var cue = new VTTCue(0, 1, "text"); 27 cue.line = -2; 28 track.addCue(cue); 29 track.mode = "showing"; 30 </script> 31 </html>