<!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>