<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

description("Testing an <code>Button</code> has a scale transform when pressed.");

window.jsTestIsAsync = true;

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

let x, y;

button.image.element.addEventListener("transitionend", event => {
    shouldBeEqualToString("window.getComputedStyle(button.image.element).transform", "matrix(0.89, 0, 0, 0.89, 0, 0)");
    if ("createTouch" in document) {
        testRunner.runUIScript(`
            uiController.liftUpAtPoint(${x}, ${y}, 1, function() {
                uiController.uiScriptComplete("Done");
            })`, finishJSTest);
    } else {
        eventSender.mouseUp();
        finishJSTest();
    }
});

scheduler.frameDidFire = function()
{
    const bounds = button.element.getBoundingClientRect();
    if (bounds.height === 0)
        return;

    scheduler.frameDidFire = null;

    if ("testRunner" in window) {
        x = bounds.left + 1;
        y = bounds.top + 1;
        if ("createTouch" in document) {
            testRunner.runUIScript(`
                uiController.touchDownAtPoint(${x}, ${y}, 1, function() {
                    uiController.uiScriptComplete("Done");
                })`);
        } else {
            eventSender.mouseMoveTo(x, y);
            eventSender.mouseDown();
        }
    } else
        debug("This test is designed to run in DRT.");
}

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