| <!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> |
