<html>
<head>
  <title>Absolute Position in RTL parent</title>
  <style>
    .containingBlock { position: fixed; border: 20px solid black; }
    #cbOne { width: 200px; height: 300px; }
    #cbOne > table { direction: rtl; width: 100px; }
    #cbTwo { width: 300px; height: 200px; left: 300px; }
    #cbTwo > div { position: relative; direction: rtl; width: 200px; }

    .box { width: 100px; height: 100px; }
    #test1 { background: olive; }
    #test2 { position: absolute; background: green; }
    #test3 { position: absolute; bottom: 0; right: 100px; background: olive; }   
  </style>
</head>
<body>
  <p>On the left, you should see three blocks that are aligned left within a black box.  They should
    be stacked vertically with the green box in between two olive boxes.  The olive boxes and the green
    box should be 100x100, and there should be 100 pixels of padding on the right side of the box stack.
  </p>
  <p>On the right, you should see two blocks that are centered within a black box.  They should be
    stacked vertically with the green box below the olive box. The olive box and the green box should
    be 100x100, and there should be 100 pixels of padding on either side of the box stack.
  </p>
  <div id="cbOne" class="containingBlock">
    <table cellspacing="0" cellpadding="0">
      <tr> 
        <td>
          <div id="test1" class="box"></div>
          <div id="test2" class="box"></div>
          <div id="test3" class="box"></div>
        </td>
      </tr>
    </table>
  </div>
  <div id="cbTwo" class="containingBlock">
    <div>
      <div id="test1" class="box"></div>
      <div id="test2" class="box"></div>
    </div>
  </div>
</body>
</html>
