| <script src="../../../resources/js-test-pre.js"></script> |
| <body> |
| <video src="../../content/test.mp4" controls style="width: 320px; height: 240px;"></video> |
| <script type="text/javascript"> |
| |
| window.jsTestIsAsync = true; |
| |
| description("Testing that we leave room for the bottom controls bar when showing captions with controls on."); |
| |
| const media = document.querySelector("video"); |
| let bounds, textTrackContainer; |
| |
| let loadedMetadata = false; |
| let timeupdate = false; |
| |
| media.addEventListener("loadedmetadata", () => { |
| loadedMetadata = true; |
| media.addTextTrack("captions", "regular captions track", "en"); |
| media.textTracks[0].addCue(new VTTCue(2.00, 4.00, "test")); |
| media.textTracks[0].mode = "showing"; |
| |
| media.addEventListener("timeupdate", () => { |
| timeupdate = true; |
| bounds = media.getBoundingClientRect(); |
| textTrackContainer = internals.shadowRoot(media).querySelector("div[pseudo=-webkit-media-text-track-container]"); |
| shouldBe("textTrackContainer.getBoundingClientRect().height", "bounds.height - 37"); |
| finishJSTest(); |
| }); |
| |
| media.addEventListener("canplaythrough", () => { |
| media.currentTime = 3; |
| }); |
| }); |
| |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
