LayoutTests/fast/html/select-dropdown-consistent-background-color.html

   1 <html>
   2 <script>
   3 function $(id) {
   4     return document.getElementById(id);
   5 }
   6
   7 function testGetComputedStyle(el) {
   8     return el.ownerDocument.defaultView.getComputedStyle(el);
   9 }
  10
  11 function test() {
  12     var default_op = $('default-select').options[0];
  13     var size0_op = $('size0-select').options[0];
  14     var size1_op = $('size1-select').options[0];
  15
  16     var default_color = testGetComputedStyle(default_op)['background-color'];
  17     var size0_color = testGetComputedStyle(size0_op)['background-color'];
  18     var size1_color = testGetComputedStyle(size1_op)['background-color'];
  19
  20     $('result').textContent =
  21         (default_color == size0_color && default_color == size1_color) ? "PASS"
  22                                                                        : "FAIL";
  23     if (window.layoutTestController)
  24         layoutTestController.dumpAsText();
  25 }
  26 </script>
  27 <body onload='test();'>
  28 This test verifies that the dropdown background colors of &lt;select&gt; and &lt;select size="0"|"1"&gt; are consistent. You should see PASS below if test passes. Otherwise, FAIL shows up.
  29 <div id='result'>Oops</div>
  30
  31 Default:
  32 <select id='default-select'>
  33     <option>Item 1</option>
  34     <option>Item 2</option>
  35 </select>
  36
  37 Size=0:
  38 <select size="0" id='size0-select'>
  39     <option>Item 1</option>
  40     <option>Item 2</option>
  41 </select>
  42
  43 Size=1:
  44 <select size="1" id='size1-select'>
  45     <option>Item 1</option>
  46     <option>Item 2</option>
  47 </select>
  48
  49 <br>
  50 Note: Two items are used so that you could manually see the difference. The test logic only needs the first item to run.
  51
  52 </body>
  53 </html>