OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <title>Test that ::cue pseudo-element properties are applied to WebVTT node obje
cts only.</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 <style> |
| 8 ::cue { word-spacing: 100px; } |
| 9 ::cue(c) { padding-left: 10px; color: red; } |
| 10 .cue { |
| 11 display: inline; |
| 12 background-color: green; |
| 13 } |
| 14 </style> |
| 15 <video> |
| 16 <track src="captions-webvtt/whitelist.vtt" kind="captions" default> |
| 17 </video> |
| 18 <div class="cue"></div> |
| 19 <script> |
| 20 async_test(function(t) { |
| 21 var video = document.querySelector("video"); |
| 22 video.src = findMediaFile("video", "../content/test"); |
5 | 23 |
6 <script src=../media-file.js></script> | 24 video.onseeked = t.step_func_done(function() { |
7 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 | 25 var cueNode = textTrackDisplayElement(video, "cue").firstElementChild; |
8 (Please avoid writing new tests using video-test.js) --> | 26 var cueStyle = getComputedStyle(cueNode); |
9 <script src=../video-test.js></script> | 27 assert_equals(cueStyle.color, "rgb(255, 0, 0)"); |
10 <script src=../media-controls.js></script> | 28 assert_equals(cueStyle.padding, "0px"); |
| 29 assert_equals(cueStyle.wordSpacing, "0px"); |
| 30 |
| 31 cueNode = cueNode.nextElementSibling; |
| 32 cueStyle = getComputedStyle(cueNode); |
| 33 assert_equals(cueStyle.color, "rgb(255, 0, 0)"); |
| 34 assert_equals(cueStyle.padding, "0px"); |
| 35 assert_equals(cueStyle.wordSpacing, "0px"); |
| 36 |
| 37 cueNode = cueNode.nextElementSibling; |
| 38 cueStyle = getComputedStyle(cueNode); |
| 39 assert_equals(cueStyle.color, "rgb(255, 0, 0)"); |
| 40 assert_equals(cueStyle.padding, "0px"); |
| 41 assert_equals(cueStyle.wordSpacing, "0px"); |
11 | 42 |
12 <style> | 43 // Test that filtering doesn't apply to elements with class "cue" outsid
e WebVTT scope. |
13 ::cue {word-spacing: 100px;} | 44 cueNode = document.getElementsByClassName("cue")[0]; |
14 ::cue(c) {padding-left: 10px; color: red;} | 45 assert_equals(getComputedStyle(cueNode).display, "inline"); |
15 .cue { | 46 }); |
16 display: inline; | |
17 background-color: green; | |
18 } | |
19 </style> | |
20 | 47 |
21 <script> | 48 video.currentTime = 0.1; |
| 49 }); |
22 | 50 |
23 var cueNode; | 51 </script> |
24 | |
25 function seeked() | |
26 { | |
27 if (testEnded) | |
28 return; | |
29 | |
30 consoleWrite("<br>"); | |
31 consoleWrite("Test that only allowed for the ::cue pseudo-element pr
operties are applied to WebVTT node objects."); | |
32 | |
33 cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; | |
34 testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)"); | |
35 testExpected("getComputedStyle(cueNode).padding", "0px"); | |
36 testExpected("getComputedStyle(cueNode).wordSpacing", "0px"); | |
37 cueNode = cueNode.nextElementSibling; | |
38 testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)"); | |
39 testExpected("getComputedStyle(cueNode).padding", "0px"); | |
40 testExpected("getComputedStyle(cueNode).wordSpacing", "0px"); | |
41 cueNode = cueNode.nextElementSibling; | |
42 testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)"); | |
43 testExpected("getComputedStyle(cueNode).padding", "0px"); | |
44 testExpected("getComputedStyle(cueNode).wordSpacing", "0px"); | |
45 | |
46 consoleWrite("<br>Test that filtering doesn't apply to elements whic
h class equals 'cue' outside WebVTT scope."); | |
47 cueNode = document.getElementsByClassName("cue")[0]; | |
48 testExpected("getComputedStyle(cueNode).display", "inline"); | |
49 endTest(); | |
50 } | |
51 | |
52 function loaded() | |
53 { | |
54 findMediaElement(); | |
55 video.src = findMediaFile('video', '../content/test'); | |
56 video.id = "testvideo"; | |
57 waitForEvent('seeked', seeked); | |
58 waitForEvent('canplaythrough', function() { video.currentTime = 0.1;
}); | |
59 } | |
60 | |
61 </script> | |
62 </head> | |
63 <body onload="loaded()"> | |
64 <video controls > | |
65 <track src="captions-webvtt/whitelist.vtt" kind="captions" default> | |
66 </video> | |
67 <div><div class="cue">This should display inline</div></div> | |
68 </body> | |
69 </html> | |
OLD | NEW |