src/third_party/WebKit/LayoutTests/fast/forms/select/menulist-appearance-basic.html

   1 <!DOCTYPE html>
   2 <body>
   3 <style>
   4 select {
   5     margin: 4px;
   6 }
   7 .wrapper {
   8     background: #dbb102;
   9     padding: 8px;
  10     display: inline-block;
  11 }
  12 .wrapper select {
  13     background: #dbb102;
  14     border: transparent;
  15 }
  16 </style>
  17 <script>
  18 if (window.testRunner)
  19     testRunner.setUseMockTheme(false);
  20 </script>
  21
  22 <!-- no style for reference -->
  23 <select><option>foo</option></select> <br>
  24
  25 <!-- padding -->
  26 <select style="padding-top: 8px;"><option>foo</option></select>
  27 <select style="padding-right: 6px;"><option>foo</option></select>
  28 <select style="padding-bottom: 8px;"><option>foo</option></select>
  29 <select style="padding-left: 6px;"><option>foo</option></select>
  30 <br>
  31
  32
  33 <!-- border -->
  34 <select style="border: 3px solid lime;"><option>foo</option></select>
  35 <select style="border-radius: 6px;"><option>foo</option></select> <br>
  36
  37 <!-- background -->
  38 <select style="background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);"><option>foo</option></select>
  39 <div class="wrapper"><select><option>bar</option></select></div>
  40 <br>
  41
  42 <!-- shadow -->
  43 <select style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"><option>foo</option></select> <br>
  44
  45 <!-- font-size -->
  46 <select style="font-size: 16px;"><option>foo</option></select>
  47 <select style="font-size: 20px;"><option>foo</option></select>
  48 <select style="font-size: 24px;"><option>foo</option></select> <br>
  49
  50 <!-- zoom -->
  51 <select style="zoom: 1.5;"><option>foo</option></select>
  52 <select style="zoom: 2;"><option>foo</option></select> <br>
  53
  54 <!-- multiple - on platforms that use menulist rendering for <select multiple> tags -->
  55 <select multiple="multiple" style="width: 200px; height: 25px;">
  56   <option>Item 1</option>
  57   <option>Item 2</option>
  58   <option>Item 3</option>
  59 </select>
  60 <br>
  61
  62 <select multiple="multiple" style="width: 200px; height: 25px;">
  63   <option>Item 1</option>
  64   <option selected="selected">Item 2</option>
  65   <option>Item 3</option>
  66 </select>
  67 <br>
  68
  69 <select multiple="multiple" style="width: 200px; height: 25px;">
  70   <option>Item 1</option>
  71   <option selected="selected">Item 2</option>
  72   <option selected="selected">Item 3</option>
  73 </select>
  74 <br>
  75
  76 <select multiple="multiple" style="width: 200px; height: 25px;">
  77   <option selected="selected">Item 0.1</option>
  78   <optgroup label="Group 1">
  79     <option>Item 1.1</option>
  80     <option>Item 1.2</option>
  81     <option>Item 1.3</option>
  82   </optgroup>
  83   <optgroup label="Group 2">
  84     <option>Item 2.1</option>
  85     <option>Item 2.2</option>
  86     <option selected="selected">Item 2.3</option>
  87   </optgroup>
  88   <optgroup label="Group 3">
  89     <option selected="selected">Item 3.1</option>
  90     <option>Item 3.2</option>
  91     <option selected="selected">Item 3.3</option>
  92   </optgroup>
  93   <optgroup label="Group 4">
  94     <option>Item 4.1</option>
  95     <option selected="selected">Item 4.2</option>
  96     <option>Item 4.3</option>
  97   </optgroup>
  98   <optgroup label="Group 5">
  99     <option selected="selected">Item 5.1</option>
 100     <option>Item 5.2</option>
 101     <option>Item 5.3</option>
 102   </optgroup>
 103   <option selected="selected">Item 0.2</option>
 104 </select>
 105 <br>
 106
 107 <select multiple="multiple" style="width: 200px; height: 25px;">
 108 <script type="text/javascript">
 109 for (var i = 0; i < 1234; ++i) {
 110     document.writeln("  <option selected='selected'>Item " + (i + 1) + "</option>");
 111 }
 112 </script>
 113 </select>
 114
 115 </body>