ManualTests/scrollbars/scrollbars-in-composited-layers.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style>
   6     .scroll {
   7         width: 200px;
   8         height: 200px;
   9         border: 1px solid black;
  10         margin: 15px;
  11         padding: 5px;
  12         overflow-y: scroll;
  13         transform: translateZ(0);
  14         box-shadow: 0 0 15px black;
  15     }
  16
  17     .rotated {
  18         transform: rotate3d(0, 0, 1, 45deg);
  19     }
  20     .scroll > div {
  21         background-color: silver;
  22         width: 500px;
  23         height: 1000px;
  24     }
  25     </style>
  26 </head>
  27 <body>
  28
  29     <p>Overlay scrollbars (on Mac) should show in the correct place when scrolling.</p>
  30     <div class="scroll">
  31         <div></div>
  32     </div>
  33
  34     <p>Overlay scrollbars (on Mac) should show in the correct place when scrolling, and the resize corner should show in the correct place.</p>
  35     <div class="scroll" style="resize: both; overflow:hiddens">
  36         <div></div>
  37     </div>
  38
  39     <p>Overlay scrollbars (on Mac) should show in the correct place when scrolling, and the resize corner should show in the correct place.</p>
  40     <div class="rotated scroll" style="resize: both; overflow:hiddens">
  41         <div></div>
  42     </div>
  43
  44 </body>
  45 </html>