<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->

<html>
<head>
    <meta name="viewport" content="width=device-width">
    <style>
        input[type="range"] {
            width: 300px;
        }
    </style>
    
    <script src="resources/zooming-test-utils.js"></script>
    <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    var uiScriptHasCompleted = false;
    var oninputHasBeenHandled = false;

    function getUIScript(startX, startY, endX, endY, duration)
    {
        return `
            (function() {
                uiController.dragFromPointToPoint(${startX}, ${startY}, ${endX}, ${endY}, ${duration}, function() {
                    uiController.uiScriptComplete();
                });
            })();`
    }

    function checkDone()
    {
        if (oninputHasBeenHandled && uiScriptHasCompleted)
            testRunner.notifyDone();
    }

    function handleValueChanged(value)
    {
        document.getElementById("console").textContent = "Successfully handled oninput, value is now \"" + value.toLowerCase() + "\"";
        oninputHasBeenHandled = true;
        checkDone();
    }
    
    function doTest()
    {
        if (!window.testRunner || !testRunner.runUIScript)
            return;

        var targetElement = document.getElementsByTagName('input')[0];
        var point = getPointInsideElement(targetElement, 10, 10);

        testRunner.runUIScript(getUIScript(point.x, point.y, point.x + 200, point.y, 0.05), function() {
            uiScriptHasCompleted = true;
            checkDone();
        });
    }

    window.addEventListener('load', doTest, false);
    </script>
</head>
<body>

<p>Tests that a basic range slider works</p>

<input type="range" min="100" max="600" value="100" oninput="handleValueChanged(this.value)">

<div id="console">Failed to handle oninput<div>

</body>
</html>