<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 the <code>MacOSFullscreenMediaControls</code> computed styles.");

window.jsTestIsAsync = true;

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

document.body.appendChild(mediaControls.element);

const buttonPositions = [
    //                              left top height
    [mediaControls.rewindButton,      27, 14,   16],
    [mediaControls.playPauseButton,   78,  9,   26],
    [mediaControls.forwardButton,    127, 14,   16],
    [mediaControls.airplayButton,     12, 18,   16],
    [mediaControls.pipButton,         55, 18,   16],
    [mediaControls.tracksButton,      98, 18,   16],
    [mediaControls.fullscreenButton, 139, 18,   16],
];

let button;
(function testButton(index)
{
    let left, top, height;
    [button, left, top, height] = buttonPositions[index];
    debug("");
    debug(button.constructor.name);
    shouldBecomeEqualToString("getComputedStyle(button.element).top", `${top}px`, () => {
        shouldBeEqualToString("getComputedStyle(button.element).left", `${left}px`);
        shouldBeEqualToString("getComputedStyle(button.element).height", `${height}px`);
        if (index === buttonPositions.length - 1) {
            mediaControls.element.remove();
            finishJSTest();
        } else
            testButton(index + 1);
    });
})(0);

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