Bug 63895 (Part 3) - Add tests for positioned internal table objects serving as absolute containing blocks. r=dbaron
authorSeth Fowler <seth@mozilla.com>
Mon, 10 Mar 2014 15:41:21 -0700
changeset 172883 84e4b2ecb19ba5d12b6109a6790e76c39ebac67d
parent 172882 677d07d6cadb42e4640f99c9b3a632b2794c03bf
child 172884 636a4f14af757b845d554d89d9799d87c683c802
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersdbaron
bugs63895
milestone30.0a1
Bug 63895 (Part 3) - Add tests for positioned internal table objects serving as absolute containing blocks. r=dbaron
layout/reftests/abs-pos/reftest.list
layout/reftests/abs-pos/table-cell-1.html
layout/reftests/abs-pos/table-cell-2.html
layout/reftests/abs-pos/table-cell-3.html
layout/reftests/abs-pos/table-cell-4.html
layout/reftests/abs-pos/table-footer-group-1.html
layout/reftests/abs-pos/table-footer-group-2.html
layout/reftests/abs-pos/table-footer-group-3.html
layout/reftests/abs-pos/table-footer-group-4.html
layout/reftests/abs-pos/table-header-group-1.html
layout/reftests/abs-pos/table-header-group-2.html
layout/reftests/abs-pos/table-header-group-3.html
layout/reftests/abs-pos/table-header-group-4.html
layout/reftests/abs-pos/table-internal-1-ref.html
layout/reftests/abs-pos/table-internal-2-ref.html
layout/reftests/abs-pos/table-internal-3-ref.html
layout/reftests/abs-pos/table-internal-4-ref.html
layout/reftests/abs-pos/table-row-1.html
layout/reftests/abs-pos/table-row-2.html
layout/reftests/abs-pos/table-row-3.html
layout/reftests/abs-pos/table-row-4.html
layout/reftests/abs-pos/table-row-group-1.html
layout/reftests/abs-pos/table-row-group-2.html
layout/reftests/abs-pos/table-row-group-3.html
layout/reftests/abs-pos/table-row-group-4.html
--- a/layout/reftests/abs-pos/reftest.list
+++ b/layout/reftests/abs-pos/reftest.list
@@ -1,15 +1,35 @@
 == font-size-wrap.html font-size-wrap-ref.html
 == abs-pos-auto-margin-1.html abs-pos-auto-margin-1-ref.html
 fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azureSkia,73,1) == auto-offset-inline-block-1.html auto-offset-inline-block-1-ref.html # bug 696670
 == fieldset-1.html fieldset-1-ref.html
 == table-1.html table-1-ref.html
 == table-2.html table-2-ref.html
 == table-3.html table-3-ref.html
+== table-cell-1.html table-internal-1-ref.html
+== table-cell-2.html table-internal-2-ref.html
+== table-cell-3.html table-internal-3-ref.html
+== table-cell-4.html table-internal-4-ref.html
+== table-row-1.html table-internal-1-ref.html
+== table-row-2.html table-internal-2-ref.html
+== table-row-3.html table-internal-3-ref.html
+== table-row-4.html table-internal-4-ref.html
+== table-row-group-1.html table-internal-1-ref.html
+== table-row-group-2.html table-internal-2-ref.html
+== table-row-group-3.html table-internal-3-ref.html
+== table-row-group-4.html table-internal-4-ref.html
+== table-header-group-1.html table-internal-1-ref.html
+== table-header-group-2.html table-internal-2-ref.html
+== table-header-group-3.html table-internal-3-ref.html
+== table-header-group-4.html table-internal-4-ref.html
+== table-footer-group-1.html table-internal-1-ref.html
+== table-footer-group-2.html table-internal-2-ref.html
+== table-footer-group-3.html table-internal-3-ref.html
+== table-footer-group-4.html table-internal-4-ref.html
 == continuation-positioned-inline-1.html continuation-positioned-inline-ref.html
 == continuation-positioned-inline-2.html continuation-positioned-inline-ref.html
 == scrollframe-1.html scrollframe-1-ref.html
 skip-if(B2G) fuzzy-if(Android,9,185) == scrollframe-2.html scrollframe-2-ref.html #bug 756530
 fuzzy-if(gtk2Widget,1,8) == select-1.html select-1-ref.html
 fuzzy-if(gtk2Widget,1,8) == select-1-dynamic.html select-1-ref.html
 == select-2.html select-2-ref.html
 fuzzy-if(gtk2Widget,1,19) fuzzy-if(Android||B2G,17,726) == select-3.html select-3-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-cell-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <table>
