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 </body>