blob: 824af516bb5587155ce2cb5066be76a32e641193 [file] [log] [blame]
<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 = {};
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");
shouldThrow(function() { button.iconName = Icons.Pause });
shouldBeEqualToString("button.iconName", "");
debug("");
debug("Setting macOS inline layout traits and setting play icon");
layoutDelegate.layoutTraits = LayoutTraits.macOS;
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>