Remove LegacyProfiler
[WebKit-https.git] / ManualTests / item-background.html
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>