diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/position-relative | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | uxp-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/position-relative')
20 files changed, 2146 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/reftest-stylo.list b/layout/reftests/position-relative/reftest-stylo.list new file mode 100644 index 0000000000..e0824d6ac3 --- /dev/null +++ b/layout/reftests/position-relative/reftest-stylo.list @@ -0,0 +1,10 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== table-collapse-1.html table-collapse-1.html +== table-collapse-2.html table-collapse-2.html +== table-collapse-3.html table-collapse-3.html +== table-collapse-4.html table-collapse-4.html +== table-separate-1.html table-separate-1.html +== table-separate-2.html table-separate-2.html +== table-separate-3.html table-separate-3.html +== table-separate-4.html table-separate-4.html +== 1115999-1.html 1115999-1.html diff --git a/layout/reftests/position-relative/reftest.list b/layout/reftests/position-relative/reftest.list new file mode 100644 index 0000000000..880a38e8d5 --- /dev/null +++ b/layout/reftests/position-relative/reftest.list @@ -0,0 +1,9 @@ +== 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 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..b64b332147 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-4-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: 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..fc7b48de26 --- /dev/null +++ b/layout/reftests/position-relative/table-collapse-4.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<head> + <style> + 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..b5cfd2783f --- /dev/null +++ b/layout/reftests/position-relative/table-separate-4-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: 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..9634117b74 --- /dev/null +++ b/layout/reftests/position-relative/table-separate-4.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<head> + <style> + 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> |