| <!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.didEndFormControlInteractionCallback = function() { |
| 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> |
