<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;
        top: 0;
        left: 0;
        width: 720px;
        height: 240px;
    }

</style>
<video src="../../../content/test.mp4" autoplay controls></video>
<div id="host"></div>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing the <code>ScrubberSupport</code> behavior when dragging the scrubber.");

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

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

function runTest()
{
    shouldBecomeDifferent("mediaController.controls.timeControl.elapsedTimeLabel.element.getBoundingClientRect().width", "0", () => {
        const bounds = mediaController.controls.timeControl.scrubber.children[1].element.getBoundingClientRect();
        const minX = bounds.left + 12;
        const dragStartX = minX;
        const dragEndX = minX + bounds.width / 2;
        const centerY = bounds.top + bounds.height / 2;

        testRunner.runUIScript(`
            uiController.dragFromPointToPoint(${dragStartX}, ${centerY}, ${dragEndX}, ${centerY}, 0.15, function() {
                uiController.uiScriptComplete("Done");
            });`);

        shouldBecomeEqual("media.currentTime", "3.1872", () => {
            debug("");
            media.remove();
            container.remove();
            finishJSTest();
        });
    });
}

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