track-css-user-settings-override-internal-settings.html

<!DOCTYPE html>
<title>Test that WebVTT objects are being styled correctly based on user settings that should override default settings.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="container"></div>
<script>
function addVideoTo(container) {
    var video = document.createElement("video");
    video.src = "../content/test.ogv";
    video.autoplay = true;
    var track = document.createElement("track");
    track.src = "captions-webvtt/styling.vtt";
    track.kind = "captions";
    track.default = "true";
    video.appendChild(track);
    container.appendChild(video);
    return video;
}

async_test(function(t) {
    var container = document.getElementById("container");

    // Test a video without user settings applied.
    var video1 = addVideoTo(container);
    video1.oncanplaythrough = t.step_func_done(function() {
        var displayTree = textTrackCueElementByIndex(video1, 0);
        var displayTreeStyle = getComputedStyle(displayTree);
        var cue = displayTree.firstChild;
        var cueStyle = getComputedStyle(cue);
        // These are the expected default cue settings per spec
        // http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects
        assert_equals(cueStyle.color, "rgb(255, 255, 255)");
        assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)");
        assert_equals(cueStyle.fontFamily, "sans-serif");
        assert_equals(displayTreeStyle.backgroundColor, "rgba(0, 0, 0, 0)");
        assert_equals(displayTreeStyle.padding, "0px");
        testApplyUserSettings();
    });

    // Apply user settings for color and font-size and verify that the other internal settings are retained.
    function testApplyUserSettings() {
        internals.settings.setTextTrackTextColor("rgb(0, 255, 255)");
        internals.settings.setTextTrackTextSize("14px");
        internals.settings.setTextTrackWindowColor("rgba(0, 0, 0, 0.8)");
        var video2 = addVideoTo(container);
        video2.oncanplaythrough = t.step_func_done(function() {
            var displayTree = textTrackCueElementByIndex(video2, 0);
            var displayTreeStyle = getComputedStyle(displayTree);
            var cue = displayTree.firstChild;
            var cueStyle = getComputedStyle(cue);
            assert_equals(cueStyle.color, "rgb(0, 255, 255)");
            assert_equals(cueStyle.fontSize, "14px");
            assert_equals(displayTreeStyle.backgroundColor, "rgba(0, 0, 0, 0.8)");
            assert_equals(displayTreeStyle.padding, "5px");
            // When there is no user setting specified for background-color and font-family, the internal settings are applied.
            assert_equals(cueStyle.backgroundColor, "rgba(0, 0, 0, 0.8)");
            assert_equals(cueStyle.fontFamily, "sans-serif");
        });
    }
});
</script>
chromium/third_party/blink/web_tests/media/track/track-css-user-settings-override-internal-settings.html
