| <!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> |
