Bug 35168 (Part 3) - Add tests for table part relative positioning. r=dbaron
authorSeth Fowler <seth@mozilla.com>
Tue, 19 Aug 2014 18:24:58 -0700
changeset 246997 c8fd5af3c60c30df11c86d07276510034b244551
parent 246996 853447a587aa3059dfec85f9b45e169c725e61cf
child 246998 a5923764a6159561f786ea406e18bf00ef00e439
push id4489
push userraliiev@mozilla.com
push dateMon, 23 Feb 2015 15:17:55 +0000
treeherdermozilla-beta@fd7c3dc24146 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs35168
milestone37.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 35168 (Part 3) - Add tests for table part relative positioning. r=dbaron
layout/reftests/position-relative/reftest.list
layout/reftests/position-relative/table-collapse-1-ref.html
layout/reftests/position-relative/table-collapse-1.html
layout/reftests/position-relative/table-collapse-2-ref.html
layout/reftests/position-relative/table-collapse-2.html
layout/reftests/position-relative/table-collapse-3-ref.html
layout/reftests/position-relative/table-collapse-3.html
layout/reftests/position-relative/table-collapse-4-ref.html
layout/reftests/position-relative/table-collapse-4.html
layout/reftests/position-relative/table-separate-1-ref.html
layout/reftests/position-relative/table-separate-1.html
layout/reftests/position-relative/table-separate-2-ref.html
layout/reftests/position-relative/table-separate-2.html
layout/reftests/position-relative/table-separate-3-ref.html
layout/reftests/position-relative/table-separate-3.html
layout/reftests/position-relative/table-separate-4-ref.html
layout/reftests/position-relative/table-separate-4.html
layout/reftests/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/reftest.list
@@ -0,0 +1,8 @@
+== table-collapse-1.html table-collapse-1-ref.html
+== table-collapse-2.html table-collapse-2-ref.html
+== table-collapse-3.html table-collapse-3-ref.html
+== table-collapse-4.html table-collapse-4-ref.html
+== table-separate-1.html table-separate-1-ref.html
+== table-separate-2.html table-separate-2-ref.html
+== table-separate-3.html table-separate-3-ref.html
+== table-separate-4.html table-separate-4-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-1-ref.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: collapse;
+      position: absolute;
+    }
+    #first-table {
+      left: 0px;
+    }
+    #second-table {
+      left: 100px;
+    }
+    #third-table {
+      left: 200px;
+    }
+    #fourth-table {
+      left: 300px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    #first-table td {
+      border-color: gold;
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey show-text">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white show-text">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-1.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: collapse;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      left: 100px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-2-ref.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: collapse;
+      position: absolute;
+    }
+    #first-table {
+      left: 300px;
+    }
+    #second-table {
+      left: 200px;
+    }
+    #third-table {
+      left: 100px;
+    }
+    #fourth-table {
+      left: 0px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    #first-table td {
+      border-color: gold;
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey show-text">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white show-text">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-2.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: collapse;
+      position: absolute;
+      left: 300px;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      right: 100px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-3-ref.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: collapse;
+      position: absolute;
+    }
+    #first-table {
+      top: 0px;
+    }
+    #second-table {
+      top: 175px;
+    }
+    #third-table {
+      top: 350px;
+    }
+    #fourth-table {
+      top: 525px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    #first-table td {
+      border-color: gold;
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey show-text">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white show-text">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-3.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: collapse;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      top: 175px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-4-ref.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: collapse;
+      position: absolute;
+    }
+    #first-table {
+      top: 525px;
+    }
+    #second-table {
+      top: 350px;
+    }
+    #third-table {
+      top: 175px;
+    }
+    #fourth-table {
+      top: 0px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    #first-table td {
+      border-color: gold;
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey show-text">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white show-text">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-4.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: collapse;
+      position: absolute;
+      top: 525px;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      bottom: 175px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-1-ref.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: separate;
+      position: absolute;
+    }
+    #first-table {
+      background-color: red;
+      left: 0px;
+    }
+    #second-table {
+      left: 100px;
+    }
+    #third-table {
+      left: 200px;
+    }
+    #fourth-table {
+      left: 300px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      border-color: gold;
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-border show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-1.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: separate;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      left: 100px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-2-ref.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: separate;
+      position: absolute;
+    }
+    #first-table {
+      background-color: red;
+      left: 300px;
+    }
+    #second-table {
+      left: 200px;
+    }
+    #third-table {
+      left: 100px;
+    }
+    #fourth-table {
+      left: 0px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      border-color: gold;
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-border show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-2.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: separate;
+      position: absolute;
+      left: 300px;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      right: 100px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-3-ref.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: separate;
+      position: absolute;
+    }
+    #first-table {
+      background-color: red;
+      top: 0px;
+    }
+    #second-table {
+      top: 215px;
+    }
+    #third-table {
+      top: 430px;
+    }
+    #fourth-table {
+      top: 645px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      border-color: gold;
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-border show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-3.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: separate;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      top: 215px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-4-ref.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      border-collapse: separate;
+      position: absolute;
+    }
+    #first-table {
+      background-color: red;
+      top: 645px;
+    }
+    #second-table {
+      top: 430px;
+    }
+    #third-table {
+      top: 215px;
+    }
+    #fourth-table {
+      top: 0px;
+    }
+    td {
+      border-style: solid;
+      border-width: 5px;
+      border-color: transparent;
+      color: rgba(0,0,0,0);
+    }
+    .bg-blue {
+      background-color: blue;
+    }
+    .bg-cyan {
+      background-color: cyan;
+    }
+    .bg-grey {
+      background-color: grey;
+    }
+    .bg-green {
+      background-color: green;
+    }
+    .bg-khaki {
+      background-color: khaki;
+    }
+    .bg-purple {
+      background-color: purple;
+    }
+    .bg-white {
+      background-color: white;
+    }
+    .show-text {
+      border-color: gold;
+      color: rgba(0,0,0,1);
+    }
+  </style>
+</head>
+<body>
+  <table id="first-table">
+    <thead>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+        <td rowspan=2 class="bg-purple">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-khaki">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-khaki">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-border show-text">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="second-table">
+    <thead>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-green">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-green">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td rowspan=2 class="bg-green">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-grey">&nbsp;</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-green">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">&nbsp;</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="third-table">
+    <thead>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-blue show-text">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td rowspan=2 class="bg-blue show-text">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-green">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="bg-cyan show-text">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+  <table id="fourth-table">
+    <thead>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white" rowspan=2>YYY</td>
+      </tr>
+      <tr>
+        <td class="bg-cyan show-text">XXX</td>
+      </tr>
+      <tr>
+        <td class="bg-white" colspan=2>XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg-white">XXX</td>
+        <td class="bg-white">YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-4.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<head>
+  <style>
+    body {
+      background-color: white;
+      margin: 0;
+    }
+    table {
+      background-color: red;
+      border-collapse: separate;
+      position: absolute;
+      top: 645px;
+    }
+    thead {
+      background-color: pink;
+    }
+    tbody {
+      background-color: grey;
+    }
+    tfoot {
+      background-color: orange;
+    }
+    tr {
+      background-color: green;
+    }
+    td:first-child {
+      background-color: cyan;
+    }
+    td {
+      background-color: blue;
+      border-style: solid;
+      border-width: 5px;
+      border-color: gold;
+    }
+    colgroup {
+      background-color: purple;
+    }
+    col:first-child {
+      background-color: khaki;
+    }
+    .rel {
+      position: relative;
+      bottom: 215px;
+    }
+  </style>
+</head>
+<body>
+  <table>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <thead class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td class="rel">YYY</td>
+      </tr>
+    </thead>
+    <tbody class="rel">
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+      <tr>
+        <td>XXX</td>
+        <td rowspan=2 class="rel">YYY</td>
+      </tr>
+      <tr class="rel">
+        <td class="rel">XXX</td>
+      </tr>
+      <tr>
+        <td colspan=2 class="rel">XXX</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="rel">XXX</td>
+        <td>YYY</td>
+      </tr>
+    </tfoot>
+  </table>
+</body>
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -12,16 +12,17 @@ include reftest-sanity/reftest.list
 include ../../image/test/reftest/reftest.list
 
 # CSSWG tests
 include w3c-css/submitted/reftest.list
 include w3c-css/received/reftest.list
 
 # relative and absolute positioning
 include abs-pos/reftest.list
+include position-relative/reftest.list
 
 include async-scrolling/reftest.list
 
 # backgrounds/
 include backgrounds/reftest.list
 
 # bidi/
 include bidi/reftest.list