<!DOCTYPE html>
<html>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
        description("Tests that padding-bottom is respected in non-dropdown listbox'es. Once a listbox is scrolled to its end, clicking on the padding-bottom area should hit an item only after the listbox is scrolled upwards some steps.");
        window.jsTestIsAsync = true;

        var i = 0;
        var maxAttempts = 20;
        function runTest()
        {
            var scrollAmount = 0;
            var select = document.getElementById("sl");
            select.scrollTop = select.scrollHeight;
            var maxScrollOffset = select.scrollTop;

            var x = select.offsetLeft + (select.offsetLeft + select.offsetWidth) / 2;
            var y = select.offsetTop + select.offsetHeight - 15;

            for ( ; i < maxAttempts; i++) {
                 var el = document.elementFromPoint(x, y);
                 if (el instanceof HTMLOptionElement)
                     break;

                 scrollAmount += 10;
                 select.scrollTop = maxScrollOffset - scrollAmount;
            }

            shouldBeTrue("i > 5 && i < maxAttempts");
            finishJSTest();
        }
    </script>
    <body onload="runTest()">
        <select id="sl" multiple="multiple" style="padding-bottom: 100px; font-size: 15px;">
            <option>January (0)</option>
            <option>February (1)</option>
            <option>March (2)</option>
            <option>April (3)</option>
            <option>May (4)</option>
            <option>June (5) </option>
            <option>July (6)</option>
            <option>August (7)</option>
            <option>September (8)</option>
            <option>October (9)</option>
            <option>November (10)</option>
            <option>December (11)</option>
        </select>
    </body>
    <script src="../../resources/js-test-post.js"></script>
</html>
