blob: 35279e2aa806f812918df070bd925c6750ada12b [file] [log] [blame]
<!DOCTYPE html>
<title>Test that the cue is not styled when video is in a shadow tree and style is in a document.</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(.red, .red2) { color:red }
video::cue(.green) { color:green }
</style>
<div id='host'>
</div>
<script>
async_test(function(t) {
var host = document.getElementById('host');
var shadowRoot = host.createShadowRoot();
shadowRoot.innerHTML = '<video controls ><track src="captions-webvtt/styling-lifetime.vtt" kind="captions" default></video>';
var video = shadowRoot.querySelector('video');
video.src = findMediaFile('video', '../content/test');
video.id = "testvideo";
video.onseeked = t.step_func_done(function() {
var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)");
cueNode = cueNode.nextElementSibling;
assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)");
cueNode = cueNode.nextElementSibling;
assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)");
});
video.currentTime = 0.6;
});
</script>