track-css-window-color.html | Explore in Territory

<!DOCTYPE html>
<title>Test that WebVTT objects are being styled correctly when both window and background colors are defined.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
/* Author settings for the cues */
video::cue(c) {
    color: rgb(255, 0, 0);
    background-color: rgb(0, 128, 0);
    text-shadow: rgb(0, 255, 0) 3px 3px 0px;
    font-size: 20px;
    font-family: arial;
}
</style>
<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 cue = textTrackCueElementByIndex(video1, 0).firstChild.firstElementChild;
        var cueStyle = getComputedStyle(cue);
        assert_equals(cueStyle.color, "rgb(255, 0, 0)");
        assert_equals(cueStyle.backgroundColor, "rgb(0, 128, 0)");
        assert_equals(cueStyle.textShadow, "rgb(0, 255, 0) 3px 3px 0px");
        assert_equals(cueStyle.fontSize, "20px");
        assert_equals(cueStyle.fontFamily, "arial");

        internals.settings.setTextTrackTextColor("rgb(0, 255, 255) !important");
        internals.settings.setTextTrackWindowColor("rgb(0, 255, 0) !important");
        internals.settings.setTextTrackBackgroundColor("rgb(255, 255, 0) !important");
        internals.settings.setTextTrackTextShadow("rgb(255, 0, 0) 2px 2px !important")
        internals.settings.setTextTrackTextSize("14px !important");
        internals.settings.setTextTrackFontFamily("fantasy !important");
        internals.settings.setTextTrackFontStyle("italic !important");
        internals.settings.setTextTrackFontVariant("small-caps !important");

        video2 = addVideoTo(container);
        video2.oncanplaythrough = t.step_func_done(function() {
            var cue = textTrackCueElementByIndex(video2, 0).firstChild.firstElementChild;
            var cueStyle = getComputedStyle(cue);
            assert_equals(cueStyle.color, "rgb(0, 255, 255)");
            assert_equals(cueStyle.backgroundColor, "rgb(0, 255, 0)");
            assert_equals(cueStyle.textShadow, "rgb(255, 0, 0) 2px 2px");
            assert_equals(cueStyle.fontSize, "14px");
            assert_equals(cueStyle.fontFamily, "fantasy");
            assert_equals(cueStyle.fontStyle, "italic");
            assert_equals(cueStyle.fontVariant, "small-caps");
        });
    });
});
</script>
chromium/third_party/blink/web_tests/media/track/track-css-window-color.html
