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