| <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> |
