blob: c9fb1a2527564d137dbafcbf5e157fe80486f7f6 [file] [log] [blame]
<!DOCTYPE html>
<title>Test that cues are being matched properly by :past and :future pseudo classes.</title>
<script src="../media-file.js"></script>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<video></video>
<style>
video::cue {color: green}
video::cue(:past) {color: lime}
video::cue(:future) {color: gray}
</style>
<script>
async_test(function(t) {
var seekTimeIndex = 0;
var seekTimes = [0.1, 0.3, 0.5, 0.7, 0.9];
var info = [["rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
["rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(0, 255, 0)"],
["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)"]];
var video = document.querySelector("video");
video.src = findMediaFile("video", "../content/test");
var track = document.createElement("track");
track.src = "captions-webvtt/styling-timestamps.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.firstElementChild.firstChild;
assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][2]);
cueNode = cueNode.nextElementSibling;
assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][3]);
cueNode = cueNode.parentNode;
assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][4]);
if (++seekTimeIndex == info.length)
t.done();
else
video.currentTime = seekTimes[seekTimeIndex];
});
video.currentTime = seekTimes[seekTimeIndex];
});
</script>