diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
| commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
| tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/position-relative | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/position-relative')
23 files changed, 2198 insertions, 0 deletions
diff --git a/layout/reftests/position-relative/1115999-1-ref.html b/layout/reftests/position-relative/1115999-1-ref.html new file mode 100644 index 0000000000..005a15bb89 --- /dev/null +++ b/layout/reftests/position-relative/1115999-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1115999</title> +<style> +html { overflow: hidden } +html, body { margin: 0; border: 0; } +table, tr, td { border: none; margin: 0; padding: 0; border-spacing: 0 } +</style> + +<table> + <tr> + <td>one</td> + <td>two</td> + <td></td> + </tr> +</table> diff --git a/layout/reftests/position-relative/1115999-1.html b/layout/reftests/position-relative/1115999-1.html new file mode 100644 index 0000000000..99ff98c5fa --- /dev/null +++ b/layout/reftests/position-relative/1115999-1.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1115999</title> +<style> +html { overflow: hidden } +html, body { margin: 0; border: 0; } +table, tr, td { border: none; margin: 0; padding: 0; border-spacing: 0 } +</style> + +<table> + <tr> + <td>o</td> + <td style="position: relative">two</td> + </tr> +</table> +<script> + +document.body.offsetHeight; + +var row = document.getElementsByTagName("tr")[0]; +var cell = row.firstElementChild; +cell.textContent = "one"; + +document.body.offsetHeight; + +// Force a call to nsTableFrame::SetGeometryDirty. +row.appendChild(document.createElement("td")); + +</script> diff --git a/layout/reftests/position-relative/1409114-1-ref.html b/layout/reftests/position-relative/1409114-1-ref.html new file mode 100644 index 0000000000..9271ec8b6d --- /dev/null +++ b/layout/reftests/position-relative/1409114-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> +<table> + <col style="background:green"> + <tr> + <td style="width:20px; height:20px"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/position-relative/1409114-1.html b/layout/reftests/position-relative/1409114-1.html new file mode 100644 index 0000000000..988ecab1ef --- /dev/null +++ b/layout/reftests/position-relative/1409114-1.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> +<table> + <col style="background:green"> + <tr> + <td style="position:relative; left:-100px; width:20px; height:20px"></td> + </tr> +</table> +</body> +</html> diff --git a/layout/reftests/position-relative/1409114-2.html b/layout/reftests/position-relative/1409114-2.html new file mode 100644 index 0000000000..06d644d5e4 --- /dev/null +++ b/layout/reftests/position-relative/1409114-2.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<body style="overflow:hidden"> +<table style="position:relative; top:-50px"> + <col style="background:green; width: 40px;"> + <tr style="position:relative; left:-100px; height: 40px"> + <td rowspan=2></td> + </tr> + <tr style="height: 40px"></tr> +</table> +</body> +</html> diff --git a/layout/reftests/position-relative/1409114-3.html b/layout/reftests/position-relative/1409114-3.html new file mode 100644 index 0000000000..cfd01561d6 --- /dev/null +++ b/layout/reftests/position-relative/1409114-3.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<body style="overflow:hidden"> +<table style="position:relative; top:-50px"> + <tbody style="background:green"> + <tr style="position:relative; left:-100px; height: 40px"> + <td rowspan=2 style="width: 40px;"></td> + </tr> + <tr style="height: 40px"></tr> + </tbody> +</table> +</body> +</html> diff --git a/layout/reftests/position-relative/reftest.list b/layout/reftests/position-relative/reftest.list new file mode 100644 index 0000000000..495588ab79 --- /dev/null +++ b/layout/reftests/position-relative/reftest.list @@ -0,0 +1,12 @@ +== table-collapse-1.html table-collapse-1-ref.html +== table-collapse-2.html table-collapse-2-ref.html +== table-collapse-3.html table-collapse-3-ref.html +== table-collapse-4.html table-collapse-4-ref.html +== table-separate-1.html table-separate-1-ref.html +== table-separate-2.html table-separate-2-ref.html +== table-separate-3.html table-separate-3-ref.html +== table-separate-4.html table-separate-4-ref.html +== 1115999-1.html 1115999-1-ref.html +== 1409114-1.html 1409114-1-ref.html +!= 1409114-2.html about:blank +!= 1409114-3.html about:blank diff --git a/layout/reftests/position-relative/table-collapse-1-ref.html b/layout/reftests/position-relative/table-collapse-1-ref.html new file mode 100644 index 0000000000..e2f9edd472 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-1-ref.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + border-collapse: collapse; + position: absolute; + } + #first-table { + left: 0px; + } + #second-table { + left: 100px; + } + #third-table { + left: 200px; + } + #fourth-table { + left: 300px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + #first-table td { + border-color: gold; + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey show-text"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white show-text"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-1.html b/layout/reftests/position-relative/table-collapse-1.html new file mode 100644 index 0000000000..80ee9fe220 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-1.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: collapse; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + left: 100px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-2-ref.html b/layout/reftests/position-relative/table-collapse-2-ref.html new file mode 100644 index 0000000000..f99d2ef74f --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-2-ref.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + border-collapse: collapse; + position: absolute; + } + #first-table { + left: 300px; + } + #second-table { + left: 200px; + } + #third-table { + left: 100px; + } + #fourth-table { + left: 0px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + #first-table td { + border-color: gold; + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey show-text"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white show-text"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-2.html b/layout/reftests/position-relative/table-collapse-2.html new file mode 100644 index 0000000000..c1c96d8301 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-2.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: collapse; + position: absolute; + left: 300px; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + right: 100px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-3-ref.html b/layout/reftests/position-relative/table-collapse-3-ref.html new file mode 100644 index 0000000000..e2c6d43b46 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-3-ref.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + border-collapse: collapse; + position: absolute; + } + #first-table { + top: 0px; + } + #second-table { + top: 175px; + } + #third-table { + top: 350px; + } + #fourth-table { + top: 525px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + #first-table td { + border-color: gold; + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey show-text"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white show-text"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-3.html b/layout/reftests/position-relative/table-collapse-3.html new file mode 100644 index 0000000000..00d8539b02 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-3.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: collapse; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + top: 175px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-4-ref.html b/layout/reftests/position-relative/table-collapse-4-ref.html new file mode 100644 index 0000000000..cca38899cf --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-4-ref.html @@ -0,0 +1,183 @@ +<!DOCTYPE html> +<head> + <style> + html { + line-height: 1.25; + } + body { + background-color: white; + margin: 0; + } + table { + border-collapse: collapse; + position: absolute; + } + #first-table { + top: 525px; + } + #second-table { + top: 350px; + } + #third-table { + top: 175px; + } + #fourth-table { + top: 0px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + #first-table td { + border-color: gold; + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey show-text"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white show-text"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-collapse-4.html b/layout/reftests/position-relative/table-collapse-4.html new file mode 100644 index 0000000000..2b227caae3 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-4.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<head> + <style> + html { + line-height: 1.25; + } + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: collapse; + position: absolute; + top: 525px; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + bottom: 175px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-1-ref.html b/layout/reftests/position-relative/table-separate-1-ref.html new file mode 100644 index 0000000000..b46232714d --- /dev/null +++ b/layout/reftests/position-relative/table-separate-1-ref.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + border-collapse: separate; + position: absolute; + } + #first-table { + background-color: red; + left: 0px; + } + #second-table { + left: 100px; + } + #third-table { + left: 200px; + } + #fourth-table { + left: 300px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + border-color: gold; + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-border show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-1.html b/layout/reftests/position-relative/table-separate-1.html new file mode 100644 index 0000000000..d97fa15d8a --- /dev/null +++ b/layout/reftests/position-relative/table-separate-1.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: separate; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + left: 100px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-2-ref.html b/layout/reftests/position-relative/table-separate-2-ref.html new file mode 100644 index 0000000000..90d7c6884b --- /dev/null +++ b/layout/reftests/position-relative/table-separate-2-ref.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + border-collapse: separate; + position: absolute; + } + #first-table { + background-color: red; + left: 300px; + } + #second-table { + left: 200px; + } + #third-table { + left: 100px; + } + #fourth-table { + left: 0px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + border-color: gold; + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-border show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-2.html b/layout/reftests/position-relative/table-separate-2.html new file mode 100644 index 0000000000..583771328c --- /dev/null +++ b/layout/reftests/position-relative/table-separate-2.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: separate; + position: absolute; + left: 300px; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + right: 100px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-3-ref.html b/layout/reftests/position-relative/table-separate-3-ref.html new file mode 100644 index 0000000000..5276531517 --- /dev/null +++ b/layout/reftests/position-relative/table-separate-3-ref.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + border-collapse: separate; + position: absolute; + } + #first-table { + background-color: red; + top: 0px; + } + #second-table { + top: 215px; + } + #third-table { + top: 430px; + } + #fourth-table { + top: 645px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + border-color: gold; + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-border show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-3.html b/layout/reftests/position-relative/table-separate-3.html new file mode 100644 index 0000000000..a739fb7712 --- /dev/null +++ b/layout/reftests/position-relative/table-separate-3.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<head> + <style> + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: separate; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + top: 215px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-4-ref.html b/layout/reftests/position-relative/table-separate-4-ref.html new file mode 100644 index 0000000000..bfb5007c82 --- /dev/null +++ b/layout/reftests/position-relative/table-separate-4-ref.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<head> + <style> + html { + line-height: 1.25; + } + body { + background-color: white; + margin: 0; + } + table { + border-collapse: separate; + position: absolute; + } + #first-table { + background-color: red; + top: 645px; + } + #second-table { + top: 430px; + } + #third-table { + top: 215px; + } + #fourth-table { + top: 0px; + } + td { + border-style: solid; + border-width: 5px; + border-color: transparent; + color: rgba(0,0,0,0); + } + .bg-blue { + background-color: blue; + } + .bg-cyan { + background-color: cyan; + } + .bg-grey { + background-color: grey; + } + .bg-green { + background-color: green; + } + .bg-khaki { + background-color: khaki; + } + .bg-purple { + background-color: purple; + } + .bg-white { + background-color: white; + } + .show-text { + border-color: gold; + color: rgba(0,0,0,1); + } + </style> +</head> +<body> + <table id="first-table"> + <thead> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-khaki">XXX</td> + <td class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + <td rowspan=2 class="bg-purple">YYY</td> + </tr> + <tr> + <td class="bg-khaki">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-khaki">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-border show-text">YYY</td> + </tr> + </tfoot> + </table> + <table id="second-table"> + <thead> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-green">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-green">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td rowspan=2 class="bg-green">YYY</td> + </tr> + <tr> + <td class="bg-grey"> </td> + </tr> + <tr> + <td colspan=2 class="bg-green">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white"> </td> + </tr> + </tfoot> + </table> + <table id="third-table"> + <thead> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-blue show-text">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-cyan show-text">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td rowspan=2 class="bg-blue show-text">YYY</td> + </tr> + <tr> + <td class="bg-green">XXX</td> + </tr> + <tr> + <td colspan=2 class="bg-cyan show-text">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> + <table id="fourth-table"> + <thead> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </thead> + <tbody> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white" rowspan=2>YYY</td> + </tr> + <tr> + <td class="bg-cyan show-text">XXX</td> + </tr> + <tr> + <td class="bg-white" colspan=2>XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="bg-white">XXX</td> + <td class="bg-white">YYY</td> + </tr> + </tfoot> + </table> +</body> diff --git a/layout/reftests/position-relative/table-separate-4.html b/layout/reftests/position-relative/table-separate-4.html new file mode 100644 index 0000000000..8febf8f237 --- /dev/null +++ b/layout/reftests/position-relative/table-separate-4.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<head> + <style> + html { + line-height: 1.25; + } + body { + background-color: white; + margin: 0; + } + table { + background-color: red; + border-collapse: separate; + position: absolute; + top: 645px; + } + thead { + background-color: pink; + } + tbody { + background-color: grey; + } + tfoot { + background-color: orange; + } + tr { + background-color: green; + } + td:first-child { + background-color: cyan; + } + td { + background-color: blue; + border-style: solid; + border-width: 5px; + border-color: gold; + } + colgroup { + background-color: purple; + } + col:first-child { + background-color: khaki; + } + .rel { + position: relative; + bottom: 215px; + } + </style> +</head> +<body> + <table> + <colgroup> + <col> + <col> + </colgroup> + <thead class="rel"> + <tr> + <td class="rel">XXX</td> + <td class="rel">YYY</td> + </tr> + </thead> + <tbody class="rel"> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + <tr> + <td>XXX</td> + <td rowspan=2 class="rel">YYY</td> + </tr> + <tr class="rel"> + <td class="rel">XXX</td> + </tr> + <tr> + <td colspan=2 class="rel">XXX</td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="rel">XXX</td> + <td>YYY</td> + </tr> + </tfoot> + </table> +</body> |