OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Check that descendant style invalidation works with ::cue selectors.</tit
le> |
2 <script src="../media-file.js"></script> | 3 <script src="../media-file.js"></script> |
3 <!-- TODO(philipj): Convert test to testharness.js. crbug.com/588956 | |
4 (Please avoid writing new tests using video-test.js) --> | |
5 <script src="../video-test.js"></script> | |
6 <script src="../media-controls.js"></script> | 4 <script src="../media-controls.js"></script> |
| 5 <script src="../../resources/testharness.js"></script> |
| 6 <script src="../../resources/testharnessreport.js"></script> |
7 <style> | 7 <style> |
8 video::cue, | 8 video::cue, |
9 video::cue(c), | 9 video::cue(c), |
10 video::cue(i:past), | 10 video::cue(i:past), |
11 video::cue(.b:future) { background-color: red } | 11 video::cue(.b:future) { background-color: red } |
12 | 12 |
13 .cue video::cue, | 13 .cue video::cue, |
14 .cuefunc video::cue(c), | 14 .cuefunc video::cue(c), |
15 .past video::cue(i:past), | 15 .past video::cue(i:past), |
16 .future video::cue(.b:future) { background-color: green } | 16 .future video::cue(.b:future) { background-color: green } |
17 | |
18 // This selector would have triggered sibling subtree recalc if we didn't | |
19 // support descendant invalidation for ::cue/::cue(). | |
20 #ascendant + div { color: pink } | |
21 </style> | 17 </style> |
22 <script> | |
23 function seeked() { | |
24 var red = "rgb(255, 0, 0)"; | |
25 var green = "rgb(0, 128, 0)"; | |
26 | |
27 cueNode = textTrackDisplayElement(video, "cue"); | |
28 iNode = cueNode.firstElementChild; | |
29 cNode = iNode.nextSibling.nextSibling; | |
30 bNode = cNode.nextSibling.nextSibling; | |
31 | |
32 testExpected("getComputedStyle(cueNode).backgroundColor", red); | |
33 ascendant.offsetTop; | |
34 ascendant.classList.add("cue"); | |
35 if (window.internals) | |
36 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 8); | |
37 testExpected("getComputedStyle(cueNode).backgroundColor", green); | |
38 | |
39 testExpected("getComputedStyle(cNode).backgroundColor", red); | |
40 ascendant.offsetTop; | |
41 ascendant.classList.add("cuefunc"); | |
42 if (window.internals) | |
43 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 1); | |
44 testExpected("getComputedStyle(cNode).backgroundColor", green); | |
45 | |
46 testExpected("getComputedStyle(iNode).backgroundColor", red); | |
47 ascendant.offsetTop; | |
48 ascendant.classList.add("past"); | |
49 if (window.internals) | |
50 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 1); | |
51 testExpected("getComputedStyle(iNode).backgroundColor", green); | |
52 | |
53 testExpected("getComputedStyle(bNode).backgroundColor", red); | |
54 ascendant.offsetTop; | |
55 ascendant.classList.add("future"); | |
56 if (window.internals) | |
57 testExpected("internals.updateStyleAndReturnAffectedElementCount()", 1); | |
58 testExpected("getComputedStyle(bNode).backgroundColor", green); | |
59 | |
60 endTest(); | |
61 } | |
62 | |
63 window.onload = function() { | |
64 consoleWrite("Check that descendant style invalidation works with ::cue sele
ctors."); | |
65 findMediaElement(); | |
66 video.src = findMediaFile("video", "../content/test"); | |
67 waitForEvent("seeked", seeked); | |
68 waitForEvent("canplaythrough", function() { video.currentTime = 0.1; }); | |
69 }; | |
70 </script> | |
71 <div id="ascendant"> | 18 <div id="ascendant"> |
72 <video> | 19 <video> |
73 <track src="captions-webvtt/invalidation.vtt" kind="captions" default> | 20 <track src="captions-webvtt/invalidation.vtt" kind="captions" default> |
74 </video> | 21 </video> |
75 <div></div> | |
76 <div></div> | |
77 </div> | 22 </div> |
78 <div> | 23 <script> |
79 <div></div> | 24 async_test(function(t) { |
80 </div> | 25 var video = document.querySelector('video'); |
| 26 video.src = findMediaFile("video", "../content/test"); |
| 27 video.onseeked = t.step_func_done(function() { |
| 28 var red = "rgb(255, 0, 0)"; |
| 29 var green = "rgb(0, 128, 0)"; |
| 30 |
| 31 var cueNode = textTrackDisplayElement(video, "cue"); |
| 32 var iNode = cueNode.firstElementChild; |
| 33 var cNode = iNode.nextSibling.nextSibling; |
| 34 var bNode = cNode.nextSibling.nextSibling; |
| 35 |
| 36 assert_equals(getComputedStyle(cueNode).backgroundColor, red); |
| 37 ascendant.offsetTop; |
| 38 ascendant.classList.add("cue"); |
| 39 if (window.internals) |
| 40 assert_equals(internals.updateStyleAndReturnAffectedElementCount(),
8); |
| 41 assert_equals(getComputedStyle(cueNode).backgroundColor, green); |
| 42 |
| 43 assert_equals(getComputedStyle(cNode).backgroundColor, red); |
| 44 ascendant.offsetTop; |
| 45 ascendant.classList.add("cuefunc"); |
| 46 if (window.internals) |
| 47 assert_equals(internals.updateStyleAndReturnAffectedElementCount(),
1); |
| 48 assert_equals(getComputedStyle(cNode).backgroundColor, green); |
| 49 |
| 50 assert_equals(getComputedStyle(iNode).backgroundColor, red); |
| 51 ascendant.offsetTop; |
| 52 ascendant.classList.add("past"); |
| 53 if (window.internals) |
| 54 assert_equals(internals.updateStyleAndReturnAffectedElementCount(),
1); |
| 55 assert_equals(getComputedStyle(iNode).backgroundColor, green); |
| 56 |
| 57 assert_equals(getComputedStyle(bNode).backgroundColor, red); |
| 58 ascendant.offsetTop; |
| 59 ascendant.classList.add("future"); |
| 60 if (window.internals) |
| 61 assert_equals(internals.updateStyleAndReturnAffectedElementCount(),
1); |
| 62 assert_equals(getComputedStyle(bNode).backgroundColor, green); |
| 63 }); |
| 64 video.currentTime = 0.1; |
| 65 }); |
| 66 </script> |
OLD | NEW |