| <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> |
| if (window.internals) { |
| internals.settings.setMockScrollbarsEnabled(false); |
| } |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsTextWithPixelResults(); // This is only useful as a pixel test. |
| } |
| |
| function doTest() |
| { |
| window.scrollTo(400,300); |
| window.setTimeout(function() { |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }, 0); |
| } |
| |
| window.addEventListener("load", doTest, false); |
| </script> |
| </head> |
| <body> |
| <div style="width: 1600px; height: 1000px; transform: translateZ(0);"> |
| </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> |
