Rubber-stamped by Mark Rowe.
[WebKit-https.git] / LayoutTests / scrollbars / listbox-scrollbar-combinations.html
1 <head>
2 <style>
3 body {
4     -webkit-user-select: none;
5 }
6
7 body > select {
8     padding: 10px;
9     margin: 20px;
10     display: inline-block;
11     border: 1px solid lightgray;
12     -webkit-box-sizing: border-box;
13     vertical-align: top;
14     color: rgb(220, 220, 220);
15     background-color: rgb(113, 141, 147);
16     font-family: Verdana, sans-serif;
17     font-size: 12px;
18     -webkit-user-select: text;
19     width: 125px;
20     height: 100px;
21 }
22
23 option[selected] {
24     background-color: rgb(130, 170, 170);
25     color: rgb(235, 235, 235);
26 }
27
28 ::-webkit-scrollbar {
29     width: 13px;
30     height: 13px;
31 }
32
33 ::-webkit-scrollbar-corner {
34     background-image: url(resources/corner.png);
35     background-repeat: no-repeat;
36 }
37
38 ::-webkit-scrollbar-corner:window-inactive {
39     background-image: url(resources/corner-inactive.png);
40 }
41
42 ::-webkit-resizer {
43     background-image: url(resources/resizer.png);
44     background-repeat: no-repeat;
45     background-position: bottom right;
46 }
47
48 ::-webkit-resizer:window-inactive {
49     background-image: url(resources/resizer-inactive.png);
50 }
51
52 ::-webkit-scrollbar-track-piece:disabled {
53     display: none !important;
54 }
55
56 ::-webkit-scrollbar-button:disabled {
57     display: none !important;
58 }
59
60 ::-webkit-scrollbar-track:disabled {
61     margin: 6px;
62 }
63
64 /* Horizontal Scrollbar Styles */
65
66 ::-webkit-scrollbar:horizontal {
67     -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
68     border-color: transparent;
69     border-width: 0 2px;
70     background-image: url(resources/horizontal-button-background.png);
71     background-repeat: repeat-x;
72 }
73
74 ::-webkit-scrollbar:horizontal:corner-present {
75     border-right-width: 0;
76 }
77
78 ::-webkit-scrollbar-track:horizontal:disabled:corner-present {
79     margin-right: 5px;
80 }
81
82 ::-webkit-scrollbar:horizontal:window-inactive {
83     -webkit-border-image: url(resources/horizontal-button-inactive.png) 0 2 0 2;
84     background-image: url(resources/horizontal-button-background-inactive.png);
85 }
86
87 ::-webkit-scrollbar-thumb:horizontal {
88     -webkit-border-image: url(resources/horizontal-thumb.png) 0 13 0 13;
89     border-color: transparent;
90     border-width: 0 13px;
91     min-width: 20px;
92 }
93
94 ::-webkit-scrollbar-thumb:horizontal:hover {
95     -webkit-border-image: url(resources/horizontal-thumb-hover.png) 0 13 0 13;
96 }
97
98 ::-webkit-scrollbar-thumb:horizontal:active {
99     -webkit-border-image: url(resources/horizontal-thumb-active.png) 0 13 0 13;
100 }
101
102 ::-webkit-scrollbar-thumb:horizontal:window-inactive {
103     -webkit-border-image: url(resources/horizontal-thumb-inactive.png) 0 13 0 13;
104 }
105
106 ::-webkit-scrollbar-track-piece:horizontal:start:no-button,
107 .double-end::-webkit-scrollbar-track-piece:horizontal:start,
108 .none::-webkit-scrollbar-track-piece:horizontal:start {
109     margin-left: 6px;
110 }
111
112 ::-webkit-scrollbar-track-piece:horizontal:end:no-button,
113 .double-start::-webkit-scrollbar-track-piece:horizontal:end,
114 .none::-webkit-scrollbar-track-piece:horizontal:end {
115     margin-right: 6px;
116 }
117
118 ::-webkit-scrollbar-track-piece:horizontal:end:no-button:corner-present,
119 .double-start::-webkit-scrollbar-track-piece:horizontal:end:corner-present,
120 .none::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
121     margin-right: 5px;
122 }
123
124 :not(.none):not(.double-end)::-webkit-scrollbar-track-piece:horizontal:start:single-button,
125 :not(.none):not(.double-end)::-webkit-scrollbar-track-piece:horizontal:start:double-button,
126 .single::-webkit-scrollbar-track-piece:horizontal:start,
127 .double-start::-webkit-scrollbar-track-piece:horizontal:start,
128 .double-both::-webkit-scrollbar-track-piece:horizontal:start {
129     margin-left: -6px;
130 }
131
132 :not(.none):not(.double-start)::-webkit-scrollbar-track-piece:horizontal:end:single-button,
133 :not(.none):not(.double-start)::-webkit-scrollbar-track-piece:horizontal:end:double-button,
134 .single::-webkit-scrollbar-track-piece:horizontal:end,
135 .double-end::-webkit-scrollbar-track-piece:horizontal:end,
136 .double-both::-webkit-scrollbar-track-piece:horizontal:end {
137     margin-right: -6px;
138 }
139
140 ::-webkit-scrollbar-track:horizontal:disabled {
141     -webkit-border-image: url(resources/horizontal-track-disabled.png) 0 13 0 13;
142     border-color: transparent;
143     border-width: 0 13px;
144 }
145
146 ::-webkit-scrollbar-track-piece:horizontal:decrement {
147     -webkit-border-image: url(resources/horizontal-track.png) 0 13 0 13;
148     border-color: transparent;
149     border-width: 0 0 0 13px;
150 }
151
152 ::-webkit-scrollbar-track-piece:horizontal:decrement:hover {
153     -webkit-border-image: url(resources/horizontal-track-hover.png) 0 13 0 13;
154 }
155
156 ::-webkit-scrollbar-track-piece:horizontal:decrement:active {
157     -webkit-border-image: url(resources/horizontal-track-active.png) 0 13 0 13;
158 }
159
160 ::-webkit-scrollbar-track-piece:horizontal:increment {
161     -webkit-border-image: url(resources/horizontal-track.png) 0 13 0 13;
162     border-color: transparent;
163     border-width: 0 13px 0 0;
164 }
165
166 ::-webkit-scrollbar-track-piece:horizontal:increment:hover {
167     -webkit-border-image: url(resources/horizontal-track-hover.png) 0 13 0 13;
168 }
169
170 ::-webkit-scrollbar-track-piece:horizontal:increment:active {
171     -webkit-border-image: url(resources/horizontal-track-active.png) 0 13 0 13;
172 }
173
174 ::-webkit-scrollbar-button:horizontal {
175     width: 20px;
176     -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
177     border-color: transparent;
178     border-width: 0 2px;
179 }
180
181 ::-webkit-scrollbar-button:horizontal:decrement {
182     background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background.png);
183     background-repeat: no-repeat, repeat-x;
184     background-position: 2px 3px, 0 0;
185 }
186
187 ::-webkit-scrollbar-button:horizontal:decrement:hover {
188     -webkit-border-image: url(resources/horizontal-button-hover.png) 0 2 0 2;
189     background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background-hover.png);
190 }
191
192 ::-webkit-scrollbar-button:horizontal:decrement:active {
193     -webkit-border-image: url(resources/horizontal-button-active.png) 0 2 0 2;
194     background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background-active.png);
195 }
196
197 ::-webkit-scrollbar-button:horizontal:decrement:window-inactive {
198     -webkit-border-image: url(resources/horizontal-button-inactive.png) 0 2 0 2;
199     background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background-inactive.png);
200 }
201
202 ::-webkit-scrollbar-button:horizontal:increment {
203     background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background.png);
204     background-repeat: no-repeat, repeat-x;
205     background-position: 7px 3px, 0 0;
206 }
207
208 ::-webkit-scrollbar-button:horizontal:increment:hover {
209     -webkit-border-image: url(resources/horizontal-button-hover.png) 0 2 0 2;
210     background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background-hover.png);
211 }
212
213 ::-webkit-scrollbar-button:horizontal:increment:active {
214     -webkit-border-image: url(resources/horizontal-button-active.png) 0 2 0 2;
215     background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background-active.png);
216 }
217
218 ::-webkit-scrollbar-button:horizontal:increment:window-inactive {
219     -webkit-border-image: url(resources/horizontal-button-inactive.png) 0 2 0 2;
220     background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background-inactive.png);
221 }
222
223 :not(.single)::-webkit-scrollbar-button:double-button:horizontal:start:decrement,
224 .double-start::-webkit-scrollbar-button:horizontal:start:decrement,
225 .double-both::-webkit-scrollbar-button:horizontal:start:decrement {
226     width: 14px;
227     border-right-width: 0;
228     background-position: 2px 3px, 0 0;
229 }
230
231 :not(.single)::-webkit-scrollbar-button:double-button:horizontal:start:increment,
232 .double-start::-webkit-scrollbar-button:horizontal:start:increment,
233 .double-both::-webkit-scrollbar-button:horizontal:start:increment {
234     background-position: 3px 3px, 0 0;
235 }
236
237 :not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:decrement,
238 .double-end::-webkit-scrollbar-button:horizontal:end:decrement,
239 .double-both::-webkit-scrollbar-button:horizontal:end:decrement {
240     background-position: 7px 3px, 0 0;
241 }
242
243 :not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:increment,
244 .double-end::-webkit-scrollbar-button:horizontal:end:increment,
245 .double-both::-webkit-scrollbar-button:horizontal:end:increment {
246     width: 14px;
247     border-left-width: 0;
248     background-position: 3px 3px, 0 0;
249 }
250
251 ::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
252     border-right-width: 0;
253     width: 19px;
254 }
255
256 :not(.single)::-webkit-scrollbar-button:double-button:horizontal:end:increment:corner-present,
257 .double-end::-webkit-scrollbar-button:horizontal:end:increment:corner-present,
258 .double-both::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
259     width: 13px;
260 }
261
262 /* Vertical Scrollbar Styles */
263
264 ::-webkit-scrollbar:vertical {
265     -webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
266     border-color: transparent;
267     border-width: 2px 0;
268     background-image: url(resources/vertical-button-background.png);
269     background-repeat: repeat-y;
270 }
271
272 ::-webkit-scrollbar:vertical:corner-present {
273     border-bottom-width: 0;
274 }
275
276 ::-webkit-scrollbar-track:vertical:disabled:corner-present {
277     margin-bottom: 5px;
278 }
279
280 ::-webkit-scrollbar:vertical:window-inactive {
281     -webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
282     background-image: url(resources/vertical-button-background-inactive.png);
283 }
284
285 ::-webkit-scrollbar-thumb:vertical {
286     -webkit-border-image: url(resources/vertical-thumb.png) 13 0 13 0;
287     border-color: transparent;
288     border-width: 13px 0;
289     min-height: 20px;
290 }
291
292 ::-webkit-scrollbar-thumb:vertical:hover {
293     -webkit-border-image: url(resources/vertical-thumb-hover.png) 13 0 13 0;
294 }
295
296 ::-webkit-scrollbar-thumb:vertical:active {
297     -webkit-border-image: url(resources/vertical-thumb-active.png) 13 0 13 0;
298 }
299
300 ::-webkit-scrollbar-thumb:vertical:window-inactive {
301     -webkit-border-image: url(resources/vertical-thumb-inactive.png) 13 0 13 0;
302 }
303
304 ::-webkit-scrollbar-track-piece:vertical:start:no-button,
305 .double-end::-webkit-scrollbar-track-piece:vertical:start,
306 .none::-webkit-scrollbar-track-piece:vertical:start {
307     margin-top: 6px;
308 }
309
310 ::-webkit-scrollbar-track-piece:vertical:end:no-button,
311 .double-start::-webkit-scrollbar-track-piece:vertical:end,
312 .none::-webkit-scrollbar-track-piece:vertical:end {
313     margin-bottom: 6px;
314 }
315
316 ::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present,
317 .double-start::-webkit-scrollbar-track-piece:vertical:end:corner-present,
318 .none::-webkit-scrollbar-track-piece:vertical:end:corner-present {
319     margin-bottom: 5px;
320 }
321
322 :not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:single-button,
323 :not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:double-button,
324 .single::-webkit-scrollbar-track-piece:vertical:start,
325 .double-start::-webkit-scrollbar-track-piece:vertical:start,
326 .double-both::-webkit-scrollbar-track-piece:vertical:start {
327     margin-top: -6px;
328 }
329
330 :not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:single-button,
331 :not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:double-button,
332 .single::-webkit-scrollbar-track-piece:vertical:end,
333 .double-end::-webkit-scrollbar-track-piece:vertical:end,
334 .double-both::-webkit-scrollbar-track-piece:vertical:end {
335     margin-bottom: -6px;
336 }
337
338 ::-webkit-scrollbar-track:vertical:disabled {
339     -webkit-border-image: url(resources/vertical-track-disabled.png) 13 0 13 0;
340     border-color: transparent;
341     border-width: 13px 0;
342 }
343
344 ::-webkit-scrollbar-track-piece:vertical:decrement {
345     -webkit-border-image: url(resources/vertical-track.png) 13 0 13 0;
346     border-color: transparent;
347     border-width: 13px 0 0 0;
348 }
349
350 ::-webkit-scrollbar-track-piece:vertical:decrement:hover {
351     -webkit-border-image: url(resources/vertical-track-hover.png) 13 0 13 0;
352 }
353
354 ::-webkit-scrollbar-track-piece:vertical:decrement:active {
355     -webkit-border-image: url(resources/vertical-track-active.png) 13 0 13 0;
356 }
357
358 ::-webkit-scrollbar-track-piece:vertical:increment {
359     -webkit-border-image: url(resources/vertical-track.png) 13 0 13 0;
360     border-color: transparent;
361     border-width: 0 0 13px 0;
362 }
363
364 ::-webkit-scrollbar-track-piece:vertical:increment:hover {
365     -webkit-border-image: url(resources/vertical-track-hover.png) 13 0 13 0;
366 }
367
368 ::-webkit-scrollbar-track-piece:vertical:increment:active {
369     -webkit-border-image: url(resources/vertical-track-active.png) 13 0 13 0;
370 }
371
372 ::-webkit-scrollbar-button:vertical {
373     height: 20px;
374     -webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
375     border-color: transparent;
376     border-width: 2px 0;
377 }
378
379 ::-webkit-scrollbar-button:vertical:decrement {
380     background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background.png);
381     background-repeat: no-repeat, repeat-y;
382     background-position: 3px 3px, 0 0;
383 }
384
385 ::-webkit-scrollbar-button:vertical:decrement:hover {
386     -webkit-border-image: url(resources/vertical-button-hover.png) 2 0 2 0;
387     background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-hover.png);
388 }
389
390 ::-webkit-scrollbar-button:vertical:decrement:active {
391     -webkit-border-image: url(resources/vertical-button-active.png) 2 0 2 0;
392     background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-active.png);
393 }
394
395 ::-webkit-scrollbar-button:vertical:decrement:window-inactive {
396     -webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
397     background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-inactive.png);
398 }
399
400 ::-webkit-scrollbar-button:vertical:increment {
401     background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background.png);
402     background-repeat: no-repeat, repeat-y;
403     background-position: 3px 8px, 0 0;
404 }
405
406 ::-webkit-scrollbar-button:vertical:increment:hover {
407     -webkit-border-image: url(resources/vertical-button-hover.png) 2 0 2 0;
408     background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-hover.png);
409 }
410
411 ::-webkit-scrollbar-button:vertical:increment:active {
412     -webkit-border-image: url(resources/vertical-button-active.png) 2 0 2 0;
413     background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-active.png);
414 }
415
416 ::-webkit-scrollbar-button:vertical:increment:window-inactive {
417     -webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
418     background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-inactive.png);
419 }
420
421 :not(.single)::-webkit-scrollbar-button:double-button:vertical:start:decrement,
422 .double-start::-webkit-scrollbar-button:vertical:start:decrement,
423 .double-both::-webkit-scrollbar-button:vertical:start:decrement {
424     height: 14px;
425     border-bottom-width: 0;
426     background-position: 3px 3px, 0 0;
427 }
428
429 :not(.single)::-webkit-scrollbar-button:double-button:vertical:start:increment,
430 .double-start::-webkit-scrollbar-button:vertical:start:increment,
431 .double-both::-webkit-scrollbar-button:vertical:start:increment {
432     background-position: 3px 4px, 0 0;
433 }
434
435 :not(.single)::-webkit-scrollbar-button:double-button:vertical:end:decrement,
436 .double-end::-webkit-scrollbar-button:vertical:end:decrement,
437 .double-both::-webkit-scrollbar-button:vertical:end:decrement {
438     background-position: 3px 8px, 0 0;
439 }
440
441 :not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment,
442 .double-end::-webkit-scrollbar-button:vertical:end:increment,
443 .double-both::-webkit-scrollbar-button:vertical:end:increment {
444     height: 14px;
445     border-top-width: 0;
446     background-position: 3px 4px, 0 0;
447 }
448
449 ::-webkit-scrollbar-button:vertical:end:increment:corner-present {
450     border-bottom-width: 0;
451     height: 19px;
452 }
453
454 :not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present,
455 .double-end::-webkit-scrollbar-button:vertical:end:increment:corner-present,
456 .double-both::-webkit-scrollbar-button:vertical:end:increment:corner-present {
457     height: 13px;
458 }
459
460 /* Forced Scrollbar Mode Styles */
461
462 .single::-webkit-scrollbar-button:start:decrement,
463 .single::-webkit-scrollbar-button:end:increment {
464     display: block;
465 }
466
467 .single::-webkit-scrollbar-button:start:increment,
468 .single::-webkit-scrollbar-button:end:decrement {
469     display: none;
470 }
471
472 .double-end::-webkit-scrollbar-button:start {
473     display: none;
474 }
475
476 .double-end::-webkit-scrollbar-button:end {
477     display: block;
478 }
479
480 .double-start::-webkit-scrollbar-button:start {
481     display: block;
482 }
483
484 .double-start::-webkit-scrollbar-button:end {
485     display: none;
486 }
487
488 .double-both::-webkit-scrollbar-button {
489     display: block;
490 }
491
492 .none::-webkit-scrollbar-button {
493     display: none;
494 }
495 </style>
496 <script>
497 /* Preload the scrollbar images to prevent flickering when changing states. */
498 (new Image()).src = "resources/corner-inactive.png";
499 (new Image()).src = "resources/corner.png";
500 (new Image()).src = "resources/horizontal-button-active.png";
501 (new Image()).src = "resources/horizontal-button-background-active.png";
502 (new Image()).src = "resources/horizontal-button-background-hover.png";
503 (new Image()).src = "resources/horizontal-button-background-inactive.png";
504 (new Image()).src = "resources/horizontal-button-background.png";
505 (new Image()).src = "resources/horizontal-button-hover.png";
506 (new Image()).src = "resources/horizontal-button-inactive.png";
507 (new Image()).src = "resources/horizontal-button.png";
508 (new Image()).src = "resources/horizontal-decrement-arrow.png";
509 (new Image()).src = "resources/horizontal-increment-arrow.png";
510 (new Image()).src = "resources/horizontal-thumb-active.png";
511 (new Image()).src = "resources/horizontal-thumb-hover.png";
512 (new Image()).src = "resources/horizontal-thumb-inactive.png";
513 (new Image()).src = "resources/horizontal-thumb.png";
514 (new Image()).src = "resources/horizontal-track-active.png";
515 (new Image()).src = "resources/horizontal-track-disabled.png";
516 (new Image()).src = "resources/horizontal-track-hover.png";
517 (new Image()).src = "resources/horizontal-track.png";
518 (new Image()).src = "resources/resizer-inactive.png";
519 (new Image()).src = "resources/resizer.png";
520 (new Image()).src = "resources/vertical-button-active.png";
521 (new Image()).src = "resources/vertical-button-background-active.png";
522 (new Image()).src = "resources/vertical-button-background-hover.png";
523 (new Image()).src = "resources/vertical-button-background-inactive.png";
524 (new Image()).src = "resources/vertical-button-background.png";
525 (new Image()).src = "resources/vertical-button-hover.png";
526 (new Image()).src = "resources/vertical-button-inactive.png";
527 (new Image()).src = "resources/vertical-button.png";
528 (new Image()).src = "resources/vertical-decrement-arrow.png";
529 (new Image()).src = "resources/vertical-increment-arrow.png";
530 (new Image()).src = "resources/vertical-thumb-active.png";
531 (new Image()).src = "resources/vertical-thumb-hover.png";
532 (new Image()).src = "resources/vertical-thumb-inactive.png";
533 (new Image()).src = "resources/vertical-thumb.png";
534 (new Image()).src = "resources/vertical-track-active.png";
535 (new Image()).src = "resources/vertical-track-disabled.png";
536 (new Image()).src = "resources/vertical-track-hover.png";
537 (new Image()).src = "resources/vertical-track.png";
538 </script>
539 </head>
540 <body>
541 <select size=4 >
542 <option>One
543 <option>Two
544 <option>Three
545 <option>Four
546 <option>Five
547 </select>
548
549 <select size=4  class="single">
550 <option>One
551 <option>Two
552 <option>Three
553 <option>Four
554 <option>Five
555 </select>
556
557 <select size=4  class="double-end">
558 <option>One
559 <option>Two
560 <option>Three
561 <option>Four
562 <option>Five
563 </select>
564
565 <select size=4  class="double-start">
566 <option>One
567 <option>Two
568 <option>Three
569 <option>Four
570 <option>Five
571 </select>
572
573 <select size=4  class="double-both">
574 <option>One
575 <option>Two
576 <option>Three
577 <option>Four
578 <option>Five
579 </select>
580
581 <select size=4  class="none">
582 <option>One
583 <option>Two
584 <option>Three
585 <option>Four
586 <option>Five
587 </select>
588
589 <select size=4>
590 <option>One
591 <option>Two
592 </select>