blob: d2af579820fdea3ca16a9cf761839bd5d9ee837d [file] [log] [blame]
<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<script type="text/javascript">
description("Testing that control bars and the mute button respect the user interface layout direction.");
window.jsTestIsAsync = true;
const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 250 });
mediaControls.element.style.position = "relative";
document.body.appendChild(mediaControls.element);
step1();
function step1()
{
debug("width = 600");
debug("muted = true");
debug("usesLTRUserInterfaceLayoutDirection = true");
mediaControls.usesLTRUserInterfaceLayoutDirection = true;
shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMuted", () => {
shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", step2);
});
});
}
function step2()
{
debug("");
debug("width = 600");
debug("muted = true");
debug("usesLTRUserInterfaceLayoutDirection = false");
mediaControls.usesLTRUserInterfaceLayoutDirection = false;
shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step3);
});
});
}
function step3()
{
debug("");
debug("width = 250");
debug("muted = true");
debug("usesLTRUserInterfaceLayoutDirection = false");
mediaControls.width = 250;
shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step4);
});
});
}
function step4()
{
debug("");
debug("width = 250");
debug("muted = false");
debug("usesLTRUserInterfaceLayoutDirection = false");
mediaControls.muteButton.muted = false;
shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume3RTL", () => {
shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step5);
});
});
}
function step5()
{
debug("");
debug("width = 250");
debug("muted = false");
debug("usesLTRUserInterfaceLayoutDirection = true");
mediaControls.usesLTRUserInterfaceLayoutDirection = true;
shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume3", () => {
shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", done);
});
});
}
function done()
{
debug("");
mediaControls.element.remove();
finishJSTest();
}
// debug("Mute button is enabled");
// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
// shouldBe("mediaControls.topRightControlsBar.parent", "mediaControls");
//
// debug("")
// debug("Mute button is disabled");
// mediaControls.muteButton.enabled = false;
// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
// shouldBeNull("mediaControls.topRightControlsBar.parent");
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>