<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 the <code>TimeControl</code> class.");

const timeControl = new TimeControl({ layoutTraits: new MacOSLayoutTraits(LayoutTraits.Mode.Inline) });
document.body.appendChild(timeControl.element);

shouldBeEqualToString("timeControl.element.localName", "div");
shouldBeEqualToString("timeControl.element.className", "time-control");

debug("");
shouldBeType("timeControl.elapsedTimeLabel", "TimeLabel");
shouldBeType("timeControl.scrubber", "Slider");
shouldBeType("timeControl.durationTimeLabel", "TimeLabel");
shouldBeType("timeControl.remainingTimeLabel", "TimeLabel");

debug("");
debug("timeControl.width = 500;");
timeControl.width = 500;
scheduler.flushScheduledLayoutCallbacks();
shouldBe("timeControl.children.length", "3");
shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
shouldBe("timeControl.children[1]", "timeControl.scrubber");
shouldBe("timeControl.children[2]", "timeControl.durationTimeLabel");
shouldBe("timeControl.elapsedTimeLabel.x", "0");
shouldBe("timeControl.elapsedTimeLabel.visible", "true");
shouldBe("timeControl.scrubber.x", "32");
shouldBe("timeControl.scrubber.width", "436");
shouldBe("timeControl.durationTimeLabel.x", "473");

debug("");
debug("timeControl.width = 100;");
timeControl.width = 100;
scheduler.flushScheduledLayoutCallbacks();
shouldBe("timeControl.children.length", "3");
shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
shouldBe("timeControl.children[1]", "timeControl.scrubber");
shouldBe("timeControl.children[2]", "timeControl.remainingTimeLabel");
shouldBe("timeControl.elapsedTimeLabel.visible", "false");
shouldBe("timeControl.scrubber.x", "0");
shouldBe("timeControl.scrubber.width", "62");
shouldBe("timeControl.remainingTimeLabel.x", "67");

debug("");
debug("timeControl.width = 200;");
timeControl.width = 200;
scheduler.flushScheduledLayoutCallbacks();
shouldBe("timeControl.children.length", "3");
shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
shouldBe("timeControl.children[1]", "timeControl.scrubber");
shouldBe("timeControl.children[2]", "timeControl.durationTimeLabel");
shouldBe("timeControl.elapsedTimeLabel.x", "0");
shouldBe("timeControl.elapsedTimeLabel.visible", "true");
shouldBe("timeControl.scrubber.x", "32");
shouldBe("timeControl.scrubber.width", "136");
shouldBe("timeControl.durationTimeLabel.x", "173");

debug("");
debug("timeControl.durationTimeLabel.element.click();");
timeControl.durationTimeLabel.element.click()
scheduler.flushScheduledLayoutCallbacks();
shouldBe("timeControl.children.length", "3");
shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
shouldBe("timeControl.children[1]", "timeControl.scrubber");
shouldBe("timeControl.children[2]", "timeControl.remainingTimeLabel");
shouldBe("timeControl.elapsedTimeLabel.x", "0");
shouldBe("timeControl.elapsedTimeLabel.visible", "true");
shouldBe("timeControl.scrubber.x", "32");
shouldBe("timeControl.scrubber.width", "130");
shouldBe("timeControl.remainingTimeLabel.x", "167");

debug("");
debug("timeControl.remainingTimeLabel.element.click();");
timeControl.remainingTimeLabel.element.click();
scheduler.flushScheduledLayoutCallbacks();
shouldBe("timeControl.children.length", "3");
shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
shouldBe("timeControl.children[1]", "timeControl.scrubber");
shouldBe("timeControl.children[2]", "timeControl.durationTimeLabel");
shouldBe("timeControl.elapsedTimeLabel.x", "0");
shouldBe("timeControl.elapsedTimeLabel.visible", "true");
shouldBe("timeControl.scrubber.x", "32");
shouldBe("timeControl.scrubber.width", "136");
shouldBe("timeControl.durationTimeLabel.x", "173");

debug("");

timeControl.element.remove();

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