<!DOCTYPE html>
<script src="../../resources/js-test-pre.js"></script>
<div id="output"></div>
<script>
    description("Tests that select elements cap their size to the size attribute and to 4 when no size is specified.");

    function getElemById(elemId) {
        return document.getElementById(elemId);
    }

    function clientHeight(elemId) {
        return getElemById(elemId).clientHeight;
    }

    function multipleOfElement(elemId, multiple) {
        return clientHeight(elemId) * multiple + (multiple - 1);
    }

    function addSelect(id, numOptions)
    {
        var select = document.createElement("select2");
        var html = '<select multiple id="' + id + '">';
        for (var i = 0; i <= numOptions; i++)
            html += '<option value="' + i + '">' + i + '</option>';
        getElemById('output').innerHTML += html + '</select>';
    }
    
    addSelect('select1', 10);
    addSelect('select2', 16);

    shouldBe("clientHeight('select2')", "clientHeight('select1')");
    shouldBeTrue("getElemById('select2').setAttribute('size', '4'); clientHeight('select2') == clientHeight('select1')");
    shouldBeTrue("getElemById('select2').setAttribute('size', '5'); clientHeight('select2') > clientHeight('select1')");
    shouldBeTrue("getElemById('select2').setAttribute('size', '8'); clientHeight('select2') == multipleOfElement('select1', 2)");
    shouldBeTrue("getElemById('select2').setAttribute('size', '12'); clientHeight('select2') == multipleOfElement('select1', 3)");
    shouldBeTrue("getElemById('select2').setAttribute('size', '16'); clientHeight('select2') == multipleOfElement('select1', 4)");
</script>
<script src="../../resources/js-test-post.js"></script>