Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/media/track/track-css-matching-timestamps.html |
| diff --git a/third_party/WebKit/LayoutTests/media/track/track-css-matching-timestamps.html b/third_party/WebKit/LayoutTests/media/track/track-css-matching-timestamps.html |
| index 4cf1598ce662d072d0a8cb073691bbe7f5ff16e5..b28eed9c68e33aab156c88525d4b2c05ec98e872 100644 |
| --- a/third_party/WebKit/LayoutTests/media/track/track-css-matching-timestamps.html |
| +++ b/third_party/WebKit/LayoutTests/media/track/track-css-matching-timestamps.html |
| @@ -1,71 +1,53 @@ |
| <!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: green} |
| - video::cue(:past) {color: lime} |
| - video::cue(:future) {color: gray} |
| - </style> |
| - |
| - <script> |
| - |
| - var cueNode; |
| - var seekedCount = 0; |
| - var seekTimes = [0.1, 0.3, 0.5, 0.7, 0.9]; |
| - |
| - var info = [["rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"], |
| - ["rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"], |
| - ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"], |
| - ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(0, 255, 0)"], |
| - ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)"]]; |
| - |
| - function seeked() |
| - { |
| - if (testEnded) |
| - return; |
| - |
| - 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.firstElementChild.firstChild; |
| - testExpected("getComputedStyle(cueNode).color", info[seekedCount][2]); |
| - cueNode = cueNode.nextElementSibling; |
| - testExpected("getComputedStyle(cueNode).color", info[seekedCount][3]); |
| - cueNode = cueNode.parentNode; |
| - testExpected("getComputedStyle(cueNode).color", info[seekedCount][4]); |
| - |
| - if (++seekedCount == info.length) |
| - endTest(); |
| - else { |
| - consoleWrite(""); |
| - run("video.currentTime = " + seekTimes[seekedCount]); |
| - } |
| - } |
| - |
| - function loaded() |
| - { |
| - consoleWrite("Test that cues are being matched properly by :past and :future pseudo classes."); |
| - 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-timestamps.vtt" kind="captions" default> |
| - </video> |
| - </body> |
| -</html> |
| +<title>Test that cues are being matched properly by :past and :future pseudo classes.</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 controls></video> |
| +<style> |
| +video::cue {color: green} |
| +video::cue(:past) {color: lime} |
| +video::cue(:future) {color: gray} |
| +</style> |
| +<script> |
| +async_test(function(t) { |
| + var seekTimeIndex = 0; |
| + var seekTimes = [0.1, 0.3, 0.5, 0.7, 0.9]; |
| + |
| + var info = [["rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"], |
| + ["rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"], |
| + ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"], |
| + ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(128, 128, 128)", "rgb(0, 255, 0)"], |
| + ["rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 0)"]]; |
| + |
| + var video = document.querySelector("video"); |
| + video.src = findMediaFile("video", "../content/test"); |
| + |
| + var track = document.createElement("track"); |
| + track.src = "captions-webvtt/styling-timestamps.vtt"; |
| + track.kind = "captions"; |
| + track.default = true; |
| + video.appendChild(track); |
| + |
| + video.onseeked = t.step_func(function() { |
|
philipj_slow
2016/04/12 08:39:28
Assert something about currentTime here too.
Srirama
2016/04/12 11:20:05
Done.
|
| + 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.firstElementChild.firstChild; |
| + assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][2]); |
| + cueNode = cueNode.nextElementSibling; |
| + assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][3]); |
| + cueNode = cueNode.parentNode; |
| + assert_equals(getComputedStyle(cueNode).color, info[seekTimeIndex][4]); |
| + |
| + if (++seekTimeIndex == info.length) |
| + t.done(); |
| + else |
| + video.currentTime = seekTimes[seekTimeIndex]; |
| + }); |
| + |
| + video.currentTime = seekTimes[seekTimeIndex]; |
| +}); |
| +</script> |