<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 the mute button for inline media controls correctly displays in the bottom controls bar when there is enough space and switches to display in the top right controls bar when there isn't.");

const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 300 });

debug("width = 600");
shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.bottomControlsBar");
shouldBe("mediaControls.topRightControlsBar.parent", "null");

debug("")
debug("width = 250");
mediaControls.width = 250;
shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
shouldBe("mediaControls.topRightControlsBar.parent", "mediaControls");

debug("");

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