<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;
document.body.appendChild(mediaControls.element);

const buttonPositions = [
    [mediaControls.rewindButton, 27, 14, 16],
    [mediaControls.playPauseButton, 78, 9, 26],
    [mediaControls.forwardButton, 127, 14, 16],
    [mediaControls.airplayButton, 12, 18, 13],
    [mediaControls.pipButton, 44, 18, 16],
    [mediaControls.tracksButton, 79, 18, 13],
    [mediaControls.fullscreenButton, 112, 18, 16]
];

let button, x, y;
(function testButton(index)
{
    [button, x, y, height] = buttonPositions[index];
    debug("");
    debug(button.constructor.name);
    shouldBecomeEqualToString("getComputedStyle(button.element).top", `${y}px`, () => {
        shouldBeEqualToString("getComputedStyle(button.element).left", `${x}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>