<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>
<script type="text/javascript">

window.jsTestIsAsync = true;

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

const layoutDelegate = { layoutTraits: new MacOSLayoutTraits(LayoutTraits.Mode.Inline) };

const button = new Button({ layoutDelegate });

debug("");
debug("There should be no iconName by default");
shouldBeEqualToString("button.iconName", "");

debug("");
debug("Setting an iconName with invalid layout traits should throw");
layoutDelegate.layoutTraits = null;
shouldThrow(function() { button.iconName = Icons.Pause });
shouldBeEqualToString("button.iconName", "");

debug("");
debug("Setting macOS inline layout traits and setting play icon");
layoutDelegate.layoutTraits = new MacOSLayoutTraits(LayoutTraits.Mode.Inline);
button.iconName = Icons.Pause;

shouldBecomeEqual('button.image.element.style.webkitMaskImage.includes("macOS/Pause.svg")', "true", () => {
    shouldBeEqualToString("button.element.style.width", "11px");
    shouldBeEqualToString("button.element.style.height", "13px");
    shouldBeEqualToString("button.image.element.style.width", "11px");
    shouldBeEqualToString("button.image.element.style.height", "13px");
    shouldBeEqualToString("button.element.getAttribute('aria-label')", `${Icons.Pause.label}`);
    debug("");
    debug("Setting start icon");
    button.iconName = Icons.Rewind;

    shouldBecomeEqual('button.image.element.style.webkitMaskImage.includes("macOS/Rewind.svg")', "true", () => {
        shouldBeEqualToString("button.element.style.width", "24px");
        shouldBeEqualToString("button.element.style.height", "16px");
        shouldBeEqualToString("button.image.element.style.width", "24px");
        shouldBeEqualToString("button.image.element.style.height", "16px");
        shouldBeEqualToString("button.element.getAttribute('aria-label')", `${Icons.Rewind.label}`);

        finishJSTest();
    });
});

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