diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/table-background | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/table-background')
102 files changed, 7969 insertions, 0 deletions
diff --git a/layout/reftests/table-background/backgr_border-table-cell.html b/layout/reftests/table-background/backgr_border-table-cell.html new file mode 100644 index 0000000000..7006a8e75c --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table-cell.html @@ -0,0 +1,127 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<title>Background on 'table-cell'</title> +<link rel="next" href="backgr_layers-opacity.html" title="Background Layers: opacity"> +<link rel="prev" href="backgr_border-table-column.html" title="Background with Borders: Background on 'table-column'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {border: 5px dotted} + .e {background: black url(edge.gif) top left no-repeat} + .m {background: black url(edge.gif) bottom right no-repeat} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table-cell'</h3> + + <p>Two cells are styled.</p> + <p>There should be three aqua stripes just inside the top and left padding edges of cell E.</p> + <p>There should be three aqua stripes just inside the bottom and right padding edges of Cell M</a> + + <dl> + <dt>next + <dd><a href="backgr_layers-opacity.html">Special Tests: Opacity</a> + <dt>previous + <dd><a href="backgr_border-table-column.html">Background with Borders: Background on 'table-column'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_border-table-column-group.html b/layout/reftests/table-background/backgr_border-table-column-group.html new file mode 100644 index 0000000000..9d54f49020 --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table-column-group.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-column-group'</title> +<link rel="next" href="backgr_border-table-row.html" title="Background with Borders: Background on 'table-row'"> +<link rel="prev" href="backgr_border-table-row-group.html" title="Background with Borders: Background on 'table-row-group'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table { border: 3px dotted} + .colgroup-A {background: black url(edge.gif) bottom right no-repeat; border: 5px dashed} + .g, .m { border: 5px dashed} + .col-3 { border: 9px dashed} + .colgroup-B {background: black url(edge.gif) top left no-repeat} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table-column-group'</h3> + + <p>Three aqua stripes should run along the bottom of the last cell in the first three columns and up along the right edge of the cells in the third column. The stripes should align to be just inside the padding edge in cells M and G.</p> + <p>Three aqua stripes should also run just inside the top padding edge of the first cell in the last column and down the left border edge of each cell in that column.</p> + + <dl> + <dt>next + <dd><a href="backgr_border-table-row.html">Background with Borders: Background on 'table-row'</a> + <dt>previous + <dd><a href="backgr_border-table-row-group.html">Background with Borders: Background on 'table-row-group'</a> + <dt>contents + <dd><a href="./">Table of Contents</a> + </dl> + + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=3>TD M</td> + + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_border-table-column.html b/layout/reftests/table-background/backgr_border-table-column.html new file mode 100644 index 0000000000..9a86827219 --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table-column.html @@ -0,0 +1,133 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-column'</title> +<link rel="next" href="backgr_border-table-cell.html" title="Background with Borders: Background on 'table-cell'"> +<link rel="prev" href="backgr_border-table-row.html" title="Background with Borders: Background on 'table-row'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table { border: 3px dotted} + .col-1 {background: black url(edge.gif) bottom right no-repeat; border: 5px dashed} + .a, .m { border: 5px dashed} + .col-2 {background: black url(edge.gif) bottom right no-repeat; border: 9px dashed} + .f { border: 9px dashed} + .col-3 {background: black url(edge.gif) top left no-repeat; border: 5px dashed} + .g { border: 5px dashed} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table-column'</h3> + + <p>Three columns are styled.</p> + <p>In the first column, there should be three vertical stripes along the padding edge of the first cell, continuing down through the column. (In cell E, the aqua stripe will be obscured by the thicker right border.) The stripes will cut across cell E as well, but will be further obscured by its thick border. In the border-collapsed table, the same will happen to the vertical stripes in cell A due to cell B's thick border. The stripes should continue in the last cell, turning a right angle to the left into three aqua stripes along the bottom border edge of the last cell. The last cell (M) should not have three vertical stripes along its right edge.</p> + <p>In the second column, three vertical strips should run along the right of the first three cells, aligning along cell F's right padding edge. (The stripes will be partially obscured by cell B's thick border.)</p> + <p>In the third column, there should be three vertical stripes should run across the top of the first cell and down the left of the column, aligning along cell K's left padding edge. In border-collapse mode, they will be partially obscured by cell B's thick border.</p> + + <dl> + <dt>next + <dd><a href="backgr_border-table-cell.html">Background with Borders: Background on 'table-cell'</a> + <dt>previous + <dd><a href="backgr_border-table-row.html">Background with Borders: Background on 'table-row'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_border-table-quirks.html b/layout/reftests/table-background/backgr_border-table-quirks.html new file mode 100644 index 0000000000..790275edb9 --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table-quirks.html @@ -0,0 +1,123 @@ +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table'</title> +<link rel="next" href="border-table-row-group.html" title="Background with Borders: Background on 'table-row-group'"> +<link rel="prev" href="layers-opacity.html" title="Background with Borders: Background on 'table-cell'"> +<link rel="contents" href="./" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {background: black url(edge.gif) top left no-repeat; border: 5px dotted;} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table'</h3> + + <p>There should be three aqua stripes just inside the bottom and right table borders.</p> + + <dl> + <dt>next + <dd><a href="border-table-row-group.html">Background with Borders: Background on 'table-row-group'</a> + <dt>previous + <dd><a href="layers-opacity.html">Background with Borders: Background on 'table-cell'</a> + <dt>contents + <dd><a href="./">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr id="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + <tfoot> + <tr id="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr id="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr id="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_border-table-row-group.html b/layout/reftests/table-background/backgr_border-table-row-group.html new file mode 100644 index 0000000000..db0ccf1b99 --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table-row-group.html @@ -0,0 +1,130 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-row-group'</title> +<link rel="next" href="backgr_border-table-column-group.html" title="Background with Borders: Background on 'table-column-group'"> +<link rel="prev" href="backgr_border-table.html" title="Background with Borders: Background on 'table'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table { border: 3px dotted} + thead {background: black url(edge.gif) top right no-repeat; border: 5px dashed} + .d { border: 5px dashed} + tbody {background: black url(edge.gif) bottom left no-repeat; border: 5px dashed} + .k { border: 5px dashed} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table-row-group'</h3> + + <p>There should be three aqua stripes along the top of cells A, B, C, and D in the first row and three stripes along the right edge of D, the last cell in that row. The stripes should align to be just inside the padding edge of cell D.</p> + <p>There should be three aqua stripes along the bottom of cells J, K, and L. The stripes continue across the bottom of cell E, but are partially obscured by the border. The stripes turn up at cell E's bottom left corner to run under its border a few pixels to the right of its left border edge. The stripes will align to be just above cell K's bottom padding edge.</p> + + <dl> + <dt>next + <dd><a href="backgr_border-table-column-group.html">Background with Borders: Background on 'table-column-group'</a> + <dt>previous + <dd><a href="backgr_border-table.html">Background with Borders: Background on 'table'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_border-table-row.html b/layout/reftests/table-background/backgr_border-table-row.html new file mode 100644 index 0000000000..a0ef3530e5 --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table-row.html @@ -0,0 +1,132 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-row'</title> +<link rel="next" href="backgr_border-table-column.html" title="Background with Borders: Background on 'table-column'"> +<link rel="prev" href="backgr_border-table-column-group.html" title="Background with Borders: Background on 'table-column-group'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table { border: 3px dotted} + .th-row-1 {background: black url(edge.gif) bottom right no-repeat; border: 5px dashed} + .d { border: 5px dashed} + .tb-row-1 {background: black url(edge.gif) bottom left no-repeat; border: 9px dashed} + .g { border: 9px dashed} + .tb-row-2 {background: black url(edge.gif) top left no-repeat; border: 5px dashed} + .k { border: 5px dashed} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table-row'</h3> + + <p>Three rows are styled.</p> + <p>The first row should have three aqua stripes just inside the bottom and right padding edges of its last cell. The bottom three stripes should continue across the row, appearing along the bottom of cells A, B, and C. (The bottom aqua stripe will be obscured by the thicker bottom border in cell B.)</p> + <p>The second row should have three vertical aqua stripes a few pixels to the right of the left padding edge. Three horizontal aqua stripes should cut across the first cell and align along the bottom border edge of cell G.</p> + <p>The third row should have three horizontal aqua stripes along the top of the last three cells, aligning along cell K's top padding edge. The stripes will not continue into cell E.</p> + <dl> + <dt>next + <dd><a href="backgr_border-table-column.html">Background with Borders: Background on 'table-column'</a> + <dt>previous + <dd><a href="backgr_border-table-column-group.html">Background with Borders: Background on 'table-column-group'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_border-table.html b/layout/reftests/table-background/backgr_border-table.html new file mode 100644 index 0000000000..a7fbd0d36a --- /dev/null +++ b/layout/reftests/table-background/backgr_border-table.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<title>Background on 'table'</title> +<link rel="next" href="backgr_border-table-row-group.html" title="Background with Borders: Background on 'table-row-group'"> +<link rel="prev" href="backgr_layers-opacity.html" title="Background with Borders: Background on 'table-cell'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {background: black url(edge.gif) top left no-repeat; border: 5px dotted;} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part D: Background with Borders</h2> + + <h3>Background on 'table'</h3> + + <p>There should be three aqua stripes just inside the bottom and right table borders.</p> + + <dl> + <dt>next + <dd><a href="backgr_border-table-row-group.html">Background with Borders: Background on 'table-row-group'</a> + <dt>previous + <dd><a href="backgr_layers-opacity.html">Background with Borders: Background on 'table-cell'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr id="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + <tfoot> + <tr id="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr id="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr id="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_fixed-bg.html b/layout/reftests/table-background/backgr_fixed-bg.html new file mode 100644 index 0000000000..58c123fe93 --- /dev/null +++ b/layout/reftests/table-background/backgr_fixed-bg.html @@ -0,0 +1,154 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>layers: opacity</title> +<link rel="prev" href="backgr_layers-opacity.html" title="Special Tests: opacity"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + table{background: white; color: black;} + caption {color: white;} + .tb-row-1, thead, .l {background: url(edge.gif) fixed;} + .a, .p {background: url(rainbowv.gif) fixed; } +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part E: Special Tests</h2> + + <h3>Fixed Backgrounds</h3> + + <ul> + <li>If you scroll the table over the top left corner of the viewport, the first, second, and fourth rows as well as cell L should reveal a purple and aqua band forming a 90-degree angle in the top left corner. + <li>Cells A and P should have a rainbow background that seems attached to the viewport. + </ul> + + <dl> + <dt>previous + <dd><a href="backgr_layers-opacity.html">Special Tests: opacity</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> +<pre> +................................................................................................................................................................................................ +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +. +</pre> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_index.html b/layout/reftests/table-background/backgr_index.html new file mode 100644 index 0000000000..454dd749c5 --- /dev/null +++ b/layout/reftests/table-background/backgr_index.html @@ -0,0 +1,77 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>CSS2 Table Backgrounds Test Suite</title> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> +strong {text-decoration: underline} +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> +<h2>Notes</h2> +<p>This test suite is not endorsed or approved by the W3C or anyone besides fantasai. It tests conformance to fantasai's <a href="../">table background clarification proposal</a>, not the official CSS2 specification. The intent is to demonstrate the proposal's effects under various styling conditions and to clarify any ambiguity in the proposal in preparation for a better-worded errata suggestion. It's not particularly well-designed, but it is comprehensive.</p> +<p>This test suite (this page and all pages linked from the table of contents below) and its background images (listed below) are in the public domain by assertion of their author. No rights reserved.</p> +<p>The images used as backgrounds are the following: + <ul> + <li><img alt="rainbowh.gif" src="rainbowh.gif"> + <li><img alt="rainbowv.gif" src="rainbowv.gif"> + <li><img alt="edge.gif" src="edge.gif"> + </ul> +<p>They are in GIF format, with transparency.</p> +<p>Each color band in the rainbow backgrounds is 20 pixels wide. Each stripe within the color band is two pixels wide.</p> +<p>The aqua and purple band is 10 pixels wide. Each stripe within the band is two pixels wide.</p> +<p>Many image background rules in this test suite are backed up with a 'black' background color.</p> +<p>This test suite assumes that <strong>the border edge for a table element in a table with collapsed borders is the <em>middle</em> of the border around the element, not the outer or inner edge.</strong> (This also needs to be addressed by CSS2.1.) It also assumes support for proper ordering of tables with <code class="sgmltag"><tfoot></code>.</p> + +<h2>Table of Contents</h2> +<ol style="list-style-type: upper-latin"> +<li>Background Area + <ol> + <li><a href="backgr_simple-table.html">Background on 'table'</a> + <li><a href="backgr_simple-table-row-group.html">Background on 'table-row-group'</a> + <li><a href="backgr_simple-table-column-group.html">Background on 'table-column-group'</a> + <li><a href="backgr_simple-table-row.html">Background on 'table-row'</a> + <li><a href="backgr_simple-table-column.html">Background on 'table-column'</a> + <li><a href="backgr_simple-table-cell.html">Background on 'table-cell'</a> + </ol> +<li>Background Position + <ol> + <li><a href="backgr_position-table.html">Background on 'table'</a> + <li><a href="backgr_position-table-row-group.html">Background on 'table-row-group'</a> + <li><a href="backgr_position-table-column-group.html">Background on 'table-column-group'</a> + <li><a href="backgr_position-table-row.html">Background on 'table-row'</a> + <li><a href="backgr_position-table-column.html">Background on 'table-column'</a> + <li><a href="backgr_position-table-cell.html">Background on 'table-cell'</a> + </ol> +<li>Background Layers + <ol> + <li><a href="backgr_layers-show.html">empty-cells: show</a> + <li><a href="backgr_layers-hide.html">empty-cells: hide</a> + </ol> +<li>Background with Borders + <ol> + <li><a href="backgr_border-table.html">Background on 'table'</a> + <li><a href="backgr_border-table-row-group.html">Background on 'table-row-group'</a> + <li><a href="backgr_border-table-column-group.html">Background on 'table-column-group'</a> + <li><a href="backgr_border-table-row.html">Background on 'table-row'</a> + <li><a href="backgr_border-table-column.html">Background on 'table-column'</a> + <li><a href="backgr_border-table-cell.html">Background on 'table-cell'</a> +<li>Special Tests + <ol> + <li><a href="backgr_layers-opacity.html">Opacity</a> + <li><a href="backgr_fixed-bg.html">Fixed Backgrounds</a> + </ol> +</ol> + +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_layers-hide.html b/layout/reftests/table-background/backgr_layers-hide.html new file mode 100644 index 0000000000..1ac8830b82 --- /dev/null +++ b/layout/reftests/table-background/backgr_layers-hide.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>empty-cells: hide</title> +<link rel="next" href="backgr_border-table.html" title="Background with Borders: Background on 'table'"> +<link rel="prev" href="backgr_layers-show.html" title="Background Layers: empty-cell: show"> +<link rel="contents" href="./backgr_indxe.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {background: blue; empty-cells: hide} + tbody, thead {background: url(edge.gif) right top no-repeat} + tr {background: url(edge.gif) 0 10px no-repeat} + .colgroup-A {background: url(edge.gif) 100% 20px no-repeat} + .col-3 {background: url(edge.gif) 0 30px no-repeat} + .c {background: url(edge.gif) -20px 100% no-repeat; min-height: 50px} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part C: Background Layers</h2> + + <h3>empty-cells: hide</h3> + + <p>Both tables should look identical to the ones in <a href="backgr_layers-show.html">empty-cells: show</a> except that there should be a blue blank where table cell C should be. + + <dl> + <dt>next + <dd><a href="backgr_border-table.html">Background with Borders: Background on 'table'</a> + <dt>previous + <dd><a href="backgr_layers-show.html">Background Layers: empty-cells: show</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_layers-opacity.html b/layout/reftests/table-background/backgr_layers-opacity.html new file mode 100644 index 0000000000..2ced0e4117 --- /dev/null +++ b/layout/reftests/table-background/backgr_layers-opacity.html @@ -0,0 +1,130 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>layers: opacity</title> +<link rel="next" href="backgr_fixed-bg.html" title="Special Tests: Fixed Backgrounds"> +<link rel="prev" href="backgr_border-table-cell.html" title="Special Tests: Fixed Backgrounds"> +<link rel="stylesheet" type="text/css" href="common.css"> + +<style type="text/css"> + table{background: white; color: black;} + caption {color: white;} + tr {background: red; opacity: 0.5; } + tfoot {background: yellow; opacity: 0.5; } + .a, .p {background: blue; opacity: 0.5; } + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part E: Special Tests</h2> + + <h3>opacity: 0.5</h3> + + <ul> + <li>The first three rows should be red. + <li>The last row should be orange. + <li>Cell A should be purple. Cell P should also be purple, but of a shade that reflects the underlying orange rather than the red. + </ul> + + <dl> + <dt>next + <dd><a href="backgr_fixed-bg.html">Special Tests: Fixed Backgrounds</a> + <dt>previous + <dd><a href="backgr_border-table-cell.html">Background with Borders: Background on 'table-cell'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> +</body> +</html> diff --git a/layout/reftests/table-background/backgr_layers-show.html b/layout/reftests/table-background/backgr_layers-show.html new file mode 100644 index 0000000000..98cfbd900e --- /dev/null +++ b/layout/reftests/table-background/backgr_layers-show.html @@ -0,0 +1,154 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>empty-cells: show</title> +<link rel="next" href="backgr_layers-hide.html" title="Background Layers: empty-cell: hide"> +<link rel="prev" href="backgr_position-table-cell.html" title="Background Position: Background on 'table-cell'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {background: blue; empty-cells: show} + tbody, thead {background: url(edge.gif) right top no-repeat} + tr {background: url(edge.gif) 0 10px no-repeat} + .colgroup-A {background: url(edge.gif) 100% 20px no-repeat} + .col-3 {background: url(edge.gif) 0 30px no-repeat} + .c {background: url(edge.gif) -20px 100% no-repeat; min-height: 50px} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part C: Background Layers</h2> + + <h3>empty-cells: show</h3> + + <p>Both tables should have a blue background.</p> + + <p>In table cell C (third cell in the first row), which is empty:</p> + <ul> + <li>Four sets of horizontal double violet stripes surrounded by aqua should run just inside the top border edge. + <li>One set of aqua-backed double violet stripes should run just inside the left, right, and bottom border edges. + <li>The third set along the top should turn down at the right edge and go under the fourth set to form the right-edge set. + <li>The fourth set should turn down at the left edge to form the left set. + <li>The bottom stripe should be straight and cut across <em>over</em> the side sets. + </ul> + <p>In table cell A, (first cell in the first row):</p> + <ul> + <li>Three sets of horizontal aqua-backed double violet stripes should run just inside the top border edge. + <li>The first set should run across. + <li>The second set should turn down at the left edge, going over the third set to form another set that runs just inside the left border edge. + </ul> + <p>In table cell D, (last cell in the first row):</p> + <ul> + <li>Two sets of horizontal aqua-backed double violet strips should run just inside the top border edge. + <li>The first set should turn down at the right edge, going under the second horizontal set to run vertically just inside the right border edge. + </ul> + <p>In table cell G, (third cell in the second row):</p> + <ul> + <li>Two sets of horizontal aqua-backed double violet stripes should run just inside the top border edge. + <li>A set of vertical stripes should run down just inside the left border edge, going under both horizontal stripes. + <li>Another set of vertical stripes should run down just inside the right border edge, also going under both horizontal stripes. + </ul> + <dl> + <dt>next + <dd><a href="backgr_layers-hide.html">Background Layers: empty-cells: show</a> + <dt>previous + <dd><a href="backgr_position-table-cell.html">Background Position: Background on 'table-cell'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c"></th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_position-table-cell.html b/layout/reftests/table-background/backgr_position-table-cell.html new file mode 100644 index 0000000000..0b25b30cab --- /dev/null +++ b/layout/reftests/table-background/backgr_position-table-cell.html @@ -0,0 +1,127 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-cell'</title> +<link rel="next" href="backgr_layers-show.html" title="Background Layers: empty-cells: show"> +<link rel="prev" href="backgr_position-table-column.html" title="Background Position: Background on 'table-column'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + .e {background: black url(edge.gif) top left no-repeat} + .m {background: black url(edge.gif) bottom right no-repeat} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part B: Background Position</h2> + + <h3>Background on 'table-cell'</h3> + + <p>Two cells are styled.</p> + <p>There should be three aqua stripes just inside the top and left padding edges of cell E.</p> + <p>There should be three aqua stripes just inside the bottom and right padding edges of Cell M</a> + + <dl> + <dt>next + <dd><a href="backgr_layers-show.html">Background Layers: empty-cells: show</a> + <dt>previous + <dd><a href="backgr_position-table-column.html">Background Position: Background on 'table-column'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_position-table-column-group.html b/layout/reftests/table-background/backgr_position-table-column-group.html new file mode 100644 index 0000000000..3751d233aa --- /dev/null +++ b/layout/reftests/table-background/backgr_position-table-column-group.html @@ -0,0 +1,126 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-column-group'</title> +<link rel="next" href="backgr_position-table-row.html" title="Background Position: Background on 'table-row'"> +<link rel="prev" href="backgr_position-table-row-group.html" title="Background Position: Background on 'table-row-group'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + .colgroup-A {background: black url(edge.gif) bottom right no-repeat} + .colgroup-B {background: black url(edge.gif) top left no-repeat} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part B: Background Position</h2> + + <h3>Background on 'table-column-group'</h3> + + <p>Three aqua stripes should run just inside the bottom border edge of the last cell in the first three columns and up the right border edge of the cells in the third column.</p> + <p>Three aqua stripes should also run just inside the top border edge of the first cell in the last column and down the left border edge of each cell in that column.</p> + + <dl> + <dt>next + <dd><a href="backgr_position-table-row.html">Background Position: Background on 'table-row'</a> + <dt>previous + <dd><a href="backgr_position-table-row-group.html">Background Position: Background on 'table-row-group'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=3>TD M</td> + + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_position-table-column.html b/layout/reftests/table-background/backgr_position-table-column.html new file mode 100644 index 0000000000..5468033d23 --- /dev/null +++ b/layout/reftests/table-background/backgr_position-table-column.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-column'</title> +<link rel="next" href="backgr_position-table-cell.html" title="Background Position: Background on 'table-cell'"> +<link rel="prev" href="backgr_position-table-row.html" title="Background Position: Background on 'table-row'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + .col-1 {background: black url(edge.gif) bottom right no-repeat} + .col-2 {background: black url(edge.gif) bottom right no-repeat} + .col-3 {background: black url(edge.gif) top left} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part B: Background Position</h2> + + <h3>Background on 'table-column'</h3> + + <p>Three columns are styled.</p> + <p>In the first column, there should be three vertical stripes just inside the right border edge of the first three cells. The stripes should continue in the last cell, turning a right angle to the left into three aqua stripes along the bottom border edge of the last cell. The last cell should not have three vertical stripes along its right border edge.</p> + <p>In the second column, there should be three vertical stripes just inside the right border edge of the first three cells.</p> + <p>In the third column, there should be three vertical stripes just inside the top border edge of the first cell and just inside the left edge of all four cells.</p> + + <dl> + <dt>next + <dd><a href="backgr_position-table-cell.html">Background Position: Background on 'table-cell'</a> + <dt>previous + <dd><a href="backgr_position-table-row.html">Background Position: Background on 'table-row'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_position-table-row-group.html b/layout/reftests/table-background/backgr_position-table-row-group.html new file mode 100644 index 0000000000..5ab618dc75 --- /dev/null +++ b/layout/reftests/table-background/backgr_position-table-row-group.html @@ -0,0 +1,128 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-row-group'</title> +<link rel="next" href="backgr_position-table-column-group.html" title="Background Position: Background on 'table-row-group'"> +<link rel="prev" href="backgr_position-table.html" title="Background Position: Background on 'table'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + thead {background: black url(edge.gif) top right no-repeat} + tbody {background: black url(edge.gif) bottom left no-repeat} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part B: Background Position</h2> + + <h3>Background on 'table-row-group'</h3> + + <p>There should be three aqua stripes along the top border edge of each cell in the first row and three stripes along the right border edge of the last cell in that row.</p> + <p>There should be three aqua stripes along the bottom border edge of cells E, J, K, and L. There should also be +three vertical aqua stripes along the left edge of cell E.</p> + + <dl> + <dt>next + <dd><a href="backgr_position-table-column-group.html">Background Position: Background on 'table-column-group'</a> + <dt>previous + <dd><a href="backgr_position-table.html">Background Position: Background on 'table'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_position-table-row.html b/layout/reftests/table-background/backgr_position-table-row.html new file mode 100644 index 0000000000..b0ae651fdb --- /dev/null +++ b/layout/reftests/table-background/backgr_position-table-row.html @@ -0,0 +1,135 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-row'</title> +<link rel="next" href="backgr_position-table-column.html" title="Background Position: Background on 'table-column'"> +<link rel="prev" href="backgr_position-table-column-group.html" title="Background Position: Background on 'table-column-group'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + .th-row-1 {background: black url(edge.gif) bottom right no-repeat;} + .tb-row-1 {background: black url(edge.gif) bottom left no-repeat;} + .tb-row-2 {background: black url(edge.gif) top left no-repeat;} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part B: Background Position</h2> + + <h3>Background on 'table-row'</h3> + + <p>Three rows are styled.</p> + <p>The first row should have three aqua stripes just inside the + bottom and right border edges of its last cell. The bottom three + stripes should continue across the row, appearing along the border + edge of each cell.</p> + <p>The second row should have three vertical aqua stripes just + inside the left border edge of the top half of the first cell (Cell + E.) Three horizontal aqua stripes should cut across that cell and + align along the bottom border edge of the last three cells.</p> + <p>The third row should have three horizontal aqua stripes along the + top border edge of the last three cells in the row.</p> + <dl> + <dt>next + <dd><a href="backgr_position-table-column.html">Background Position: Background on 'table-column'</a> + <dt>previous + <dd><a href="backgr_position-table-column-group.html">Background Position: Background on 'table-column-group'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_position-table.html b/layout/reftests/table-background/backgr_position-table.html new file mode 100644 index 0000000000..bc1a079f22 --- /dev/null +++ b/layout/reftests/table-background/backgr_position-table.html @@ -0,0 +1,124 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table'</title> +<link rel="next" href="backgr_position-table-row-group.html" title="Background Position: Background on 'table-row-group'"> +<link rel="prev" href="backgr_position-table-cell.html" title="Background Position: Background on 'table-cell'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {background: black url(edge.gif) top right no-repeat} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part B: Background Position</h2> + + <h3>Background on 'table'</h3> + + <p>There should be three aqua stripes just inside the top and right table borders.</p> + + <dl> + <dt>next + <dd><a href="backgr_position-table-row-group.html">Background Position: Background on 'table-row-group'</a> + <dt>previous + <dd><a href="backgr_position-table-cell.html">Background Position: Background on 'table-cell'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr id="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + <tfoot> + <tr id="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr id="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr id="tb-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_simple-table-cell.html b/layout/reftests/table-background/backgr_simple-table-cell.html new file mode 100644 index 0000000000..6e2b1e4b50 --- /dev/null +++ b/layout/reftests/table-background/backgr_simple-table-cell.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-cell'</title> +<link rel="prev" href="backgr_simple-table-column.html" title="Background Area: Background on 'table-column'"> +<link rel="next" href="backgr_position-table.html" title="Background Position: Background on 'table'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + td,th {background: black url(rainbowv.gif) top right} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part A: Background Area</h2> + + <h3>Background on 'table-cell'</h3> + + <p class="clip">Each cell's background should fill the rectangle + defined by its border edge. There should be no gaps or holes in + the background within a cell.</p> + <p class="position">A purple band should align with the top + padding edge of each cell, and an orange stripe should align a + few pixels to the left of its right padding edge.</p> + + <dl> + <dt>next + <dd><a href="backgr_position-table.html">Background Position: Background on 'table'</a> + <dt>previous + <dd><a href="backgr_simple-table-column.html">Background Area: Background on 'table-column'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_simple-table-column-group.html b/layout/reftests/table-background/backgr_simple-table-column-group.html new file mode 100644 index 0000000000..52c6a3f7db --- /dev/null +++ b/layout/reftests/table-background/backgr_simple-table-column-group.html @@ -0,0 +1,136 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-column-group'</title> +<link rel="next" href="backgr_simple-table-row.html" title="Background Area: Background on 'table-row'"> +<link rel="prev" href="backgr_simple-table-row-group.html" title="Background Area: Background on 'table-row-group'"> +<link rel="contents" href="./backgr_index,.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + colgroup {background: black url(rainbowv.gif) top left} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part A: Background Area</h2> + + <h3>Background on 'table-column-group'</h3> + + <p class="scope">The first column group spans the first three + columns. The second column group only contains the last column. + <p class="clip">The table column group background should be visible + within the border edge of each cell originating in the column + group. Within each column group, all stripes should line up as if + the cells were cutouts in a stencil placed over the column group + background. Furthermore, the horizontal stripes should also align + across the two column groups.</p> + <p class="position">A purple band should align with the top border + edge of the cells in the first row. An aqua stripe should align a + few pixels to the right of the left border edge of cells in the + column group's leftmost column.</p> + + <dl> + <dt>next + <dd><a href="backgr_simple-table-row.html">Background Area: Background on 'table-row'</a> + <dt>previous + <dd><a href="backgr_simple-table-row-group.html">Background Area: Background on 'table-row-group'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_simple-table-column.html b/layout/reftests/table-background/backgr_simple-table-column.html new file mode 100644 index 0000000000..f23e21989b --- /dev/null +++ b/layout/reftests/table-background/backgr_simple-table-column.html @@ -0,0 +1,134 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-column'</title> +<link rel="next" href="backgr_simple-table-cell.html" title="Background Area: Background on 'table-cell'"> +<link rel="prev" href="backgr_simple-table-row.html" title="Background Area: Background on 'table-row'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + col {background: black url(rainbowv.gif) bottom right} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part A: Background Area</h2> + + <h3>Background on 'table-column'</h3> + + <p class="scope">All four columns are styled.</p> + <p class="clip">The table column background should be visible within + the border edge of each cell originating in the column, and the + background should be continuously tiled to fill the entire cell. + Within the column, all stripes should line up as if the cells were + cutouts in a stencil placed over the column background. + Furthermore, horizontal stripes should align across columns.</p> + <p class="position">A red band should align with the bottom + border edge of the last cell in each column. An orange stripe + should align a few pixels to the left of the right border of the + non-column-spanning cells in each column.</p> + + <dl> + <dt>next + <dd><a href="backgr_simple-table-cell.html">Background Area: Background on 'table-cell'</a> + <dt>previous + <dd><a href="backgr_simple-table-row.html">Background Area: Background on 'table-row'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_simple-table-row-group.html b/layout/reftests/table-background/backgr_simple-table-row-group.html new file mode 100644 index 0000000000..22f7cdf45c --- /dev/null +++ b/layout/reftests/table-background/backgr_simple-table-row-group.html @@ -0,0 +1,134 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-row-group'</title> +<link rel="next" href="backgr_simple-table-column-group.html" title="Background Area: Background on 'table-row-group'"> +<link rel="prev" href="backgr_simple-table.html" title="Background Area: Background on 'table'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + tbody {background: black url(rainbowh.gif) bottom left} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part A: Background Area</h2> + + <h3>Background on 'table-row-group'</h3> + + <p class="scope">The styled row group spans the second and third + rows.</p> + <p class="clip">The table row group background should be visible + within the border edge of each cell originating in the row group. + All stripes should line up as if the cells were cutouts in a + stencil placed over the row group background.</p> + <p class="position">A red band should align with the left border + edge of the first cells in each of the row group's rows. An orange + stripe should align a few pixels above the bottom border of the + cells in the row group's last row.</p> + + <dl> + <dt>next + <dd><a href="backgr_simple-table-column-group.html">Background Area: Background on 'table-column-group'</a> + <dt>previous + <dd><a href="backgr_simple-table.html">Background Area: Background on 'table'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_simple-table-row.html b/layout/reftests/table-background/backgr_simple-table-row.html new file mode 100644 index 0000000000..3b9759baea --- /dev/null +++ b/layout/reftests/table-background/backgr_simple-table-row.html @@ -0,0 +1,134 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-row'</title> +<link rel="next" href="backgr_simple-table-column.html" title="Background Area: Background on 'table-column'"> +<link rel="prev" href="backgr_simple-table-column-group.html" title="Background Area: Background on 'table-column-group'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + tr {background: black url(rainbowh.gif) bottom left;} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part A: Background Area</h2> + + <h3>Background on 'table-row'</h3> + + <p class="scope">All four rows are styled.</p> + <p class="clip">The table row background should be visible within + the border edge of each cell originating in the row, and the + background should be continuously tiled to fill the entire cell. + Within each row, all stripes should line up as if the cells were + cutouts in a stencil placed over the row background. Furthermore, + vertical stripes should align across rows.</p> + <p class="position">A red band should align with the left border + edge of the first cells in each row. An orange stripe should align + a few pixels above the bottom border of the non-row-spanning cells + in each row.</p> + + <dl> + <dt>next + <dd><a href="backgr_simple-table-column.html">Background Area: Background on 'table-column'</a> + <dt>previous + <dd><a href="backgr_simple-table-column-group.html">Background Area: Background on 'table-column-group'</a> + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/backgr_simple-table.html b/layout/reftests/table-background/backgr_simple-table.html new file mode 100644 index 0000000000..27238d17b2 --- /dev/null +++ b/layout/reftests/table-background/backgr_simple-table.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table'</title> +<link rel="next" href="backgr_simple-table-row-group.html" title="Background Area: Background on 'table-row-group'"> +<link rel="prev contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> +<style type="text/css"> + + table {background: black url(rainbowh.gif) top right} + +</style> +</head> +<body> +<h1>CSS2 Table Backgrounds Test Suite</h1> + +<h2>Part A: Background Area</h2> + + <h3>Background on 'table'</h3> + + <p class="clip">The table background should fill the rectangle + defined by the outer border of the table. There should be no gaps + or holes in the background and the stripes should all be + continuous.</p> + <p class="position">A purple band should align with the left edge + of the painted area, and an aqua stripe should align a few pixels + below the top border.</p> + + <dl> + <dt>next + <dd><a href="backgr_simple-table-row-group.html">Background Area: Background on 'table-row-group'</a> + <dt>previous + <dd>-- + <dt>contents + <dd><a href="./backgr_index.html">Table of Contents</a> + </dl> + + <table class="separate"> + <caption>With 'border-collapse: separate'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> + + <table class="collapse"> + <caption>With 'border-collapse: collapse'</caption> + <colgroup class="colgroup-A"> + <col class="col-1"> + <col class="col-2"> + <col class="col-3"> + </colgroup> + <colgroup class="colgroup-B"> + <col class="col-4"> + </colgroup> + <thead> + <tr class="th-row-1"> + <th class="a">TH A</th> + <th class="b">TH B</th> + <th class="c">TH C</th> + <th class="d">TH D</th> + </tr> + </thead> + <tfoot> + <tr class="tf-row-1"> + <td class="m" colspan=2>TD M</td> + + <td class="o">TD O</td> + <td class="p">TD P</td> + </tfoot> + <tbody> + <tr class="tb-row-1"> + <td class="e" rowspan=2>TD E</td> + <td class="f">TD F</td> + <td class="g">TD G</td> + <td class="h">TD H</td> + </tr> + <tr class="tb-row-2"> + + <td class="j">TD J</td> + <td class="k">TD K</td> + <td class="l">TD L</td> + </tr> + </tbody> + </table> +<div class="validity"> + <a href="http://validator.w3.org/check/referer"><img + src="valid-html401.png" height="31" width="88" + alt="Valid HTML 4.01!"></a> +</div> +<address> + CSS2 Table Backgrounds Test Suite designed and written by fantasai <fantasai@escape.com> +</address> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-cell-ref.html b/layout/reftests/table-background/border-collapse-opacity-table-cell-ref.html new file mode 100644 index 0000000000..d3a4b36330 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-cell-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 57px; height: 19px; margin: 40px 118px 86px 123px; } + div.color { background-color: aqua; } + + /* The use of opacity < 1 on this cell will create a stacking context, + which causes its background to be inset inside the (collapsed) borders, + see bug 1859523. Adjust the reference div to match. */ + div.color.o { width: 55px; height: 15px; margin: 42px 119px 88px 124px; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 1px 2px; } + div.imagebr { background-position: 56px 17px; } + + </style> +</head> +<body> + +<div class="color o"></div> +<div class="imagetl o"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-cell.html b/layout/reftests/table-background/border-collapse-opacity-table-cell.html new file mode 100644 index 0000000000..043a82eee3 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-cell.html @@ -0,0 +1,109 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color td.t { background-color: aqua; } + + table.imagetl td.t, table.imagebr td.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl td.t { background-position: top left; /* default */ } + table.imagebr td.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="o t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody class="o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr class="o"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-column-group-ref.html b/layout/reftests/table-background/border-collapse-opacity-table-column-group-ref.html new file mode 100644 index 0000000000..9ec969236a --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-column-group-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 171px; height: 97px; margin: 2px 61px 8px 66px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 171px 97px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-column-group.html b/layout/reftests/table-background/border-collapse-opacity-table-column-group.html new file mode 100644 index 0000000000..c83cf63345 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-column-group.html @@ -0,0 +1,109 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color colgroup.t { background-color: aqua; } + + table.imagetl colgroup.t, table.imagebr colgroup.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl colgroup.t { background-position: top left; /* default */ } + table.imagebr colgroup.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-column-ref.html b/layout/reftests/table-background/border-collapse-opacity-table-column-ref.html new file mode 100644 index 0000000000..82795ef8be --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-column-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 57px; height: 97px; margin: 2px 121px 8px 123px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 57px 97px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-column.html b/layout/reftests/table-background/border-collapse-opacity-table-column.html new file mode 100644 index 0000000000..edcfde4234 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-column.html @@ -0,0 +1,109 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color col.t { background-color: aqua; } + + table.imagetl col.t, table.imagebr col.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl col.t { background-position: top left; /* default */ } + table.imagebr col.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-ref.html b/layout/reftests/table-background/border-collapse-opacity-table-ref.html new file mode 100644 index 0000000000..625b952a5e --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 291px; height: 103px; margin: 0px 3px 2px 4px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 3px 2px; } + div.imagebr { background-position: 290px 99px; } + + </style> +</head> +<body> + +<div class="color o"></div> +<div class="imagetl o"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-row-group-ref.html b/layout/reftests/table-background/border-collapse-opacity-table-row-group-ref.html new file mode 100644 index 0000000000..053c9d620c --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-row-group-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 287px; height: 57px; margin: 21px 4px 48px 7px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 287px 57px; } + + </style> +</head> +<body> + +<div class="color o"></div> +<div class="imagetl o"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-row-group.html b/layout/reftests/table-background/border-collapse-opacity-table-row-group.html new file mode 100644 index 0000000000..0a3faac941 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-row-group.html @@ -0,0 +1,109 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tbody.t { background-color: aqua; } + + table.imagetl tbody.t, table.imagebr tbody.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tbody.t { background-position: top left; /* default */ } + table.imagebr tbody.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color o"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-row-ref.html b/layout/reftests/table-background/border-collapse-opacity-table-row-ref.html new file mode 100644 index 0000000000..80e548ab25 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-row-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 287px; height: 19px; margin: 40px 4px 86px 7px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 287px 19px; } + + </style> +</head> +<body> + +<div class="color o"></div> +<div class="imagetl o"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table-row.html b/layout/reftests/table-background/border-collapse-opacity-table-row.html new file mode 100644 index 0000000000..836bd5c3e1 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table-row.html @@ -0,0 +1,109 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tr.t { background-color: aqua; } + + table.imagetl tr.t, table.imagebr tr.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tr.t { background-position: top left; /* default */ } + table.imagebr tr.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-opacity-table.html b/layout/reftests/table-background/border-collapse-opacity-table.html new file mode 100644 index 0000000000..95619a2400 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-opacity-table.html @@ -0,0 +1,109 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color { background-color: aqua; } + + table.imagetl, table.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl { background-position: top left; /* default */ } + table.imagebr { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color o"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl o"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-cell-ref.html b/layout/reftests/table-background/border-collapse-table-cell-ref.html new file mode 100644 index 0000000000..2eabe4dba7 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-cell-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 57px; height: 19px; margin: 40px 118px 86px 123px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 1px 2px; } + div.imagebr { background-position: 56px 17px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-cell.html b/layout/reftests/table-background/border-collapse-table-cell.html new file mode 100644 index 0000000000..f8286ad137 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-cell.html @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color td.t { background-color: aqua; } + + table.imagetl td.t, table.imagebr td.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl td.t { background-position: top left; /* default */ } + table.imagebr td.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-column-group-ref.html b/layout/reftests/table-background/border-collapse-table-column-group-ref.html new file mode 100644 index 0000000000..9ec969236a --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-column-group-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 171px; height: 97px; margin: 2px 61px 8px 66px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 171px 97px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-column-group.html b/layout/reftests/table-background/border-collapse-table-column-group.html new file mode 100644 index 0000000000..33de7b0fd0 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-column-group.html @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color colgroup.t { background-color: aqua; } + + table.imagetl colgroup.t, table.imagebr colgroup.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl colgroup.t { background-position: top left; /* default */ } + table.imagebr colgroup.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-column-ref.html b/layout/reftests/table-background/border-collapse-table-column-ref.html new file mode 100644 index 0000000000..82795ef8be --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-column-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 57px; height: 97px; margin: 2px 121px 8px 123px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 57px 97px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-column.html b/layout/reftests/table-background/border-collapse-table-column.html new file mode 100644 index 0000000000..2387a6d1bb --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-column.html @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color col.t { background-color: aqua; } + + table.imagetl col.t, table.imagebr col.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl col.t { background-position: top left; /* default */ } + table.imagebr col.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-ref.html b/layout/reftests/table-background/border-collapse-table-ref.html new file mode 100644 index 0000000000..f0bed1aa22 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 291px; height: 103px; margin: 0px 3px 2px 4px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 3px 2px;} + div.imagebr { background-position: 290px 99px;} + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-row-group-ref.html b/layout/reftests/table-background/border-collapse-table-row-group-ref.html new file mode 100644 index 0000000000..90ce2e71b8 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-row-group-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 287px; height: 57px; margin: 21px 4px 48px 7px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 287px 57px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-row-group.html b/layout/reftests/table-background/border-collapse-table-row-group.html new file mode 100644 index 0000000000..f53a479dac --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-row-group.html @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tbody.t { background-color: aqua; } + + table.imagetl tbody.t, table.imagebr tbody.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tbody.t { background-position: top left; /* default */ } + table.imagebr tbody.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-row-ref.html b/layout/reftests/table-background/border-collapse-table-row-ref.html new file mode 100644 index 0000000000..cba5aac79c --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-row-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 8px 6px; + + height is 97px: + (2px of border outside height) + extra border width for top row: 0 + cell * 5: == 19px * 5 == 95px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 2px; + extra border width for top row: 2px + (4px of border outside height) + + width is 287px: + (3px of border outside width) + extra border width for left column: 2px + cell * 5: == 57px * 5 == 285px + border-left: 1px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + (1px of border outside width) + */ + + div { width: 287px; height: 19px; margin: 40px 4px 86px 7px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 287px 19px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table-row.html b/layout/reftests/table-background/border-collapse-table-row.html new file mode 100644 index 0000000000..ebcc1c2ad0 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table-row.html @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tr.t { background-color: aqua; } + + table.imagetl tr.t, table.imagebr tr.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tr.t { background-position: top left; /* default */ } + table.imagebr tr.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-collapse-table.html b/layout/reftests/table-background/border-collapse-table.html new file mode 100644 index 0000000000..b62d5467a5 --- /dev/null +++ b/layout/reftests/table-background/border-collapse-table.html @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 8px 6px; /* collapsed */ + padding: 3px 7px 8px 6px; /* ignored */ + border-collapse: collapse; + } + + td { + border: transparent solid; + border-width: 2px 0 4px 2px; /* collapsed */ + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color { background-color: aqua; } + + table.imagetl, table.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl { background-position: top left; /* default */ } + table.imagebr { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-cell-ref.html b/layout/reftests/table-background/border-separate-opacity-table-cell-ref.html new file mode 100644 index 0000000000..f161f067e5 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-cell-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 59px; height: 21px; margin: 58px 136px 126px 137px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 3px 2px; } + div.imagebr { background-position: 58px 17px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl o"></div> +<div class="imagebr o"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-cell.html b/layout/reftests/table-background/border-separate-opacity-table-cell.html new file mode 100644 index 0000000000..64396f3879 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-cell.html @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color td.t { background-color: aqua; } + + table.imagetl td.t, table.imagebr td.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl td.t { background-position: top left; /* default */ } + table.imagebr td.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-column-group-ref.html b/layout/reftests/table-background/border-separate-opacity-table-column-group-ref.html new file mode 100644 index 0000000000..6985dae64d --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-column-group-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 181px; height: 117px; margin: 10px 75px 30px 76px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 181px 117px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-column-group.html b/layout/reftests/table-background/border-separate-opacity-table-column-group.html new file mode 100644 index 0000000000..9c4b233c28 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-column-group.html @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color colgroup.t { background-color: aqua; } + + table.imagetl colgroup.t, table.imagebr colgroup.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl colgroup.t { background-position: top left; /* default */ } + table.imagebr colgroup.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-column-ref.html b/layout/reftests/table-background/border-separate-opacity-table-column-ref.html new file mode 100644 index 0000000000..a6629347d2 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-column-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 59px; height: 117px; margin: 10px 136px 30px 137px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 59px 117px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-column.html b/layout/reftests/table-background/border-separate-opacity-table-column.html new file mode 100644 index 0000000000..a31df6b6ac --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-column.html @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color col.t { background-color: aqua; } + + table.imagetl col.t, table.imagebr col.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl col.t { background-position: top left; /* default */ } + table.imagebr col.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-ref.html b/layout/reftests/table-background/border-separate-opacity-table-ref.html new file mode 100644 index 0000000000..e68d8dce11 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div { width: 325px; height: 145px; margin: 0px 3px 2px 4px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 3px 4px; } + div.imagebr { background-position: 323px 138px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl o"></div> +<div class="imagebr o"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-row-group-ref.html b/layout/reftests/table-background/border-separate-opacity-table-row-group-ref.html new file mode 100644 index 0000000000..faf70318c1 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-row-group-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 303px; height: 69px; margin: 34px 14px 78px 15px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 303px 69px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl o"></div> +<div class="imagebr o"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-row-group.html b/layout/reftests/table-background/border-separate-opacity-table-row-group.html new file mode 100644 index 0000000000..79225d79d6 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-row-group.html @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tbody.t { background-color: aqua; } + + table.imagetl tbody.t, table.imagebr tbody.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tbody.t { background-position: top left; /* default */ } + table.imagebr tbody.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-row-ref.html b/layout/reftests/table-background/border-separate-opacity-table-row-ref.html new file mode 100644 index 0000000000..afd545d4eb --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-row-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 303px; height: 21px; margin: 58px 14px 126px 15px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 303px 21px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl o"></div> +<div class="imagebr o"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table-row.html b/layout/reftests/table-background/border-separate-opacity-table-row.html new file mode 100644 index 0000000000..6670fb2294 --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table-row.html @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tr.t { background-color: aqua; } + + table.imagetl tr.t, table.imagebr tr.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tr.t { background-position: top left; /* default */ } + table.imagebr tr.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-opacity-table.html b/layout/reftests/table-background/border-separate-opacity-table.html new file mode 100644 index 0000000000..83faf1fa0a --- /dev/null +++ b/layout/reftests/table-background/border-separate-opacity-table.html @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + .o { opacity: 0.5; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color { background-color: aqua; } + + table.imagetl, table.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl { background-position: top left; /* default */ } + table.imagebr { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t o"> + <col> + <col class="t o"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t o"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl o"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr o"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-cell-ref.html b/layout/reftests/table-background/border-separate-table-cell-ref.html new file mode 100644 index 0000000000..618ef36f82 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-cell-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 59px; height: 21px; margin: 58px 136px 126px 137px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 3px 2px; } + div.imagebr { background-position: 58px 17px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-cell.html b/layout/reftests/table-background/border-separate-table-cell.html new file mode 100644 index 0000000000..e29e64610f --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-cell.html @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color td.t { background-color: aqua; } + + table.imagetl td.t, table.imagebr td.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl td.t { background-position: top left; /* default */ } + table.imagebr td.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-column-group-ref.html b/layout/reftests/table-background/border-separate-table-column-group-ref.html new file mode 100644 index 0000000000..6985dae64d --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-column-group-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 181px; height: 117px; margin: 10px 75px 30px 76px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 181px 117px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-column-group.html b/layout/reftests/table-background/border-separate-table-column-group.html new file mode 100644 index 0000000000..2dc3f4b0f1 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-column-group.html @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color colgroup.t { background-color: aqua; } + + table.imagetl colgroup.t, table.imagebr colgroup.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl colgroup.t { background-position: top left; /* default */ } + table.imagebr colgroup.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-column-ref.html b/layout/reftests/table-background/border-separate-table-column-ref.html new file mode 100644 index 0000000000..a6629347d2 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-column-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 59px; height: 117px; margin: 10px 136px 30px 137px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 59px 117px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-column.html b/layout/reftests/table-background/border-separate-table-column.html new file mode 100644 index 0000000000..37a4e7e6b3 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-column.html @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color col.t { background-color: aqua; } + + table.imagetl col.t, table.imagebr col.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl col.t { background-position: top left; /* default */ } + table.imagebr col.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-ref.html b/layout/reftests/table-background/border-separate-table-ref.html new file mode 100644 index 0000000000..a260d87e80 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div { width: 325px; height: 145px; margin: 0px 3px 2px 4px; } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 3px 4px; } + div.imagebr { background-position: 323px 138px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-row-group-ref.html b/layout/reftests/table-background/border-separate-table-row-group-ref.html new file mode 100644 index 0000000000..a40af43a62 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-row-group-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 303px; height: 69px; margin: 34px 14px 78px 15px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 303px 69px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-row-group.html b/layout/reftests/table-background/border-separate-table-row-group.html new file mode 100644 index 0000000000..1f9802380a --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-row-group.html @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tbody.t { background-color: aqua; } + + table.imagetl tbody.t, table.imagebr tbody.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tbody.t { background-position: top left; /* default */ } + table.imagebr tbody.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-row-ref.html b/layout/reftests/table-background/border-separate-table-row-ref.html new file mode 100644 index 0000000000..cacab1f131 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-row-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Table background tests</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + /* + table { + margin: 0px 3px 2px 4px; + border-width: 4px 2px 7px 3px; + + border-box height is 145px: + border-top: 4px; + padding-top: 3px + border-spacing: 3px * 6 == 18px + cell * 5: == 21px * 5 == 105px + border-top: 2px; + padding-top: 1px; + height: 10px; + padding-bottom: 4px; + border-bottom: 4px; + padding-bottom: 8px; + border-bottom: 7px; + + border-box width is 325px: + border-left: 3px; + padding-left: 6px + border-spacing: 2px * 6 == 12px + cell * 5: == 59px * 5 == 295px + border-left: 3px; + padding-left: 3px; + width: 50px; + padding-right: 2px; + border-right: 1px; + padding-right: 7px; + border-right: 2px; + */ + + div.color, div.imagetl, div.imagebr { + width: 303px; height: 21px; margin: 58px 14px 126px 15px; + } + div.color { background-color: aqua; } + + div.imagetl, div.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + div.imagetl { background-position: 0 0; } + div.imagebr { background-position: 303px 21px; } + + div.vstripe, div.hstripe { background: white; position: absolute; } + div.vstripe { top: 0; width: 2px; height: 500px; } + div.hstripe { left: 0; height: 3px; width: 400px; } + + </style> +</head> +<body> + +<div class="color"></div> +<div class="imagetl"></div> +<div class="imagebr"></div> + +<div class="hstripe" style="top: 46px"></div> +<div class="hstripe" style="top: 70px"></div> +<div class="hstripe" style="top: 94px"></div> +<div class="hstripe" style="top: 118px"></div> +<div class="hstripe" style="top: 193px"></div> +<div class="hstripe" style="top: 217px"></div> +<div class="hstripe" style="top: 241px"></div> +<div class="hstripe" style="top: 265px"></div> +<div class="hstripe" style="top: 340px"></div> +<div class="hstripe" style="top: 364px"></div> +<div class="hstripe" style="top: 388px"></div> +<div class="hstripe" style="top: 412px"></div> + +<div class="vstripe" style="left: 89px"></div> +<div class="vstripe" style="left: 150px"></div> +<div class="vstripe" style="left: 211px"></div> +<div class="vstripe" style="left: 272px"></div> +<div class="vstripe" style="left: 333px"></div> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table-row.html b/layout/reftests/table-background/border-separate-table-row.html new file mode 100644 index 0000000000..c10a6443e5 --- /dev/null +++ b/layout/reftests/table-background/border-separate-table-row.html @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color tr.t { background-color: aqua; } + + table.imagetl tr.t, table.imagebr tr.t { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl tr.t { background-position: top left; /* default */ } + table.imagebr tr.t { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/border-separate-table.html b/layout/reftests/table-background/border-separate-table.html new file mode 100644 index 0000000000..cd6f17c66a --- /dev/null +++ b/layout/reftests/table-background/border-separate-table.html @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>CSS 2.1 Test Suite: table backgrounds</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> + <meta name="flags" content="" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } + body { padding: 15px; } + + table { + margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ + border: transparent solid; + border-width: 4px 2px 7px 3px; + padding: 3px 7px 8px 6px; + border-collapse: separate; + border-spacing: 2px 3px; + } + + td { + border: transparent solid; + border-width: 2px 1px 4px 3px; + padding: 1px 2px 4px 3px; + empty-cells: show; + } + + div { height: 10px; width: 50px; } + + table.color { background-color: aqua; } + + table.imagetl, table.imagebr { + background-image: url(repeatable-diagonal-gradient-with-ticks.png); + } + + table.imagetl { background-position: top left; /* default */ } + table.imagebr { background-position: bottom right; /* default */ } + + </style> +</head> +<body> + +<table class="color"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagetl"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +<table class="imagebr"> + <colgroup><col></colgroup> + <colgroup class="t"> + <col> + <col class="t"> + <col> + </colgroup> + <colgroup><col></colgroup> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody class="t"> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> + <tbody> + <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> + </tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/table-background/common.css b/layout/reftests/table-background/common.css new file mode 100644 index 0000000000..2a9607e57b --- /dev/null +++ b/layout/reftests/table-background/common.css @@ -0,0 +1,43 @@ +body { + color: lime; + background: #333333; + font-family: monospace; +} +:link { + color: yellow; +} +:visited { + color: #999900; +} +table { + border: 1px dotted; + border-spacing: 7px; + font-size: larger; + font-weight: 900; + font-family: sans-serif; + color: white; +} +td, th { + border: 1px dotted; +} +.separate { + border-collapse: separate; +} +.collapse { + border-collapse: collapse; +} +.b, .e { + border: 13px dotted; +} + +/*Columns*/ +.a {width: 126px} +.b {width: 192px} +.c {width: 114px} +.d {width: 109px} + +/*Rows*/ +.d {height: 96px} +.h {height: 104px} +.l {height: 80px} +.p {height: 111px} diff --git a/layout/reftests/table-background/edge.gif b/layout/reftests/table-background/edge.gif Binary files differnew file mode 100644 index 0000000000..dd94b28a97 --- /dev/null +++ b/layout/reftests/table-background/edge.gif diff --git a/layout/reftests/table-background/empty-cells-default-1-ref.html b/layout/reftests/table-background/empty-cells-default-1-ref.html new file mode 100644 index 0000000000..bedf3926fe --- /dev/null +++ b/layout/reftests/table-background/empty-cells-default-1-ref.html @@ -0,0 +1,6 @@ +<!-- Quirks mode on purpose --> +<table style="empty-cells: show"> + <tr> + <td style="border: 10px solid blue; background: yellow; height: 50px; width: 50px"></td> + </tr> +</table> diff --git a/layout/reftests/table-background/empty-cells-default-1.html b/layout/reftests/table-background/empty-cells-default-1.html new file mode 100644 index 0000000000..af4883945c --- /dev/null +++ b/layout/reftests/table-background/empty-cells-default-1.html @@ -0,0 +1,6 @@ +<!-- Quirks mode on purpose --> +<table> + <tr> + <td style="border: 10px solid blue; background: yellow; height: 50px; width: 50px"></td> + </tr> +</table> diff --git a/layout/reftests/table-background/empty-cells-default-2-ref.html b/layout/reftests/table-background/empty-cells-default-2-ref.html new file mode 100644 index 0000000000..2eaef9ca91 --- /dev/null +++ b/layout/reftests/table-background/empty-cells-default-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<table style="empty-cells: show"> + <tr> + <td style="border: 10px solid blue; background: yellow; height: 50px; width: 50px"></td> + </tr> +</table> diff --git a/layout/reftests/table-background/empty-cells-default-2.html b/layout/reftests/table-background/empty-cells-default-2.html new file mode 100644 index 0000000000..a5e7c07a2b --- /dev/null +++ b/layout/reftests/table-background/empty-cells-default-2.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<table> + <tr> + <td style="border: 10px solid blue; background: yellow; height: 50px; width: 50px"></td> + </tr> +</table> diff --git a/layout/reftests/table-background/empty.html b/layout/reftests/table-background/empty.html new file mode 100644 index 0000000000..59e7954d87 --- /dev/null +++ b/layout/reftests/table-background/empty.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Background on 'table-cell'</title> +<link rel="prev" href="backgr_simple-table-column.html" title="Background Area: Background on 'table-column'"> +<link rel="next" href="backgr_position-table.html" title="Background Position: Background on 'table'"> +<link rel="contents" href="./backgr_index.html" title="Table of Contents"> +<link rel="stylesheet" type="text/css" href="common.css"> + +</head> +<body> + +</body> +</html> diff --git a/layout/reftests/table-background/hidden-cells-1.html b/layout/reftests/table-background/hidden-cells-1.html new file mode 100644 index 0000000000..1b11d4b2d5 --- /dev/null +++ b/layout/reftests/table-background/hidden-cells-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<table style="width: 200px; height: 200px; empty-cells: hide; color: white"> + <colgroup style="background: red"> + <col style="background: red"> + </colgroup> + <tbody style="background: red"> + <tr style="background: red"> + <td></td> + <td style="visibility: hidden">X</td> + </tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/hidden-cells-2.html b/layout/reftests/table-background/hidden-cells-2.html new file mode 100644 index 0000000000..277df6daa7 --- /dev/null +++ b/layout/reftests/table-background/hidden-cells-2.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<table style="width: 200px; height: 200px; empty-cells: show; color: white"> + <colgroup style="background: red"> + <col style="background: red"> + </colgroup> + <tbody style="background: red"> + <tr style="background: red"> + <td style="background: white"></td> + <td style="visibility: hidden"></td> + </tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/hidden-cells-3-ref.html b/layout/reftests/table-background/hidden-cells-3-ref.html new file mode 100644 index 0000000000..b0aff8a71a --- /dev/null +++ b/layout/reftests/table-background/hidden-cells-3-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<table style="width: 200px; height: 200px; empty-cells: show; border-collapse: collapse"> + <colgroup style="background: red"> + <col style="background: red"> + </colgroup> + <tbody style="background: red"> + <tr style="background: red"> + <td style="background: green"> + </td> + <td style="background: white"> + </td> + </tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/hidden-cells-3.html b/layout/reftests/table-background/hidden-cells-3.html new file mode 100644 index 0000000000..a2d171194b --- /dev/null +++ b/layout/reftests/table-background/hidden-cells-3.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<table style="width: 200px; height: 200px; empty-cells: hide; border-collapse: collapse"> + <colgroup style="background: red"> + <col style="background: red"> + </colgroup> + <tbody style="background: red"> + <tr style="background: green; visibility: hidden"> + <td style="visibility: visible"> + </td> + <td> + </td> + </tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/rainbowh.gif b/layout/reftests/table-background/rainbowh.gif Binary files differnew file mode 100644 index 0000000000..b64f265f5b --- /dev/null +++ b/layout/reftests/table-background/rainbowh.gif diff --git a/layout/reftests/table-background/rainbowv.gif b/layout/reftests/table-background/rainbowv.gif Binary files differnew file mode 100644 index 0000000000..0afd41cba9 --- /dev/null +++ b/layout/reftests/table-background/rainbowv.gif diff --git a/layout/reftests/table-background/reftest.list b/layout/reftests/table-background/reftest.list new file mode 100644 index 0000000000..6ec25adb67 --- /dev/null +++ b/layout/reftests/table-background/reftest.list @@ -0,0 +1,69 @@ +# these could be moved to crashtests +!= backgr_border-table-cell.html empty.html +!= backgr_border-table-column-group.html empty.html +# This seems to be caused by bug 527825 +asserts-if(gtkWidget,0-12) != backgr_border-table-column.html empty.html +asserts-if(gtkWidget,0-6) != backgr_border-table-quirks.html empty.html +!= backgr_border-table-row-group.html empty.html +!= backgr_border-table-row.html empty.html +!= backgr_border-table.html empty.html +!= backgr_fixed-bg.html empty.html +!= backgr_index.html empty.html +!= backgr_layers-hide.html empty.html +!= backgr_layers-opacity.html empty.html +!= backgr_layers-show.html empty.html +!= backgr_position-table-cell.html empty.html +!= backgr_position-table-column-group.html empty.html +!= backgr_position-table-column.html empty.html +!= backgr_position-table-row-group.html empty.html +!= backgr_position-table-row.html empty.html +!= backgr_position-table.html empty.html +!= backgr_simple-table-cell.html empty.html +!= backgr_simple-table-column-group.html empty.html +!= backgr_simple-table-column.html empty.html +!= backgr_simple-table-row-group.html empty.html +!= backgr_simple-table-row.html empty.html +!= backgr_simple-table.html empty.html + +# would also be good to test table-header-group and table-footer-group +# (and rows and row groups in the presence of their reordering) +# Also need to test different values of background-origin and background-clip. +random-if(useDrawSnapshot) == border-separate-table-cell.html border-separate-table-cell-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-separate-table-column-group.html border-separate-table-column-group-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-separate-table-column.html border-separate-table-column-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-separate-table-row-group.html border-separate-table-row-group-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-separate-table-row.html border-separate-table-row-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-separate-table.html border-separate-table-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-collapse-table-cell.html border-collapse-table-cell-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-collapse-table-column-group.html border-collapse-table-column-group-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-collapse-table-column.html border-collapse-table-column-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-collapse-table-row-group.html border-collapse-table-row-group-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-collapse-table-row.html border-collapse-table-row-ref.html # Bug 1715400 +random-if(useDrawSnapshot) == border-collapse-table.html border-collapse-table-ref.html # Bug 1715400 +fuzzy(0-1,0-2200) random-if(useDrawSnapshot) == border-collapse-opacity-table-cell.html border-collapse-opacity-table-cell-ref.html +fuzzy(0-1,0-16863) random-if(useDrawSnapshot) == border-collapse-opacity-table-column-group.html border-collapse-opacity-table-column-group-ref.html +fuzzy(0-1,0-5625) random-if(useDrawSnapshot) == border-collapse-opacity-table-column.html border-collapse-opacity-table-column-ref.html +fuzzy(0-1,0-32718) random-if(useDrawSnapshot) == border-collapse-opacity-table-row-group.html border-collapse-opacity-table-row-group-ref.html +fuzzy(0-1,0-11000) random-if(useDrawSnapshot) == border-collapse-opacity-table-row.html border-collapse-opacity-table-row-ref.html +fuzzy(0-1,0-60000) == border-collapse-opacity-table.html border-collapse-opacity-table-ref.html +fuzzy(0-1,0-2500) random-if(useDrawSnapshot) == border-separate-opacity-table-cell.html border-separate-opacity-table-cell-ref.html +fuzzy(0-1,0-4078) random-if(useDrawSnapshot) == border-separate-opacity-table-column-group.html border-separate-opacity-table-column-group-ref.html +fuzzy(0-1,0-1329) random-if(useDrawSnapshot) == border-separate-opacity-table-column.html border-separate-opacity-table-column-ref.html +fuzzy(0-1,0-38000) random-if(useDrawSnapshot) == border-separate-opacity-table-row-group.html border-separate-opacity-table-row-group-ref.html +fuzzy(0-1,0-13000) random-if(useDrawSnapshot) == border-separate-opacity-table-row.html border-separate-opacity-table-row-ref.html +fuzzy(0-1,0-95000) random-if(useDrawSnapshot) == border-separate-opacity-table.html border-separate-opacity-table-ref.html +!= scrollable-rowgroup-collapse-background.html scrollable-rowgroup-collapse-notref.html +!= scrollable-rowgroup-collapse-border.html scrollable-rowgroup-collapse-notref.html +!= scrollable-rowgroup-separate-background.html scrollable-rowgroup-separate-notref.html +== scrollable-rowgroup-separate-border.html scrollable-rowgroup-separate-notref.html # scrolling rowgroups were removed in bug 28800 +== empty-cells-default-1.html empty-cells-default-1-ref.html +== empty-cells-default-2.html empty-cells-default-2-ref.html +fuzzy(0-84,0-5500) fuzzy-if(Android,0-2,0-5957) == table-row-opacity-dynamic-1.html table-row-opacity-dynamic-1-ref.html +== table-row-opacity-dynamic-2.html table-row-opacity-dynamic-2-ref.html + +== hidden-cells-1.html about:blank +== hidden-cells-2.html about:blank +== hidden-cells-3.html hidden-cells-3-ref.html + +== table-col-overlapping.html table-col-overlapping-ref.html +== table-col-span-1.html table-col-span-1-ref.html diff --git a/layout/reftests/table-background/repeatable-diagonal-gradient-with-ticks.png b/layout/reftests/table-background/repeatable-diagonal-gradient-with-ticks.png Binary files differnew file mode 100644 index 0000000000..1b019db984 --- /dev/null +++ b/layout/reftests/table-background/repeatable-diagonal-gradient-with-ticks.png diff --git a/layout/reftests/table-background/scrollable-rowgroup-collapse-background.html b/layout/reftests/table-background/scrollable-rowgroup-collapse-background.html new file mode 100644 index 0000000000..7800ae5951 --- /dev/null +++ b/layout/reftests/table-background/scrollable-rowgroup-collapse-background.html @@ -0,0 +1,6 @@ +<title>Testcase for assertion fix in bug 531461</title> +<table style="border-collapse:collapse"> + <tbody style="overflow:scroll; background:yellow"> + <tr><td>Cell</td></tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/scrollable-rowgroup-collapse-border.html b/layout/reftests/table-background/scrollable-rowgroup-collapse-border.html new file mode 100644 index 0000000000..67f4613663 --- /dev/null +++ b/layout/reftests/table-background/scrollable-rowgroup-collapse-border.html @@ -0,0 +1,6 @@ +<title>Testcase for assertion fix in bug 531461</title> +<table style="border-collapse:collapse"> + <tbody style="overflow:scroll; border: medium solid black"> + <tr><td>Cell</td></tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/scrollable-rowgroup-collapse-notref.html b/layout/reftests/table-background/scrollable-rowgroup-collapse-notref.html new file mode 100644 index 0000000000..1377cdc4aa --- /dev/null +++ b/layout/reftests/table-background/scrollable-rowgroup-collapse-notref.html @@ -0,0 +1,6 @@ +<title>Testcase for assertion fix in bug 531461</title> +<table style="border-collapse:collapse"> + <tbody style="overflow:scroll"> + <tr><td>Cell</td></tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/scrollable-rowgroup-separate-background.html b/layout/reftests/table-background/scrollable-rowgroup-separate-background.html new file mode 100644 index 0000000000..657f5c6e48 --- /dev/null +++ b/layout/reftests/table-background/scrollable-rowgroup-separate-background.html @@ -0,0 +1,6 @@ +<title>Testcase for assertion fix in bug 531461</title> +<table> + <tbody style="overflow:scroll; background:yellow"> + <tr><td>Cell</td></tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/scrollable-rowgroup-separate-border.html b/layout/reftests/table-background/scrollable-rowgroup-separate-border.html new file mode 100644 index 0000000000..a8e65aebbd --- /dev/null +++ b/layout/reftests/table-background/scrollable-rowgroup-separate-border.html @@ -0,0 +1,6 @@ +<title>Testcase for assertion fix in bug 531461</title> +<table> + <tbody style="overflow:scroll; border: medium solid black"> + <tr><td>Cell</td></tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/scrollable-rowgroup-separate-notref.html b/layout/reftests/table-background/scrollable-rowgroup-separate-notref.html new file mode 100644 index 0000000000..17dae8666c --- /dev/null +++ b/layout/reftests/table-background/scrollable-rowgroup-separate-notref.html @@ -0,0 +1,6 @@ +<title>Testcase for assertion fix in bug 531461</title> +<table> + <tbody style="overflow:scroll"> + <tr><td>Cell</td></tr> + </tbody> +</table> diff --git a/layout/reftests/table-background/table-col-overlapping-ref.html b/layout/reftests/table-background/table-col-overlapping-ref.html new file mode 100644 index 0000000000..635fbe6574 --- /dev/null +++ b/layout/reftests/table-background/table-col-overlapping-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<style> + td { + width: 20px; + height: 20px; + background-color: green; + } + table { + border-collapse:separate; + border-spacing: 0px; + } +</style> +</head> +<body> +<table> + <tr> + <td></td> + <td style="background-color: blue"></td> + <tr> + <td></td> + <td></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/table-background/table-col-overlapping.html b/layout/reftests/table-background/table-col-overlapping.html new file mode 100644 index 0000000000..219fd56b57 --- /dev/null +++ b/layout/reftests/table-background/table-col-overlapping.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<style> + td { + width: 20px; + height: 20px; + } + table { + border-collapse:separate; + border-spacing: 0px; + } +</style> +</head> +<body> +<table> + <col style="background: green"></col> + <col style="background: blue"></col> + <tr> + <td></td> + <td rowspan=2></td> + <tr> + <td colspan=2></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/table-background/table-col-span-1-ref.html b/layout/reftests/table-background/table-col-span-1-ref.html new file mode 100644 index 0000000000..12a7bc45f6 --- /dev/null +++ b/layout/reftests/table-background/table-col-span-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<body> + <table border> + <col style="background:purple"></col> + <col style="background:purple"></col> + <col style="background:blue"></col> + <tr> + <td>x</td> + <td>y</td> + <td>z</td> + </tr> + </table> +</body> +</html> diff --git a/layout/reftests/table-background/table-col-span-1.html b/layout/reftests/table-background/table-col-span-1.html new file mode 100644 index 0000000000..b7e98b3dec --- /dev/null +++ b/layout/reftests/table-background/table-col-span-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<body> + <table border> + <col span=2 style="background:purple"></col> + <col style="background:blue"></col> + <tr> + <td>x</td> + <td>y</td> + <td>z</td> + </tr> + </table> +</body> +</html> diff --git a/layout/reftests/table-background/table-row-opacity-dynamic-1-ref.html b/layout/reftests/table-background/table-row-opacity-dynamic-1-ref.html new file mode 100644 index 0000000000..e69c3005c1 --- /dev/null +++ b/layout/reftests/table-background/table-row-opacity-dynamic-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<title>Test for bug 1224253</title> +<style> + +body { background: white; color: black } + +table { + padding: 0; + border-spacing: 0; + border: none; + width: 15em; +} + +tr { + background: rgba(0, 0, 255, 0.8); +} + +td { + border: none; +} + +</style> + + +<table> + <tr style="opacity: 0.8"><td>cell</td></tr> +</table> diff --git a/layout/reftests/table-background/table-row-opacity-dynamic-1.html b/layout/reftests/table-background/table-row-opacity-dynamic-1.html new file mode 100644 index 0000000000..9cb5eac124 --- /dev/null +++ b/layout/reftests/table-background/table-row-opacity-dynamic-1.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Test for bug 1224253</title> +<style> + +body { background: white; color: black } + +table { + padding: 0; + border-spacing: 0; + border: none; + width: 15em; +} + +tr { + background: rgba(0, 0, 255, 0.8); +} + +td { + border: none; +} + +</style> + + +<table> + <tr><td>cell</td></tr> +</table> + +<script> + +var tr = document.getElementsByTagName("tr")[0]; + +document.addEventListener("MozReftestInvalidate", step1); + +function step1(event) { + requestAnimationFrame(step2); +} + +function step2(now) { + tr.style.opacity = "0.8"; + setTimeout(step3, 0); +} + +function step3() { + tr.style.opacity = "0.8"; + setTimeout(step4, 0); +} + +function step4() { + tr.style.opacity = "0.8"; + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/table-background/table-row-opacity-dynamic-2-ref.html b/layout/reftests/table-background/table-row-opacity-dynamic-2-ref.html new file mode 100644 index 0000000000..a2faff6fde --- /dev/null +++ b/layout/reftests/table-background/table-row-opacity-dynamic-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<title>Test for bug 1224253</title> +<style> + +body { background: white; color: black } + +table { + padding: 0; + border-spacing: 0; + border: none; + width: 15em; +} + +tr { + background: rgba(0, 0, 255, 0.8); +} + +td { + border: none; +} + +</style> + + +<table> + <tr><td>cell</td></tr> +</table> diff --git a/layout/reftests/table-background/table-row-opacity-dynamic-2.html b/layout/reftests/table-background/table-row-opacity-dynamic-2.html new file mode 100644 index 0000000000..cf9a5fd485 --- /dev/null +++ b/layout/reftests/table-background/table-row-opacity-dynamic-2.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Test for bug 1224251</title> +<style> + +body { background: white; color: black } + +table { + padding: 0; + border-spacing: 0; + border: none; + width: 15em; +} + +tr { + background: rgba(0, 0, 255, 0.8); +} + +td { + border: none; +} + +</style> + + +<table> + <tr style="opacity: 0.8"><td>cell</td></tr> +</table> + +<script> + +var tr = document.getElementsByTagName("tr")[0]; + +// Not sure why, but to make this test fail without the patch, this has to +// be a setTimeout(0) rather than waiting for MozReftestInvalidate. +setTimeout(step1, 0); + +function step1() { + tr.style.opacity = "0.8"; + setTimeout(step2, 0); +} + +function step2() { + tr.style.opacity = "0.8"; + setTimeout(step3, 0); +} + +function step3() { + tr.style.opacity = ""; + + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/table-background/valid-html401.png b/layout/reftests/table-background/valid-html401.png Binary files differnew file mode 100644 index 0000000000..3855210c6c --- /dev/null +++ b/layout/reftests/table-background/valid-html401.png |
