1<style>
2    div.container { float: left; background-color: #eee; padding: 4px; margin: 4px; }
3    div.swatch { width: 14px; height: 14px; background-color: white; position: relative; }
4    div.swatch div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
5    select { display: block; margin-left: 14px; margin-bottom: 1px; }
6
7    div.container.white > select,
8    div.container.white > div.swatch > div
9        { background-color: white; }
10
11    div.container.black > select,
12    div.container.black > div.swatch > div
13        { background-color: black; }
14
15    div.container.initial > select,
16    div.container.initial > div.swatch > div
17        { background-color: initial; }
18
19    div.container.semiblue > select,
20    div.container.semiblue > div.swatch > div
21        { background-color: rgba(0, 0, 255, 0.5); }
22
23    .solid { background-color: red; }
24    .reddish { background-color: rgba(255, 0, 0, 0.75); }
25    .semigreen { background-color: rgba(0, 255, 0, 0.5); }
26    .darken { background-color: rgba(0, 0, 0, 0.67); }
27</style>
28<p>
29    <strong>This test is for Windows only.</strong>
30    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).
31</p>
32<div class="container white">
33    Solid white menu:
34    <select>
35        <option>Default (transparent) option</option>
36        <option class="solid">Solid red option</option>
37        <option class="reddish">25% transparent red option</option>
38        <option class="semigreen">50% transparent green option</option>
39        <option class="darken">33% transparent black option</option>
40    </select>
41    <div class="swatch"></div>
42    <div class="swatch">
43        <div>
44            <div class="solid"></div>
45        </div>
46    </div>
47    <div class="swatch">
48        <div>
49            <div class="reddish"></div>
50        </div>
51    </div>
52    <div class="swatch">
53        <div>
54            <div class="semigreen"></div>
55        </div>
56    </div>
57    <div class="swatch">
58        <div>
59            <div class="darken"></div>
60        </div>
61    </div>
62</div>
63<div class="container black">
64    Solid black menu:
65    <select>
66        <option>Default (transparent) option</option>
67        <option class="solid">Solid red option</option>
68        <option class="reddish">25% transparent red option</option>
69        <option class="semigreen">50% transparent green option</option>
70        <option class="darken">33% transparent black option</option>
71    </select>
72    <div class="swatch"></div>
73    <div class="swatch">
74        <div>
75            <div class="solid"></div>
76        </div>
77    </div>
78    <div class="swatch">
79        <div>
80            <div class="reddish"></div>
81        </div>
82    </div>
83    <div class="swatch">
84        <div>
85            <div class="semigreen"></div>
86        </div>
87    </div>
88    <div class="swatch">
89        <div>
90            <div class="darken"></div>
91        </div>
92    </div>
93</div>
94<div class="container initial">
95    Transparent menu:
96    <select>
97        <option>Default (transparent) option</option>
98        <option class="solid">Solid red option</option>
99        <option class="reddish">25% transparent red option</option>
100        <option class="semigreen">50% transparent green option</option>
101        <option class="darken">33% transparent black option</option>
102    </select>
103    <div class="swatch"></div>
104    <div class="swatch">
105        <div>
106            <div class="solid"></div>
107        </div>
108    </div>
109    <div class="swatch">
110        <div>
111            <div class="reddish"></div>
112        </div>
113    </div>
114    <div class="swatch">
115        <div>
116            <div class="semigreen"></div>
117        </div>
118    </div>
119    <div class="swatch">
120        <div>
121            <div class="darken"></div>
122        </div>
123    </div>
124</div>
125<div class="container semiblue">
126    50% blue menu:
127    <select>
128        <option>Default (transparent) option</option>
129        <option class="solid">Solid red option</option>
130        <option class="reddish">25% transparent red option</option>
131        <option class="semigreen">50% transparent green option</option>
132        <option class="darken">33% transparent black option</option>
133    </select>
134    <div class="swatch"></div>
135    <div class="swatch">
136        <div>
137            <div class="solid"></div>
138        </div>
139    </div>
140    <div class="swatch">
141        <div>
142            <div class="reddish"></div>
143        </div>
144    </div>
145    <div class="swatch">
146        <div>
147            <div class="semigreen"></div>
148        </div>
149    </div>
150    <div class="swatch">
151        <div>
152            <div class="darken"></div>
153        </div>
154    </div>
155</div>
156