blob: d9d3b0794a3b62d06c3742b7b3e99af4a076a421 [file] [log] [blame]
<style>
div.container { float: left; background-color: #eee; padding: 4px; margin: 4px; }
div.swatch { width: 14px; height: 14px; background-color: white; position: relative; }
div.swatch div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
select { display: block; margin-left: 14px; margin-bottom: 1px; }
div.container.white > select,
div.container.white > div.swatch > div
{ background-color: white; }
div.container.black > select,
div.container.black > div.swatch > div
{ background-color: black; }
div.container.initial > select,
div.container.initial > div.swatch > div
{ background-color: initial; }
div.container.semiblue > select,
div.container.semiblue > div.swatch > div
{ background-color: rgba(0, 0, 255, 0.5); }
.solid { background-color: red; }
.reddish { background-color: rgba(255, 0, 0, 0.75); }
.semigreen { background-color: rgba(0, 255, 0, 0.5); }
.darken { background-color: rgba(0, 0, 0, 0.67); }
</style>
<p>
<strong>This test is for Windows only.</strong>
When you pull down each menu, the items&rsquo; background colors should match up with the swatches on the left (except for the hovered item).
</p>
<div class="container white">
Solid white menu:
<select>
<option>Default (transparent) option</option>
<option class="solid">Solid red option</option>
<option class="reddish">25% transparent red option</option>
<option class="semigreen">50% transparent green option</option>
<option class="darken">33% transparent black option</option>
</select>
<div class="swatch"></div>
<div class="swatch">
<div>
<div class="solid"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="reddish"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="semigreen"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="darken"></div>
</div>
</div>
</div>
<div class="container black">
Solid black menu:
<select>
<option>Default (transparent) option</option>
<option class="solid">Solid red option</option>
<option class="reddish">25% transparent red option</option>
<option class="semigreen">50% transparent green option</option>
<option class="darken">33% transparent black option</option>
</select>
<div class="swatch"></div>
<div class="swatch">
<div>
<div class="solid"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="reddish"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="semigreen"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="darken"></div>
</div>
</div>
</div>
<div class="container initial">
Transparent menu:
<select>
<option>Default (transparent) option</option>
<option class="solid">Solid red option</option>
<option class="reddish">25% transparent red option</option>
<option class="semigreen">50% transparent green option</option>
<option class="darken">33% transparent black option</option>
</select>
<div class="swatch"></div>
<div class="swatch">
<div>
<div class="solid"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="reddish"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="semigreen"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="darken"></div>
</div>
</div>
</div>
<div class="container semiblue">
50% blue menu:
<select>
<option>Default (transparent) option</option>
<option class="solid">Solid red option</option>
<option class="reddish">25% transparent red option</option>
<option class="semigreen">50% transparent green option</option>
<option class="darken">33% transparent black option</option>
</select>
<div class="swatch"></div>
<div class="swatch">
<div>
<div class="solid"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="reddish"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="semigreen"></div>
</div>
</div>
<div class="swatch">
<div>
<div class="darken"></div>
</div>
</div>
</div>