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

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        body {
            height: 1500px;
        }
        #container {
            position: fixed;
            top: 10px;
            left: 10px;
            bottom: 30px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            box-sizing: border-box;
            border: 5px solid black;
        }
        
        select {
            display: block;
            margin: 500px 200px 20px 20px;
        }
        
        button {
            display: block;
        }
        
    </style>
    <script src="../../../../fast/forms/ios/resources/zooming-test-utils.js"></script>
    <script src="../../../../resources/basic-gestures.js"></script>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        function getScrollDownUIScript(x, y)
        {
            return `
                (function() {
                    uiController.didEndScrollingCallback = function() {
                        uiController.uiScriptComplete();
                    };

                    uiController.scrollToOffset(${x}, ${y});
                })();`
        }

        function getTapOnSelectUIScript(x, y)
        {
            return `
                (function() {
                    uiController.didStartFormControlInteractionCallback = function() {
                        uiController.selectFormAccessoryPickerRow(5);
                        uiController.uiScriptComplete();
                    };

                    uiController.singleTapAtPoint(${x}, ${y}, function() {
                    });
                })();`
        }

        var clicked = false;
        var timeoutID;
        function buttonClicked()
        {
            window.clearTimeout(timeoutID);
            if (!clicked) {
                clicked = true;
                document.getElementById('result').textContent = 'PASS: hit testing found #target after select interaction';
                if (window.testRunner)
                    testRunner.notifyDone();
            }
        }

        async function tryTapOnButton()
        {
            var point = getPointInsideElement(document.getElementById('target'), 10, 10);
            await tapAtPoint(point.x, point.y);

            // We have to keep retrying, because the dimming view behind the popover animates out,
            // and we currently have no callback when that animation completes.
            if (!clicked)
                timeoutID = window.setTimeout(tryTapOnButton, 100);
        }

        function doTest()
        {
            if (!window.testRunner)
                return;
            testRunner.waitUntilDone();
            testRunner.dumpAsText();

            testRunner.runUIScript(getScrollDownUIScript(0, 500), function() {
                var selectElement = document.getElementsByTagName('select')[0];
                var point = getPointInsideElement(selectElement, 10, 10);
                testRunner.runUIScript(getTapOnSelectUIScript(point.x, point.y), function() {
                    document.getElementById('select-value').textContent = selectElement.value;
                    tryTapOnButton();
                });
            });
        }
        
        window.addEventListener('load', doTest, false);
        
    </script>
</head>
<body>
    <p>This is the top</p>
    <div id="container">
        <button id="target" onclick="buttonClicked()">Click Me</button>
        <select>
            <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>
        </select>
        <span id="select-value">Value goes here</span>
        <div id="result">FAIL: should have hit-tested and found #target element</div>
    </div>
    
</div>
</body>
</html>