import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
<pre>
................................................................................................................................................................................................
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
</pre>
</body>
</html>

View file

@ -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">&lt;tfoot&gt;</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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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 &lt;fantasai&#64;escape.com&gt;
</address>
</body>
</html>

View file

@ -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: 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 o"></div>
<div class="imagetl o"></div>
<div class="imagebr"></div>
</body>
</html>

View file

@ -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>

View file

@ -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: 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 o"></div>
<div class="imagetl o"></div>
<div class="imagebr"></div>
</body>
</html>

View file

@ -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>

View file

@ -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: 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 o"></div>
<div class="imagetl o"></div>
<div class="imagebr"></div>
</body>
</html>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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: 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 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>

View file

@ -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>

View file

@ -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: 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 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<table>
<tr>
<td style="border: 10px solid blue; background: yellow; height: 50px; width: 50px"></td>
</tr>
</table>

View file

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,100 @@
# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
# these could be moved to crashtests
== backgr_border-table-cell.html backgr_border-table-cell.html
== backgr_border-table-column-group.html backgr_border-table-column-group.html
# This seems to be caused by bug 527825
asserts-if(gtkWidget,0-12) == backgr_border-table-column.html backgr_border-table-column.html
asserts-if(gtkWidget,0-6) == backgr_border-table-quirks.html backgr_border-table-quirks.html
== backgr_border-table-row-group.html backgr_border-table-row-group.html
== backgr_border-table-row.html backgr_border-table-row.html
== backgr_border-table.html backgr_border-table.html
== backgr_fixed-bg.html backgr_fixed-bg.html
skip == backgr_index.html backgr_index.html
== backgr_layers-hide.html backgr_layers-hide.html
== backgr_layers-opacity.html backgr_layers-opacity.html
random == backgr_layers-show.html backgr_layers-show.html
== backgr_position-table-cell.html backgr_position-table-cell.html
== backgr_position-table-column-group.html backgr_position-table-column-group.html
== backgr_position-table-column.html backgr_position-table-column.html
== backgr_position-table-row-group.html backgr_position-table-row-group.html
== backgr_position-table-row.html backgr_position-table-row.html
== backgr_position-table.html backgr_position-table.html
== backgr_simple-table-cell.html backgr_simple-table-cell.html
== backgr_simple-table-column-group.html backgr_simple-table-column-group.html
== backgr_simple-table-column.html backgr_simple-table-column.html
== backgr_simple-table-row-group.html backgr_simple-table-row-group.html
== backgr_simple-table-row.html backgr_simple-table-row.html
== backgr_simple-table.html backgr_simple-table.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.
skip-if(B2G||Mulet) == border-separate-table-cell.html border-separate-table-cell.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-separate-table-column-group.html border-separate-table-column-group.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-separate-table-column.html border-separate-table-column.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-separate-table-row-group.html border-separate-table-row-group.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
== border-separate-table-row.html border-separate-table-row.html
skip-if(B2G||Mulet) == border-separate-table.html border-separate-table.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-collapse-table-cell.html border-collapse-table-cell.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-collapse-table-column-group.html border-collapse-table-column-group.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-collapse-table-column.html border-collapse-table-column.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) == border-collapse-table-row-group.html border-collapse-table-row-group.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
== border-collapse-table-row.html border-collapse-table-row.html
== border-collapse-table.html border-collapse-table.html
skip-if(B2G||Mulet) fuzzy-if(d2d,1,1083) fuzzy-if(skiaContent,1,2200) == border-collapse-opacity-table-cell.html border-collapse-opacity-table-cell.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
== border-collapse-opacity-table-column-group.html border-collapse-opacity-table-column-group.html
# bug 424274
== border-collapse-opacity-table-column.html border-collapse-opacity-table-column.html
# bug 424274
fails skip-if(B2G||Mulet) fuzzy-if(d2d,1,16359) fuzzy-if(skiaContent,1,17000) == border-collapse-opacity-table-row-group.html border-collapse-opacity-table-row-group.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
fails skip-if(B2G||Mulet) fuzzy-if(d2d,1,5453) fuzzy-if(skiaContent,1,5500) == border-collapse-opacity-table-row.html border-collapse-opacity-table-row.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
fails skip-if(B2G||Mulet) fuzzy-if(d2d,1,29973) fuzzy-if(skiaContent,1,60000) == border-collapse-opacity-table.html border-collapse-opacity-table.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
skip-if(B2G||Mulet) fuzzy-if(d2d,1,2478) fuzzy-if(skiaContent,1,2500) == border-separate-opacity-table-cell.html border-separate-opacity-table-cell.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
== border-separate-opacity-table-column-group.html border-separate-opacity-table-column-group.html
# bug 424274
== border-separate-opacity-table-column.html border-separate-opacity-table-column.html
# bug 424274
fails fuzzy-if(d2d,1,37170) fuzzy-if(skiaContent,1,38000) == border-separate-opacity-table-row-group.html border-separate-opacity-table-row-group.html
fails skip-if(B2G||Mulet) fuzzy-if(d2d,1,12390) fuzzy-if(skiaContent,1,13000) == border-separate-opacity-table-row.html border-separate-opacity-table-row.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
fails skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,95000) == border-separate-opacity-table.html border-separate-opacity-table.html
# bug 773482
# Initial mulet triage: parity with B2G/B2G Desktop
== scrollable-rowgroup-collapse-background.html scrollable-rowgroup-collapse-background.html
== scrollable-rowgroup-collapse-border.html scrollable-rowgroup-collapse-border.html
== scrollable-rowgroup-separate-background.html scrollable-rowgroup-separate-background.html
== scrollable-rowgroup-separate-border.html scrollable-rowgroup-separate-border.html
# scrolling rowgroups were removed in bug 28800
== empty-cells-default-1.html empty-cells-default-1.html
== empty-cells-default-2.html empty-cells-default-2.html
fuzzy-if(OSX,1,113) fuzzy-if(winWidget,1,12) fuzzy-if(Android,1,39) fuzzy-if(winWidget&&!layersGPUAccelerated,82,116) fuzzy-if(skiaContent,77,5400) == table-row-opacity-dynamic-1.html table-row-opacity-dynamic-1.html
random == table-row-opacity-dynamic-2.html table-row-opacity-dynamic-2.html

