OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <title>Test that cues are being matched properly by various CSS Selectors.</titl
e> |
3 <head> | 3 <script src="../media-file.js"></script> |
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | 4 <script src="../media-controls.js"></script> |
| 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src="../../resources/testharnessreport.js"></script> |
| 7 <style> |
| 8 video::cue(c) {color: purple} |
| 9 video::cue(v) {color: yellow} |
| 10 video::cue(v[voice="Mark"]) {color: red} |
| 11 video::cue(v[voice="Nancy"]) {color: green} |
| 12 video::cue(b) {color: lime} |
| 13 video::cue(.red, .red2) { color:red } |
| 14 video::cue(.green) { color:green } |
| 15 video::cue(#testcue) {color: green} |
| 16 video::cue(:future) {color: gray} |
| 17 </style> |
| 18 <video></video> |
| 19 <script> |
| 20 async_test(function(t) { |
| 21 var seekTimeIndex = 0; |
| 22 var seekTimes = [0.3, 0.5, 0.7, 0.9, 1.1, 1.3, 1.5]; |
5 | 23 |
6 <script src=../media-file.js></script> | 24 var info = [["rgb(255, 0, 0)", "rgb(0, 128, 0)", "rgb(255, 0, 0)"], |
7 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 | 25 ["rgb(128, 0, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"]
, |
8 (Please avoid writing new tests using video-test.js) --> | 26 ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 128, 128)"], |
9 <script src=../video-test.js></script> | 27 ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 0, 128)"], |
10 <script src=../media-controls.js></script> | 28 ["rgb(128, 0, 128)", "rgb(255, 255, 0)", "rgb(0, 255, 0)"], |
| 29 ["rgb(0, 128, 0)", "rgb(0, 128, 0)", "rgb(0, 128, 0)"], |
| 30 ["rgb(255, 255, 0)", "rgb(255, 0, 0)", "rgb(0, 128, 0)"]]; |
11 | 31 |
12 <style> | 32 var video = document.querySelector("video"); |
13 video::cue(c) {color: purple} | 33 video.src = findMediaFile("video", "../content/test"); |
14 video::cue(v) {color: yellow} | 34 |
15 video::cue(v[voice="Mark"]) {color: red} | 35 var track = document.createElement("track"); |
16 video::cue(v[voice="Nancy"]) {color: green} | 36 track.src = "captions-webvtt/styling.vtt"; |
17 video::cue(b) {color: lime} | 37 track.kind = "captions"; |
18 video::cue(.red, .red2) { color:red } | 38 track.default = true; |
19 #testvideo::cue(.green) { color:green } | 39 video.appendChild(track); |
20 video::cue(#testcue) {color: green} | |
21 video::cue(:future) {color: gray} | |
22 </style> | |
23 | 40 |
24 <script> | 41 video.onseeked = t.step_func(function() { |
| 42 assert_equals(video.currentTime, seekTimes[seekTimeIndex]); |
| 43 var cueNode = textTrackDisplayElement(video, "cue").firstElementChild; |
| 44 assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][0]); |
| 45 cueNode = cueNode.nextElementSibling; |
| 46 assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][1]); |
| 47 cueNode = cueNode.nextElementSibling; |
| 48 assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][2]); |
25 | 49 |
26 var cueNode; | 50 if (++seekTimeIndex == info.length) |
27 var seekedCount = 0; | 51 t.done(); |
28 var seekTimes = [0.3, 0.5, 0.7, 0.9, 1.1, 1.3, 1.5]; | 52 else |
29 | 53 video.currentTime = seekTimes[seekTimeIndex]; |
30 var info = [["rgb(255, 0, 0)", "rgb(0, 128, 0)", "rgb(255, 0, 0)"], | 54 }); |
31 ["rgb(128, 0, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 12
8)"], | 55 |
32 ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 128, 128)
"], | 56 video.currentTime = seekTimes[seekTimeIndex]; |
33 ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 0, 128)"]
, | 57 }); |
34 ["rgb(128, 0, 128)", "rgb(255, 255, 0)", "rgb(0, 255, 0)"], | 58 </script> |
35 ["rgb(0, 128, 0)", "rgb(0, 128, 0)", "rgb(0, 128, 0)"], | |
36 ["rgb(255, 255, 0)", "rgb(255, 0, 0)", "rgb(0, 128, 0)"]]; | |
37 | |
38 var description = ["1. Test that cues are being matched properly by the
class name", | |
39 "2. Test that cues are being matched properly by the
':future' pseudo class.", "", "", | |
40 "3. Test that cues are being matched properly by tag.
", | |
41 "4. Test that cues are being matched properly by id."
, | |
42 "5. Test that cues are being matched properly by the
voice attribute."]; | |
43 | |
44 function seeked() | |
45 { | |
46 if (testEnded) | |
47 return; | |
48 | |
49 if (description[seekedCount] != "") { | |
50 consoleWrite("<br>"); | |
51 consoleWrite(description[seekedCount]); | |
52 } | |
53 | |
54 cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; | |
55 testExpected("getComputedStyle(cueNode).color", info[seekedCount][0]
); | |
56 cueNode = cueNode.nextElementSibling; | |
57 testExpected("getComputedStyle(cueNode).color", info[seekedCount][1]
); | |
58 cueNode = cueNode.nextElementSibling; | |
59 testExpected("getComputedStyle(cueNode).color", info[seekedCount][2]
); | |
60 | |
61 if (++seekedCount == info.length) | |
62 endTest(); | |
63 else { | |
64 consoleWrite(""); | |
65 run("video.currentTime = " + seekTimes[seekedCount]); | |
66 } | |
67 } | |
68 | |
69 function loaded() | |
70 { | |
71 findMediaElement(); | |
72 video.src = findMediaFile('video', '../content/test'); | |
73 video.id = "testvideo"; | |
74 waitForEvent('seeked', seeked); | |
75 waitForEventOnce('canplaythrough', function() { video.currentTime =
seekTimes[0]; }); | |
76 } | |
77 | |
78 </script> | |
79 </head> | |
80 <body onload="loaded()"> | |
81 <video controls > | |
82 <track src="captions-webvtt/styling.vtt" kind="captions" default> | |
83 </video> | |
84 </body> | |
85 </html> | |
OLD | NEW |