chromium/third_party/blink/web_tests/media/track/css-cue-for-video-in-shadow-2.html

<!DOCTYPE html>
<title>Test that the cue is styled when video and style is in the same shadow tree.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id='host'>
</div>
<script>
async_test(function(t) {
    var host = document.getElementById('host');
    var shadowRoot = host.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = '<style>video::cue(.red, .red2) { color:red } video::cue(.green) { color:green }</style>'
        + '<video controls ><track src="captions-webvtt/styling-lifetime.vtt" kind="captions" default></video>';
    var video = shadowRoot.querySelector('video');
    video.src = '../content/test.ogv';
    video.id = "testvideo";
    video.onseeked = t.step_func_done(function() {
        var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, "rgb(255, 0, 0)");
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, "rgb(0, 128, 0)");
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, "rgb(255, 0, 0)");
    });
    video.currentTime = 0.6;
});
</script>