+      <tr>
+        <td id="rel">
+          <div class="abs"></div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-cell-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div style="position: relative">
+      <table>
+        <tr>
+          <td id="rel">
+            <div class="abs"></div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-cell-3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr style="height: 100%">
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td id="rel">
+          <div id="abs"></div>
+        </td>
+        <td></td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-cell-4.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td, div {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 200px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <colgroup>
+        <col style="width: 15%">
+        <col>
+      </colgroup>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td id="rel">
+          <div id="abs"></div>
+        </td>
+        <td></td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-footer-group-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <table>
+      <tfoot id="rel">
+        <tr>
+          <td>
+            <div class="abs"></div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-footer-group-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div style="position: relative">
+      <table>
+        <tfoot id="rel">
+          <tr>
+            <td>
+              <div class="abs"></div>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-footer-group-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <tbody>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr style="height: 100%">
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+      <tfoot id="rel">
+        <tr>
+          <td></td>
+          <td>
+            <div id="abs"></div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-footer-group-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 200px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <colgroup>
+        <col style="width: 15%">
+        <col>
+      </colgroup>
+      <tbody>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+      <tfoot id="rel">
+        <tr>
+          <td></td>
+          <td>
+            <div id="abs"></div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-header-group-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <table>
+      <thead id="rel">
+        <tr>
+          <td>
+            <div class="abs"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-header-group-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div style="position: relative">
+      <table>
+        <thead id="rel">
+          <tr>
+            <td>
+              <div class="abs"></div>
+            </td>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-header-group-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <thead>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr style="height: 100%">
+          <td></td>
+          <td></td>
+        </tr>
+      </thead>
+      <thead id="rel">
+        <tr>
+          <td></td>
+          <td>
+            <div id="abs"></div>
+          </td>
+        </tr>
+      </thead>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-header-group-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 200px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <colgroup>
+        <col style="width: 15%">
+        <col>
+      </colgroup>
+      <thead>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+      </thead>
+      <thead id="rel">
+        <tr>
+          <td></td>
+          <td>
+            <div id="abs"></div>
+          </td>
+        </tr>
+      </thead>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-internal-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 2px;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div id="rel">
+      <div class="abs"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-internal-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 2px;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div style="position: relative">
+      <div id="rel">
+        <div class="abs"></div>
+      </div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-internal-3-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr style="height: 100%">
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>
+          <div id="rel">
+            <div id="abs"></div>
+          </div>
+        </td>
+        <td></td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-internal-4-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td, div {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+        height: 1px;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 200.5px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <colgroup>
+        <col style="width: 15%">
+        <col>
+      </colgroup>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>
+          <div id="rel">
+            <div id="abs"></div>
+          </div>
+        </td>
+        <td></td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <table>
+      <tr id="rel">
+        <td>
+          <div class="abs"></div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div style="position: relative">
+      <table>
+        <tr id="rel">
+          <td>
+            <div class="abs"></div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr style="height: 100%">
+        <td></td>
+        <td></td>
+      </tr>
+      <tr id="rel">
+        <td></td>
+        <td>
+          <div id="abs"></div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-4.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td, div {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 200px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <colgroup>
+        <col style="width: 15%">
+        <col>
+      </colgroup>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr id="rel">
+        <td></td>
+        <td>
+          <div id="abs"></div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-group-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <table>
+      <tbody id="rel">
+        <tr>
+          <td>
+            <div class="abs"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-group-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      .abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+      #bad {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not completely cover the blue square.
+    <div class="abs" id="bad"></div>
+    <div style="position: relative">
+      <table>
+        <tbody id="rel">
+          <tr>
+            <td>
+              <div class="abs"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-group-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 25px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <thead>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr style="height: 100%">
+          <td></td>
+          <td></td>
+        </tr>
+      </thead>
+      <tbody id="rel">
+        <tr>
+          <td></td>
+          <td>
+            <div id="abs"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/abs-pos/table-row-group-4.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      table {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+      }
+      td {
+        margin: 0;
+        padding: 0;
+      }
+      #rel {
+        position: relative;
+        margin: 0;
+        padding: 0;
+      }
+      #abs {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        top: 200px;
+        left: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    The green square should not touch the blue square.
+    <table>
+      <colgroup>
+        <col style="width: 15%">
+        <col>
+      </colgroup>
+      <thead>
+        <tr>
+          <td></td>
+          <td></td>
+        </tr>
+      </thead>
+      <tbody id="rel">
+        <tr>
+          <td></td>
+          <td>
+            <div id="abs"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>