| <!DOCTYPE html> |
| <title>Test that cues are being matched properly by :past and :future pseudo classes.</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: 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 = "../content/test.ogv"; |
| |
| 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> |
