Index: third_party/WebKit/LayoutTests/media/track/track-css-matching.html |
diff --git a/third_party/WebKit/LayoutTests/media/track/track-css-matching.html b/third_party/WebKit/LayoutTests/media/track/track-css-matching.html |
index eb942dff2249f78427d483167684c0d5b5fa9296..e217f8a53d14ed033e930f08e13d320961b0b25a 100644 |
--- a/third_party/WebKit/LayoutTests/media/track/track-css-matching.html |
+++ b/third_party/WebKit/LayoutTests/media/track/track-css-matching.html |
@@ -1,85 +1,58 @@ |
<!DOCTYPE html> |
-<html> |
- <head> |
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
- |
- <script src=../media-file.js></script> |
- <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 |
- (Please avoid writing new tests using video-test.js) --> |
- <script src=../video-test.js></script> |
- <script src=../media-controls.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 } |
- #testvideo::cue(.green) { color:green } |
- video::cue(#testcue) {color: green} |
- video::cue(:future) {color: gray} |
- </style> |
- |
- <script> |
- |
- var cueNode; |
- var seekedCount = 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 description = ["1. Test that cues are being matched properly by the class name", |
- "2. Test that cues are being matched properly by the ':future' pseudo class.", "", "", |
- "3. Test that cues are being matched properly by tag.", |
- "4. Test that cues are being matched properly by id.", |
- "5. Test that cues are being matched properly by the voice attribute."]; |
- |
- function seeked() |
- { |
- if (testEnded) |
- return; |
- |
- if (description[seekedCount] != "") { |
- consoleWrite("<br>"); |
- consoleWrite(description[seekedCount]); |
- } |
- |
- cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; |
- testExpected("getComputedStyle(cueNode).color", info[seekedCount][0]); |
- cueNode = cueNode.nextElementSibling; |
- testExpected("getComputedStyle(cueNode).color", info[seekedCount][1]); |
- cueNode = cueNode.nextElementSibling; |
- testExpected("getComputedStyle(cueNode).color", info[seekedCount][2]); |
- |
- if (++seekedCount == info.length) |
- endTest(); |
- else { |
- consoleWrite(""); |
- run("video.currentTime = " + seekTimes[seekedCount]); |
- } |
- } |
- |
- function loaded() |
- { |
- findMediaElement(); |
- video.src = findMediaFile('video', '../content/test'); |
- video.id = "testvideo"; |
- waitForEvent('seeked', seeked); |
- waitForEventOnce('canplaythrough', function() { video.currentTime = seekTimes[0]; }); |
- } |
- |
- </script> |
- </head> |
- <body onload="loaded()"> |
- <video controls > |
- <track src="captions-webvtt/styling.vtt" kind="captions" default> |
- </video> |
- </body> |
-</html> |
+<title>Test that cues are being matched properly by various CSS Selectors.</title> |
+<script src="../media-file.js"></script> |
+<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 = findMediaFile("video", "../content/test"); |
+ |
+ 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 = textTrackDisplayElement(video, "cue").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> |