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

<html>
<head>
    <meta name="viewport" content="width=device-width">
    <style>
    </style>
    
    <script src="../../../../fast/forms/ios/resources/zooming-test-utils.js"></script>
    <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    var uiScriptHasCompleted = false;
    var oninputHasBeenHandled = false;

    function getTapOnSelectUIScript(x, y)
    {
        return `
            (function() {
                uiController.singleTapAtPoint(${x}, ${y}, function() {
                    uiController.uiScriptComplete('');
                });
            })();`
    }

    function getUIScriptForSelectRow()
    {
        return `
            (function() {
                uiController.selectFormAccessoryPickerRow(3);
            })();`
    }
    
    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('select')[0];
        var point = getPointInsideElement(targetElement, 10, 10);

        testRunner.runUIScript(getTapOnSelectUIScript(point.x, point.y), function() {
            testRunner.runUIScript(getUIScriptForSelectRow(), function() {
                uiScriptHasCompleted = true;
                checkDone();
            });
        });
    }

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

<p>Tests that a basic select element works</p>

<select oninput="handleValueChanged(this.value)">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

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

</body>
</html>