<!DOCTYPE html>
<html>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
        description("Tests that padding-top does not clip out listbox' items once it scrolled upwards.");
        window.jsTestIsAsync = true;

        var i = 0;
        var maxAttempts = 10;
        function runTest()
        {
            var scrollAmount = 0;
            for ( ; i < maxAttempts; i++) {
                 var select = document.getElementById("sl");
                 var x = select.offsetLeft + (select.offsetLeft + select.offsetWidth) / 2;
                 var y = select.offsetTop + 15;
                 var el = document.elementFromPoint(x, y);
                 if (el instanceof HTMLOptionElement)
                     break;
                 scrollAmount += 10;
                 select.scrollTop = scrollAmount;
            }
            shouldBeTrue("i > 0 && i < maxAttempts");
            finishJSTest();
        }
    </script>
    <body onload="runTest()">
        <select id="sl" multiple="multiple" style="padding: 50px; 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>
