<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> and dropping controls.");

window.jsTestIsAsync = true;

const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
mediaControls.shouldUseSingleBarLayout = true;
mediaControls.maximumRightContainerButtonCountOverride = 100; // A finite value larger than anything likely.

// Trigger a layout so that `maximumRightContainerButtonCountOverride` takes effect.
mediaControls.needsLayout = true;
scheduler.flushScheduledLayoutCallbacks();

const droppableControls = [
    mediaControls.fullscreenButton,
    mediaControls.airplayButton,
    mediaControls.muteButton,
    mediaControls.skipBackButton,
    mediaControls.skipForwardButton,
    mediaControls.pipButton,
    mediaControls.tracksButton,
];

function ready()
{
    return droppableControls.concat(mediaControls.playPauseButton).every(button => button.width > 0);
}

shouldBecomeEqual("ready()", "true", () => {
    debug("");
    while (droppableControls.length) {
        for (let i = droppableControls.length - 1; i >= 0; --i) {
            if (!droppableControls[i].visible) {
                debug(`${droppableControls[i].constructor.name} was dropped at ${mediaControls.width + 1}.`);
                droppableControls.splice(i, 1);
            }
        }

        mediaControls.width--;
    }
    debug("");
    finishJSTest();
});

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