third_party/WebKit/LayoutTests/scrollbars/custom-scrollbar-for-iframe-changing-dynamically.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/run-after-layout-and-paint.js"></script>
   3 <style>
   4 /* Let's get this party started */
   5 ::-webkit-scrollbar {
   6     width: 10px;
   7         height: 10px;
   8 }
   9
  10 /* Track */
  11 ::-webkit-scrollbar-track {
  12     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  13     -webkit-border-radius: 10px;
  14     border-radius: 10px;
  15 }
  16
  17 /* Handle */
  18 ::-webkit-scrollbar-thumb {
  19     -webkit-border-radius: 10px;
  20     border-radius: 10px;
  21     background: rgba(255,0,0,0.8);
  22     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  23 }
  24
  25 </style>
  26 <iframe src="resources/scrollable-iframe.html"></iframe>
  27 <iframe src="resources/scrollable-iframe.html"></iframe>
  28 <script>
  29 if (window.testRunner)
  30     testRunner.waitUntilDone();
  31 var styleElement = document.createElement("style");
  32 var sheet = document.head.appendChild(styleElement).sheet;
  33 function addStyle() {
  34 function addRule(selector, css){
  35     var propText = Object.keys(css).map(function(p){
  36         return p+":"+css[p]
  37     }).join(";");
  38     sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
  39 };
  40 addRule("::-webkit-scrollbar", {width: "20px",height: "25px"});
  41 if (window.testRunner)
  42     testRunner.notifyDone();
  43 }
  44 runAfterLayoutAndPaint(addStyle);
  45 </script>