third_party/WebKit/LayoutTests/fast/forms/select-clientheight-large-size.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <div id="output"></div>
   4 <script>
   5     description("Tests that select elements cap their size to the size attribute and to 4 when no size is specified.");
   6
   7     function getElemById(elemId) {
   8         return document.getElementById(elemId);
   9     }
  10
  11     function clientHeight(elemId) {
  12         return getElemById(elemId).clientHeight;
  13     }
  14
  15     function multipleOfElement(elemId, multiple) {
  16         return clientHeight(elemId) * multiple;
  17     }
  18
  19     function addSelect(id, numOptions)
  20     {
  21         var select = document.createElement("select2");
  22         var html = '<select multiple id="' + id + '">';
  23         for (var i = 0; i <= numOptions; i++)
  24             html += '<option value="' + i + '">' + i + '</option>';
  25         getElemById('output').innerHTML += html + '</select>';
  26     }
  27
  28     addSelect('select1', 10);
  29     addSelect('select2', 16);
  30
  31     shouldBe("clientHeight('select2')", "clientHeight('select1')");
  32     shouldBeTrue("getElemById('select2').setAttribute('size', '4'); clientHeight('select2') == clientHeight('select1')");
  33     shouldBeTrue("getElemById('select2').setAttribute('size', '5'); clientHeight('select2') > clientHeight('select1')");
  34     shouldBeCloseTo("getElemById('select2').setAttribute('size', '8'); clientHeight('select2')", multipleOfElement('select1', 2), 1);
  35     shouldBeCloseTo("getElemById('select2').setAttribute('size', '12'); clientHeight('select2')", multipleOfElement('select1', 3), 1);
  36     shouldBeCloseTo("getElemById('select2').setAttribute('size', '16'); clientHeight('select2')", multipleOfElement('select1', 4), 1);
  37 </script>