menulist-appearance-basic.html | Explore in Territory

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<body>
<style>
select {
    margin: 4px;
}
.wrapper {
    background: #dbb102;
    padding: 8px;
    display: inline-block;
}
.wrapper select {
    background: #dbb102;
    border: transparent;
}
</style>

<!-- no style for reference -->
<select><option>foo</option></select> <br>

<!-- padding -->
<select style="padding-top: 8px;"><option>foo</option></select>
<select style="padding-right: 6px;"><option>foo</option></select>
<select style="padding-bottom: 8px;"><option>foo</option></select>
<select style="padding-left: 6px;"><option>foo</option></select>
<br>


<!-- border -->
<select style="border: 3px solid lime;"><option>foo</option></select>
<select style="border-radius: 6px;"><option>foo</option></select> <br>

<!-- background -->
<select style="background: linear-gradient(to bottom, #bc7 0%,#7a5 44%,#242 100%); color:white"><option>foo</option></select>
<div class="wrapper"><select><option>bar</option></select></div>
<br>

<!-- shadow -->
<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>

Font-size and baseline:
<select style="font-size: 16px;"><option>foo</option></select>
<select style="font-size: 20px;"><option>foo</option></select>
<select style="font-size: 24px;"><option>foo</option></select>
<select style="-webkit-appearance:menulist-button; font-weight:bold"><option>September 2016</option></select>
<select></select>
<select style="font-size: 24px;"></select>
<br>

<!-- zoom -->
<select style="zoom: 1.5;"><option>foo</option></select>
<select style="zoom: 2;"><option>foo</option></select>
<select style="zoom: 0.5;"><option>foo</option></select>
<br>

<!-- multiple - on platforms that use menulist rendering for <select multiple> tags -->
<select multiple="multiple" style="width: 200px; height: 25px;">
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
</select>
<br>

<select multiple="multiple" style="width: 200px; height: 25px;">
  <option>Item 1</option>
  <option selected="selected">Item 2</option>
  <option>Item 3</option>
</select>
<br>

<select multiple="multiple" style="width: 200px; height: 25px;">
  <option>Item 1</option>
  <option selected="selected">Item 2</option>
  <option selected="selected">Item 3</option>
</select>
<br>

<select multiple="multiple" style="width: 200px; height: 25px;">
  <option selected="selected">Item 0.1</option>
  <optgroup label="Group 1">
    <option>Item 1.1</option>
    <option>Item 1.2</option>
    <option>Item 1.3</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Item 2.1</option>
    <option>Item 2.2</option>
    <option selected="selected">Item 2.3</option>
  </optgroup>
  <optgroup label="Group 3">
    <option selected="selected">Item 3.1</option>
    <option>Item 3.2</option>
    <option selected="selected">Item 3.3</option>
  </optgroup>
  <optgroup label="Group 4">
    <option>Item 4.1</option>
    <option selected="selected">Item 4.2</option>
    <option>Item 4.3</option>
  </optgroup>
  <optgroup label="Group 5">
    <option selected="selected">Item 5.1</option>
    <option>Item 5.2</option>
    <option>Item 5.3</option>
  </optgroup>
  <option selected="selected">Item 0.2</option>
</select>
<br>

<select multiple="multiple" style="width: 200px; height: 25px;">
<script type="text/javascript">
for (var i = 0; i < 1234; ++i) {
    document.writeln("  <option selected='selected'>Item " + (i + 1) + "</option>");
}
</script>
</select>
<br>

<!-- drop down arrow overlap test -->
<select style="width:60px"><option>Month</option></select>
<select style="width:70px; text-overflow:ellipsis"><option>Long long long long long long long</option></select>
<br>
<!-- Test RTL menulist without and with border -->
<select style="direction:rtl;"><option>foo</option></select>
<select style="border: 3px solid lime; direction:rtl;"><option>foo</option></select>
<select style="border: 8px solid lime; direction:rtl;"><option>foo</option></select>
<select style="border-radius: 6px; direction:rtl;"><option>foo</option></select>
<br>

</body>
chromium/third_party/blink/web_tests/fast/forms/select/menulist-appearance-basic.html
