third_party/WebKit/LayoutTests/fast/css/absolute-poition-in-rtl-parent.html

   1 <html>
   2 <head>
   3   <title>Absolute Position in RTL parent</title>
   4   <style>
   5     .containingBlock { position: fixed; border: 20px solid black; }
   6     #cbOne { width: 200px; height: 300px; }
   7     #cbOne > table { direction: rtl; width: 100px; }
   8     #cbTwo { width: 300px; height: 200px; left: 300px; }
   9     #cbTwo > div { position: relative; direction: rtl; width: 200px; }
  10
  11     .box { width: 100px; height: 100px; }
  12     #test1 { background: olive; }
  13     #test2 { position: absolute; background: green; }
  14     #test3 { position: absolute; bottom: 0; right: 100px; background: olive; }
  15   </style>
  16 </head>
  17 <body>
  18   <p>On the left, you should see three blocks that are aligned left within a black box.  They should
  19     be stacked vertically with the green box in between two olive boxes.  The olive boxes and the green
  20     box should be 100x100, and there should be 100 pixels of padding on the right side of the box stack.
  21   </p>
  22   <p>On the right, you should see two blocks that are centered within a black box.  They should be
  23     stacked vertically with the green box below the olive box. The olive box and the green box should
  24     be 100x100, and there should be 100 pixels of padding on either side of the box stack.
  25   </p>
  26   <div id="cbOne" class="containingBlock">
  27     <table cellspacing="0" cellpadding="0">
  28       <tr>
  29         <td>
  30           <div id="test1" class="box"></div>
  31           <div id="test2" class="box"></div>
  32           <div id="test3" class="box"></div>
  33         </td>
  34       </tr>
  35     </table>
  36   </div>
  37   <div id="cbTwo" class="containingBlock">
  38     <div>
  39       <div id="test1" class="box"></div>
  40       <div id="test2" class="box"></div>
  41     </div>
  42   </div>
  43 </body>
  44 </html>