third_party/WebKit/LayoutTests/fast/scrolling/custom-scrollbar-style-applied.html

   1 <!DOCTYPE HTML>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4 ::-webkit-scrollbar {
   5     width: 250px;
   6     height: 250px;
   7 }
   8 ::-webkit-scrollbar-track {
   9     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  10     -webkit-border-radius: 10px;
  11     border-radius: 10px;
  12 }
  13 ::-webkit-scrollbar-thumb {
  14     -webkit-border-radius: 1px;
  15     background: rgba(255,0,0,0.8);
  16     -webkit-box-shadow: inset 0 0 1px rgba(255,250,0,0.5);
  17 }
  18 #fill {
  19     background-color: #ccd;
  20     left: 0;
  21     top: 0;
  22     right: 0;
  23     bottom: 0;
  24     position: absolute;
  25 }
  26 #space {
  27     width: 1000px;
  28     height: 1000px;
  29 }
  30 </style>
  31 <div id="fill"></div>
  32 <div id="space"></div>
  33 <script>
  34   var fill = document.querySelector("#fill");
  35   description("Tests that Styles are applied to custom scrollbar.");
  36   shouldBe("fill.clientWidth", "550");
  37   shouldBe("fill.clientHeight", "350");
  38 </script>