third_party/WebKit/LayoutTests/fast/overflow/overflow-rtl.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2 "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <title>overflow:auto with direction:rtl</title>
   6 <style type="text/css">
   7 div.test { background: yellow; height: 6ex; width: 100px; overflow: auto;
   8            border-left: 10px solid red; border-right: 5px solid green; margin: 4px; }
   9 div.rtl { direction: rtl; border-right: 10px solid red; border-left: 5px solid green; }
  10 </style>
  11 </head>
  12 <body>
  13 <p>
  14 This is a test case for <i>http://bugzilla.opendarwin.org/show_bug.cgi?id=5826 Blocks with direction:rtl and overflow:auto or scroll have incorrect scrollbars</i>.
  15 </p>
  16 The right column should be a mirror-image of the left column in terms of
  17 <ul>
  18     <li>the presence of a scrollbar</li>
  19     <li>the initial position of the scroll thumb</li>
  20     <li>which letters are visible initially and when you scroll (in the top 3 rows)</li>
  21     <li>the position of the blue and olive boxes, initially and when you scroll (in the bottom 2 rows)</li>
  22 </ul>
  23 <table>
  24 <tr>
  25 <td>
  26 <div class="test">
  27 abcdefghijklmnopqrstuvwxyz
  28 </div>
  29
  30 <div class="test">
  31 <div style="direction:rtl; background:lightgray;">abcdefghijklmnopqrstuvwxyz</div>
  32 </div>
  33
  34 <div class="test">
  35 <div style="direction:ltr; background:lightgray;">abcdefghijklmnopqrstuvwxyz</div>
  36 </div>
  37
  38 <div class="test" style="position:relative;">
  39 <div style="width:8px; height:4px; background:blue; position: absolute; left:46px; top:20px;"></div>
  40 <div style="width:70px; height:20px; background:olive; position: absolute; left:-50px;"></div>
  41 </div>
  42
  43 <div class="test" style="position:relative;">
  44 <div style="width:8px; height:4px; background:blue; position: absolute; left:46px; top:20px;"></div>
  45 <div style="width:70px; height:20px; background:olive; position: absolute; left:80px;"></div>
  46 </div>
  47 </td>
  48 <td>
  49 <div class="test rtl">
  50 zyxwvutsrqponmlkjihgfedcba
  51 </div>
  52
  53 <div class="test rtl">
  54 <div style="direction:ltr; background:lightgray;">zyxwvutsrqponmlkjihgfedcba</div>
  55 </div>
  56
  57 <div class="test rtl">
  58 <div style="direction:rtl; background:lightgray;">zyxwvutsrqponmlkjihgfedcba</div>
  59 </div>
  60
  61 <div class="test rtl" style="position:relative;">
  62 <div style="width:8px; height:4px; background:blue; position: absolute; left:46px; top:20px;"></div>
  63 <div style="width:70px; height:20px; background:olive; position: absolute; left:80px;"></div>
  64 </div>
  65
  66 <div class="test rtl" style="position:relative;">
  67 <div style="width:8px; height:4px; background:blue; position: absolute; left:46px; top:20px;"></div>
  68 <div style="width:70px; height:20px; background:olive; position: absolute; left:-50px;"></div>
  69 </div>
  70 </td>
  71 </tr>
  72 </table>
  73 </body>
  74 </html>