<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width">
<head>
    <script src="../../../resources/js-test.js"></script>
    <script src="../../../resources/ui-helper.js"></script>
    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        select {
            width: 100%;
            height: 80px;
            display: block;
        }
    </style>
    <script>
        jsTestIsAsync = true;

        function selectOptionAtIndexAndWaitForKeyboardToHide(index) {
            return new Promise(resolve => {
                UIHelper.waitForKeyboardToHide().then(resolve);
                UIHelper.selectFormAccessoryPickerRow(index);
            });
        }

        async function runTest() {
            // First, tap on the top select and choose the second option. Changing the value of the select causes the
            // bottom select to be focused.
            await UIHelper.activateAndWaitForInputSessionAt(50, 40);
            output.innerHTML += "Choosing second option in top select...<br>";
            await selectOptionAtIndexAndWaitForKeyboardToHide(1);
            output.innerHTML += `Option two should be selected: ${two.selected}<br>`;

            // Now tap on the bottom select and choose the second option. Changing the value of this select causes the
            // select to blur, dismissing the input view.
            await UIHelper.activateAndWaitForInputSessionAt(50, 120);
            output.innerHTML += "Choosing second option in bottom select...<br>";
            await selectOptionAtIndexAndWaitForKeyboardToHide(1);
            output.innerHTML += `Option four should be selected: ${four.selected}<br>`;

            finishJSTest();
        }
    </script>
</head>
<body onload="runTest()">
<select id="top" onchange="document.getElementById('bottom').focus()">
    <option selected>One</option>
    <option id="two">Two</option>
</select>
<select id="bottom" onchange="this.blur()">
    <option selected>Three</option>
    <option id="four">Four</option>
</select>
<pre id="output"></pre>
</body>
</html>