| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] --> |
| |
| <html> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <head> |
| <script src="../../../resources/ui-helper.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| select { |
| width: 100%; |
| height: 80px; |
| } |
| |
| #bottom { |
| margin-top: 1300px; |
| } |
| |
| #tapToFocus { |
| width: 100%; |
| height: 80px; |
| background: tomato; |
| border-radius: 20px; |
| color: white; |
| font-size: 2em; |
| text-align: center; |
| cursor: pointer; |
| } |
| </style> |
| <script> |
| jsTestIsAsync = true; |
| |
| async function tapAtLocationAndWaitForScrollingToEnd(x, y) |
| { |
| const uiScript = ` |
| let doneCount = 0; |
| function checkDone() { |
| if (++doneCount == 2) |
| uiController.uiScriptComplete(); |
| } |
| uiController.didEndZoomingCallback = checkDone; |
| uiController.singleTapAtPoint(${x}, ${y}, checkDone);`; |
| return new Promise(resolve => testRunner.runUIScript(uiScript, resolve)); |
| } |
| |
| async function run() |
| { |
| description("Verifies that focusing a select element after user interaction scrolls to reveal the select element. " |
| + "To manually test, focus the top select element and tap the red box to focus the bottom select element. The " |
| + "bottom select element should be scrolled into view."); |
| |
| if (!window.testRunner) |
| return; |
| |
| await UIHelper.activateAndWaitForInputSessionAt(160, 40); |
| await tapAtLocationAndWaitForScrollingToEnd(160, 120); |
| |
| shouldBe("document.activeElement", "document.getElementById('bottom')"); |
| shouldBeGreaterThanOrEqual("pageYOffset", "1000"); |
| |
| document.activeElement.blur(); |
| await UIHelper.waitForKeyboardToHide(); |
| tapToFocus.remove(); |
| finishJSTest(); |
| } |
| </script> |
| </head> |
| <body onload=run()> |
| <div> |
| <select id="top"><option selected>First</option><option>Second</option></select> |
| </div> |
| <div id="tapToFocus" onclick="bottom.focus()">Tap to focus the<br>bottom select</div> |
| <div id="description"></div> |
| <div id="console"></div> |
| <select id="bottom"> |
| <option selected>Third</option> |
| <option>Fourth</option> |
| </select> |
| </body> |
| </html> |
