cue-style-invalidation.html | Explore in Territory

<!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(), 12);
        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>
chromium/third_party/blink/web_tests/media/track/cue-style-invalidation.html
