2006-05-13 Sam Weinig <sam.weinig@gmail.com>
[WebKit-https.git] / LayoutTests / fast / css / absolute-poition-in-rtl-parent.html
index 8f55c32c779a3ece61a9b19aebe4701f85eac50b..8bf3ef49ee8f6a0eab68bafae8e18035f2fb03fd 100644 (file)
@@ -1,32 +1,44 @@
 <html>
-<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 style="position:fixed;width:200px;height:300px;border:20px solid black;">
-<table style="direction:rtl; width:100px;" cellspacing="0" cellpadding="0">
-<tr> 
-<td>
-<div style="width:100px; height:100px; background:olive;"></div>
-<div style="position:absolute; width:100px; height:100px; background:green;"></div>
-<div style="position:absolute; width:100px; height:100px; background:olive; bottom:0; right:100px;"></div>
-</td>
-</tr>
-</table>
-</div>
-<div style="position:fixed;width:300px;height:200px;border:20px solid black; left:300px;">
-<div style="direction:rtl; width:200px;">
-<div style="width:100px; height:100px; background:olive;"></div>
-<div style="position:absolute; width:100px; height:100px; background:green;"></div>
-</div>
-</div>
+<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>