summaryrefslogtreecommitdiffstats
path: root/layout/reftests/table-width
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/reftests/table-width
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--layout/reftests/table-width/balancing-1-ref.html99
-rw-r--r--layout/reftests/table-width/balancing-1.html106
-rw-r--r--layout/reftests/table-width/balancing-2-ref.html76
-rw-r--r--layout/reftests/table-width/balancing-2.html99
-rw-r--r--layout/reftests/table-width/cell-pref-width-border-box-ref.html29
-rw-r--r--layout/reftests/table-width/cell-pref-width-border-box.html30
-rw-r--r--layout/reftests/table-width/cellpadding-ref.html11
-rw-r--r--layout/reftests/table-width/cellpadding.html11
-rw-r--r--layout/reftests/table-width/cellspacing-ref.html19
-rw-r--r--layout/reftests/table-width/cellspacing.html24
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-1-ref.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-1.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-2-ref.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-2.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-3-ref.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-3.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-4-ref.html12
-rw-r--r--layout/reftests/table-width/colgroup-vs-column-4.html12
-rw-r--r--layout/reftests/table-width/colspan-distribute-to-empty-1-ref.html14
-rw-r--r--layout/reftests/table-width/colspan-distribute-to-empty-1a.html12
-rw-r--r--layout/reftests/table-width/colspan-distribute-to-empty-1b.html12
-rw-r--r--layout/reftests/table-width/colspan-distribute-to-empty-2-ref.html13
-rw-r--r--layout/reftests/table-width/colspan-distribute-to-empty-2.html11
-rw-r--r--layout/reftests/table-width/colspan-percent-distribution-1-ref.html25
-rw-r--r--layout/reftests/table-width/colspan-percent-distribution-1.html25
-rw-r--r--layout/reftests/table-width/colspan-percent-distribution-2-ref.html30
-rw-r--r--layout/reftests/table-width/colspan-percent-distribution-2.html29
-rw-r--r--layout/reftests/table-width/conflicting-percent-widths-1-ref.html29
-rw-r--r--layout/reftests/table-width/conflicting-percent-widths-1.html29
-rw-r--r--layout/reftests/table-width/conflicting-percent-widths-2-ref.html42
-rw-r--r--layout/reftests/table-width/conflicting-percent-widths-2.html42
-rw-r--r--layout/reftests/table-width/conflicting-percent-widths-3-ref.html44
-rw-r--r--layout/reftests/table-width/conflicting-percent-widths-3.html44
-rw-r--r--layout/reftests/table-width/conflicting-widths-1.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-10-ref.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-10.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-2.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-3.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-4.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-5-ref.html26
-rw-r--r--layout/reftests/table-width/conflicting-widths-5.html26
-rw-r--r--layout/reftests/table-width/conflicting-widths-6-ref.html26
-rw-r--r--layout/reftests/table-width/conflicting-widths-6.html26
-rw-r--r--layout/reftests/table-width/conflicting-widths-7-ref.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-7.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-8-ref.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-8.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-9-ref.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-9.html27
-rw-r--r--layout/reftests/table-width/conflicting-widths-ref-100xx.html27
-rw-r--r--layout/reftests/table-width/default-box-sizing-collapse-quirks-ref.html51
-rw-r--r--layout/reftests/table-width/default-box-sizing-collapse-quirks.html47
-rw-r--r--layout/reftests/table-width/default-box-sizing-collapse-standards-ref.html52
-rw-r--r--layout/reftests/table-width/default-box-sizing-collapse-standards.html48
-rw-r--r--layout/reftests/table-width/default-box-sizing-separate-quirks-ref.html41
-rw-r--r--layout/reftests/table-width/default-box-sizing-separate-quirks.html46
-rw-r--r--layout/reftests/table-width/default-box-sizing-separate-standards-ref.html42
-rw-r--r--layout/reftests/table-width/default-box-sizing-separate-standards.html47
-rw-r--r--layout/reftests/table-width/distribute-percent-nonoriginating-ref.html7
-rw-r--r--layout/reftests/table-width/distribute-percent-nonoriginating.html7
-rw-r--r--layout/reftests/table-width/dynamic-fixed-layout-1-ref.html17
-rw-r--r--layout/reftests/table-width/dynamic-fixed-layout-1.html27
-rw-r--r--layout/reftests/table-width/min-width-ref.html9
-rw-r--r--layout/reftests/table-width/min-width.html19
-rw-r--r--layout/reftests/table-width/percent-basis-ref.html65
-rw-r--r--layout/reftests/table-width/percent-basis.html64
-rw-r--r--layout/reftests/table-width/percent-large-min-ref.html29
-rw-r--r--layout/reftests/table-width/percent-large-min.html29
-rw-r--r--layout/reftests/table-width/percent-large-nested-ref.html36
-rw-r--r--layout/reftests/table-width/percent-large-nested.html36
-rw-r--r--layout/reftests/table-width/percent-large-ref.html27
-rw-r--r--layout/reftests/table-width/percent-large.html27
-rw-r--r--layout/reftests/table-width/percent-small-2-ref.html32
-rw-r--r--layout/reftests/table-width/percent-small-2.html32
-rw-r--r--layout/reftests/table-width/percent-small-min-ref.html29
-rw-r--r--layout/reftests/table-width/percent-small-min.html29
-rw-r--r--layout/reftests/table-width/percent-small-nested-ref.html36
-rw-r--r--layout/reftests/table-width/percent-small-nested.html36
-rw-r--r--layout/reftests/table-width/percent-small-ref.html27
-rw-r--r--layout/reftests/table-width/percent-small.html27
-rw-r--r--layout/reftests/table-width/percent-truncation-1-ref.html28
-rw-r--r--layout/reftests/table-width/percent-truncation-1.html28
-rw-r--r--layout/reftests/table-width/percent-truncation-2-ref.html31
-rw-r--r--layout/reftests/table-width/percent-truncation-2.html31
-rw-r--r--layout/reftests/table-width/percent-truncation-3-ref.html33
-rw-r--r--layout/reftests/table-width/percent-truncation-3.html31
-rw-r--r--layout/reftests/table-width/percent-zero-ref.html32
-rw-r--r--layout/reftests/table-width/percent-zero.html32
-rw-r--r--layout/reftests/table-width/pref-width-ref.html9
-rw-r--r--layout/reftests/table-width/pref-width.html19
-rw-r--r--layout/reftests/table-width/reftest.list66
-rw-r--r--layout/reftests/table-width/shrink-wrap-avail-ref.html30
-rw-r--r--layout/reftests/table-width/shrink-wrap-avail.html30
-rw-r--r--layout/reftests/table-width/shrink-wrap-min-ref.html30
-rw-r--r--layout/reftests/table-width/shrink-wrap-min.html30
-rw-r--r--layout/reftests/table-width/shrink-wrap-pref-ref.html30
-rw-r--r--layout/reftests/table-width/shrink-wrap-pref.html30
-rw-r--r--layout/reftests/table-width/spacing-invariance-quirks-min-ref.html29
-rw-r--r--layout/reftests/table-width/spacing-invariance-quirks-min.html27
-rw-r--r--layout/reftests/table-width/spacing-invariance-quirks-pref-ref.html29
-rw-r--r--layout/reftests/table-width/spacing-invariance-quirks-pref.html27
-rw-r--r--layout/reftests/table-width/spacing-invariance-standards-min-ref.html30
-rw-r--r--layout/reftests/table-width/spacing-invariance-standards-min.html28
-rw-r--r--layout/reftests/table-width/spacing-invariance-standards-pref-ref.html30
-rw-r--r--layout/reftests/table-width/spacing-invariance-standards-pref.html28
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-1-fixed-ref.html24
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-1-large-fixed.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-1-large.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-1-ref.html24
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-1-small-fixed.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-1-small.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-2-fixed-ref.html24
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-2-large-fixed.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-2-large.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-2-ref.html24
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-2-small-fixed.html25
-rw-r--r--layout/reftests/table-width/spanning-cell-sort-2-small.html25
117 files changed, 3521 insertions, 0 deletions
diff --git a/layout/reftests/table-width/balancing-1-ref.html b/layout/reftests/table-width/balancing-1-ref.html
new file mode 100644
index 0000000000..16d2ad2a50
--- /dev/null
+++ b/layout/reftests/table-width/balancing-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Balancing of tables (shrinking)</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 3px;
+}
+
+tr { height: 4em; }
+
+td { background: black; background: currentColor; }
+
+body { width: 900px; }
+
+</style>
+</head>
+<body>
+
+<!--
+ cell widths are:
+ min pref pct
+ 50 150
+ 50 50
+ 50 100*
+ 50 50 50%
+
+ and the table has 15px of horizontal border-spacing
+
+ sizing to col width total
+ min 200
+ min/pct 300
+ min/spec 400
+ pref 600
+
+ -->
+
+<!-- width: 200px --><table><tr>
+<td style="color:aqua" width="50">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="50">&nbsp;</td>
+</tr></table>
+
+<!-- width: 250px --><table><tr>
+<td style="color:aqua" width="50">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="100">&nbsp;</td>
+</tr></table>
+
+<!-- width: 300px --><table><tr>
+<td style="color:aqua" width="50">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="150">&nbsp;</td>
+</tr></table>
+
+<!-- width: 350px --><table><tr>
+<td style="color:aqua" width="50">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="75">&nbsp;</td>
+<td style="color:blue" width="175">&nbsp;</td>
+</tr></table>
+
+<!-- width: 400px --><table><tr>
+<td style="color:aqua" width="50">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="100">&nbsp;</td>
+<td style="color:blue" width="200">&nbsp;</td>
+</tr></table>
+
+<!-- width: 500px --><table><tr>
+<td style="color:aqua" width="100">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="100">&nbsp;</td>
+<td style="color:blue" width="250">&nbsp;</td>
+</tr></table>
+
+<!-- width: 600px --><table><tr>
+<td style="color:aqua" width="150">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:fuchsia" width="100">&nbsp;</td>
+<td style="color:blue" width="300">&nbsp;</td>
+</tr></table>
+
+<!-- width: 800px --><table><tr>
+<td style="color:aqua" width="225">&nbsp;</td>
+<td style="color:yellow" width="75">&nbsp;</td>
+<td style="color:fuchsia" width="100">&nbsp;</td>
+<td style="color:blue" width="400">&nbsp;</td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/balancing-1.html b/layout/reftests/table-width/balancing-1.html
new file mode 100644
index 0000000000..7036b9bdf2
--- /dev/null
+++ b/layout/reftests/table-width/balancing-1.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Balancing of tables (shrinking)</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 3px;
+}
+
+tr { height: 4em; }
+
+td { background: black; background: currentColor; }
+
+td, span { line-height: 1; }
+
+span {
+ display: inline-block;
+ width: 50px;
+}
+
+body { width: 900px; }
+
+</style>
+</head>
+<body>
+
+<!--
+ cell widths are:
+ min pref pct
+ 50 150
+ 50 50
+ 50 100*
+ 50 50 50%
+
+ and the table has 15px of horizontal border-spacing
+
+ sizing to col width total
+ min 200
+ min/pct 300
+ min/spec 400
+ pref 600
+
+ -->
+
+<div style="width: 100px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<div style="width: 265px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<div style="width: 315px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<div style="width: 365px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<div style="width: 415px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<div style="width: 515px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<div style="width: 700px"><table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table></div>
+
+<table width="815"><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:fuchsia" width="100"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/balancing-2-ref.html b/layout/reftests/table-width/balancing-2-ref.html
new file mode 100644
index 0000000000..813710759b
--- /dev/null
+++ b/layout/reftests/table-width/balancing-2-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Balancing of tables (growing)</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 3px;
+}
+
+tr { height: 1.5em; }
+
+td { background: black; background: currentColor; }
+
+</style>
+</head>
+<body>
+
+<!-- width: 300px --><table><tr>
+<td style="color:aqua" width="75">&nbsp;</td>
+<td style="color:yellow" width="25">&nbsp;</td>
+<td style="color:red" width="0"></td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="150">&nbsp;</td>
+</tr></table>
+
+<!-- width: 500px --><table><tr>
+<td style="color:aqua" width="150">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:red" width="0"></td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="250">&nbsp;</td>
+</tr></table>
+
+<!-- width: 420px --><table><tr>
+<td style="color:aqua" width="105">&nbsp;</td>
+<td style="color:yellow" width="35">&nbsp;</td>
+<td style="color:red" width="0"></td>
+<td style="color:fuchsia" width="70">&nbsp;</td>
+<td style="color:blue" width="210">&nbsp;</td>
+</tr></table>
+
+<!-- width: 400px --><table><tr>
+<td style="color:aqua" width="50">&nbsp;</td>
+<td style="color:yellow" width="50">&nbsp;</td>
+<td style="color:red" width="0"></td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="250">&nbsp;</td>
+</tr></table>
+
+<!-- width: 420px --><table><tr>
+<td style="color:aqua" width="75">&nbsp;</td>
+<td style="color:yellow" width="85">&nbsp;</td>
+<td style="color:fuchsia" width="50">&nbsp;</td>
+<td style="color:blue" width="210">&nbsp;</td>
+</tr></table>
+
+<!-- width: 400px --><table><tr>
+<td style="color:aqua" width="60">&nbsp;</td>
+<td style="color:yellow" width="80">&nbsp;</td>
+<td style="color:fuchsia" width="60">&nbsp;</td>
+<td style="color:blue" width="200">&nbsp;</td>
+</tr></table>
+
+<!-- width: 400px --><table><tr>
+<td style="color:aqua" width="100">&nbsp;</td>
+<td style="color:yellow" width="100">&nbsp;</td>
+<td style="color:fuchsia" width="100">&nbsp;</td>
+<td style="color:blue" width="100">&nbsp;</td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/balancing-2.html b/layout/reftests/table-width/balancing-2.html
new file mode 100644
index 0000000000..c43f414767
--- /dev/null
+++ b/layout/reftests/table-width/balancing-2.html
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Balancing of tables (growing)</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 3px;
+}
+
+tr { height: 1.5em; }
+
+td { background: black; background: currentColor; }
+
+td, span { line-height: 1; }
+
+span {
+ display: inline-block;
+ width: 25px;
+}
+
+</style>
+</head>
+<body>
+
+<!--
+ cell widths in the first table are:
+ min pref pct
+ 25 75
+ 25 25
+ 0 0
+ 25 50*
+ 25 25 50%
+
+ and the table has 18px of horizontal border-spacing
+
+ pref width of columns is 300px
+
+ -->
+
+<table><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:red"></td>
+<td style="color:fuchsia" width="50"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+<table width="518"><tr>
+<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"><span></span></td>
+<td style="color:red"></td>
+<td style="color:fuchsia" width="50"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+<!-- XXXdholbert: Change "width: 0px" to width="0px" in next 2 cases -->
+<table width="438"><tr>
+<td style="color:aqua" width="75"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow" width="25"><span></span></td>
+<td style="color:red; width: 0px"></td>
+<td style="color:fuchsia" width="50"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+<table width="418"><tr>
+<td style="color:aqua" width="10%"><span></span></td>
+<td style="color:yellow" width="10%"><span></span></td>
+<td style="color:red; width: 0px"></td>
+<td style="color:fuchsia" width="10%"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+<table width="435"><tr>
+<td style="color:aqua" width="75"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
+<td style="color:yellow"></td>
+<td style="color:fuchsia" width="50"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+<table width="415"><tr>
+<td style="color:aqua" width="15%"><span></span></td>
+<td style="color:yellow"></td>
+<td style="color:fuchsia" width="15%"><span></span></td>
+<td style="color:blue" width="50%"><span></span></td>
+</tr></table>
+
+<table width="415"><tr>
+<td style="color:aqua"></td>
+<td style="color:yellow"></td>
+<td style="color:fuchsia"></td>
+<td style="color:blue"></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/cell-pref-width-border-box-ref.html b/layout/reftests/table-width/cell-pref-width-border-box-ref.html
new file mode 100644
index 0000000000..fb559183fd
--- /dev/null
+++ b/layout/reftests/table-width/cell-pref-width-border-box-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>
+ Test minimum cell width calculation
+ </title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+</head>
+<body>
+<style type="text/css">
+table
+{
+ vertical-align:top;
+ empty-cells:show;
+ border-collapse:collapse;
+}
+
+td
+{
+ border: solid 1px black;
+}
+</style>
+<table>
+ <tr>
+ <td>Test wrapping</td>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/cell-pref-width-border-box.html b/layout/reftests/table-width/cell-pref-width-border-box.html
new file mode 100644
index 0000000000..801c6e92e2
--- /dev/null
+++ b/layout/reftests/table-width/cell-pref-width-border-box.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>
+ Test minimum cell width calculation
+ </title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+</head>
+<body>
+<style type="text/css">
+table
+{
+ vertical-align:top;
+ empty-cells:show;
+ border-collapse:collapse;
+}
+
+td
+{
+ box-sizing: border-box;
+ border: solid 1px black;
+}
+</style>
+<table>
+ <tr>
+ <td>Test wrapping</td>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/cellpadding-ref.html b/layout/reftests/table-width/cellpadding-ref.html
new file mode 100644
index 0000000000..60df225f6b
--- /dev/null
+++ b/layout/reftests/table-width/cellpadding-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>cellpadding</title>
+</head>
+<body>
+<table border cellpadding="0"><tr><td><div style="padding:7px">This is some text.</div></td></tr></table>
+<table border cellpadding="0"><tr><td><div style="padding:7px">This is some text.</div></td></tr></table>
+<table border cellpadding="0"><tr><td><div style="padding:3px 5px 7px 9px">This is some text.</div></td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/cellpadding.html b/layout/reftests/table-width/cellpadding.html
new file mode 100644
index 0000000000..d3c2c08457
--- /dev/null
+++ b/layout/reftests/table-width/cellpadding.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>cellpadding</title>
+</head>
+<body>
+<table border cellpadding="7"><tr><td>This is some text.</td></tr></table>
+<table border><tr><td style="padding: 7px">This is some text.</td></tr></table>
+<table border cellpadding="11"><tr><td style="padding: 3px 5px 7px 9px">This is some text.</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/cellspacing-ref.html b/layout/reftests/table-width/cellspacing-ref.html
new file mode 100644
index 0000000000..c8664ff969
--- /dev/null
+++ b/layout/reftests/table-width/cellspacing-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>cellspacing</title>
+</head>
+<body>
+
+<!-- compare to CSS border-spacing -->
+<table border style="padding: 0; border-spacing: 7px"><tr><td>This is some text.</td></tr></table>
+<table border style="padding: 0; border-spacing: 10px 7px"><tr><td>This is some text.</td></tr></table>
+
+<!-- drop borders and ensure that we get the right amount of space -->
+
+<div style="border: medium solid; margin: 1em 0; float: left; clear: left;padding: 8px">This is some text.</div>
+
+<div style="border: medium solid; margin: 1em 0; float: left; clear: left; padding: 3px 5px 7px 9px">This is some text.</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/cellspacing.html b/layout/reftests/table-width/cellspacing.html
new file mode 100644
index 0000000000..25105fe3d8
--- /dev/null
+++ b/layout/reftests/table-width/cellspacing.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>cellspacing</title>
+</head>
+<body>
+
+<!-- compare to CSS border-spacing -->
+<table border cellspacing="7" style="padding: 0"><tr><td>This is some text.</td></tr></table>
+<table border cellspacing="0" style="padding: 7px 10px"><tr><td>This is some text.</td></tr></table>
+
+
+<!-- drop borders and ensure that we get the right amount of space -->
+
+<div style="border: medium solid; margin: 1em 0; float: left; clear: left;">
+ <table border="0" cellpadding="0" cellspacing="8" style="padding: 0"><tr><td>This is some text.</td></tr></table>
+</div>
+
+<div style="border: medium solid; margin: 1em 0; float: left; clear: left;">
+ <table border="0" cellpadding="0" cellspacing="0" style="padding: 3px 5px 7px 9px"><tr><td>This is some text.</td></tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-1-ref.html b/layout/reftests/table-width/colgroup-vs-column-1-ref.html
new file mode 100644
index 0000000000..44f26c1b05
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1">
+<colgroup><col width="200"/><col width="400"/></colgroup>
+<tr><td>width is 200</td><td>width is 400</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-1.html b/layout/reftests/table-width/colgroup-vs-column-1.html
new file mode 100644
index 0000000000..0de75be80c
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1">
+<colgroup width="400"><col width="200"/><col/></colgroup>
+<tr><td>width is 200</td><td>width is 400</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-2-ref.html b/layout/reftests/table-width/colgroup-vs-column-2-ref.html
new file mode 100644
index 0000000000..6429326199
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-2-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1" width="600">
+<colgroup><col width="20%"/><col width="40%"/><col width="40%"/></colgroup>
+<tr><td>width is 20%</td><td>width is 40%</td><td>width is 40%</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-2.html b/layout/reftests/table-width/colgroup-vs-column-2.html
new file mode 100644
index 0000000000..25cd31a4ab
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1" width="600">
+<colgroup width="40%"><col width="20%"/><col/><col/></colgroup>
+<tr><td>width is 20%</td><td>width is 40%</td><td>width is 40%</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-3-ref.html b/layout/reftests/table-width/colgroup-vs-column-3-ref.html
new file mode 100644
index 0000000000..6458406418
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-3-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1">
+<colgroup><col width="200"/><col width="20%"/></colgroup>
+<tr><td>width is 200</td><td>width is 20%</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-3.html b/layout/reftests/table-width/colgroup-vs-column-3.html
new file mode 100644
index 0000000000..b932760610
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-3.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1">
+<colgroup width="20%"><col width="200"/><col/></colgroup>
+<tr><td>width is 200</td><td>width is 20%</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-4-ref.html b/layout/reftests/table-width/colgroup-vs-column-4-ref.html
new file mode 100644
index 0000000000..cf14fabed7
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-4-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1">
+<colgroup><col width="20%"/><col width="400"/></colgroup>
+<tr><td>width is 20%</td><td>width is 400</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colgroup-vs-column-4.html b/layout/reftests/table-width/colgroup-vs-column-4.html
new file mode 100644
index 0000000000..5df287720c
--- /dev/null
+++ b/layout/reftests/table-width/colgroup-vs-column-4.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Testcase for width attribute of colgroup element (bug 434733)</title>
+</head>
+<body>
+<table border="1">
+<colgroup width="400"><col width="20%"/><col/></colgroup>
+<tr><td>width is 20%</td><td>width is 400</td></tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colspan-distribute-to-empty-1-ref.html b/layout/reftests/table-width/colspan-distribute-to-empty-1-ref.html
new file mode 100644
index 0000000000..f3989ac451
--- /dev/null
+++ b/layout/reftests/table-width/colspan-distribute-to-empty-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>Distributing widths from spanning cells to empty columns</title>
+<table cellpadding="0" cellspacing="0" width="75">
+ <tr>
+ <td width="25" bgcolor="yellow" >&nbsp;</td>
+ <td width="25" bgcolor="aqua" >&nbsp;</td>
+ <td width="25" bgcolor="aqua" >&nbsp;</td>
+ </tr>
+ <tr>
+ <td width="25" bgcolor="fuchsia">&nbsp;</td>
+ <td width="25" bgcolor="fuchsia">&nbsp;</td>
+ <td width="25" bgcolor="yellow" >&nbsp;</td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/colspan-distribute-to-empty-1a.html b/layout/reftests/table-width/colspan-distribute-to-empty-1a.html
new file mode 100644
index 0000000000..2a94c7dd89
--- /dev/null
+++ b/layout/reftests/table-width/colspan-distribute-to-empty-1a.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Distributing widths from spanning cells to empty columns</title>
+<table cellpadding="0" cellspacing="0">
+ <tr>
+ <td width="25" bgcolor="yellow" >&nbsp;</td>
+ <td width="50" colspan="2" bgcolor="aqua" >&nbsp;</td>
+ </tr>
+ <tr>
+ <td width="50" colspan="2" bgcolor="fuchsia">&nbsp;</td>
+ <td width="25" bgcolor="yellow" >&nbsp;</td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/colspan-distribute-to-empty-1b.html b/layout/reftests/table-width/colspan-distribute-to-empty-1b.html
new file mode 100644
index 0000000000..f43ebd89dc
--- /dev/null
+++ b/layout/reftests/table-width/colspan-distribute-to-empty-1b.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Distributing widths from spanning cells to empty columns</title>
+<table cellpadding="0" cellspacing="0" width="75">
+ <tr>
+ <td width="25" bgcolor="yellow" >&nbsp;</td>
+ <td width="50" colspan="2" bgcolor="aqua" >&nbsp;</td>
+ </tr>
+ <tr>
+ <td width="50" colspan="2" bgcolor="fuchsia">&nbsp;</td>
+ <td width="25" bgcolor="yellow" >&nbsp;</td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/colspan-distribute-to-empty-2-ref.html b/layout/reftests/table-width/colspan-distribute-to-empty-2-ref.html
new file mode 100644
index 0000000000..2ffe11fdff
--- /dev/null
+++ b/layout/reftests/table-width/colspan-distribute-to-empty-2-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<table width="250" cellpadding="0" border="0" cellspacing="0">
+<tr>
+<td width="50" bgcolor=yellow>50
+<td width="180" bgcolor=aqua>This is a cell with enough text in it to wrap.
+<td width="20" bgcolor=lime><span style="display:inline-block"></span>
+</table>
+<table width="250" cellpadding="0" border="0" cellspacing="0">
+<tr>
+<td width="180" bgcolor=fuchsia>This is a cell with enough text in it to wrap.
+<td width="50" bgcolor=yellow>50
+<td width="20" bgcolor=lime><span style="display:inline-block"></span>
+</table>
diff --git a/layout/reftests/table-width/colspan-distribute-to-empty-2.html b/layout/reftests/table-width/colspan-distribute-to-empty-2.html
new file mode 100644
index 0000000000..4e563f1ed1
--- /dev/null
+++ b/layout/reftests/table-width/colspan-distribute-to-empty-2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<table width="250" cellpadding="0" border="0" cellspacing="0">
+<tr>
+<td width="50" bgcolor=yellow>50
+<td colspan="2" bgcolor=aqua>This is a cell with enough text in it to wrap.
+<td bgcolor=lime><span style="display:inline-block; width: 20px"></span>
+<tr>
+<td colspan="2" bgcolor=fuchsia>This is a cell with enough text in it to wrap.
+<td width="50" bgcolor=yellow>50
+<td bgcolor=lime><span style="display:inline-block; width: 20px"></span>
+</table>
diff --git a/layout/reftests/table-width/colspan-percent-distribution-1-ref.html b/layout/reftests/table-width/colspan-percent-distribution-1-ref.html
new file mode 100644
index 0000000000..25fa0b058e
--- /dev/null
+++ b/layout/reftests/table-width/colspan-percent-distribution-1-ref.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+<style type="text/css">
+ table { width: 200px; }
+ td { border: 1px solid black; }
+ td.a { background: lightgreen; }
+ td.b { background: orange; }
+
+ /* cellspacing=0 cellpadding=0 */
+ table { border-spacing: 0 }
+ td, th { padding: 0 }
+</style>
+</head>
+<body>
+<table>
+ <tr>
+ <td class="a" width="100%">x</td>
+ <td class="b">x</td>
+ </tr>
+ <tr>
+ <td/><td/>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colspan-percent-distribution-1.html b/layout/reftests/table-width/colspan-percent-distribution-1.html
new file mode 100644
index 0000000000..67d9c336cc
--- /dev/null
+++ b/layout/reftests/table-width/colspan-percent-distribution-1.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+<style type="text/css">
+ table { width: 200px; }
+ td { border: 1px solid black; }
+ td.a { background: lightgreen; }
+ td.b { background: orange; }
+
+ /* cellspacing=0 cellpadding=0 */
+ table { border-spacing: 0 }
+ td, th { padding: 0 }
+</style>
+</head>
+<body>
+<table>
+ <tr>
+ <td class="a" colspan="2" width="100%">x</td>
+ <td class="b">x</td>
+ </tr>
+ <tr>
+ <td/><td/><td/>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colspan-percent-distribution-2-ref.html b/layout/reftests/table-width/colspan-percent-distribution-2-ref.html
new file mode 100644
index 0000000000..89febae2d6
--- /dev/null
+++ b/layout/reftests/table-width/colspan-percent-distribution-2-ref.html
@@ -0,0 +1,30 @@
+<html>
+<head>
+<style type="text/css">
+ table { width: 200px; }
+ td.a { background: lightgreen; }
+ td.b { background: orange; }
+ td.c { background: yellow; }
+ td.d { background: lightblue; }
+ td.e { background: teal; }
+
+ /* cellspacing=0 cellpadding=0 */
+ table { border-spacing: 0 }
+ td, th { padding: 0 }
+</style>
+</head>
+<body>
+<table>
+ <tr>
+ <td class="a" style="width: 50%;">x</td>
+ <td class="a" style="width: 50%;">&nbsp</td>
+ <td class="b">x</td>
+ </tr>
+ <tr>
+ <td class="c">x</td>
+ <td class="d">x</td>
+ <td class="e">x</td>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/colspan-percent-distribution-2.html b/layout/reftests/table-width/colspan-percent-distribution-2.html
new file mode 100644
index 0000000000..e019d54ec8
--- /dev/null
+++ b/layout/reftests/table-width/colspan-percent-distribution-2.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+<style type="text/css">
+ table { width: 200px; }
+ td.a { background: lightgreen; }
+ td.b { background: orange; }
+ td.c { background: yellow; }
+ td.d { background: lightblue; }
+ td.e { background: teal; }
+
+ /* cellspacing=0 cellpadding=0 */
+ table { border-spacing: 0 }
+ td, th { padding: 0 }
+</style>
+</head>
+<body>
+<table>
+ <tr>
+ <td class="a" colspan="2" style="width: 100%;">x</td>
+ <td class="b">x</td>
+ </tr>
+ <tr>
+ <td class="c">x</td>
+ <td class="d">x</td>
+ <td class="e">x</td>
+ </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-percent-widths-1-ref.html b/layout/reftests/table-width/conflicting-percent-widths-1-ref.html
new file mode 100644
index 0000000000..b16614284c
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-percent-widths-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting percent widths on table cells</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+ <tr>
+ <td style="background: yellow" width="200">x</td>
+ <td style="background: aqua" width="200">x</td>
+ </tr>
+ <tr>
+ <td style="background: blue" width="200">x</td>
+ <td style="background: fuchsia" width="200">x</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-percent-widths-1.html b/layout/reftests/table-width/conflicting-percent-widths-1.html
new file mode 100644
index 0000000000..e998c8982a
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-percent-widths-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting percent widths on table cells</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table width="400">
+ <tr>
+ <td style="background: yellow" width="50%">x</td>
+ <td style="background: aqua">x</td>
+ </tr>
+ <tr>
+ <td style="background: blue" width="25%">x</td>
+ <td style="background: fuchsia">x</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-percent-widths-2-ref.html b/layout/reftests/table-width/conflicting-percent-widths-2-ref.html
new file mode 100644
index 0000000000..c0d86524ae
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-percent-widths-2-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting percent widths on table cells</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<!-- small percentage effect operates per-column -->
+
+<table>
+ <tr>
+ <td style="background: yellow">x</td>
+ <td style="background: aqua">x</td>
+ </tr>
+ <tr>
+ <td style="background: blue">x</td>
+ <td style="background: fuchsia">x</td>
+ </tr>
+</table>
+
+<table>
+ <tr>
+ <td style="background: fuchsia">x</td>
+ <td style="background: blue">x</td>
+ </tr>
+ <tr>
+ <td style="background: aqua">x</td>
+ <td style="background: yellow">x</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-percent-widths-2.html b/layout/reftests/table-width/conflicting-percent-widths-2.html
new file mode 100644
index 0000000000..2b0cbfd3ca
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-percent-widths-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting percent widths on table cells</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<!-- small percentage effect operates per-column -->
+
+<table>
+ <tr>
+ <td style="background: yellow" width="1%">x</td>
+ <td style="background: aqua">x</td>
+ </tr>
+ <tr>
+ <td style="background: blue" width="50%">x</td>
+ <td style="background: fuchsia">x</td>
+ </tr>
+</table>
+
+<table>
+ <tr>
+ <td style="background: fuchsia">x</td>
+ <td style="background: blue" width="50%">x</td>
+ </tr>
+ <tr>
+ <td style="background: aqua">x</td>
+ <td style="background: yellow" width="1%">x</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-percent-widths-3-ref.html b/layout/reftests/table-width/conflicting-percent-widths-3-ref.html
new file mode 100644
index 0000000000..47e290e9a8
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-percent-widths-3-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting percent widths on table cells</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<!-- large percentage effect operates per-column -->
+
+<!-- also depends on truncation of percentages to 100% -->
+
+<table>
+ <tr>
+ <td style="background: yellow">x</td>
+ <td style="background: aqua">x</td>
+ </tr>
+ <tr>
+ <td style="background: blue">x</td>
+ <td style="background: fuchsia">x</td>
+ </tr>
+</table>
+
+<table>
+ <tr>
+ <td style="background: blue">x</td>
+ <td style="background: fuchsia">x</td>
+ </tr>
+ <tr>
+ <td style="background: yellow">x</td>
+ <td style="background: aqua">x</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-percent-widths-3.html b/layout/reftests/table-width/conflicting-percent-widths-3.html
new file mode 100644
index 0000000000..4a06e1426a
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-percent-widths-3.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting percent widths on table cells</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<!-- large percentage effect operates per-column -->
+
+<!-- also depends on truncation of percentages to 100% -->
+
+<table>
+ <tr>
+ <td style="background: yellow" width="50%">x</td>
+ <td style="background: aqua" width="99%">x</td>
+ </tr>
+ <tr>
+ <td style="background: blue" width="50%">x</td>
+ <td style="background: fuchsia" width="50%">x</td>
+ </tr>
+</table>
+
+<table>
+ <tr>
+ <td style="background: blue" width="50%">x</td>
+ <td style="background: fuchsia" width="50%">x</td>
+ </tr>
+ <tr>
+ <td style="background: yellow" width="50%">x</td>
+ <td style="background: aqua" width="99%">x</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-1.html b/layout/reftests/table-width/conflicting-widths-1.html
new file mode 100644
index 0000000000..707164741a
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background: yellow">x</td></tr>
+<tr><td style="background:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-10-ref.html b/layout/reftests/table-width/conflicting-widths-10-ref.html
new file mode 100644
index 0000000000..3fd7c4d9e9
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-10-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td style="background:aqua">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</td></tr>
+<tr><td style="background: yellow">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-10.html b/layout/reftests/table-width/conflicting-widths-10.html
new file mode 100644
index 0000000000..1799e69b10
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-10.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td style="background:aqua">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</td></tr>
+<tr><td width="100" style="background: yellow">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-2.html b/layout/reftests/table-width/conflicting-widths-2.html
new file mode 100644
index 0000000000..f49496ab7d
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td style="background: yellow">x</td></tr>
+<tr><td width="100" style="background:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-3.html b/layout/reftests/table-width/conflicting-widths-3.html
new file mode 100644
index 0000000000..66aca58797
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background: yellow">x</td></tr>
+<tr><td width="10" style="background:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-4.html b/layout/reftests/table-width/conflicting-widths-4.html
new file mode 100644
index 0000000000..f7eb67c6c2
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-4.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="10" style="background: yellow">x</td></tr>
+<tr><td width="100" style="background:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-5-ref.html b/layout/reftests/table-width/conflicting-widths-5-ref.html
new file mode 100644
index 0000000000..1222ed1f3e
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-5-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" height="500" style="background:aqua;color:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-5.html b/layout/reftests/table-width/conflicting-widths-5.html
new file mode 100644
index 0000000000..21eaeeb100
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" height="500" style="background:aqua;color:aqua">la la la la la la la la la la la la la la la la la la la la</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-6-ref.html b/layout/reftests/table-width/conflicting-widths-6-ref.html
new file mode 100644
index 0000000000..5706206fb1
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-6-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td style="background:aqua">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-6.html b/layout/reftests/table-width/conflicting-widths-6.html
new file mode 100644
index 0000000000..ca883f4fd6
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-6.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background:aqua">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-7-ref.html b/layout/reftests/table-width/conflicting-widths-7-ref.html
new file mode 100644
index 0000000000..4781a2eea4
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-7-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background: yellow">x</td></tr>
+<tr><td width="100" height="500" style="background:aqua;color:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-7.html b/layout/reftests/table-width/conflicting-widths-7.html
new file mode 100644
index 0000000000..8fd70247f8
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-7.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background: yellow">x</td></tr>
+<tr><td height="500" style="background:aqua;color:aqua">la la la la la la la la la la la la la la la la la la la la</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-8-ref.html b/layout/reftests/table-width/conflicting-widths-8-ref.html
new file mode 100644
index 0000000000..74db7f032d
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-8-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" height="500" style="background:aqua;color:aqua">x</td></tr>
+<tr><td width="100" style="background: yellow">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-8.html b/layout/reftests/table-width/conflicting-widths-8.html
new file mode 100644
index 0000000000..d23423ee02
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-8.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td height="500" style="background:aqua;color:aqua">la la la la la la la la la la la la la la la la la la la la</td></tr>
+<tr><td width="100" style="background: yellow">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-9-ref.html b/layout/reftests/table-width/conflicting-widths-9-ref.html
new file mode 100644
index 0000000000..41a0214e27
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-9-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td style="background: yellow">x</td></tr>
+<tr><td style="background:aqua">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-9.html b/layout/reftests/table-width/conflicting-widths-9.html
new file mode 100644
index 0000000000..bc34bf94fc
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-9.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background: yellow">x</td></tr>
+<tr><td style="background:aqua">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/conflicting-widths-ref-100xx.html b/layout/reftests/table-width/conflicting-widths-ref-100xx.html
new file mode 100644
index 0000000000..c19f35d80a
--- /dev/null
+++ b/layout/reftests/table-width/conflicting-widths-ref-100xx.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Conflicting widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table>
+<tr><td width="100" style="background: yellow">x</td></tr>
+<tr><td width="100" style="background:aqua">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-collapse-quirks-ref.html b/layout/reftests/table-width/default-box-sizing-collapse-quirks-ref.html
new file mode 100644
index 0000000000..fa72151960
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-collapse-quirks-ref.html
@@ -0,0 +1,51 @@
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; padding: 10px; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 5px 3px;
+ padding: 2px 3px 4px 5px;
+ border: medium solid blue;
+ border-width: 2px 4px 6px 8px;
+}
+
+td {
+ border: medium solid aqua;
+ border-width: 2px 4px 6px 8px;
+ padding: 5px 7px 9px 11px;
+}
+
+div.inner {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div style="padding: 10px">
+ <div style="background: aqua; padding: 1px 2px 3px 4px">
+ <div style="width: 200px; padding: 1px 2px 3px 4px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner">x</div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div style="padding: 10px">
+ <div style="background: aqua; padding: 1px 2px 3px 4px">
+ <div style="padding: 1px 2px 3px 4px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner" style="width: 200px">x</div>
+ </div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-collapse-quirks.html b/layout/reftests/table-width/default-box-sizing-collapse-quirks.html
new file mode 100644
index 0000000000..59ff974ee1
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-collapse-quirks.html
@@ -0,0 +1,47 @@
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; padding: 10px; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 5px 3px;
+ padding: 2px 3px 4px 5px;
+ border: medium solid blue;
+ border-width: 2px 4px 6px 8px;
+}
+
+td {
+ border: medium solid aqua;
+ border-width: 2px 4px 6px 8px;
+ padding: 5px 7px 9px 11px;
+}
+
+td > div {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div>
+ <table width="200">
+ <tr>
+ <td><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+<div>
+ <table>
+ <tr>
+ <td width="200"><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-collapse-standards-ref.html b/layout/reftests/table-width/default-box-sizing-collapse-standards-ref.html
new file mode 100644
index 0000000000..286a0fa234
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-collapse-standards-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; padding: 10px; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 5px 3px;
+ padding: 2px 3px 4px 5px;
+ border: medium solid blue;
+ border-width: 2px 4px 6px 8px;
+}
+
+td {
+ border: medium solid aqua;
+ border-width: 2px 4px 6px 8px;
+ padding: 5px 7px 9px 11px;
+}
+
+div.inner {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div style="padding: 10px">
+ <div style="background: aqua; padding: 1px 2px 3px 4px">
+ <div style="width: 200px; padding: 1px 2px 3px 4px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner">x</div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div style="padding: 10px">
+ <div style="background: aqua; padding: 1px 2px 3px 4px">
+ <div style="padding: 1px 2px 3px 4px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner" style="width: 200px">x</div>
+ </div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-collapse-standards.html b/layout/reftests/table-width/default-box-sizing-collapse-standards.html
new file mode 100644
index 0000000000..fad1d85ab2
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-collapse-standards.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; padding: 10px; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 5px 3px;
+ padding: 2px 3px 4px 5px;
+ border: medium solid blue;
+ border-width: 2px 4px 6px 8px;
+}
+
+td {
+ border: medium solid aqua;
+ border-width: 2px 4px 6px 8px;
+ padding: 5px 7px 9px 11px;
+}
+
+td > div {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div>
+ <table width="200">
+ <tr>
+ <td><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+<div>
+ <table>
+ <tr>
+ <td width="200"><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-separate-quirks-ref.html b/layout/reftests/table-width/default-box-sizing-separate-quirks-ref.html
new file mode 100644
index 0000000000..e753436455
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-separate-quirks-ref.html
@@ -0,0 +1,41 @@
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; }
+
+div.inner {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 200px">
+ <div style="background: blue; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 8px 7px 10px">
+ <div style="background: aqua; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner">x</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div>
+ <div style="background: blue; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 8px 7px 10px">
+ <div style="background: aqua; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner" style="width: 200px">x</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-separate-quirks.html b/layout/reftests/table-width/default-box-sizing-separate-quirks.html
new file mode 100644
index 0000000000..e7072b471a
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-separate-quirks.html
@@ -0,0 +1,46 @@
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; }
+
+table {
+ border-spacing: 5px 3px;
+ padding: 2px 3px 4px 5px;
+ border: medium solid blue;
+ border-width: 2px 3px 4px 5px;
+}
+
+td {
+ border: medium solid aqua;
+ border-width: 2px 3px 4px 5px;
+ padding: 5px 7px 9px 11px;
+}
+
+td > div {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div>
+ <table width="200">
+ <tr>
+ <td><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+<div>
+ <table>
+ <tr>
+ <td width="200"><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-separate-standards-ref.html b/layout/reftests/table-width/default-box-sizing-separate-standards-ref.html
new file mode 100644
index 0000000000..5c66d6f007
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-separate-standards-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; }
+
+div.inner {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 200px">
+ <div style="background: blue; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 8px 7px 10px">
+ <div style="background: aqua; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner">x</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div>
+ <div style="background: blue; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 8px 7px 10px">
+ <div style="background: aqua; padding: 2px 3px 4px 5px">
+ <div style="background: fuchsia; padding: 5px 7px 9px 11px">
+ <div class="inner" style="width: 200px">x</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/default-box-sizing-separate-standards.html b/layout/reftests/table-width/default-box-sizing-separate-standards.html
new file mode 100644
index 0000000000..e205ce92d1
--- /dev/null
+++ b/layout/reftests/table-width/default-box-sizing-separate-standards.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>default box sizing (border-collapse: separate, standards mode)</title>
+<style type="text/css">
+
+body > div { float: left; clear: left; background: fuchsia; margin: 2px 0; }
+
+table {
+ border-spacing: 5px 3px;
+ padding: 2px 3px 4px 5px;
+ border: medium solid blue;
+ border-width: 2px 3px 4px 5px;
+}
+
+td {
+ border: medium solid aqua;
+ border-width: 2px 3px 4px 5px;
+ padding: 5px 7px 9px 11px;
+}
+
+td > div {
+ background: yellow;
+}
+
+</style>
+</head>
+<body>
+
+<div>
+ <table width="200">
+ <tr>
+ <td><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+<div>
+ <table>
+ <tr>
+ <td width="200"><div>x</div></td>
+ </tr>
+ </table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/distribute-percent-nonoriginating-ref.html b/layout/reftests/table-width/distribute-percent-nonoriginating-ref.html
new file mode 100644
index 0000000000..561ea7f415
--- /dev/null
+++ b/layout/reftests/table-width/distribute-percent-nonoriginating-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 810586</title>
+<table style="background: yellow" cellspacing="0" cellpadding="0">
+ <tr>
+ <td>Text</td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/distribute-percent-nonoriginating.html b/layout/reftests/table-width/distribute-percent-nonoriginating.html
new file mode 100644
index 0000000000..3fc918757f
--- /dev/null
+++ b/layout/reftests/table-width/distribute-percent-nonoriginating.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 810586</title>
+<table style="background: yellow" cellspacing="0" cellpadding="0">
+ <tr>
+ <td colspan="2" width="100%">Text</td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/dynamic-fixed-layout-1-ref.html b/layout/reftests/table-width/dynamic-fixed-layout-1-ref.html
new file mode 100644
index 0000000000..703fb51d56
--- /dev/null
+++ b/layout/reftests/table-width/dynamic-fixed-layout-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <body style="height: 0">
+ <table style="width: 250px; table-layout: fixed;">
+ <tr>
+ <td style="width: 100px; background: #CC99CC;">A</td>
+ <td style="width: 100px; background: #99CCCC;">B</td>
+ <td style="background: #CCCC99;">C</td>
+ </tr>
+ <tr>
+ <td style="background: #CC99CC;">D</td>
+ <td style="background: #99CCCC;">E</td>
+ <td style="background: #CCCC99;">F</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/table-width/dynamic-fixed-layout-1.html b/layout/reftests/table-width/dynamic-fixed-layout-1.html
new file mode 100644
index 0000000000..8897aa7265
--- /dev/null
+++ b/layout/reftests/table-width/dynamic-fixed-layout-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- The fixed height on the body is in fact needed to reproduce bug 735579
+ for some reason -->
+ <body style="height: 100px;">
+ <script>
+ window.onload = function() {
+ var target = document.getElementById("test-target");
+ window.targetWidth = target.getBoundingClientRect().width;
+ target.style.width = "100px";
+ document.documentElement.className = "";
+ }
+ </script>
+ <table style="width: 250px; table-layout: fixed;">
+ <tr>
+ <td style="width: 100px; background: #CC99CC;">A</td>
+ <td id="test-target" style="background: #99CCCC;">B</td>
+ <td style="background: #CCCC99;">C</td>
+ </tr>
+ <tr>
+ <td style="background: #CC99CC;">D</td>
+ <td style="background: #99CCCC;">E</td>
+ <td style="background: #CCCC99;">F</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/table-width/min-width-ref.html b/layout/reftests/table-width/min-width-ref.html
new file mode 100644
index 0000000000..82f754283a
--- /dev/null
+++ b/layout/reftests/table-width/min-width-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+</head>
+<body>
+This<br>is<br>some<br>text.
+</body>
+</html>
diff --git a/layout/reftests/table-width/min-width.html b/layout/reftests/table-width/min-width.html
new file mode 100644
index 0000000000..8b15510019
--- /dev/null
+++ b/layout/reftests/table-width/min-width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+</style>
+</head>
+<body>
+<table width="1"><tr><td>This is some text.</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-basis-ref.html b/layout/reftests/table-width/percent-basis-ref.html
new file mode 100644
index 0000000000..0c5897613a
--- /dev/null
+++ b/layout/reftests/table-width/percent-basis-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>basis of percentage widths</title>
+<style type="text/css">
+
+td { border-width: 0; }
+td div { border: 3px inset blue; padding: 3px; }
+
+</style>
+</head>
+<body>
+
+<!--
+
+ The difference between the border-box width of the table and the width allocated to the columns is:
+
+ 2px = table border-left-width
+ 9px = table padding-left
+ 25px = 5 * table border-spacing-x
+ 5px = table padding-right
+ 2px = table border-left-width
+ =================================
+ 43px
+
+ -->
+
+<table cellpadding="0" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px">
+ <tr>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ </tr>
+</table>
+
+<table cellpadding="0" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px">
+ <tr>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ </tr>
+</table>
+
+<table cellpadding="0" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px">
+ <tr>
+ <td><div style="width: 88px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 113px">x</div></td>
+ <td><div style="width: 113px">x</div></td>
+ </tr>
+</table>
+
+<table cellpadding="0" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px">
+ <tr>
+ <td><div style="width: 33px">x</div></td>
+ <td><div style="width: 23px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ <td><div style="width: 38px">x</div></td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-basis.html b/layout/reftests/table-width/percent-basis.html
new file mode 100644
index 0000000000..96e91dc999
--- /dev/null
+++ b/layout/reftests/table-width/percent-basis.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>basis of percentage widths</title>
+<style type="text/css">
+
+td { border: 3px inset blue; }
+
+</style>
+</head>
+<body>
+
+<!--
+
+ The difference between the border-box width of the table and the width allocated to the columns is:
+
+ 2px = table border-left-width
+ 9px = table padding-left
+ 25px = 5 * table border-spacing-x
+ 5px = table padding-right
+ 2px = table border-left-width
+ =================================
+ 43px
+
+ -->
+
+<table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px">
+ <tr>
+ <td width="25%">x</td>
+ <td width="38">x</td>
+ <td><div style="width:38px">x</div></td>
+ <td><div style="width:38px">x</div></td>
+ </tr>
+</table>
+
+<table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px" width="243">
+ <tr>
+ <td width="25%">x</td>
+ <td width="38">x</td>
+ <td><div style="width:38px">x</div></td>
+ <td><div style="width:38px">x</div></td>
+ </tr>
+</table>
+
+<table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px" width="443">
+ <tr>
+ <td width="25%">x</td>
+ <td width="38">x</td>
+ <td><div style="width:38px">x</div></td>
+ <td><div style="width:38px">x</div></td>
+ </tr>
+</table>
+
+<table cellpadding="3" cellspacing="5" border="2" style="padding: 3px 5px 7px 9px" width="223">
+ <tr>
+ <td width="25%">x</td>
+ <td width="38">x</td>
+ <td><div style="width:38px">x</div></td>
+ <td><div style="width:38px">x</div></td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-large-min-ref.html b/layout/reftests/table-width/percent-large-min-ref.html
new file mode 100644
index 0000000000..1175d57b11
--- /dev/null
+++ b/layout/reftests/table-width/percent-large-min-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 1px">
+<table><tr>
+<td style="background: yellow;color:yellow">x</td>
+<td style="background:aqua;color:aqua"><div style="width:200px">x</div></td>
+</tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-large-min.html b/layout/reftests/table-width/percent-large-min.html
new file mode 100644
index 0000000000..0b79fa8cbe
--- /dev/null
+++ b/layout/reftests/table-width/percent-large-min.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 1px">
+<table><tr>
+<td style="background: yellow;color:yellow" width="50%">x</td>
+<td style="background:aqua;color:aqua"><div style="width:200px">x</div></td>
+</tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-large-nested-ref.html b/layout/reftests/table-width/percent-large-nested-ref.html
new file mode 100644
index 0000000000..e7a5340af2
--- /dev/null
+++ b/layout/reftests/table-width/percent-large-nested-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+td > table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: fuchsia;
+ color: fuchsia;
+}
+
+</style>
+</head>
+<body>
+
+<table border><tr><td>
+<table><tr>
+<td style="background: yellow;color:yellow;width:100px"><span>x</span></td>
+<td style="background:aqua;color:aqua;width:100px"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-large-nested.html b/layout/reftests/table-width/percent-large-nested.html
new file mode 100644
index 0000000000..00532a09fa
--- /dev/null
+++ b/layout/reftests/table-width/percent-large-nested.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+td > table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: fuchsia;
+ color: fuchsia;
+}
+
+</style>
+</head>
+<body>
+
+<table border><tr><td>
+<table><tr>
+<td style="background: yellow;color:yellow" width="50%"><span>x</span></td>
+<td style="background:aqua;color:aqua"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-large-ref.html b/layout/reftests/table-width/percent-large-ref.html
new file mode 100644
index 0000000000..68ba6069df
--- /dev/null
+++ b/layout/reftests/table-width/percent-large-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow;color:yellow; width: 200px">x</td>
+<td style="background:aqua;color:aqua; width: 200px">x</td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-large.html b/layout/reftests/table-width/percent-large.html
new file mode 100644
index 0000000000..d7935e1fc9
--- /dev/null
+++ b/layout/reftests/table-width/percent-large.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow;color:yellow" width="50%">x</td>
+<td style="background:aqua;color:aqua"><div style="width:200px">x</div></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-2-ref.html b/layout/reftests/table-width/percent-small-2-ref.html
new file mode 100644
index 0000000000..ccaf18ff6a
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-2-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow">xxxxx</td>
+<td style="background:aqua" width="100%">x</td>
+</tr></table>
+
+<table><tr>
+<td style="background:aqua" width="100%">x</td>
+<td style="background: yellow">xxxxx</td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-2.html b/layout/reftests/table-width/percent-small-2.html
new file mode 100644
index 0000000000..8973b06188
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow" width="1%">xxxxx</td>
+<td style="background:aqua">x</td>
+</tr></table>
+
+<table><tr>
+<td style="background:aqua">x</td>
+<td style="background: yellow" width="1%">xxxxx</td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-min-ref.html b/layout/reftests/table-width/percent-small-min-ref.html
new file mode 100644
index 0000000000..1175d57b11
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-min-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 1px">
+<table><tr>
+<td style="background: yellow;color:yellow">x</td>
+<td style="background:aqua;color:aqua"><div style="width:200px">x</div></td>
+</tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-min.html b/layout/reftests/table-width/percent-small-min.html
new file mode 100644
index 0000000000..73d1cb75a9
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-min.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 1px">
+<table><tr>
+<td style="background: yellow;color:yellow">x</td>
+<td style="background:aqua;color:aqua" width="50%"><div style="width:200px">x</div></td>
+</tr></table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-nested-ref.html b/layout/reftests/table-width/percent-small-nested-ref.html
new file mode 100644
index 0000000000..e7a5340af2
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-nested-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+td > table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: fuchsia;
+ color: fuchsia;
+}
+
+</style>
+</head>
+<body>
+
+<table border><tr><td>
+<table><tr>
+<td style="background: yellow;color:yellow;width:100px"><span>x</span></td>
+<td style="background:aqua;color:aqua;width:100px"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-nested.html b/layout/reftests/table-width/percent-small-nested.html
new file mode 100644
index 0000000000..3276a61268
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-nested.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+td > table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: fuchsia;
+ color: fuchsia;
+}
+
+</style>
+</head>
+<body>
+
+<table border><tr><td>
+<table><tr>
+<td style="background: yellow;color:yellow"><span>x</span></td>
+<td style="background:aqua;color:aqua" width="50%"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small-ref.html b/layout/reftests/table-width/percent-small-ref.html
new file mode 100644
index 0000000000..68ba6069df
--- /dev/null
+++ b/layout/reftests/table-width/percent-small-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow;color:yellow; width: 200px">x</td>
+<td style="background:aqua;color:aqua; width: 200px">x</td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-small.html b/layout/reftests/table-width/percent-small.html
new file mode 100644
index 0000000000..e540ae66d8
--- /dev/null
+++ b/layout/reftests/table-width/percent-small.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow;color:yellow">x</td>
+<td style="background:aqua;color:aqua" width="50%"><div style="width:200px">x</div></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-truncation-1-ref.html b/layout/reftests/table-width/percent-truncation-1-ref.html
new file mode 100644
index 0000000000..74267dd36d
--- /dev/null
+++ b/layout/reftests/table-width/percent-truncation-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background:yellow" ><div style="width:200px">x</div></td>
+<td style="background:aqua" ><div style="width:200px">x</div></td>
+<td style="background:fuchsia"><div style="width:100px">x</div></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-truncation-1.html b/layout/reftests/table-width/percent-truncation-1.html
new file mode 100644
index 0000000000..3254a63a75
--- /dev/null
+++ b/layout/reftests/table-width/percent-truncation-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background:yellow" width="40%"><div style="width:100px">x</div></td>
+<td style="background:aqua" width="40%"><div style="width:100px">x</div></td>
+<td style="background:fuchsia" width="40%"><div style="width:100px">x</div></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-truncation-2-ref.html b/layout/reftests/table-width/percent-truncation-2-ref.html
new file mode 100644
index 0000000000..59355bc8c5
--- /dev/null
+++ b/layout/reftests/table-width/percent-truncation-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 0;
+ padding: 0;
+ border: none;
+ empty-cells: show;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr height="50">
+<td style="background:yellow" ><div style="width:200px"></div></td>
+<td style="background:aqua" ><div style="width:200px"></div></td>
+<td style="background:fuchsia"><div style="width:100px"></div></td>
+<td style="background:blue" ></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-truncation-2.html b/layout/reftests/table-width/percent-truncation-2.html
new file mode 100644
index 0000000000..cdeb630f6d
--- /dev/null
+++ b/layout/reftests/table-width/percent-truncation-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 0;
+ padding: 0;
+ border: none;
+ empty-cells: show;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr height="50">
+<td style="background:yellow" width="40%"><div style="width:100px"></div></td>
+<td style="background:aqua" width="40%"><div style="width:100px"></div></td>
+<td style="background:fuchsia" width="40%"><div style="width:100px"></div></td>
+<td style="background:blue" width="40%"></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-truncation-3-ref.html b/layout/reftests/table-width/percent-truncation-3-ref.html
new file mode 100644
index 0000000000..6041a67afd
--- /dev/null
+++ b/layout/reftests/table-width/percent-truncation-3-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 0;
+ padding: 0;
+ border: none;
+ empty-cells: show;
+}
+
+td {
+ border: 1px solid;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<!-- column min widths must match tests, since we have to size slightly
+ smaller than percents because of the extra space from the borders -->
+<table width="100%"><tr height="50">
+<td style="background:yellow" width="40%"><div style="width:100px"></div></td>
+<td style="background:aqua" width="40%"><div style="width:100px"></div></td>
+<td style="background:fuchsia" width="20%"><div style="width:100px"></div></td>
+<td style="background:blue"></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-truncation-3.html b/layout/reftests/table-width/percent-truncation-3.html
new file mode 100644
index 0000000000..1ef1a5f3e4
--- /dev/null
+++ b/layout/reftests/table-width/percent-truncation-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 0;
+ padding: 0;
+ border: none;
+ empty-cells: show;
+}
+
+td {
+ border: 1px solid;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr height="50">
+<td style="background:yellow" width="40%"><div style="width:100px"></div></td>
+<td style="background:aqua" width="40%"><div style="width:100px"></div></td>
+<td style="background:fuchsia" width="40%"><div style="width:100px"></div></td>
+<td style="background:blue" width="40%"></td> <!-- 2px wide from border -->
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-zero-ref.html b/layout/reftests/table-width/percent-zero-ref.html
new file mode 100644
index 0000000000..76ad584b8d
--- /dev/null
+++ b/layout/reftests/table-width/percent-zero-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow">x</td>
+<td style="background:aqua">x</td>
+</tr></table>
+
+<table>
+<tr><td style="background: yellow" width="50">x</td></tr>
+<tr><td style="background:aqua" width="50">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/percent-zero.html b/layout/reftests/table-width/percent-zero.html
new file mode 100644
index 0000000000..97a9a25b69
--- /dev/null
+++ b/layout/reftests/table-width/percent-zero.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Percent widths on table cells</title>
+<style type="text/css">
+
+table {
+ border-spacing: 3px 5px;
+ padding: 2px 3px 4px 5px;
+}
+
+td {
+ border: none;
+ padding: 0;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background: yellow" width="0%">x</td>
+<td style="background:aqua">x</td>
+</tr></table>
+
+<table>
+<tr><td style="background: yellow" width="0%">x</td></tr>
+<tr><td style="background:aqua" width="50">x</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/pref-width-ref.html b/layout/reftests/table-width/pref-width-ref.html
new file mode 100644
index 0000000000..331a5bf3b2
--- /dev/null
+++ b/layout/reftests/table-width/pref-width-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+</head>
+<body>
+This is some text.
+</body>
+</html>
diff --git a/layout/reftests/table-width/pref-width.html b/layout/reftests/table-width/pref-width.html
new file mode 100644
index 0000000000..738ffe973c
--- /dev/null
+++ b/layout/reftests/table-width/pref-width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+</style>
+</head>
+<body>
+<table><tr><td>This is some text.</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/reftest.list b/layout/reftests/table-width/reftest.list
new file mode 100644
index 0000000000..c789c6e15e
--- /dev/null
+++ b/layout/reftests/table-width/reftest.list
@@ -0,0 +1,66 @@
+== spacing-invariance-quirks-min.html spacing-invariance-quirks-min-ref.html
+== spacing-invariance-quirks-pref.html spacing-invariance-quirks-pref-ref.html
+== spacing-invariance-standards-min.html spacing-invariance-standards-min-ref.html
+== spacing-invariance-standards-pref.html spacing-invariance-standards-pref-ref.html
+== min-width.html min-width-ref.html
+== pref-width.html pref-width-ref.html
+!= min-width-ref.html pref-width-ref.html
+== percent-large.html percent-large-ref.html
+== percent-large-min.html percent-large-min-ref.html
+== percent-large-nested.html percent-large-nested-ref.html
+== percent-small.html percent-small-ref.html
+== percent-small-min.html percent-small-min-ref.html
+== percent-small-nested.html percent-small-nested-ref.html
+== percent-small-2.html percent-small-2-ref.html
+== percent-zero.html percent-zero-ref.html
+== shrink-wrap-pref.html shrink-wrap-pref-ref.html
+== shrink-wrap-avail.html shrink-wrap-avail-ref.html
+== shrink-wrap-min.html shrink-wrap-min-ref.html
+!= shrink-wrap-min-ref.html shrink-wrap-pref-ref.html
+!= shrink-wrap-pref-ref.html shrink-wrap-avail-ref.html
+!= shrink-wrap-avail-ref.html shrink-wrap-min-ref.html
+== conflicting-widths-1.html conflicting-widths-ref-100xx.html
+== conflicting-widths-2.html conflicting-widths-ref-100xx.html
+== conflicting-widths-3.html conflicting-widths-ref-100xx.html
+== conflicting-widths-4.html conflicting-widths-ref-100xx.html
+== conflicting-widths-5.html conflicting-widths-5-ref.html
+== conflicting-widths-6.html conflicting-widths-6-ref.html
+== conflicting-widths-7.html conflicting-widths-7-ref.html
+== conflicting-widths-8.html conflicting-widths-8-ref.html
+== conflicting-widths-9.html conflicting-widths-9-ref.html
+== conflicting-widths-10.html conflicting-widths-10-ref.html
+== conflicting-percent-widths-1.html conflicting-percent-widths-1-ref.html
+== conflicting-percent-widths-2.html conflicting-percent-widths-2-ref.html
+== conflicting-percent-widths-3.html conflicting-percent-widths-3-ref.html
+== percent-truncation-1.html percent-truncation-1-ref.html
+== percent-truncation-2.html percent-truncation-2-ref.html
+== percent-truncation-3.html percent-truncation-3-ref.html
+== balancing-1.html balancing-1-ref.html
+== balancing-2.html balancing-2-ref.html
+== cellpadding.html cellpadding-ref.html
+== cellspacing.html cellspacing-ref.html
+== percent-basis.html percent-basis-ref.html
+== default-box-sizing-separate-standards.html default-box-sizing-separate-standards-ref.html
+== default-box-sizing-separate-quirks.html default-box-sizing-separate-quirks-ref.html
+fails == default-box-sizing-collapse-standards.html default-box-sizing-collapse-standards-ref.html # bug 371180
+fails == default-box-sizing-collapse-quirks.html default-box-sizing-collapse-quirks-ref.html # bug 371180
+== colspan-percent-distribution-1.html colspan-percent-distribution-1-ref.html
+== colspan-percent-distribution-2.html colspan-percent-distribution-2-ref.html
+== spanning-cell-sort-1-small.html spanning-cell-sort-1-ref.html
+== spanning-cell-sort-1-large.html spanning-cell-sort-1-ref.html
+== spanning-cell-sort-1-small-fixed.html spanning-cell-sort-1-fixed-ref.html
+== spanning-cell-sort-1-large-fixed.html spanning-cell-sort-1-fixed-ref.html
+== spanning-cell-sort-2-small.html spanning-cell-sort-2-ref.html
+== spanning-cell-sort-2-large.html spanning-cell-sort-2-ref.html
+== spanning-cell-sort-2-small-fixed.html spanning-cell-sort-2-fixed-ref.html
+== spanning-cell-sort-2-large-fixed.html spanning-cell-sort-2-fixed-ref.html
+== colgroup-vs-column-1.html colgroup-vs-column-1-ref.html
+== colgroup-vs-column-2.html colgroup-vs-column-2-ref.html
+== colgroup-vs-column-3.html colgroup-vs-column-3-ref.html
+== colgroup-vs-column-4.html colgroup-vs-column-4-ref.html
+== dynamic-fixed-layout-1.html dynamic-fixed-layout-1-ref.html
+== cell-pref-width-border-box.html cell-pref-width-border-box-ref.html
+== colspan-distribute-to-empty-1a.html colspan-distribute-to-empty-1-ref.html
+== colspan-distribute-to-empty-1b.html colspan-distribute-to-empty-1-ref.html
+== colspan-distribute-to-empty-2.html colspan-distribute-to-empty-2-ref.html
+== distribute-percent-nonoriginating.html distribute-percent-nonoriginating-ref.html
diff --git a/layout/reftests/table-width/shrink-wrap-avail-ref.html b/layout/reftests/table-width/shrink-wrap-avail-ref.html
new file mode 100644
index 0000000000..c1ae41e95b
--- /dev/null
+++ b/layout/reftests/table-width/shrink-wrap-avail-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Shrink-wrapping of tables</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: yellow;
+ color: black;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background:aqua;color:aqua;width:100px"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/shrink-wrap-avail.html b/layout/reftests/table-width/shrink-wrap-avail.html
new file mode 100644
index 0000000000..a979a70326
--- /dev/null
+++ b/layout/reftests/table-width/shrink-wrap-avail.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Shrink-wrapping of tables</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: yellow;
+ color: black;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 100px"><table><tr>
+<td style="background:aqua;color:aqua"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/shrink-wrap-min-ref.html b/layout/reftests/table-width/shrink-wrap-min-ref.html
new file mode 100644
index 0000000000..56aef47ecd
--- /dev/null
+++ b/layout/reftests/table-width/shrink-wrap-min-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Shrink-wrapping of tables</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: yellow;
+ color: black;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background:aqua;color:aqua;width:50px"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/shrink-wrap-min.html b/layout/reftests/table-width/shrink-wrap-min.html
new file mode 100644
index 0000000000..94ac5e1437
--- /dev/null
+++ b/layout/reftests/table-width/shrink-wrap-min.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Shrink-wrapping of tables</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: yellow;
+ color: black;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 20px"><table><tr>
+<td style="background:aqua;color:aqua"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/shrink-wrap-pref-ref.html b/layout/reftests/table-width/shrink-wrap-pref-ref.html
new file mode 100644
index 0000000000..1634cee233
--- /dev/null
+++ b/layout/reftests/table-width/shrink-wrap-pref-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Shrink-wrapping of tables</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: yellow;
+ color: black;
+}
+
+</style>
+</head>
+<body>
+
+<table><tr>
+<td style="background:aqua;color:aqua;width:200px"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/shrink-wrap-pref.html b/layout/reftests/table-width/shrink-wrap-pref.html
new file mode 100644
index 0000000000..af4be8128c
--- /dev/null
+++ b/layout/reftests/table-width/shrink-wrap-pref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Shrink-wrapping of tables</title>
+<style type="text/css">
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+span {
+ display: inline-block;
+ width: 50px;
+ background: yellow;
+ color: black;
+}
+
+</style>
+</head>
+<body>
+
+<div style="width: 400px"><table><tr>
+<td style="background:aqua;color:aqua"><span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span>&#x200b;<span>x</span></td>
+</tr></table></div>
+
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-quirks-min-ref.html b/layout/reftests/table-width/spacing-invariance-quirks-min-ref.html
new file mode 100644
index 0000000000..2587076c09
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-quirks-min-ref.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+body > table { margin: 28px 29px 34px 35px; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table width="1"><tr><td>
+ <table><tr><td>
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-quirks-min.html b/layout/reftests/table-width/spacing-invariance-quirks-min.html
new file mode 100644
index 0000000000..5a1b0151f7
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-quirks-min.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ margin: 0;
+}
+
+* { border-color: white; /* hidden */ }
+table, td { border-style: solid; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table width="1" cellpadding="3" cellspacing="5" border="2"><tr><td colspan="2" style="border-width: 1px"> <!-- td border currently already 1px -->
+ <table style="border-spacing: 5px 7px; border-width: 2px 3px 4px 5px"><tr><td colspan="3" style="padding: 4px 5px 6px 7px;border-width: 4px 5px 6px 7px">
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-quirks-pref-ref.html b/layout/reftests/table-width/spacing-invariance-quirks-pref-ref.html
new file mode 100644
index 0000000000..d680e2f29a
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-quirks-pref-ref.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+body > table { margin: 28px 29px 34px 35px; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table><tr><td>
+ <table><tr><td>
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-quirks-pref.html b/layout/reftests/table-width/spacing-invariance-quirks-pref.html
new file mode 100644
index 0000000000..a147efbd75
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-quirks-pref.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ margin: 0;
+}
+
+* { border-color: white; /* hidden */ }
+table, td { border-style: solid; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table cellpadding="3" cellspacing="5" border="2"><tr><td colspan="2" style="border-width: 1px"> <!-- td border currently already 1px -->
+ <table style="border-spacing: 5px 7px; border-width: 2px 3px 4px 5px"><tr><td colspan="3" style="padding: 4px 5px 6px 7px;border-width: 4px 5px 6px 7px">
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-standards-min-ref.html b/layout/reftests/table-width/spacing-invariance-standards-min-ref.html
new file mode 100644
index 0000000000..5b154b762d
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-standards-min-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+body > table { margin: 28px 29px 34px 35px; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table width="1"><tr><td>
+ <table><tr><td>
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-standards-min.html b/layout/reftests/table-width/spacing-invariance-standards-min.html
new file mode 100644
index 0000000000..c831806e9b
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-standards-min.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ margin: 0;
+}
+
+* { border-color: white; /* hidden */ }
+table, td { border-style: solid; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table width="1" cellpadding="3" cellspacing="5" border="2"><tr><td colspan="2" style="border-width: 1px"> <!-- td border currently already 1px -->
+ <table style="border-spacing: 5px 7px; border-width: 2px 3px 4px 5px"><tr><td colspan="3" style="padding: 4px 5px 6px 7px;border-width: 4px 5px 6px 7px">
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-standards-pref-ref.html b/layout/reftests/table-width/spacing-invariance-standards-pref-ref.html
new file mode 100644
index 0000000000..f2567af535
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-standards-pref-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ border: none;
+ margin: 0;
+ padding: 0;
+ border-spacing: 0;
+}
+
+body > table { margin: 28px 29px 34px 35px; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table><tr><td>
+ <table><tr><td>
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spacing-invariance-standards-pref.html b/layout/reftests/table-width/spacing-invariance-standards-pref.html
new file mode 100644
index 0000000000..3d6b4294cb
--- /dev/null
+++ b/layout/reftests/table-width/spacing-invariance-standards-pref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test that cellpadding, cellspacing, border, etc., don't break table sizing.</title>
+<style type="text/css">
+
+html, body { margin: 0 } /* no collapsing */
+
+table, td {
+ margin: 0;
+}
+
+* { border-color: white; /* hidden */ }
+table, td { border-style: solid; }
+body { background: white; color: black; }
+
+div { background: olive; color: black; }
+
+</style>
+</head>
+<body>
+<table cellpadding="3" cellspacing="5" border="2"><tr><td colspan="2" style="border-width: 1px"> <!-- td border currently already 1px -->
+ <table style="border-spacing: 5px 7px; border-width: 2px 3px 4px 5px"><tr><td colspan="3" style="padding: 4px 5px 6px 7px;border-width: 4px 5px 6px 7px">
+ <div>This is some text.</div>
+ </td></tr></table>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/table-width/spanning-cell-sort-1-fixed-ref.html b/layout/reftests/table-width/spanning-cell-sort-1-fixed-ref.html
new file mode 100644
index 0000000000..01a3a438a9
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-1-fixed-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="width: 150px; background-color: yellow"></td>
+ <td style="width: 450px; background-color: aqua"></td>
+ </tr>
+ <tr>
+ <td style="background-color: blue"></td>
+ <td style="background-color: blue"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-1-large-fixed.html b/layout/reftests/table-width/spanning-cell-sort-1-large-fixed.html
new file mode 100644
index 0000000000..50843356d6
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-1-large-fixed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table style="width: 600px">
+ <tr>
+ <td style="background-color: yellow" colspan="100"></td>
+ <td style="background-color: aqua" colspan="300"><div style="width: 300px"></div></td>
+ </tr>
+ <tr>
+ <td style="background-color: blue" colspan="200"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia" colspan="100"></td>
+ <td style="background-color: maroon" colspan="100"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-1-large.html b/layout/reftests/table-width/spanning-cell-sort-1-large.html
new file mode 100644
index 0000000000..d8c080ba7f
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-1-large.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="background-color: yellow" colspan="4"></td>
+ <td style="background-color: aqua" colspan="12"><div style="width: 300px"></div></td>
+ </tr>
+ <tr>
+ <td style="background-color: blue" colspan="8"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia" colspan="4"></td>
+ <td style="background-color: maroon" colspan="4"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-1-ref.html b/layout/reftests/table-width/spanning-cell-sort-1-ref.html
new file mode 100644
index 0000000000..0afd0c7989
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="width: 100px; background-color: yellow"></td>
+ <td style="width: 300px; background-color: aqua"></td>
+ </tr>
+ <tr>
+ <td style="background-color: blue"></td>
+ <td style="background-color: blue"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-1-small-fixed.html b/layout/reftests/table-width/spanning-cell-sort-1-small-fixed.html
new file mode 100644
index 0000000000..1bb6219bdf
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-1-small-fixed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table style="width: 600px">
+ <tr>
+ <td style="background-color: yellow"></td>
+ <td style="background-color: aqua" colspan="3"><div style="width: 300px"></div></td>
+ </tr>
+ <tr>
+ <td style="background-color: blue" colspan="2"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia"></td>
+ <td style="background-color: maroon"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-1-small.html b/layout/reftests/table-width/spanning-cell-sort-1-small.html
new file mode 100644
index 0000000000..a2d53686fa
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-1-small.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="background-color: yellow"></td>
+ <td style="background-color: aqua" colspan="3"><div style="width: 300px"></div></td>
+ </tr>
+ <tr>
+ <td style="background-color: blue" colspan="2"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia"></td>
+ <td style="background-color: maroon"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-2-fixed-ref.html b/layout/reftests/table-width/spanning-cell-sort-2-fixed-ref.html
new file mode 100644
index 0000000000..7abffc55b7
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-2-fixed-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="background-color: blue"></td>
+ <td style="background-color: blue"></td>
+ </tr>
+ <tr>
+ <td style="width: 150px; background-color: yellow"></td>
+ <td style="width: 450px; background-color: aqua"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-2-large-fixed.html b/layout/reftests/table-width/spanning-cell-sort-2-large-fixed.html
new file mode 100644
index 0000000000..6bf7dc4d6f
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-2-large-fixed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table style="width: 600px">
+ <tr>
+ <td style="background-color: blue" colspan="20"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia" colspan="10"></td>
+ <td style="background-color: maroon" colspan="10"></td>
+ </tr>
+ <tr>
+ <td style="background-color: yellow" colspan="10"></td>
+ <td style="background-color: aqua" colspan="30"><div style="width: 300px"></div></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-2-large.html b/layout/reftests/table-width/spanning-cell-sort-2-large.html
new file mode 100644
index 0000000000..e411297ccb
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-2-large.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="background-color: blue" colspan="40"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia" colspan="20"></td>
+ <td style="background-color: maroon" colspan="20"></td>
+ </tr>
+ <tr>
+ <td style="background-color: yellow" colspan="20"></td>
+ <td style="background-color: aqua" colspan="60"><div style="width: 300px"></div></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-2-ref.html b/layout/reftests/table-width/spanning-cell-sort-2-ref.html
new file mode 100644
index 0000000000..46fdb4c8b9
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-2-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="background-color: blue"></td>
+ <td style="background-color: blue"></td>
+ </tr>
+ <tr>
+ <td style="width: 100px; background-color: yellow"></td>
+ <td style="width: 300px; background-color: aqua"></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-2-small-fixed.html b/layout/reftests/table-width/spanning-cell-sort-2-small-fixed.html
new file mode 100644
index 0000000000..12c72c1e93
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-2-small-fixed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table style="width: 600px">
+ <tr>
+ <td style="background-color: blue" colspan="2"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia"></td>
+ <td style="background-color: maroon"></td>
+ </tr>
+ <tr>
+ <td style="background-color: yellow"></td>
+ <td style="background-color: aqua" colspan="3"><div style="width: 300px"></div></td>
+ </tr>
+</table>
diff --git a/layout/reftests/table-width/spanning-cell-sort-2-small.html b/layout/reftests/table-width/spanning-cell-sort-2-small.html
new file mode 100644
index 0000000000..dd6c0c91e3
--- /dev/null
+++ b/layout/reftests/table-width/spanning-cell-sort-2-small.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<title>Testcase to exercise nsSpanningCellSorter</title>
+<style type="text/css">
+
+table, td {
+ border-spacing: 0;
+ padding: 0; margin: 0; border: none;
+ empty-cells: show;
+}
+
+td { height: 20px; }
+
+</style>
+
+<table>
+ <tr>
+ <td style="background-color: blue" colspan="2"><div style="width: 200px"></div></td>
+ <td style="background-color: fuchsia"></td>
+ <td style="background-color: maroon"></td>
+ </tr>
+ <tr>
+ <td style="background-color: yellow"></td>
+ <td style="background-color: aqua" colspan="3"><div style="width: 300px"></div></td>
+ </tr>
+</table>