blob: 3f12558f14f392aa3ef1e9ca639ce8a9bae0514e [file] [log] [blame]
<!DOCTYPE html>
<title>Test that the cue is styled when video and style is in the same shadow tree.</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>
<div id='host'>
</div>
<script>
async_test(function(t) {
var host = document.getElementById('host');
var shadowRoot = host.createShadowRoot();
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 = 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, 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>