| <!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> |
