src/third_party/WebKit/LayoutTests/compositing/overflow/rtl-overflow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Composited overflow scrolling for RTL</title>
   5   <style>
   6     .container {
   7       width: 400px;
   8       height: 150px;
   9       overflow: scroll;
  10       direction: rtl;
  11     }
  12     .container::-webkit-scrollbar {
  13       width: 0;
  14       height: 0;
  15     }
  16     .overflow {
  17       display: inline-block;
  18       width: 1000px;
  19       position: relative;
  20     }
  21     .right {
  22       width: 100px;
  23       height: 100px;
  24       position: absolute;
  25       right: 0;
  26       background-color: red;
  27     }
  28     .left {
  29       width: 100px;
  30       height: 100px;
  31       position: absolute;
  32       left: 0;
  33       background-color: blue;
  34     }
  35   </style>
  36 </head>
  37 <body>
  38   <div style="transform:translateZ(0);">
  39     This test succeeds if the two blocks correctly show content scrolled to the rightmost and leftmost respectively.
  40   </div>
  41   <div class="container">
  42     <div class="overflow">
  43       <div class="left"></div>
  44       <div class="right"></div>
  45     </div>
  46   </div>
  47   <div class="container" id="second">
  48     <div class="overflow">
  49       <div class="left"></div>
  50       <div class="right"></div>
  51     </div>
  52   </div>
  53   <script>
  54     document.getElementById('second').scrollLeft = 0;
  55   </script>
  56 </body>
  57 </html>