custom-composited-different-track-parts.html

<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>
chromium/third_party/blink/web_tests/compositing/scrollbars/custom-composited-different-track-parts.html
