track-cue-rendering.html | Explore in Territory

<!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) {
    var video = document.querySelector("video");
    var testTrack = document.querySelector("track");
    video.src = "../content/test.ogv";

    var cueTextIndex = 0;
    var cueText = [ "Lorem", "ipsum", "dolor", "sit" ];
    video.onseeked = t.step_func(function() {
        assert_equals(video.currentTime, cueTextIndex + 0.5);
        assert_equals(testTrack.track.activeCues.length, 1);
        assert_equals(testTrack.track.activeCues[0].text, cueText[cueTextIndex]);

        var testCueDisplayBox = textTrackDisplayElement(video);
        assert_equals(testCueDisplayBox.innerText, cueText[cueTextIndex]);
        assert_equals(2 * testCueDisplayBox.offsetLeft, video.videoWidth - testCueDisplayBox.offsetWidth)

        if (++cueTextIndex == cueText.length) {
            // Test the cue display colors and font.
            testFontSize([[2560, 1440], [1280, 960], [640, 480], [320, 240]]);
        } else {
            video.currentTime += 1;
        }
    });

    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, parseInt(video.height * 0.05) + "px");
            if (subjects.length) {
                testFontSize(subjects);
            } else {
                assert_equals(getComputedStyle(textTrackContainerElement(video)).fontFamily, "sans-serif");
                assert_equals(getComputedStyle(textTrackContainerElement(video)).color, "rgb(255, 255, 255)");
                assert_equals(getComputedStyle(textTrackDisplayElement(video).firstChild).backgroundColor, "rgba(0, 0, 0, 0.8)");

                t.done();
            }
        }));
    }

    video.currentTime = 0.5;
});
</script>
chromium/third_party/blink/web_tests/media/track/track-cue-rendering.html
