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>