chromium/src/third_party/blink/web_tests/fast/forms/select/menulist-appearance-basic.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <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>
	<!DOCTYPE html>
	<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>