| <html> |
| <head> |
| <title>Composited Scrollbars: different track part colours.</title> |
| <style> |
| ::-webkit-scrollbar { |
| width: 15px; |
| height: 15px; |
| } |
| ::-webkit-scrollbar-button:vertical:start { |
| background-color: red; |
| border: 1px dashed blue; |
| } |
| ::-webkit-scrollbar-button:vertical:end { |
| background-color: blue; |
| border: 1px dashed red; |
| } |
| ::-webkit-scrollbar-track-piece:start { |
| background-color: purple; |
| } |
| ::-webkit-scrollbar-track-piece:end { |
| background-color: green; |
| } |
| ::-webkit-scrollbar-button:start:decrement, |
| ::-webkit-scrollbar-button:end:increment { |
| display: block; |
| } |
| ::-webkit-scrollbar-thumb { |
| height: 20px; |
| background-color: yellow; |
| } |
| ::-webkit-scrollbar-button:horizontal:start { |
| background-color: cyan; |
| border: 1px dashed brown; |
| } |
| ::-webkit-scrollbar-button:horizontal:end { |
| background-color: brown; |
| border: 1px dashed cyan; |
| } |
| </style> |
| <script> |
| function doTest() |
| { |
| window.scrollTo(400,300); |
| } |
| |
| window.addEventListener("load", doTest, false); |
| </script> |
| </head> |
| <body> |
| <div style="width: 1600px; height: 1000px; will-change: transform;"> |
| </div> |
| <div style="position : absolute; left : 450; top : 350; width : 200px; height : 100px; border-style : solid; border-color : green; border-width : 2px"> |
| <!--- |
| <h2>Composited Custom Scrollbars with Different Coloured Track Parts</h2> |
| If this test succeeds, the track part before the thumb will be purple, and the track part after |
| the thumb will be green. All four button rects will have different colours. |
| |
| The div border should be in the top-left area of the window. |
| ---> |
| </div> |
| </body> |
| </html> |