track-css-property-allowlist.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/media/track/track-css-property-allowlist.html
