<!DOCTYPE html>
<script src="../../../resources/js-test-pre.js"></script>
<body>
<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing placard has 'direction: rtl' set for RTL languages.");

const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);

media.addEventListener("error", event => {
    debug("Waiting for placard to appear");
    shouldBecomeEqual("!!shadowRoot.querySelector('.placard')", "true", () => {
        debug("");
        debug("Default layout direction is LTR");
        shouldBecomeEqualToString("getComputedStyle(shadowRoot.querySelector('.placard')).direction", "ltr", () => {
            debug("");
            debug("Setting layout direction to RTL");
            window.internals.setUserInterfaceLayoutDirection("RTL");
            shouldBecomeEqualToString("getComputedStyle(shadowRoot.querySelector('.placard')).direction", "rtl", finishJSTest);
        });
    });
});

media.src = "";

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>