<!DOCTYPE html>
<title>Tests rendering text track cue line with padding set.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
video::-webkit-media-text-track-display {
  padding: 15px;
  border: 5px solid black;
}
</style>
<video>
    <track src="captions-webvtt/captions-fast.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    video.src = "../content/test.ogv";

    video.onseeked = t.step_func_done(function() {
        var cueContainerElement = textTrackContainerElement(video);
        var cueDisplayElement = textTrackDisplayElement(video);

        var cueDisplayBottomPoint = cueDisplayElement.offsetTop + cueDisplayElement.offsetHeight;
        var cueContainerBottomPoint = cueContainerElement.offsetTop + cueContainerElement.offsetHeight;

        // Cue should be displayed entirely within the container.
        assert_true(cueDisplayBottomPoint <= cueContainerBottomPoint);
    });

    video.currentTime = 0.25;
});
</script>