diff options
Diffstat (limited to 'layout/reftests/table-width')
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"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="50"> </td> +</tr></table> + +<!-- width: 250px --><table><tr> +<td style="color:aqua" width="50"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="100"> </td> +</tr></table> + +<!-- width: 300px --><table><tr> +<td style="color:aqua" width="50"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="150"> </td> +</tr></table> + +<!-- width: 350px --><table><tr> +<td style="color:aqua" width="50"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="75"> </td> +<td style="color:blue" width="175"> </td> +</tr></table> + +<!-- width: 400px --><table><tr> +<td style="color:aqua" width="50"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="100"> </td> +<td style="color:blue" width="200"> </td> +</tr></table> + +<!-- width: 500px --><table><tr> +<td style="color:aqua" width="100"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="100"> </td> +<td style="color:blue" width="250"> </td> +</tr></table> + +<!-- width: 600px --><table><tr> +<td style="color:aqua" width="150"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:fuchsia" width="100"> </td> +<td style="color:blue" width="300"> </td> +</tr></table> + +<!-- width: 800px --><table><tr> +<td style="color:aqua" width="225"> </td> +<td style="color:yellow" width="75"> </td> +<td style="color:fuchsia" width="100"> </td> +<td style="color:blue" width="400"> </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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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"> </td> +<td style="color:yellow" width="25"> </td> +<td style="color:red" width="0"></td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="150"> </td> +</tr></table> + +<!-- width: 500px --><table><tr> +<td style="color:aqua" width="150"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:red" width="0"></td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="250"> </td> +</tr></table> + +<!-- width: 420px --><table><tr> +<td style="color:aqua" width="105"> </td> +<td style="color:yellow" width="35"> </td> +<td style="color:red" width="0"></td> +<td style="color:fuchsia" width="70"> </td> +<td style="color:blue" width="210"> </td> +</tr></table> + +<!-- width: 400px --><table><tr> +<td style="color:aqua" width="50"> </td> +<td style="color:yellow" width="50"> </td> +<td style="color:red" width="0"></td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="250"> </td> +</tr></table> + +<!-- width: 420px --><table><tr> +<td style="color:aqua" width="75"> </td> +<td style="color:yellow" width="85"> </td> +<td style="color:fuchsia" width="50"> </td> +<td style="color:blue" width="210"> </td> +</tr></table> + +<!-- width: 400px --><table><tr> +<td style="color:aqua" width="60"> </td> +<td style="color:yellow" width="80"> </td> +<td style="color:fuchsia" width="60"> </td> +<td style="color:blue" width="200"> </td> +</tr></table> + +<!-- width: 400px --><table><tr> +<td style="color:aqua" width="100"> </td> +<td style="color:yellow" width="100"> </td> +<td style="color:fuchsia" width="100"> </td> +<td style="color:blue" width="100"> </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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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>​<span></span>​<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" > </td> + <td width="25" bgcolor="aqua" > </td> + <td width="25" bgcolor="aqua" > </td> + </tr> + <tr> + <td width="25" bgcolor="fuchsia"> </td> + <td width="25" bgcolor="fuchsia"> </td> + <td width="25" bgcolor="yellow" > </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" > </td> + <td width="50" colspan="2" bgcolor="aqua" > </td> + </tr> + <tr> + <td width="50" colspan="2" bgcolor="fuchsia"> </td> + <td width="25" bgcolor="yellow" > </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" > </td> + <td width="50" colspan="2" bgcolor="aqua" > </td> + </tr> + <tr> + <td width="50" colspan="2" bgcolor="fuchsia"> </td> + <td width="25" bgcolor="yellow" > </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%;"> </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>​<span>x</span>​<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>​<span>x</span>​<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>​<span>x</span>​<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>​<span>x</span>​<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>​<span>x</span>​<span>x</span>​<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>​<span>x</span>​<span>x</span>​<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>​<span>x</span>​<span>x</span>​<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>​<span>x</span>​<span>x</span>​<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>​<span>x</span>​<span>x</span>​<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>​<span>x</span>​<span>x</span>​<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> |