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

description("Testing <code>MacOSInlineMediaControls</code> width change while the controls bar is hidden.");

window.jsTestIsAsync = true;

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

const buttons = mediaControls.leftContainer.children.concat(mediaControls.rightContainer.children);

let numberOfFrames = 0;
let expectedRightContainerX = 0;
scheduler.frameDidFire = function()
{
    if (buttons.some(button => button.width == 0))
        return;

    numberOfFrames++;

    switch (numberOfFrames) {
    case 1:
        mediaControls.bottomControlsBar.visible = false;
        debug("Making the controls bar invisible.");
        expectedRightContainerX = mediaControls.rightContainer.x;
        break;
    case 2:
        debug("");
        debug("Making the controls 100px wider");
        mediaControls.width += 100;
        break;
    case 3:
        mediaControls.bottomControlsBar.visible = true;
        debug("");
        debug("Making the controls bar visible again.");
        shouldBe("mediaControls.rightContainer.x", "expectedRightContainerX + 100");

        debug("");
        finishMediaControlsTest();
        break;
    }

};

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