| <!DOCTYPE html> |
| <title>Test that the cue root is not constrained by the controls/overlay.</title> |
| <script src="../media-controls.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| /* Enforce a max width on the controls enclosure, so |
| * that it doesn't fill the entire player width. |
| */ |
| video::-webkit-media-controls-enclosure { |
| max-width: 800px; |
| } |
| |
| video { |
| width: 2000px; |
| height: 750px; |
| } |
| </style> |
| <video> |
| <track src="captions-webvtt/long-word.vtt" default> |
| </video> |
| <script> |
| async_test(function(t) { |
| var video = document.querySelector("video"); |
| video.src = "../content/test.ogv"; |
| |
| video.onseeked = t.step_func_done(function() { |
| // The width of the controls depends on UA style, so verify that our assumption holds. |
| var controlsContainer = mediaControlsButton(video, "panel"); |
| assert_true(controlsContainer.offsetWidth <= 800); |
| |
| var cueRoot = textTrackContainerElement(video); |
| assert_true(parseFloat(getComputedStyle(cueRoot).width) > 800); |
| }); |
| |
| video.currentTime = 2; |
| }); |
| </script> |
