LayoutTests/scrollbars/scrollbar-buttons.html

   1 <head>
   2 <style>
   3 div::-webkit-scrollbar {
   4   width:17px;
   5   height:17px;
   6 }
   7
   8 div::-webkit-scrollbar-button {
   9   display: block;
  10   width: 17px;
  11   height: 17px;
  12 }
  13
  14 div::-webkit-scrollbar-button:decrement:start {
  15   background-color:lightblue;
  16   border:2px solid black;
  17 }
  18
  19 div::-webkit-scrollbar-button:increment:start {
  20   background-color:lightgreen;
  21   border:2px solid black;
  22 }
  23
  24 div::-webkit-scrollbar-button:decrement:end {
  25   background-color:orange;
  26   border:2px solid black;
  27 }
  28
  29 div::-webkit-scrollbar-button:increment:end {
  30   background-color:brown;
  31   border:2px solid black;
  32 }
  33
  34 div::-webkit-scrollbar-thumb {
  35   min-width:20px;
  36   min-height:20px;
  37   background-color: navy;
  38   border:2px solid #cccccc;
  39 }
  40
  41 div::-webkit-scrollbar-track-piece:decrement {
  42   background-color: olive;
  43 }
  44
  45 div::-webkit-scrollbar-track-piece:increment {
  46   background-color: pink;
  47 }
  48 </style>
  49 </head>
  50 <body>
  51 <div style="width:200px; height:200px; overflow-y:scroll; overflow-x:hidden">
  52 Hello<br>
  53 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
  54 Hello<br>Hello<br>Hello<br>Hello<br>
  55 Hello<br>Hello<br>Hello<br>Hello<br>
  56 <span style="white-space:nowrap">Hello world this is a long string and will not wrap.</span>
  57 Hello<br>Hello<br>Hello<br>Hello<br>
  58 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
  59 Hello<br>Hello<br>Hello<br>Hello<br>
  60 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
  61 Hello<br>Hello<br>Hello<br>Hello<br>
  62 Hello<br>Hello<br>Hello<br>
  63 </div>