OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <title>Test that style to all cues is applied correctly.</title> |
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 <video></video> |
| 8 <style> |
| 9 video::cue { |
| 10 color: purple; |
| 11 background-color: lime; |
| 12 /* TODO(srirama.m): 'text-decoration' shorthand to be handled when available
. |
| 13 See https://chromiumcodereview.appspot.com/19516002 for details. */ |
| 14 text-decoration-line: underline; |
| 15 text-decoration-style: dashed; |
| 16 text-decoration-color: cyan; |
| 17 } |
| 18 </style> |
| 19 <script> |
| 20 async_test(function(t) { |
| 21 var video = document.querySelector('video'); |
| 22 video.src = findMediaFile('video', '../content/test'); |
| 23 |
| 24 var track = document.createElement('track'); |
| 25 track.src = 'captions-webvtt/styling.vtt'; |
| 26 track.kind = 'captions'; |
| 27 track.default = true; |
| 28 video.appendChild(track); |
5 | 29 |
6 <script src=../media-file.js></script> | 30 video.onseeked = t.step_func_done(function() { |
7 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 | 31 var cueStyle = getComputedStyle(textTrackDisplayElement(video, 'cue')); |
8 (Please avoid writing new tests using video-test.js) --> | 32 assert_equals(cueStyle.color, 'rgb(128, 0, 128)'); |
9 <script src=../video-test.js></script> | 33 assert_equals(cueStyle.backgroundColor, 'rgb(0, 255, 0)'); |
10 <script src=../media-controls.js></script> | 34 assert_equals(cueStyle.textDecorationLine, 'underline'); |
| 35 assert_equals(cueStyle.textDecorationStyle, 'dashed'); |
| 36 assert_equals(cueStyle.textDecorationColor, 'rgb(0, 255, 255)'); |
| 37 }); |
11 | 38 |
12 <style> | 39 video.currentTime = 0.5; |
13 | 40 }); |
14 video::cue { | 41 </script> |
15 color: purple; | |
16 background-color: lime; | |
17 /* FIXME: 'text-decoration' shorthand to be handled when available. | |
18 * See https://chromiumcodereview.appspot.com/19516002 for details.
*/ | |
19 text-decoration-line: underline; | |
20 text-decoration-style: dashed; | |
21 text-decoration-color: cyan; | |
22 } | |
23 | |
24 </style> | |
25 | |
26 <script> | |
27 | |
28 function seeked() | |
29 { | |
30 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).color", "rgb(128, 0, 128)"); | |
31 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).backgroundColor", "rgb(0, 255, 0)"); | |
32 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).textDecorationLine", "underline"); | |
33 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).textDecorationStyle", "dashed"); | |
34 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).textDecorationColor", "rgb(0, 255, 255)"); | |
35 endTest(); | |
36 } | |
37 | |
38 function loaded() | |
39 { | |
40 consoleWrite("Test that style to all cues is applied correctly."); | |
41 findMediaElement(); | |
42 video.src = findMediaFile('video', '../content/test'); | |
43 waitForEvent('seeked', seeked); | |
44 waitForEvent('canplaythrough', function() { video.currentTime = .5;
}); | |
45 } | |
46 | |
47 </script> | |
48 </head> | |
49 <body onload="loaded()"> | |
50 <video controls > | |
51 <track src="captions-webvtt/styling.vtt" kind="captions" default> | |
52 </video> | |
53 </body> | |
54 </html> | |
OLD | NEW |