<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>
<style type="text/css" media="screen">

button {
    position: absolute;
    left: 0;
    top: 0;
}
    
</style>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing the <code>Button</code> class.");

const button = new Button({
    layoutDelegate: {
        layoutTraits: new MacOSLayoutTraits(LayoutTraits.Mode.Inline)
    } 
});
button.iconName = Icons.Pause;

const buttonElement = document.body.appendChild(button.element);

button.uiDelegate = {
    buttonWasPressed: function()
    {
        debug("Button was pressed.");
        debug("");
        finishJSTest();
    }
}

shouldBecomeEqual('button.image.element.style.webkitMaskImage.includes("macOS/Pause.svg")', "true", () => {
    debug("eventSender.mouseMoveTo(0, 0)");
    eventSender.mouseMoveTo(0, 0);
    debug("eventSender.mouseDown()");
    eventSender.mouseDown();

    debug("Wait 125ms for the transition to shrink the 'picture' element to happen.");
    setTimeout(() => {
        debug("eventSender.mouseUp()");
        eventSender.mouseUp();
    }, 125);
});

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