third_party/WebKit/LayoutTests/scrollbars/custom-scrollbar-thumb-inactive-pseudo.html

   1 <!DOCTYPE HTML>
   2 <style>
   3 ::-webkit-scrollbar {
   4     width: 12px;
   5     height: 12px;
   6 }
   7 ::-webkit-scrollbar-track {
   8     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   9     -webkit-border-radius: 10px;
  10     border-radius: 10px;
  11 }
  12 ::-webkit-scrollbar-thumb {
  13     -webkit-border-radius: 10px;
  14     border-radius: 10px;
  15     background: rgba(255,0,0,0.8);
  16     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  17 }
  18 ::-webkit-scrollbar-thumb:window-inactive {
  19     background: rgba(255,150,250,0.8);
  20 }
  21 html {
  22     overflow: scroll;
  23 }
  24 body {
  25     width: 1000px;
  26     height: 1000px;
  27 }
  28 div {
  29     width: 100px;
  30     height: 100px;
  31     overflow: scroll;
  32 }
  33 </style>
  34 <body>
  35 <iframe src="resources/scrollable-iframe-customscrollbar.html"></iframe>
  36 <div><p style="width:200px;height:200px"></p></div>
  37 <div><p style="width:200px;height:200px"></p></div>
  38 </body>
  39 <script>
  40 window.onload = function() {
  41 // setWindowIsKey shall set the focus of the window.
  42 if (window.testRunner)
  43     window.testRunner.setWindowIsKey(false);
  44 }
  45 </script>