<!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, row)
        {
            return `
                (function() {
                    uiController.didStartFormControlInteractionCallback = function() {
                        uiController.selectFormAccessoryPickerRow(${row});
                        uiController.uiScriptComplete();
                    };

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

        var firstButtonIsClicked = false;
        var finalButtonIsClicked = false;
        var firstButtonTimeoutID;
        var finalButtonTimeoutID;
        
        function firstButtonClicked()
        {
            clearTimeout(firstButtonTimeoutID);
            if (!firstButtonIsClicked) {
                firstButtonIsClicked = true;
                
                document.getElementById('nextStep').textContent = 'PASS: hit testing found #nextButton after first select interaction';
                var selectElement = document.getElementsByTagName('select')[0];
                var point = getPointInsideElement(selectElement, 10, 10);
                testRunner.runUIScript(getTapOnSelectUIScript(point.x, point.y, 5), function() {
                    document.getElementById('select-value2').textContent = selectElement.value;
                        tryTapOnFinalButton();
                });
            }
        }
    
        function finalButtonClicked()
        {
            clearTimeout(finalButtonTimeoutID);
            if (!finalButtonIsClicked) {
                finalButtonIsClicked = true;
                document.getElementById('result').textContent = 'PASS: hit testing found #finalTarget after select interaction';
                if (window.testRunner)
                    testRunner.notifyDone();
            }
        }

        async function tryTapOnFirstButton()
        {
            var firstPoint = getPointInsideElement(document.getElementById('firstTarget'), 10, 10);
            await tapAtPoint(firstPoint.x, firstPoint.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 (!firstButtonIsClicked)
                firstButtonTimeoutID = window.setTimeout(tryTapOnFirstButton, 100);
        }
    
        async function tryTapOnFinalButton()
        {
            var finalPoint = getPointInsideElement(document.getElementById('finalTarget'), 10, 10);
            await tapAtPoint(finalPoint.x, finalPoint.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 (!finalButtonIsClicked)
                finalButtonTimeoutID = window.setTimeout(tryTapOnFinalButton, 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, 2), function() {
                    document.getElementById('select-value').textContent = selectElement.value;
                    tryTapOnFirstButton();
                });
            });
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
    <p>This is the top</p>
    <div id="container">
        <button id="firstTarget" onclick="firstButtonClicked()">First Click</button>
        <button id="finalTarget" onclick="finalButtonClicked()">Final Click</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>
        <span id="select-value2">2nd Value goes here</span>
        <div id="nextStep">FAIL: should have hit-tested and found #target element</div>
        <div id="result">FAIL: should have hit-tested and found #target element</div>
    </div>
    
</div>
</body>
</html>