| <!DOCTYPE html> |
| <title>Check that descendant style invalidation works with ::cue selectors.</title> |
| <script src="../media-controls.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| video::cue, |
| video::cue(c), |
| video::cue(i:past), |
| video::cue(.b:future) { background-color: red } |
| |
| .cue video::cue, |
| .cuefunc video::cue(c), |
| .past video::cue(i:past), |
| .future video::cue(.b:future) { background-color: green } |
| </style> |
| <div id="ascendant"> |
| <video> |
| <track src="captions-webvtt/invalidation.vtt" kind="captions" default> |
| </video> |
| </div> |
| <script> |
| async_test(function(t) { |
| var video = document.querySelector('video'); |
| video.src = "../content/test.ogv"; |
| video.onseeked = t.step_func_done(function() { |
| var red = "rgb(255, 0, 0)"; |
| var green = "rgb(0, 128, 0)"; |
| |
| var cueNode = textTrackCueElementByIndex(video, 0).firstChild; |
| var iNode = cueNode.firstElementChild; |
| var cNode = iNode.nextSibling.nextSibling; |
| var bNode = cNode.nextSibling.nextSibling; |
| |
| assert_equals(getComputedStyle(cueNode).backgroundColor, red); |
| ascendant.offsetTop; |
| ascendant.classList.add("cue"); |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 11); |
| assert_equals(getComputedStyle(cueNode).backgroundColor, green); |
| |
| assert_equals(getComputedStyle(cNode).backgroundColor, red); |
| ascendant.offsetTop; |
| ascendant.classList.add("cuefunc"); |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
| assert_equals(getComputedStyle(cNode).backgroundColor, green); |
| |
| assert_equals(getComputedStyle(iNode).backgroundColor, red); |
| ascendant.offsetTop; |
| ascendant.classList.add("past"); |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
| assert_equals(getComputedStyle(iNode).backgroundColor, green); |
| |
| assert_equals(getComputedStyle(bNode).backgroundColor, red); |
| ascendant.offsetTop; |
| ascendant.classList.add("future"); |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
| assert_equals(getComputedStyle(bNode).backgroundColor, green); |
| }); |
| video.currentTime = 0.1; |
| }); |
| </script> |
