OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | 5 |
6 <script src=../media-file.js></script> | 6 <script src=../media-file.js></script> |
7 <script src=../video-test.js></script> | 7 <script src=../video-test.js></script> |
8 <script src=../media-controls.js></script> | 8 <script src=../media-controls.js></script> |
9 | 9 |
10 <style> | 10 <style> |
11 | 11 |
12 video::cue { color: purple; background-color: lime; } | 12 video::cue { |
| 13 color: purple; |
| 14 background-color: lime; |
| 15 /* FIXME: 'text-decoration' shorthand to be handled when available. |
| 16 * See https://chromiumcodereview.appspot.com/19516002 for details.
*/ |
| 17 text-decoration-line: underline; |
| 18 text-decoration-style: dashed; |
| 19 text-decoration-color: cyan; |
| 20 } |
13 | 21 |
14 </style> | 22 </style> |
15 | 23 |
16 <script> | 24 <script> |
17 | 25 |
18 function seeked() | 26 function seeked() |
19 { | 27 { |
20 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).color", "rgb(128, 0, 128)"); | 28 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).color", "rgb(128, 0, 128)"); |
21 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).backgroundColor", "rgb(0, 255, 0)"); | 29 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).backgroundColor", "rgb(0, 255, 0)"); |
| 30 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).textDecorationLine", "underline"); |
| 31 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).textDecorationStyle", "dashed"); |
| 32 testExpected("getComputedStyle(textTrackDisplayElement(video, 'cue')
).textDecorationColor", "rgb(0, 255, 255)"); |
22 endTest(); | 33 endTest(); |
23 } | 34 } |
24 | 35 |
25 function loaded() | 36 function loaded() |
26 { | 37 { |
27 consoleWrite("Test that style to all cues is applied correctly."); | 38 consoleWrite("Test that style to all cues is applied correctly."); |
28 findMediaElement(); | 39 findMediaElement(); |
29 video.src = findMediaFile('video', '../content/test'); | 40 video.src = findMediaFile('video', '../content/test'); |
30 waitForEvent('seeked', seeked); | 41 waitForEvent('seeked', seeked); |
31 waitForEvent('canplaythrough', function() { video.currentTime = .5;
}); | 42 waitForEvent('canplaythrough', function() { video.currentTime = .5;
}); |
32 } | 43 } |
33 | 44 |
34 </script> | 45 </script> |
35 </head> | 46 </head> |
36 <body onload="loaded()"> | 47 <body onload="loaded()"> |
37 <video controls > | 48 <video controls > |
38 <track src="captions-webvtt/styling.vtt" kind="captions" default> | 49 <track src="captions-webvtt/styling.vtt" kind="captions" default> |
39 </video> | 50 </video> |
40 </body> | 51 </body> |
41 </html> | 52 </html> |
OLD | NEW |