Index: third_party/WebKit/LayoutTests/media/track/track-css-all-cues.html |
diff --git a/third_party/WebKit/LayoutTests/media/track/track-css-all-cues.html b/third_party/WebKit/LayoutTests/media/track/track-css-all-cues.html |
index 9d6f4679e632fdf8ccc4640451c135de1c293c09..e43aa39ba05fca6a2e9d5c85c364401c4a83b546 100644 |
--- a/third_party/WebKit/LayoutTests/media/track/track-css-all-cues.html |
+++ b/third_party/WebKit/LayoutTests/media/track/track-css-all-cues.html |
@@ -1,54 +1,41 @@ |
<!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 { |
- color: purple; |
- background-color: lime; |
- /* FIXME: 'text-decoration' shorthand to be handled when available. |
- * See https://chromiumcodereview.appspot.com/19516002 for details. */ |
- text-decoration-line: underline; |
- text-decoration-style: dashed; |
- text-decoration-color: cyan; |
- } |
- |
- </style> |
- |
- <script> |
- |
- function seeked() |
- { |
- testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')).color", "rgb(128, 0, 128)"); |
- testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')).backgroundColor", "rgb(0, 255, 0)"); |
- testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')).textDecorationLine", "underline"); |
- testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')).textDecorationStyle", "dashed"); |
- testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')).textDecorationColor", "rgb(0, 255, 255)"); |
- endTest(); |
- } |
- |
- function loaded() |
- { |
- consoleWrite("Test that style to all cues is applied correctly."); |
- findMediaElement(); |
- video.src = findMediaFile('video', '../content/test'); |
- waitForEvent('seeked', seeked); |
- waitForEvent('canplaythrough', function() { video.currentTime = .5; }); |
- } |
- |
- </script> |
- </head> |
- <body onload="loaded()"> |
- <video controls > |
- <track src="captions-webvtt/styling.vtt" kind="captions" default> |
- </video> |
- </body> |
-</html> |
+<title>Test that style to all cues is applied correctly.</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> |
+<video></video> |
+<style> |
+video::cue { |
+ color: purple; |
+ background-color: lime; |
+ /* TODO(srirama.m): 'text-decoration' shorthand to be handled when available. |
+ See https://chromiumcodereview.appspot.com/19516002 for details. */ |
+ text-decoration-line: underline; |
+ text-decoration-style: dashed; |
+ text-decoration-color: cyan; |
+} |
+</style> |
+<script> |
+async_test(function(t) { |
+ 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_done(function() { |
+ var cueStyle = getComputedStyle(textTrackDisplayElement(video, 'cue')); |
+ assert_equals(cueStyle.color, 'rgb(128, 0, 128)'); |
+ assert_equals(cueStyle.backgroundColor, 'rgb(0, 255, 0)'); |
+ assert_equals(cueStyle.textDecorationLine, 'underline'); |
+ assert_equals(cueStyle.textDecorationStyle, 'dashed'); |
+ assert_equals(cueStyle.textDecorationColor, 'rgb(0, 255, 255)'); |
+ }); |
+ |
+ video.currentTime = 0.5; |
+}); |
+</script> |