track-css-all-cues.html | Explore in Territory

<!DOCTYPE html>
<title>Test that style to all cues is applied correctly.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<video></video>
<style>
video::cue {
    color: purple;
    background-color: lime;
    /* TODO(srirama.m): 'text-decoration' shorthand to be handled when available.
       See https://chromiumcodereview.appspot.com/19516002 for details. */
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: cyan;
}
</style>
<script>
async_test(function(t) {
    var video = document.querySelector('video');
    video.src = '../content/test.ogv';

    var track = document.createElement('track');
    track.src = 'captions-webvtt/styling.vtt';
    track.kind = 'captions';
    track.default = true;
    video.appendChild(track);

    video.onseeked = t.step_func_done(function() {
        var cueStyle = getComputedStyle(textTrackCueElementByIndex(video, 0).firstChild);
        assert_equals(cueStyle.color, 'rgb(128, 0, 128)');
        assert_equals(cueStyle.backgroundColor, 'rgb(0, 255, 0)');
        assert_equals(cueStyle.textDecorationLine, 'underline');
        assert_equals(cueStyle.textDecorationStyle, 'dashed');
        assert_equals(cueStyle.textDecorationColor, 'rgb(0, 255, 255)');
    });

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