| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <script src="/common/reftest-wait.js"></script> |
| <title>Text track cue layout after controls are added (reference)</title> |
| <style> |
| ::cue { |
| font-size: 50px; |
| } |
| |
| /* Video width should be large enough to display all of the media controls. */ |
| video { |
| border: 1px solid gray; |
| width: 500px; |
| } |
| </style> |
| <video controls onloadeddata="this.onloadeddata = null; takeScreenshot();"> |
| <source src="/media/white.webm" type="video/webm"> |
| <source src="/media/white.mp4" type="video/mp4"> |
| </video> |
| <script> |
| // Add a single cue at line -2, where it would be if there were controls visible |
| // at the bottom. (This assumes that those controls are less than 50px high.) |
| // cue at line -1. |
| var video = document.querySelector("video"); |
| var track = video.addTextTrack("captions"); |
| var cue = new VTTCue(0, 1, "text"); |
| cue.line = -2; |
| track.addCue(cue); |
| track.mode = "showing"; |
| </script> |
| </html> |
