third_party/WebKit/LayoutTests/fast/forms/basic-selects.html

   1 <!DocType html>
   2 <html>
   3 <head>
   4 <style>
   5 div {
   6   border:1px solid red;
   7   line-height:1em;
   8 }
   9 .borderRadius {
  10   padding:10px;
  11   -webkit-border-radius: 9px;
  12 }
  13 </style>
  14 </head>
  15
  16 <body>
  17 <script>
  18 if (window.testRunner)
  19     testRunner.setUseMockTheme(false);
  20 </script>
  21
  22 <div>
  23
  24 Whitespace in option text:<select><option>f o  o</option></select>a<select><option DISABLED>f o  o</option></select>b<br><br>
  25 Simple select control:<select><option>foo</option><option>bar</option></select>a<select DISABLED><option>foo</option><option>bar</option></select>b<br><br>
  26 Line-height should be ignored:<select style="line-height:2em"><option>foo</option></select>a<select style="line-height:2em" DISABLED><option DISABLED>foo</option><option>bar</option></select>b<br><br>
  27 Padding should be respected, the arrow button shouldn't change size:<select style="padding:4px;"><option>foo</option></select>a<select style="padding:4px;" DISABLED><option>foo</option></select>b<br><br>
  28 Border should be respected:<select style="border:8px solid #3cf;"><option>foo</option></select>a<select style="border:8px solid #3cf;" DISABLED><option>foo</option></select>b<br><br>
  29 Border + padding:<select style="padding:5px;border:4px solid #3cf;"><option>foo</option></select>a<select style="padding:5px;border:4px solid #3cf;" DISABLED><option>foo</option></select>b<br><br>
  30 Height larger than font-size, button should grow, text baseline should center:<select style="height:30px"><option>foo</option></select>a<select style="height:30px" DISABLED><option DISABLED>foo</option></select>b<br><br>
  31 Height smaller than font-size, whole select shrinks but baseline is unchanged:<select style="height:3px"><option>foo</option><option>bar</option></select>a<select style="height:3px"><option DISABLED>foo</option><option>bar</option></select>b<br><br>
  32
  33
  34 select control with size=0:
  35 <br>
  36 <select size=0>
  37 <option>Future Series </option>
  38 <option>ICC Intercontinental Cup </option>
  39 <option>Twenty20 World Championship </option>
  40 <option>Stanford 20/20 </option>
  41 <option>All future series </option>
  42 </select>
  43 <br>
  44
  45 select control with size=1:
  46 <br>
  47 <select size=1>
  48 <option>Future Series </option>
  49 <option>ICC Intercontinental Cup </option>
  50 <option>Twenty20 World Championship </option>
  51 <option>Stanford 20/20 </option>
  52 <option>All future series </option>
  53 </select>
  54 <br>
  55
  56 Non-styled select control:
  57 <br>
  58 <select class="borderRadius" style="border-width:1px">
  59 <option>Future Series </option>
  60 <option>ICC Intercontinental Cup </option>
  61 <option>Twenty20 World Championship </option>
  62 <option>Stanford 20/20 </option>
  63 <option>All future series </option>
  64 </select>
  65 <br>
  66
  67 Styled select control with large border-radius:
  68 <br>
  69 <select class="borderRadius" style="background-color:#3cf">
  70 <option>Future Series </option>
  71 <option>ICC Intercontinental Cup </option>
  72 <option>Twenty20 World Championship </option>
  73 <option>Stanford 20/20 </option>
  74 <option>All future series </option>
  75 </select>
  76 <br>
  77
  78 </div>
  79
  80 </body>
  81 </html>