third_party/WebKit/LayoutTests/scrollbars/custom-scrollbar-thumb-width-changed-on-inactive-pseudo-expected.html

   1 <style>
   2 html {
   3     overflow: auto;
   4 }
   5 body {
   6     position: absolute;
   7     top: 20px;
   8     left: 20px;
   9     bottom: 20px;
  10     right: 20px;
  11     padding: 30px;
  12     overflow-y: scroll;
  13     overflow-x: scroll;
  14 }
  15 ::-webkit-scrollbar {
  16     width: 100px;
  17     height: 100px;
  18 }
  19 ::-webkit-scrollbar-track {
  20     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  21     -webkit-border-radius: 10px;
  22     border-radius: 10px;
  23 }
  24 ::-webkit-scrollbar-thumb {
  25     -webkit-border-radius: 10px;
  26     border-radius: 10px;
  27     background: rgba(255,0,0,0.4);
  28     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  29 }
  30 div {
  31     width: 300px;
  32     height: 300px;
  33     border: thin solid black;
  34     overflow: scroll;
  35 }
  36 </style>
  37 <body>
  38 <div>
  39 <p style="height:350px">
  40 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  41 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
  42 sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  43 Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
  44 commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
  45 eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
  46 facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
  47 eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
  48 porttitor, facilisis luctus, metus.Pellentesque habitant morbi tristique senectus et netus
  49 et malesuada fames ac turpis egestas.Vestibulum tortor quam, feugiat vitae, ultricies eget,
  50 tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
  51 vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  52 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
  53 elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
  54 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
  55 faucibus, tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat.
  56 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  57 </p>
  58 </div>
  59 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  60 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
  61 sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  62 Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
  63 commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
  64 eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
  65 facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
  66 eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
  67 porttitor, facilisis luctus, metus.Pellentesque habitant morbi tristique senectus et netus
  68 et malesuada fames ac turpis egestas.Vestibulum tortor quam, feugiat vitae, ultricies eget,
  69 tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
  70 vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  71 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
  72 elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
  73 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
  74 faucibus, tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat.
  75 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  76 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  77 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
  78 sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  79 Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
  80 commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
  81 eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
  82 facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
  83 eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
  84 porttitor, facilisis luctus, metus.Pellentesque habitant morbi tristique senectus et netus
  85 et malesuada fames ac turpis egestas.Vestibulum tortor quam, feugiat vitae, ultricies eget,
  86 tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
  87 vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  88 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
  89 elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
  90 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
  91 faucibus, tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat.
  92 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  93 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  94 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
  95 sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  96 Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
  97 commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
  98 eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
  99 facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
 100 eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
 101 porttitor, facilisis luctus, metus.Pellentesque habitant morbi tristique senectus et netus
 102 et malesuada fames ac turpis egestas.Vestibulum tortor quam, feugiat vitae, ultricies eget,
 103 tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
 104 vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
 105 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
 106 elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
 107 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
 108 faucibus, tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat.
 109 Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
 110 </body>