select-clientheight-large-size.html

<!DOCTYPE html>
<script src="../../../resources/js-test.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;
    }

    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')");
    shouldBeCloseTo("getElemById('select2').setAttribute('size', '8'); clientHeight('select2')", multipleOfElement('select1', 2), 1);
    shouldBeCloseTo("getElemById('select2').setAttribute('size', '12'); clientHeight('select2')", multipleOfElement('select1', 3), 1);
    shouldBeCloseTo("getElemById('select2').setAttribute('size', '16'); clientHeight('select2')", multipleOfElement('select1', 4), 1);
</script>
chromium/third_party/blink/web_tests/fast/forms/select/select-clientheight-large-size.html
