<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<style type="text/css" media="screen">
    video, #host {
        position: absolute; width: 320px; height: 240px;
    }
</style>
<video src="../../content/test.mp4" controls autoplay></video>
<div id="host"></div>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing the <code>ScrubberSupport</code> behavior by using the media API.");

const host = document.querySelector("div#host");
const media = document.querySelector("video");
const mediaController = createControls(host, media, null);

shouldBe("mediaController.controls.timeControl.scrubber.value", "0");

media.addEventListener("play", () => {
    media.pause();
    if (isNaN(media.duration))
        media.addEventListener("durationchange", runTest);
    else
        runTest();
});

function runTest()
{
    media.addEventListener("timeupdate", () => {
        shouldBecomeEqual("mediaController.controls.timeControl.scrubber.value", "0.5", () => {
            debug("");
            host.remove();
            media.remove();
            finishJSTest();
        });
    });
    media.currentTime = media.duration / 2;
}

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