blob: d29b02d0b113cdcdee71efe7a56c9ea9a412b584 [file] [log] [blame]
<!DOCTYPE html>
<title>Check that descendant style invalidation works with ::cue selectors.</title>
<script src="../media-file.js"></script>
<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 = findMediaFile("video", "../content/test");
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(), 10);
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>