1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
6 <script src=../media-file.js></script>
7 <script src=../video-test.js></script>
8 <script src=../media-controls.js></script>
9
10 <style>
11 video::cue {color: green}
12 video::cue(:past) {color: lime}
13 video::cue(:future) {color: gray}
14 </style>
15
16 <script>
17
18 var cueNode;
19 var seekedCount = 0;
20 var seekTimes = [0.1, 0.3, 0.5, 0.7, 0.9];
21
22 var info = [["rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
23 ["rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
24 ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
25 ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(0, 255, 0)"],
26 ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)"]];
27
28 function seeked()
29 {
30 if (testEnded)
31 return;
32
33 cueNode = textTrackDisplayElement(video, 'all-nodes').firstElementChild;
34 testExpected("getComputedStyle(cueNode).color", info[seekedCount][0]);
35 cueNode = cueNode.nextElementSibling;
36 testExpected("getComputedStyle(cueNode).color", info[seekedCount][1]);
37 cueNode = cueNode.nextElementSibling.firstElementChild.firstChild;
38 testExpected("getComputedStyle(cueNode).color", info[seekedCount][2]);
39 cueNode = cueNode.nextElementSibling;
40 testExpected("getComputedStyle(cueNode).color", info[seekedCount][3]);
41 cueNode = cueNode.parentNode;
42 testExpected("getComputedStyle(cueNode).color", info[seekedCount][4]);
43
44 if (++seekedCount == info.length)
45 endTest();
46 else {
47 consoleWrite("");
48 run("video.currentTime = " + seekTimes[seekedCount]);
49 }
50 }
51
52 function loaded()
53 {
54 consoleWrite("Test that cues are being matched properly by :past and :future pseudo classes.");
55 findMediaElement();
56 video.src = findMediaFile('video', '../content/test');
57 video.id = "testvideo";
58 waitForEvent('seeked', seeked);
59 waitForEvent('canplaythrough', function() { video.currentTime = seekTimes[0]; });
60 }
61
62 </script>
63 </head>
64 <body onload="loaded()">
65 <video controls >
66 <track src="captions-webvtt/styling-timestamps.vtt" kind="captions" default>
67 </video>
68 </body>
69</html>