<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
<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 {
    width: 100px;
    height: 100px;
}
    
</style>
<script type="text/javascript">

window.jsTestIsAsync = true;

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

const button = new Button;
document.body.appendChild(button.element);

debug("Default values");
shouldBeTrue("button.enabled");
shouldBeUndefined("button.uiDelegate");
shouldBeEqualToString("button.element.localName", "button");

let clickedButton, style;

debug("");
debug("Responds to click events");
button.uiDelegate = {

    buttonWasPressed: function(aButton)
    {
        clickedButton = aButton;
        shouldBeTrue("clickedButton === button");
    }

}

pressOnElement(button.element, () => {
    debug("");
    debug("Doesn't respond to click events when disabled");
    button.enabled = false;
    pressOnElement(button.element, () => {
        debug("");
        debug("Has all the appropriate styles")
        style = window.getComputedStyle(button.element);
        shouldBeEqualToString("style.position", "absolute");
        shouldBeEqualToString("style.borderWidth", "0px");
        shouldBeEqualToString("style.webkitAppearance", "none");

        button.element.remove();
        finishJSTest();
    });
});

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