Gitiles
Code Review Sign In
gerrit-public.fairphone.software / fp2-dev / platform / external / chromium_org / third_party / WebKit / eac6af9a72cf9c23b628f76bd7593f8abdae2c41 / . / ManualTests / item-background.html
blob: d9d3b0794a3b62d06c3742b7b3e99af4a076a421 [file] [log] [blame]
Torne (Richard Coles)5c87bf82012-11-14 11:46:17 +0000[diff] [blame]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>