third_party/WebKit/LayoutTests/scrollbars/custom-scrollbar-changing-style.html

   1 <!DOCTYPE html>
   2 <style>
   3 ::-webkit-scrollbar {
   4     height: 10px;
   5     width: 10px
   6 }
   7 ::-webkit-scrollbar-thumb {
   8     background: rgba(255,0,0,0.8);
   9 }
  10 html {
  11     overflow-y: scroll;
  12 }
  13 </style>
  14 <div style="height:700px"></div>
  15 <script src="../resources/run-after-layout-and-paint.js"></script>
  16 <script>
  17 var styleElement = document.createElement("style");
  18 var sheet = document.head.appendChild(styleElement).sheet;
  19 function addRule(selector, css){
  20     var propText = Object.keys(css).map(function(p){
  21         return p+":"+css[p]
  22     }).join(";");
  23     sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
  24 };
  25 runAfterLayoutAndPaint(function() {
  26     addRule("::-webkit-scrollbar-thumb", {background: "rgba(13,53,178,0.8)",});
  27 }, true);
  28 </script>