| <!DOCTYPE html> |
| <title>Test that ::cue pseudo-element properties are applied to WebVTT node objects only.</title> |
| <script src="../media-controls.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| ::cue { word-spacing: 100px; } |
| ::cue(c) { padding-left: 10px; color: red; } |
| .cue { |
| display: inline; |
| background-color: green; |
| } |
| </style> |
| <video> |
| <track src="captions-webvtt/allowlist.vtt" kind="captions" default> |
| </video> |
| <div class="cue"></div> |
| <script> |
| async_test(function(t) { |
| var video = document.querySelector("video"); |
| video.src = "../content/test.ogv"; |
| |
| video.onseeked = t.step_func_done(function() { |
| var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild; |
| var cueStyle = getComputedStyle(cueNode); |
| assert_equals(cueStyle.color, "rgb(255, 0, 0)"); |
| assert_equals(cueStyle.padding, "0px"); |
| assert_equals(cueStyle.wordSpacing, "0px"); |
| |
| cueNode = cueNode.nextElementSibling; |
| cueStyle = getComputedStyle(cueNode); |
| assert_equals(cueStyle.color, "rgb(255, 0, 0)"); |
| assert_equals(cueStyle.padding, "0px"); |
| assert_equals(cueStyle.wordSpacing, "0px"); |
| |
| cueNode = cueNode.nextElementSibling; |
| cueStyle = getComputedStyle(cueNode); |
| assert_equals(cueStyle.color, "rgb(255, 0, 0)"); |
| assert_equals(cueStyle.padding, "0px"); |
| assert_equals(cueStyle.wordSpacing, "0px"); |
| |
| // Test that filtering doesn't apply to elements with class "cue" outside WebVTT scope. |
| cueNode = document.getElementsByClassName("cue")[0]; |
| assert_equals(getComputedStyle(cueNode).display, "inline"); |
| }); |
| |
| video.currentTime = 0.1; |
| }); |
| |
| </script> |
