blob: bbc8e33f1ba2e2b3887c04a2103ebe1eb068231f [file] [log] [blame]
<!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>