track-css-matching.html | Explore in Territory

<!DOCTYPE html>
<title>Test that cues are being matched properly by various CSS Selectors.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
video::cue(c) {color: purple}
video::cue(v) {color: yellow}
video::cue(v[voice="Mark"]) {color: red}
video::cue(v[voice="Nancy"]) {color: green}
video::cue(b) {color: lime}
video::cue(.red, .red2) { color:red }
video::cue(.green) { color:green }
video::cue(#testcue) {color: green}
video::cue(:future) {color: gray}
</style>
<video></video>
<script>
async_test(function(t) {
    var seekTimeIndex = 0;
    var seekTimes = [0.3, 0.5, 0.7, 0.9, 1.1, 1.3, 1.5];

    var info = [["rgb(255, 0, 0)", "rgb(0, 128, 0)", "rgb(255, 0, 0)"],
                ["rgb(128, 0, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
                ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 128, 128)"],
                ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 0, 128)"],
                ["rgb(128, 0, 128)", "rgb(255, 255, 0)", "rgb(0, 255, 0)"],
                ["rgb(0, 128, 0)", "rgb(0, 128, 0)", "rgb(0, 128, 0)"],
                ["rgb(255, 255, 0)", "rgb(255, 0, 0)", "rgb(0, 128, 0)"]];

    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(function() {
        assert_equals(video.currentTime, seekTimes[seekTimeIndex]);
        var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][0]);
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][1]);
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][2]);

        if (++seekTimeIndex == info.length)
            t.done();
        else
            video.currentTime = seekTimes[seekTimeIndex];
    });

    video.currentTime = seekTimes[seekTimeIndex];
});
</script>
chromium/third_party/blink/web_tests/media/track/track-css-matching.html
