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

window.jsTestIsAsync = true;

const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
document.body.appendChild(mediaControls.element);

let volumeSliderContainerStyle, volumeSliderStyle;

shouldBecomeEqual("mediaControls.volumeSlider.parent.element.parentNode", "mediaControls.element", () => {
    volumeSliderContainerStyle = window.getComputedStyle(mediaControls.volumeSlider.parent.element);
    shouldBeEqualToString("volumeSliderContainerStyle.position", "absolute");
    shouldBeEqualToString("volumeSliderContainerStyle.left", "566px");
    shouldBeEqualToString("volumeSliderContainerStyle.top", "226px");
    shouldBeEqualToString("volumeSliderContainerStyle.width", "94px");
    shouldBeEqualToString("volumeSliderContainerStyle.height", "31px");
    shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, -30, -26.000000000000004)");

    volumeSliderStyle = window.getComputedStyle(mediaControls.volumeSlider.element);
    shouldBeEqualToString("volumeSliderStyle.marginLeft", "6px");
    shouldBeEqualToString("volumeSliderStyle.width", "60px");
    shouldBeEqualToString("volumeSliderStyle.height", "16px");

    mediaControls.element.remove();

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

// Simulate the mouse entering the volume button.
window.requestAnimationFrame(() => mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseenter")));

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