diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-tables')
8 files changed, 273 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-001-ref.html b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-001-ref.html new file mode 100644 index 0000000000..a3705965fe --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="David Shin" href="dshin@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1879731"> +<style> +table { + border-collapse: collapse; +} + +.group { + border-left: 1px solid black; + border-right: 3px solid black; +} +</style> +<table> + <tbody id="table"> + <tr><td class="group">X</td></tr> + <tr><td>X</td></tr> + <tr><td>X</td></tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-001.html b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-001.html new file mode 100644 index 0000000000..67330e4d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="author" title="David Shin" href="dshin@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1879731"> +<link rel="match" href="collapsed-border-partial-invalidation-001-ref.html"> +<meta name="assert" content="Invalidating part of a border-collapsed table keeps border styling correctly."> +<style> +table { + border-collapse: collapse; +} + +.group { + border-left: 1px solid black; + border-right: 3px solid black; +} +</style> +<table> + <tbody id="table"> + <tr><td class="group">X</td></tr> + <tr><td>X</td></tr> + </tbody> +</table> + +<script> +onload = function () { + // Make sure the table layout is flushed + table.getBoundingClientRect(); + const tr = document.createElement('tr'); + const td = document.createElement('td'); + td.innerText = "X"; + tr.appendChild(td); + table.appendChild(tr); + document.documentElement.className = ""; +} +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-002-ref.html b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-002-ref.html new file mode 100644 index 0000000000..d89389a6dc --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-002-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="David Shin" href="dshin@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1879731"> +<style> +table { + border-collapse: collapse; +} + +.group { + border-top: 1px solid black; + border-bottom: 3px solid black; +} +</style> +<table> + <tr id="row"><td class="group">X</td><td>X</td><td>X</td><td class="group">X</td></tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-002.html b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-002.html new file mode 100644 index 0000000000..e48271995c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="author" title="David Shin" href="dshin@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1879731"> +<link rel="match" href="collapsed-border-partial-invalidation-002-ref.html"> +<meta name="assert" content="Invalidating part of a border-collapsed table keeps border styling correctly."> +<style> +table { + border-collapse: collapse; +} + +.group { + border-top: 1px solid black; + border-bottom: 3px solid black; +} +</style> +<table id="table"> + <tr id="row"><td class="group">X</td><td>X</td><td id="last" class="group">X</td></tr> +</table> +<script> +onload = function () { + // Make sure the table layout is flushed + table.getBoundingClientRect(); + let td = document.createElement('td'); + td.innerText = "X"; + // Requring #last is an unfortunate side effect of bug 1880560. + last.before(td); + document.documentElement.className = ""; +} +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-001.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-001.html new file mode 100644 index 0000000000..b57d4a2bad --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1880550"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#height-distribution"> +<link rel="match" href="table-cell-overflow-explicit-height-ref.html"> +<style> +td { + height: 20px; + border: 2px solid cyan; + overflow: hidden; +} +.tall { + height: 300px; + background: blue; + border: 2px solid black; +} +</style> +<table border> + <td> + <div class="tall"></div> + Can you see this text? + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-002.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-002.html new file mode 100644 index 0000000000..de65f625d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1880550"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#height-distribution"> +<link rel="match" href="table-cell-overflow-explicit-height-ref.html"> +<style> +td { + height: 20px; + max-height: 20px; + border: 2px solid cyan; + overflow: hidden; +} +.tall { + height: 300px; + background: blue; + border: 2px solid black; +} +</style> +<table border> + <td> + <div class="tall"></div> + Can you see this text? + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-ref.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-ref.html new file mode 100644 index 0000000000..cb64b1f6ce --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-explicit-height-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> +td { + border: 2px solid cyan; +} +.tall { + height: 300px; + background: blue; + border: 2px solid black; +} +</style> +<table border> + <td> + <div class="tall"></div> + Can you see this text? + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html b/testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html new file mode 100644 index 0000000000..67f8009de3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content=" + When a table cell has a percentage in the inline axis of the table, + it should resolve against zero when computing the column sizes, + but once we know the final size of the table, it should re-resolve + against that size minus the leading and trailing border spacing. + This matches what Blink and Gecko do (WebKit is different). + + Note that Blink and Gecko disagree in case there is a caption: + Blink still behaves as per above, while Gecko re-resolves against + the sum of column sizes plus the interleaved border spacings. + Due to the lack of interoperability, this test doesn't use captions. +"> + +<style> +table { + border-spacing: 10px 0; +} +td { + padding: 0; +} +td > div { + width: 100px; + height: 25px; + background: red; +} +td > div.green { + position: relative; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- +There is one column, it's 100px wide. The percentage resolves against +that amount, so the padding becomes 100px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -110px margin. +--> +<table style="margin-left: -110px"> + <td style="padding-left: 100%"> + <div class="green"></div> + </td> +</table> + +<!-- +The 1st column is 110px wide, the 2nd column is 100px wide. +And they are separated by 10px, so that's a total of 220px. +The percentage resolves against that amount, so the padding +becomes 0.5 * 220px + 10px = 120px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -130px margin. +--> +<table style="margin-left: -130px"> + <td style="padding-left: calc(50% + 10px)"> + <div class="green"></div> + </td> + <td> + <div></div> + </td> +</table> + +<!-- +There are 3 columns, each one is 100px wide. They are separated by 10px, +so that's a total of 100px * 3 + 10px * 2 = 320px. +The percentage resolves against that amount, so the padding becomes +320px - 100px = 220px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -230px margin. +--> +<table style="margin-left: -230px"> + <td style="padding-left: calc(100% - 100px)"> + <div class="green"></div> + </td> + <td> + <div></div> + </td> + <td> + <div></div> + </td> +</table> + +<!-- +There are 4 columns, the 1st one is 330px wide, each one of the others +is 100px wide. They are separated by 10px, so that's a total of +330px + 100px * 3 + 10px * 3 = 660px. +The percentage resolves against that amount, so the padding becomes +0.5 * 660px + 230px = 560px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -570px margin. +--> +<table style="margin-left: -570px"> + <td style="padding-left: calc(50% + 230px)"> + <div class="green"></div> + </td> + <td> + <div></div> + </td> + <td> + <div></div> + </td> + <td> + <div></div> + </td> +</table> |