<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

description("Testing that control bars and the mute button respect the user interface layout direction.");

window.jsTestIsAsync = true;

const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 250 });

mediaControls.element.style.position = "relative";
document.body.appendChild(mediaControls.element);

step1();

function step1()
{
    debug("width = 600");
    debug("muted = true");
    debug("usesLTRUserInterfaceLayoutDirection = true");
    mediaControls.usesLTRUserInterfaceLayoutDirection = true;
    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMuted", () => {
        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", step2);
        });
    });
}

function step2()
{
    debug("");
    debug("width = 600");
    debug("muted = true");
    debug("usesLTRUserInterfaceLayoutDirection = false");
    mediaControls.usesLTRUserInterfaceLayoutDirection = false;
    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step3);
        });
    });
}

function step3()
{
    debug("");
    debug("width = 250");
    debug("muted = true");
    debug("usesLTRUserInterfaceLayoutDirection = false");
    mediaControls.width = 250;
    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step4);
        });
    });
}

function step4()
{
    debug("");
    debug("width = 250");
    debug("muted = false");
    debug("usesLTRUserInterfaceLayoutDirection = false");
    mediaControls.muteButton.muted = false;
    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume3RTL", () => {
        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step5);
        });
    });
}

function step5()
{
    debug("");
    debug("width = 250");
    debug("muted = false");
    debug("usesLTRUserInterfaceLayoutDirection = true");
    mediaControls.usesLTRUserInterfaceLayoutDirection = true;
    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume3", () => {
        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", done);
        });
    });
}

function done()
{
    debug("");
    mediaControls.element.remove();
    finishJSTest();
}

// debug("Mute button is enabled");
// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
// shouldBe("mediaControls.topRightControlsBar.parent", "mediaControls");
//
// debug("")
// debug("Mute button is disabled");
// mediaControls.muteButton.enabled = false;
// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
// shouldBeNull("mediaControls.topRightControlsBar.parent");

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