View file

@ -0,0 +1,62 @@
# 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.
== border-separate-table-cell.html border-separate-table-cell-ref.html
== border-separate-table-column-group.html border-separate-table-column-group-ref.html
== border-separate-table-column.html border-separate-table-column-ref.html
== border-separate-table-row-group.html border-separate-table-row-group-ref.html
== border-separate-table-row.html border-separate-table-row-ref.html
== border-separate-table.html border-separate-table-ref.html
== border-collapse-table-cell.html border-collapse-table-cell-ref.html
== border-collapse-table-column-group.html border-collapse-table-column-group-ref.html
== border-collapse-table-column.html border-collapse-table-column-ref.html
== border-collapse-table-row-group.html border-collapse-table-row-group-ref.html
== border-collapse-table-row.html border-collapse-table-row-ref.html
== border-collapse-table.html border-collapse-table-ref.html
fuzzy-if(d2d,1,1083) fuzzy-if(skiaContent,1,2200) == border-collapse-opacity-table-cell.html border-collapse-opacity-table-cell-ref.html
fails == border-collapse-opacity-table-column-group.html border-collapse-opacity-table-column-group-ref.html # bug 424274
fails == border-collapse-opacity-table-column.html border-collapse-opacity-table-column-ref.html # bug 424274
fuzzy-if(d2d,1,16359) fuzzy-if(skiaContent,1,17000) == border-collapse-opacity-table-row-group.html border-collapse-opacity-table-row-group-ref.html
fuzzy-if(d2d,1,5453) fuzzy-if(skiaContent,1,11000) == border-collapse-opacity-table-row.html border-collapse-opacity-table-row-ref.html
fuzzy-if(d2d||skiaContent,1,60000) == border-collapse-opacity-table.html border-collapse-opacity-table-ref.html
fuzzy-if(d2d,1,2478) fuzzy-if(skiaContent,1,2500) == border-separate-opacity-table-cell.html border-separate-opacity-table-cell-ref.html
fails == border-separate-opacity-table-column-group.html border-separate-opacity-table-column-group-ref.html # bug 424274
fails == border-separate-opacity-table-column.html border-separate-opacity-table-column-ref.html # bug 424274
fuzzy-if(d2d,1,37170) fuzzy-if(skiaContent,1,38000) == border-separate-opacity-table-row-group.html border-separate-opacity-table-row-group-ref.html
fuzzy-if(d2d,1,12390) fuzzy-if(skiaContent,1,13000) == border-separate-opacity-table-row.html border-separate-opacity-table-row-ref.html
fuzzy-if(d2d||skiaContent,1,95000) == 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-if(OSX,1,113) fuzzy-if(winWidget,1,12) fuzzy-if(Android,1,39) fuzzy-if(winWidget&&!layersGPUAccelerated,82,116) fuzzy-if(skiaContent,84,5500) == 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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, false);
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>

View file

@ -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>

View file

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB