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