<!DOCTYPE html>
<title>Test that controls don't increase the size of the container (i.e. are rendered overlapping with the video canvas).</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<iframe style="width: 400px; height: 300px; border: 0px;"></iframe>
<script>
async_test(function(t) {
    var iframe = document.querySelector("iframe");

    iframe.onload = t.step_func(function() {
        var video = iframe.contentDocument.querySelector("video");

        video.ontimeupdate = t.step_func_done(function() {
            var controls = internals.shadowRoot(video).firstChild.firstChild;
            assert_less_than_equal(controls.offsetTop + controls.offsetHeight, video.offsetHeight);
        });
    });

    iframe.src = "content/test.ogv";
});
</script>