| 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 |