| OLD | NEW | 
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> | 
| 2 <title>Test that the cue is not styled when video is in a shadow tree and style 
    is in a document.</title> | 2 <title>Test that the cue is not styled when video is in a shadow tree and style 
    is in a document.</title> | 
| 3 <script src="../media-file.js"></script> | 3 <script src="../media-file.js"></script> | 
| 4 <script src="../media-controls.js"></script> | 4 <script src="../media-controls.js"></script> | 
| 5 <script src="../../resources/testharness.js"></script> | 5 <script src="../../resources/testharness.js"></script> | 
| 6 <script src="../../resources/testharnessreport.js"></script> | 6 <script src="../../resources/testharnessreport.js"></script> | 
| 7 <style> | 7 <style> | 
| 8 video::cue(.red, .red2) { color:red } | 8 video::cue(.red, .red2) { color:red } | 
| 9 video::cue(.green) { color:green } | 9 video::cue(.green) { color:green } | 
| 10 </style> | 10 </style> | 
| 11 <div id='host'> | 11 <div id='host'> | 
| 12 </div> | 12 </div> | 
| 13 <script> | 13 <script> | 
| 14 async_test(function(t) { | 14 async_test(function(t) { | 
| 15     var host = document.getElementById('host'); | 15     var host = document.getElementById('host'); | 
| 16     var shadowRoot = host.createShadowRoot(); | 16     var shadowRoot = host.createShadowRoot(); | 
| 17     shadowRoot.innerHTML = '<video controls ><track src="captions-webvtt/styling
    -lifetime.vtt" kind="captions" default></video>'; | 17     shadowRoot.innerHTML = '<video controls ><track src="captions-webvtt/styling
    -lifetime.vtt" kind="captions" default></video>'; | 
| 18     var video = shadowRoot.querySelector('video'); | 18     var video = shadowRoot.querySelector('video'); | 
| 19     video.src = findMediaFile('video', '../content/test'); | 19     video.src = findMediaFile('video', '../content/test'); | 
| 20     video.id = "testvideo"; | 20     video.id = "testvideo"; | 
| 21     video.onseeked = t.step_func_done(function() { | 21     video.onseeked = t.step_func_done(function() { | 
| 22         var cueNode = textTrackDisplayElement(video, 'cue').firstElementChild; | 22         var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstEleme
    ntChild; | 
| 23         assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)"); | 23         assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)"); | 
| 24         cueNode = cueNode.nextElementSibling; | 24         cueNode = cueNode.nextElementSibling; | 
| 25         assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)"); | 25         assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)"); | 
| 26         cueNode = cueNode.nextElementSibling; | 26         cueNode = cueNode.nextElementSibling; | 
| 27         assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)"); | 27         assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)"); | 
| 28     }); | 28     }); | 
| 29     video.currentTime = 0.6; | 29     video.currentTime = 0.6; | 
| 30 }); | 30 }); | 
| 31 </script> | 31 </script> | 
| OLD | NEW | 
|---|