<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<style>
select {
display: block;
margin: 5px;
}
</style>
<script>
// We need to 'click' the select element by sending an actual event
// through internals, since the regular javascript click() method
// won't trigger the right events for this test.
function clickSelect(callback) {
if (!window.eventSender)
return;
var select = document.getElementById('select');
var selectRect = select.getBoundingClientRect();
openPicker(select)
.then(callback)
.catch(() => {
setTimeout(callback, 0);
});
}
// We'll get a message from the outer frame when it's done scrolling,
// so we know it's time to click on a select element.
window.onmessage = function() {
clickSelect(function () {
if (window.testRunner)
testRunner.notifyDone();
});
};
// This function just saves us from hard-coding 30 select elements
// (each with a few option elements) in the body. One of the
// select elements near the bottom is given an id so we can click
// on it later.
function populateDom() {
for (var x = 0; x < 30; x++) {
var select = document.createElement('select');
for (var y = 0; y < 4; ++y) {
var option = document.createElement('option');
option.innerText = y;
select.appendChild(option);
}
if (x == 23) {
select.id = 'select';
}
document.body.appendChild(select);
}
}
// Javascript execution starts here. This will populate the iframe
// with a bunch of select elements, then post a message to the
// outer iframe to tell it to scroll.
window.onload = function() {
populateDom();
parent.postMessage('', '*');
};
</script>
</head>
<body>
</body>