<!DOCTYPE html>
<title>Test that default positioned TextTrack's cues are rendered correctly.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<video>
    <track src="captions-webvtt/captions.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
    zoom_factor = 2.5;
    testRunner.setPageZoomFactor(zoom_factor);
    var video = document.querySelector("video");
    var testTrack = document.querySelector("track");
    video.src = "../content/test.ogv";

    video.onseeked = t.step_func(function() {
        assert_equals(window.devicePixelRatio, zoom_factor)
        testFontSize([[2560, 1440], [1000, 300], [600, 450], [300, 150]]);
    });

    function testFontSize(subjects) {
        var dimensions = subjects.shift();
        video.width = dimensions[0];
        video.height = dimensions[1];
        runAfterLayoutAndPaint(t.step_func(function() {
            assert_equals(getComputedStyle(textTrackContainerElement(video)).fontSize, video.height * 0.05 + "px");
            if (subjects.length) {
                testFontSize(subjects);
            } else {
                t.done();
            }
        }));
    }

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