Index: third_party/WebKit/LayoutTests/media/track/css-cue-for-video-in-shadow-2.html |
diff --git a/third_party/WebKit/LayoutTests/media/track/css-cue-for-video-in-shadow-2.html b/third_party/WebKit/LayoutTests/media/track/css-cue-for-video-in-shadow-2.html |
index 8f96ac17ab86eaafeed8945bfa91df68caa10915..e6a0f759942cf32a88980348a5ab70fc54588865 100644 |
--- a/third_party/WebKit/LayoutTests/media/track/css-cue-for-video-in-shadow-2.html |
+++ b/third_party/WebKit/LayoutTests/media/track/css-cue-for-video-in-shadow-2.html |
@@ -1,50 +1,28 @@ |
<!DOCTYPE html> |
-<html> |
-<head> |
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
+<title>Test that the cue is styled when video and style is in the same shadow tree.</title> |
<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> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<div id='host'> |
+</div> |
<script> |
-var cueNode; |
-var seekedCount = 0; |
-var step = 0.4; |
-var initialTime = 0.6; |
-var endTime = 3.0 |
- |
-function seeked() |
-{ |
- if (testEnded) |
- return; |
- |
- cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; |
- testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)"); |
- cueNode = cueNode.nextElementSibling; |
- testExpected("getComputedStyle(cueNode).color", "rgb(0, 128, 0)"); |
- cueNode = cueNode.nextElementSibling; |
- testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)"); |
- endTest(); |
-} |
- |
-function loaded() |
-{ |
- consoleWrite("Test that the cue is styled when video and style is in the same shadow tree."); |
+async_test(function(t) { |
var host = document.getElementById('host'); |
var shadowRoot = host.createShadowRoot(); |
shadowRoot.innerHTML = '<style>video::cue(.red, .red2) { color:red } video::cue(.green) { color:green }</style>' |
+ '<video controls ><track src="captions-webvtt/styling-lifetime.vtt" kind="captions" default></video>'; |
- video = shadowRoot.querySelector('video'); |
+ var video = shadowRoot.querySelector('video'); |
video.src = findMediaFile('video', '../content/test'); |
video.id = "testvideo"; |
- waitForEvent('seeked', seeked); |
- waitForEventOnce('canplaythrough', function() { video.currentTime = initialTime; }); |
-} |
+ video.onseeked = t.step_func_done(function() { |
+ var cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; |
+ assert_equals(getComputedStyle(cueNode).color, "rgb(255, 0, 0)"); |
+ cueNode = cueNode.nextElementSibling; |
+ assert_equals(getComputedStyle(cueNode).color, "rgb(0, 128, 0)"); |
+ cueNode = cueNode.nextElementSibling; |
+ assert_equals(getComputedStyle(cueNode).color, "rgb(255, 0, 0)"); |
+ }); |
+ video.currentTime = 0.6; |
+}); |
</script> |
-</head> |
-<body onload="loaded()"> |
-<div id='host'> |
-</div> |
-</body> |
-</html> |