<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

description("Testing <code>ButtonsContainer</code> layout.");

const tenPtWideButton = new Button;
tenPtWideButton.width = 10;

const twentyPtWideButton = new Button;
twentyPtWideButton.width = 20;

const thirtyPtWideButton = new Button;
thirtyPtWideButton.width = 30;

// Should be disregarded by the container.
const disabledButton = new Button;
disabledButton.width = 15;
disabledButton.enabled = false;

// Should be disregarded by the container.
const droppedButton = new Button;
droppedButton.width = 25;
droppedButton.dropped = true;

const container = new ButtonsContainer({
    buttonMargin: 10,
    leftMargin: 20,
    rightMargin: 20,
    children: [tenPtWideButton, disabledButton, twentyPtWideButton, droppedButton, thirtyPtWideButton]
});

shouldBe("container.children.length", "5");
shouldBeTrue("tenPtWideButton.visible");
shouldBeFalse("disabledButton.visible");
shouldBeTrue("twentyPtWideButton.visible");
shouldBeFalse("droppedButton.visible");
shouldBeTrue("thirtyPtWideButton.visible");
shouldBe("tenPtWideButton.x", "20");
shouldBe("twentyPtWideButton.x", "40");
shouldBe("thirtyPtWideButton.x", "70");
shouldBe("container.width", "120");

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