track-css-cue-lifetime.html | Explore in Territory

<!DOCTYPE html>
<title>Test that the cue is styled properly throughout its lifetime.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
video::cue(.red, .red2) { color:red }
video::cue(.green) { color:green }
</style>
<video></video>
<script>
async_test(function(t) {
    var seekTimeIndex = 0;
    var step = 0.4;
    var initialTime = 0.6;
    var endTime = 3.0

    var video = document.querySelector('video');
    video.src = '../content/test.ogv';

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

    video.onseeked = t.step_func(function() {
        var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)');
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, 'rgb(0, 128, 0)');
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, 'rgb(255, 0, 0)');

        var seekTime = ++seekTimeIndex * step + initialTime;
        if (seekTime > endTime)
            t.done();
        else
            video.currentTime = seekTime;
    });

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