summaryrefslogtreecommitdiffstats
path: root/layout/reftests/position-relative
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--layout/reftests/position-relative/1115999-1-ref.html15
-rw-r--r--layout/reftests/position-relative/1115999-1.html28
-rw-r--r--layout/reftests/position-relative/1409114-1-ref.html11
-rw-r--r--layout/reftests/position-relative/1409114-1.html11
-rw-r--r--layout/reftests/position-relative/1409114-2.html12
-rw-r--r--layout/reftests/position-relative/1409114-3.html13
-rw-r--r--layout/reftests/position-relative/reftest.list12
-rw-r--r--layout/reftests/position-relative/table-collapse-1-ref.html180
-rw-r--r--layout/reftests/position-relative/table-collapse-1.html80
-rw-r--r--layout/reftests/position-relative/table-collapse-2-ref.html180
-rw-r--r--layout/reftests/position-relative/table-collapse-2.html82
-rw-r--r--layout/reftests/position-relative/table-collapse-3-ref.html180
-rw-r--r--layout/reftests/position-relative/table-collapse-3.html80
-rw-r--r--layout/reftests/position-relative/table-collapse-4-ref.html183
-rw-r--r--layout/reftests/position-relative/table-collapse-4.html85
-rw-r--r--layout/reftests/position-relative/table-separate-1-ref.html179
-rw-r--r--layout/reftests/position-relative/table-separate-1.html80
-rw-r--r--layout/reftests/position-relative/table-separate-2-ref.html179
-rw-r--r--layout/reftests/position-relative/table-separate-2.html82
-rw-r--r--layout/reftests/position-relative/table-separate-3-ref.html179
-rw-r--r--layout/reftests/position-relative/table-separate-3.html80
-rw-r--r--layout/reftests/position-relative/table-separate-4-ref.html182
-rw-r--r--layout/reftests/position-relative/table-separate-4.html85
23 files changed, 2198 insertions, 0 deletions
diff --git a/layout/reftests/position-relative/1115999-1-ref.html b/layout/reftests/position-relative/1115999-1-ref.html
new file mode 100644
index 0000000000..005a15bb89
--- /dev/null
+++ b/layout/reftests/position-relative/1115999-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1115999</title>
+<style>
+html { overflow: hidden }
+html, body { margin: 0; border: 0; }
+table, tr, td { border: none; margin: 0; padding: 0; border-spacing: 0 }
+</style>
+
+<table>
+ <tr>
+ <td>one</td>
+ <td>two</td>
+ <td></td>
+ </tr>
+</table>
diff --git a/layout/reftests/position-relative/1115999-1.html b/layout/reftests/position-relative/1115999-1.html
new file mode 100644
index 0000000000..99ff98c5fa
--- /dev/null
+++ b/layout/reftests/position-relative/1115999-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1115999</title>
+<style>
+html { overflow: hidden }
+html, body { margin: 0; border: 0; }
+table, tr, td { border: none; margin: 0; padding: 0; border-spacing: 0 }
+</style>
+
+<table>
+ <tr>
+ <td>o</td>
+ <td style="position: relative">two</td>
+ </tr>
+</table>
+<script>
+
+document.body.offsetHeight;
+
+var row = document.getElementsByTagName("tr")[0];
+var cell = row.firstElementChild;
+cell.textContent = "one";
+
+document.body.offsetHeight;
+
+// Force a call to nsTableFrame::SetGeometryDirty.
+row.appendChild(document.createElement("td"));
+
+</script>
diff --git a/layout/reftests/position-relative/1409114-1-ref.html b/layout/reftests/position-relative/1409114-1-ref.html
new file mode 100644
index 0000000000..9271ec8b6d
--- /dev/null
+++ b/layout/reftests/position-relative/1409114-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+<table>
+ <col style="background:green">
+ <tr>
+ <td style="width:20px; height:20px"></td>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/position-relative/1409114-1.html b/layout/reftests/position-relative/1409114-1.html
new file mode 100644
index 0000000000..988ecab1ef
--- /dev/null
+++ b/layout/reftests/position-relative/1409114-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+<table>
+ <col style="background:green">
+ <tr>
+ <td style="position:relative; left:-100px; width:20px; height:20px"></td>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/position-relative/1409114-2.html b/layout/reftests/position-relative/1409114-2.html
new file mode 100644
index 0000000000..06d644d5e4
--- /dev/null
+++ b/layout/reftests/position-relative/1409114-2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<body style="overflow:hidden">
+<table style="position:relative; top:-50px">
+ <col style="background:green; width: 40px;">
+ <tr style="position:relative; left:-100px; height: 40px">
+ <td rowspan=2></td>
+ </tr>
+ <tr style="height: 40px"></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/position-relative/1409114-3.html b/layout/reftests/position-relative/1409114-3.html
new file mode 100644
index 0000000000..cfd01561d6
--- /dev/null
+++ b/layout/reftests/position-relative/1409114-3.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body style="overflow:hidden">
+<table style="position:relative; top:-50px">
+ <tbody style="background:green">
+ <tr style="position:relative; left:-100px; height: 40px">
+ <td rowspan=2 style="width: 40px;"></td>
+ </tr>
+ <tr style="height: 40px"></tr>
+ </tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/position-relative/reftest.list b/layout/reftests/position-relative/reftest.list
new file mode 100644
index 0000000000..495588ab79
--- /dev/null
+++ b/layout/reftests/position-relative/reftest.list
@@ -0,0 +1,12 @@
+== 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
+== 1115999-1.html 1115999-1-ref.html
+== 1409114-1.html 1409114-1-ref.html
+!= 1409114-2.html about:blank
+!= 1409114-3.html about:blank
diff --git a/layout/reftests/position-relative/table-collapse-1-ref.html b/layout/reftests/position-relative/table-collapse-1-ref.html
new file mode 100644
index 0000000000..e2f9edd472
--- /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>
diff --git a/layout/reftests/position-relative/table-collapse-1.html b/layout/reftests/position-relative/table-collapse-1.html
new file mode 100644
index 0000000000..80ee9fe220
--- /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>
diff --git a/layout/reftests/position-relative/table-collapse-2-ref.html b/layout/reftests/position-relative/table-collapse-2-ref.html
new file mode 100644
index 0000000000..f99d2ef74f
--- /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>
diff --git a/layout/reftests/position-relative/table-collapse-2.html b/layout/reftests/position-relative/table-collapse-2.html
new file mode 100644
index 0000000000..c1c96d8301
--- /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>
diff --git a/layout/reftests/position-relative/table-collapse-3-ref.html b/layout/reftests/position-relative/table-collapse-3-ref.html
new file mode 100644
index 0000000000..e2c6d43b46
--- /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>
diff --git a/layout/reftests/position-relative/table-collapse-3.html b/layout/reftests/position-relative/table-collapse-3.html
new file mode 100644
index 0000000000..00d8539b02
--- /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>
diff --git a/layout/reftests/position-relative/table-collapse-4-ref.html b/layout/reftests/position-relative/table-collapse-4-ref.html
new file mode 100644
index 0000000000..cca38899cf
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-4-ref.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<head>
+ <style>
+ html {
+ line-height: 1.25;
+ }
+ 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>
diff --git a/layout/reftests/position-relative/table-collapse-4.html b/layout/reftests/position-relative/table-collapse-4.html
new file mode 100644
index 0000000000..2b227caae3
--- /dev/null
+++ b/layout/reftests/position-relative/table-collapse-4.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<head>
+ <style>
+ html {
+ line-height: 1.25;
+ }
+ 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>
diff --git a/layout/reftests/position-relative/table-separate-1-ref.html b/layout/reftests/position-relative/table-separate-1-ref.html
new file mode 100644
index 0000000000..b46232714d
--- /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>
diff --git a/layout/reftests/position-relative/table-separate-1.html b/layout/reftests/position-relative/table-separate-1.html
new file mode 100644
index 0000000000..d97fa15d8a
--- /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>
diff --git a/layout/reftests/position-relative/table-separate-2-ref.html b/layout/reftests/position-relative/table-separate-2-ref.html
new file mode 100644
index 0000000000..90d7c6884b
--- /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>
diff --git a/layout/reftests/position-relative/table-separate-2.html b/layout/reftests/position-relative/table-separate-2.html
new file mode 100644
index 0000000000..583771328c
--- /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>
diff --git a/layout/reftests/position-relative/table-separate-3-ref.html b/layout/reftests/position-relative/table-separate-3-ref.html
new file mode 100644
index 0000000000..5276531517
--- /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>
diff --git a/layout/reftests/position-relative/table-separate-3.html b/layout/reftests/position-relative/table-separate-3.html
new file mode 100644
index 0000000000..a739fb7712
--- /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>
diff --git a/layout/reftests/position-relative/table-separate-4-ref.html b/layout/reftests/position-relative/table-separate-4-ref.html
new file mode 100644
index 0000000000..bfb5007c82
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-4-ref.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<head>
+ <style>
+ html {
+ line-height: 1.25;
+ }
+ 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>
diff --git a/layout/reftests/position-relative/table-separate-4.html b/layout/reftests/position-relative/table-separate-4.html
new file mode 100644
index 0000000000..8febf8f237
--- /dev/null
+++ b/layout/reftests/position-relative/table-separate-4.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<head>
+ <style>
+ html {
+ line-height: 1.25;
+ }
+ 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>