diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-tables')
323 files changed, 17708 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/META.yml b/testing/web-platform/tests/css/css-tables/META.yml new file mode 100644 index 0000000000..b5372064ac --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/META.yml @@ -0,0 +1,6 @@ +spec: https://drafts.csswg.org/css-tables/ +suggested_reviewers: + - dbaron + - FremyCompany + - gregwhitworth + - rachelandrew diff --git a/testing/web-platform/tests/css/css-tables/absolute-crash.html b/testing/web-platform/tests/css/css-tables/absolute-crash.html new file mode 100644 index 0000000000..d455825607 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/958381"> +<table style="position: relative; max-height: 10px;"> + <caption>caption</caption> + <td><div id=target style="position: absolute;"></div></td> +</table> +<script> + document.body.offsetTop; + document.getElementById('target').style.top = '10px'; +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-001.html b/testing/web-platform/tests/css/css-tables/absolute-tables-001.html new file mode 100644 index 0000000000..55a8f00d58 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-001.html @@ -0,0 +1,89 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="Anders Ruud" href="mailto:andruud@chromium.org"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-width-property" title="See Note in <percentage>"> +<meta name="assert" content="percent lengths of an abspos table are resolved against the padding box of the parent" /> +<style> + main div { + position: relative; + border: 5px solid black; + height: 60px; + width: 60px; + padding: 5px 7px 11px 13px; + margin: 10px; + } + + .tbl { + display: table; + background-color: skyblue; + position: absolute; + width: 50%; + height: 50%; + } + + .cell { + display: table-cell; + outline: 1px dashed blue; + } + + .topleft { left: 0; top: 0; } + .topright { right: 0; top: 0; } + .bottomright { right: 0; bottom: 0; } + .bottomleft { left: 0; bottom: 0; } + + .vertical { writing-mode: vertical-lr; } + +</style> +<p>Tests that percent lengths of an absolutely positioned table is resolved +against the <em>padding box</em> of the parent. +<hr> +<output id="log"></output> +<main> +<div> + <span class="tbl topleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div> + <span class="tbl topright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div> + <span class="tbl bottomright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div> + <span class="tbl bottomleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> + +<div class="vertical"> + <span class="tbl topleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div class="vertical"> + <span class="tbl topright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div class="vertical"> + <span class="tbl bottomright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div class="vertical"> + <span class="tbl bottomleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +</main> +<script> + checkLayout(".tbl"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-002.html b/testing/web-platform/tests/css/css-tables/absolute-tables-002.html new file mode 100644 index 0000000000..74d956ba9e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-002.html @@ -0,0 +1,78 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#used-width-of-table"> +<meta name="assert" content="When sizing and positioning abspos tables, the intrinsic width is obeyed when the intrinsic width is larger than specified width" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + width: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + width: 100px; +} + +.cell > div { + width: 200px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-003.html b/testing/web-platform/tests/css/css-tables/absolute-tables-003.html new file mode 100644 index 0000000000..a6708192b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-003.html @@ -0,0 +1,78 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#used-width-of-table"> +<meta name="assert" content="When sizing and positioning abspos tables, the specified width is obeyed when the intrinsic width is smaller" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + width: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + width: 100px; +} + +.cell > div { + width: 20px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=50 data-offset-x="150"> + <tr> + <td class="cell" data-expected-width=46> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=50 data-offset-x="150"> + <tr> + <td class="cell" data-expected-width=46> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=108 data-offset-x="92"> + <tr> + <td class="cell" data-expected-width=104> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=108 data-offset-x="92"> + <tr> + <td class="cell" data-expected-width=104> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-004.html b/testing/web-platform/tests/css/css-tables/absolute-tables-004.html new file mode 100644 index 0000000000..a998d57726 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-004.html @@ -0,0 +1,78 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#computing-the-table-height"> +<meta name="assert" content="When sizing and positioning abspos tables, the intrinsic height is obeyed when the intrinsic height is larger than specified height" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + height: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + height: 100px; +} + +.cell > div { + height: 200px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-005.html b/testing/web-platform/tests/css/css-tables/absolute-tables-005.html new file mode 100644 index 0000000000..4935e25349 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-005.html @@ -0,0 +1,78 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#computing-the-table-height"> +<meta name="assert" content="When sizing and positioning abspos tables, the specified height is obeyed when the intrinsic height is smaller" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + height: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + height: 100px; +} + +.cell > div { + height: 20px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=8 data-expected-height=108 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=8 data-expected-height=108 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=8 data-expected-height=50 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=8 data-expected-height=50 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-006.html b/testing/web-platform/tests/css/css-tables/absolute-tables-006.html new file mode 100644 index 0000000000..d5d2265c49 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-006.html @@ -0,0 +1,35 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="bookmark" href="https://crbug.com/977507" /> +<meta name="assert" content="Abspos table works when it is dynamically added" /> + +<style> +table { + border-spacing: 0px; +} +td { + padding: 0px; +} +.outerTable { + height: 100px; + width: 100px; + position: relative; +} +.innerTable { + position: absolute; + top: 0px; + width: 100px; + height: 100%; + color: green; + background: green; +} +</style> +<p>Test passes if there is a filled green square.</p> +<table class=outerTable> + <td id=outerCell></td> +</table> +<script> +outerCell.innerHTML = "<table class=innerTable><td>some text</td></table>"; +</script> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-007.html b/testing/web-platform/tests/css/css-tables/absolute-tables-007.html new file mode 100644 index 0000000000..7922da4922 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-007.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/903224"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A positioned absolute table should resolve its %-height against its containing block."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position:relative; width:100px;"> + <div style="position:absolute; display:table; width:100%; height:100%; background:green;"></div> + <div style="height:100px; background:red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-008.tentative.html b/testing/web-platform/tests/css/css-tables/absolute-tables-008.tentative.html new file mode 100644 index 0000000000..157139b9ca --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-008.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos"> +<link rel="help" href="https://crbug.com/1122428"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="When sizing abspos tables, the given available-size can never exceed the available-size of the containing-block."> +<style> +div { + position: relative; + width: 100px; + height: 100px; +} +table { + background: green; + height: 100px; + position: absolute; + border-spacing: 0; + color: transparent; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="margin-left: 100px;"> + <table style="left: -100px;"> + <td>X X X X X X X X X</td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-009.tentative.html b/testing/web-platform/tests/css/css-tables/absolute-tables-009.tentative.html new file mode 100644 index 0000000000..291c69afbc --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-009.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos"> +<link rel="help" href="https://crbug.com/1122428"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="When sizing abspos tables, the given available-size can never exceed the available-size of the containing-block."> +<style> +div { + position: relative; + width: 100px; + height: 100px; +} +table { + background: green; + height: 100px; + position: absolute; + border-spacing: 0; + color: transparent; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="margin-left: 100px;"> + <table style="left: -100px; right: 0;"> + <td>X X X X X X X X X</td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-010.tentative.html b/testing/web-platform/tests/css/css-tables/absolute-tables-010.tentative.html new file mode 100644 index 0000000000..cb4ad48f3a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-010.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos"> +<link rel="help" href="https://crbug.com/1122428"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="When sizing abspos tables, the given available-size can never exceed the available-size of the containing-block."> +<style> +.container { + position: relative; + width: 100px; + height: 100px; +} +table { + background: green; + height: 100px; + position: absolute; + border-spacing: 0; + color: transparent; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="container" style="margin-left: 100px;"> + <div style="margin-left: -100px;"> + <table> + <td>X X X X X X X X X</td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-011.tentative.html b/testing/web-platform/tests/css/css-tables/absolute-tables-011.tentative.html new file mode 100644 index 0000000000..5c8ed3a5fa --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-011.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos"> +<link rel="help" href="https://crbug.com/1122428"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="When sizing abspos tables, the given available-size can never exceed the available-size of the containing-block."> +<style> +div { + position: relative; + width: 100px; + height: 100px; +} +table { + background: green; + height: 100px; + position: absolute; + border-spacing: 0; + color: transparent; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div style="margin-left: -100px;"> + <table style="right: -100px;"> + <td>X X X X X X X X X</td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-012.html b/testing/web-platform/tests/css/css-tables/absolute-tables-012.html new file mode 100644 index 0000000000..76dc0bf9e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-012.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos"> +<link rel="help" href="https://crbug.com/1123475"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="When sizing abspos tables with `table-layout: fixed`, the max-content size shouldn't be infinite."> +<p>Test passes if there is a filled green square.</p> +<div style="position: relative; width: 200px;"> + <table style="position: absolute; width: 50%; height: 100px; table-layout: fixed; background: green;"></table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-013.html b/testing/web-platform/tests/css/css-tables/absolute-tables-013.html new file mode 100644 index 0000000000..2eff1c976f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-013.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1128941"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A positioned absolute table should respect its main-size, and never go below its min-content size."> +<style> +table { + position: absolute; + width: 50%; + border-spacing: 0; +} +td { + width: 100%; + line-height: 0; + padding: 0; + background: red; +} +span { + display: inline-block; + width: 100px; + height: 50px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 200px; height: 200px; position: relative;"> + <table> + <td> + <span></span> + <span></span> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-014.html b/testing/web-platform/tests/css/css-tables/absolute-tables-014.html new file mode 100644 index 0000000000..60dfc1f59d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-014.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1128941"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A positioned absolute table should respect its main-size, and never go below its min-content size."> +<style> +table { + position: absolute; + width: 10%; + border-spacing: 0; +} +td { + width: 100%; + line-height: 0; + padding: 0; + background: red; +} +span { + display: inline-block; + width: 100px; + height: 50px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 200px; height: 200px; position: relative;"> + <table> + <td> + <span></span> + <span></span> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-015.html b/testing/web-platform/tests/css/css-tables/absolute-tables-015.html new file mode 100644 index 0000000000..f0f19e2d66 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-015.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1128941"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A positioned absolute table should respect its main-size, and never go below its min-content size."> +<style> +table { + position: absolute; + width: 0px; + border-spacing: 0; +} +td { + width: 100%; + line-height: 0; + padding: 0; + background: red; +} +span { + display: inline-block; + width: 100px; + height: 50px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 200px; height: 200px; position: relative;"> + <table> + <td> + <span></span> + <span></span> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/absolute-tables-016.html b/testing/web-platform/tests/css/css-tables/absolute-tables-016.html new file mode 100644 index 0000000000..f8eb1516ae --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/absolute-tables-016.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Abspos table centered in both axes with auto margins</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1480636"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"> +<meta name="assert" content="An absolutely-positioned fixed-size table should resolve auto margins the same way that a similarly-sized block would."> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +.container { + /* I've chosen this position/size so that a 100px child element that's + centered within us will be placed at our "normal" position (where our + top-left corner would be, in the absence of relative positioning), so we + can use the simple filled-green-100px-square reference case. */ + position: relative; + left: -30px; + top: -30px; + width: 160px; + height: 160px; +} +.target { + display: block; + background: red; +} +.table { + display: table; + background: green; +} +.centered { + position: absolute; + width: 100px; + height: 100px; + inset: 0; + margin: auto; /* use auto margins for centering */ +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <!-- We're essentially just comparing the position of the block ("target") + and the table. We expect them to be placed at precisely the same spot, + so no red should be visible. --> + <div class="centered target"></div> + <div class="centered table"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/abspos-container-change-dynamic-001-ref.html b/testing/web-platform/tests/css/css-tables/abspos-container-change-dynamic-001-ref.html new file mode 100644 index 0000000000..606021ecbe --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/abspos-container-change-dynamic-001-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<table> + <tbody> + <tr> + <td>A</td> + <td id="target" style="position: relative">B + <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: lime;"></div> + </td> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/abspos-container-change-dynamic-001.html b/testing/web-platform/tests/css/css-tables/abspos-container-change-dynamic-001.html new file mode 100644 index 0000000000..5fdf7ce967 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/abspos-container-change-dynamic-001.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Dynamic position change in table cell with abspos child</title> +<link rel="help" href="https://drafts.csswg.org/css-position-3/#position-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1815552"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="abspos-container-change-dynamic-001-ref.html"> +<table> + <tbody> + <tr> + <td>A</td> + <td id="target">B</td> + </tbody> +</table> +<script> + let target = document.getElementById("target"); + target.getBoundingClientRect(); + target.style.position = "relative"; + let abspos = document.createElement("div"); + abspos.style = ` + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background-color: lime; + `; + target.appendChild(abspos); +</script> diff --git a/testing/web-platform/tests/css/css-tables/animations/border-spacing-interpolation.html b/testing/web-platform/tests/css/css-tables/animations/border-spacing-interpolation.html new file mode 100644 index 0000000000..02e1cc6229 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/animations/border-spacing-interpolation.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>boder-spacing interpolation</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders"> +<meta name="assert" content="border-spacing supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + border-spacing: 30px; +} + +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + margin: 18px; + border-collapse: separate; + border-spacing: 10px; +} + +.target td { + background-color: white; + border: 1px solid orange; + width: 10px; + height: 10px; +} + +.expected { + background-color: green; +} +</style> + +<body> +<template id="target-template"> + <table> + <tbody> + <tr> + <td></td> + <td></td> + </tr> + </tbody> + </table> +</template> + +<script> +test_interpolation({ + property: 'border-spacing', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px 7px'}, + {at: 0, expect: '10px 10px'}, + {at: 0.3, expect: '13px 13px'}, + {at: 0.6, expect: '16px 16px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '25px 25px'}, +]); + +test_interpolation({ + property: 'border-spacing', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '0px 0px'}, + {at: 0, expect: '0px 0px'}, + {at: 0.3, expect: '6px 6px'}, + {at: 0.6, expect: '12px 12px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '30px 30px'}, +]); + +test_interpolation({ + property: 'border-spacing', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '33px 33px'}, + {at: 0, expect: '30px 30px'}, + {at: 0.3, expect: '27px 27px'}, + {at: 0.6, expect: '24px 24px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '15px 15px'}, +]); + +test_interpolation({ + property: 'border-spacing', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '33px 33px'}, + {at: 0, expect: '30px 30px'}, + {at: 0.3, expect: '27px 27px'}, + {at: 0.6, expect: '24px 24px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '15px 15px'}, +]); + +test_interpolation({ + property: 'border-spacing', + from: '0px', + to: '10px' +}, [ + {at: -0.3, expect: '0px 0px'}, // Can't be negative. + {at: 0, expect: '0px 0px'}, + {at: 0.3, expect: '3px 3px'}, + {at: 0.6, expect: '6px 6px'}, + {at: 1, expect: '10px 10px'}, + {at: 1.5, expect: '15px 15px'} +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-tables/anonymous-table-cell-margin-collapsing.html b/testing/web-platform/tests/css/css-tables/anonymous-table-cell-margin-collapsing.html new file mode 100644 index 0000000000..23b467ebac --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/anonymous-table-cell-margin-collapsing.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Anonymous table cells with semi-complex margin collapsing inside</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#block-formatting" title="9.4.1 Block formatting contexts"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:table; height:100px; background:red;"> + <div style="display:table-row; background:green;"> + <div style="width:100px; margin:50px 0;"> + <div style="margin:50px 0;"></div> + </div> + <div style="margin:50px 0;"></div> + </div> + <div style="display:table-row; background:green;"> + <div style="margin:50px 0;"></div> + </div> + <!-- The above rows should use all available height, and the last + row should get nothing (or there'll be red). --> + <div style="display:table-row;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/anonymous-table-ws-001-ref.html b/testing/web-platform/tests/css/css-tables/anonymous-table-ws-001-ref.html new file mode 100644 index 0000000000..4429239d96 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/anonymous-table-ws-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Reference</title> +<style> +div { font: 16px monospace; } +</style> +<p>Test passes if there is a space between the "a" and "b".</p> +<div>a b</div> diff --git a/testing/web-platform/tests/css/css-tables/anonymous-table-ws-001.html b/testing/web-platform/tests/css/css-tables/anonymous-table-ws-001.html new file mode 100644 index 0000000000..99d2cfc239 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/anonymous-table-ws-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Test: White space should not be removed between elements for which a single anonymous table cell is generated</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="match" href="anonymous-table-ws-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#fixup-algorithm"> +<style> +div { display: table; font: 16px monospace; } +</style> +<p>Test passes if there is a space between the "a" and "b".</p> +<div> + <span>a</span> <span>b</span> +</div> diff --git a/testing/web-platform/tests/css/css-tables/auto-layout-calc-width-001.html b/testing/web-platform/tests/css/css-tables/auto-layout-calc-width-001.html new file mode 100644 index 0000000000..dbd35d8af1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/auto-layout-calc-width-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="author" title="Xiaocheng Hu" href="xiaochengh@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94"> + +<style> +table { + width: 200px; + border-collapse: collapse; + table-layout: auto; + height: 20px; +} + +td { + padding: 0px; + background: lime; + outline: 1px solid blue; +} +</style> + +<h2>Calc width on col is treated as auto in auto tables</h2> + +<table id=theTable> + <col style="width:calc(20% + 80px)"> + <tr> + <td data-expected-width=100></td> + <td data-expected-width=100></td> + </tr> +</table> + +<script> +checkLayout('#theTable') +</script> diff --git a/testing/web-platform/tests/css/css-tables/background-clip-001.html b/testing/web-platform/tests/css/css-tables/background-clip-001.html new file mode 100644 index 0000000000..dcda11fec7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/background-clip-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>Collapsed borders and background-clip</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#in-collapsed-borders-mode"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-clip"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1008400" /> +<meta name="assert" content="background-clip on a cell with collapsed borders is calculated correctly" /> + +<style> +table { + border-collapse: collapse; + /* The properties after the blank line are not the behavior under test. */ + + background: red; +} + +td { + background-clip: content-box; + border: 30px solid green; + + background-color: green; + padding: 0px; + line-height: 0px; +} + +.cell-content { + display: inline-block; + + height: 40px; + width: 40px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<table> + <tr> + <td> + <span class="cell-content"></span> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/baseline-vertical-ref.html b/testing/web-platform/tests/css/css-tables/baseline-vertical-ref.html new file mode 100644 index 0000000000..da592cba2e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/baseline-vertical-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Reference: Table Baseline Alignment in Vertical Writing Mode</title> +<link rel="author" title="David Shin" href="dshin@mozilla.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#table-cell-baseline" /> +<style> +.table { + border: 1px solid; + border-width: 1px 2px 3px 4px; + padding: 5px 6px 7px 8px; + border-spacing: 0; + width: fit-content; +} +.inner { + width: 50px; + height: 100px; + background: green; +} +</style> +<div class="table"> + <div class="table"><div class="inner"></div></div> + <div class="table"><div class="inner"></div></div> +</div> +<div class="table"> + <div class="table"><div class="inner"></div></div> + <div class="table"><div class="inner"> diff --git a/testing/web-platform/tests/css/css-tables/baseline-vertical.html b/testing/web-platform/tests/css/css-tables/baseline-vertical.html new file mode 100644 index 0000000000..45672ab6f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/baseline-vertical.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Table Baseline Alignment in Vertical Writing Mode</title> +<link rel="author" title="David Shin" href="dshin@mozilla.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#table-cell-baseline" /> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1786353" /> +<link rel="match" href="baseline-vertical-ref.html" /> +<meta name="assert" content="Table with baseline alignment, vertical writing mode and tall elements should not generate excess space."> +<style> +table, tr, td { + border: 1px solid; + border-width: 1px 2px 3px 4px; + padding: 5px 6px 7px 8px; + border-spacing: 0; +} +td { + vertical-align: baseline; + background: red; + background-clip: content-box; +} +div { + width: 50px; + height: 100px; + background: green; +} +</style> +<table style="writing-mode: vertical-lr;"><tr> +<td><div></div></td><td><div></div></td> +</tr></table> +<table style="writing-mode: vertical-rl;"><tr> +<td><div></div></td><td><div></div> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-double-border-notref.html b/testing/web-platform/tests/css/css-tables/border-collapse-double-border-notref.html new file mode 100644 index 0000000000..8f4222211d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-double-border-notref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<table style="border-collapse: collapse; border-style: solid;"> + <td>Should see a non-solid border</td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-double-border.html b/testing/web-platform/tests/css/css-tables/border-collapse-double-border.html new file mode 100644 index 0000000000..f7a00756e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-double-border.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Test: border-collapsed tables don't unconditionally render double borders as solid</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1521066"> +<link rel="help" href="https://drafts.csswg.org/css2/tables.html#collapsing-borders"> +<link rel="mismatch" href="border-collapse-double-border-notref.html"> +<table style="border-collapse: collapse; border-style: double;"> + <td>Should see a non-solid border</td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-col-001-ref.html b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-col-001-ref.html new file mode 100644 index 0000000000..6ace02b432 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-col-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + table { + border-collapse: collapse; + border-spacing: 0; + } + td { + padding: 10px; + border: 1px solid; + } +</style> +<table> + <colgroup> + <col> + <col> + <col> + <col> + </colgroup> + <tbody> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-col-001.html b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-col-001.html new file mode 100644 index 0000000000..08a22ba7a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-col-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test: Border collapsed table with a dynamic <col> insertion</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1652384"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="border-collapse-dynamic-col-001-ref.html"> +<style> + table { + border-collapse: collapse; + border-spacing: 0; + } + td { + padding: 10px; + border: 1px solid; + } +</style> +<table> + <colgroup> + <col> + <col> + <col> + </colgroup> + <tbody> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> +</table> +<script> + document.querySelector("table").getBoundingClientRect(); + // Insert a column at the second position. + var trs = document.querySelectorAll("tr"); + var col = document.querySelector("col"); + col.parentNode.insertBefore(col.cloneNode(true), col.nextSibling); + for (var i = 0; i < trs.length; ++i) { + var row = trs[i]; + var firstCell = row.querySelector("td"); + firstCell.parentNode.insertBefore(firstCell.cloneNode(true), firstCell.nextSibling); + } +</script> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-oof.html b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-oof.html new file mode 100644 index 0000000000..6699fba3c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-oof.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1348154"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; background: red;"> + <div style="display: table; border-collapse: collapse; border: solid green 50px; width: 0; height: 0;"> + <div style="display: table-cell; position: relative;"> + <div id="target" style="position: absolute;"></div> + </div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = '10px'; +</script> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-section.html b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-section.html new file mode 100644 index 0000000000..5f48749fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-dynamic-section.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<table style="border-collapse: collapse; width: 100px; background: red;"> + <tbody> + <tr id="target" style="height: 50px; display: none;"> + <td style="border: solid green 25px; background: green; padding: 0;"></td> + </tr> + </tbody> + <tbody> + <tr style="height: 25px;"> + <td style="border: solid green 25px; padding: 0;"></td> + </tr> + </tbody> +</table> +<script> +document.body.offsetTop; +document.getElementById('target').style.display = ''; +</script> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-empty-cell-ref.html b/testing/web-platform/tests/css/css-tables/border-collapse-empty-cell-ref.html new file mode 100644 index 0000000000..f6b25134f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-empty-cell-ref.html @@ -0,0 +1,21 @@ +<!doctype HTML> +<style> + table { + border-collapse: collapse; + } + td { + width:50px; + height:50px; + border: 10px solid gray; + } +</style> +<table> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-empty-cell.html b/testing/web-platform/tests/css/css-tables/border-collapse-empty-cell.html new file mode 100644 index 0000000000..18894a35a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-empty-cell.html @@ -0,0 +1,26 @@ +<!doctype HTML> +<title>Collapsed borders of empty cells are painted</title> +<link rel="author" href="atotic@chromium.org"> +<link rel="match" href="border-collapse-empty-cell-ref.html"> +<link rel="help" href="https://stackoverflow.com/questions/18758373/why-do-the-css-property-border-collapse-and-empty-cells-conflict"> +<style> + table { + border-collapse: collapse; + empty-cells: hide; + } + td { + width:50px; + height:50px; + border: 10px solid gray; + } +</style> +<table> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-rowspan-cell-ref.html b/testing/web-platform/tests/css/css-tables/border-collapse-rowspan-cell-ref.html new file mode 100644 index 0000000000..53774da48a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-rowspan-cell-ref.html @@ -0,0 +1,22 @@ +<!doctype HTML> +<title>CSS Reference</title> +<style> + table { + border-collapse: collapse; + } + + td { + border: 1px solid red; + } +</style> +<table> + <tr> + <td id=target rowspan="2"> + Needs border + </td> + </tr> + <tr> + <td> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-collapse-rowspan-cell.html b/testing/web-platform/tests/css/css-tables/border-collapse-rowspan-cell.html new file mode 100644 index 0000000000..8a4bdede0e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-collapse-rowspan-cell.html @@ -0,0 +1,26 @@ +<!doctype HTML> +<title>CSS Test: collapsed borders of row-spanning cells should paint correctly.</title> +<link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org"> +<link rel="match" href="border-collapse-rowspan-cell-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#slot"> +<style> + table { + border-collapse: collapse; + } + + td { + border: 1px solid red; + position: relative; + } +</style> +<table> + <tr> + <td rowspan="2"> + Needs border + </td> + </tr> + <tr> + <td> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-conflict-resolution-ref.html b/testing/web-platform/tests/css/css-tables/border-conflict-resolution-ref.html new file mode 100644 index 0000000000..f19032171b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-conflict-resolution-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> + table { + font-size: 2em; + border-collapse: collapse; + border: 5px solid green; + } +</style> + +<p>You should see no non-solid borders and no red.</p> + +<table> + <tr> + <td colspan="4" style="border: 5px solid purple;">hello</td> + </tr> + <tr> + <td style="border-right: 5px solid blue; border-bottom: 9px hidden red;">one</td> + <td style="border-right: 5px solid blue;">two</td> + <td>three</td> + <td style="border-left: 5px solid blue">four</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-conflict-resolution.html b/testing/web-platform/tests/css/css-tables/border-conflict-resolution.html new file mode 100644 index 0000000000..7248befef5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-conflict-resolution.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: Table border resolution rules</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1520138"> +<link rel="help" href="https://drafts.csswg.org/css2/tables.html#border-conflict-resolution"> +<link rel="match" href="border-conflict-resolution-ref.html"> +<style> + table { + font-size: 2em; + border-collapse: collapse; + border: 5px solid green; + } +</style> + +<p>You should see no non-solid borders and no red.</p> + +<table> + <tr> + <td colspan="4" style="border: 5px solid purple;">hello</td> + </tr> + <tr> + <td style="border-top: 5px solid blue; border-right: 5px solid blue; border-bottom: 9px hidden red; border-left: 9px none;">one</td> + <td style="border-top: 5px dashed blue; border-right: 5px solid blue; border-bottom: 5px outset red;">two</td> + <td style="border-top: 5px ridge blue; border-right: 5px ridge red; border-bottom: 5px inset red;">three</td> + <td style="border-left: 5px solid blue; border-bottom: 5px dotted red;">four</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/border-spacing-included-in-sizes-001.html b/testing/web-platform/tests/css/css-tables/border-spacing-included-in-sizes-001.html new file mode 100644 index 0000000000..be7d2641f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-spacing-included-in-sizes-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetheight"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#bounding-box-assignment"> +<link rel="bookmark" href="https://crbug.com/613753" /> +<meta name="assert" content="border-spacing occurring outside rows and sections is not included in their height and width" /> + +<style> + #theTable td { + width: 100px; + height: 100px; + background-color: green; + padding: 0px; + } + + #theTable { + border-spacing: 10px; + } + + .outline { + outline: 2px solid black; + } +</style> + +<table id=theTable> + <tbody class="outline" data-expected-height=100> + <tr> + <td></td> + <td></td> + </tr> + </tbody> + <tbody class="outline" data-expected-height=150> + <tr></tr> + <tr></tr> + <tr></tr> + <tr> + <td></td> + <td></td> + </tr> + <tr></tr> + <tr></tr> + </tbody> + <tbody class="outline" data-expected-height=100> + <tr> + <td></td> + <td></td> + </tr> + </tbody> + <tfoot> + <tr style="outline: 2px dashed black" data-expected-width=210 data-expected-height=100> + <td></td> + <td></td> + </tr> + </tfoot> +</table> +<script> +checkLayout('tbody'); +checkLayout('tfoot tr'); +</script> diff --git a/testing/web-platform/tests/css/css-tables/border-writing-mode-dynamic-001.html b/testing/web-platform/tests/css/css-tables/border-writing-mode-dynamic-001.html new file mode 100644 index 0000000000..c1b232541d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/border-writing-mode-dynamic-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Collapsed borders track writing mode changes</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/common/rendering-utils.js"></script> +<style> + .bordermix { + border-top: 10px solid red; + border-bottom: 20px solid green; + border-left: 30px solid yellow; + border-right: 40px solid orange; + } + + .vertical { + writing-mode: vertical-rl; + } + + main td { + width:100px; + height:100px; + } + main table { + border-collapse: collapse; + } +</style> + +<main> + +<table class="bordermix targettable"> + <td>TABLE</td> +</table> + +<table class="targettable"> + <tbody class="bordermix"> + <td>TBODY</td> + </tbody> +</table> + +<table class="targettable"> + <tr class="bordermix"> + <td>TR</td> + </tr> +</table> + +<table class="targettable"> + <td class="bordermix">TD</td> +</table> + +</main> +<script> + var test = async_test("Table borders track writing mode changes"); + let targets = Array.from(document.querySelectorAll(".targettable")); + + function assertTargetSize() { + for (let target of targets) { + assert_equals(target.offsetWidth, 172); + assert_equals(target.offsetHeight, 132); + } + } + test.step(assertTargetSize); + + waitForAtLeastOneFrame().then( _ => { + for (let target of targets) + target.classList.toggle("vertical"); + document.body.offsetTop; + test.step(assertTargetSize); + test.done(); + }); + +</script> diff --git a/testing/web-platform/tests/css/css-tables/bounding-box-computation-1.html b/testing/web-platform/tests/css/css-tables/bounding-box-computation-1.html new file mode 100644 index 0000000000..4173f399bd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/bounding-box-computation-1.html @@ -0,0 +1,96 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#bounding-box-assignment"> +<main> + + <h1>Bounding box computation</h1> + <p>Checks that all table-internal boxes are positioned correctly</p> + + <hr/> + <p>The all table-internal elements of this table shoud be 100px and 100px wide tall:</p> + <p>Table size is 120px. There are two 10px border-spacing, one at each side.</p> + <x-table style="width: 120px; height: 120px; border-spacing: 10px; background: yellow;"> + <x-colgroup><x-col></x-col></x-colgroup> + <x-tbody> + <x-tr> + <x-td style="padding: 0; background: blue;"></x-td> + </x-tr> + </x-tbody> + </x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + "Control test: Table width is 120px", + document.querySelector("x-table:nth-of-type("+(i++)+")").offsetWidth, + 120 + ], + [ + "Control test: Table height is 120px", + document.querySelector("x-table:nth-of-type("+(i-1)+")").offsetHeight, + 120 + ], + [ + "Table-cell is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-td").offsetWidth, + 100 + ], + [ + "Table-cell is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-td").offsetHeight, + 100 + ], + [ + "Table-row is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tr").offsetWidth, + 100 + ], + [ + "Table-row is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tr").offsetHeight, + 100 + ], + [ + "Table-row-group is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetWidth, + 100 + ], + [ + "Table-row-group is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetHeight, + 100 + ], + [ + "Table-column is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-col").offsetWidth, + 100 + ], + [ + "Table-column is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-col").offsetHeight, + 100 + ], + [ + "Table-column-group is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-colgroup").offsetWidth, + 100 + ], + [ + "Table-column-group is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-colgroup").offsetHeight, + 100 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/bounding-box-computation-2.html b/testing/web-platform/tests/css/css-tables/bounding-box-computation-2.html new file mode 100644 index 0000000000..f20cfe2a78 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/bounding-box-computation-2.html @@ -0,0 +1,96 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#bounding-box-assignment"> +<main> + + <h1>Bounding box computation</h1> + <p>Checks that all table-internal boxes are positioned correctly</p> + + <hr/> + <p>The all table-internal elements of this table shoud be 100px and 100px wide tall:</p> + <p>Table size is 120px. There are two 10px borders, one at each side.</p> + <x-table style="width: 120px; height: 120px; border: 10px solid transparent; box-sizing: border-box; background: yellow;"> + <x-colgroup><x-col></x-col></x-colgroup> + <x-tbody> + <x-tr> + <x-td style="padding: 0; background: blue;"></x-td> + </x-tr> + </x-tbody> + </x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + "Control test: Table width is 120px", + document.querySelector("x-table:nth-of-type("+(i++)+")").offsetWidth, + 120 + ], + [ + "Control test: Table height is 120px", + document.querySelector("x-table:nth-of-type("+(i-1)+")").offsetHeight, + 120 + ], + [ + "Table-cell is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-td").offsetWidth, + 100 + ], + [ + "Table-cell is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-td").offsetHeight, + 100 + ], + [ + "Table-row is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tr").offsetWidth, + 100 + ], + [ + "Table-row is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tr").offsetHeight, + 100 + ], + [ + "Table-row-group is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetWidth, + 100 + ], + [ + "Table-row-group is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetHeight, + 100 + ], + [ + "Table-column is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-col").offsetWidth, + 100 + ], + [ + "Table-column is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-col").offsetHeight, + 100 + ], + [ + "Table-column-group is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-colgroup").offsetWidth, + 100 + ], + [ + "Table-column-group is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-colgroup").offsetHeight, + 100 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/bounding-box-computation-3.html b/testing/web-platform/tests/css/css-tables/bounding-box-computation-3.html new file mode 100644 index 0000000000..188257af44 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/bounding-box-computation-3.html @@ -0,0 +1,86 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#bounding-box-assignment"> +<main> + + <h1>Bounding box computation</h1> + <p>Checks that all table-internal boxes are positioned correctly</p> + + <hr/> + <p>The first table-row-group should have width and height 0:</p> + <p>The first tbody is empty, and should return an height of 0px. The second one should be 100px tall.</p> + <x-table style="border-spacing: 10px; background: yellow; position: relative;"> + <x-tbody></x-tbody> + <x-tbody> + <x-tr> + <x-td style="padding: 50px; background: blue;"></x-td> + </x-tr> + </x-tbody> + </x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + "Control test: Table width is 120px", + document.querySelector("x-table:nth-of-type("+(i++)+")").offsetWidth, + 120 + ], + [ + "Control test: Table height is 120px", + document.querySelector("x-table:nth-of-type("+(i-1)+")").offsetHeight, + 120 + ], + [ + "First (empty) table-row-group is 0px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetWidth, + 0 + ], + [ + "First (empty) table-row-group is 0px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetHeight, + 0 + ], + [ + "First (empty) table-row-group should be located at 10px left", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetLeft, + 10 + ], + [ + "First (empty) table-row-group should be located at 10px top", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody").offsetTop, + 10 + ], + [ + "Second table-row-group is 100px wide", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody + x-tbody").offsetWidth, + 100 + ], + [ + "Second table-row-group is 100px tall", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody + x-tbody").offsetHeight, + 100 + ], + [ + "Second table-row-group should be located at 10px left", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody + x-tbody").offsetLeft, + 10 + ], + [ + "Second table-row-group should be located at 10px top", + document.querySelector("x-table:nth-of-type("+(i-1)+") x-tbody + x-tbody").offsetTop, + 10 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/box-shadow-001.html b/testing/web-platform/tests/css/css-tables/box-shadow-001.html new file mode 100644 index 0000000000..9a9fb066d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/box-shadow-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>Collapsed borders and box-shadow</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#in-collapsed-borders-mode"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/1006241" /> +<meta name="assert" content="box-shadow size and location on a cell with collapsed borders are calculated correctly" /> + +<style> +table { + border-collapse: collapse; +} + +/* Make the green box-shadow start at the inner edge of the border to cover up all the red. + Chrome's bug made the box-shadow start further toward the center. */ +td { + border: 20px solid green; + box-shadow: inset 60px 0px green; + /* The properties after the blank line aren't the focus of the test. */ + + background: red; + line-height: 0px; + padding: 0px; +} + +td > span { + display: inline-block; /* chrome only hits this bug when the td children are inline */ + + height: 60px; + width: 60px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<table> + <tr> + <td><span></span></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-auto.html b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-auto.html new file mode 100644 index 0000000000..ec6e9ccfdd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-auto.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Simple calc expression in table layout</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3482"> +<link rel="match" href="calc-percent-plus-0px-ref.html"> +<meta name="assert" content="calc(% + 0px) should be handled as calc(%) in auto table layout."> +<table border style="table-layout: auto"> + <tr> + <td style="width: calc(50% + 0px)">x</td> + <td style="width: 100px">y</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-fixed-ref.html b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-fixed-ref.html new file mode 100644 index 0000000000..ec862ff1e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-fixed-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Simple calc expression in table layout</title> +<table border style="table-layout: fixed; width: 200px"> + <tr> + <td style="width: 50%">x</td> + <td>y</td> + <td>z</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-fixed.html b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-fixed.html new file mode 100644 index 0000000000..bcdb6721d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-fixed.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Simple calc expression in table layout</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3482"> +<link rel="match" href="calc-percent-plus-0px-fixed-ref.html"> +<meta name="assert" content="calc(% + 0px) should be handled as calc(%) in fixed table layout."> +<table border style="table-layout: fixed; width: 200px"> + <tr> + <td style="width: calc(50% + 0px)">x</td> + <td>y</td> + <td>z</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-ref.html b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-ref.html new file mode 100644 index 0000000000..7dc722cc2e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/calc-percent-plus-0px-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Simple calc expression in table layout</title> +<table border> + <tr> + <td style="width: 50%">x</td> + <td style="width: 100px">y</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/caption-side-1.html b/testing/web-platform/tests/css/css-tables/caption-side-1.html new file mode 100644 index 0000000000..302e51ae23 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/caption-side-1.html @@ -0,0 +1,42 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#caption-side-property"> +<main> + + <h1>Caption-side</h1> + <p>Checks that browsers implement properly the caption-side property</p> + + <hr/> + <p>This should read ABC:</p> + <p> + The first caption (C) should be put on the bottom because it inherits caption-side:bottom from the table;<br/> + The second captin (A) should be put on the top because it has caption-side:top specified; + </p> + <div><table style="caption-side:bottom"><caption>C</caption><tbody><tr><td>B</td></tr></tbody><caption style="caption-side:top">A</caption></table></div> + + <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> + <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> + <script>void function() { var divs = document.querySelectorAll("main > div"); for(var i = divs.length; i--;) { var div = divs[i]; var pre = document.createElement('pre'); pre.title = pre.textContent = div.innerHTML; div.parentNode.insertBefore(pre, div); }; }();</script> + <hr/> + +</main> + +<script> + + var i = 1; + generate_tests(assert_equals, [ + [ + "Caption-side inherits and reorder captions properly", + document.querySelector("main > div:nth-of-type("+(i++)+") caption:first-child").offsetTop > document.querySelector("main > div:nth-of-type("+(i-1)+") caption:last-child").offsetTop, + true + ], + [ + "Multiple captions can be rendered", + document.querySelector("main > div:nth-of-type("+(i-1)+") table").offsetHeight > 3 * 16, + true + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/caption-writing-mode-001.html b/testing/web-platform/tests/css/css-tables/caption-writing-mode-001.html new file mode 100644 index 0000000000..70db125923 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/caption-writing-mode-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows"> +<meta name="assert" content="caption margins are resolved against table's height when table has vertical flow" /> +<style> +x-table { + display: table; + width: 300px; + height: 200px; + writing-mode: vertical-lr; + outline: 2px dashed blue; +} +x-caption { + display: table-caption; + height: 50px; + width: 120px; + writing-mode: horizontal-tb; + outline: 1px solid black; +} +</style> + +<x-table> + <x-caption id=captionMarginLeft style="margin-left:20%">caption</x-caption> +</x-table> +<x-table> + <x-caption id=captionMarginTop style="margin:auto 0">caption</x-caption> +</x-table> +<p>This is a script test because of how ridiculously differently the current +engines render these cases.</p> + + +<script> +let caption_margin_left = getComputedStyle(id=captionMarginLeft).marginLeft; +test(() => assert_equals(caption_margin_left, "40px"), "Caption percent margins are resolved against table's height for vertical-lr tables"); +let caption_margin_top = getComputedStyle(captionMarginTop).marginTop; +test(() => assert_equals(caption_margin_top, "75px"), "Caption with auto top/bottom margins is centered vertically for vertical-lr tables"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/caption-writing-mode-002.html b/testing/web-platform/tests/css/css-tables/caption-writing-mode-002.html new file mode 100644 index 0000000000..35de4f761a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/caption-writing-mode-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows"> +<style> +x-table { + display: table; + width: 300px; + height: 300px; + writing-mode: vertical-lr; + outline: 2px dashed blue; +} +x-caption { + display: table-caption; + height: 200px; + width: 200px; + writing-mode: horizontal-tb; + outline: 1px solid black; +} +</style> + +<x-table> + <x-caption>caption</x-caption> +</x-table> + +<script> +let body_height = document.querySelector("body").offsetHeight; +test(() => { + assert_greater_than(body_height, 0, "Vertical table with horizontal caption doesn't make <body> have crazy height."); + assert_less_than(body_height, 10000, "Vertical table with horizontal caption doesn't make <body> have crazy height."); +}) +</script> diff --git a/testing/web-platform/tests/css/css-tables/chrome-rowspan-bug.html b/testing/web-platform/tests/css/css-tables/chrome-rowspan-bug.html new file mode 100644 index 0000000000..faf54671cf --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/chrome-rowspan-bug.html @@ -0,0 +1,45 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<title>caption</title> +<meta name="flags" content="ahem"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://crbug.com/1180592"/> +<style> + main table { + border-spacing: 0; + } + main table td { + border: 1px solid black; + padding: 0; + width: 50px; + height: 25px; + } +</style> + +<main> + <table> + <tbody> + <tr> + <td></td> + <td id="target" rowspan=5></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=5></td> + <td rowspan=5></td> + <td></td> + </tr> + <tr> + <td></td> + </tr> + </tbody> + </table> +</main> + +<script> + test(_ => { + assert_equals(document.body.querySelector("#target").offsetHeight, 81); + }, "table tracks correct use of rowspan"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/col-definite-max-size-001-ref.html b/testing/web-platform/tests/css/css-tables/col-definite-max-size-001-ref.html new file mode 100644 index 0000000000..835113b2e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/col-definite-max-size-001-ref.html @@ -0,0 +1,131 @@ +<!doctype html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + <td style="border-color:white; border-style:solid"></td> + <td style="border-color:white; border-style:solid"></td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + <td style="border-color:white; border-style:solid"></td> + <td style="border-color:white; border-style:solid"></td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + <td style="border-color:white; border-style:solid"></td> + <td style="border-color:white; border-style:solid"></td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:40px"> + <col style="width:40px"> + <col style="width:40px"> + <col style="width:40px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> diff --git a/testing/web-platform/tests/css/css-tables/col-definite-max-size-001.html b/testing/web-platform/tests/css/css-tables/col-definite-max-size-001.html new file mode 100644 index 0000000000..bcd7ca2fd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/col-definite-max-size-001.html @@ -0,0 +1,172 @@ +<!doctype html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#total-horizontal-border-spacing"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#outer-max-content"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692607"> +<link rel="match" href="col-definite-max-size-001-ref.html"> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:0; width:100px"> + <col style="max-width:0; width:100px"> + <col style="max-width:0; width:100px"> + <col style="max-width:0; width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:0; min-width:100px"> + <col style="max-width:0; min-width:100px"> + <col style="max-width:0; min-width:100px"> + <col style="max-width:0; min-width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:10%; width:100px"> + <col style="max-width:10%; width:100px"> + <col style="max-width:10%; width:100px"> + <col style="max-width:10%; width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:calc(100px + 1%); width:100px"> + <col style="max-width:calc(100px + 1%); width:100px"> + <col style="max-width:calc(100px + 1%); width:100px"> + <col style="max-width:calc(100px + 1%); width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:0; width:calc(100px + 1%)"> + <col style="max-width:0; width:calc(100px + 1%)"> + <col style="max-width:0; width:calc(100px + 1%)"> + <col style="max-width:0; width:calc(100px + 1%)"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:0; width:50%"> + <col style="max-width:0; width:50%"> + <col style="max-width:0; width:50%"> + <col style="max-width:0; width:50%"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col> + <col> + <col style="max-width:0"> + <col style="max-width:0"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:40px; width:100px"> + <col style="max-width:40px; width:100px"> + <col style="max-width:40px; width:100px"> + <col style="max-width:40px; width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:40px; width:calc(100px + 1%)"> + <col style="max-width:40px; width:calc(100px + 1%)"> + <col style="max-width:40px; width:calc(100px + 1%)"> + <col style="max-width:40px; width:calc(100px + 1%)"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="max-width:40px; width:50%"> + <col style="max-width:40px; width:50%"> + <col style="max-width:40px; width:50%"> + <col style="max-width:40px; width:50%"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col> + <col> + <col style="max-width:40px"> + <col style="max-width:40px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> diff --git a/testing/web-platform/tests/css/css-tables/col-definite-min-size-001.html b/testing/web-platform/tests/css/css-tables/col-definite-min-size-001.html new file mode 100644 index 0000000000..7fb6632eec --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/col-definite-min-size-001.html @@ -0,0 +1,67 @@ +<!doctype html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#total-horizontal-border-spacing"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#outer-max-content"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692607"> +<link rel="match" href="col-definite-size-001-ref.html"> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="min-width:100px"> + <col style="min-width:100px"> + <col style="min-width:100px"> + <col style="min-width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="min-width:calc(100px + 1%)"> + <col style="min-width:calc(100px + 1%)"> + <col style="min-width:calc(100px + 1%)"> + <col style="min-width:calc(100px + 1%)"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="min-width:50%"> + <col style="min-width:50%"> + <col style="min-width:50%"> + <col style="min-width:50%"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col> + <col> + <col style="min-width:0"> + <col style="min-width:0"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> diff --git a/testing/web-platform/tests/css/css-tables/col-definite-size-001-ref.html b/testing/web-platform/tests/css/css-tables/col-definite-size-001-ref.html new file mode 100644 index 0000000000..7f666ef0a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/col-definite-size-001-ref.html @@ -0,0 +1,45 @@ +<!doctype html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + <td style="border-color:white; border-style:solid"></td> + <td style="border-color:white; border-style:solid"></td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> diff --git a/testing/web-platform/tests/css/css-tables/col-definite-size-001.html b/testing/web-platform/tests/css/css-tables/col-definite-size-001.html new file mode 100644 index 0000000000..7f30417557 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/col-definite-size-001.html @@ -0,0 +1,67 @@ +<!doctype html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#total-horizontal-border-spacing"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#outer-max-content"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692607"> +<link rel="match" href="col-definite-size-001-ref.html"> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + <col style="width:100px"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:calc(100px + 1%)"> + <col style="width:calc(100px + 1%)"> + <col style="width:calc(100px + 1%)"> + <col style="width:calc(100px + 1%)"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col style="width:50%"> + <col style="width:50%"> + <col style="width:50%"> + <col style="width:50%"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> + +<table border="1" cellspacing="10"> + <colgroup> + <col> + <col> + <col style="width:0"> + <col style="width:0"> + </colgroup> + <thead> + <tr> + <td>1</td> + <td>2</td> + </tr> + </thead> +</table> diff --git a/testing/web-platform/tests/css/css-tables/col_removal.html b/testing/web-platform/tests/css/css-tables/col_removal.html new file mode 100644 index 0000000000..ee5efa9dda --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/col_removal.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>Table grid syncs after COL removal</title> +<link rel="author" href="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://crbug.com/1191940"> + +<style> + main td { + width:30px; + height:30px; + padding:0; + } +</style> +<main> + <table style="border-collapse: collapse;"> + <col style="border: 2px solid green;"></col> + <col id="target" style="border: 50px solid red;"></col> + <td>x</td> + <td>x</td> + </table> +</main> +<script> + test(() => { + let table = document.querySelector("main table"); + document.body.offsetTop; + assert_equals(table.offsetWidth, 162); + document.getElementById('target').remove(); + assert_equals(table.offsetWidth, 64, "table shrinks after column is removed"); + }); +</script> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-color-change-with-compositing-ref.html b/testing/web-platform/tests/css/css-tables/collapsed-border-color-change-with-compositing-ref.html new file mode 100644 index 0000000000..ab9d839274 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-color-change-with-compositing-ref.html @@ -0,0 +1,20 @@ +<!doctype HTML> +<html> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#borders"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<style> + td { border: 3px solid black; } + .composited { will-change: transform; } +</style> +<table style="border-collapse: collapse"> + <tr class=composited> + <td style="border-color: green">First</td> + <td >Second</td> + </tr> + <tr class=composited> + <td>Third</td> + <td>Fourth</td> + </tr> +</table> +</html> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-color-change-with-compositing.html b/testing/web-platform/tests/css/css-tables/collapsed-border-color-change-with-compositing.html new file mode 100644 index 0000000000..f7b19676bd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-color-change-with-compositing.html @@ -0,0 +1,29 @@ +<!doctype HTML> +<html class=reftest-wait> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#borders"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="collapsed-border-color-change-with-compositing-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + td { border: 3px solid black; } + .composited { will-change: transform; } +</style> +<table style="border-collapse: collapse"> + <tr class=composited> + <td id=target style="border-color: red">First</td> + <td >Second</td> + </tr> + <tr class=composited> + <td>Third</td> + <td>Fourth</td> + </tr> +</table> +</html> +<script> + onload = () => requestAnimationFrame(() => + requestAnimationFrame(() => { + target.style.borderColor = 'green'; + document.documentElement.classList.remove('reftest-wait'); + })); +</script> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-paint-phase-001.html b/testing/web-platform/tests/css/css-tables/collapsed-border-paint-phase-001.html new file mode 100644 index 0000000000..9c45eb7136 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-paint-phase-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A tables collapsed borders paint in the background paint phase."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<table style="border-collapse: collapse; border-spacing: 0;"> + <td style="border-right: 50px solid red; padding: 0;"> + <div style="width: 50px; line-height: 0;"> + <!-- Paints in the foreground phase above the collapsed borders. --> + <div style="display: inline-block; width: 100px; height: 100px; background: green;"></div> + </div> + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-paint-phase-002.html b/testing/web-platform/tests/css/css-tables/collapsed-border-paint-phase-002.html new file mode 100644 index 0000000000..865069da0a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-paint-phase-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A tables collapsed borders paint in the background paint phase, after children."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<!DOCTYPE html> +<table style="border-collapse: collapse; border-spacing: 0;"> + <td style="border-right: solid 100px green; height: 100px; padding: 0;"> + <div style="width: 0;"> + <div style="width: 100px; height: 100px; background: red;"></div> + </div> + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-positioned-tr-td-ref.html b/testing/web-platform/tests/css/css-tables/collapsed-border-positioned-tr-td-ref.html new file mode 100644 index 0000000000..b309901769 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-positioned-tr-td-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +td { + width: 50.6px; + height: 50.3px; + background: yellow; + padding: 0; + border: 1px solid blue; +} +</style> +<table style="border-collapse: collapse"> + <tr> + <td></td><td></td><td></td> + </tr> + <tr> + <td></td><td></td><td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-positioned-tr-td.html b/testing/web-platform/tests/css/css-tables/collapsed-border-positioned-tr-td.html new file mode 100644 index 0000000000..d5c6094497 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-positioned-tr-td.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org" /> +<link rel="help" href="https://crbug.com/1180773"/> +<link rel="match" href="collapsed-border-positioned-tr-td-ref.html"/> +<style> +td { + width: 50.6px; + height: 50.3px; + background: yellow; + padding: 0; + border: 1px solid blue; +} +</style> +<table style="border-collapse: collapse"> + <tr style="position: relative"> + <td></td><td></td><td></td> + </tr> + <tr> + <td style="position: relative"></td> + <td style="position: relative"></td> + <td style="position: relative"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-remove-cell-ref.html b/testing/web-platform/tests/css/css-tables/collapsed-border-remove-cell-ref.html new file mode 100644 index 0000000000..9294283d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-remove-cell-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> + table { + border-collapse: collapse; + } + td { + width: 100px; + height: 100px; + border: 1px solid black; + } + td#target { + border-style: none; + } +</style> +<table> + <tr><td></td><td></td></tr> + <tr><td></td><td id="target"></tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-remove-cell.html b/testing/web-platform/tests/css/css-tables/collapsed-border-remove-cell.html new file mode 100644 index 0000000000..2a84a63921 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-border-remove-cell.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Collapsed borders track changes caused by removal of cells</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> +<link rel="match" href="collapsed-border-remove-cell-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + table { + border-collapse: collapse; + } + td { + width: 100px; + height: 100px; + border: 1px solid black; + } +</style> +<table> + <tr><td></td><td></td></tr> + <tr><td></td><td id="target"></tr> +</table> +<script> + waitForAtLeastOneFrame().then(() => { + target.remove(); + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-tables/collapsed-scroll-overflow.html b/testing/web-platform/tests/css/css-tables/collapsed-scroll-overflow.html new file mode 100644 index 0000000000..fa3b5e55e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/collapsed-scroll-overflow.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6230"> +<style> + main table { + display: inline-table; + border-collapse: collapse; + background:gray; + font-size: 40px; + } + main thead { + background: yellow; + } + main tbody { + background: green; + border: 80px dotted blue; + } +</style> +<main> +<div id="container" style="overflow-x:auto;max-width:500px"> + <table> + <thead> + <td>header</td> + </thead> + <tbody> + <td>body body body body body body body body body body body</td> + </tbody> + </table> +</div> + +<script> + +test(_ => { + let container = document.querySelector("#container"); + let table = container.querySelector("table") + assert_equals(container.offsetWidth, 500, "The container grows to the max-width."); + assert_equals(table.offsetWidth, 500, "The table fills the container."); + assert_equals(container.scrollWidth, 500, "The collapsed border does not exceed the scroll container."); +}); +</script> diff --git a/testing/web-platform/tests/css/css-tables/colspan-001.html b/testing/web-platform/tests/css/css-tables/colspan-001.html new file mode 100644 index 0000000000..e6cb440366 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/colspan-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1430449"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>There should be five squares.</p> +<table cellspacing="0" cellpadding="0"> + <tr> + <td colspan="2" style="background:blue;" data-expected-width="75" data-expected-height="75"> + <div style="width:50px; height:75px;"></div> + </td> + <td colspan="2" style="background:green;" data-expected-width="75" data-expected-height="75"> + <div style="width:50px; height:75px;"></div> + </td> + </tr> + <tr> + <td style="background:black;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + <td colspan="2" style="background:lime;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + <td style="background:hotpink;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + </tr> +</table> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout('td') +</script> diff --git a/testing/web-platform/tests/css/css-tables/colspan-002.html b/testing/web-platform/tests/css/css-tables/colspan-002.html new file mode 100644 index 0000000000..144cbef485 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/colspan-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1430449"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>There should be five squares.</p> +<table cellspacing="0" cellpadding="0"> + <tr> + <td colspan="3" style="background:blue;" data-expected-width="75" data-expected-height="75"> + <div style="width:50px; height:75px;"></div> + </td> + <td colspan="3" style="background:green;" data-expected-width="75" data-expected-height="75"> + <div style="width:50px; height:75px;"></div> + </td> + </tr> + <tr> + <td style="background:black;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + <td colspan="4" style="background:lime;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + <td style="background:hotpink;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + </tr> +</table> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout('td') +</script> diff --git a/testing/web-platform/tests/css/css-tables/colspan-003.html b/testing/web-platform/tests/css/css-tables/colspan-003.html new file mode 100644 index 0000000000..58e02b9287 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/colspan-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1430449"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>There should be five squares.</p> +<table cellspacing="0" cellpadding="0"> + <tr> + <td colspan="10" style="background:blue;" data-expected-width="75" data-expected-height="75"> + <div style="width:50px; height:75px;"></div> + </td> + <td colspan="10" style="background:green;" data-expected-width="75" data-expected-height="75"> + <div style="width:50px; height:75px;"></div> + </td> + </tr> + <tr> + <td style="background:black;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + <td colspan="18" style="background:lime;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + <td style="background:hotpink;" data-expected-width="50" data-expected-height="50"> + <div style="width:50px; height:50px;"></div> + </td> + </tr> +</table> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout('td') +</script> diff --git a/testing/web-platform/tests/css/css-tables/colspan-004.html b/testing/web-platform/tests/css/css-tables/colspan-004.html new file mode 100644 index 0000000000..cbe7f96ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/colspan-004.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1430449"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <table style="margin-left:-5px; width:110px;" cellspacing="0" cellpadding="0"> + <tr> + <td colspan="2" style="width:100px;"></td> + <td colspan="2"></td> + </tr> + <tr> + <td style="width:5px;"></td> + <td colspan="2" style="background:green;"> + <div style="height:100px;"></div> + </td> + <td style="width:5px;"></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/column-track-merging.html b/testing/web-platform/tests/css/css-tables/column-track-merging.html new file mode 100644 index 0000000000..6dba9e6f60 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/column-track-merging.html @@ -0,0 +1,278 @@ +<!doctype html> +<title>Column track merging</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2" /> +<style> + +main table { + border: 10px solid gray; + border-spacing: 20px; +} + +main td { + width: 50px; + height:50px; + padding: 0; + background:linear-gradient(to right, yellow, orange); +} +main caption { + background: #EEE; +} +main .desc { + margin-top: 20px; + color: rgb(50,0,0); +} +main pre { + white-space: pre-wrap; + +} +</style> +<h3>Column merging investigation</h3> +<o>Empty columns is a column that has no originating cells</o> +<p><a href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2">Table standard</a> discusses this under "track merging".</p> +<ul> + <li>Do empty columns get coalesced?</li> + <li>How does this interact with table-layout:fixed, table width</li> + <li>Is there a difference between columns defined by COL, vs TD.colspan? Yes!</li> + <li>Do COLs with specified width get merged?</li> +</ul> +<p>Compatibility</p> +<li>Edge17 has a bug where width of a colspanned cell always includes cell width + width of border spacing. It should be max(cell width, border spacing)</li> +<li>Safari matches Chrome Legacy. TD-originated columns are always merged.</li> +<li>Firefox follows the standard, but has a few bugs.</li> +<main> + +<h3>TD merging</h3> + +<pre class="desc">Auto table, and TD.colspan=10 + FF/Chrome Legacy/Safari: Standard. Tracks merge. + Edge17: Tracks do not merge. Wide cell is 180px (9 * border spacing) +</pre> +<table id="td_auto" data-expected-width=180> +<caption>auto</caption> +<tr> + <td colspan=10 data-expected-width=50></td> + <td></td> +</tr> +<tr> + <td colspan=10></td> + <td></td> +</tr> +</table> + +<pre class="desc">Auto table(400px), and TD.colspan=10 + FF/Chrome Legacy/Safari/Edge17: Standard. Tracks merge. Colspan cell grows because it is unconstrained. +</pre> +<table id="td_auto_width" style="width:400px" data-expected-width=400> +<caption>auto 400px</caption> +<tr> + <td colspan=10 data-expected-width=270></td> + <td></td> +</tr> +<tr> + <td colspan=10></td> + <td></td> +</tr> +</table> + +<pre class="desc">Auto table(130px), and TD.colspan=10 + FF/Chrome Legacy/Safari: Standard. Tracks merge. Colspan cell shrinks to min width becuase it is unconstrained. + Edge17: Non-compliant, buggy. Wide cell too wide, narrow cell disappears. +</pre> +<table id="td_auto_width_130" style="width:130px" data-expected-width=130> +<caption>auto 130px</caption> +<tr> + <td colspan=10 data-expected-width=10><div style="width:10px"></div></td> + <td></td> +</tr> +<tr> + <td colspan=10></td> + <td></td> +</tr> +</table> + +<pre class="td_fixed">Fixed(400px) table, and TD.colspan=10 + Chrome/Safari: Non-compliant. Tracks merge. Cells are the same size, fixed algo distributes extra width evenly. + Firefox: Standard. + Edge17: Standard, buggy. Wide cell too wide. Edge's bug is that it computes max width as (width + border_spacing) instead of max(width, border_spacing). +</pre> +<table id="td_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400> +<caption>fixed 400px</caption> +<tr> + <td colspan=10 data-expected-width=180></td> + <td></td> +</tr> +<tr> + <td colspan=10></td> + <td></td> +</tr> +</table> + +<pre class="td_fixed">Fixed(130px) table, and TD.colspan=10 + Chrome/Safari: Non-compliant.Tracks merge, cells same size. + Firefox: Standard + buggy. Table does not grow. + Edge17: Standard + buggy. Wide cell too wide. +</pre> +<table id="td_fixed" style="table-layout:fixed; width: 130px" data-expected-width=310> +<caption>fixed 130px</caption> +<tr> + <td colspan=10 data-expected-width=180></td> + <td></td> +</tr> +<tr> + <td colspan=10></td> + <td></td> +</tr> +</table> + +<h3>COL merging. Same tests with COL span=10 replacing TD</h3> + +<pre class="desc">Auto table + FF/Chrome Legacy/Safari, Edge17: Standard. wide cell is 50px, tracks do merge. +</pre> +<table id="col_auto" data-expected-width=180> +<caption>auto</caption> +<col span=10> +<tr> + <td data-expected-width=50></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + +<pre class="desc">Auto table(400px) + FF/Chrome Legacy/Safari, Edge17: Standard. Both cells grow the same because unconstrained. +</pre> +<table id="col_auto_width" style="width:400px" data-expected-width=400> +<caption>auto 400px</caption> +<col span=10> +<tr> + <td data-expected-width=160></td> + <td></td> +</tr> +<tr> + <td ></td> + <td></td> +</tr> +</table> + +<pre class="desc">Auto table(130px) + FF/Chrome Legacy/Safari, Edge17: Standard. Both cells shrink. +</pre> +<table id="col_auto_width_130" style="width:130px" data-expected-width=130> +<caption>auto 130px</caption> +<col span=10> +<tr> + <td data-expected-width=28><div style="width:10px"></div></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + +<pre class="desc">Fixed(400px) table + Chrome/Safari,Firefox: Standard. + Edge17: Buggy. Fixed cells grow to fill table. +</pre> +<table id="col_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400> +<caption>fixed 400px</caption> +<col span=10> +<tr> + <td data-expected-width=50></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + +<pre class="td_fixed">Fixed(130px) table + Chrome/Safari: Standard, very buggy. Non-collapsed columns shrink to single border spacing. + Firefox: Standard. + Edge17: Non-compliant, collapses columns. +</pre> +<table id="col_fixed_130" style="table-layout:fixed; width: 130px" data-expected-width=340> +<col span=10> +<caption>fixed 130px</caption> +<tr> + <td data-expected-width=50></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + +<h3>COL merging when COL has specified width.</h3> + +<ul><li>Chrome Legacy/Edge17/Safari: non-compliant, merge COLs with specified widths. + <li>Firefox: Standard, unless COL width is 0px. Buggy, does not include border-spacing around columns.</ul> +<pre class="desc">Auto table, COL width 30px. + Chrome Legacy/Edge17/Safari: non-compliant, merge. + Firefox: Standard, buggy. does not include border-spacing around columns. +</pre> +<table id="col_auto" data-expected-width=580> +<caption>auto col 30px</caption> +<col span=10 style="width:30px"> +<tr> + <td data-expected-width=50></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + +<pre class="desc">Auto table, COL width 5%. + Chrome Legacy/Edge17/Safari: non-compliant, merge. + Firefox: Standard, buggy. does not include border-spacing around columns. +</pre> +<table id="col_auto" data-expected-width=640> +<caption>auto col 10%</caption> +<col span=5 style="width:10%"> +<tr> + <td data-expected-width=100></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + +<pre class="desc">Auto table, COL width 0px. + Everyone: merges COL +</pre> +<table id="col_auto" data-expected-width=180> +<caption>auto col 0px</caption> +<col span=10 style="width:0px"> +<tr> + <td data-expected-width=50></td> + <td></td> +</tr> +<tr> + <td></td> + <td></td> +</tr> +</table> + + +</main> +<script> + checkLayout("main table"); +</script> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/caption-with-multicol-table-cell.html b/testing/web-platform/tests/css/css-tables/crashtests/caption-with-multicol-table-cell.html new file mode 100644 index 0000000000..2228ad6936 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/caption-with-multicol-table-cell.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1177684"> +<table> + <caption> + <div style="columns:1; display:table-cell;"></div> + </caption> +</table> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/col_span_dynamic_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/col_span_dynamic_crash.html new file mode 100644 index 0000000000..67630066fa --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/col_span_dynamic_crash.html @@ -0,0 +1,21 @@ +<!doctype html> +<style> + col { + border:2px solid green; + } +</style> +<table style="border-collapse:collapse"> + <colgroup> + <col span=3 id="target"> + </colgroup> + <tbody> + <tr> + <td>a</td> + <td>b</td> + </tr> + </tbody> +</table> +<script> + document.body.offsetTop; + document.querySelector("#target").setAttribute("span", 0); +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/dialog-table-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/dialog-table-crash.html new file mode 100644 index 0000000000..decc3eb1fb --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/dialog-table-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1175425"> + +<div id="container" style="border-collapse:collapse;"> + <div id="insertBefore"></div> + <div style="display:table-row-group;"></div> + <div id="victim" style="border:solid; display:table-row-group;"> + <div style="display:table-cell;"></div> + </div> +</div> + +<script> + document.body.offsetTop; + container.insertBefore(insertBefore, victim) +</script> + diff --git a/testing/web-platform/tests/css/css-tables/crashtests/dynamic-recompute-baseline.html b/testing/web-platform/tests/css/css-tables/crashtests/dynamic-recompute-baseline.html new file mode 100644 index 0000000000..049de2f15c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/dynamic-recompute-baseline.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<table> + <caption id="target"></caption> + <td> + <div style="display: inline-block; height: 10%;"></div> + </td> + <td style="vertical-align: baseline;"></td> +</table> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/dynamic_col_width_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/dynamic_col_width_crash.html new file mode 100644 index 0000000000..e19c22be31 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/dynamic_col_width_crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<table rules="cols"> + <caption>caption</caption> + <col id="target" style="width:50%"/> + <tbody> + <tr></tr> + </tbody> + </table> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = 'auto'; +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/dynamic_table_layout_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/dynamic_table_layout_crash.html new file mode 100644 index 0000000000..cc28f3bfdc --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/dynamic_table_layout_crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<table id="target" style="border: solid; border-collapse: collapse; table-layout: fixed; width: 50px;"> + <tr><td style="background: lime;">hi</td></tr> + <td colspan=3>there</td> +</table> +<script> +document.body.offsetTop; +document.getElementById('target').style.tableLayout = 'auto'; +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/empty-tbody-after-tall-section-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/empty-tbody-after-tall-section-crash.html new file mode 100644 index 0000000000..b2d6e64254 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/empty-tbody-after-tall-section-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1326276"> +<table cellspacing="1"> + <caption style="border-bottom:1234567890px solid;"></caption> + <colgroup style="width:1px;"></colgroup> + <tbody></tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/empty_cells_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/empty_cells_crash.html new file mode 100644 index 0000000000..7635afc9e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/empty_cells_crash.html @@ -0,0 +1,17 @@ +<!doctype html> +<style> + table { + empty-cells: hide; + border-collapse: collapse; + } + td { + padding:0; + } +</style> + +<table> + <td></td> + <td colspan=2></td> + <td></td> +</table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/empty_table_with_cols.html b/testing/web-platform/tests/css/css-tables/crashtests/empty_table_with_cols.html new file mode 100644 index 0000000000..a2b817f85c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/empty_table_with_cols.html @@ -0,0 +1,3 @@ +<table style="border:1px solid black;border-collapse: collapse"> + <colgroup > + <tr></tr> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/expression_width_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/expression_width_crash.html new file mode 100644 index 0000000000..5c636bef6a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/expression_width_crash.html @@ -0,0 +1,5 @@ +<!doctype html> +<table > + <col style="width:min(100px,30%)"> + <td style="width:min(100px,30%)"></td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/inline-splitting-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/inline-splitting-crash.html new file mode 100644 index 0000000000..decc3eb1fb --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/inline-splitting-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1175425"> + +<div id="container" style="border-collapse:collapse;"> + <div id="insertBefore"></div> + <div style="display:table-row-group;"></div> + <div id="victim" style="border:solid; display:table-row-group;"> + <div style="display:table-cell;"></div> + </div> +</div> + +<script> + document.body.offsetTop; + container.insertBefore(insertBefore, victim) +</script> + diff --git a/testing/web-platform/tests/css/css-tables/crashtests/large-border-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/large-border-crash.html new file mode 100644 index 0000000000..b61ea7f046 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/large-border-crash.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1178044"> +<table border="2026722966"><td> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/large-col-widths.html b/testing/web-platform/tests/css/css-tables/crashtests/large-col-widths.html new file mode 100644 index 0000000000..666750c005 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/large-col-widths.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1294634"> +<table border style="border-collapse: collapse; width: 100000000px;"> + <col width="100000000px"></col> + <col width="100000000px"></col> + <col width="100000000px"></col> + <td></td> + <td style="border: solid 1px; border-left-width: 5px;" colspan="2"> + <div style="overflow: hidden; width: 100px;"></div> + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/legacy_ng_mix_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/legacy_ng_mix_crash.html new file mode 100644 index 0000000000..7e7377ef7e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/legacy_ng_mix_crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<p>PASS if no crash or DCHECK failure.</p> +<table id="elm" style="columns:2;"> + <colgroup style="column-count:2;"> +</table> +<script> + document.body.offsetTop; + elm.style.columns = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/move-oof-inside-section-row-with-borders.html b/testing/web-platform/tests/css/css-tables/crashtests/move-oof-inside-section-row-with-borders.html new file mode 100644 index 0000000000..f6fef22ea7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/move-oof-inside-section-row-with-borders.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289408"> +<div style="display:table; border-collapse:collapse;"> + <div style="display:table-row-group; border:solid; background:pink;"> + <div style="display:table-row; border:solid; background:pink;"> + <div style="position:relative;"> + <div id="elm" style="top:0; position:absolute;"></div> + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.top = "10px"; +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/negative-section-distribution.html b/testing/web-platform/tests/css/css-tables/crashtests/negative-section-distribution.html new file mode 100644 index 0000000000..b0cedcaf5a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/negative-section-distribution.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<div style="display: flex;"> + <button> + <div style="float: left; padding-top: 2147483648em;"></div> + </button> + <table> + <caption style="display: flex;"> + text<br>text + </caption> + <tbody></tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/negative_caption_margin.html b/testing/web-platform/tests/css/css-tables/crashtests/negative_caption_margin.html new file mode 100644 index 0000000000..cd3c4f4bf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/negative_caption_margin.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> + +<style> +*{ + overflow:scroll; + margin:-900% 3000000px; +} +</style> + +<table style="overflow:scroll;margin:-900% 3000000px;"> +<caption style="overflow:scroll;margin:-900% 3000000px;"> + diff --git a/testing/web-platform/tests/css/css-tables/crashtests/orthogonal-cell-borders.html b/testing/web-platform/tests/css/css-tables/crashtests/orthogonal-cell-borders.html new file mode 100644 index 0000000000..c48352a872 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/orthogonal-cell-borders.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1349181"> +<div style="display: table; border-collapse: collapse; table-layout: fixed; width: min-content;"> + <div style="display: table-cell; width: 100%; writing-mode: vertical-rl; border-left: 100px solid green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/orthogonal-cell-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/orthogonal-cell-crash.html new file mode 100644 index 0000000000..0f27d3eccd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/orthogonal-cell-crash.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1178130"> +<table> + <td style="height: 100%; writing-mode: vertical-rl;"></td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/table-column-display-change-chrome-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/table-column-display-change-chrome-crash.html new file mode 100644 index 0000000000..0845882955 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/table-column-display-change-chrome-crash.html @@ -0,0 +1,16 @@ +<!doctype html> +<link rel="help" href="https://crbug.com/1338779"> +<table id="table"> + <td> + <span id="span1"></span> + <div id="div"> + <span id="span2"></span> + </div> + </td> +</table> +<script> + document.body.offsetLeft; + div.style.color = "green"; + table.style.display = "table-column"; + span2.replaceWith(span1); +</script> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/textarea-intrinsic-size-crash.html b/testing/web-platform/tests/css/css-tables/crashtests/textarea-intrinsic-size-crash.html new file mode 100644 index 0000000000..e84f239987 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/textarea-intrinsic-size-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1195685"> +<div style="display: -webkit-box;"> + <div style="display: table-cell;"> + <textarea style="padding-left: 556658635%;"> + x diff --git a/testing/web-platform/tests/css/css-tables/crashtests/uninitialized_read_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/uninitialized_read_crash.html new file mode 100644 index 0000000000..5aa3b223cd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/uninitialized_read_crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1172819"> + +<table style="height:69080px;width:100px;background: blue;border-spacing:2px;"> + +<thead style="height:400%"> + <tr style="height:18px"></tr> +</thead> +<tbody> + <tr style="height: 2712px"></tr> +</tbody> +<tbody> + <tr style="height: 1694px"></tr> +</tbody> +<tbody> + <tr style="height: 6436px"></tr> +</tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/crashtests/vertical_percentage_crash.html b/testing/web-platform/tests/css/css-tables/crashtests/vertical_percentage_crash.html new file mode 100644 index 0000000000..73496da481 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/crashtests/vertical_percentage_crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://crbug.com/1203387"> + +<table style="writing-mode: vertical-lr"> + <caption style="background:yellow" > + <textarea style="height:10%">abc</textarea> + </caption> +</table> diff --git a/testing/web-platform/tests/css/css-tables/dynamic-rowspan-change.html b/testing/web-platform/tests/css/css-tables/dynamic-rowspan-change.html new file mode 100644 index 0000000000..c02f84b4a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/dynamic-rowspan-change.html @@ -0,0 +1,45 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element"> +<meta name="assert" content="Dynamic changes to rowspan/colspan relayout the table" /> +<style> + main table { + border-spacing:0; + } + main td { + background: green; + width:50px; + height:50px; + padding: 0; + } +</style> + +<main> + <table data-expected-width="100"> + <tr> + <td id="rowspan_target"></td> + </tr> + <tr> + <td></td> + </tr> + </table> +<br> + <table data-expected-width="150"> + <col style="width:50px"> + <col style="width:50px"> + <tr> + <td id="colspan_target"></td> + <td></td> + </tr> + </table> +</main> + +<script> + document.body.offsetTop; + document.querySelector("#rowspan_target").setAttribute("rowspan", "2"); + document.querySelector("#colspan_target").setAttribute("colspan", "2"); + checkLayout("main table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/dynamic-table-cell-height.html b/testing/web-platform/tests/css/css-tables/dynamic-table-cell-height.html new file mode 100644 index 0000000000..f6cd48e5ba --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/dynamic-table-cell-height.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://crbug.com/968016"> +<script src="/common/reftest-wait.js"></script> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: table-cell; background: red; height: 50px;"> + <div style="width: 100px; height: 100px; background: green; position: relative;"> + <div id="target" style="position: absolute; width: 10px; height: 10px;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = '10px'; +document.body.offsetTop; +takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-tables/empty-table-height.html b/testing/web-platform/tests/css/css-tables/empty-table-height.html new file mode 100644 index 0000000000..75f0e99b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/empty-table-height.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Empty tables still account for paddings / borders</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="min-height-table-ref.html"> +<style> +div { + display: table; + background-color: green; + border: 1px solid black; + padding: 155px; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-tables/fixed-layout-1.html b/testing/web-platform/tests/css/css-tables/fixed-layout-1.html new file mode 100644 index 0000000000..3e0d013af1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixed-layout-1.html @@ -0,0 +1,90 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution-in-fixed-mode"> +<main> + + <h1>Fixed Layout</h1> + <p>Checks whether fixed layout is implemented properly</p> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>Width is distributed equally between columns of auto size</p> + <x-table style="table-layout: fixed; width: 200px; border-spacing: 0px"> + <x-tr> + <x-td style="padding: 0; background: blue; height: 100px;"></x-td> + <x-td style="padding: 0"></x-td> + </x-tr> + </x-table> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>Width is distributed equally between columns of auto size (even if they are defined by rows other than the first)</p> + <x-table style="table-layout: fixed; width: 200px; border-spacing: 0px"> + <x-tr><x-td style="padding: 0; background: blue; height: 100px;"></x-td></x-tr> + <x-tr><x-td style="padding: 0; height: 0px"></x-td><x-td style="padding: 0"></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>Widths defined on cells that are not the first row are ignored</p> + <x-table style="table-layout: fixed; width: 200px; border-spacing: 0px"> + <x-tr><x-td style="padding: 0; background: blue; height: 100px;"></x-td></x-tr> + <x-tr><x-td style="padding: 0; height: 0px; width: 200px;"></x-td><x-td style="padding: 0; width: 200px;"></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>The table has to grow to contain the widths defined for its columns</p> + <x-table style="table-layout: fixed; width: 50px; border-spacing: 0px"> + <x-tr><x-td style="padding: 0; background: blue; height: 100px; width: 100px;"></x-td></x-tr> + <x-tr><x-td style="padding: 0; height: 0px"></x-td><x-td style="padding: 0"></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>The first row is based on the visual order, not the dom order</p> + <x-table style="table-layout: fixed; width: 100px; border-spacing: 0px"> + <x-tr><x-td style="padding: 0; height: 0px"></x-td><x-td style="padding: 0"></x-td></x-tr> + <x-thead><x-tr><x-td style="padding: 0; background: blue; height: 100px; width: 100px;"></x-td></x-tr></x-thead> + </x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + generate_tests(assert_equals, [ + [ + "Table-layout:fixed distributes width equally to all auto-columns", + document.querySelector("x-table:nth-of-type(1) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + [ + "Table-layout:fixed deals with columns generated by subsequent rows", + document.querySelector("x-table:nth-of-type(2) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + [ + "Table-layout:fixed ignores sizes specified by subsequent rows", + document.querySelector("x-table:nth-of-type(3) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + [ + "Table-layout:fixed grows the table if needed for minimum-width", + document.querySelector("x-table:nth-of-type(4) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + [ + "Table-layout:fixed takes visual order into account, not dom order", + document.querySelector("x-table:nth-of-type(5) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixed-layout-2.html b/testing/web-platform/tests/css/css-tables/fixed-layout-2.html new file mode 100644 index 0000000000..dcbabb1ff7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixed-layout-2.html @@ -0,0 +1,84 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#in-fixed-mode"> +<main> + + <h1>Fixed Layout</h1> + <p>Checks whether fixed layout is implemented properly (width is not definite)</p> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>Table-layout:fixed does not apply to width:auto tables</p> + <x-table style="table-layout: fixed; border-spacing: 0px"> + <x-tr> + <x-td style="padding: 0; background: blue; height: 100px;"><div style="width: 100px"></div></x-td> + <x-td style="padding: 0"></x-td> + </x-tr> + </x-table> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>Table-layout:fixed does not apply to width:max-content tables</p> + <x-table style="table-layout: fixed; width: max-content; border-spacing: 0px"> + <x-tr> + <x-td style="padding: 0; background: blue; height: 100px;"><div style="width: 100px"></div></x-td> + <x-td style="padding: 0"></x-td> + </x-tr> + </x-table> + + <hr/> + <p>This should be a 100px-wide blue square:</p> + <p>Table-layout:fixed does apply to width:min-content/fit-content tables</p> + <x-table style="table-layout: fixed; width: fit-content; border-spacing: 0px"> + <x-tr> + <x-td style="padding: 0; background: blue; height: 50px;"><div style="width: 100px"></div></x-td> + <x-td style="padding: 0"></x-td> + </x-tr> + </x-table> + <x-table style="table-layout: fixed; width: min-content; border-spacing: 0px"> + <x-tr> + <x-td style="padding: 0; background: blue; height: 50px;width:100px;"><div style="width: 100px"></div></x-td> + <x-td style="padding: 0;height:50px"><div style="width: 100px"></div></x-td> + </x-tr> + </x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + generate_tests(assert_equals, [ + [ + "Table-layout:fixed is not applied when width is auto", + document.querySelector("x-table:nth-of-type(1) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + [ + "Table-layout:fixed reports fixed when width is auto", + getComputedStyle(document.querySelector("x-table:nth-of-type(1)")).tableLayout, + 'fixed' + ], + [ + "Table-layout:fixed is not applied when width is max-content", + document.querySelector("x-table:nth-of-type(2) > x-tr:first-child > x-td:first-child").offsetWidth, + 100 + ], + [ + "Table-layout:fixed reports fixed when width is max-content", + getComputedStyle(document.querySelector("x-table:nth-of-type(2)")).tableLayout, + 'fixed' + ], + [ + "Table-layout:fixed is applied when width is min-content", + document.querySelector("x-table:nth-of-type(3) > x-tr:first-child > x-td:first-child").offsetWidth, + document.querySelector("x-table:nth-of-type(4) > x-tr:first-child > x-td:first-child").offsetWidth + ] + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixed-layout-calc-width-001.html b/testing/web-platform/tests/css/css-tables/fixed-layout-calc-width-001.html new file mode 100644 index 0000000000..ac6f9fc1a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixed-layout-calc-width-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/94"> + +<style> +table { + width: 200px; + border-collapse: collapse; + table-layout: fixed; + height: 20px; +} + +td { + padding: 0px; + background: lime; + outline: 1px solid blue; +} +</style> + +<h2>Calc width on col is treated as auto, even in fixed tables</h2> + +<table id=theTable> + <col style="width:calc(20% + 80px)"> + <tr> + <td data-expected-width=100></td> + <td data-expected-width=100></td> + </tr> +</table> + +<script> +checkLayout('#theTable') +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixed-layout-excess-width-distribution-001.html b/testing/web-platform/tests/css/css-tables/fixed-layout-excess-width-distribution-001.html new file mode 100644 index 0000000000..6abf07eda0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixed-layout-excess-width-distribution-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns"> + +<style> +table { + width: 300px; + border-collapse: collapse; + table-layout: fixed; + height: 20px; +} + +td { + padding: 0px; + background: lime; + outline: 1px solid blue; +} + +td:nth-child(1) { width: 20px; } +td:nth-child(2) { width: 10px; } +td:nth-child(3) { width: 10%; } +</style> + +<h2>Fixed layout tables with excess width and no auto columns</h2> + +FF/Edge give excess only to fixed columns, in proportion to their relative +widths. This is what the spec dictates. +<br>Chrome (62) gives excess to ALL columns, in proportion to their +contribution to total width. +<table id=theTable> + <tr> + <td data-expected-width=180></td> + <td data-expected-width=90></td> + <td data-expected-width=30></td> + </tr> +</table> + +<script> +checkLayout('#theTable') +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-001.html b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-001.html new file mode 100644 index 0000000000..9bf7b4c578 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS Test: CSS Tables fixup merge anonymous inline table siblings (row-group + row-group)</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#fixup-algorithm"> +<style> + .group { + display: table-row-group; + } + .cell { + display: table-cell; + } + .filler { + width: 100px; + height: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<span> + <span class="group"> + <span class="cell"> + <div class="filler"></div> + </span> + </span> + <span id="rm">Remove me</span> + <span class="group"> + <span class="cell"> + <div class="filler"></div> + </span> + </span> +</span> +<script> + rm.offsetTop; + rm.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-002.html b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-002.html new file mode 100644 index 0000000000..9f3a2ff21e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Test: CSS Tables fixup merge anonymous inline table siblings (cell + row)</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#fixup-algorithm"> +<style> + .row { + display: table-row; + } + .cell { + display: table-cell; + } + .filler { + width: 100px; + height: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<span> + <span class="cell"> + <div class="filler"></div> + </span> + <span id="rm">Remove me</span> + <span class="row"> + <span class="cell"> + <div class="filler"></div> + </span> + </span> +</span> +<script> + rm.offsetTop; + rm.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-003.html b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-003.html new file mode 100644 index 0000000000..42b7f9a025 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-inline-table-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Test: CSS Tables fixup merge anonymous inline table siblings (cell + cell)</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#fixup-algorithm"> +<style> + .cell { + display: table-cell; + } + .filler { + width: 50px; + height: 100px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="width:100px"> + <span> + <span class="cell"> + <div class="filler"></div> + </span> + <span id="rm">Remove me</span> + <span class="cell"> + <div class="filler"></div> + </span> + </span> +</div> +<script> + rm.offsetTop; + rm.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-table-001.html b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-table-001.html new file mode 100644 index 0000000000..d9dbc511a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fixup-dynamic-anonymous-table-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Test: CSS Tables fixup merge anonymous table siblings (cell + cell)</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#fixup-algorithm"> +<style> + .cell { + display: table-cell; + width: 50px; + height: 100px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div> + <span class="cell"></span> + <span id="rm">Remove me</span> + <span class="cell"></span> +</div> +<script> + rm.offsetTop; + rm.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-tables/floats/floats-wrap-bfc-006b-ref.xht b/testing/web-platform/tests/css/css-tables/floats/floats-wrap-bfc-006b-ref.xht new file mode 100644 index 0000000000..93cdd3e51c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/floats/floats-wrap-bfc-006b-ref.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + body { font-size: 16px; } + + table { margin: 0; border-spacing: 0; } + caption, td, th { padding: 0; vertical-align: top; text-align: left; } + + .capref { background: yellow; } + .tabref { background: purple; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + + <div style="float: right; width: 192px; height: 30px; margin-right: 3px;"><div style="display: inline-block; vertical-align: top; height: 30px; width: 90px;" class="capref">Caption</div><div style="display: inline-block; vertical-align: top; height: 30px; width: 102px;" class="tabref">Cell</div></div> + + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> +</td></tr></tbody></table> + + + +</body></html> diff --git a/testing/web-platform/tests/css/css-tables/floats/floats-wrap-bfc-006c-ref.xht b/testing/web-platform/tests/css/css-tables/floats/floats-wrap-bfc-006c-ref.xht new file mode 100644 index 0000000000..7482203845 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/floats/floats-wrap-bfc-006c-ref.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + body { font-size: 16px; } + + table { margin: 0; border-spacing: 0; } + caption, td, th { padding: 0; vertical-align: top; text-align: left; } + + .capref { background: yellow; } + .tabref { background: purple; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + + <div style="float: right; width: 192px; height: 30px; margin-right: 3px;"><div style="display: inline-block; vertical-align: top; height: 30px; width: 102px;" class="tabref">Cell</div><div style="display: inline-block; vertical-align: top; height: 30px; width: 90px;" class="capref">Caption</div></div> + + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> +</td></tr></tbody></table> + + + +</body></html> diff --git a/testing/web-platform/tests/css/css-tables/fractional-percent-width.html b/testing/web-platform/tests/css/css-tables/fractional-percent-width.html new file mode 100644 index 0000000000..cd032ebcc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/fractional-percent-width.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="Jihwan Marc Kim" href="mailto:bluewhale.marc@gmail.com" /> +<link rel="help" href="https://crbug.com/1283025" /> +<meta name="flags" content="" /> +<meta name="assert" content="percent lengths of fractional td width should rendered correctly" /> +<style> + main div { + position: relative; + border: 1px solid black; + width: 400px; + } + .cell { + background-color: skyblue; + height: 20px; + } +</style> +<p> + Tests that percent lengths of fractional td width should rendered correctly + even it is smaller than 1. +</p> + +<hr /> +<output id="log"></output> +<main> + <div> + <table width="100%"> + <tbody> + <tr> + <td class="cell" width="0.5%" data-expected-client-width="2"></td> + <td>0.5%</td> + </tr> + </tbody> + </table> + <table width="100%"> + <tbody> + <tr> + <td class="cell" width="1%" data-expected-client-width="4"></td> + <td>1%</td> + </tr> + </tbody> + </table> + <table width="100%"> + <tbody> + <tr> + <td class="cell" width="5%" data-expected-client-width="20"></td> + <td>5%</td> + </tr> + </tbody> + </table> + </div> +</main> +<script> + checkLayout(".cell"); +</script> + diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/computing-row-measure-0.html b/testing/web-platform/tests/css/css-tables/height-distribution/computing-row-measure-0.html new file mode 100644 index 0000000000..ebaab2c359 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/computing-row-measure-0.html @@ -0,0 +1,71 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> +<main> + <h4>"Computing row measures"</h4> + <p>This is testing that the table root's minimum is max(table-root width, capmin, gridmin) <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec Text</a></p> + + <hr/> + <table id="one" cellspacing="0" cellpadding="0"> + <tbody style="height: 1px;"> + <tr style="height: 10px;"> + <td style="height: 1px;"></td> + </tr> + </tbody> + </table> + + <table id="two" cellspacing="0" cellpadding="0"> + <tbody style="height: 10px;"> + <tr style="height: 1px;"> + <td style="height: 1px;"></td> + </tr> + </tbody> + </table> + + <table id="three" cellspacing="0" cellpadding="0"> + <tbody style="height: 1px;"> + <tr style="height: 1px;"> + <td style="height: 10px;"></td> + </tr> + </tbody> + </table> + + <table id="four" cellspacing="0" cellpadding="0"> + <tbody style="height: 10px;"> + <tr> + <td style="height: 1px;"></td> + </tr> + </tbody> + </table> +</main> + +<script> + var i = 1; + generate_tests(assert_equals, [ + [ + "Checking intermediate min-content height for span 1 (1)", + document.getElementById('one').offsetHeight, + 10 + ], + [ + "Checking intermediate min-content height for span 1 (2)", + document.getElementById('two').offsetHeight, + 10 + ], + [ + "Checking intermediate min-content height for span 1 (3)", + document.getElementById('three').offsetHeight, + 10 + ], + [ + "Checking intermediate min-content height for span 1 (4)", + document.getElementById('four').offsetHeight, + 10 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/computing-row-measure-1.html b/testing/web-platform/tests/css/css-tables/height-distribution/computing-row-measure-1.html new file mode 100644 index 0000000000..756e730eef --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/computing-row-measure-1.html @@ -0,0 +1,94 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> +<main> + <h1>Width Distribution</h1> + <h4>"Computing column measures"</h4> + <p>This is testing intermediate min-content width for span 2</p> + + <hr/> + <table cellspacing="0" cellpadding="0"> + <colgroup style="width: auto;"> + <col style="width: 10px;"></col> + <col style="width: 20px;"></col> + </colgroup> + <tr> + <td id="one" style="width: 1px;"></td> + <td style="width: 2px;"></td> + </tr> + <tr> + <td colspan="2" style="width: 51px;"></td> + </tr> + </table> + + <table cellspacing="0" cellpadding="0"> + <colgroup style="width: auto;"> + <col style="width: 10px;"></col> + <col style="width: auto;"></col> + </colgroup> + <tr> + <td id="two" style="width: 1px;"></td> + <td style="width: auto;"></td> + </tr> + <tr> + <td colspan="2" style="width: 51px;"></td> + </tr> + </table> + + <table cellspacing="0" cellpadding="0"> + <colgroup style="width: 51px;"> + <col style="width: 10px;"></col> + <col style="width: 20px;"></col> + </colgroup> + <tr> + <td id="three" style="width: 1px;"></td> + <td style="width: 2px;"></td> + </tr> + </table> + + <table cellspacing="0" cellpadding="0"> + <colgroup style="width: 51px;"> + <col style="width: 20px;"></col> + <col style="width: auto;"></col> + </colgroup> + <tr> + <td style="width: 10px;"></td> + <td id="four" style="width: 20px;"></td> + </tr> + </table> +</main> + +<style> + table { margin-bottom: 10px; height: 50px; } + td { outline: 1px solid red; outline-offset: -1px; } +</style> +<script> + var i = 1; + generate_tests(assert_equals, [ + [ + "Checking intermediate min-content width for span 2 (1)", + document.getElementById('one').offsetWidth, + 17 + ], + [ + "Checking intermediate min-content width for span 2 (2)", + document.getElementById('two').offsetWidth, + 10 + ], + [ + "Checking intermediate min-content width for span 2 (3)", + document.getElementById('three').offsetWidth, + 10 + ], + [ + "Checking intermediate min-content width for span 2 (4)", + document.getElementById('four').offsetWidth, + 51 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-001.html b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-001.html new file mode 100644 index 0000000000..387bfafae1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=708345" /> +<meta name="assert" content="height of rows in thead are increased to match table height" /> +<title> +all row groups receive extra height distribution +</title> + +<style> +table { + background: green; + border-collapse:collapse; +} + +td { + padding:0px; +} + +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<table style="height:100px"> + <thead> + <tr> + <td><div style="display:inline-block; width:100px;"> + </div></td> + </tr> + </thead> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-002.html b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-002.html new file mode 100644 index 0000000000..6a0589d3b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=708345" /> +<meta name="assert" content="height of rows in tbody are increased to match table height" /> +<title> +all row groups receive extra height distribution +</title> + +<style> +table { + background: green; + border-collapse:collapse; +} + +td { + padding:0px; +} + +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<table style="height:100px"> + <tbody> + <tr> + <td><div style="display:inline-block; width:100px;"> + </div></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-003.html b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-003.html new file mode 100644 index 0000000000..7970f95d0e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=708345" /> +<meta name="assert" content="All rows of equal intrinsic height should be increased the same amount, regardless of which group they are in, tbody+tbody case" /> +<title> +all row groups receive extra height distribution +</title> + +<style> +table { + border-collapse: collapse; +} + +td { + padding: 0px; +} + +td div { + width: 100px; + height:10px; +} + +tbody { + outline: 2px solid lightblue; +} + +</style> + +<table id="theTable" style="height:100px"> + <tbody data-expected-height=50> + <tr> + <td><div></div></td> + </tr> + </tbody> + <tbody data-expected-height=50> + <tr> + <td><div></div></td> + </tr> + </tbody> +</table> + +<script> +checkLayout('#theTable') +</script> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-004.html b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-004.html new file mode 100644 index 0000000000..8ca86957c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-004.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=708345" /> +<meta name="assert" content="All rows of equal intrinsic height should be increased the same amount, regardless of which group they are in, thead+tbody case" /> +<title> +all row groups receive extra height distribution +</title> + +<style> +table { + border-collapse: collapse; +} + +td { + padding: 0px; +} + +td div { + width: 100px; + height:10px; +} + +thead, tbody { + outline: 2px solid lightblue; +} + +</style> + +<table id="theTable" style="height:100px"> + <thead data-expected-height=50> + <tr> + <td><div></div></td> + </tr> + </thead> + <tbody data-expected-height=50> + <tr> + <td><div></div></td> + </tr> + </tbody> +</table> + +<script> +checkLayout('#theTable') +</script> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-005.html b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-005.html new file mode 100644 index 0000000000..381d775e89 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=708345" /> +<meta name="assert" content="height of rows in tfoot are increased to match table height" /> +<title> +all row groups receive extra height distribution +</title> + +<style> +table { + background: green; + border-collapse:collapse; +} + +td { + padding:0px; +} + +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<table style="height:100px"> + <tfoot> + <tr> + <td><div style="display:inline-block; width:100px;"> + </div></td> + </tr> + </tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-007-ref.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-007-ref.html new file mode 100644 index 0000000000..cdd6e7c906 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-007-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<table> + <td> + <div style="width: 100px; height: 100px; overflow-y: scroll;"> + <div style="height: 200px; background: green;"></div> + </div> + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-007.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-007.html new file mode 100644 index 0000000000..371333a24d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-007.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227868"> +<link rel="match" href="percentage-sizing-of-table-cell-007-ref.html"> +<table style="height: 100%;"> + <td> + <div style="width: 100px; min-height: 100px; height: 100%; overflow-y: scroll;"> + <div style="height: 200px; background: green;"></div> + </div> + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-002-ref.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-002-ref.html new file mode 100644 index 0000000000..f2ed9e15dd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference: Percentage sizing of table cell children with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.table { + display: block; + border: solid 5px black; + width: 150px; + height: 100px; +} + +.td { + background: cyan; + overflow: scroll; + padding: 5px 15px 10px 20px; + border: solid magenta; + border-width: 12px 9px 6px 3px; + height: 100px; + box-sizing: border-box; +} + +.child { + background: yellow; + width: 100%; + height: 100%; +} +</style> +<link rel="stylesheet" type="text/css" href="support/scrollbars.css"> + +<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="table"> + <div class="td"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-002.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-002.html new file mode 100644 index 0000000000..19b02b2031 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Table Test: Percentage sizing of table cell children with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#content-measure"> +<link rel="match" href="percentage-sizing-of-table-cell-children-002-ref.html"> +<meta name="assert" content="Checks that table cell children resolve properly their percentage sizes, even when the table cell has margin, border, padding and scrollbar."> +<style> +.table { + display: table; + border: solid 5px black; + width: 150px; + height: 100px; +} + +.td { + display: table-cell; + background: cyan; + overflow: scroll; + padding: 5px 15px 10px 20px; + border: solid magenta; + border-width: 12px 9px 6px 3px; +} + +.child { + background: yellow; + width: 100%; + height: 100%; +} +</style> +<link rel="stylesheet" type="text/css" href="support/scrollbars.css"> + +<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="table"> + <div class="td"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-003.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-003.html new file mode 100644 index 0000000000..1198e6f649 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-003.html @@ -0,0 +1,37 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/982312" /> +<meta name="assert" content="min-height is honored on a %height child of a table cell with an unresolvable %height and when the descendant has overflow:auto" /> + +<title>table cell percent height descendant with overflow:auto</title> + +<!-- msft.html --> + +<style> +.list-div { + overflow-y: auto; + height: 100%; + width: 100px; + min-height: 100px; + background: green; +} +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<div style="display:table"> + <div style="display:table-cell; height:100%"> + <div class="list-div"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-004.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-004.html new file mode 100644 index 0000000000..ffbb4b008a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-004.html @@ -0,0 +1,37 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/982312" /> +<meta name="assert" content="%height child of a table cell with a fixed height is positioned correctly when the min-height is greater than the cell's fixed height and when the descendant has overflow:auto." /> + +<title>table cell percent height descendant with overflow:auto</title> + +<!-- msft_fixed_height.html --> + +<style> +.list-div { + overflow-y: auto; + height: 100%; + width: 100px; + min-height: 100px; + background: green; +} +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<div style="display:table"> + <div style="display:table-cell; height:50px"> + <div class="list-div"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-005.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-005.html new file mode 100644 index 0000000000..0a0e658bd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-005.html @@ -0,0 +1,40 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/982312" /> +<meta name="assert" content="intrinsic height of a table cell descendant is honored when the descendant and cell both have unresolvable percentage heights and when the descendant has overflow:auto" /> + +<title>table cell percent height descendant with overflow:auto</title> + +<!-- other_msft.html --> + +<style> +.list-div { + overflow-y: auto; + height: 100%; +} +.list-div-child { + width: 100px; + height: 100px; + background: green; +} +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<div style="display:table"> + <div style="display:table-cell; height:100%"> + <div class="list-div"> + <div class="list-div-child"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-006.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-006.html new file mode 100644 index 0000000000..de3ac019b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children-006.html @@ -0,0 +1,38 @@ +<!doctype html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://crbug.com/982312" /> +<meta name="assert" content="table cell descendant retains its min-height when the descendant and cell both have unresolvable percentage heights and the descendant has overflow:auto, and the cell's sibling has a fixed height greater than the descendant's min-height." /> + +<title>table cell percent height descendant with overflow:auto</title> + +<!-- msftsibling.html --> + +<style> +.list-div { + overflow-y: auto; + height: 100%; + width: 100px; + min-height: 100px; + background: green; +} +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<div style="display:table"> + <!-- vertical-align:top because blink and ff do baseline differently here --> + <div style="display:table-cell; height:100%; vertical-align:top;"> + <div class="list-div"></div> + </div> + <div style="display:table-cell; height:150px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children.html new file mode 100644 index 0000000000..1029581022 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children.html @@ -0,0 +1,199 @@ +<!doctype html> +<!---------------------------------------------------------------------------------------> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> +<script> + + function assertOffsetWidthEquals(a,targetValue) { + var desc = document.querySelector('main > hr:last-of-type + p + p') || document.querySelectorAll('main > hr + p + p')[document.querySelectorAll('main > hr + p + p').length-1]; + var root = document.querySelector('main > div:last-of-type') || document.querySelectorAll('main > div')[document.querySelectorAll('main > div').length-1]; + generate_tests(assert_equals, [ + [ + desc.textContent, + root.querySelector("[target="+a+"]").offsetWidth, + targetValue + ] + ]); + } + + function assertOffsetHeightEquals(a,targetValue) { + var desc = document.querySelector('main > hr:last-of-type + p + p') || document.querySelectorAll('main > hr + p + p')[document.querySelectorAll('main > hr + p + p').length-1]; + var root = document.querySelector('main > div:last-of-type') || document.querySelectorAll('main > div')[document.querySelectorAll('main > div').length-1]; + generate_tests(assert_equals, [ + [ + desc.textContent, + root.querySelector("[target="+a+"]").offsetHeight, + targetValue + ] + ]); + } + +</script> + + +<main> + + <h1>Height distribution</h1> + <p>Check that percentages are accounted for correctly for table-cell children</p> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Percentages resolve based on the column width</p> + <div> + <x-table style="width: 100px; height: 100px;"> + <x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue"></div></x-td></x-tr> + </x-table> + </div> + <script> + + assertOffsetWidthEquals('a',100); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Percentages resolve based on the row height</p> + <div> + <x-table style="width: 100px; height: 100px;"> + <x-tr><x-td><div target=a style="width: 100px; height: 100%; background: blue"></div></x-td></x-tr> + </x-table> + </div> + <script> + + assertOffsetHeightEquals('a',100); + + </script> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Percentages resolve based on the final column width</p> + <div> + <x-table style="width: 0px; height: 100px; background: red;"> + <x-tr><x-td style="width:0px;height:0px;"><div target=a style="width: 100%; height: 100px; background: blue"></div></x-td></x-tr> + <x-tr><x-td style="width:0px;height:0px;"><div target=a style="width: 100px; height: 0px"></div></x-td></x-tr> + </x-table> + </div> + <script> + + assertOffsetWidthEquals('a',100); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Percentages resolve based on the final row height</p> + <div> + <x-table style="width: 100px; height: 0px; background: red;"> + <x-tr> + <x-td style="width: 0px; height: 0px;"><div target=a style="width: 100px; height: 100%; background: blue"></div></x-td> + <x-td style="width: 0px; height: 0px;"><div target=a style="width: 0px; height: 100px; background: red"></div></x-td> + </x-tr> + </x-table> + </div> + <script> + + assertOffsetHeightEquals('a',100); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a blue and cyan rectangles of the same width:</p> + <p>Unresolvable percentage widths are resolved as auto in first pass (replaced elements)</p> + <div> + <x-table style="width: 0px; height: 18px; background: red;"> + <x-tr><x-td><input target=a style="width: 100%; height: 100%; background: blue; vertical-align: top; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"/></x-td></x-tr> + </x-table> + <input style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;" /> + </div> + <script> + + assertOffsetWidthEquals('a',document.querySelector('input[style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"]').offsetWidth); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a blue and cyan rectangles below of the same height:</p> + <p>Unresolvable percentage heights are resolved as auto in first pass (replaced elements)</p> + <div> + <x-table style="width: auto; height: 0px; background: red;"> + <x-tr><x-td><input target=a style="width: 100%; height: 100%; background: blue; vertical-align: top; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"/></x-td></x-tr> + </x-table> + <input style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;" /> + </div> + <script> + + assertOffsetHeightEquals('a',document.querySelector('input[style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"]').offsetHeight); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Unresolvable percentage widths are resolved as auto in first pass (unscrollable overflow)</p> + <div> + <x-table style="width: 0px; height: 100px; background: red;"> + <x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue; overflow: hidden;"><div target=a style="width: 100px; height: 0px"></div></div></x-td></x-tr> + </x-table> + </div> + <script> + + assertOffsetWidthEquals('a',100); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Unresolvable percentage heights are resolved as auto in first pass (unscrollable overflow)</p> + <div> + <x-table style="width: 100px; height: 0px; background: red;"> + <x-tr> + <x-td><div target=a style="width: 100px; height: 100%; background: blue; overflow: hidden;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td> + </x-tr> + </x-table> + </div> + <script> + + assertOffsetHeightEquals('a',100); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Unresolvable percentage widths are resolved as auto in first pass (scrollable overflow)</p> + <div> + <x-table style="width: 0px; height: 100px; background: red;"> + <x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue; overflow: auto;"><div target=a style="width: 100px; height: 0px"></div></div></x-td></x-tr> + </x-table> + </div> + <script> + + assertOffsetWidthEquals('a',100); + + </script> + + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>There should be a 100px blue square below:</p> + <p>Unresolvable percentage heights are resolved as 0px in first pass (scrollable overflow)</p> + <div> + <x-table style="width: 100px; height: 100px; background: red;"> + <x-tr><x-td><div target=a style="width: 100px; height: 100%; background: red; overflow: auto;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td></x-tr> + <x-tr><x-td><div style="width: 100px; height: 100%; background: blue; overflow: hidden;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td></x-tr> + </x-table> + </div> + <script> + + assertOffsetHeightEquals('a',0); + + </script> + +</main> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-ref.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-ref.html new file mode 100644 index 0000000000..a696e56b4c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reftest Reference: Percentage sizing of table cell children with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.table { + display: block; + border: solid 5px black; + width: 150px; + height: 100px; +} + +.td { + background: cyan; + overflow: scroll; + padding: 5px 15px 10px 20px; + border: solid magenta; + border-width: 12px 9px 6px 3px; + height: 100px; + box-sizing: border-box; +} + +img { + display: block; + background: yellow; + width: 100%; + height: 100%; +} +</style> +<link rel="stylesheet" type="text/css" href="support/scrollbars.css"> + +<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="table"> + <div class="td"> + <img /> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html new file mode 100644 index 0000000000..bd2de2d2dd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Table Test: Percentage sizing of table cell replaced children with margin, border, padding and scrollbar</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#content-measure"> +<link rel="match" href="percentage-sizing-of-table-cell-replaced-children-001-ref.html"> +<meta name="assert" content="Checks that table cell replaced children resolve properly their percentage sizes, even when the table cell has margin, border, padding and scrollbar."> +<style> +.table { + display: table; + border: solid 5px black; + width: 150px; + height: 100px; +} + +.td { + display: table-cell; + background: cyan; + overflow: scroll; + padding: 5px 15px 10px 20px; + border: solid magenta; + border-width: 12px 9px 6px 3px; +} + +img { + display: block; + background: yellow; + width: 100%; + height: 100%; +} +</style> +<link rel="stylesheet" type="text/css" href="support/scrollbars.css"> + +<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p> + +<div class="table"> + <div class="td"> + <img /> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/support/scrollbars.css b/testing/web-platform/tests/css/css-tables/height-distribution/support/scrollbars.css new file mode 100644 index 0000000000..7a6944e169 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/support/scrollbars.css @@ -0,0 +1,10 @@ +/* This makes the scrollbars visible on mac, both to humans and screenshots.*/ + +::-webkit-scrollbar { + -webkit-appearance: none; +} + +::-webkit-scrollbar-track { + background-color: #eee; + border-radius: 8px; +} diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-ref.html b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-ref.html new file mode 100644 index 0000000000..02f0f54c3f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +Passes if there is an unbroken rectangular border. +<style>td { width: 20px; height: 20px; padding: 2px }</style> +<table style="position: absolute; top: 30.3px; border: 2px solid black; border-collapse: collapse"> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-vertical-rl-ref.html b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-vertical-rl-ref.html new file mode 100644 index 0000000000..9784962be4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-vertical-rl-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +Passes if there is an unbroken rectangular border. +<style>td { width: 20px; height: 20px; padding: 2px }</style> +<table style="position: absolute; top: 30.3px; border: 2px solid black; + border-collapse: collapse; writing-mode: vertical-rl"> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-vertical-rl.html b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-vertical-rl.html new file mode 100644 index 0000000000..48edbde281 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row-vertical-rl.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="match" href="td-different-subpixel-padding-in-same-row-vertical-rl-ref.html"> +Passes if there is an unbroken rectangular border. +<style>td { width: 20px; height: 20px }</style> +<table style="position: absolute; top: 30.3px; border: 2px solid black; + border-collapse: collapse; writing-mode: vertical-rl"> + <tr> + <td style="padding: 2px 1px"></td> + <td style="padding: 2px 1.2px"></td> + <td style="padding: 2px 1.5px"></td> + <td style="padding: 2px 1.7px"></td> + <td style="padding: 2px"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row.html b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row.html new file mode 100644 index 0000000000..a7fe908e0d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/height-distribution/td-different-subpixel-padding-in-same-row.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#height-distribution-algorithm"> +<link rel="match" href="td-different-subpixel-padding-in-same-row-ref.html"> +Passes if there is an unbroken rectangular border. +<style>td { width: 20px; height: 20px }</style> +<table style="position: absolute; top: 30.3px; border: 2px solid black; border-collapse: collapse"> + <tr> + <td style="padding: 1px 2px"></td> + <td style="padding: 1.2px 2px"></td> + <td style="padding: 1.5px 2px"></td> + <td style="padding: 1.7px 2px"></td> + <td style="padding: 2px"></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/html-display-table-ref.html b/testing/web-platform/tests/css/css-tables/html-display-table-ref.html new file mode 100644 index 0000000000..7437732cb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html-display-table-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + html { + width: 280px; + border: 10px solid green; + padding: 0; + margin: auto; + } + body { + padding: 0; + margin: 0; + } +</style> +<div style="width:280px;height:300px;background:yellow;display:inline-block;"></div> diff --git a/testing/web-platform/tests/css/css-tables/html-display-table.html b/testing/web-platform/tests/css/css-tables/html-display-table.html new file mode 100644 index 0000000000..394b853dff --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html-display-table.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title><html display:table></title> +<link rel="author" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<meta name="assert" content="<html display:table> does not fill the viewport"> +<link rel="match" href="html-display-table-ref.html"> +<style> + html { + display: table; + border: 10px solid green; + border-spacing: 0; + padding: 0; + margin: auto; + } + body { + padding: 0; + margin: 0; + } +</style> +<div style="width:200px;height:300px;background:yellow;display:inline-block;"></div><div style="width:80px;height:300px;background:yellow;display:inline-block;"></div> diff --git a/testing/web-platform/tests/css/css-tables/html-to-css-mapping-1.html b/testing/web-platform/tests/css/css-tables/html-to-css-mapping-1.html new file mode 100644 index 0000000000..c29fd1db9d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html-to-css-mapping-1.html @@ -0,0 +1,63 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fixup"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> +<main> + + <h1>HTML-2-CSS Mapping</h1> + <p>Checks that browsers implement properly the html2css stylesheet (rules without attributes)</p> + + <hr/> + <p>You should see a 5 2px blue square here, separated by 2px each:</p> + <p>Because of the lack of the table element, border-spacing is 0; padding on each td should be 1px on each side. 1px*2*5=10px.</p> + <div><table><tbody style="background: blue; height: 2px"><tr><td></td><td></td><td></td><td></td><td></tr></tbody></table></div> + + <hr/> + <p>You should see a 10px blue square here:</p> + <p>Because of the lack of the table element, border-spacing is 0; padding on each td should be 1px on each side. 1px*2*5=10px.</p> + <div><table class="to-remove"><tbody style="background: blue; height: 10px"><tr><td></td><td></td><td></td><td></td><td></tr></tbody></table></div> + + <hr/> + <p>You should see a 12px blue square here:</p> + <p>The table has the background; x-td elements have no padding, only the border-spacing remains. 6*2px=12px.</p> + <div><table style="height: 12px; background: blue;" class="no-td"><tbody><tr><td></td><td></td><td></td><td></td><td></tr></tbody></table></div> + + <hr/> + <p>You shouldn't see anything here:</p> + <p>The table has the background but is empty; it does not apply border-spacing in this case.</p> + <div><table style="height: 2px; background: red"></table></div> + + <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> + <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> + +</main> + +<script> + + var i = 1; + generate_tests(assert_equals, [ + [ + "HTML -> CSS Mapping is applied correctly on proper table markup (border-spacing, padding)", + document.querySelector("main > div:nth-of-type("+(i++)+") table").offsetWidth, + 22 + ], + [ + "HTML -> CSS Mapping is applied correctly on improper table markup (no table => no border-spacing, but padding)", + document.querySelector("main > div:nth-of-type("+(i++)+") tbody").offsetWidth, + 10 + ], + [ + "HTML -> CSS Mapping is applied correctly on improper table markup (no td => border-spacing, but no padding)", + document.querySelector("main > div:nth-of-type("+(i++)+") table").offsetWidth, + 12 + ], + [ + "HTML -> CSS Mapping is applied correctly on empty table markup (no content => no border-spacing, no padding)", + document.querySelector("main > div:nth-of-type("+(i++)+") table").offsetWidth, + 0 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html b/testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html new file mode 100644 index 0000000000..552270b539 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html @@ -0,0 +1,226 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> +<main> + + <h1>HTML-2-CSS Mapping</h1> + <p>Checks that browsers implement properly the html2css stylesheet (rules about borders, disabling border-collapse for clarity)</p> + <style>table { border-collapse: separate !important; }</style> + + <hr/> + <p>1: The border of the table element should be 0px hidden gray:</p> + <p> + <code>border-width:0px</code> is the <code>initial</code> value;<br/> + <code>border-style:hidden</code> comes from <code>table:matches(..., [rules=groups], ...)</code>;<br/> + <code>border-color:gray</code> comes from <code>table</code> + </p> + <div><table border="0" rules="groups"><tbody><tr><td></td></tr></tbody></table></div> + + <hr/> + <p>2: The border of the table element should be 1px outset black:</p> + <p> + <code>border-width:1px</code> comes from <code>table[frame=box] (1/2)</code>;<br/> + <code>border-style:outset</code> comes from <code>table[frame=box] (2/2)</code>;<br/> + <code>border-color:black</code> comes from <code>table:matches(..., [rules=groups], ...)</code> + </p> + <div><table border="0" rules="groups" frame="box"><tbody><tr><td></td></tr></tbody></table></div> + + <hr/> + <p>3a: The border of the table element should be 10px outset gray:</p> + <p> + <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> + <code>border-style:outset</code> comes from <code>table[frame=box] (2/2)</code>;<br/> + <code>border-color:gray</code> comes from <code>table[border=$w]</code> + </p> + <hr style="display:none"/> + <p>3b: The border-top of the td element should be 1px inset gray:</p> + <p> + <code>border-width:1px</code> comes from <code>table[border=$w] > ...td</code>;<br/> + <code>border-style:inset</code> comes from <code>table[border=$w] > ...td</code>;<br/> + <code>border-color:gray</code> comes from <code>table[border=$w] > ...td</code> + </p> + <hr style="display:none"/> + <p>3c: The border-left of the td element should be 1px hidden gray:</p> + <p> + <code>border-width:1px</code> comes from <code>table[border=$w] > ...td</code>;<br/> + <code>border-style:inset</code> comes from <code>table[border=$w] > ...td</code>;<br/> + <code>border-color:gray</code> comes from <code>table[border=$w] > ...td</code> + </p> + <div><table border="10" rules="groups" frame="box"><tbody><tr><td></td></tr></tbody></table></div> + + <hr/> + <p>4a: The border of the table element should be 1px outset gray:</p> + <p> + <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> + <code>border-style:outset</code> comes from <code>table[border=$w]</code>;<br/> + <code>border-color:gray</code> comes from <code>table[border=$w]</code> + </p> + <hr style="display:none"> + <p>4b: The top border of the td element should be 1px solid gray:</p> + <p> + <code>border-width:1px</code> comes from <code>table[rules=all] > ... td</code>;<br/> + <code>border-style:solid</code> comes from <code>table[rules=all] > ... td</code>;<br/> + <code>border-color:gray</code> comes from <code>table[rules=all] > ... td</code> + </p> + <div><table border="yes" rules="all"><tr><td></td></tr></table></div> + + <hr> + <p>5a: The left border of the table element should be ? hidden ?:</p> + <p> + <code>border-style:hidden</code> comes from <code>table[frame=hsides]</code>;<br/> + </p> + <hr style="display:none"> + <p>5b: The right border of the table element should be 10px solid gray:</p> + <p> + <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> + <code>border-style:solid</code> comes from <code>[style]</code>;<br/> + <code>border-color:gray</code> comes from <code>table[border=$w]</code> + </p> + <div><table border="10" frame="hsides" style="border-right-style: solid"><tr><td></td></tr></table></div> + + <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> + <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> + <script>void function() { var divs = document.querySelectorAll("main > div"); for(var i = divs.length; i--;) { var div = divs[i]; var pre = document.createElement('pre'); pre.title = pre.textContent = div.innerHTML; div.parentNode.insertBefore(pre, div); }; }();</script> + <hr/> + +</main> + +<script> + + var i = 1; + generate_tests(assert_equals, [ + /*========================================*/ + [ + "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, + "0px" + ], + [ + "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, + "hidden" + ], + [ + "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, + "rgb(128, 128, 128)" + ], + /*========================================*/ + [ + "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, + "1px" + ], + [ + "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, + "outset" + ], + [ + "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, + "rgb(0, 0, 0)" + ], + /*========================================*/ + [ + "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, + "10px" + ], + [ + "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, + "outset" + ], + [ + "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, + "rgb(128, 128, 128)" + ], + [ + "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopWidth, + "1px" + ], + [ + "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopStyle, + "inset" + ], + [ + "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopColor, + "rgb(128, 128, 128)" + ], + [ + "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftWidth, + "1px" + ], + [ + "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftStyle, + "inset" + ], + [ + "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftColor, + "rgb(128, 128, 128)" + ], + /*========================================*/ + [ + "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, + "1px" + ], + [ + "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, + "outset" + ], + [ + "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, + "rgb(128, 128, 128)" + ], + [ + "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftWidth, + "1px" + ], + [ + "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftStyle, + "solid" + ], + [ + "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftColor, + "rgb(128, 128, 128)" + ], + /*========================================*/ + [ + "5a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftStyle, + "hidden" + ], + [ + "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right width)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightWidth, + "10px" + ], + [ + "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right style)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightStyle, + "solid" + ], + [ + "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right color)", + getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightColor, + "rgb(128, 128, 128)" + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/html5-table-formatting-1.html b/testing/web-platform/tests/css/css-tables/html5-table-formatting-1.html new file mode 100644 index 0000000000..f0c96dd707 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html5-table-formatting-1.html @@ -0,0 +1,98 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#table-layout-algorithm"> +<main> + + <h1>HTML5 Table Formatting algorithm (row/column grid computation)</h1> + <p>Verifies how browser define and act on empty tables</p> + + <hr/> + <p>This should be a 50px by 50px blue square:</p> + <p>The table grid is 0x0, so the table is empty and follows step 3B of the table layout algorithm</p> + <x-table style="min-width: 50px; height: 50px; background: blue;"></x-table> + + <hr/> + <p>This should be a 50px by 50px blue square:</p> + <p>The table grid is 2x0, so the table is empty and follows step 3B of the table layout algorithm</p> + <x-table style="min-width: 50px; height: 50px; background: blue;"> + <x-col style="width: 100px"></x-col> + <x-col style="width: 100px"></x-col> + </x-table> + + <hr/> + <p>This should be a 50px by 50px blue square:</p> + <p>The table grid is 0x1, so the table is empty and follows step 3B of the table layout algorithm</p> + <x-table style="min-width: 50px; height: 50px; background: blue;"> + <x-tr style="height: 100px; background: orange;"></x-tr> + </x-table> + + <hr/> + <p>This should be a 200px by 100px blue rectangle:</p> + <p>The table grid is 2x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <x-table style="min-width: 50px; height: 50px; background: blue;"> + <x-col style="width: 100px"></x-col> + <x-col style="width: 100px"></x-col> + <x-tr style="height: 100px; background: orange;"></x-tr> + </x-table> + + <hr/> + <p>This should be a 200px by 100px half-blue half-orange rectangle:</p> + <p>The table grid is 2x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <x-table style="min-width: 50px; height: 50px; background: blue;"> + <x-col style="width: 100px"></x-col> + <x-col style="width: 100px"></x-col> + <x-tr style="height: 100px; background: orange;"><x-td></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 200px by 100px orange rectangle:</p> + <p>The table grid is 2x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <x-table style="min-width: 50px; height: 50px; background: blue;"> + <x-col style="width: 100px"></x-col> + <x-col style="width: 100px"></x-col> + <x-tr style="height: 100px; background: orange;"><x-td></x-td><x-td></x-td></x-tr> + </x-table> + +</main> + +<script> + + generate_tests(assert_equals, [ + [ + "Empty tables can still get a lsyout", + document.querySelector("x-table:nth-of-type(1)").offsetWidth, + 50 + ], + [ + "Empty tables do not take table-columns into account", + document.querySelector("x-table:nth-of-type(2)").offsetWidth, + 50 + ], + [ + "Empty tables do not take table-rows into account", + document.querySelector("x-table:nth-of-type(3)").offsetHeight, + 50 + ], + ]) + + generate_tests(assert_equals, [ + [ + "Table-columns are taken into account after missing cells are generated (empty line)", + document.querySelector("x-table:nth-of-type(4)").offsetWidth, + 200 + ], + [ + "Table-columns are taken into account after missing cells are generated (partially empty line)", + document.querySelector("x-table:nth-of-type(5)").offsetWidth, + 200 + ], + [ + "Table-columns are taken into account after missing cells are generated (non-empty line)", + document.querySelector("x-table:nth-of-type(6)").offsetWidth, + 200 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/html5-table-formatting-2.html b/testing/web-platform/tests/css/css-tables/html5-table-formatting-2.html new file mode 100644 index 0000000000..4292c4c76f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html5-table-formatting-2.html @@ -0,0 +1,150 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#dimensioning-the-row-column-grid"> +<main> + + <h1>HTML5 Table Formatting algorithm (row/column grid computation)</h1> + <p>Verifies how browsers deal with explicit tracks from which no cell does originate</p> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> + <x-table style="background: blue;"> + <x-col style="width: 50px"></x-col> + <x-col style="width: 50px"></x-col> + <x-tr style="height: 50px"></x-tr> + <x-tr style="height: 50px"></x-tr> + </x-table> + + <hr/> + <p>This should be a 175px by 175px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col style="width: 50px"></x-col> + <x-col style="width: 50px"></x-col> + <x-tr style="height: 50px"></x-tr> + <x-tr style="height: 50px"></x-tr> + </x-table> + + <hr/> + <p>This should be a 175px by 175px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col style="width: 50px"></x-col> + <x-col style="width: 50px"></x-col> + <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> + <x-tr style="height: 50px"></x-tr> + </x-table> + + <hr/> + <p>This should be a 175px by 175px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col style="width: 50px"></x-col> + <x-col style="width: 50px"></x-col> + <x-tr style="height: 50px"></x-tr> + <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 175px by 175px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col style="width: 50px"></x-col> + <x-col style="width: 50px"></x-col> + <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> + <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 175px by 175px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col style="width: 50px"></x-col> + <x-col style="width: 50px"></x-col> + <x-tr style="height: 50px"><x-td></x-td></x-tr> + <x-tr style="height: 50px"><x-td></x-td></x-tr> + </x-table> + +</main> + +<script> + + generate_tests(assert_equals, [ + [ + "Explicitely defined columns are not merged", + document.querySelector("x-table:nth-of-type(1)").offsetWidth, + 100 + ], + [ + "Explicitely defined rows are not merged", + document.querySelector("x-table:nth-of-type(1)").offsetHeight, + 100 + ], + [ + "Border-spacing is added between any two unmerged columns (1)", + document.querySelector("x-table:nth-of-type(2)").offsetWidth, + 175 + ], + [ + "Border-spacing is added between any two unmerged rows (1)", + document.querySelector("x-table:nth-of-type(2)").offsetHeight, + 175 + ], + [ + "Border-spacing is added between any two unmerged columns (2)", + document.querySelector("x-table:nth-of-type(3)").offsetWidth, + 175 + ], + [ + "Border-spacing is added between any two unmerged rows (2)", + document.querySelector("x-table:nth-of-type(3)").offsetHeight, + 175 + ], + [ + "Border-spacing is added between any two unmerged columns (3)", + document.querySelector("x-table:nth-of-type(4)").offsetWidth, + 175 + ], + [ + "Border-spacing is added between any two unmerged rows (3)", + document.querySelector("x-table:nth-of-type(4)").offsetHeight, + 175 + ], + [ + "Border-spacing is added between any two unmerged columns (4)", + document.querySelector("x-table:nth-of-type(5)").offsetWidth, + 175 + ], + [ + "Border-spacing is added between any two unmerged rows (4)", + document.querySelector("x-table:nth-of-type(5)").offsetHeight, + 175 + ], + [ + "Border-spacing is added between any two unmerged columns (5)", + document.querySelector("x-table:nth-of-type(6)").offsetWidth, + 175 + ], + [ + "Border-spacing is added between any two unmerged rows (5)", + document.querySelector("x-table:nth-of-type(6)").offsetHeight, + 175 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/html5-table-formatting-3.html b/testing/web-platform/tests/css/css-tables/html5-table-formatting-3.html new file mode 100644 index 0000000000..f32e2dd39c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html5-table-formatting-3.html @@ -0,0 +1,107 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#dimensioning-the-row-column-grid"> +<main> + + <h1>HTML5 Table Formatting algorithm (row/column grid computation)</h1> + <p>Verifies how browsers deal with implicit tracks from which no cell does originate</p> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>The table grid is 1x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks were merged together because they are not all defined explicitely by a table-column or a table-row, and share the same set of cells</p> + <p>Two 25px border-spacing causes the addition of 50px (track is 50x50)</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-tr><x-td style="padding: 25px"></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>The table grid is 1x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks were merged together because they are not all defined explicitely by a table-column or a table-row, and share the same set of cells</p> + <p>Two 25px border-spacing causes the addition of 50px (track is 50x50)</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-tr><x-td style="padding: 25px" rowspan=2 colspan=2></x-td></x-tr> + </x-table> + + <hr/> + <p>This should be a 75px by 75px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks were not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px (tracks are 0x0)</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col></x-col> + <x-col></x-col> + <x-tr><x-td style="padding: 0px" rowspan=2 colspan=2></x-td></x-tr> + <x-tr></x-tr> + </x-table> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> + <p>The consecutive tracks were not merged together because they are all defined explicitely by a table-column or a table-row</p> + <p>Three 25px border-spacing causes the addition of 75px (tracks are 12.5x12.5)</p> + <x-table style="background: blue; border-spacing: 25px"> + <x-col></x-col> + <x-col></x-col> + <x-tr><x-td style="padding: 25px" rowspan=2 colspan=2></x-td></x-tr> + <x-tr></x-tr> + </x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + document.body.onload = () => { + generate_tests(assert_equals, [ + [ + "Control test for table-cell padding and border-spacing, etc (width)", + document.querySelector("x-table:nth-of-type(1)").offsetWidth, + 100 + ], + [ + "Control test for table-cell padding and border-spacing (height)", + document.querySelector("x-table:nth-of-type(1)").offsetHeight, + 100 + ], + [ + "Anonymous consecutive columns spanned by the same set of cells are merged", + document.querySelector("x-table:nth-of-type(2)").offsetWidth, + 100 + ], + [ + "Anonymous consecutive rows spanned by the same set of cells are merged", + document.querySelector("x-table:nth-of-type(2)").offsetHeight, + 100 + ], + [ + "Explicitely-defined consecutive columns spanned by the same set of cells are not merged", + document.querySelector("x-table:nth-of-type(3)").offsetWidth, + 75 + ], + [ + "Explicitely-defined consecutive rows spanned by the same set of cells are not merged", + document.querySelector("x-table:nth-of-type(3)").offsetHeight, + 75 + ], + [ + "Explicitely-defined consecutive columns spanned by the same set of cells are not merged, and cells span across border-spacing", + document.querySelector("x-table:nth-of-type(4) x-col").getBoundingClientRect().width, + 12.5 + ], + [ + "Explicitely-defined consecutive rows spanned by the same set of cells are not merged, and cells span across border-spacing", + document.querySelector("x-table:nth-of-type(4) x-tr").getBoundingClientRect().height, + 12.5 + ], + ]) + } +</script> diff --git a/testing/web-platform/tests/css/css-tables/html5-table-formatting-fixed-layout-1.html b/testing/web-platform/tests/css/css-tables/html5-table-formatting-fixed-layout-1.html new file mode 100644 index 0000000000..d4f0986fcd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html5-table-formatting-fixed-layout-1.html @@ -0,0 +1,44 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#dimensioning-the-row-column-grid"> +<main> + + <h1>HTML5 Table Formatting algorithm and Fixed Layout (row/column grid computation)</h1> + <p>Verifies how browsers deal with implicit tracks from which no cell does originate in fixed mode</p> + + <hr/> + <p>This should be a 100px by 50px blue rectangle:</p> + <p>The table grid is 1x3, so the table is not empty and follows step 3A of the table layout algorithm</p> + <p>The consecutive columns were merged not together because the table-layout is fixed, but consecutive rows were.</p> + <p>Each track has a 0px breadth; the table width (respect. height) comes from 4x (respect. 2x) 25px-wide border spacings</p> + <x-table style="table-layout: fixed; width: 0; background: blue; border-spacing: 25px"> + <x-tr><x-td width="0" height="0" colspan="3" rowspan="3" style="padding: 0"></x-td></x-tr> + </x-table> + + <hr/> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + generate_tests(assert_equals, [ + [ + "Redundant columns of fixed-layout tables are not being merged", + document.querySelector("x-table:nth-of-type(1)").offsetWidth, + 100 + ], + [ + "Redundant rows of fixed-layout tables are not being merged", + document.querySelector("x-table:nth-of-type(1)").offsetHeight, + 50 + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/inheritance.html b/testing/web-platform/tests/css/css-tables/inheritance.html new file mode 100644 index 0000000000..2c640db6d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/inheritance.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Tables properties</title> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_inherited('border-collapse', 'separate', 'collapse'); +assert_inherited('border-spacing', '0px 0px', '10px 20px'); +assert_inherited('caption-side', 'top', 'bottom'); +assert_inherited('empty-cells', 'show', 'hide'); +assert_not_inherited('table-layout', 'auto', 'fixed'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/internal-containing-block-001.html b/testing/web-platform/tests/css/css-tables/internal-containing-block-001.html new file mode 100644 index 0000000000..9e859f0ab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/internal-containing-block-001.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#abspos-boxes-in-table-internal"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#valdef-position-absolute"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=798164" /> +<meta name="assert" content="A table-row with position:relative establishes a +containing block for a position:absolute descendent of a table-cell, and the +descendent is positioned correctly." /> +<title> +relpos table-row establishes containing block for abspos +</title> + +<style> +tr { + position: relative; +} + +div.abspos { + position: absolute; + height: 50px; + width: 100px; + background: green; +} + +div.static { + height: 50px; + width: 100px; + background:red; +} + +td, tr { + margin:0px; + padding:0px; +} + +table { + border-collapse:collapse; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<table> + <tr> + <td> + <div class="abspos"></div> + <div class="static"></div> + </td> + </tr> + <tr> + <td> + <div class="abspos"></div> + <div class="static"></div> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/max-height-table-ref.html b/testing/web-platform/tests/css/css-tables/max-height-table-ref.html new file mode 100644 index 0000000000..ab1036ebb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/max-height-table-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS test reference</title> +<style> +td { + padding: 0; +} + +table { + border-spacing: 0; + border: 1px solid black; + background: green; + padding: 5px; +} +div { + width: 5px; + height: 5px; +} +</style> +<table> + <tr> + <td><div></div></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/max-height-table.html b/testing/web-platform/tests/css/css-tables/max-height-table.html new file mode 100644 index 0000000000..2408b3142f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/max-height-table.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>max-height cannot shrink a table under its intrinsic size</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="max-height-table-ref.html"> +<style> +td { + padding: 0; +} + +table { + border-spacing: 0; + max-height: 0; + border: 1px solid black; + background: green; + padding: 5px; +} + +div { + width: 5px; + height: 5px; +} +</style> +<table> + <tr> + <td><div></div></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/min-height-table-2.html b/testing/web-platform/tests/css/css-tables/min-height-table-2.html new file mode 100644 index 0000000000..de494e398d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/min-height-table-2.html @@ -0,0 +1,41 @@ +<!doctype html> +<title>min-height can grow a table over its intrinsic size</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="min-height-table-ref.html"> +<style> +:root { overflow: hidden; } + +td { + padding: 0; +} + +table { + border-spacing: 0; + max-height: 40px; /* Just to make sure that min trumps max, like everywhere else */ + min-height: 50%; + border: 1px solid black; + background: green; + padding: 5px; +} + +.outer { + /* 300px from the ref, plus 12px for border + padding, which applies to the table wrapper box, not the grid box */ + height: calc((300px + 12px) * 2); +} + +.inner { + width: 300px; + height: 5px; +} +</style> +<div class="outer"> + <table> + <tr> + <td><div class="inner"></div></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/min-height-table-ref.html b/testing/web-platform/tests/css/css-tables/min-height-table-ref.html new file mode 100644 index 0000000000..05533216d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/min-height-table-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS test reference</title> +<style> +td { + padding: 0; +} + +table { + border-spacing: 0; + border: 1px solid black; + background: green; + padding: 5px; +} +div { + width: 300px; + height: 300px; +} +</style> +<table> + <tr> + <td><div></div></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/min-height-table.html b/testing/web-platform/tests/css/css-tables/min-height-table.html new file mode 100644 index 0000000000..57a0ff9448 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/min-height-table.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>min-height can grow a table over its intrinsic size</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="min-height-table-ref.html"> +<style> +td { + padding: 0; +} + +table { + border-spacing: 0; + min-height: 312px; /* To account for the padding + border, which apply to the wrapper box, not the grid box */ + border: 1px solid black; + background: green; + padding: 5px; +} +div { + width: 300px; + height: 5px; +} +</style> +<table> + <tr> + <td><div></div></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box-ref.html b/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box-ref.html new file mode 100644 index 0000000000..53f89af133 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box-ref.html @@ -0,0 +1,43 @@ +<!doctype html> +<title>CSS Test Reference</title> +<meta charset="utf-8"> +<style> +html, +body { + color: black; + background-color: white; + font: 16px/0 monospace; + padding: 0; + margin: 0; +} + +.table { + box-sizing: content-box; + border: 3px solid black; + padding: 5px; + background: blue content-box; + display: inline-block; +} + +.big { + width: 75px; + height: 75px; +} + +.td { + padding: 1px; +} + +.grid { + display: grid; + width: 75px; + height: 75px; +} +</style> +<div class="table"><div class="td"></div></div><br> +<div class="table" style="min-height: 50px"><div class="td"></div></div><br> +<div class="table" style="min-width: 50px"><div class="td"></div></div><br> +<div class="table"><div class="td"><div class="big"></div></div></div><br> +<div class="table"><div class="td"><div class="big"></div></div></div><br> +<div class="grid"><div class="table" style="max-height: 50px"><div class="td"></div></div></div> +<div class="grid"><div class="table" style="max-width: 50px"><div class="td"></div></div></div> diff --git a/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box.html b/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box.html new file mode 100644 index 0000000000..14016d1318 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/min-max-size-table-content-box.html @@ -0,0 +1,47 @@ +<!doctype html> +<title>min/max-{width,height} on tables with box-sizing: content-box</title> +<meta charset="utf-8"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> +<link rel="author" href="mailto:mats@mozilla.com" title="Mats Palmgren"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="min-max-size-table-content-box-ref.html"> +<style> +html, +body { + color: black; + background-color: white; + font: 16px/1 monospace; + padding: 0; + margin: 0; +} + +table { + box-sizing: content-box; + border: 3px solid black; + padding: 5px; + background: blue content-box; + border-spacing: 0; +} + +td { + padding: 1px; +} + +div { + width: 75px; + height: 75px; +} + +.grid { + display: grid; +} +</style> +<table><td></td></table> +<table style="min-height:50px"><td></td></table> +<table style="min-width:50px"><td></td></table> +<table style="max-height:50px"><td><div></div></td></table> +<table style="max-width:50px"><td><div></div></td></table> +<div class="grid"><table style="max-height:50px"><td></td></table></div> +<div class="grid"><table style="max-width:50px"><td></td></table></div> diff --git a/testing/web-platform/tests/css/css-tables/multicol-table-collapsed-border-crash.html b/testing/web-platform/tests/css/css-tables/multicol-table-collapsed-border-crash.html new file mode 100644 index 0000000000..499a121077 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/multicol-table-collapsed-border-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1215254"> +<style> + html, body, span { + column-count: 2; + } + span { + display: table; + border-collapse: collapse; + border: 1px solid black; + } + a { + vertical-align: 10000000000000000em; + } +</style> +<span> + <a>foo</a> +</span> diff --git a/testing/web-platform/tests/css/css-tables/multicol-table-crash.html b/testing/web-platform/tests/css/css-tables/multicol-table-crash.html new file mode 100644 index 0000000000..a67167c161 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/multicol-table-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1025253"> +<style> + html, body, span { + column-count: 2; + } + span { + display: table; + } + a { + vertical-align: 10000000000000000em; + } +</style> +<span> + <a>foo</a> +</span> diff --git a/testing/web-platform/tests/css/css-tables/no-overflow-with-table-cell-margins.html b/testing/web-platform/tests/css/css-tables/no-overflow-with-table-cell-margins.html new file mode 100644 index 0000000000..9657da9c26 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/no-overflow-with-table-cell-margins.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/"> +<meta name="assert" content="Table cell margins do not contribute to layout overflow."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +html { + display: table; + width: 100%; + height: 100%; +} +body { + display: table-cell; + width: 100%; +} +</style> +<body></body> +<script> + test(() => { + const scroller = document.scrollingElement; + + // There shouldn't be any layout overflow on the root scrollable element. + assert_equals(scroller.clientHeight, scroller.scrollHeight); + }); +</script> diff --git a/testing/web-platform/tests/css/css-tables/paint/col-change-span-bg-invalidation-001.html b/testing/web-platform/tests/css/css-tables/paint/col-change-span-bg-invalidation-001.html new file mode 100644 index 0000000000..997745954e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/col-change-span-bg-invalidation-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<link rel="author" title="Andreu Botella" href="abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400"> +<meta name=assert content="Changing the span of a table column element will invalidate column backgrounds"> +<style> +table { + width: 100px; + height: 100px; + border-spacing: 0; +} +.green { + background: green; +} +.red { + background: red; +} +</style> +<title>CSS table column span invalidation</title> +<script> +waitForAtLeastOneFrame().then(() => { + const changeSpanCol = document.getElementById("changeSpan"); + changeSpanCol.setAttribute("span", "2"); + takeScreenshot(); +}); +</script> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<table> + <col id="changeSpan" class="green"> + <col class="green"> + <col class="red"> + <tr> + <td></td> + <td></td> + <td></td> + </tr> +</table> +</html> diff --git a/testing/web-platform/tests/css/css-tables/paint/col-change-span-bg-invalidation-002.html b/testing/web-platform/tests/css/css-tables/paint/col-change-span-bg-invalidation-002.html new file mode 100644 index 0000000000..abfd6dbaaf --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/col-change-span-bg-invalidation-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<link rel="author" title="Andreu Botella" href="abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400"> +<meta name=assert content="Changing the span of a table column element will invalidate column backgrounds, even if previously any columns with backgrounds spanned no cells"> +<style> +table { + width: 100px; + height: 100px; + border-spacing: 0; + background: linear-gradient(to right, green 67%, red 67%); +} +.green { + background: green; +} +</style> +<title>CSS table column span invalidation</title> +<script> +waitForAtLeastOneFrame().then(() => { + const changeSpanCol = document.getElementById("changeSpan"); + changeSpanCol.removeAttribute("span"); + takeScreenshot(); +}); +</script> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<table> + <col id="changeSpan" span="2"> + <col> + <col class="green"> + <tr> + <td></td> + <td></td> + <td></td> + </tr> +</table> +</html> diff --git a/testing/web-platform/tests/css/css-tables/paint/col-paint-htb-rtl-ref.html b/testing/web-platform/tests/css/css-tables/paint/col-paint-htb-rtl-ref.html new file mode 100644 index 0000000000..107a960958 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/col-paint-htb-rtl-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> +table { border: solid 2px; border-spacing: 5px; padding: 5px; } +col { background: linear-gradient(60deg, red 50%, blue 50%); } +</style> +<table> + <col style="width: 50px;"></col> + <col style="width: 100px;"></col> + <tr style="height: 100px;"> + <td></td> + <td></td> + </tr> + <tr style="height: 50px;"> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/paint/col-paint-htb-rtl.html b/testing/web-platform/tests/css/css-tables/paint/col-paint-htb-rtl.html new file mode 100644 index 0000000000..1508421818 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/col-paint-htb-rtl.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds"> +<link rel="match" href="col-paint-htb-rtl-ref.html"> +<style> +table { border: solid 2px; border-spacing: 5px; padding: 5px; } +col { background: linear-gradient(60deg, red 50%, blue 50%); } +</style> +<table style="direction: rtl;"> + <col style="width: 100px;"></col> + <col style="width: 50px;"></col> + <tr style="height: 100px;"> + <td></td> + <td></td> + </tr> + <tr style="height: 50px;"> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/paint/col-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-tables/paint/col-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..a651e03b1c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/col-paint-vrl-rtl-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> +table { border: solid 2px; border-spacing: 5px; padding: 5px; } +col { background: linear-gradient(-60deg, red 50%, blue 50%); } +</style> +<table style="transform: rotate(90deg);"> + <col style="width: 100px;"></col> + <col style="width: 50px;"></col> + <tr style="height: 100px;"> + <td></td> + <td></td> + </tr> + <tr style="height: 50px;"> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/paint/col-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-tables/paint/col-paint-vrl-rtl.html new file mode 100644 index 0000000000..d76ea59dac --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/col-paint-vrl-rtl.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds"> +<link rel="match" href="col-paint-vrl-rtl-ref.html"> +<style> +table { border: solid 2px; border-spacing: 5px; padding: 5px; } +col { background: linear-gradient(30deg, red 50%, blue 50%); } +</style> +<table style="writing-mode: vertical-rl; direction: rtl;"> + <col style="height: 50px;"></col> + <col style="height: 100px;"></col> + <tr style="width: 100px;"> + <td></td> + <td></td> + </tr> + <tr style="width: 50px;"> + <td></td> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/paint/row-background-paint-remove-last-cell-ref.html b/testing/web-platform/tests/css/css-tables/paint/row-background-paint-remove-last-cell-ref.html new file mode 100644 index 0000000000..57beaedd47 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/row-background-paint-remove-last-cell-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<style> +tr { background-color: rgb(255, 0, 0); } +td:not(#remove) { background-color: green; } +</style> +<title>CSS Test Reference</title> +<p>Test passes if you see three green cells and no red below.</p> +<table> + <tr> + <td>A1</td> + <td>A2</td> + </tr> + <tr> + <td>B1</td> + </tr> +</table> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/paint/row-background-paint-remove-last-cell.html b/testing/web-platform/tests/css/css-tables/paint/row-background-paint-remove-last-cell.html new file mode 100644 index 0000000000..e61b5d4fea --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/paint/row-background-paint-remove-last-cell.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<link rel="author" title="Chenguang Shao" href="chenguangshao1@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds"> +<link rel="match" href="row-background-paint-remove-last-cell-ref.html"> +<style> +tr { background-color: rgb(255, 0, 0); } +td:not(#remove) { background-color: green; } +</style> +<title>CSS Table Module Test: table-row repaint after removing last cell</title> +<script> +waitForAtLeastOneFrame().then(() => { + const remove = document.getElementById('remove'); + remove.remove(); + takeScreenshot(); +}); +</script> +<p>Test passes if you see three green cells and no red below.</p> +<table> + <tr> + <td>A1</td> + <td>A2</td> + </tr> + <tr> + <td>B1</td> + <td id="remove"> B2 </td> + </tr> +</table> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/parsing/border-collapse-computed.html b/testing/web-platform/tests/css/css-tables/parsing/border-collapse-computed.html new file mode 100644 index 0000000000..d72cbc6d02 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/border-collapse-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module: getComputedStyle().borderCollapse</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-border-collapse"> +<meta name="assert" content="border-collapse computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-collapse", "separate"); +test_computed_value("border-collapse", "collapse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/border-collapse-invalid.html b/testing/web-platform/tests/css/css-tables/parsing/border-collapse-invalid.html new file mode 100644 index 0000000000..9b10062f0f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/border-collapse-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing border-collapse with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-border-collapse"> +<meta name="assert" content="border-collapse supports only the grammar 'separate | collapse'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-collapse", "none"); +test_invalid_value("border-collapse", "separate collapse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/border-collapse-valid.html b/testing/web-platform/tests/css/css-tables/parsing/border-collapse-valid.html new file mode 100644 index 0000000000..2dc8ae45a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/border-collapse-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing border-collapse with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-border-collapse"> +<meta name="assert" content="border-collapse supports the full grammar 'separate | collapse'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-collapse", "separate"); +test_valid_value("border-collapse", "collapse"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/border-spacing-computed.html b/testing/web-platform/tests/css/css-tables/parsing/border-spacing-computed.html new file mode 100644 index 0000000000..d88acb3bb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/border-spacing-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module: getComputedStyle().borderSpacing</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-border-spacing"> +<meta name="assert" content="border-spacing computed value is two absolute lengths."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("border-spacing", "10px 20px"); +test_computed_value("border-spacing", "0", "0px 0px"); +test_computed_value("border-spacing", "calc(10px + 0.5em) calc(10px - 0.5em)", "30px 0px"); +test_computed_value("border-spacing", "calc(10px - 0.5em) calc(10px + 0.5em)", "0px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/border-spacing-invalid.html b/testing/web-platform/tests/css/css-tables/parsing/border-spacing-invalid.html new file mode 100644 index 0000000000..47fd283ccf --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/border-spacing-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing border-spacing with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-border-spacing"> +<meta name="assert" content="border-spacing supports only the grammar '<length>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-spacing", "10%"); +test_invalid_value("border-spacing", "-20px"); +test_invalid_value("border-spacing", "30"); +test_invalid_value("border-spacing", "40px 50px 60px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/border-spacing-valid.html b/testing/web-platform/tests/css/css-tables/parsing/border-spacing-valid.html new file mode 100644 index 0000000000..cf594ee6b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/border-spacing-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing border-spacing with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-border-spacing"> +<meta name="assert" content="border-spacing supports the full grammar '<length>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-spacing", "0px"); +test_valid_value("border-spacing", "10px 20px"); +test_valid_value("border-spacing", "calc(10px + 0.5em) calc(10px - 0.5em)", "calc(0.5em + 10px) calc(-0.5em + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/caption-side-computed.html b/testing/web-platform/tests/css/css-tables/parsing/caption-side-computed.html new file mode 100644 index 0000000000..dc573546af --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/caption-side-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module: getComputedStyle().captionSide</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-caption-side"> +<meta name="assert" content="caption-side computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("caption-side", "top"); +test_computed_value("caption-side", "bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/caption-side-invalid.html b/testing/web-platform/tests/css/css-tables/parsing/caption-side-invalid.html new file mode 100644 index 0000000000..1552e4d241 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/caption-side-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing caption-side with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-caption-side"> +<meta name="assert" content="caption-side supports only the grammar 'top | bottom'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("caption-side", "auto"); +test_invalid_value("caption-side", "left"); +test_invalid_value("caption-side", "right"); +test_invalid_value("caption-side", "top bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/caption-side-valid.html b/testing/web-platform/tests/css/css-tables/parsing/caption-side-valid.html new file mode 100644 index 0000000000..a97683a6f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/caption-side-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing caption-side with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-caption-side"> +<meta name="assert" content="caption-side supports the full grammar 'top | bottom'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("caption-side", "top"); +test_valid_value("caption-side", "bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/empty-cells-computed.html b/testing/web-platform/tests/css/css-tables/parsing/empty-cells-computed.html new file mode 100644 index 0000000000..1a04c0c9f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/empty-cells-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module: getComputedStyle().emptyCells</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-empty-cells"> +<meta name="assert" content="empty-cells computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("empty-cells", "show"); +test_computed_value("empty-cells", "hide"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/empty-cells-invalid.html b/testing/web-platform/tests/css/css-tables/parsing/empty-cells-invalid.html new file mode 100644 index 0000000000..4b5bf95dcd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/empty-cells-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing empty-cells with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-empty-cells"> +<meta name="assert" content="empty-cells supports only the grammar 'show | hide'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("empty-cells", "auto"); +test_invalid_value("empty-cells", "show hide"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/empty-cells-valid.html b/testing/web-platform/tests/css/css-tables/parsing/empty-cells-valid.html new file mode 100644 index 0000000000..c3483aafe0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/empty-cells-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing empty-cells with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-empty-cells"> +<meta name="assert" content="empty-cells supports the full grammar 'show | hide'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("empty-cells", "show"); +test_valid_value("empty-cells", "hide"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/table-layout-computed.html b/testing/web-platform/tests/css/css-tables/parsing/table-layout-computed.html new file mode 100644 index 0000000000..3453508541 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/table-layout-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module: getComputedStyle().tableLayout</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-table-layout"> +<meta name="assert" content="table-layout computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("table-layout", "auto"); +test_computed_value("table-layout", "fixed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/table-layout-invalid.html b/testing/web-platform/tests/css/css-tables/parsing/table-layout-invalid.html new file mode 100644 index 0000000000..23a60ca56e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/table-layout-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing table-layout with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-table-layout"> +<meta name="assert" content="table-layout supports only the grammar 'auto | fixed'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("table-layout", "none"); +test_invalid_value("table-layout", "auto fixed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/parsing/table-layout-valid.html b/testing/web-platform/tests/css/css-tables/parsing/table-layout-valid.html new file mode 100644 index 0000000000..bf94ed8369 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/parsing/table-layout-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Table Module Test: parsing table-layout with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-tables/#propdef-table-layout"> +<meta name="assert" content="table-layout supports the full grammar 'auto | fixed'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("table-layout", "auto"); +test_valid_value("table-layout", "fixed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-restricted-block-size-cell.html b/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-restricted-block-size-cell.html new file mode 100644 index 0000000000..f532308484 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-restricted-block-size-cell.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + .table { display:table; height:100px; background:pink; } + .cell { overflow:auto; width:100px; height:100%; background:blue; } +</style> +<p>There should be a 100px tall pink block below, with a scrollable box inside.</p> +<div id="container" class="table" data-expected-height="100"> + <div class="cell" data-expected-height="100" data-expected-scroll-height="500"> + <div style="width:100px; height:500px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-unrestricted-block-size-cell.tentative.html b/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-unrestricted-block-size-cell.tentative.html new file mode 100644 index 0000000000..ffbb796b6a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-unrestricted-block-size-cell.tentative.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="help" href="http://crbug.com/964282"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display:table;"> + <div style="overflow:auto; height:100%; background:green;"> + <div style="width:100px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/percent-height-replaced-in-percent-cell-002.html b/testing/web-platform/tests/css/css-tables/percent-height-replaced-in-percent-cell-002.html new file mode 100644 index 0000000000..78d4b0be1d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-height-replaced-in-percent-cell-002.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1234300"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: table-cell; height: 100px; line-height: 0;"> + <canvas width=200 height=200 style="background: green; max-height: 100%;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-tables/percent-height-replaced-in-percent-cell.tentative.html b/testing/web-platform/tests/css/css-tables/percent-height-replaced-in-percent-cell.tentative.html new file mode 100644 index 0000000000..ed5effa8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-height-replaced-in-percent-cell.tentative.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="http://crbug.com/1001083"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<table style="width: 100px; height: 100px; background: green;"> + <tr> + <td style="height: 20px;"></td> + </tr> + <tr> + <td style="height: 100%;"> + <img style="width: 100%; height: 100%; visibility: hidden;" /> + </td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/percent-height-table-cell-child.html b/testing/web-platform/tests/css/css-tables/percent-height-table-cell-child.html new file mode 100644 index 0000000000..acf9205259 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-height-table-cell-child.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1218345"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: table; height: 100%; width: 100px; background: red;"> + <div style="height: 50%; background: green;"> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/percent-width-cell-dynamic.html b/testing/web-platform/tests/css/css-tables/percent-width-cell-dynamic.html new file mode 100644 index 0000000000..5c7ef3bf8a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-width-cell-dynamic.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/984642" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +html { overflow: hidden; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target"> + <div style="width: 10%;"> + <div style="display: inline-table;"> + <div style="display: table-cell; width: 100%;"> + <span style="display: inline-block; width: 100%; height: 100px; background: green;"></span> + </div> + <div style="display: table-cell;"> + <span style="display: inline-block; width: 10px; height: 100px; background: green;"></span> + </div> + </div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '1000px'; +</script> diff --git a/testing/web-platform/tests/css/css-tables/percent-width-ignored-001.tentative.html b/testing/web-platform/tests/css/css-tables/percent-width-ignored-001.tentative.html new file mode 100644 index 0000000000..5cdb0ead0a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-width-ignored-001.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3336"> +<meta name="assert" content="A cell's percent width is ignored when its table is nested in another cell" /> +No red should show. Yellow and blue rectangles are in proportion to their +contents' intrinsic widths, not affected by yellow's percent-width bloating the +inner table. +<table id="outerTable" style="width: 300px" cellspacing="0" cellpadding="0"> + <td style="background:red;"> + <table cellspacing="0" cellpadding="0"> + <td style="width:1%; background:yellow;" data-expected-width="100"> + <div style="width:20px; height:150px;"></div> + </td> + </table> + </td> + <td style="background:lightblue;" data-expected-width="200"> + <div style="width:40px; height:150px;"></div> + </td> +</table> +<script> +checkLayout('#outerTable'); +</script> diff --git a/testing/web-platform/tests/css/css-tables/percent-width-ignored-002.tentative.html b/testing/web-platform/tests/css/css-tables/percent-width-ignored-002.tentative.html new file mode 100644 index 0000000000..e18913f0b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-width-ignored-002.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3336"> +<meta name="assert" content="Should cell's percent width be ignored when its table is nested in a shrink to fit block?" /> +<p>Edge 44.17763 and Chrome 70 make this 300px wide. FF makes it 150px wide.</p> +<div id="stf" style="position:absolute; background:blue;" data-expected-width=300> + <table cellspacing="0" cellpadding="0"> + <td style="width:50%;"> + <div style="width:150px; height:150px;"></div> + </td> + </table> +</div> +<script> +checkLayout('#stf'); +</script> diff --git a/testing/web-platform/tests/css/css-tables/percent-width-ignored-003.tentative.html b/testing/web-platform/tests/css/css-tables/percent-width-ignored-003.tentative.html new file mode 100644 index 0000000000..c2282f3c57 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percent-width-ignored-003.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='/resources/check-layout-th.js'></script> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3336"> +<meta name="assert" content="A cell's percent width is ignored when its table is nested in another cell, even if there's an intermediate block." /> +Engines render this same as without the intermediate background:blue block -- yellow 1% width is ignored. +<table id="outerTable" style="width: 300px" cellspacing="0" cellpadding="0"> + <td style="background:red;"> + <div style="background:blue"> + <table cellspacing="0" cellpadding="0"> + <td style="width:1%; background:yellow;" data-expected-width="100"> + <div style="width:20px; height:150px;"></div> + </td> + </table> + </div> + </td> + <td style="background:lightblue;" data-expected-width="200"> + <div style="width:40px; height:150px;"></div> + </td> +</table> +<script> +checkLayout('#outerTable'); +</script> diff --git a/testing/web-platform/tests/css/css-tables/percentages-grandchildren-quirks-mode-001.html b/testing/web-platform/tests/css/css-tables/percentages-grandchildren-quirks-mode-001.html new file mode 100644 index 0000000000..b6b6d245ab --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percentages-grandchildren-quirks-mode-001.html @@ -0,0 +1,9 @@ +<link rel="help" href="https://drafts.csswg.org/css-tables-3/"> +<meta name="assert" content="This test checks that table cell children, in quirks mode, don't apply the percentage height quirk to their children." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div style="display:table-cell; height:100px; background:green;"> + <div style="width:100px;"> + <div style="height:100%; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/percentages-grandchildren-quirks-mode-002.html b/testing/web-platform/tests/css/css-tables/percentages-grandchildren-quirks-mode-002.html new file mode 100644 index 0000000000..a24556aa0d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/percentages-grandchildren-quirks-mode-002.html @@ -0,0 +1,9 @@ +<link rel="help" href="https://drafts.csswg.org/css-tables-3/"> +<meta name="assert" content="This test checks that table cell children, in quirks mode, pass the correct percentage resolution size to their children." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div style="display:table-cell; height:100px; background:red;"> + <div style="width:100px; height: 100%;"> + <div style="height:100%; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/reference/subpixel-collapsed-borders-003-ref.html b/testing/web-platform/tests/css/css-tables/reference/subpixel-collapsed-borders-003-ref.html new file mode 100644 index 0000000000..46049a0f1b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/reference/subpixel-collapsed-borders-003-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +table { + border: 5.95px solid green; + border-collapse: collapse; +} + +td { + width: 50px; + height: 50px; + border: 1px solid red; +} +</style> + +<p> + There should be a square with a green border, not a red border. +</p> + +<table> + <tr> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/row-group-margin-border-padding-ref.html b/testing/web-platform/tests/css/css-tables/row-group-margin-border-padding-ref.html new file mode 100644 index 0000000000..aa3e68e6ab --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/row-group-margin-border-padding-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: table-row-group border/padding/margin has no effect in border-collapse:separate tables</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.ltr { direction:ltr; } +.rtl { direction:rtl; } +table, td { + border: 3px solid; +} +.bc table { + border-collapse: collapse; +} + +.inherited td { + border: 3px dashed; + padding: 5px; + margin: 7px; +} +</style> +</head> +<body> + +<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table> + +<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table> + +<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> + +<div class="bc"> +<table class="rtl"><tbody><tr style="border: 20px solid"><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table> + +<table class="ltr"><tbody><tr style="border: 20px solid"><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table> + +<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/row-group-margin-border-padding.html b/testing/web-platform/tests/css/css-tables/row-group-margin-border-padding.html new file mode 100644 index 0000000000..97c7a6e5b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/row-group-margin-border-padding.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Table test: table-row-group border/padding/margin has no effect in border-collapse:separate tables</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#separated-borders"> + <link rel="match" href="row-group-margin-border-padding-ref.html"> +<style> +.ltr { direction:ltr; } +.rtl { direction:rtl; } +table, td { + border: 3px solid; +} +.bc table { + border-collapse: collapse; +} + +tbody.inherited { + border: 3px dashed; + padding: 5px; + margin: 7px; +} +.inherited * { + border:inherit; + padding:inherit; + margin:inherit; +} +</style> +</head> +<body> + +<table class="ltr"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table> + +<table class="rtl"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table> + +<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> + +<!-- ditto with border-collapse:collapse --> +<div class="bc"> +<table class="ltr"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table> +<table class="ltr"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table> + +<table class="rtl"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table> + +<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> +<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/row-group-order-ref.html b/testing/web-platform/tests/css/css-tables/row-group-order-ref.html new file mode 100644 index 0000000000..63087671c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/row-group-order-ref.html @@ -0,0 +1,60 @@ +<!doctype html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + table { + font: 8px Ahem; + border-collapse: collapse; + } + thead, tbody, tfoot { + border: 10px solid; + } + .first { + border-color: green; + } + .second { + border-color: blue; + } + .third { + border-color: yellow; + } + tbody { + border-color: orange; + } + td { + width: 50px; + height: 50px; + } +</style> + +<table> + <tbody class="first"> + <tr><td>head 1</td></tr> + </tbody> + <tbody> + <tr><td>body 1</td></tr> + </tbody> + <tbody class="second"> + <tr><td>head 2</td></tr> + </tbody> + <tbody> + <tr><td>body 2</td></tr> + </tbody> + <tbody class="third"> + <tr><td>head 3</td></tr> + </tbody> + <tbody> + <tr><td>body 3</td></tr> + </tbody> + <tbody class="second"> + <tr><td>foot 2</td></tr> + </tbody> + <tbody> + <tr><td>body 4</td></tr> + </tbody> + <tbody class="third"> + <tr><td>foot 3</td></tr> + </tbody> + <tbody class="first"> + <tr><td>foot 1</td></tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/row-group-order.html b/testing/web-platform/tests/css/css-tables/row-group-order.html new file mode 100644 index 0000000000..06c0f3bd96 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/row-group-order.html @@ -0,0 +1,64 @@ +<!doctype html> +<title>CSS Test: Table section ordering</title> +<link rel="author" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> +<link rel="match" href="row-group-order-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + table { + font: 8px Ahem; + border-collapse: collapse; + } + thead, tbody, tfoot { + border: 10px solid; + } + .first { + border-color: green; + } + .second { + border-color: blue; + } + .third { + border-color: yellow; + } + tbody { + border-color: orange; + } + td { + width: 50px; + height: 50px; + } +</style> + +<table> + <tbody> + <tr><td>body 1</td></tr> + </tbody> + <thead class="first"> + <tr><td>head 1</td></tr> + </thead> + <thead class="second"> + <tr><td>head 2</td></tr> + </thead> + <tbody> + <tr><td>body 2</td></tr> + </tbody> + <thead class="third"> + <tr><td>head 3</td></tr> + </thead> + <tfoot class="first"> + <tr><td>foot 1</td></tr> + </tfoot> + <tbody> + <tr><td>body 3</td></tr> + </tbody> + <tfoot class="second"> + <tr><td>foot 2</td></tr> + </tfoot> + <tbody> + <tr><td>body 4</td></tr> + </tbody> + <tfoot class="third"> + <tr><td>foot 3</td></tr> + </tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-tables/row-margin-border-padding-ref.html b/testing/web-platform/tests/css/css-tables/row-margin-border-padding-ref.html new file mode 100644 index 0000000000..68cbcfc9c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/row-margin-border-padding-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: table-row border/padding/margin has no effect in border-collapse:separate tables</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.ltr { direction:ltr; } +.rtl { direction:rtl; } +table, td { + border: 3px solid; +} +.bc table { + border-collapse: collapse; +} + +.inherited > td { + border: 3px dashed; + padding: 5px; + margin: 7px; +} +</style> +</head> +<body> + +<table class="ltr"><tr><td></td><td></td></tr></table> +<table class="ltr"><tr><td></td><td></td></tr></table> +<table class="ltr"><tr><td></td><td></td></tr></table> + +<table class="rtl"><tr><td></td><td></td></tr></table> +<table class="rtl"><tr><td></td><td></td></tr></table> +<table class="rtl"><tr><td></td><td></td></tr></table> + +<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table> +<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table> + +<div class="bc"> +<table class="rtl"><tr style="border: 20px solid"><td></td><td></td></tr></table> +<table class="rtl"><tr><td></td><td></td></tr></table> +<table class="rtl"><tr><td></td><td></td></tr></table> + +<table class="ltr"><tr style="border: 20px solid"><td></td><td></td></tr></table> +<table class="ltr"><tr><td></td><td></td></tr></table> +<table class="ltr"><tr><td></td><td></td></tr></table> + +<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table> +<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/row-margin-border-padding.html b/testing/web-platform/tests/css/css-tables/row-margin-border-padding.html new file mode 100644 index 0000000000..c6606d941e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/row-margin-border-padding.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Table test: table-row border/padding/margin has no effect in border-collapse:separate tables</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#separated-borders"> + <link rel="match" href="row-margin-border-padding-ref.html"> +<style> +.ltr { direction:ltr; } +.rtl { direction:rtl; } +table, td { + border: 3px solid; +} +.bc table { + border-collapse: collapse; +} + +tr.inherited { + border: 3px dashed; + padding: 5px; + margin: 7px; +} +.inherited > td { + border:inherit; + padding:inherit; + margin:inherit; +} +</style> +</head> +<body> + +<table class="ltr"><tr style="border: 20px solid"><td></td><td></td></tr></table> +<table class="ltr"><tr style="padding: 20px"><td></td><td></td></tr></table> +<table class="ltr"><tr style="margin: 20px"><td></td><td></td></tr></table> + +<table class="rtl"><tr style="border: 20px solid"><td></td><td></td></tr></table> +<table class="rtl"><tr style="padding: 20px"><td></td><td></td></tr></table> +<table class="rtl"><tr style="margin: 20px"><td></td><td></td></tr></table> + +<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table> +<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table> + +<!-- ditto with border-collapse:collapse --> +<div class="bc"> +<table class="ltr"><tr style="border: 20px solid"><td></td><td></td></tr></table> +<table class="ltr"><tr style="padding: 20px"><td></td><td></td></tr></table> +<table class="ltr"><tr style="margin: 20px"><td></td><td></td></tr></table> + +<table class="rtl"><tr style="border: 20px solid"><td></td><td></td></tr></table> +<table class="rtl"><tr style="padding: 20px"><td></td><td></td></tr></table> +<table class="rtl"><tr style="margin: 20px"><td></td><td></td></tr></table> + +<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table> +<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/rules-groups-ref.html b/testing/web-platform/tests/css/css-tables/rules-groups-ref.html new file mode 100644 index 0000000000..8da4884f80 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/rules-groups-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS reference: legacy table rules attribute</title> + +<style> +table { margin: 1em 1em 2em 1em; border-collapse: collapse; } + +#a thead, #a tbody { border-block-end-width: 1px; border-block-end-style: solid; } +#b thead, #b tbody { border-block-end: 1px solid blue; } +#c thead, #c tbody { border-block-end-width: 5px; border-block-end-style: solid; } +</style> + +<p>Borders between groups should be present:</p> +<table id=a> + <thead><tr><td>head</td></tr></thead> + <tbody> + <tr><td>body</td><td>one</td></tr> + <tr><td>body</td><td>two</td></tr> + </tbody> + <tfoot><tr><td>foot</td></tr></tfoot> +</table> + +<p>Borders between groups should be blue:</p> +<table id=b> + <thead><tr><td>head</td></tr></thead> + <tbody> + <tr><td>body</td><td>one</td></tr> + <tr><td>body</td><td>two</td></tr> + </tbody> + <tfoot><tr><td>foot</td></tr></tfoot> +</table> + +<p>Borders between groups should be 5px thick:</p> +<table id=c> + <thead><tr><td>head</td></tr></thead> + <tbody> + <tr><td>body</td><td>one</td></tr> + <tr><td>body</td><td>two</td></tr> + </tbody> + <tfoot><tr><td>foot</td></tr></tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-tables/rules-groups.html b/testing/web-platform/tests/css/css-tables/rules-groups.html new file mode 100644 index 0000000000..d07aa0b765 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/rules-groups.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Test: legacy table rules attribute</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1832101"> +<link rel="match" href="rules-groups-ref.html"> + +<style> +table { margin: 1em 1em 2em 1em; } + +/* Modify style of the inter-group borders, assuming default UA rules are in effect. */ + +/* With border-block-start suppressed, the block-end border should still appear: */ +#a > * { border-block-start: none; } + +/* Change the color of the border: */ +#b > * { border-block-end-color: blue; } + +/* Change the thickness of the border: */ +#c > * { border-block-end-width: 5px; } +</style> + +<p>Borders between groups should be present:</p> +<table id=a rules=groups> + <thead><tr><td>head</td></tr></thead> + <tbody> + <tr><td>body</td><td>one</td></tr> + <tr><td>body</td><td>two</td></tr> + </tbody> + <tfoot><tr><td>foot</td></tr></tfoot> +</table> + +<p>Borders between groups should be blue:</p> +<table id=b rules=groups> + <thead><tr><td>head</td></tr></thead> + <tbody> + <tr><td>body</td><td>one</td></tr> + <tr><td>body</td><td>two</td></tr> + </tbody> + <tfoot><tr><td>foot</td></tr></tfoot> +</table> + +<p>Borders between groups should be 5px thick:</p> +<table id=c rules=groups> + <thead><tr><td>head</td></tr></thead> + <tbody> + <tr><td>body</td><td>one</td></tr> + <tr><td>body</td><td>two</td></tr> + </tbody> + <tfoot><tr><td>foot</td></tr></tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-001.html b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-001.html new file mode 100644 index 0000000000..a74e7a104c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#collapsing-borders"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#border-conflict-resolution-algorithm"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/606"> +<link rel="match" href="subpixel-collapsed-borders-ref.html"> +<meta name="assert" content="When collapsed border tables have border widths larger than cells', the table border wins." /> + +<style> +table { + border: 5px solid green; + border-collapse: collapse; +} + +td { + width: 50px; + height: 50px; + border: 4.95px solid red; +} +</style> + +<p>There should be a square with a green border, not a red border. +</p> + +<table> + <tr> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-002.html b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-002.html new file mode 100644 index 0000000000..e074e21f43 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#collapsing-borders"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#border-conflict-resolution-algorithm"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/606"> +<link rel="match" href="subpixel-collapsed-borders-ref.html"> +<meta name="assert" content="When collapsed border tables have border widths larger than cells', the table border wins even when the cell border is merely 0.01 pixels narrower" /> + +<style> +table { + border: 5px solid green; + border-collapse: collapse; +} + +td { + width: 50px; + height: 50px; + border: 4.99px solid red; +} +</style> + +<p>There should be a square with a green border, not a red border. +</p> + +<table> + <tr> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-003.html b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-003.html new file mode 100644 index 0000000000..601e1006c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#collapsing-borders"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#border-conflict-resolution-algorithm"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/606"> +<link rel="match" href="reference/subpixel-collapsed-borders-003-ref.html"> +<meta name="assert" content="When collapsed border tables have border widths that, after flooring, are equal to cells', the cell border wins." /> + +<style> +table { + border: 5.95px solid red; + border-collapse: collapse; +} + +td { + width: 50px; + height: 50px; + border: 5px solid green; +} +</style> + +<p> + There should be a square with a green border, not a red border. +</p> + +<table> + <tr> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-ref.html b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-ref.html new file mode 100644 index 0000000000..0a2e7a8d95 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-collapsed-borders-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +table { + border: 5px solid green; + border-collapse: collapse; +} + +td { + width: 50px; + height: 50px; + border: 1px solid red; +} +</style> + +<p>There should be a square with a green border, not a red border. +</p> + +<table> + <tr> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-cell-height-001-ref.html b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-height-001-ref.html new file mode 100644 index 0000000000..3b6297fc4a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-height-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +div { + border: 1px solid blue; + width: 120px; + height: 37.4px; +} +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div></div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-cell-height-001.html b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-height-001.html new file mode 100644 index 0000000000..58f837789a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-height-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-values-3/#calc-notation"> +<link rel="match" href="subpixel-table-cell-height-001-ref.html"> +<meta name="assert" content="When a cell has a specified calc height and a block box has the same specified calc height, their actual heights should match." /> + +<style> +td { + border: 1px solid blue; + width: 120px; + height: 37.4px; + padding: 0px; +} +</style> + +<table style="border-spacing:0;"> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-001-ref.html b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-001-ref.html new file mode 100644 index 0000000000..ea2f38b6bb --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<style> + div { + font-size: 0; /* so I can leave spaces between the child divs */ + height: 20px; + } + div > div { + display: inline-block; + } + div > div:first-child { + background: blue; + } + div > div:nth-child(2) { + background: lime; + } +</style> + +<div> + <div style="width:3.6px;"></div> + <div style="width:3.6px;"></div> +</div> + +<br><br> + +<div> + <div style="width:3.3px;"></div> + <div style="width:3.3px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-001.html b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-001.html new file mode 100644 index 0000000000..22bb1f08c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS21/cascade.html#value-stages"> +<link rel="match" href="subpixel-table-cell-width-001-ref.html"> +<meta name="assert" content="When a cell has a specified fractional fixed width and a block has the same specified fractional width, their actual widths should match." /> + +<style> +.table { + display: table; + height: 20px; + background: red; +} +.cell { + display: table-cell; +} +div > div:first-child { + background: blue; +} +div > div:nth-child(2) { + background: lime; +} +</style> + +<div class=table> + <div class=cell style="width:3.6px;"></div> + <div class=cell style="width:3.6px;"></div> +</div> + +<br><br> + +<div class=table> + <div class=cell style="width:3.3px;"></div> + <div class=cell style="width:3.3px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-002.html b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-002.html new file mode 100644 index 0000000000..5ddc9f67e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-cell-width-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS21/cascade.html#value-stages"> +<link rel="match" href="subpixel-table-cell-width-001-ref.html"> +<meta name="assert" content="When a cell has a specified percent width that results in a fractional used width, the cell's actual width should match that of a block whose specified fixed width is the cell's used width" /> + +<style> +.table { + display: table; + height: 20px; + background: red; +} +.cell { + display: table-cell; +} +div > div:first-child { + background: blue; +} +div > div:nth-child(2) { + background: lime; +} +</style> + + +<div class=table style="width:7.2px;"> + <div class=cell style="width:50%;"></div> + <div class=cell style="width:50%;"></div> +</div> + +<br><br> + +<div class=table style="width:6.6px;"> + <div class=cell style="width:50%;"></div> + <div class=cell style="width:50%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-width-001-ref.html b/testing/web-platform/tests/css/css-tables/subpixel-table-width-001-ref.html new file mode 100644 index 0000000000..277a3274a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-width-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +.parent div { + background: #aaa; + width: 100%; + height: 100px; +} +</style> + +There should be two grey ~squares with no red showing. + +<div class="parent" style="width:100.2px"> + <div></div> +</div> + +<div class="parent" style="width:100.8px"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/subpixel-table-width-001.html b/testing/web-platform/tests/css/css-tables/subpixel-table-width-001.html new file mode 100644 index 0000000000..67b1b7d078 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/subpixel-table-width-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage"> +<link rel="match" href="subpixel-table-width-001-ref.html"> +<meta name="assert" content="A table with width:100% has same actual width as its parent's actual width." /> + +<style> +.parent { + background: red; +} + +.parent table { + background: #aaa; + width: 100%; + height: 100px; +} +</style> + +There should be two grey ~squares with no red showing. + +<div class="parent" style="width:100.2px"> + <table></table> +</div> + +<div class="parent" style="width:100.8px"> + <table></table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/support/base.css b/testing/web-platform/tests/css/css-tables/support/base.css new file mode 100644 index 0000000000..52be1bb4e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/support/base.css @@ -0,0 +1,21 @@ +/* custom table tags */ + + x-table { display: table; } + x-colgroup { display: table-column-group; } + x-col { display: table-column; } + x-tbody { display: table-row-group; } + x-thead { display: table-header-group; } + x-tfoot { display: table-footer-group; } + x-tr { display: table-row; } + x-td { display: table-cell; } + x-caption { display: table-caption; } + +/* layout of the page */ + + hr + p { font-weight: bold; margin-bottom: 0; } + p + p { margin-top: 0; } + + html, body { padding: 0; margin: 0; } + main, #log { padding: 10px; width: 50%; box-sizing: border-box; } + main { float: left; } + #log { float: right; background: #eee; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/table-cell-baseline-static-position.html b/testing/web-platform/tests/css/css-tables/table-cell-baseline-static-position.html new file mode 100644 index 0000000000..e3f5236645 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-baseline-static-position.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1206654" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<style> +table { + width: 100px; + height: 100px; + position: relative; + line-height: 0; + border-spacing: 0; +} +td { + vertical-align: baseline; + width: 50px; + padding: 0; +} +div { + width: 50px; + height: 100px; + background: green; +} +</style> +<p>Test passes if there is a filled green square.</p> +<table> + <td> + <div style="display: inline-block;"></div> <!-- Creates a baseline at 100px. --> + </td> + <td> + <div style="position: absolute;"></div> <!-- Static-position shouldn't shift to the baseline. --> + </td> +</table> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-child-overflow-measure-ref.html b/testing/web-platform/tests/css/css-tables/table-cell-child-overflow-measure-ref.html new file mode 100644 index 0000000000..d4e3ec6a91 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-child-overflow-measure-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green;"> + <div style="overflow: auto; height: 100%;"> + <div style="height: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-child-overflow-measure.html b/testing/web-platform/tests/css/css-tables/table-cell-child-overflow-measure.html new file mode 100644 index 0000000000..c092d0c1bc --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-child-overflow-measure.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1210436"> +<link rel="match" href="table-cell-child-overflow-measure-ref.html"> +<div style="width: 100px; height: 100px; display: table-cell; background: green;"> + <div style="overflow: auto; height: 100%;"> + <div style="height: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-ref.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-ref.html new file mode 100644 index 0000000000..695ba5341e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; border: solid;"> + <div style="max-width: 100px; height: 100px; background: green; overflow-x: scroll;"> + <div style="width: 120px; height: 50px; background: hotpink;"></div> + </div> +</div> +<br> +<div style="width: 100px; height: 100px; border: solid;"> + <div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: scroll; vertical-align: middle;"> + <div style="width: 120px; height: 50px; background: hotpink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-scrolled-ref.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-scrolled-ref.html new file mode 100644 index 0000000000..7429cadf7d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-scrolled-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; border: solid; box-sizing: border-box"> + <div id="cell" style="width: 100%; height: 100%; background: green; overflow: auto"> + <div style="width: 200px; height: 50px; background: hotpink; border: 2px solid yellow"></div> + </div> +</div> +<script> +onload = () => { + cell.scrollLeft = 120; +} +</script> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-scrolled.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-scrolled.html new file mode 100644 index 0000000000..e31a7805c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto-scrolled.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#bounding-box-assignment"> +<link rel="match" href="table-cell-overflow-auto-scrolled-ref.html"> +<meta name="assert" content="Table cell with overflow:auto and overflowing contents is scrollable"> +<table style="table-layout: fixed; width: 100px; height: 100px; border: solid; border-spacing: 0"> + <tr> + <td id="cell" style="background: green; overflow: auto; vertical-align: top; padding: 0"> + <div style="width: 200px; height: 50px; background: hotpink; border: 2px solid yellow"></div> + </td> + </tr> +</table> +<script> +onload = () => { + cell.scrollLeft = 120; +} +</script> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto.html b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto.html new file mode 100644 index 0000000000..6b688561b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-overflow-auto.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout"> +<link rel="match" href="table-cell-overflow-auto-ref.html"> +<meta name="assert" content="horizontal scrollbars show up on table-cells with overflowing content and overflow:auto, vertical-align: middle/top" /> +<div style="width: 100px; height: 100px; border: solid;"> + <div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: auto; vertical-align: top;"> + <div style="width: 120px; height: 50px; background: hotpink;"></div> + </div> +</div> +<br> +<div style="width: 100px; height: 100px; border: solid;"> + <div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: auto; vertical-align: middle;"> + <div style="width: 120px; height: 50px; background: hotpink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-scroll-height.html b/testing/web-platform/tests/css/css-tables/table-cell-scroll-height.html new file mode 100644 index 0000000000..6ebaf7ad6a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-scroll-height.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollheight"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1876745"> +<div id="target" style="display: table-cell; height: 100px; overflow: hidden"></div> +<script> + test(() => { + assert_equals(target.scrollHeight, 100); + }, `scrollHeight on scrollable table cell`); +</script> diff --git a/testing/web-platform/tests/css/css-tables/table-cell-writing-mode-computed.html b/testing/web-platform/tests/css/css-tables/table-cell-writing-mode-computed.html new file mode 100644 index 0000000000..28e9db2d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-cell-writing-mode-computed.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Computed value of orthogonal writing-mode on table cell</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="help" href="https://www.w3.org/TR/css-tables-3"> +<link rel="help" href="https://crbug.com/1307976"> +<style> + td { + writing-mode: vertical-lr; + } +</style> + +<table> + <tr> + <td>Test</td> + </tr> +</table> + +<script> + test(() => { + let td = document.querySelector('td'); + assert_equals(getComputedStyle(td).writingMode, 'vertical-lr'); + }, 'Computed value of orthogonal writing-mode on table cell'); +</script> diff --git a/testing/web-platform/tests/css/css-tables/table-has-box-sizing-border-box-001.html b/testing/web-platform/tests/css/css-tables/table-has-box-sizing-border-box-001.html new file mode 100644 index 0000000000..570065c697 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-has-box-sizing-border-box-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=598134" /> +<meta name="assert" content="default box-sizing for <table> is border-box" /> +<title> +UA stylesheet, <table>, box-sizing +</title> + +<style> +#table { + width: 100px; + height: 100%; + background: green; + padding-bottom: 35px; +} +</style> + +<p>Test passes if there is a filled green square. +</p> +<div style="height:100px"> + <table id="table"></table> +</div> diff --git a/testing/web-platform/tests/css/css-tables/table-has-box-sizing-border-box-002.html b/testing/web-platform/tests/css/css-tables/table-has-box-sizing-border-box-002.html new file mode 100644 index 0000000000..bd78f304db --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-has-box-sizing-border-box-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=598134" /> +<meta name="assert" content="default <table> box-sizing:border-box is not applied to non-table elements that have display:table" /> +<title> +UA stylesheet, <table>, box-sizing +</title> + +<style> +#table { + display: table; + width: 100px; + height: 100%; + background: green; + padding-bottom: 35px; +} + +#redSquare { + height: 100px; + width: 100px; + background-color: red; + position: absolute; + z-index: -1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div id="redSquare"></div> +<div style="height:65px"> + <div id="table"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/table-model-fixup-2.html b/testing/web-platform/tests/css/css-tables/table-model-fixup-2.html new file mode 100644 index 0000000000..9f14e7ecc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-model-fixup-2.html @@ -0,0 +1,398 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#table-structure"> +<!-- +Quote from the spec link above: + +"Authors should not assign a display type from the previous list to replaced elements (eg: input fields or images). When the display property of a replaced element computes to one of these values, it is handled instead as though the author had declared either block (for table display) or inline (for all other values). Whitespace collapsing and box generation must happen around those replaced elements like if they never had any table-internal display value applied to them, and had always been block or inline." + +So, all the replaced elements tested below should behave as 'inline', except the ones with a computed value of 'table' which should behave as 'block'. + +Per CSSWG resolution in: https://github.com/w3c/csswg-drafts/issues/508#issuecomment-319891999 +--> +<style> + [inline] { display: inline !important; } + [block] { display: block !important; } + [inline-table] { display: inline-table !important; } + [table] { display: table !important; } + [table-row] { display: table-row !important; } + [table-cell] { display: table-cell !important; } + [table-column] { display: table-column !important; } + [table-row-group] { display: table-row-group !important; } + [table-header-group] { display: table-header-group !important; } + [table-footer-group] { display: table-footer-group !important; } + [table-column-group] { display: table-column-group !important; } + [table-caption] { display: table-caption !important; } + div > x-table { background: yellow; border-spacing: 10px } + div input { width: 100px; } +</style> +<script> + window.addEventListener("DOMContentLoaded", function(){ + var tests = document.getElementsByTagName("hr"); + for (var i = 0; i < tests.length; i++) { + (function(){ + var desc = tests[i].nextElementSibling.nextElementSibling; + var root = desc.nextElementSibling; + var t = async_test(desc.textContent); + window.addEventListener("load", t.step_func_done(function() { + var a = root.querySelector("[target=a]"); + var b = root.querySelector("[target=b]"); + var offset = root.getAttribute("offset"); + var a_offset = a.getBoundingClientRect()[offset]; + var b_offset = b.getBoundingClientRect()[offset]; + if (root.hasAttribute("unequal")) { + assert_not_equals(b_offset, a_offset); + } else { + assert_equals(b_offset, a_offset); + } + })); + })(); + } + }); +</script> + +<main> + + <h1>Table fixup</h1> + <p>Check that replaced elements display types are handled properly in fixup</p> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both input fields should look identical, on their own line:</p> + <p>Replaced elements inside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- input elements (width)</p> + <div offset=width> + <x-table style="width: 400px"> + <x-tr><x-td><input block target=a /></x-tr> + <input table-row target=b /> + </x-table> + </div> + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both input fields should look identical and be on the same line:</p> + <p>Replaced elements inside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- input elements (top)</p> + <div offset=top> + <x-table style="width: 400px"> + <x-tr><x-td></x-tr> + <input table-row target=a /><input table-row target=b /> + </x-table> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should look identical, on their own line:</p> + <p>Replaced elements inside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- img elements (width)</p> + <div offset=width> + <x-table style="width: 400px"> + <x-tr><x-td><img block src="../support/blue32x32.ico" target=a /></x-tr> + <img src="../support/blue32x32.ico" table-row target=b /> + </x-table> + </div> + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should look identical and be on the same line:</p> + <p>Replaced elements inside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- img elements (top)</p> + <div offset=top> + <x-table style="width: 400px"> + <x-tr><x-td></x-tr> + <img table-row src="../support/blue32x32.ico" target=a /><img src="../support/blue32x32.ico" table-row target=b /> + </x-table> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both input fields should look identical, on their own line:</p> + <p>Replaced elements inside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- input elements (width)</p> + <div offset=width> + <x-table style="width: 400px"> + <x-tr><x-td><input inline target=a /></x-tr> + <input table-column target=b /> + </x-table> + </div> + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both input fields should look identical and be on the same line:</p> + <p>Replaced elements inside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- input elements (top)</p> + <div offset=top> + <x-table style="width: 400px"> + <x-tr><x-td></x-tr> + <input table-column target=a /><input table-column target=b /> + </x-table> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should look identical, on their own line:</p> + <p>Replaced elements inside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- img elements (width)</p> + <div offset=width> + <x-table style="width: 400px"> + <x-tr><x-td><img inline src="../support/blue32x32.ico" target=a /></x-tr> + <img src="../support/blue32x32.ico" table-column target=b /> + </x-table> + </div> + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should look identical and be on the same line:</p> + <p>Replaced elements inside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- img elements (top)</p> + <div offset=top> + <x-table style="width: 400px"> + <x-tr><x-td></x-tr> + <img table-column src="../support/blue32x32.ico" target=a /><img src="../support/blue32x32.ico" table-column target=b /> + </x-table> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both input fields should look identical, on their own line:</p> + <p>Replaced elements inside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- input elements (width)</p> + <div offset=width> + <x-table style="width: 400px"> + <x-tr><x-td><input inline target=a /></x-tr> + <x-tr><input table-cell target=b /></x-tr> + </x-table> + </div> + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both input fields should look identical and be on the same line:</p> + <p>Replaced elements inside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- input elements (top)</p> + <div offset=top> + <x-table style="width: 400px"> + <x-tr><input table-cell target=a /><input table-cell target=b /></x-tr> + </x-table> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should look identical, on their own line:</p> + <p>Replaced elements inside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- img elements (width)</p> + <div offset=width> + <x-table style="width: 400px"> + <x-tr><x-td><img inline src="../support/blue32x32.ico" target=a /></x-tr> + <x-tr><img src="../support/blue32x32.ico" table-cell target=b /></x-tr> + </x-table> + </div> + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should look identical and be on the same line:</p> + <p>Replaced elements inside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- img elements (top)</p> + <div offset=top> + <x-table style="width: 400px"> + <x-tr><x-td></x-tr> + <x-tr><img table-cell src="../support/blue32x32.ico" target=a /><img src="../support/blue32x32.ico" table-cell target=b /></x-tr> + </x-table> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>inline-table</mark> and are considered <mark>inline</mark> -- input=text elements</p> + <div offset=top> + <input inline-table target=a /> + <input inline-table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>inline-table</mark> and are considered <mark>inline</mark> -- input=button elements</p> + <div offset=top> + <input type=button inline-table target=a /> + <input type=button inline-table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>inline-table</mark> and are considered <mark>inline</mark> -- input=file elements</p> + <div offset=top> + <input type=file inline-table target=a /> + <input type=file inline-table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>inline-table</mark> and are considered <mark>inline</mark> -- img elements</p> + <div offset=top> + <img src="../support/blue32x32.ico" inline-table target=a /> + <img src="../support/blue32x32.ico" inline-table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should stand on their own line:</p> + <p>Replaced elements outside a table cannot be <mark>table</mark> and are considered <mark>block</mark> -- input=text elements</p> + <div offset=top unequal> + <input type=text table target=a /> + <input type=text table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should stand on their own line:</p> + <p>Replaced elements outside a table cannot be <mark>table</mark> and are considered <mark>block</mark> -- input=button elements</p> + <div offset=top unequal> + <input type=button table target=a /> + <input type=button table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should stand on their own line:</p> + <p>Replaced elements outside a table cannot be <mark>table</mark> and are considered <mark>block</mark> -- input=file elements</p> + <div offset=top unequal> + <input type=file table target=a /> + <input type=file table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should stand on their own line:</p> + <p>Replaced elements outside a table cannot be <mark>table</mark> and are considered <mark>block</mark> -- img elements</p> + <div offset=top unequal> + <img src="../support/blue32x32.ico" table target=a /> + <img src="../support/blue32x32.ico" table target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- input=text elements</p> + <div offset=top> + <input type=text table-row target=a /> + <input type=text table-row target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- input=button elements</p> + <div offset=top> + <input type=button table-row target=a /> + <input type=button table-row target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- input=file elements</p> + <div offset=top> + <input type=file table-row target=a /> + <input type=file table-row target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row</mark> and are considered <mark>inline</mark> -- img elements</p> + <div offset=top> + <img src="../support/blue32x32.ico" table-row target=a /> + <img src="../support/blue32x32.ico" table-row target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row-group</mark> and are considered <mark>inline</mark> -- input=text elements</p> + <div offset=top> + <input type=text table-row-group target=a /> + <input type=text table-row-group target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row-group</mark> and are considered <mark>inline</mark> -- input=button elements</p> + <div offset=top> + <input type=button table-row-group target=a /> + <input type=button table-row-group target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row-group</mark> and are considered <mark>inline</mark> -- input=file elements</p> + <div offset=top> + <input type=file table-row-group target=a /> + <input type=file table-row-group target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-row-group</mark> and are considered <mark>inline</mark> -- img elements</p> + <div offset=top> + <img src="../support/blue32x32.ico" table-row-group target=a /> + <img src="../support/blue32x32.ico" table-row-group target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> inline -- input=text elements</p> + <div offset=top> + <input table-column target=a /> + <input table-column target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- input=button elements</p> + <div offset=top> + <input type=button table-column target=a /> + <input type=button table-column target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- input=file elements</p> + <div offset=top> + <input type=file table-column target=a /> + <input type=file table-column target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-column</mark> and are considered <mark>inline</mark> -- img elements</p> + <div offset=top> + <img src="../support/blue32x32.ico" table-column target=a /> + <img src="../support/blue32x32.ico" table-column target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- input=text elements</p> + <div offset=top> + <input table-cell target=a /> + <input table-cell target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- input=button elements</p> + <div offset=top> + <input type=button table-cell target=a /> + <input type=button table-cell target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- input=file elements</p> + <div offset=top> + <input type=file table-cell target=a /> + <input type=file table-cell target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-cell</mark> and are considered <mark>inline</mark> -- img elements</p> + <div offset=top> + <img src="../support/blue32x32.ico" table-cell target=a /> + <img src="../support/blue32x32.ico" table-cell target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both text inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-caption</mark> and are considered <mark>inline</mark> -- input=text elements</p> + <div offset=top> + <input table-caption target=a /> + <input table-caption target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both button inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-caption</mark> and are considered <mark>inline</mark> -- input=button elements</p> + <div offset=top> + <input type=button table-caption target=a /> + <input type=button table-caption target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both file inputs should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-caption</mark> and are considered <mark>inline</mark> -- input=file elements</p> + <div offset=top> + <input type=file table-caption target=a /> + <input type=file table-caption target=b /> + </div> + + <hr/><!------------------------------------------------------------------------------------------------------------> + <p>Both images should share the same line:</p> + <p>Replaced elements outside a table cannot be <mark>table-caption</mark> and are considered <mark>inline</mark> -- img elements</p> + <div offset=top> + <img src="../support/blue32x32.ico" table-caption target=a /> + <img src="../support/blue32x32.ico" table-caption target=b /> + </div> + +</main> diff --git a/testing/web-platform/tests/css/css-tables/table-model-fixup.html b/testing/web-platform/tests/css/css-tables/table-model-fixup.html new file mode 100644 index 0000000000..13af8b9db4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-model-fixup.html @@ -0,0 +1,125 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='./support/base.css' /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fixup"> +<main> + + <h1>Table fixup</h1> + <p>Check that missing elements are being created properly</p> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>1.1. Children of a table-column are treated as if they had display: none.</p> + <div style="width: 100px; height: 100px; background: blue;"><x-col><div id="target1" style="display: block!important; visibility: visible!important; width: 100px; height: 100px; background: red;"></div></x-col></div> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>1.2. Children of a table-column-group which are not a table-column are treated as if they had display: none.</p> + <div style="width: 100px; height: 100px; background: blue;"><x-colgroup><div id="target2" style="display: block!important; visibility: visible!important; width: 100px; height: 100px; background: red;"></div></x-colgroup></div> + + <hr/> + <p>This should be a 100px by 100px blue square:</p> + <p>2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. </p> + <x-table><x-td id="target3" style="width: 50%; height: 0px; background: blue;"></x-td> <x-td style="width: 50px; height: 100px; background: blue;"></x-td></x-table> + + <hr/> + <p>This should read as "1\t2\t3\n x":</p> + <p>2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes.</p> + <x-table><x-tbody> + <span id="target4a">1</span> + <x-col style="width: 100px"></x-col> + <x-td id="target4b">2</x-td> + <span id="target4c">3</span> + <x-caption id="target4d">x</x-caption> + </x-tbody><x-col style="width: 50px"></x-col><x-col style="width: 50px"></x-col><x-col style="width: 50px"></x-col></x-table> + + <hr/> + <p>This should read as "1\n1\t2":</p> + <p>2.1. and 2.2. happens before 2.3.</p> + <x-table> + <span id="target5a">1</span> + <x-col style="width: 50px"></x-col> + <x-td id="target5b">1</x-td> + <span id="target5c">2</span> + </x-table> + + <hr/> + <p>This should read as "1\t2":</p> + <p>3.2. An anonymous table or inline-table box must be generated around each sequence of consecutive proper table child box which are misparented</p> + <table><tr><td id="target6a">1</td><td style="display: table-caption" id="target6b">2</td></tr><col style="width: 50px"></x-col></table> + + <hr/> + <p>This should read as "A B":</p> + <p>1.4. Anonymous inline boxes which contains only white space and are between two immediate siblings *each* of which is a table-non-root element, are treated as if they had display: none.</p> + <x-table><x-tr> <span id="target7a">A</span> <span id="target7b">B</span> </x-tr></x-table> + +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + "1.1. Children of a table-column are treated as if they had display: none.", + document.querySelector("div[style*='red']#target"+(i++)+"").offsetWidth, + 0 + ], + [ + "1.2. Children of a table-column-group which are not a table-column are treated as if they had display: none.", + document.querySelector("div[style*='red']#target"+(i++)+"").offsetWidth, + 0 + ], + [ + "2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. (1/2)", + document.querySelector("#target"+(i++)+"").offsetWidth, + 50 + ], + [ + "2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. (2/2)", + document.querySelector("#target"+(i-1)+"").offsetHeight, + 100 + ], + [ + "2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (1/3)", + document.querySelector("#target"+(i++)+"b").offsetLeft - document.querySelector("#target"+(i-1)+"a").offsetLeft, + 50 + ], + [ + "2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (2/3)", + document.querySelector("#target"+(i-1)+"c").offsetLeft - document.querySelector("#target"+(i-1)+"a").offsetLeft, + 100 + ], + [ + "2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (3/3)", + document.querySelector("#target"+(i-1)+"d").offsetLeft, + document.querySelector("#target"+(i-1)+"c").offsetLeft + ], + [ + "2.3 happens after 2.1. and 2.2. (1/2)", + document.querySelector("#target"+(i++)+"b").offsetLeft < 25, + true + ], + [ + "2.3 happens after 2.1. and 2.2. (2/2)", + document.querySelector("#target"+(i-1)+"c").offsetLeft > 50, + true + ], + [ + "3.2. An anonymous table or inline-table box must be generated around each sequence of consecutive proper table child box which are misparented", + document.querySelector("#target"+(i++)+"b").offsetLeft > document.querySelector("#target"+(i-1)+"a").offsetLeft, + true + ], + [ + "1.4. Anonymous inline boxes which contains only white space and are between two immediate siblings *each* of which is a table-non-root element, are treated as if they had display: none.", + document.querySelector("#target"+(i++)+"b").offsetLeft > 1 + document.querySelector("#target"+(i-1)+"a").offsetLeft + document.querySelector("#target"+(i-1)+"a").offsetWidth, + true + ], + ]) + +</script> diff --git a/testing/web-platform/tests/css/css-tables/table-position-sticky-computed.html b/testing/web-platform/tests/css/css-tables/table-position-sticky-computed.html new file mode 100644 index 0000000000..b0116aefb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table-position-sticky-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Computed value of position:sticky for table elements</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="help" href="https://www.w3.org/TR/css-tables-3"> +<link rel="help" href="https://crbug.com/1307976"> +<style> + table * { + position: sticky; + } +</style> + +<table> + <thead> + </thead> + <tbody> + <tr> + <td>Test</td> + </tr> + </tbody> + <tfoot> + </tfoot> +</table> + +<script> + for (let element of document.querySelectorAll('table *')) { + test(() => { + assert_equals(getComputedStyle(element).position, 'sticky'); + }, `Computed value of position:sticky on ${element.tagName}`); + } +</script> diff --git a/testing/web-platform/tests/css/css-tables/table_grid_size_col_colspan-ref.html b/testing/web-platform/tests/css/css-tables/table_grid_size_col_colspan-ref.html new file mode 100644 index 0000000000..160b9975ef --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table_grid_size_col_colspan-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<style> + table { + border-collapse: collapse; + table-layout:fixed; + } + td { + height:50px; + background: yellow; + border: 10px solid green; + padding:0; + } +</style> +<table> + <td style="width:40px"></td> +</table> +<table> + <td style="width:90px"></td> +</table> +<table> + <td style="width:140px"></td> +</table> +<table> + <td style="width:40px"></td> +</table> +<table> + <td style="width:40px"></td> +</table> + diff --git a/testing/web-platform/tests/css/css-tables/table_grid_size_col_colspan.html b/testing/web-platform/tests/css/css-tables/table_grid_size_col_colspan.html new file mode 100644 index 0000000000..2ac3e1032f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/table_grid_size_col_colspan.html @@ -0,0 +1,50 @@ +<!doctype html> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid"> +<link rel="match" href="table_grid_size_col_colspan-ref.html"> +<meta name="assert" content="colspanned cell fits inside grid defined by COL" /> +<style> + table { + border-collapse: collapse; + table-layout:fixed; + } + td { + height:50px; + background: yellow; + border: 10px solid green; + padding:0; + } + col { + width:50px; + } +</style> +<!-- + <p>Colspanned cell should not grow bigger than table grid.</p> + <p>Test sizes of colspanned cell when grid width is defined by COL elements</p> +--> +<table> + <col></col> + <col></col> + <col></col> + <td colspan=1></td> +</table> +<table> + <col></col> + <col></col> + <col></col> + <td colspan=2></td> +</table> +<table> + <col></col> + <col></col> + <col></col> + <td colspan=4></td> +</table> +<table> + <col></col> + <td colspan=1></td> +</table> +<table> + <col></col> + <td colspan=2></td> +</table> + diff --git a/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html b/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html new file mode 100644 index 0000000000..1507bf656f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html @@ -0,0 +1,179 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="flags" content="ahem"> +<title>TABLE baseline</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/" /> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" /> +<style> + main table { + display: inline-table; + border: 15px solid green; + background: gray; + width: 0px; + height: 0px; + vertical-align:baseline; + border-spacing: 0; + } + main td { + background: #BFB; + padding: 4px; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } + .container { + position: relative; + outline: black dotted 1px; + height: 100px; + width: 400px; + font: 50px/1 Ahem; /* baseline is 40px */ + } +</style> +<main> +<h2><TABLE> baseline tests</h2> + +<p>Empty table's baseline is bottom of table's border box.</p> +<div class="container"> + Xp<table data-offset-y="10"> + </table> +</div> + +<p>Empty body's baseline is bottom of table's border box.</p> +<div class="container"> + Xp<table data-offset-y="10"> + <tbody> + </tbody> + </table> +</div> + +<p>Empty row's baseline is center of the row.</p> +<div class="container"> + Xp<table data-offset-y="25"> + <tbody> + <tr></tr> + </tbody> + </table> +</div> + +<p>First row defines baseline even if empty.</p> +<div class="container"> + Xp<table style="font: 12px fixed" data-offset-y="25"> + <tbody> + <tr></tr> + <tr><td>1,0</td></tr> + </tbody> + </table> +</div> + +<p>Cell's baseline defined row's baseline only if cell is vertical-align:baseline.</p> +<div class="container"> + Xp<table style="font-size: 24px" data-offset-y="2"> + <tbody> + <tr><td style="vertical-align:baseline">Xp</td></tr> + </tbody> + </table></div> +</div> +<div class="container"> + Xp<table style="font-size:24px" data-offset-y="0"> + <tbody> + <tr><td style="vertical-align:middle">Xp</td></tr> + </tbody> + </table> +</div> + + +<p>Table's vertical-align: top.</p> +<div class="container"> + Xp<table style="vertical-align:top" data-offset-y="0"></table> +</div> + +<p>Table's vertical-align: middle. </p> +<div class="container"> + Xp<table style="vertical-align:middle" data-offset-y="5"></table> +</div> + +<p>Table's vertical-align: bottom. </p> +<div class="container"> + Xp<table style="vertical-align:bottom" data-offset-y="20"></table> +</div> + +<p>Table's top/middle/bottom combined. </p> +<div class="container"> + Xp<table style="vertical-align:top" data-offset-y="0"></table> + <table style="vertical-align:middle" data-offset-y="5"></table> + <table style="vertical-align:bottom" data-offset-y="20"></table> +</div> + +<p>Two rows empty, 1st row has css height.</p> +<div class="container"> + Xp<table data-offset-y=25 data-expected-height=50> + <tr style="height:20px"></tr> + <tr></tr> + </table> +</div> + +<p>First row empty with css height, 2 row has content, </p> +<div class="container"> + Xp<table data-offset-y=25 data-expected-height=68> + <tr style="height:20px"></tr> + <tr><td style="font-size:10px">X</td></tr> + </table> +</div> + +<p>Empty rowspanned cells should not set baseline. This test might not be per-spec, distribution of empty cells over empty rows differs between browsers.</p> +<div class="container"> + Xp<table> + <tr> + <td rowspan=2 style="height:80px"></td> + <td></td> + </tr> + <tr> + <td></td> + </tr> + </table><div style="display:inline-block" data-offset-y=15>pX</div> +</div> + +<p>Block level table inside inline block does not produce a baseline.</p> +<div class="container" style="font: 10px/1 Ahem;width:500px"> + Xp<br>Xp<table + title="inline table produces a baseline" + data-offset-y=33><td style="vertical-align:baseline">Xp</td></table> + <div style="display:inline-block;height:50px;background:yellow;width:50px;" + title="empty inline block baseline is bottom of the block" + data-offset-y=10 + ></div> + <div style="display:inline-block;height:50px;background:yellow;width:50px;" + title="inline block's content defines its baseline" + data-offset-y=52 + >X</div> + <div style="display:inline-block;height:50px;background:yellow" + title="table inside inline block does not produce a baseline" + data-offset-y=10 + ><table style="display:table"><td style="vertical-align:baseline">X</td></table></div> + <div style="display:inline-block;height:50px;background:yellow" + title="but inline table inside inline block does produce a baseline" + data-offset-y=33 + ><table style="display:inline-table"><td style="vertical-align:baseline">X</td></table></div> +</div> + +<!-- anonymous-table-no-baseline-align replica --> +<p>Anonymous tables should not generate baselines</p> +<div class="container">Xp + <div style="height:60px;width:100px;display:inline-block;background:green" + data-offset-y=0> + <div style="display:table-cell;vertical-align:middle;color:yellow"> </div> + </div> + <div style="height:60px;width:100px;display:inline-block;background:green" + data-offset-y=0> + <div style="display:table-cell;vertical-align:middle;color:yellow">> <br> <br></div> + </div> +</div> +</main> +<script> + checkLayout(".container"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html b/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html new file mode 100644 index 0000000000..4090c5db64 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html @@ -0,0 +1,124 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="flags" content="ahem"> +<title>TD baseline</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/" /> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" /> +<style> + table { + background: #AAA; + border-spacing: 8px 0px; + } + td { + padding: 0; + background: #BFB; + } + .ahem { + font: 25px/2 Ahem; + } + .ahem td, .ahem .display-cell { + font: 25px/2 Ahem; + color: rgba(0,120,0, 0.5); + } + .vgrad { + background: linear-gradient(180deg, #DDD 0%, #DDD 60%, #999 60%, #999 100%) !important; + } + .m { + display:inline-block; + } + .display-table { + display:table; + background: #AAA; + border-spacing: 8px 0px; + } + .display-cell { + display:table-cell; + padding: 0; + } +</style> +<main> +<h2><TD> baseline tests</h2> + +<p class="testdesc">All the baseline values. +Many text values map to plain baseline. </p> +<table style="height:100px" class="ahem vgrad"> + <td style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></td> + <td style="" title="default"><div class="m" data-offset-y=25>Xp</div></td> + <td style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></td> + <td style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></td> + <td style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></td> + <td style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></td> + <td style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></td> + <td style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></td> + <td style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></td> + <td style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></td> + <td style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></td> + <td style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></td> +</table> + +<p class="testdesc">All the baseline values. +Same as test before, but use display:table/table-cell. Default td alignment is baseline, not middle.</p> +<div style="height:100px;position:relative" class="ahem vgrad display-table"> + <div class="display-cell" style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></div> + <div class="display-cell" style="" title="default"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></div> + <div class="display-cell" style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></div> + <div class="display-cell" style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></div> + <div class="display-cell" style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></div> + <div class="display-cell" style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></div> +</div> + + +<p class="testdesc">Baselines with %ge children</p> +<p class="error">FF/Edge fails here</p> +<div> + inline table + <table style="height:100px;position:relative;display:inline-table"> + <td style="vertical-align:baseline"> + <div style="width:100px;height:50%;background:rgba(0,120,0, 0.5)" data-offset-y=30></div> + </td> + <td style="vertical-align:baseline"> + <div style="width:100px;height:80%;background:rgba(0,120,0, 0.5)" data-offset-y=0></div> + </td> + </table> +</div> +<p class="testdesc">Baseline and td height +If td is baseline aligned, and has a height, how tall should the td be? +</p> +<p class="error">Legacy/FF apply height to below baseline?. With baseline alignment, this makes the cell taller.</p> +<table style="border: 1px solid black" data-expected-height=202> + <tr> + <td style="vertical-align:baseline;height:200px">base</td> + <td style="vertical-align:baseline"> + <div style="background:yellow;width:50px;height:100px"></div> + </td> + </tr> +</table> + +<p class="testdesc">Baseline of rowspanned cell +rowspanned td's should contribute to baseline, but not to the row height.</p> +<table class="ahem"> + <tr data-expected-height=100> + <td style="vertical-align:baseline;height:100px;background-color:#DFD;">Xp</td> + <td style="vertical-align:baseline;font-size:40px;line-height:1.5" rowspan=2><div class="m">Xp</div><br>Xp<br>Xp</td> + </tr> + <tr data-expected-height=100> + <td style="vertical-align:baseline;height:100px">Xp</td> + </tr> +</table> + +</main> +<script> + checkLayout("table, .display-table"); +</script> + diff --git a/testing/web-platform/tests/css/css-tables/tentative/caption.html b/testing/web-platform/tests/css/css-tables/tentative/caption.html new file mode 100644 index 0000000000..e733285901 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/caption.html @@ -0,0 +1,137 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<title>caption</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-caption-element"/> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#bounding-box-assignment" /> +<style> + main table { + border-spacing: 0 0; + position:relative; + background: gray; + } + main td { + background: #BFB; + } + main caption { + background: yellow; + } + main caption > div { + display: inline-block; + background: rgba(0,0,0,0.1); + } + main caption > div:after { + content: "c"; + } + .lh { + line-height:30px; + } +</style> +<h1>Caption sizing and positioning</h1> +<p class="error">There is a fundamental disagreement between Chrome Legacy and Firefox on caption size influence on table width. Chrome uses caption min width as lower limit of table's grid box, FF does not. Firefox also does not support multiple captions.</p> + +<main> + +<h2>Caption width limits</h2> + +<p class="testdesc">Caption minmax and grid width +caption.min is lower limit of grid min.</p> +<table> + <caption data-expected-width=50><div style="width:50px"></div><div style="width:30px"></caption> + <td data-expected-width=50>auto</td> +</table> + +<p class="testdesc">Caption.min vs caption.css_width +Caption.css_width is upper limit of caption.min +Caption.css_width is lower limit of caption.min +</p> +<table> + <caption style="width:100px" data-expected-width=100><div style="width:200px"></div></caption> + <td data-expected-width=100>auto</td> +</table> +<table> + <caption style="width:300px" data-expected-width=300><div style="width:200px"></div></caption> + <td data-expected-width=300>auto</td> +</table> + + +<p class="testdesc">Caption width:50% +Percent width is resolved wrt to table width.</p> +<table style="width:200px"> + <caption style="width:50%" data-expected-width=100><div></div></caption> + <td data-expected-width=200>auto</td> +</table> + +<table style="width:200px"> + <caption style="width:50%" data-expected-width=100><div style="width:200px"></div></caption> + <td data-expected-width=200>auto</td> +</table> + +<p class="testdesc">Caption and size of empty table + Larger of table borders, and caption min size.</p> +<table style="border:50px solid green;border-spacing:10px" data-expected-width=100> + <caption><div style="width:50px">c</div><div style="width:50px">c</div></caption> +</table> + +<p class="testdesc">Caption height:80% +github spec <a href="https://github.com/w3c/csswg-drafts/issues/4676">issue</a>. +TablesNG will not resolve percentage heights per spec. FF agrees. +</p> +<table style="width:200px;height:100px"> + <caption style="height:80%" data-expected-height=30><div style="height:30px"></div></caption> + <td data-expected-width=200>auto</td> +</table> + +<p class="testdesc">Multiple captions +Do we allow multiple captions? There are 4 in this test.</p> +<table> + <caption class="lh" data-offset-y=0>over1</caption> + <caption class="lh" data-offset-y=30>over2</caption> + <caption class="lh" style="caption-side:bottom" data-offset-y=90>under1</caption> + <caption class="lh" style="caption-side:bottom" data-offset-y=120>under2</caption> + <td class="lh" data-offset-y=60>2 above me, 2 below me?</td> +</table> +<p class="testdesc">Caption margins +Margins between captions do not collapse</p> +<table style="width:200px"> + <caption class="lh" style="margin:20px;" data-offset-y=20 data-offset-x=20>20px margins</caption> + <td data-expected-width=200 data-offset-y=70>1 caption</td> +</table> +<table style="width:200px"> + <caption class="lh" style="margin:20px;" data-offset-y=20 data-offset-x=20>20px margins</caption> + <caption class="lh" style="margin:20px;" data-offset-y=90 data-offset-x=20>20px margins</caption> + <td data-expected-width=200 data-offset-y=140>2 captions</td> +</table> + + +<p class="testdesc">Caption margins auto +auto margins center captions that are less wide than the table. +</p> +<table style="width:200px"> + <caption class="lh" style="margin:auto" data-offset-x=0><div style="width:100px">auto margins</div></caption> + <td data-expected-width=200>1 caption</td> +</table> +<table style="width:200px"> + <caption class="lh" style="margin:auto;width:50%" data-offset-x=50><div style="width:100px">auto margins</div></caption> + <td data-expected-width=200>1 caption</td> +</table> + + +<p class="testdesc">Vertical writing mode caption +</p> +<table> + <caption style="writing-mode:vertical-rl;height:min-content;font:10px Ahem;color:rgba(0,0,0,0.3)" data-expected-height=100 ><div style="height:100px;">vertical</div> caption bigger than table</caption> + <tbody data-offset-y=100> + <td>vertical!</td> + </tbody> +</table> + +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html b/testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html new file mode 100644 index 0000000000..a28a1e204a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html @@ -0,0 +1,88 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<title>col visibility:collapse and minmax sizes</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#visibility-collapse-track-rendering"/> + +<style> + + main table { + right: 0; + display:inline-table; + border: 1px solid black; + } + main col { + visibility:collapse; + } + main td { + width: 200px; + height: 20px; + } + main caption { + background: yellow; + } + main td:nth-child(1) { + background: rgba(255,0,0,0.2); + } + main td:nth-child(2) { + background: rgba(200,200,200,1.0); + } + main table:hover col { + visibility: visible; + } +</style> + +<h1>Interactions between <COL> visiblity:collapse, and table inline size</h1> +<p>What happens to the table size when column collapses? Should the space taken up by the table + remain the same, but the table iteslf should shrink?</p> +<p>Hovering over tables will turn off column collapsing</p> +<main> + +<p style="position:absolute;top:200px;left:0;width: 300px"> +Tables to the right are absolutely positioned</p> +<table id="abs" style="position:absolute;top:200px;right:0"> + <col> + <td style="width:100px"></td> + <td>absolute, right:0</td> +</table> + + <table id="abscaption" style="position:absolute; top:260px;right:0" > + <col> + <caption style="width:250px">caption</caption> + <td></td> + <td>absolute, right:0</td> +</table> + +<p style="margin-top:200px">Inline tables</p> +<table id="caption"> + <col> + <caption style="width:500px">caption</caption> + <td></td> + <td></td> +</table><span style="font-size:50px">after</span> +<p> + +<table id="plain"> + <col> + <td style="width:100px">td</td> + <td></td> +</table><span style="font-size:50px">after</span> + +<p>Table as a flex item</p> + +<div style="display:flex;width:700px"> + +<table id="plain"> + <col> + <td style="width:100px">td</td> + <td></td> +</table> +<div style="flex-grow:1;background-color:yellow"> +</div> +</main> + +<script> + checkLayout("main table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html b/testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html new file mode 100644 index 0000000000..40fbefee20 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html @@ -0,0 +1,122 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<title>COLGROUP/COL</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-col-element" /> +<link rel="help" href="https://stackoverflow.com/questions/29411447/what-does-the-width-attribute-of-colgroup-actually-specify" /> +<style> + main table { + background: gray; + } + + main td { + background: #BFB; + } + + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> +<main> +<h1>Colgroup col widths</h1> +<ol> + <li>colgroup's purpose is to "group" cols</li> + <li>one can think of colgroup as always generating max(colgroup.span,1) cols, unless it has <col> children.</li> + <li>colgroup css_width specifies width of generated cols.</li> + <li>col.css_width can override colgroup width</li> +</ol> +<p class="testdesc">colgroups with spans</p> +<table> + <colgroup width="100px"></colgroup> + <colgroup width="100px" span=3></colgroup> + <td data-expected-width=100>cg1</td> + <td data-expected-width=100>cg2</td> + <td data-expected-width=100>cg2</td> + <td data-expected-width=100>cg2</td> + <td data-expected-width=50><div style="width:50px">50px</div></td> +</table> + +<p class="testdesc">cols with spans</p> +<table> + <col width="100px"> + <col width="100px" span=3> + <td data-expected-width=100>col1</td> + <td data-expected-width=100>col2</td> + <td data-expected-width=100>col2</td> + <td data-expected-width=100>col2</td> + <td data-expected-width=50><div style="width:50px">50px</div></td> +</table> + +<p class="testdesc">colgroups with cols</p> +<table> + <colgroup span=4 style="width:100px"> + <col> + <col style="width:50px"> + <col style="width:150px"> + </colgroup> + <td data-expected-width=100>cg</td> + <td data-expected-width=50>col1</td> + <td data-expected-width=150>col2</td> + <td data-expected-width=50><div style="width:50px">50px</div></td> +</table> + +<p class="testdesc">colgroups with cols with spans</p> +<p class="error">Legacy fails col with span inside colgroup test.</p> +<table> + <colgroup span=3 style="width:100px"> + <col> + <col style="width:50px" span=2> + </colgroup> + <colgroup style="width:66px"> + <col span=2> + </colgroup> + <td data-expected-width=100>cg1</td> + <td data-expected-width=50>col1</td> + <td data-expected-width=50>col1</td> + <td data-expected-width=66>cg2</td> + <td data-expected-width=66>cg2</td> + <td data-expected-width=75><div style="width:75px">50px</div></td> +</table> + +<p class="testdesc">0% cols are ignored</p> +<table data-expected-width=106> + <colgroup> + <col style="width:0%"> + <col style="width:0%"> + </colgroup> + <tr> + <td data-expected-width=100> + <div><span style=" display: inline-block;word-break: break-word;font: 20px/1 Ahem">01234</span></div> + </td> + <td> + <div></div> + </td> + </tr> +</table> +<table data-expected-width=107> + <colgroup> + <col style="width:0%"> + <col style="width:1%"> + </colgroup> + <tr> + <td data-expected-width=100> + <div><span style=" display: inline-block;word-break: break-word;font: 20px/1 Ahem;">01234</span></div> + </td> + <td> + <div></div> + </td> + </tr> +</table> + +</main> + +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html new file mode 100644 index 0000000000..3c4d57c142 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html @@ -0,0 +1,621 @@ +<!doctype html> +<title>COLSPAN redistribution</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> +<style> + main table { + border-spacing: 8px 8px; + margin-top:8px; + background: gray; + } + main td { + background: #BFB; + font-size: 10px; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> +<main> +<h1>Colspan>1 width redistribution</h1> +<p>TD with colspan>1 redistributes its min/max/percent widths to the spanned cells.</p> +<p>Creating explainable tests with percentage cells is complicated. Cell's percentage cannot be observed directly, but must be inferred from td+table widths. Rules that govern relationship between table grid width and percentage cell width are:</p> +<ol> + <li id="rule1"><span class="rule1">Rule#1</span>, Each percentage column sets the floor for maximum table width. That table width is column.min_width / column.percent * 100.<br> Ex: 20px wide column, with 20% width, implies that the entire table must be at least 100px wide.</li> + <li id="rule2"><span class="rule2">Rule#2</span>, Sum of all percentages, combined with sum of widths of all non-percentages sets the floor maximum table widths. <br>Let P% be sum of all percentages, and Fpx sum of widths of all non-percentage columns. Maximum table width = Fpx * (1 + (100-P%)/P%).<br> + Ex: if percentage columns are 20%, and non-percentage columns are 100px, implies that that 80% is at least 100px, and that the entire table is at least 125px. + </li> +</ol> +<h2>Test design</h2> +<p>All examples have border-spacing:8, td.padding:0.</p> +<p>Tests are mostly tables with 2 rows. 1st row are the columns, 2nd row is the colspan>1 column being distributed. Most test's colspan>1 cell colspan encloses all cells except the last one. Each test is accompanied by test description. Test description contains:</p> +<ol> + <li>First line describes the test geometry: cell:css/min/max. C1:20%/20px means width:20%, intrinsic min width 20px. If max is omitted, min == max.</li> + <li>Second line describes algorithm being tested in detail</li> + <li>Third line describes computation that generates the result.</li> + <li class="error">Red paragraphs are major browser disagreements</li> +</ol> + +<h2>Colspan>1 cell's percentage distribution auto tables</h2> +<p>Rules</p> +<ul> + <li>Percentages can only be redistributed to non-percentage cells.</li> + <li>If percentage does not get redistributed, treat colspan>1 cell width as Auto</li> + <li>If all columns are empty (no max width), redistribute percentage evenly.</li> +</ul> + +<p class="testdesc">C0:10%/20px C1:10%/20px C2:auto +No colspan>1 cells, shows what table looks like without colspan>1 cell distribution. +Table width by rule#1, 20px/0.1(10%) + 4*8 => 232px. Excess table width is distributed to auto cell.</p> +<table data-expected-width="232"> + <tr> + <td style="width:10%"><div style="width:20px">x</div></td> + <td style="width:10%"><div style="width:20px">x</div></td> + <td>x</td> + </tr> +</table> + +<p class="testdesc">Colspan>1:40%/Auto C0:10%/20px C1:10%/20px C2:auto +Percentage does not get redistributed because all columns are percentages. +Table width by rule#1 same as previous example.</p> +<table data-expected-width="232"> + <tr> + <td style="width:10%" data-expected-width="20"><div style="width:20px">x</div></td> + <td style="width:10%"><div style="width:20px">x</div></td> + <td>x</td> + </tr> + <tr> + <td colspan=2 style="width:40%">40%</td> + </tr> +</table> + +<p class="testdesc">Colspan>1:20%/100px C0:Auto/0 C1:Auto/0 C2:Auto/Auto +Percentage gets redistributed evenly to empty cells. +Each cell gets 10%, then (100-8)/2=>46px min width. Table min width is 46/0.1(10%) + 4*8 => 460 + 32 => 492</p> +<p class="error">Chrome Legacy is wrong, 1st span cell gets all the width. FF/Edge agree.</p> +<table data-expected-width="492"> + <tr> + <td data-expected-width="46"></td> + <td></td> + <td>x</td> + </tr> + <tr> + <td colspan=2 style="width:20%"><div style="width:100px">100px</div></td> +</table> + +<p class="testdesc">Colspan>1: 19%/200px colspan>1 cell, C0: 20%.20px, C1: 80px/80px +Percentage is not getting redistributed, because column% > colspan>1%</p> +<table data-expected-width="224"> + <tr> + <td style="width:20%" data-expected-width="40"><div style="width:20px">20</div></td> + <td style="width:80px" data-expected-width="160"><div style="width:80px">80</div></td> + </tr> + <tr> + <td colspan=2 style="width:19%" data-expected-width="208"><div style="width:208px">208</div></td> + </tr> +</table> + +<h2>Colspan>1 cell's percentage distribution fixed tables</h2> +<p>Colspan cells distribute width over col widths. +<p>Rules</p> +<ul> + <li>Percentages are not distributed to fixed columns.</li> + <li>Percentages are not distributed to percentage columns.</li> + <li>Percentages are distributed to auto columns, each column gets distributed%/colspan percent.</li> +</ul> +<p class="testdesc">Auto column distribution +auto colums get percentage widths distributed evenly. +C0/C1 become 25% columns. +Assignable table size is 400-4*8=368. Column size is 25% of 368 = 92px</p> +<p class="error">FF disagrees in how border-spacing is handled and ends up with slightly different cell widths. </p> +<table style="table-layout:fixed; width: 400px"> + <col style="width:auto"> + <col style="width:auto"> + <tr> + <td colspan="2" style="width:50%">50%</td> + <td>a</td> + </tr> + <tr> + <td data-expected-width=92>a</td> + <td data-expected-width=92>aa</td> + <td>a</td> + </tr> +</table> + +<p class="testdesc">Fixed column distribution +fixed columns do not get percentage distribution.</p> +<table style="table-layout:fixed; width: 400px"> + <col style="width:50px"> + <col style="width:50px"> + <tr> + <td colspan="2" style="width:50%">50%</td> + <td>a</td> + </tr> + <tr> + <td data-expected-width="50">a</td> + <td data-expected-width="50">a</td> + <td>a</td> + </tr> +</table> + +<p class="testdesc">Percentage column distribution +percentage columns do not get percentage distribution.</p> +<table style="table-layout:fixed; width: 400px"> + <col style="width:12.5%"> + <col style="width:25%"> + <tr> + <td colspan="2" style="width:50%">50%</td> + <td>a</td> + </tr> + <tr> + <td data-expected-width="46">a</td> + <td data-expected-width="92">a</td> + <td>a</td> + </tr> +</table> + +<p class="testdesc">Distribute over percentage/auto/fixed mix cells +Collspanned TD distributes 50%. Auto TD gets 50%/(colspanned span = 4): 12.5% +12.5%* 400px is 50. +</p> +<table style="table-layout:fixed; width: 400px;border-spacing:0"> + <col style="width:25%"> + <col style="width:25px"> + <col style="width:25px"> + <col style="width:auto"> + <tr> + <td colspan="4" style="width:50%">50%</td> + <td>a</td> + </tr> + <tr> + <td></td> + <td>a</td> + <td>a</td> + <td data-expected-width="50" style="background-color:yellow">a</td> + <td>a</td> + </tr> +</table> + +<h2>Colspan>1 cell's minimum width distribution</h2> +<h3>All unconstrained columns</h3> + +<p class="testdesc">Colspan>1: Auto/300px C0:Auto/75pxpx C1:Auto:25px; C2:20px/Auto +Basic distribution over auto columns, cells grow evenly. +Distribute 300-8=292 proportional to maxwidth. C0 gets 75/100*292=219.</p> +<table data-expected-width="344"> + <tr> + <td data-expected-width="219"><div style="width:75px">75px</div></td> + <td><div style="width:25px">25px</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td data-expected-width="300" colspan=2><div style="width:300px">300px min</div></td> + </tr> +</table> + +<p class="testdesc">Colspan>1: 260px/300px C0:Auto/100px C1:Auto/100px C2:Auto/Auto +Colspan>1 cell min width wins over css width. +Table width same as previous example.</p> +<table data-expected-width="344"> + <tr> + <td data-expected-width="146"><div style="width:100px">100px</div></td> + <td><div style="width:100px">100px</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td data-expected-width="300" colspan=2 style="width:260px"><div style="width:300px">300px min</div></td> + </tr> +</table> + +<h3>All fixed columns</h3> +<li>column gets min_width proportional to its max width. + +<p 7 class="testdesc">Colspan>1: 260/300 C0:100/50/100 C1:100/100 C2:20/Auto +Distribute surplus proportional to max width. +Colspan>1 is distributing 292, surplus 92, each column gets 46. +</p> +<table data-expected-width="344"> + <tr> + <td style="width:100px" data-expected-width="146"><div style="width:50px">50</div><div style="width:50px">50</div></td> + <td style="width:100px"><div style="width:100px">100px</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td data-expected-width="300" colspan=2 style="width:260px"><div style="width:300px">300px min</div></td> + </tr> +</table> + +<p 8 class="testdesc">Colspan>1: 300/300 C0:100/25 C1:100/75 C2:20/Auto +Column minimum width is less than its CSS width. +Just like last example, both columns get 46. +<table data-expected-width="334" style="width:1px"> + <tr> + <td style="width:100px" data-expected-width="146"><div style="width:25px">25px</div></td> + <td style="width:100px"><div style="width:75px">75px</div></td> + <td style="width:20px"><div style="width:10px">x</div></td> + </tr> + <tr> + <td data-expected-width="300" colspan=2 style=""><div style="width:300px">300px min</div></td> + </tr> +</table> + +<p class="testdesc">Colspan>1: 300/300 C0:20/100 C1:100/75 C2:20/Auto +First column's min width > css width. +Like last example, each column minimum width increases in proportion to the max.</p> +<p class="error">Chrome differs from FF/Edge. It distributes min-width in proportion to css width, not max width</p> +<table data-expected-width="344"> + <tr> + <td style="width:20px" data-expected-width="146"><div style="width:100px">20/100px</div></td> + <td style="width:40px"><div style="width:100px">40/100px</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td data-expected-width="300" colspan=2 style=""><div style="width:300px">300px min</div></td> + </tr> +</table> + +<h3>All percent columns</h3> + <ul> + <li>min width never gets smaller than it started. + <li>min width becomes cell.percent/cells.percent * colspan>1_cell.min_width</li> + <li>max width becomes cell.percent/cells.percent * colspan>1_cell.max_width</li> + </ul> + +<p 10 class="testdesc">Colspan>1:Auto/300px C0:25%/50 C1:25%/30 C2:20/Auto +Colspan>1 min width gets distributed proportional to percentage (not min/max width). +Columns get min_width = 146, causes table width of 146/0.25 + 4*8 = 616. +<table data-expected-width="616"> + <tr> + <td style="width:25%" data-expected-width="146"><div style="width:50px">25%/50</div></td> + <td style="width:25%"><div style="width:30px">25%/30</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td colspan=2 style=""><div style="width:300px">300px min</div></td> + </tr> +</table> + +<p 11 class="testdesc">Colspan>1:Auto/400px C0:20%/50 C1:60%/50 C2:20/Auto. +Colspan>1 min width gets distributed proportional to percentage (not min/max width). +Cells get 98/294, table by rule#1 98px/0.2 + 32 = 522</p> +<p class="error">Edge disagrees, table is 870</p> +<div style="width:600px"> +<table data-expected-width="522"> + <tr> + <td style="width:20%" data-expected-width="98"><div style="width:50px">20%/50px</div></td> + <td style="width:60%" data-expected-width="294"><div style="width:50px">60%/50px</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td colspan=2 style=""><div style="width:400px">400px min</div></td> + </tr> +</table> +</div> + +<p 12 class="testdesc">Colspan>1:Auto/468 C0:50%/150 C1:30%/150 C2:20/Auto +This tests conflict resolution where min-width > redistributed min width. +Colspanned redistribution: distributed 468-8 = 460 over C0/C1 +Colspanned 468px needs to distribute 460px over C0/C1. +C0 percent size is 50% * 460 = 230 +C1 percent size is 30% * 460 = 138, defaults to min size of 150 +Column 1 size is 230 + 50%/80% * 80 = 280px +Column 2 size is 150 + 30%/80% * 80 = 180px +Column 3 remains 20px +Assignable table inline size +C1 dominates estimate: 180/30% + 4*8 = 632 +Compute final column widths from assignable table size: +C0 = 50% of 600 = 300 C1 = 30% of 600 = 180 , C2 gets the remaining 120</p> +<table data-expected-width="632"> + <tr> + <td style="width:50%" data-expected-width="300"><div style="width:150px">50%/150px</div></td> + <td style="width:30%" data-expected-width="180"><div style="width:150px">30%/150px</div></td> + <td style="width:20px" data-expected-width="120">x</td> + </tr> + <tr> + <td colspan=2 style=""><div style="width:468px">408px min</div></td> + </tr> +</table> + + +<p 13 class="testdesc"> Colspan>1:Auto/400px C0:50%/75px/125px, C1:30%/75px/125px C2:20px/Auto +Colspan>1 cell distribution over different percentages. +400-8px min width gets redistributed as 245/147 (no min width limits) +</p> +<p class="error">Edge is different, table is 685 instead of 522.</p> +<table data-expected-width="522"> + <tr> + <td style="width:50%" data-expected-width="245"><div style="width:75px">50%/75</div><div style="width:50px">/125</div></td> + <td style="width:30%" data-expected-width="147"><div style="width:75px">30%/75</div><div style="width:50px">/125</div></td> + <td style="width:20px">x</td> + </tr> + <tr> + <td colspan=2 style=""><div style="width:400px">400px min</div></td> + </tr> +</table> + +<h3>Auto/fixed mix columns</h3> +<p class="testdesc">Colspan>1: Auto/500; C0: Auto/40 C1:150/100 +Colspan>1 excess min: 500-140-8=352; excess max: 500-190-8=302 +Initial min/max C0:40/40, C1:100/150 +Excess is distributed to Auto C0:392/342, C1:100/150 +Assignable width is 492. C0 gets 342, C1 get max:150 +Chrome Legacy does something very different to arrive at the same answer. +Initial min/max is the same. +Min gets distributed to C0 and C1 in proportion to max_width: C0:342/40 C1:150/150, +Min also gets clamped to css width. This is the key difference betweeen NG +and Legacy code. NG cannot clamp to css width, because it is not available. +Max gets distributed to both in proportion to max_width: C0:342/103 C1:150/389 +Assignable table width is: 492 (sum of min), min gets used as final width. + +Analysis: colspan>1 cell distribution over fixed/auto. +Legacy incorrectly distributes minmax over both fixed and auto cells +in proportion to max width,and clamps min to css width. + +This width becomes final width for auto tables without any further distribution. +FF distributes min only over auto, and max over auto. +Final distribution uses Guess 2 rules: start off with Auto(min), Fixed(max), +distribute excess to Auto. Ends up with the same result as Legacy.</p> +<table data-expected-width=516> + <tr> + <td data-expected-width=342> + <div style="width:40px">Auto</div></td> + <td style="width:150px" data-expected-width=150> + <div style="width:100px">150</div></td> + </tr> + <tr> + <td colspan="2"> + <div style="width:500px">500</div></td> + </tr> +</table> +<p class="testdesc">C0:70/Auto C1:70/Auto C2:Auto/50 +This testcase demonstrates how Legacy Chrome handling of min widths is broken. +There are 2 fixed columns, and 1 auto. The width of fixed columns should be +the same, but is not. The problem happens when min-width of fixed columns is +less than fixed width, and there are auto columns.</p> + +<p class="error">Chrome Legacy incorrectly assigns minimum width to C0/C1 +to css width of 70. It does compute assignable table width correctly +as 166 px. This violates the invariant: +assignable table width >= sum of min widths. +Chrome resolves invariant violation by truncating one fixed width column +below its minimum width. </p> +<table style="width:1px" data-expected-width=166> + <tr> + <td style="width:70px" data-expected-width=42>0</td> + <td style="width:70px" data-expected-width=42>0</td> + <td data-expected-width=50><div style="width:50px" >50</div></td> + </tr> + <tr> + <td colspan=3 ><div style="width:150px"></div> + </td> + </tr> +</table> + +<h3>Percentage/fixed mix columns</h3> +<p>The Legacy code that deals with this is confusing, it tries to redistribute minimum width in proportion to max width, unless there are auto cells. All the browsers disagree on final widths. Some things everyone agrees on: + <li>if there are auto cells, fixed cells do not grow.</li> +</p> + +<p class="testdesc">Colspan>1:N/A C0:60%/100 C2:100/100 +An example what table looks like without colspan>1 distribution. +Table width by rule#2: (60/(100-60) +1) * 100 = 250 + 24 = 274</p> +<table data-expected-width="274"> + <tr> + <td data-expected-width="150" style="width:60%"><div style="width:100px">60%</div></td> + <td data-expected-width="100" style="width:100px"><div style="width:100px">100px</div></td> + </tr> +</table> + +<p class="testdesc">Colspan>1:N/A C0:50%/100 C1:50%/100 C2:100/100 +Total column percent is 100%, forcing maximum table grid width by rule #2 to infinity. +Table css width is 1px, overriding grid max width. +Final column width is column's minimum width. +</p> +<div style="width:500px"> + <table style="width:1px"> + <tr> + <td data-expected-width="100" style="width:50%"><div style="width:100px">50%</div></td> + <td data-expected-width="100" style="width:50%"><div style="width:100px">50%</div></td> + <td data-expected-width="100" style="width:100px"><div style="width:100px">100px</div></td> + </tr> + </table> +</div> + +<p class="testdesc">Colspan>1:N/A C0:50%/100 C1:50%/100 C2:100/100 +Same example as above, but table width is auto. +Table grows to size of containing block.</p> +<div style="width:500px"> + <table> + <tr> + <td data-expected-width="184" style="width:50%"><div style="width:100px">50%</div></td> + <td data-expected-width="184" style="width:50%"><div style="width:100px">50%</div></td> + <td data-expected-width="100" style="width:100px"><div style="width:100px">100px</div></td> + </tr> + </table> +</div> + +<p class="testdesc">Colspan>1: Auto/200px C0:40%/20 C1:50/50 C2:100/20 +Table css width is 1px. This forces grid minimum. +FF: %ge cell gets its percentage width resolved wrt distributing cell. +fixed cells get remaining excess width redistributed in proportion +to max size. +Chrome algorithm: distributes proportionally to min_width. The problem with +this is that 40% cell will end up with 0 if no min width. +<p class="error">Edge distributes all the width to the %ge cell, Chrome distributes proportionally to min width. </p> +<table style="width:1px" data-expected-width="252"> + <tr> + <td style="width:40%" data-expected-width=80><div style="width:20px">40%</div></td> + <td style="width:50px" data-expected-width=120><div style="width:50px">50</div></td> + <td data-expected-width="20" style="width:100px"><div style="width:20px">20</div></td> + </tr> + <tr> + <td colspan=2 data-expected-width="208" ><div style="width:208px">208px min</div></td> + </tr> +</table> + +<h2>Colspan>1 cell's maximum width distribution</h2> +<li>Only constrained colspans can distribute max-width over fixed columns</li> + +<p class="testdesc">Colspan: constrained. Col: constrained +Constrained colspan redistributes widths over constrained cols. +</p> +<table data-expected-width=216> + <col style="width:50px"> + <col style="width:50px"> + <tr> + <td>50</td> + <td>50</td> + </tr> + <tr> + <td colspan=2 style="width:200px" data-expected-width=200>200</td> + </tr> +</table> +<p class="testdesc">Colspan: unconstrained. Col: constrained +Colspan max-width does not get redistributed. +</p> +<table data-expected-width=124> + <col style="width:50px"> + <col style="width:50px"> + <tr> + <td>50</td> + <td>50</td> + </tr> + <tr> + <td colspan=2 data-expected-width=108><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<p class="testdesc">Colspan: unconstrained, Col: constrained/% +Colspanned col distributes width over %ge column. +max-guess is 50px + 200px*50% = 150px +distributable_size is 50px +%ge column gets percentage_size + distributable_size = 150px +Later, this makes table 300px wide. +</p> +<p class="error">FF, Legacy, and TablesNG all disagree about the correct widths. FF feels more like the right answer, but I can't figure out the math behind it.</p> +<table data-expected-width=308> + <col style="width:50px"> + <col style="width:50%"> + <tr> + <td data-expected-width=142>50</td> + <td>50</td> + </tr> + <tr> + <td colspan=2 data-expected-width=292><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<h2>Merging cell widths into column widths</h2> +<p>What happens when different types of cells get merged into a single column?</p> +<p class="testdesc">C0:0 25%/50px C0:1 50%/40px +C0:0 alone would imply table width of 50/.25 = 200px. +C0:1 alone would imply table width of 40/.5 = 80px. +But, largest percentage and largest min width win, so the table width is 50/.5 = 100px. +</p> +<table data-expected-width=124> + <tr> + <td style="width:25%" data-expected-width=50> + <div style="width:50px">25%/50px</div></td> + <td data-expected-width=50>Auto</td> + </tr> + <tr> + <td style="width:50%"> + <div style="width:40px">50%/40</div></td> + <td>Auto</td> + </tr> +</table> + +<p class="testdesc">Merging fixed and percentage +Column that contains both percent and fixed cells is treated as percent. +<table data-expected-width=632> + <tr> + <td style="width:25%" data-expected-width=150> + <div style="width:100px" >25%/100</div></td> + <td style="width:50px" data-expected-width=50>50px fixed</td> + <td>auto</td> + </tr> + <tr> + <td style="width:150px">150</td> + <td>Auto</td> + <td>Auto</td> + </tr> +</table> + +<p class="testdesc">Order of colspan>1 cell redistribution +Initial minmax of all cells is 50px. +C0:1 redistributes 200 +C1:2 redistributes 400 +Chrome distributes right-to-left: +C1:2 distributes 400, and C1 and C2 both get 200 +When C0:1 turns come, C0+C1 are already long enough, nothing to distirbute +<p class="error"> +In testcase /tables/mozilla_expected_failures/core/col_span2.html +distribution right-to-left is described as a bug. +Firefox and Edge both distribute left to right. +Chrome is only one that distributes right to left. +Firefox distribution is not cumulative, it uses original minmax to compute final widths. Edge agrees with TablesNG. +But, mozilla is stable for row reordering.</p> +</p> +<table data-expected-width=532> + <tr> + <td colspan=2><div style="width:208px">200</div></td> + <td><div style="width:50px">50</div></td> + </tr> + <tr> + <td><div style="width:50px">50</div></td> + <td colspan=2><div style="width:408px">400</div></td> + </tr> + <tr> + <td data-expected-width=100>Auto</td> + <td data-expected-width=267><div style="width:50px">Auto</div></td> + <td data-expected-width=133>Auto</td> + </tr> +</table> +<table data-expected-width=482> + <tr> + <td colspan=2><div style="width:408px">400</div></td> + <td><div style="width:50px">50</div></td> + </tr> + <tr> + <td><div style="width:50px">50</div></td> + <td colspan=2><div style="width:208px">200</div></td> + </tr> + <tr> + <td data-expected-width=200>Auto</td> + <td data-expected-width=200><div style="width:50px">Auto</div></td> + <td data-expected-width=50>Auto</td> + </tr> +</table> +<p class="testdesc">Order of colspan>1 cell redistribution +Similar to previous testcase, but colspan is 3, not 2.</p> +<p class="error"> +In testcase /tables/mozilla_expected_failures/core/col_span2.html +distribution right-to-left is described as a bug. +Firefox and Edge both distribute left to right. +TablesNG matches Edge/FF.</p> +</p> +<table data-expected-width=740> + <tr> + <td colspan=3><div style="width:316px">300</div></td> + <td><div style="width:50px">50</div></td> + </tr> + <tr> + <td><div style="width:50px">50</div></td> + <td colspan=3><div style="width:616px">600</div></td> + </tr> + <tr> + <td data-expected-width=100>Auto</td> + <td data-expected-width=240><div style="width:50px">Auto</div></td> + <td data-expected-width=240><div style="width:50px">Auto</div></td> + <td data-expected-width=120>Auto</td> + </tr> +</table> +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/column-widths.html b/testing/web-platform/tests/css/css-tables/tentative/column-widths.html new file mode 100644 index 0000000000..b151c2263b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/column-widths.html @@ -0,0 +1,300 @@ +<!doctype html> +<title>Column widths</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> +<style> + main table { + background: gray; + border-spacing: 8px 8px; + table-layout: auto; + margin-top: 4px; + } + main td { + background: #BFB; + font-size: 10px; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> +<main> +<h1>Col width</h1> +<p>how does col width interact with td widths to produce final column width?</p> +<p>Inputs are colgroup/col widths, and td widths. +<p>td widths merge, then merge again with col to produce column widths. +<p>Output is column min/max/percent w0dths. +<p>Colgroup/col has css min_width, css max_width, css percent.</p> +<p>TD has intrinsic minmax, css width, css percent width, css max width, css min width</p> + +<h2>Initial cell assignment</h2> + + +<p class="testdesc">Unconstrained single TD, table-layout:auto +td.min = minmax.min +td.max = minmax.max</p> +<table style="width:1px" data-expected-width=266> + <tr> + <td><div style="width:50px">min</div><div style="width:250px">min</div></td> + </tr> +</table> +<table data-expected-width=316> + <tr> + <td><div style="width:50px">max</div><div style="width:250px">max</div></td> + </tr> +</table> + +<p class="testdesc">Unconstrained single TD, table-layout:fixed +td.min = 0 +td.max = minmax.max</p> +<table style="width:1px;table-layout:fixed" data-expected-width=16> + <tr> + <td><div style="width:50px">min</div><div style="width:250px">min</div></td> + </tr> +</table> +<table style="table-layout:fixed;width:300px" data-expected-width=300> + <tr> + <td><div style="width:50px">max</div><div style="width:250px">max</div></td> + </tr> +</table> + +<p class="testdesc">Constrained single TD, table-layout:auto + td.min = minmax.min + td.max = max(minmax.min, css.width) +</p> +<table data-expected-width=266> + <tr> + <td style="width:200px"><div style="width:50px">max</div><div style="width:250px">max</div></td> + </tr> +</table> +<table data-expected-width=416> + <tr> + <td style="width:400px"><div style="width:50px">max</div><div style="width:250px">max</div></td> + </tr> +</table> +<table style="width:1px" data-expected-width=26> + <tr> + <td style="width:50px"><div style="width:10px">min</div></td> + </tr> +</table> +<table data-expected-width=266> + <tr> + <td style="width:100px"><div style="width:50px">min</div><div style="width:250px">min</div></td> + </tr> +</table> +<table data-expected-width=416> + <tr> + <td style="width:400px"><div style="width:50px">min</div><div style="width:250px">min</div></td> + </tr> +</table> + + +<h2>TD/TD merging</h2> + +<p>TD merging only happens in auto, in fixed only 1st row gets measured</p> + +<p class="testdesc">Two unconstrained TDs, table-layout:auto or fixed + td.min = max(C0.min, C1.min). always 0 in fixed layout. + td.max = max(C0.max, C1.max) +</p> +<table data-expected-width=316> + <tr> + <td data-expected-width=300><div style="width:50px">auto</div><div style="width:250px">max</div></td> + </tr> + <tr> + <td><div style="width:100px">auto</div><div style="width:150px">auto</div></td> + </tr> +</table> +<table style="width:1px" data-expected-width=266> + <tr> + <td data-expected-width=250><div style="width:50px">auto</div><div style="width:250px">max</div></td> + </tr> + <tr> + <td><div style="width:100px">auto</div><div style="width:150px">auto</div></td> + </tr> +</table> + +<p class="testdesc">Unconstrained (UN) and constrained (CON) TD + td.min = max(UN.min, CON.min) + td.max = max(UN.min, CON.max) +</p> +<p class="error">Chrome Legacy and Edge fail this test. They do not limit unconstrained maximum: td.max = max(UN.max, CON.max).</p> +<table style="width:1px" data-expected-width=36> + <tr> + <td style="width:50px" data-expected-width=20><div style="width:20px">min</div></td> + </tr> + <tr> + <td><div style="width:15px">min</div></td> + </tr> +</table> +<table data-expected-width=66> + <tr> + <td style="width:50px" data-expected-width=50><div style="width:20px">max</div></td> + </tr> + <tr> + <td><div style="width:40px">max</div><div style="width:40px">max</div></td> + </tr> +</table> + +<p class="testdesc">Two percent TDs + td.percent = max(C1.percent, C2.percent) + td.max = max(C1.max, C2.max) + td.min = max(C1.min, C2.min) +</p> +<table data-expected-width=324> + <tr> + <td style="width:10%"><div style="width:60px">60</div></td> + <td>auto</td> +</tr> +<tr> + <td style="width:20%" data-expected-width=60><div style="width:50px">50</div></td> + <td data-expected-width=240>auto</td> +</tr> +</table> + +<h2>COL/TD merging</h2> + +<p class="testdesc">col auto td auto +column.min = td.min +column.max = td.max</p> +<table data-expected-width=66> + <col> + <td><div style="width:50px">auto</div></td> +</table> + +<p class="testdesc">col fixed td auto + column.min = td.min + column.max = max(col[px], td.min) +</p> +<table data-expected-width=116> + <col style="width:100px"> + <td><div style="width:50px">auto</div></td> +</table> +<table data-expected-width=126> + <col style="width:100px"> + <td><div style="width:110px">110</div><div style="width:110px">110</div></td> +</table> +<table style="width:1px" data-expected-width=66> + <col style="width:100px"> + <td><div style="width:50px">min</div></td> +</table> + +<p class="testdesc">col % td auto +column.min = td.min +column.max = max(td.max, col.max) +column.percent = col[%] +<table data-expected-width=224> + <col style="width:80%"> + <td><div style="width:50px">auto</div></td> + <td style="width:40px">40</td> +</table> +<table style="width:1px" data-expected-width=94> + <col style="width:80%"> + <td style="width:50px"><div style="width:30px">auto</div></td> + <td><div style="width:40px"></div></td> +</table> +<table data-expected-width=274> + <col style="width:80%"> + <td><div style="width:200px" data-expected-width=200>auto</div></td> + <td style="width:30px"><div style="width:30px">30</div></td> +</table> + +<p class="testdesc">col auto td percent +column.min = td.min +column.max = td.max +column.percent = td.percent +<table data-expected-width=174> + <col> + <td style="width:80%" data-expected-width=120><div style="width:100px">auto</div></td> + <td ><div style="width:30px">10</div></td> +</table> + +<p class="testdesc">col fixed td percent +column.min = td.min +column.max = max(td.max, col.max) +column.percent = td.percent +<table data-expected-width=424> + <col style="width:200px"> + <td style="width:50%" data-expected-width=200><div style="width:50px">50</div></td> + <td><div style="width:50px">50</div> +</table> +<table style="width:1px" data-expected-width=124> + <col style="width:200px"> + <td style="width:60%" data-expected-width=50><div style="width:50px">50</div></td> + <td><div style="width:50px">50</div> +</table> + +<p class="testdesc">col percent td percent +column.min = td.min +column.max = max(td.max, col.max) +column.percent = max(td.percent, col.percent)</p> +<table data-expected-width=524> + <col style="width:60%"> + <td style="width:50%" data-expected-width=300><div style="width:100px">100</div></td> + <td><div style="width:200px">200</div></td> +</table> +<table data-expected-width=524> + <col style="width:50%"> + <td style="width:60%" data-expected-width=300><div style="width:100px">100</div></td> + <td><div style="width:200px">200</div></td> +</table> + +<p class="testdesc">col auto td fixed +column.min = td.min +column.max = td.max</p> +<table data-expected-width=116> + <col> + <td style="width:100px">100</td> +</table> + +<p class="testdesc">col fixed td fixed +column.min = td.min +column.max = max(td.max, col.max)</p> +<table data-expected-width=216> + <col style="width:200px"> + <td style="width:100px">100</td> +</table> +<table data-expected-width=216> + <col style="width:100px"> + <td style="width:200px">100</td> +</table> + +<p class="testdesc">col percent td fixed +column.min = td.min +column.percent = col.percent +column.max = max(td.max, col.max)</p> +<table data-expected-width=424> + <col style="width:50%"> + <td style="width:100px" data-expected-width=200>100</td> + <td><div style="width:200px">200</div> +</table> + +<table style="width:1px" data-expected-width=234> + <col style="width:50%"> + <td style="width:100px" data-expected-width=10><div style="width:10px">10</div></td> + <td><div style="width:200px">200</div></td> +</table> + +<p class="testdesc">col fixed td fixed inside table-layout:fixed +constrained columns take precedence in fixed layout. +<table style="width:324px;table-layout:fixed" data-expected-width=324> + <col style="width:100px"> + <td style="width:200px" data-expected-width=100>100</td> + <td data-expected-width=200><div style="width:400px" >200</div></td> +</table> + +<p class="testdesc">col percent td fixed inside table-layout:fixed +constrained columns take precedence in fixed layout. +<table style="width:324px;table-layout:fixed" data-expected-width=324> + <col style="width:50%"> + <td style="width:200px" data-expected-width=150>150</td> + <td><div style="width:400px">150</div></td> +</table> +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/element-sizing.html b/testing/web-platform/tests/css/css-tables/tentative/element-sizing.html new file mode 100644 index 0000000000..77e153ce3a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/element-sizing.html @@ -0,0 +1,34 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<title>TABLE fragment sizes</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/" /> + +<main> +<h1>TBODY/TR Element sizes and border spacing</h1> +<p>Legacy Chrome:TR includes start/end, not before/after. 1st TBODY includes before/after, 2nd TBODY includes only after, not before.</p> +<p>Firefox: TR/TBODY do not include start/end before/after.</p> +<p>Proposal: match firefox</p> + +<table style="width:100px;border-spacing:10px;background:#ddd"> + <tbody data-expected-width=80> + <tr data-expected-width=80> + <td data-expected-width=80>0,0</td> + </tr> + </tbody> +</table> + +<p>TR width is used for TD's percentage resolution</p> +<table style="width:120px;border-spacing:10px;background:#ddd"> + <tbody data-expected-width=100> + <tr data-expected-width=100> + <td style="padding:30%" data-expected-width=100 ><div data-offset-x=30>0,0</div></td> + </tr> + </tbody> +</table> +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html new file mode 100644 index 0000000000..b3b1ce9ff3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px); + background-repeat: no-repeat; + background-size: 50px 200px; + } + main * { + box-sizing: border-box; + } + .td { + width: 50px; + height: 50px; + position:absolute; + } +</style> + +<main> +<div style="position: relative;border: 10px solid transparent; width:210px; height: 210px"> + <div class="td bg" style="top:-5px;left:-5px;height:200px"></div> + <div class="td bg" style="top:-5px;left:45px;height:200px"></div> + <div class="td" style="background:var(--peek); height:100px; left:95px;top:45px"></div> + <div class="td bg" style="top:-5px;left:145px;height:200px;width:100px;background-size: 100px 200px"></div> +</div> + +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html new file mode 100644 index 0000000000..6e6ae7a82c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>Table collapsed column background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-column-collapsed-ref.html" /> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px); + background-repeat: no-repeat; + } + main * { + box-sizing: border-box; + } + main table { + border-spacing: 10px; + border: 10px solid transparent; + padding: 10px; + border-collapse: collapse; + } + main table:hover { + border: 10px solid yellow; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + } +</style> +<body> +<main> + <table> + <col class="bg"> + <col class="bg"> + <col> + <colgroup class="bg" span="2"> + <tr> + <td rowspan=4></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=2 colspan=2></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html new file mode 100644 index 0000000000..5b04f0074c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html @@ -0,0 +1,44 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 220px, blue 220px); + background-repeat: no-repeat; + background-size: 50px 230px; + } + main * { + box-sizing: border-box; + } + .td { + width: 50px; + height: 50px; + position:absolute; + border: 4px solid black; + } +</style> + +<main> +<div style="position: relative;border: 10px solid yellow; width:290px; height: 290px"> + <!-- row 1 --> + <div class="td bg" style="top:20px;left:20px;height:230px"></div> + <div class="td bg" style="top:20px;left:80px;"></div> + <div class="td" style="top:20px; left: 140px;"></div> + <div class="td" style="top:20px; left: 200px;"></div> + <!-- row 2 + additional -4 offsets on background-position are for borders. + columns do not have borders. + --> + <div class="td bg" style="top:80px;left:80px;width:110px;height:110px;background-position-y:-64px;background-position-x:-4px"></div> + <div class="td" style="top:80px; left: 200px;"></div> + <!-- row 3 --> + <div class="td" style="top:140px; left: 200px;"></div> + <!-- row 4 --> + <div class="td bg" style="top:200px;left:80px;background-position-y:-180px"></div> + <div class="td" style="top:200px; left: 140px;"></div> + <div class="td" style="top:200px; left: 200px;"></div> +</div> + +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html new file mode 100644 index 0000000000..c795aac5ea --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>Table column background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-column-ref.html" /> +<meta name="assert" content="Column backgrounds get painted into cells with correct geometry."> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 220px, blue 220px); + background-repeat: no-repeat; + } + main * { + box-sizing: border-box; + } + main table { + border-spacing: 10px; + border: 10px solid yellow; + padding: 10px; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + border: 4px solid black; + } +</style> +<body> +<main> + <table> + <col class="bg"> + <col class="bg"> + <tr> + <td rowspan=4></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=2 colspan=2></td> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html new file mode 100644 index 0000000000..8ab0992e08 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html @@ -0,0 +1,60 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + --border: transparent; + margin:0; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-size: 200px 50px; + background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */ + } + main > * { + box-sizing: border-box; + } + .table { + width: 200px; + position: relative; + margin-top: 5px; + margin-left:5px; + } + .row { + width: 200px; + height: 50px; + } + .cell { + width: 50px; + height: 50px; + display: inline-block; + vertical-align: top; + } + .bigsquarecell { + width: 100px; + height: 100px; + display: inline-block; + vertical-align: top; + background-position-x: -50px; + } + .c2 { + background-position-x: -50px + } + .c3 { + background-position-x: -100px; + } + .c4 { + background-position-x: -150px; + } + .bottomrow > .cell { + margin-top: 5px; + } +</style> +<main> +<div class="table"> +<div class="row bg"></div> +<div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div> +<div class="row bg"></div> +<div style="position:absolute;top:-5px;left:-5px;bottom:-5px;right:-5px;border: 10px solid var(--border)"></div> +</div> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html new file mode 100644 index 0000000000..c70c6abd92 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>Collapsed table row background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-row-collapsed-ref.html" /> +<style> + body { + --peek: LightGreen; + --border: transparent; + margin:0; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-repeat: no-repeat; + } + main * { + box-sizing: border-box; + } + main table { + border: 10px solid var(--border); + border-collapse: collapse; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + } +</style> +<body> +<main> + <table> + <tr class="bg"> + <td colspan=4></td> + </tr> + <tr class="bg"> + <td></td> + <td rowspan=2 colspan=2></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr class="bg"> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html new file mode 100644 index 0000000000..1150a63e17 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html @@ -0,0 +1,68 @@ +<!doctype html> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-size: 230px 50px; + background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */ + } + main > * { + box-sizing: border-box; + } + .table { + border: 10px solid yellow; + padding: 10px; + width: 290px; + } + .row { + margin-left: 10px; + margin-top: 10px; + width: 230px; + height: 50px; + } + .cell { + margin: 10px; + margin-right: 5px; + margin-left: 5px; + width: 50px; + height: 50px; + display: inline-block; + vertical-align: top; + } + .firstcell { + margin-left: 10px; + } + .bigsquarecell { + margin:10px; + margin-left: 5px; + margin-right: 5px; + margin-bottom: 5px; + width: 110px; + height: 110px; + display: inline-block; + vertical-align: top; + background-position-x: -60px; + } + .c2 { + background-position-x: -60px + } + .c3 { + background-position-x: -120px; + } + .c4 { + background-position-x: -180px; + } + .bottomrow > .cell { + margin-top: 5px; + } +</style> +<main> +<div class="table"> +<div class="row bg"></div> +<div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div> +<div class="bottomrow"><div class="cell firstcell bg"></div><div class="cell c2 bg"></div><div class="cell c3 bg"></div><div class="cell c4 bg"></div> +</div> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html new file mode 100644 index 0000000000..69105e6937 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>Table row background image geometry</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="background-image-row-ref.html" /> +<meta name="assert" content="Row backgrounds get painted into cells with correct geometry."> +<style> + body { + --peek: LightGreen; + } + .bg { + background-color: var(--peek); + background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); + background-size: 230px 50px; + background-repeat: no-repeat; + /* FF sometimes defaults to no-repeat for background images */ + } + main > * { + box-sizing: border-box; + } + main table { + border-spacing: 10px; + border: 10px solid yellow; + padding: 10px; + } + main td { + width: 50px; + height: 50px; + padding: 0px; + } +</style> +<body> +<main> + <table> + <tr class="bg"> + <td colspan=4></td> + </tr> + <tr class="bg"> + <td></td> + <td rowspan=2 colspan=2></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr class="bg"> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </table> +</main> +</body> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html new file mode 100644 index 0000000000..40d80cac48 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<style> +body { + --bluetrans: rgba(0,0,255,0.5); + --yellowtrans: rgba(255,255, 0, 0.5); + --orangetrans: rgba(255,165,0,0.5); + --greentrans: rgba(0,255,0, 0.5); +} +body * { + box-sizing: border-box; +} +#container > * { + position:absolute; +} +</style> +<div id="container" style="position:relative;width:200px;height:200px"> + <!-- blues --> + <div style="width:56px;height:150px;background:var(--bluetrans);border: 6px solid blue;border-bottom:none;"></div> + <div style="width:56px;height:56px;top:150px;background:var(--bluetrans);border-left: 6px solid blue;border-bottom:6px solid blue;"></div> + <!-- green --> + <div style="width:94px;height:55px;top:51px;left:56px;background:var(--greentrans);border-top:4px solid green;"></div> + <div style="width:99px;height:44px;top:106px;left:56px; + background:var(--greentrans);border-right:4px solid green;"></div> + <!-- yellow --> + <div style="width:56px;height:56px;top:50px;left:150px;background:var(--yellowtrans);border:6px solid yellow"></div> + <!-- orange --> + <div style="width:156px;height:56px;top:150px;left:50px;background:var(--orangetrans);border: 6px solid orange"></div> + <!-- transparent --> + <div style="width:48px;height:49px;top:2px;left:56px;border-top: 2px solid black;border-right:2px solid black"></div> + <div style="width:50px;height:48px;top:2px;left:104px;border-top: 2px solid black;border-right:2px solid black"></div> + <div style="width:50px;height:48px;top:2px;left:154px;border-top: 2px solid black;border-right:2px solid black"></div> + <div style="width:50px;height:44px;top:106px;left:154px;border-right:2px solid black"></div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html new file mode 100644 index 0000000000..60e1390b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Collapsed borders of large cells</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> +<link rel="match" href="collapsed-border-large-cell-ref.html" /> +<meta name="assert" content="Collapsed borders of large cells can collapse a single edge."> +<style> +main * { + box-sizing: border-box; +} +main table { + border-collapse: collapse; +} +main td { + padding:0px; + width: 50px; + height:50px; + border: 2px solid black; +} +</style> +<main> + <table> + <colgroup style="border:6px solid blue;background:rgba(0,0,255,0.5);"></colgroup> + <tr> + <td rowspan=4></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td rowspan=2 colspan=2 style="border:4px solid green; background: rgba(0,255,0, 0.5);"></td> + <td style="border: 6px solid yellow;background:rgba(255,255, 0, 0.5)"></td> + </tr> + <td></td> + <tr> + <td colspan=3 style="border:6px solid orange;background:rgba(255,165,0,0.5)"></td> + </tr> + </table> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html new file mode 100644 index 0000000000..fca7b4196c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<style> +main * { + box-sizing: border-box; +} +main .table { + overflow: hidden; + border: 20px solid green; + width:90px; +} +main .caption { + height: 30px; + background: lightblue; + width:90px; + text-align: center; +} +main .cell { + padding:0px; + width: 50px; + height:50px; +} +</style> +<main> + <div class="table"> + <div class="cell"> + <div style="width:50px;height:50px"> + <div style="width:500px;height:500px;background:pink"></div> + </div> + </div> + </div> +<div class="caption" style="caption-side:bottom">caption</caption> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html new file mode 100644 index 0000000000..dc252b1652 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Overflow hidden and captions</title> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#global-style-overrides" /> +<link rel="match" href="overflow-hidden-table-ref.html" /> +<meta name="assert" content="Overflow hidden clips table grid, but not captions."> +<style> +main * { + box-sizing: border-box; +} +main table { + overflow: hidden; + border: 20px solid green; + border-spacing: 0px; +} +main caption { + height: 30px; + background: lightblue; +} +main td { + padding:0px; + width: 50px; + height:50px; +} +</style> +<main> + <table> + <tr> + <td> + <div style="width:50px;height:50px"> + <div style="width:500px;height:500px;background:pink"></div> + </div> + </td> + </tr> + <caption style="caption-side:bottom">caption</caption> + </table> +</main> diff --git a/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html b/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html new file mode 100644 index 0000000000..604b536df1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html @@ -0,0 +1,170 @@ +<!doctype html> +<title>Table parts sticky containers</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5020"/> +<style> + body { + margin: 0; + } + main * { + box-sizing: border-box; + } + + main .scroller { + width: 350px; + height: 302px; + overflow-y: scroll; + outline-offset: -1px; + outline: gray solid 1px; + } + main .padblock { + width: 300px; + height: 400px; + outline-offset: -2px; + outline: black dotted 2px; + } + main table { + border-spacing: 0; + } + + main td { + width: 100px; + height: 25px; + } + .sticky { + position:sticky; + top: 0; + background: rgba(0,255,0, 0.3); + } + +</style> +<main> + <div class="scroller"> + <div class="padblock">top</div> + <table> + <thead> + <tr> + <td>h:0,0</td> + <td>h:0,1</td> + <td>h:0,2</td> + </tr> + <tr > + <td>h:1,0</td> + <td >h:1,1</td> + <td>h:1,2</td> + </tr> + <tr> + <td>h:2,0</td> + <td>h:2,1</td> + <td>h:2,2</td> + </tr> + </thead> + <tbody> + <tr> + <td>b:0,0</td> + <td>b:0,1</td> + <td>b:0,2</td> + </tr> + <tr> + <td>b:1,0</td> + <td>b:1,1</td> + <td>b:1,2</td> + </tr> + <tr> + <td>b:2,0</td> + <td>b:2,1</td> + <td>b:2,2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>f:0,0</td> + <td>f:0,1</td> + <td>f:0,2</td> + </tr> + <tr> + <td>f:1,0</td> + <td>f:1,1</td> + <td>f:1,2</td> + </tr> + <tr> + <td>f:2,0</td> + <td>f:2,1</td> + <td>f:2,2</td> + </tr> + </tfoot> + </table> + <div class="padblock">bottom</div> + </div> +</main> +<script> + + function scrollTo(y) { + let scroller = document.querySelector("main .scroller"); + scroller.scrollTop = y; + } + + test( () => { + // Setup + let target = document.querySelector("main tbody tr:nth-child(2) td:nth-child(2)"); + let scroller = document.querySelector("main .scroller"); + target.classList.toggle("sticky"); + + // Tests + scrollTo(0); + assert_equals(target.getBoundingClientRect().top, 500, "intrinsic position"); + + scrollTo(600); + assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); + + scrollTo(640); + assert_equals(target.getBoundingClientRect().top, -40, "sticking to the table bottom"); + + // Teardown + target.classList.toggle("sticky"); + }, "TD sticky container is table"); + + test( () => { + // Setup + let target = document.querySelector("main tbody tr:nth-child(2)"); + let scroller = document.querySelector("main .scroller"); + target.classList.toggle("sticky"); + + // Tests + scrollTo(0); + assert_equals(target.getBoundingClientRect().top, 500, "intrinsic position"); + + scrollTo(600); + assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); + + scrollTo(640); + assert_equals(target.getBoundingClientRect().top, -40, "sticking to the table bottom"); + // Teardown + target.classList.toggle("sticky"); + }, "TR sticky container is table"); + + + test( () => { + // Setup + let target = document.querySelector("main tbody"); + let scroller = document.querySelector("main .scroller"); + target.classList.toggle("sticky"); + + // Tests + scrollTo(0); + assert_equals(target.getBoundingClientRect().top, 475, "intrinsic position"); + + scrollTo(550); + assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); + + scrollTo(600); + assert_equals(target.getBoundingClientRect().top, -50, "sticking to the table bottom"); + + // Teardown + target.classList.toggle("sticky"); + }, "TBODY sticky container is table"); + +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html new file mode 100644 index 0000000000..364ae321c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html @@ -0,0 +1,503 @@ +<!doctype html> +<title>ROWSPAN redistribution</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" /> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4418" /> +<style> + main table { + margin-top: 8px; + border-collapse: collapse; + background: rgba(0,0,255,0.1); + background-image: linear-gradient(45deg, #DDD 25%, transparent 25%), linear-gradient(-45deg, #DDD 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #DDD 75%), linear-gradient(-45deg, transparent 75%, #DDD 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; + } + .sizer { + width: 30px; + height: 100px; + } + main tbody tr:nth-child(odd) { + background: rgba(255,255,0,1.0); + } + main tbody tr:nth-child(even) { + background: rgba(255,165,0,1.0); + } + main td div { + background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, rgba(0,255,0,0.7) 100%); + } + main .td-padding td { + padding: 2px; + } + main .td-padding-xl td { + padding: 10px; + } +</style> +<main> +<h1>ROWSPAN > 1 to row distribution</h1> +<p>The algorithm has not been standardized. This is my understanding of how it works.</p> +<ol> + <li>rowspan>1 TDs are sorted:</li> + <ol> + <li>If TD span the same rows, taller TD is distributed first.</li> + <li>If one TD is fully enclosed by another, inner TD is distributed first.</li> + <li>Otherwise, higher TD is distributed first.</li> + </ol> + <li>Each rowspan>1 TD's height is distributed as following</li> + <ol> + <li>rowspan > 1 TDs have height TDh, span N rows. N rows have total height of Rh. TDh - Rh height, Dh, must be distributed as follows.</li> + <li>If percentage resolution size is available (this happens when redistributiong table/section height), percentage rows grow to their percentage size, proportional to (percentage size - current size). Dh shrinks by distributed height. Justification: explicit percentage rows should grow to their percentage.</li> + <li>Rows that originate rowspan>1 cells get all the Dh height, distributed evenly. Justification: rowspan>1 rows are likely to need to grow later. If there are multiple rowspan>1 cells, there can be multiple originating rows.</li> + <li>Unconstrained non-empty rows grow, proportional to their existing height.</li> + <li>If all rows are empty, last row gets all the height. Justification: ???</li> + <li>Contstrained rows grow in proportion to current height.</li> + </ol> + </ol> +<p class="error">It is unclear what the existing ChromeLegacy/FF algorithms do for distribution over rowspan>1 and empty cells. <a href="https://dxr.mozilla.org/mozilla-central/source/layout/tables/nsTableRowGroupFrame.cpp#509">FF special cases</a> "there is no cell originating in the row with owspan=1 and there are at least 2 cells spanning the row. Chrome Legacy also tries to do something similar, but they disagree on what. TablesNG will try to ship without special cases.</p> + <p class="error">Safari fails most of these tests</p> +<p>Color scheme</p> +<table> + <tr> + <td>odd rows are yellow</td> + </tr> + <tr> + <td>even rows are orange</td> + </tr> + <tr> + <td><div style="height:50px">inner divs have a green gradient</div> + </td> + </tr> + <tr> + <td>row</td> + </tr> + <tr> + <td>row</td> + </tr> + <tr> + <td>row</td> + </tr> + <tr> + <td>row</td> + </tr> + +</table> +<h2>Unconstrained rows</h2> + <p>Rows whose height is not fixed or percent are unconstrained.</p> +<p class="testdesc">Unconstrained rows +Unconstrained rows are redistributed proportionally. Rows are constrained if their height is fixed, or percent.</p> +<table> + <tbody> + <tr data-expected-height="50"> + <td>0,0</td> + <td rowspan="2"><div class="sizer"></div></td> + </tr> + <tr data-expected-height="50"> + <td>0,1</td> + </tr> +</table> + +<p class="testdesc">Unconstrained rows with zero height do not grow.</p> +<table> + <tbody> + <tr data-expected-height="50"> + <td>0,0</td> + <td rowspan="3"><div class="sizer"></div></td> + </tr> + <tr data-expected-height="0"> + </tr> + <tr data-expected-height="50"> + <td>0,2</td> + </tr> +</table> + +<p class="testdesc">rowspan>1 is zero height, spanned rows have height.</p> +<table> + <tbody> + <tr data-expected-height="0"> + <td></td> + <td rowspan="3"><div class="sizer"></div></td> + <td></td> + </tr> + <tr data-expected-height="50"> + <td>1,0</td> + <td></td> + </tr> + <tr data-expected-height="50"> + <td>2,0</td> + <td></td> + </tr> +</table> + +<p class="testdesc">Unconstrained rows are redistributed proportionally to heights</p> +<table> + <tbody> + <tr data-expected-height="75"> + <td><div style="height:45px">0,0</div></td> + <td rowspan="2"><div class="sizer"></div></td> + </tr> + <tr data-expected-height="25"> + <td><div style="height:15px">0,1</div></td> + </tr> +</table> + +<h2>Fixed rows</h2> + +<p class="testdesc">Constrained fixed rows +do not grow if there are unconstrained ones</p> +<p class="error">Edge grows constrained rows too</p> +<table> + <tbody> + <tr style="height: 30px" data-expected-height="30"> + <td>0,0 30px</td> + <td rowspan="2"><div class="sizer"></div></td> + </tr> + <tr data-expected-height="70"> + <td>0,1</td> + </tr> +</table> + +<p class="testdesc"> Constrained fixed rows +grow proportionally to their size if there are no unconstrained rows</p> +<table> + <tbody> + <tr style="height: 20px" data-expected-height="25"> + <td>20</div></td> + <td rowspan="3"><div class="sizer"></div></td> + </tr> + <tr style="height: 20px" data-expected-height="25"> + <td>20</td> + </tr> + <tr style="height: 40px" data-expected-height="50"> + <td>40</td> + </tr> +</table> + +<h2>Percent rows</h2> + +<p class="testdesc">Constrained percent rows +grow like unconstrained ones when percent resolution size is undefined.</p> +<p class="error">FF always treats percent rows as constrained. Chrome legacy does resolve percentage against final height of the table. I do not think that can work. Edge follows NG.</p> +<table> + <tbody> + <tr style="height: 30%" data-expected-height="50"> + <td>0,0 30%</td> + <td rowspan="2"><div class="sizer"></div></td> + </tr> + <tr data-expected-height="50"> + <td>0,1</td> + </tr> + <tr style="height:100px"><td>100px</td></tr> +</table> + + +<p class="testdesc">Percent rows with zero height +do not grow.</p> +<p class="error">Legacy Chrome has a strange gap between rows</p> +<table> + <tbody> + <tr data-expected-height="50"> + <td>0,0</td> + <td rowspan="3"><div class="sizer"></div></td> + </tr> + <tr style="height:10%;background:red" data-expected-height="0"> + </tr> + <tr data-expected-height="50"> + <td>2,0</td> + </tr> +</table> + +<h2>Order of rowspan distribution</h2> + + +<p class="testdesc">If cells span the same rows, bigger cell is distributed first +Not sure how to test this, I think it is just an optimization, there is no observable effect. +<p class="error">FF and Legacy Chrome unexpectedly distribute height evenly between rows in the first test case. Edge and TablesNG do not.</p> +<table> + <tr data-expected-height=0> + <td rowspan=3><div style="height:50px"></div></td> + <td rowspan=3><div style="height:99px"></div></td> + </tr> + <tr data-expected-height=0> + </tr> + <tr data-expected-height=99> + </tr> + <tr> + <td>bottom</td> + <td>bottom</td> + </tr> +</table> +<table> + <tr data-expected-height=0> + <td rowspan=3><div style="height:50px"></div></td> + <td rowspan=3><div style="height:99px"></div></td> + <td style="width:20px"></td> + </tr> + <tr data-expected-height=0> + <td></td> + </tr> + <tr data-expected-height=99> + <td></td> + </tr> + <tr> + <td>bottom</td> + <td>bottom</td> + </tr> +</table> +<table> + <tr data-expected-height=0> + <td rowspan=3><div style="height:99px;width:20px"></div></td> + </tr> + <tr></tr> + <tr data-expected-height=99></tr> + <tr> + <td>bottom</td> + <td>bottom</td> + </tr> +</table> + + +<p class="testdesc">If one cell is fully enclosed by another, inner cell wins. +<p class="error">Not in Edge</p> +<table> + <tr data-expected-height=0> + <td rowspan=4><div style="height:50px;width:20px"></div></td> + <td></td> + <tr data-expected-height=0> + <td></td> + <td rowspan=2><div style="height:100px;width:20px"></div></td> + </tr> + <tr data-expected-height=100></tr> + <tr data-expected-height=0></tr> +</tr> +</table> + +<p class="testdesc">First row wins. +rowspan-4 distributes 50 to last empty row, row3. rowspan-3 distributes 100px to only nonempty row, row3. +<p class="error">Edge disagrees here.</p> +<table> + <tr data-expected-height=0> + <td rowspan=4><div style="height:50px;width:20px"></div></td> + <td></td> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=100> + <td></td> + <td rowspan=3><div style="height:100px;width:20px"></div></td> + </tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> +</tr> +</table> + +<h2>Rowspan distribution over empty rows.</h2> + +<p class="testdesc">Rowspans that span non-existent rows +Span is truncated so only existing rows are spanned.</p> +<table> + <tbody data-expected-height="100"> + <tr> + <td data-expected-height="50">0,0</td> + <td data-expected-height="100" rowspan="5"><div style="height:100px;">rowspan 5</div></td> + </tr> + <tr> + <td data-expected-height="50">1,0</td> + </tr> + <tr data-expected-height="0"></tr> + </tbody> + <tbody> + <tr> + <td>body 2</td> + </tr> + </tbody> +</table> + +<p class="testdesc">Rowspan spans only empty rows +Last spanned row gets all the height. +<p class="error">Edge distributes height to all empty rows, not just last.</p> +<table> + <tr> + <td>first row</td> + </tr> + <tr data-expected-height=0> + <td></td> + <td rowspan=5><div style="height:100px;width:30px;"></div></td> + </tr> + <tr data-expected-height=0><td></td></tr> + <tr data-expected-height=0><td></td></tr> + <tr data-expected-height=0><td></td></tr> + <tr data-expected-height=100><td></td></tr> + <tr> + <td>last row</td> + </tr> +</table> + +<p class="testdesc">TD is not considered empty if it has padding, but no content +<table> + <tr> + <td>first row</td> + </tr> + <tr data-expected-height=0> + <td></td> + <td style="height:100px" rowspan=3></td> + </tr> + <tr data-expected-height=100><td style="padding:2px"></td></tr> + <tr data-expected-height=0></tr> + <tr> + <td>last row</td> + </tr> +</table> + +<p class="testdesc">row with an empty tall cell is not considered empty. +<p class="error"> +<table> + <tr> + <td rowspan=5><div style="height:100px">rowspan</div></td> + <td></td> + <td></td> + </tr> + <tr data-expected-height=100> + <td rowspan=5></td> + <td></td> + </tr> + <tr></tr> + <tr></tr> + <tr></tr> + <tr></tr> +</table> + +<p class="testdesc">Empty rows with border-spacing big enough for rowspan cell +rows are 0 height, cell spans the entire table. +<table style="border-spacing:20px;border-collapse:separate " data-expected-height=100> + <tr data-expected-height=0> + <td rowspan=4><div style="height:60px;width:40px"></div></td> + </tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> +</table> + +<p class="testdesc">row with a non-empty rowspan>0 cell is empty. +Distributes to all rows except start row? +<p class="error"> +<table> + <tr> + <td rowspan=5><div style="height:100px">rowspan</div></td> + <td></td> + </tr> + <tr data-expected-height=100> + <td rowspan=5><div style="height:100px">rowspan</div></td> + </tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> + <tr></tr> + <tr></tr> +</table> +<table> + <tr> + <td rowspan=5><div style="height:100px">rowspan</div></td> + <td></td> + </tr> + <tr data-expected-height=100> + <td>yo</td> + </tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> + <tr data-expected-height=0></tr> +</table> + + +<p class="testdesc">Distribution over rowspan > 1 rows +Distribution over rowspan > 1 rows + +<table class="td-padding-xl" data-expected-height=360> + <tr> + <td rowspan=6><div style="width:50px;height:280px"></div></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr style="height:30%;background:purple"> + <td data-expected-height=20></td> + </tr> + <tr data-expected-height=110> + <td rowspan=7 ></td> + </tr> + <tr data-expected-height=110> + <td rowspan=17 ><div style="width:50px;height:40px"></div></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> +</table> + +<p class="testdesc">Distribution of table height over rowspan > 1 rows +If there are any unconstrained non-empty rows, they get it. +When all rows are empty, last row takes it</p> +<table class="td-padding-xl" style="height:460px"> + <tr> + <td rowspan=6><div style="width:50px;height:280px" data-expected-height=280></div></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr style="height:30%;background:purple" data-expected-height=120> + <td ></td> + </tr> + <tr data-expected-height=110> + <td rowspan=7 ></td> + </tr> + <tr data-expected-height=110> + <td rowspan=17><div style="width:50px;height:40px"></div></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> + <tr> + <td></td> + </tr> +</table> + +<p class="testdesc">Distribution of rowspan over percentage rows +Percentage rows are considered empty if they cannot resolve</p> +<table> + <tbody> + <tr style="height:20%"> + <td rowspan=3><div style="height:100px;width:100px"></div></td> + <td></td> + </tr> + <tr style="height:30%"> + <td></td> + </tr> + <tr data-expected-height=100 style="height:50%"> + <td></td> + </tr> + </tbody> +</table> + +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html new file mode 100644 index 0000000000..dd403d248c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4418"> +<p>Test passes if there is a filled green square.</p> +<div style="display: table; width: 100px; height: 100px;"> + <div style="display: table-header-group; background: green; height: 20px;"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html new file mode 100644 index 0000000000..d1546b1e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4418"> +<p>Test passes if there is a filled green square.</p> +<div style="display: table; width: 100px; height: 100px;"> + <div style="display: table-header-group; background: green; height: 20%;"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/tentative/support/README b/testing/web-platform/tests/css/css-tables/tentative/support/README new file mode 100644 index 0000000000..67e87ca891 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/support/README @@ -0,0 +1,13 @@ +This test suite is created as part of Chrome's NG table rewrite in 2020. +TablesNG: https://crbug.com/958381 + +Many parts of table layout algorithm have been left unspecified by the +existing specification: +https://www.w3.org/TR/css-tables-3/ + +These tests are an attempt to exaustively test all parts of the +algorithm. When specification did not specify the algorithm, +the proposed algorithm is described in the tests. + +Our goal is that these tests will guide creation of a more complete +table standard. diff --git a/testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css b/testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css new file mode 100644 index 0000000000..08d65b2b87 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css @@ -0,0 +1,34 @@ +/* +Tables-ng test styling. + +Usage: + +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<p class="testdesc">Short description here + Analysis +<p class="error">Current disagreements between browsers</p> +*/ +main td { + padding: 0; +} +.error { + color: #b70000; +} +p { + margin-top:4px; + margin-bottom:4px; +} +body { + counter-reset: testid; +} +.testdesc { + white-space: pre-line; + margin-top: 16px; +} +.testdesc:before { + content: counter(testid) ". "; + counter-increment: testid; +} +.testdesc:first-line { + font-family: monospace; +} diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html b/testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html new file mode 100644 index 0000000000..5be81d2056 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html @@ -0,0 +1,146 @@ +<!doctype html> +<title>Table minmax tricks</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> +<style> + main table { + table-layout:fixed; + width: 100%; + background: #ddd; + border-spacing: 0; + } + main td { + padding: 0; + } +</style> +<h1>Infinite intrinsic table widths</h1> +<p>Originally, algorithm for computing intrinsic table inline size had a special case: <br> + If table is fixed, and has a width:%, its intrinsic inline size was "infinite". <br> +This ensured that fixed table with 100% width inside block layout would expand to container's width. </p> +<p>Different containers do not have reasonable handling of intrinsic infinitely sized +children. For those, table's intrinsic size should never be infinite, but instead +default to regular max size.</p> + +<main> +<h3>Flexbox</h3> + +<p>flex width:auto</p> +<div id="flextest" style="display:flex;"> + <table> + <td>flex</td> + </table> + <div style="width:98px;border:1px solid black;flex-shrink:0">flex div</div> +</div> + +<p>flex width:max-content</p> +<div id="flextest_max" style="display:flex;width:max-content"> + <table> + <td><div style="width:100px">flex</div></td> + </table> + <div style="width:100px;border:1px solid black;flex-shrink:0">flex div</div> +</div> + +<p>flex width:min-content</p> +<div id="flextest_min1" style="display: flex; width: min-content;"> + <table style="flex: 0 0 content; min-width: 0px;"> + <td style="width: 100px;"></td> + </table> +</div> + +<div id="flextest_min2" style="display: flex; width: min-content;"> + <div style="flex: 0 0 auto; min-width: 0px;"> + <table> + <td style="width: 100px;"></td> + </table> + </div> +</div> + +<h3>Grid</h3> +<p>grid width:auto</p> +<div id="grid" style="display:grid;grid-template-columns: 1fr;width:auto"> + <table> + <td><div style="width:100px">grid</div></td> + </table> +</div> +<p>grid width:max-content</p> +<div id="grid_max" style="display:grid;grid-template-columns: 1fr;width:max-content"> + <table> + <td><div style="width:100px">grid</div></td> + </table> +</div> + +<h3>Table</h3> +<table id="table_container" style="table-layout:auto;width:auto; background: #aaa;"> + <tr> + <td> + <table> + <td><div style="width:100px">table</div></td> + </table> + </td> + </tr> +</table> + +<h3>Absolute</h3> +<div id="absolute" style="width:400px;height:100px;outline:solid 1px green;position:relative"> + <table style="position:absolute;right:0;top:0"> + <td>absolute</td> + </table> +</div> + +<script> + test(_ => { + let flexbox = document.querySelector("#flextest"); + let table = flexbox.querySelector("table"); + let div = flexbox.querySelector("div"); + assert_equals(div.offsetWidth, 100); + assert_equals(flexbox.offsetWidth, document.body.offsetWidth); + assert_equals(flexbox.offsetWidth, table.offsetWidth + div.offsetWidth); + }, "table's width inside flexbox width:auto is not infinite"); + + test(_ => { + let flexbox = document.querySelector("#flextest_max"); + let table = flexbox.querySelector("table"); + assert_greater_than(table.offsetWidth, document.body.offsetWidth); + }, "table's width inside flexbox width:max-content is infinite"); + + test(_ => { + let flexbox = document.querySelector("#flextest_min1"); + let table = flexbox.querySelector("table"); + assert_equals(flexbox.offsetWidth, 100); + assert_greater_than(table.offsetWidth, document.body.offsetWidth); + }, "table's width inside flexbox width:min-content is infinite, but the flexbox is finite; scenario 1"); + + test(_ => { + let flexbox = document.querySelector("#flextest_min2"); + let table = flexbox.querySelector("table"); + assert_equals(flexbox.offsetWidth, 100); + assert_greater_than(table.offsetWidth, document.body.offsetWidth); + }, "table's width inside flexbox width:min-content is infinite, but the flexbox is finite; scenario 2"); + + test(_ => { + let grid = document.querySelector("#grid"); + let table = grid.querySelector("table"); + assert_equals(grid.offsetWidth, document.body.offsetWidth); + assert_equals(grid.offsetWidth, table.offsetWidth); + }, "table's width inside grid width:auto is not infinite"); + + test(_ => { + let grid = document.querySelector("#grid_max"); + let table = grid.querySelector("table"); + assert_greater_than(table.offsetWidth, document.body.offsetWidth); + }, "table's width inside grid width:max-content is infinite"); + + test(_ => { + let table = document.querySelector("#table_container"); + assert_equals(table.offsetWidth, document.body.offsetWidth); + }, "table's width inside a table cell is infinite"); + + test(_ => { + let abs = document.querySelector("#absolute"); + let table = abs.querySelector("table"); + assert_equals(table.offsetWidth, abs.offsetWidth); + }, "table's width inside an absolute block is infinite"); + +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html new file mode 100644 index 0000000000..c0f48e4f20 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html @@ -0,0 +1,317 @@ +<!doctype html> +<title>TABLE height redistribution</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel='stylesheet' href='../support/base.css' /> +<link rel='stylesheet' href='./support/table-tentative.css' /> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" /> +<style> + main table { + border-spacing: 0px; + background: rgba(255,0,0,0.3); + height: 100px; + width: 100px; + } + main td { + padding: 0; + } + main table tbody:nth-child(1) { + background: #CCC; + } + main table tbody:nth-child(2) { + background: #AAA; + } + main table tbody:nth-child(3) { + background: #999; + } + main table thead { + background: rgba(0,255,0,0.3); + } + main table tfoot { + background: rgba(255,255,0,0.3); + } + + .debug { + width:100px; + height:1px; + position:relative; + } + .debug pre { + position:absolute; + font: 30px/30px monospace; + left: 120px; + top:-30px; + } + +</style> +<main> + <h1>Tests for redistribution of table height to row group height.</h1> + <p>This algorithm has not been standardized. Browsers implementations disagree a lot. + Legacy Chrome used to always distribute all the height to the first tbody.</p> + +<pre class=error>Major incompatibility: Legacy: +- ignores any height set on sections. +- does not size the table unless section has a TR +- does not grow sections without TDs +- only distributes height to the 1st tbody +FF +- does not prioritize thead for height distribution most of the time. +- y offset of multiple tbodies can be incorrect. +</pre> + +<h2>Empty table</h2> +<p>Empty tables always grow to specified height in all browsers.</p> +<p class="testdesc">no sections</p> +<table data-expected-height=100></table> + +<p class="testdesc">no sections, no border spacing</p> +<table style="border-spacing: 0" data-expected-height=100></table> + +<p class="testdesc">collapsed table no sections</p> +<table style="border-collapse:collapse" data-expected-height=100></table> + +<p class="testdesc">fixed table no sections</p> +<table style="table-layout:fixed" data-expected-height=100></table> + +<h2>One TBODY</h2> +<p>The big difference here is between empty TBODY, and a body with an empty TR</p> +<li>FF: always sizes the table, only sizes TBODY if it has TR.</li> +<li>Legacy: does not size the table unless TBODY has TR</li> +<p>FF: sizes the table, but tbody size remains 0 unless tbody is not empty.</p> +<p>Legacy table size remains 0, or border-spacing</p> + +<p class="testdesc">single empty tbody</p> +<table data-expected-height=100> + <tbody data-expected-height=100></tbody> +</table> + +<p class="testdesc">single tbody+tr</p> +<table data-expected-height=100> + <tbody data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">border spacing</p> +<p class="error">FF/Legacy do not apply border-spacing</p> +<table style="border-spacing: 10px" data-expected-height=100> + <tbody data-expected-height=80><tr></tr></tbody> +</table> + +<p class="testdesc">collapsed table</p> +<table style="border-collapse:collapse" data-expected-height=100> + <tbody data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">fixed table</p> +<table style="table-layout:fixed" data-expected-height=100> + <tbody data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">tbody has fixed height</p> +<p class="error">FF adds tbody height to table?</p> +<table data-expected-height=100> + <tbody style="height:50px" data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">tbody has fixed height > table</p> +<p class="error">Legacy: table size wins. FF: table size wins, but body grows to 300px?</p> +<table data-expected-height=200> + <tbody style="height:200px" data-expected-height=200><tr></tr></tbody> +</table> + +<p class="testdesc">tr has fixed height > table</p> +<p class="error">FF: table size wins, but body is 300.</p> +<table data-expected-height=200> + <tbody data-expected-height=200><tr style="height:200px"></tr></tbody> +</table> + +<p class="testdesc">tbody has percentage height > table</p> +<table data-expected-height=100> + <tbody style="height:200%" data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">tr has percentage height > table</p> +<p class=error>FF/Legacy: table wins. FF: body is 200px</p> +<table data-expected-height=100> + <tbody data-expected-height=100><tr style="height:200%"></tr></tbody> +</table> + +<p class="testdesc">non-empty tbody</p> +<table data-expected-height=100> + <tbody data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">non-empty thead</p> +<table data-expected-height=100> + <thead data-expected-height=100><tr></tr></thead> +</table> + +<h2>THEAD TBODY</h2> + +<p class="testdesc">empty thead, empty tbody</p> +<p class="error">FF thead/tbody both grow</p> +<table data-expected-height=100> + <thead data-expected-height=0><tr></tr></thead> + <tbody data-expected-height=100><tr></tr></tbody> +</table> + +<p class="testdesc">sized thead, empty tbody</p> +<table data-expected-height=100> + <thead data-expected-height=20><td style="height:20px">thead</td></thead> + <tbody data-expected-height=80><tr></tr></tbody> +</table> + +<p class="testdesc">table layout fixed, thead with td, tbody</p> +<table style="table-layout:fixed" data-expected-height=100> + <thead data-expected-height=20> + <tr> + <td style="height:20px">thead</td> + </tr> + </thead> + <tbody data-expected-height=80><tr><td>x</td></tr></tbody> +</table> + +<p class="testdesc">table layout fixed, thead+td, tbody+td</p> +<table style="table-layout:fixed" data-expected-height=100> + <thead data-expected-height=20> + <tr> + <td style="height:20px">thead</td> + </tr> + </thead> + <tbody data-expected-height=80><tr><td>x</td></tr></tbody> +</table> + +<p class="testdesc">thead with td</p> +<table data-expected-height=100> + <thead data-expected-height=20> + <tr> + <td style="height:20px">thead</td> + </tr> + </thead> + <tbody data-expected-height=80> + <tr> + </tr> + </tbody> +</table> + +<p class="testdesc">tfoot with td</p> +<table data-expected-height=100> + <tfoot data-expected-height=20> + <tr> + <td style="height:20px">tfoot</td> + </tr> + </tfoot> + <tbody data-expected-height=80> + <tr> + </tr> + </tbody> +</table> + +<h2>Multiple TBODY</h2> +<p class="error">Legacy does not distribute any heights when tr is empty.</p> +<p class="error">Legacy always distributes everything to 1st tbody.</p> + +<p class="testdesc">2 tbody</p> +<table data-expected-height=100> + <tbody data-expected-height=50><tr></tr></tbody> + <tbody data-expected-height=50><tr></tr></tbody> +</table> + +<p class="testdesc">2 tbody, with non-empty tds</p> +<p class="error">Legacy distributes everything to 1st tbody</p> +<table data-expected-height=100> + <tbody data-expected-height=50><tr><td>x</td></tr></tbody> + <tbody data-expected-height=50><tr><td>x</td></tr></tbody> +</table> + + +<p class="testdesc">2 tbody, 40%, auto, no td</p> +<p class="error">FF: distributes everything to auto when empty. Legacy does not distribute</p> +<table data-expected-height=100> + <tbody style="height:40%" data-expected-height=40><tr></tr></tbody> + <tbody data-expected-height=60><tr></tr></tbody> +</table> + +<p class="testdesc">2 tbody, 40%, auto, non-empty td</p> +<table data-expected-height=100> + <tbody style="height:40%" data-expected-height=40><tr><td>x</td></tr></tbody> + <tbody data-expected-height=60><tr><td>x</td></tr></tbody> +</table> + +<p class="testdesc">2 tbody, 40px, auto, non-empty td</p> +<p class="error">FF gets confused with 2nd body placement</p> +<table data-expected-height=100> + <tbody style="height:40px" data-expected-height=40><tr><td>x</td></tr></tbody> + <tbody data-expected-height=60 data-offset-y=40><tr><td>x</td></tr></tbody> +</table> + +<p class="testdesc">2 tbody, 40%, 40px, non-empty td</p> +<p class="error">FF splits evenly</p> +<table data-expected-height=100> + <tbody style="height:40%" data-expected-height=40><tr><td>x</td></tr></tbody> + <tbody style="height:40px" data-expected-height=60 data-offset-y=40><tr><td>x</td></tr></tbody> +</table> + +<h2>Sized THEAD/TBODY</h2> +<p class=error>FF does not prioritize TBODY for distribution</p> +<p class="testdesc">20px thead, 30px tbody</p> +<table data-expected-height=100> + <thead data-expected-height=20 style="height:20px"> + <tr><td>x</td></tr> + </thead> + <tbody data-expected-height=80 style="height:30px"> + <tr><td>x</td></tr> + </tbody> +</table> + +<p class="testdesc">20px thead's tr, 30px tbody's tr</p> +<table data-expected-height=100> + <thead data-expected-height=20 > + <tr style="height:20px"><td>x</td></tr> + </thead> + <tbody data-expected-height=80 > + <tr style="height:30px"><td>x</td></tr> + </tbody> +</table> + +<p class="testdesc">20px thead's td, 30px tbody's td</p> +<table data-expected-height=100> + <thead data-expected-height=20 > + <tr><td style="height:20px">x</td></tr> + </thead> + <tbody data-expected-height=80 > + <tr><td style="height:30px">x</td></tr> + </tbody> +</table> + +</main> + +<script> + checkLayout("table"); + + // Display body sizes next to the table. + for (let table of Array.from(document.querySelectorAll("table"))) { + let d = document.createElement("div"); + d.classList.add("debug"); + let log = document.createElement("pre"); + d.appendChild(log); + + let text = ""; + let x; + x = table.querySelector("thead"); + if (x) + text += `h:${x.offsetHeight}\n`; + x = table.querySelectorAll("tbody"); + if (x.length > 0) + for (body of Array.from(x)) + text += `b:${body.offsetHeight}\n`; + x = table.querySelector("tfoot"); + if (x) + text += `f:${x.offsetHeight}\n`; + log.innerText = text; + + table.parentNode.insertBefore(d, table); + } +</script> + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-minmax.html b/testing/web-platform/tests/css/css-tables/tentative/table-minmax.html new file mode 100644 index 0000000000..eda9ce37fb --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-minmax.html @@ -0,0 +1,144 @@ +<!doctype html> +<title>Table minmax tricks</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> +<style> + main table { + background: gray; + border-spacing: 10px 10px; + table-layout: auto; + } + main td { + background: #BFB; + font-size: 10px; + box-sizing: border-box; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + line-height: 2; + } + .container { + border: 5px solid orange; + margin-top: 8px; + box-sizing: border-box; + width: 600px; + } +</style> +<main> +<h2>Table minmax</h2> + +<p>How do different layout algorithms deal with table with an infinite max width?`</p> +<xmp> + <table> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:100px">100px</div></td> + </table> +</xmp> +<p>Block layout clamps the max width, but flex/grid/table layouts do not. What happens?</p> + +<p class="testdesc">Block layout</p> +<div class="container"> + <table data-expected-width=590> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:100px">100px</div></td> + </table> + <div>sibling</div> +</div> + +<p class="testdesc">Block layout with floats</p> +<div class="container"> + What about this? + <table style="float:left" data-expected-width=590> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:100px">100px</div></td> + </table> + <div style="float:left">sibling</div> + <div style="clear:both"></div> +</div> + + +<p class="testdesc">Table layout</p> + +<table class="container" style="width:auto"> + <td> + <table data-expected-width=160> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:50px">50px</div><div style="width:50px">50px</div></td> + </table> + </td> + <td><div style="width:100px;">sibling</div></td> +</table> + +<p class="testdesc">Flex layout 1 1 auto</p> +<p class="error">Edge is wider than flexbox</p> +<div class="container" style="display:flex;justify-content:center"> + <table style="flex: 1 1 auto" data-expected-width=355> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:50px">50px</div><div style="width:50px">50px</div></td> + </table> + <div style="background:yellow;flex:1 1 40px">40px</div> +</div> + +<p class="testdesc">Flex layout 0 0 auto</p> + +<div class="container" style="display:flex;justify-content:center"> + <table style="flex: 0 0 auto" data-expected-width=160> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:50px">50px</div><div style="width:50px">50px</div></td> + </table> + <div style="background:yellow;flex:1 1 auto">auto</div> +</div> + +<h2>Empty table sizes</h2> +<p class="testdesc">Completely empty table</p> +<table style="border-spacing: 0px 0px;" data-expected-height=0 data-expected-width=0></table> + +<p class="testdesc">Completely empty table with min-content width</p> +<table style="border-spacing: 0px 0px;width:min-content" data-expected-height=0 data-expected-width=0></table> + + +<p class="testdesc">Completely empty table with max-content width</p> +<table style="border-spacing: 0px 0px;width:max-content" data-expected-height=0 data-expected-width=0></table> + +<p class="testdesc">Completely empty table with width/height</p> +<table style="border-spacing: 0px 0px;width:50px;height:50px" data-expected-height=50 data-expected-width=50></table> + +<p class="testdesc">Empty table with border spacing</p> +<p class="error">Edge has width</p> +<table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0></table> + +<p class="testdesc">Table with just tbody and border spacing</p> +<p class="error">Chrome Legacy has width and 1/2 height. Edge has width. Proposal: make table empty.</p> +<table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0> + <tbody> + </tbody> +</table> + +<p class="testdesc">Table with tbody, tr, and border spacing</p> +<p class="error">Edge has height, 1/2 width. Chrome Legacy has width/height. Proposal: make table empty.</p> +<table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0> + <tbody> + <tr></tr> + </tbody> +</table> + +<p class="testdesc">Empty table with borders</p> +<p class="error">Edge has width 30, height 20</p> +<table style="border: 10px solid green" data-expected-height=20 data-expected-width=20></table> + +<p class="testdesc">Empty table with padding</p> +<p class="error">Edge has width 30, height 20</p> +<table style="padding: 10px" data-expected-height=20 data-expected-width=20></table> + +<p class="testdesc">Empty table with caption</p> +<table data-expected-height=30 data-expected-width=100><caption><div style="width:100px;height:30px">caption</div></caption></table> +</main> + +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-quirks.html b/testing/web-platform/tests/css/css-tables/tentative/table-quirks.html new file mode 100644 index 0000000000..af2a516c0e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-quirks.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> +<title>Table quirks</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css" /> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://quirks.spec.whatwg.org/#the-table-cell-width-calculation-quirk" /> +<style> + table { + table-layout: auto; + border-spacing: 8px 8px; + } + td { + padding: 20px; + background: #BFB; + font-size: 10px; + box-sizing: border-box; + } + td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> + +<h1>Tables in quirks mode proposals</h1> + +<p><a href="https://quirks.spec.whatwg.org/#the-table-cell-height-box-sizing-quirk">The table cell height box sizing quirk</a></p> +<table data-expected-height=116> + <tr> + <td style="height:100px;box-sizing:content-box" data-expected-height=100>100 height</td> + </tr> +</table> +<table data-expected-height=116> + <tr> + <td style="height:100px;box-sizing:border-box" data-expected-height=100>100 height</td> + </tr> +</table> + +<p><a href="https://quirks.spec.whatwg.org/#the-table-cell-nowrap-minimum-width-calculation-quirk">The table cell nowrap minimum width calculation quirk</a></p> +<p class="error">Chrome Legacy, Edge, Safari fail, only FF gets it correct.<b>Proposal: deprecate the quirk</b></p> +<table> + <tr> + <td nowrap style="width:50px;font: 20px/1 Ahem" data-expected-width=580>nowrap nowrap nowrap nowrap</td> + </tr> +</table> + +<p><a href="https://quirks.spec.whatwg.org/#the-text-decoration-doesnt-propagate-into-tables-quirk">The text decoration doesn’t propagate into tables quirk</a></p> +<div style="font-style:italic"> + <table> + <td id="notitalic">decoration</td> + </table> +</div> + +<p><a href="https://quirks.spec.whatwg.org/#the-collapsing-table-quirk">The collapsing table quirk</a></p> +<p class="error">Chrome Legacy/Edge/Safari ignore the quirk, FF does not. <b>Proposal: depreciate the quirk</b></p> +<table style="border: 20px solid green" data-expected-height=40 data-expected-width=40></table> + +<p><a href="https://quirks.spec.whatwg.org/#the-table-cell-width-calculation-quirk">The table cell width calculation quirk</a></p> +<table style="width:200px"> + <td data-expected-width=290><img style="width:50px;height:20px"><img style="width:50px;height:20px"><img style="width:50px;height:20px"><img style="width:50px;height:20px"><img style="width:50px;height:20px"></td> +</table> + +<script> + let pngSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACWAQMAAAChElVaAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAgAD///8UPy9PAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+MBDwkdA1Cz/EMAAAAbSURBVEjH7cGBAAAAAMOg+VPf4ARVAQAAAM8ADzwAAeM8wQsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDEtMTVUMTc6Mjk6MDMtMDg6MDCYDy9IAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAxLTE1VDE3OjI5OjAzLTA4OjAw6VKX9AAAAABJRU5ErkJggg==" +; + for (let img of Array.from(document.querySelectorAll("img"))) { + img.src = pngSrc; + } + test(_ => { + assert_equals(window.getComputedStyle(document.querySelector("#notitalic")).fontStyle, "normal"); + }, "decoration does not propagate into table"); + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html new file mode 100644 index 0000000000..097ddacfc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html @@ -0,0 +1,267 @@ +<!doctype html> +<title>Columns widths fixed + padding</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> +<style> + body { + background: #EEE; + } + main table { + background: gray; + border-spacing: 8px 8px; + table-layout: fixed; + } + main td { + padding: 6px; + background: #BFB; + font-size: 10px; + box-sizing:content-box; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> +<main> +<h1>Fixed tables with padding: Compute column computed widths from assignable table width</h1> + +<p>This test is the similar to table-width-redistribution-fixed.html, + except that all cells have 6px padding. The comments in this test refer to padding incompatibilities only.</p> + +<p class="error">Percentage sizes and box-sizing are handled differently in FF/Chrome. In Chrome, %ge size is always treated as border-box size: column width = % * table width. In FF, box-sizing:content-box, %ge size is % * table width + border_padding, box-sizing:border-box same as Chrome. </p> + +<h2>Fixed only</h2> + +<p 3 class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100 +When table.css_width is < columns.css_width, how is the conflict resolved? +columns.css_width wins +<p class="error"> +<table style="width:50px" data-expected-width=248> + <tr> + <td style="width:100px" data-expected-width=112> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td style="width:100px" data-expected-width=112> + <div style="width:50px">50</div><div style="width:25px">25</div></td> + </tr> +</table> + +<p 4 class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115 +When table.css_width is > columns.css_width , how is the conflict resolved? +table.css_width wins</p> +<table style="width:300px" data-expected-width=300> + <tr> + <td style="width:100px" data-expected-width=138> + <div style="width:100px">100</div><div style="width:100px">100</div></td> + <td style="width:100px" data-expected-width=138> + <div style="width:90px">90</div><div style="width:25px">25</div></td> + </tr> +</table> + +<p 5 class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100 +Fixed cells must grow, but their min widths differ. +Fixed cells grow in proportion to their css width. +<table style="width:calc(300px + 24px)" data-expected-width=324> + <tr> + <td style="width:100px" data-expected-width=150> + <div style="width:50px">50</div></td> + <td style="width:100px" data-expected-width=150> + <div style="width:100px">100</div></td> + </tr> +</table> + +<p 6 class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100 +What happens when column.min_width > column.css_width +column.css_width wins over column.min_width. +<table style="width:100px" data-expected-width=248> + <tr> + <td style="width:100px" data-expected-width=112> + <div style="width:200px"></div></td> + <td style="width:100px" data-expected-width=112> + <div style="width:200px"></div></td> + </tr> +</table> + +<p 7 class="testdesc">Table: 1px. +What happens to min_width when multiple cells specify css_width of the same column? +1st cell wins. +<table style="width:1px" data-expected-width=128> + <tr> + <td style="width:100px" data-expected-width=112> + <div style="width:200px">200</div></td> + </tr> + <td style="width:150px" data-expected-width=112> + <div style="width:150px">150</div></td> + </tr> +</table> + + +<h2>Colspan distribution</h2> + +<p 9 class="testdesc">Table: 1px +Does column.min_width change with colspan distribution from later rows to first row? +No +<table style="width:1px" data-expected-width=86> + <tr> + <td data-expected-width=0> + <div style="width:50px"></div></td> + <td style="width:50px" data-expected-width=62> + <div style="width:50px"></div></td> + </tr> + <tr> + <td colspan=2 style="width:200px" data-expected-width=70> + <div style="width:200px"></div></td> + </tr> +</table> + + +<h2>Colspan header cells</h2> +<section> +<ol> + <li>Fixed/percentage colspan cells get distributed evenly.</li> + <li>Auto cells. Is the table even fixed?</li> +</ol> + +<p 12 class="testdesc">Assi: 300px +To make CO distributable width 100, declare it as 100px+8px spacing - 12px padding. +To make C1 distributable width 200, declare it as 220px+8px spacing - 12px padding. +Fixed header cells with colspan get divided evenly. +</p> +<p class="error">Legacy chrome does not substract border spacing before distribution</p> +<table style="width:calc(300px + 40px)" data-expected-width=340> + <tr> + <td colspan=2 style="width:96px" data-expected-width=108>108</td> + <td colspan=2 style="width:196px" data-expected-width=208>208</td> + </tr> + <tr> + <td data-expected-width=50>1</td> + <td>1</td> + <td data-expected-width=100>1</td> + <td>1</td> + </tr> +</table> + +<p 13 class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40% +Percentage header cells with colspan. +Colspan cells do not distribute border_padding, they just distribute widths. +C0/1/2/3 will not have border-padding becaouse of colspan, C4 because border-box +TD0 splits +C0/1 get 20% max (40 + padding)/ 2 = 22px, +C2/3 10% and (20 + padding) / 2 = 12px max, +C4 40%, 12px percent border padding, and 52 max + +Assignable width is 440 - 48, everyone gets according to percent. +C0/C1 get 80, C2/C3 get 40, and C4 gets 160. +</p> +<p class="error">Firefox seems to have a rounding error.</p> +<table style="width: calc(400px + 6 * 8px)" data-expected-width=448> + <tr> + <td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td> + <td colspan=2 style="width:20%" data-expected-width=88><div style="width:20px"></div></td> + <td style="width:40%;box-sizing:border-box" data-expected-width=160><div style="width:40px"></div></td> + </tr> + <tr> + <td data-expected-width=80>Auto</td> + <td data-expected-width=80>Auto</td> + <td data-expected-width=40>Auto</td> + <td data-expected-width=40>Auto</td> + <td data-expected-width=160>Auto</td> + </tr> +</table> + +<p 14 class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto +Auto header cells with colspan, table is min width +min_width does not get redistributed. +</p> +<table style="width:1px" data-expected-width=144> + <tr> + <td colspan=2 data-expected-width=8> + <div style="width:100px">100</div></td> + <td style="width:100px" data-expected-width=112>100</td> + </tr> + <tr> + <td data-expected-width=0>x</td> + <td data-expected-width=0>x</td> + <td data-expected-width=112>x</td> + </tr> +</table> + +<p 16 class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto +Auto colspan cells, and nothing else. Tricky because this means that internally +table has to represent 10 cells, and wide cells that span beyond table width +are usually truncated. +C0: 20*2+8=48, C1: 20*8 + 7*8=216</p> +<table style="width:calc(200px + 88px)" data-expected-width=288> + <tr> + <td colspan=2 style="height:20px" data-expected-width=48></td> + <td colspan=8 style="height:20px" data-expected-width=216></td> + </tr> +</table> + +<h2>Percentage only</h2> + +<p 17 class="testdesc">Assignable: 100px;columns add to 100%, auto width +Column percent adds to a 100, but because box-sizing is content box, +Column content size adds up to table width. +Column border size adds up to table width + padding (36px). +Columns get scaled down. +Scaling down is not defined by standard. FF and NG differ by a px (rounding?). +</p> +<table style="width:calc(100px + 68px)" data-expected-width=168> + <tr> + <td style="width:50%" data-expected-width=63>50%</td> + <td style="width:30%" data-expected-width=42>30%</td> + <td style="width:20%" data-expected-width=31>20%</td> + </tr> +</table> + +<p 18 class="testdesc">Assignable: 100px;columns add to 50%, auto width +Columns grow proportional to percent. +Slight rounding differences between NG and FF. +<table style="width:calc(100px + 68px)" data-expected-width=168> + <tr> + <td style="width:25%" data-expected-width=60>25%</td> + <td style="width:15%" data-expected-width=42.5>15%</td> + <td style="width:10%" data-expected-width=33>10%</td> + </tr> +</table> + + +<p 19 class="testdesc">Assignable: 100px;columns add to 50%, with min width +Min width is ignored. +<table style="width:calc(100px + 68px)" data-expected-width=168> + <tr> + <td style="width:50%" data-expected-width=63><div style="width:50px">50</div></td> + <td style="width:30%" data-expected-width=42><div style="width:50px">50</div></td> + <td style="width:20%" data-expected-width=31><div style="width:50px">50</div></td> + </tr> +</table> + +<h2>Percentage/auto/fixed mix</h2> + +<p class="testdesc">Assignable: 100px;C0:50% C1:100px +Clean split +<table style="width:calc(100px + 24px)" data-expected-width=124> + <tr> + <td style="width:50%" data-expected-width=38>50%</td> + <td style="width:50px" data-expected-width=62>50px</td> + </tr> +</table> + +<p class="testdesc">Assignable: 100px;C0:60% C1:60px +Overconstrained: widths add up to 132. +Fixed widths get distributed first, percentage takes the rest. +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:20%" data-expected-width=9>20%</td> + <td style="width:60%" data-expected-width=19>60%</td> + <td style="width:60px" data-expected-width=72>60px</td> + </tr> +</table> +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html new file mode 100644 index 0000000000..4f7cf8ecb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html @@ -0,0 +1,374 @@ +<!doctype html> +<title>Fixed table final assignable distribution</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> +<style> + main table { + background: gray; + border-spacing: 8px 8px; + table-layout: fixed; + } + main table:hover { table-layout: auto; } /* useful for comparisons */ + main td { + background: #BFB; + font-size: 10px; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + height:10px; + } +</style> +<main> + <h1>Fixed tables: Compute column computed widths from assignable table width</h1> +<ul> + <li>auto columns have a min width of 0. Max width still gets computed.</li> + <li>percent columns have a min width of 0.</li> + <li>fixed column.min_width is css width. It never changes.</li> + <li>fixed column.max_width is max(cells.max_width, css width).</li> + <li>colspan header cells distribute + <ul> + <li>max_width evenly between columns.</li> + <li>do not distribute min width</li> + <li>percentage evenly between columns</li> + </ul> + </li> +</ul> + +<h2>Is table treated as fixed?</h2> +<p class="testdesc">table width:auto is not treated as fixed.</p> +<table style="table-layout:fixed; width:auto" data-expected-width=324> + <tr> + <td style="width:200px">200</td> + <td><div style="width:100px">min</div></td> + </tr> +</table> +<p class="testdesc">table width:px is treated as fixed.</p> +<table style="table-layout:fixed; width:224px" data-expected-width=224> + <tr> + <td style="width:200px">200</td> + <td><div style="width:100px">min</div></td> + </tr> +</table> +<p class="testdesc">table width:min-content is treated as fixed.</p> +<table style="table-layout:fixed; width:min-content" data-expected-width=224> + <tr> + <td style="width:200px">200</td> + <td><div style="width:100px">min</div></td> + </tr> +</table> + +<h2>Fixed only</h2> + +<p class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/75 +When table.css_width is < columns.css_width, how is the conflict resolved? +columns.css_width wins</p> +<table style="width:50px" data-expected-width=224> + <tr> + <td style="width:100px" data-expected-width=100> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td style="width:100px" data-expected-width=100> + <div style="width:50px">50</div><div style="width:25px">25</div></td> + </tr> +</table> + +<p class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115 +When table.css_width is > columns.css_width , how is the conflict resolved? +table.css_width wins</p> +<table style="width:300px" data-expected-width=300> + <tr> + <td style="width:100px" data-expected-width=138> + <div style="width:100px">100</div><div style="width:100px">100</div></td> + <td style="width:100px" data-expected-width=138> + <div style="width:90px">90</div><div style="width:25px">25</div></td> + </tr> +</table> + +<p class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100 +Fixed cells must grow, but their min widths differ. +Fixed cells grow in proportion to their css width. +<table style="width:calc(300px + 24px)" data-expected-width=324> + <tr> + <td style="width:100px" data-expected-width=150> + <div style="width:50px">50</div></td> + <td style="width:100px" data-expected-width=150> + <div style="width:100px">100</div></td> + </tr> +</table> + +<p class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100 +What happens when column.min_width > column.css_width +column.css_width wins over column.min_width. +<table style="width:100px" data-expected-width=224> + <tr> + <td style="width:100px" data-expected-width=100> + <div style="width:200px"></div></td> + <td style="width:100px" data-expected-width=100> + <div style="width:200px"></div></td> + </tr> +</table> + +<p class="testdesc">Table: 1px. +What happens to min_width when multiple cells specify css_width of the same column? +1st cell wins. +<table style="width:1px" data-expected-width=116> + <tr> + <td style="width:100px" data-expected-width=100> + <div style="width:200px">200</div></td> + </tr> + <td style="width:150px" data-expected-width=100> + <div style="width:150px">150</div></td> + </tr> +</table> + +<h2>Auto only</h2> + +<p class="testdesc">Width is distributed evenly +</p> +<table style="width:548px"> + <tr> + <td data-expected-width=100><div style="width:10px;height:30px"></div></td> + <td data-expected-width=100><div style="width:20px;height:30px"></div></td> + <td data-expected-width=100><div style="width:30px;height:30px"></div></td> + <td data-expected-width=100><div style="width:40px;height:30px"></div></td> + <td data-expected-width=100><div style="width:120px;height:30px"></div></td> + </tr> +</table> + +<h2>Colspan distribution</h2> + +<p class="testdesc">Table: 1px +Does column.min_width change with colspan distribution from later rows to first row? +No +<table style="width:1px" data-expected-width=74> + <tr> + <td data-expected-width=0> + <div style="width:50px"></div></td> + <td style="width:50px" data-expected-width=50> + <div style="width:50px"></div></td> + </tr> + <tr> + <td colspan=2 style="width:200px" data-expected-width=58> + <div style="width:200px"></div></td> + </tr> +</table> + +<p class="testdesc">Table: 632px +Does column.percent change with colspan distribution? +No. +<table style="width:632px" data-expected-width=632> + <tr> + <td data-expected-width=360> + <div style="width:50px"></div></td> + <td style="width:20%" data-expected-width=120> + <div style="width:50px"></div></td> + <td style="width:20%" data-expected-width=120></td> + </tr> + <tr> + <td colspan="2" style="width:90%"> + <div style="width:100px"></div></td> + <td>auto</td> + </tr> +</table> + +<h2>Colspan header cells</h2> +<section> +<ol> + <li>Fixed/percentage colspan cells get distributed evenly.</li> + <li>Auto cells</li> +</ol> + +<p class="testdesc">Assignable: 400px +Fixed header cells with colspan. +Columns divded evenly</p> +<p class="error">Legacy Chrome is slightly off, something about spacing and wide cells.</p> +<table style="width:calc(600px + 40px)" data-expected-width=640> + <tr> + <td colspan=2 style="width:108px" data-expected-width=208>108</td> + <td colspan=2 style="width:208px" data-expected-width=408>208</td> + </tr> + <tr> + <td data-expected-width=100>1</td> + <td>1</td> + <td data-expected-width=200>1</td> + <td>1</td> + </tr> +</table> + +<p class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40% +Percentage header cells with colspan +C0 splits into C0.0 and C0.1, 16px each with 20% +C1 splits into C1.0 and C1.1, 6px each with 10% +Assignable width is 400, everyone gets according to percent. +80/80/40/40/160.</p> +<p class="error">Firefox is slightly off, with C2 taking 6px more. Unknown what math is used to get this answer.</p> +<table style="width:448px" data-expected-width=448> + <tr> + <td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td> + <td colspan=2 style="width:20%" data-expected-width=88><div style="width:160px"></div></td> + <td style="width:40%" data-expected-width=160><div style="width:40px"></div></td> + </tr> + <tr> + <td data-expected-width=80>Auto</td> + <td data-expected-width=80>Auto</td> + <td data-expected-width=40>Auto</td> + <td data-expected-width=40>Auto</td> + <td data-expected-width=160>Auto</td> + </tr> +</table> + +<p class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto +Auto header cells with colspan, table is min width +min_width does not get redistributed. +</p> +<table style="width:1px" data-expected-width=132> + <tr> + <td colspan=2 data-expected-width=8> + <div style="width:100px">100</div></td> + <td style="width:100px" data-expected-width=100>100</td> + </tr> + <tr> + <td data-expected-width=0>x</td> + <td data-expected-width=0>x</td> + <td data-expected-width=100>x</td> + </tr> +</table> + +<p class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto +Auto colspan cells, and nothing else. Tricky because this means that internally +table has to represent 8 cells, and wide cells that span beyond table width +are usually truncated. +C0: 20*2+8=48, C1: 20*8 + 7*8=216</p> +<table style="width:calc(200px + 88px)" data-expected-width=288> + <tr> + <td colspan=2 style="height:20px" data-expected-width=48></td> + <td colspan=8 style="height:20px" data-expected-width=216></td> + </tr> +</table> + +<h2>Percentage only</h2> + +<p class="testdesc">Assignable: 100px;columns add to 100%, auto width +Columns are exact percentage size. +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:50%" data-expected-width=50>50%</td> + <td style="width:30%" data-expected-width=30>30%</td> + <td style="width:20%" data-expected-width=20>20%</td> + </tr> +</table> + +<p class="testdesc">Assignable: 100px;columns add to 50%, auto width +Columns grow proportional to percent. +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:25%" data-expected-width=50>25%</td> + <td style="width:15%" data-expected-width=30>15%</td> + <td style="width:10%" data-expected-width=20>10%</td> + </tr> +</table> + + +<p class="testdesc">Assignable: 100px;columns add to 50%, with min width +Min width is ignored. +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:50%" data-expected-width=50><div style="width:50px">50</div></td> + <td style="width:30%" data-expected-width=30><div style="width:50px">50</div></td> + <td style="width:20%" data-expected-width=20><div style="width:50px">50</div></td> + </tr> +</table> + +<p class="testdesc">Assignable: 100px;columns add to 1000% +Columns are scaled so they add up to 100% +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:200%" data-expected-width=20><div style="width:50px">50</div></td> + <td style="width:300%" data-expected-width=30><div style="width:50px">50</div></td> + <td style="width:500%" data-expected-width=50><div style="width:50px">50</div></td> + </tr> +</table> + + + +<h2>Percentage/auto/fixed mix</h2> + +<p class="testdesc">Assignable: 100px;C0:50% C1:100px C2: Auto +C0, C1 get assigned values, C2 fills the rest. +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:50%" data-expected-width=50>50%</td> + <td style="width:30px" data-expected-width=30>30px</td> + <td data-expected-width=20></td> + </tr> +</table> + +<p class="testdesc">Assignable: 100px;C0:50% C1:50px +Clean split +<table style="width:calc(100px + 24px)" data-expected-width=124> + <tr> + <td style="width:50%" data-expected-width=50>50%</td> + <td style="width:50px" data-expected-width=50>50px</td> + </tr> +</table> + +<p class="testdesc">Assignable: 100px;C0:20% C1:60% C2:60px +Overconstrained: widths add up to 140. +Fixed widths get distributed first, percentage takes the rest. +<table style="width:calc(100px + 32px)" data-expected-width=132> + <tr> + <td style="width:20%" data-expected-width=10>20%</td> + <td style="width:60%" data-expected-width=30>60%</td> + <td style="width:60px" data-expected-width=60>60px</td> + </tr> +</table> + +<h2>Fixed 0-width columns</h2> +<p>Fixed 0-width columns are an exception. They are treated as a mix of fixed and auto columns.</p> + <li>If there are only zero-width columns, width is distibuted evenly.</li> + <li>If there are any fixed,percentage, or auto columns, 0-width columns do not grow.</li> +<p class="testdesc">Assignable: 100px;C0:0-width, C1:0-width + All 0-width columns grow. +</p> +<table style="width:calc(100px + 24px)" data-expected-width=124> + <tr> + <td style="width:0" data-expected-width=50>0</td> + <td style="width:0" data-expected-width=50>0</td> + </tr> +</table> +<p class="testdesc">Assignable: 100px;C0:0-width, C1:auto + 0-width column does not grow. +</p> +<table style="width:calc(100px + 24px)" data-expected-width=124> + <tr> + <td style="width:0" data-expected-width=0>0</td> + <td style="width:auto" data-expected-width=100>0</td> + </tr> +</table> +<p class="testdesc">Assignable: 100px;C0:0-width, C1:50px + 0-width column does not grow. +</p> +<table style="width:calc(100px + 24px)" data-expected-width=124> + <tr> + <td style="width:0" data-expected-width=0>0</td> + <td style="width:50px" data-expected-width=100>0</td> + </tr> +</table> +<p class="testdesc">Assignable: 100px;C0:0-width, C1:50% + 0-width column does not grow. +</p> +<table style="width:calc(100px + 24px)" data-expected-width=124> + <tr> + <td style="width:0" data-expected-width=0>0</td> + <td style="width:50%" data-expected-width=100>0</td> + </tr> +</table> + +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html new file mode 100644 index 0000000000..90a89e81a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html @@ -0,0 +1,351 @@ +<!doctype html> +<title>Auto table final assignable distribution</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> +<style> + main table { + background: gray; + border-spacing: 8px 8px; + } + main td { + background: #BFB; + font-size: 10px; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> + <main> +<h1>Compute column computed widths from assignable table width</h1> +<h2>Test design</h2> +<p>All examples have border-spacing:8, td.padding:0</p> + +<h2>Table css sizing</h2> + +<p class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100 +When table.css_width is < columns.css_width, column.min_width is lower limit. +<p class="error"> +<table style="width:50px" data-expected-width=124> + <tr> + <td style="width:100px" data-expected-width=50> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td style="width:100px" data-expected-width=50> + <div style="width:50px">50</div><div style="width:25px">25</div></td> + </tr> +</table> + + +<p class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115 +When table.css_width is > columns.css_width , how is the conflict resolved? +table.css_width wins</p> +<table style="width:300px" data-expected-width=300> + <tr> + <td style="width:100px" data-expected-width=138> + <div style="width:100px">100</div><div style="width:100px">100</div></td> + <td style="width:100px" data-expected-width=138> + <div style="width:90px">90</div><div style="width:25px">25</div></td> + </tr> +</table> + +<h2>Content sizings: min|max|fit|fill-available</h2> + +<p class="testdesc">table width:min-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +</p> +<p class="error">Edge treats as max-content.</p> +<table style="width:min-content" data-expected-width=182> + <tr> + <td data-expected-width=50> + <div style="width:50px" >au</div><div style="width:50px">to</div></td> + <td style="width:100px" data-expected-width=50> + <div style="width:50px" >fix</div><div style="width:25px">ed</div></td> + <td style="width:20%" data-expected-width=50> + <div style="width:50px">per</div><div style="width:25px">cent</div></td> + </tr> +</table> + +<p class="testdesc">table width:max-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +Each column gets maximum width. +C0: 100 C1:100 C2: 75 +max-content does not allow for assignable size to be influenced by inverse percent. +Table size is 275 + 32 = 307 +If percent influenced table size, table size would have been 407 +</p> +<table style="width:max-content" data-expected-width=307> + <tr> + <td data-expected-width=120> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td style="width:100px" data-expected-width=100> + <div style="width:50px">50</div><div style="width:25px">25</div></td> + <td style="width:20%" data-expected-width=55> + <div style="width:50px">50</div><div style="width:25px">25</div></td> + </tr> +</table> + +<p class="testdesc">table width:fit-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +Percent column determines assignable table width, which gets distributed to all columns. +Assignable width from %: 20%=75, 100%=375</p> +</p> +<table style="width:fit-content" data-expected-width=407> + <tr> + <td data-expected-width=200> + <div style="width:50px" >au</div><div style="width:50px">to</div></td> + <td style="width:100px" data-expected-width=100> + <div style="width:50px" >fix</div><div style="width:25px">ed</div></td> + <td style="width:20%" data-expected-width=75> + <div style="width:50px">per</div><div style="width:25px">cent</div></td> + </tr> +</table> + +<p class="testdesc">table width:-webkit-fill-available; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +</p> +<p class="error">Edge treats as fit-content</p> +<div style="width:632px"> +<table style="width:-webkit-fill-available;width:-moz-available;" data-expected-width=632> + <tr> + <td data-expected-width=380> + <div style="width:50px" >au</div><div style="width:50px">to</div></td> + <td style="width:100px" data-expected-width=100> + <div style="width:50px" >fix</div><div style="width:25px">ed</div></td> + <td style="width:20%" data-expected-width=120> + <div style="width:50px">per</div><div style="width:25px">cent</div></td> + </tr> +</table> +</div> + +<h2>Auto columns distribution</h2> + +<p class="testdesc">Assi:300px C0: Auto/75/75 C1:Auto/25/25 +Non-empty auto cells get surplus width proportionally to their max width. +Guess3: 100. Guess4: 300, diff 200, fixed priority. +C0: 75 + 75/100*200 = 225 C1: 25 + 25/100*200 = 75</p> +<table style="width:calc(300px + 24px)" data-expected-width=324> + <tr> + <td data-expected-width=225><div style="width:75px">75</div></td> + <td data-expected-width=75><div style="width:25px">25</div></td> + </tr> +</table> +<p class="testdesc">Assignable:300px C0: Auto/75/75 C1:Auto/13/25 C2:Auto/0/0 +Empty cells get nothing if there are non-empty auto cells. +Guess3: 100, Guess4: 300; diff 200, fixed priority. +C0: 75 + 75/100*200 = 225 C1: 25 + 25/100*200 = 75; C2: 0 +</p> +<table style="width:calc(300px + 32px)" data-expected-width=332> + <tr> + <td data-expected-width=225> + <div style="width:75px">75</div></td> + <td data-expected-width=75> + <div style="width:13px">13</div><div style="width:12px">12</div></td> + <td data-expected-width=0></td> + </tr> +</table> + +<h2>Guess 0: Auto(min), Fixed(min), Percentage(min) to Guess 1.</h2> + +<p class="testdesc">Assi: 1px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100 +All columns get minimum width. +Guess0: 150 +C0: 50, C1:50, C2: 50</p> +<table style="width:1px" data-expected-width=182> + <tr> + <td data-expected-width=50> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=50 style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=50 style="width:50%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> +</table> + +<p class="testdesc">Assi: 160px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100 +%ge column grows. +Guess0: 150, Guess1: 180; diff 10. +C0: 50, C1:50, C2: 50 + 10 * 10/10 = 60</p> +<table style="width:calc(160px + 32px)" data-expected-width=192> + <tr> + <td data-expected-width=50> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=50 style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=60 style="width:50%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> +</table> + +<p class="testdesc">Assi: 210px; C0:Auto/50/100 C1:100/50/100 C2:30%/50/100 C3:30%/50/100 +2 %ge columns grow evenly. +Guess 0: 200, Guess 1: 240, diff 10 +C2: 50 + 10 * 70/140 C3: 50 + 10 * 70/140 +<table style="width:calc(40px + 210px)" data-expected-width=250> + <tr> + <td data-expected-width=50> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=50 style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=55 style="width:30%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=55 style="width:30%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> +</table> + +<p class="testdesc">Assi: 220px; C0:Auto/50/100 C1:100/50/100 C2:25%/50/100 C3:40%50/100 +%ge columns grow in proportion to increase from previous guess. +Guess 0: 200. C2[G1] = .25*220 = 55 C3[G1] = .4 * 220 = 88 Guess 1: 100 + 55 + 88 = 243 +diff = 220 - 200 = 20. C2 grew 5, C3 grew 38, total grew 43. +C2: 50 + 20 *5/43 = 52.32; C3: 50 + 20 * 38 / 43 = 67.67 +<table style="width:calc(40px + 220px)" data-expected-width=260> + <tr> + <td data-expected-width=50> + <div style="width:50px">50</div> <div style="width:50px">50</div></td> + <td data-expected-width=50 style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=52 style="width:25%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width=68 style="width:40%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> +</table> + +<h2>Guess 1 to Guess 2: Auto(min), Percentage(%max) to Fixed(min => max)</h2> +<p>These tests are non-intuitive to evaluate. When table size increases betwee Guess 1 and 2, + although the standard says that fixed columns are growing, %ge columns grow too because their max width depends on table width.</p> + +<p class="testdesc">Assi:166, C0:Auto/50/100 C1:100/50/100 C2:40%/50/100 +Edge example, Guess 1 %ge cell has grown to the max. +C2: grows to .4*165 = 66.4, table is 166.4+32 = 198.4</p> +<table style="width:calc(166px + 32px)" data-expected-width=198> + <tr> + <td data-expected-width="50" > + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="50" style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="66" style="width:40%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<p class="testdesc">Assi:216, C0:Auto/50/100 C1:100/50/100 C2:40%/50 + %ge cell grows to the max, the rest goes to fixed. +Guess 1 size is 50 + 50 + (.4*216=>86.4) = 186.4 +Guess 2 size is 50 + 100 + 86.4 = 236 +Assi - Guess1 = 29.6; C2 = 50 + 29.6 * 50/50 = 79.6 +</p> +<table style="width:calc(216px + 32px)" data-expected-width=248> + <tr> + <td data-expected-width="50" > + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="80" style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="86" style="width:40%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<h2>Guess 2 to Guess 3: Percentage(%max), Fixed(max), Auto(min=>max)</h2> + +<p class="testdesc">Assi:300 +Guess 2 size is 50 + 100 + .4*300 = 270 +Guess 3 size is 100 + 100 + 120 = 320 +Assi - Guess2 = 30, C0 = 50 + 30 = 80 +<table style="width:calc(300px + 32px)" data-expected-width=332> + <tr> + <td data-expected-width="80" > + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="100" style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="120" style="width:40%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<h2>Guess3 to Guess4, Auto(max), Percentage(%max), Fixed(max) grow first available Auto|Fixed|Percent</h2> + +<p class="testdesc">Assi: 500, C0:Auto, C1: Fixed, C2: Percent +Guess 3 is 100 + 100 + .4 * 500 = 400 +C0 gets the 100 +<table style="width:calc(500px + 32px)" data-expected-width=532> + <tr> + <td data-expected-width="200" > + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="100" style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="200" style="width:40%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<p class="testdesc">Assi: 500, C0:Fixed, C1: Fixed, C2: Percent +Guess 3 is 100 + 100 + .4 * 500 = 400, 100 to be redistributed +Fixed cells, C0 and C1 get 50 each. +<table style="width:calc(500px + 32px)" data-expected-width=532> + <tr> + <td data-expected-width="150" style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="150" style="width:100px"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + <td data-expected-width="200" style="width:40%"> + <div style="width:50px">50</div><div style="width:50px">50</div></td> + </tr> +</table> + +<p class="testdesc">Assi: 700, C0:10%/40, C1: 20%/50, C2: 40%/50 +Percentage cells only. +Compute columns as %ge of total width: +C0: 700*10/70, C1: 700*20/70 C2: 700*40/70 +<table style="width:calc(700px + 32px)" data-expected-width=732> + <tr> + <td data-expected-width=100 style="width:10%"> + <div style="width:40px">40</div></td> + <td data-expected-width=200 style="width:20%"> + <div style="width:50px">50</div></td> + <td data-expected-width=400 style="width:40%"> + <div style="width:50px">50</div></td> + </tr> +</table> +<p class="testdesc">Assi: 600, C0:10%/40, C1: 20%/50, C2: 40%/50, C3: 100%/50 +Percentage cells only. Over 100% columns get their percentage truncated. +<table style="width:calc(600px + 40px)" data-expected-width=640> + <tr> + <td data-expected-width=60 style="width:10%"> + <div style="width:40px">40</div></td> + <td data-expected-width=120 style="width:20%"> + <div style="width:50px">50</div></td> + <td data-expected-width=240 style="width:40%"> + <div style="width:50px">50</div></td> + <td data-expected-width=180 style="width:100%"> + <div style="width:50px">50</div></td> + </tr> +</table> +<p class="testdesc">C0:20%/60, C1:Auto/50. +Tests table max width from single cell. +<table data-expected-width="324"> + <tr> + <td style="width:20%" data-expected-width="60"><div style="width:60px">60</div></td> + <td><div style="width:50px">50</div></td> + </tr> +</table> + +<p class="testdesc">C0:10%/70, C1:Auto/50. +Table limited to 1px. Tests that single cell specifies max width, not min width. +<table style="width:1px" data-expected-width="134"> + <tr> + <td style="width:20%" data-expected-width="60"><div style="width:60px">60</div></td> + <td><div style="width:50px" data-expected-width="50">50</div></td> + </tr> +</table> + +<p class="testdesc">C0:10%/70 border 10px, C1:Auto/50. +Cell border padding do not affect max width. +<table data-expected-width="524"> + <tr> + <td style="width:20%;border:10px solid yellow;padding:10px" data-expected-width="100"><div style="width:60px">60</div></td> + <td><div style="width:50px">50</div></td> + </tr> +</table> +</main> + +<script> + checkLayout("table"); +</script> + diff --git a/testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html new file mode 100644 index 0000000000..bfd47fa651 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html @@ -0,0 +1,144 @@ +<!doctype html> +<title>TBODY redistribution</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel='stylesheet' href='../support/base.css' /> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#height-distribution-algorithm" /> +<style> + main table { + border-collapse: collapse; + background: #DDD; + } + main td { + padding: 0; + } + main td .empty { + line-height: 0; + } + main tbody tr:nth-child(1) { + background: rgba(255, 156, 0, 0.5); + } + main tbody tr:nth-child(2) { + background: rgba(255, 255, 0, 0.5); + } + main tbody tr:nth-child(3) { + background: rgba(0, 255, 0, 0.5); + } +</style> +<main> +<h1>TBODY/THEAD/TFOOT height redistribution.</h1> +<li>FF passes most of the tests. +<li>Legacy Chrome does not distribute TBODY height to rows. +<li>At the time this test was written, there was no spec. Currently, spec is in the process of being written. + +<p>1) Empty row group's size is 0 with collapsed borders</p> +<table id="one" style="border-collapse: collapse;border-spacing: 10px 10px;border:10px solid green" + data-expected-width="0" data-expected-height="0"> + <tbody> + <tr> </tr> + </tbody> +</table> +<p>2) Empty row group's size is 0 with separate borders.</p> +<table id="two" style="border-collapse: separate;border-spacing: 10px 10px;border:10px solid green" + data-expected-width="20" data-expected-height="20"> + <tbody> + <tr> </tr> + </tbody> +</table> +<p>3) Row group height is redistributed to unconstrained rows in proportion to their size.</p> +<table id="three"> + <tbody style="height:100px" data-expected-height="100"> + <tr data-expected-height="25"> + <td><div style="height:10px" >0,0</div></td> + </tr> + <tr data-expected-height="75"> + <td><div style="height:30px" >0,0</div></td> + </tr> + </tbody> +</table> +<p>4) Constrained fixed rows do not grow if there are unconstrained rows</p> +<table id="four"> + <tbody style="height:100px"> + <tr style="height: 10px" data-expected-height="10"> + <td></td> + </tr> + <tr data-expected-height="90"> + <td>0,1</td> + </tr> + </tbody> +</table> +<p>5) Constrained percentage are resolved against row group height.</p> +<table id="five"> + <tbody style="height:100px"> + <tr style="height:25%" data-expected-height="25"> + <td>0,0</td> + </tr> + <tr style="height:50%" data-expected-height="50"> + <td>0,0</td> + </tr> + <tr data-expected-height="25"> + <td>0,2</td> + </tr> + </tbody> +</table> +<p>6) Row group height is treated as min-height.</p> +<table id="six"> + <tbody style="height:100px" data-expected-height="125"> + <tr style="height:125px"> + <td>0,0</td> + </tr> + </tbody> +</table> +<p>7) Constrained/unconstrained mix: row group height is distributed to unconstrained cells.</p> +<table id="seven"> + <tbody style="height:100px"> + <tr style="height:20px" data-expected-height="20"><td>0,0</td></tr> + <tr style="height:30px" data-expected-height="30"><td>0,1</td></tr> + <tr data-expected-height="25"><td>0,2</td></tr> + <tr data-expected-height="25"><td>0,3</td></tr> + </tbody> +</table> +<p>8) Unconstrained empty rows grow to fill table if all other rows are constrained. Not in FF.</p> +<table id="eight"> + <tbody style="height:100px"> + <tr style="height:20px" data-expected-height="20"><td>0,0</td></tr> + <tr style="height:30px" data-expected-height="30"><td>0,1</td></tr> + <tr data-expected-height="50"><td></td></tr> + </tbody> +</table> +<br> +<table id="eightplus"> + <tbody style="height:100px"> + <tr data-expected-height="50"><td></td></tr> + <tr style="height:20px" data-expected-height="20"><td>0,1</td></tr> + <tr style="height:30px" data-expected-height="30"><td>0,2</td></tr> + </tbody> +</table> +<p>9) Empty section height is not ignored</p> +<table id="nine" > + <tbody style="height:75px" data-expected-height="75"> + </tbody> +</table> +<p>10) Section with empty rows is not considered empty.</p> +<p>In FF, empty section height is 100, but table's height is 0?</p> +<table id="nine" > + <tbody style="height:75px" data-expected-height="75"> + <tr data-expected-height="25"></tr> + <tr data-expected-height="25"></tr> + <tr data-expected-height="25"></tr> + </tbody> +</table> +<p>11) Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p> + <table id="ten" style="width:50px"> + <tbody style="height:50px" data-expected-height="50"> + <tr style="height:0" data-expected-height="0"><td></td></tr> + <tr data-expected-height="25"><td></td></tr> + <tr data-expected-height="25"><td></td></tr> + </tbody> +</table> +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html new file mode 100644 index 0000000000..b54eb39f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html @@ -0,0 +1,197 @@ +<!doctype html> +<title>TD box sizing</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> +<style> + main table { + background: gray; + border-spacing: 10px 10px; + table-layout: auto; + } + main td { + padding: 20px; + background: #BFB; + font-size: 10px; + box-sizing: border-box; + } + main td > div { + display: inline-block; + background: rgba(56,162,56,0.3); + } +</style> +<main> +<h1>TD and box sizing</h1> + +<p>TD defaults to box-sizing: content-box. How does box-sizing affect final TD size?</p> +<ol> + <li>Auto table layout</li> + <ol> + <li>Percent cells ignore box-sizing, it is always border-box.</li> + <li>Fixed cells respect box-sizing.</li> + </ol> + <li>Fixed table layout</li> + <ol> + <li>Percent cells respect box sizing when computing cell width from assignable width.</li> + <li>Percent cells ignore box sizing when computing grid max from cell width.</li> + </ol> +</ol> +<h2>Table-layout: auto</h2> +<h4>TD width:%</h4> +<p class="testdesc">content-box, C0:50%/100 C1:Auto +Percent gets resolved to compute grid max size. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 +<table data-expected-width=310> + <tr> + <td style="width:50%;box-sizing:content-box" data-expected-width=140> + <div style="width:100px">50%/100</td> + <td data-expected-width=140>Auto</td> + </tr> +</table> +<p class="testdesc">border-box, C0:50%/100 C1:Auto +Same test as above, but box-sizing is border-box. +<table data-expected-width=310> + <tr> + <td style="width:50%;box-sizing:border-box" data-expected-width=140> + <div style="width:100px">50%/100</td> + <td data-expected-width=140>Auto</td> + </tr> +</table> +<p class="testdesc">content-box, C0:80%/100 C1:Auto +Percent gets resolved to compute final cell size from assignable width. +C0 border box width is 500 * 80% +<table style="width:530px" data-expected-width=530> + <tr> + <td style="width:80%;box-sizing:content-box" data-expected-width=400> + <div style="width:100px">80%/100</td> + <td data-expected-width=100>Auto</td> + </tr> +</table> + +<p class="testdesc">border-box, C0:80%/100 C1:Auto +Same as above, but border-box +<table style="width:530px" data-expected-width=530> + <tr> + <td style="width:80%;box-sizing:border-box" data-expected-width=400> + <div style="width:100px">80%/100</td> + <td data-expected-width=100>Auto</td> + </tr> +</table> + + +<h4>TD width:fixed</h4> + +<p class="testdesc">content-box, C0:100/Auto C1:100/Auto +Tests whether box-sizing affects how percentages are computed. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 +<table data-expected-width=310> + <tr> + <td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td> + <td style="width:100px;box-sizing:content-box">100</td> + </tr> +</table> + +<p class="testdesc">border-box, C0:100/Auto C1:100/Auto +Same test as above, but box-sizing is border-box. +<table data-expected-width=230> + <tr> + <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> + <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> + </tr> +</table> + +<h4>TD height: fixed</h4> + +<p class="testdesc">content-box, C0 height:100px +<table data-expected-height=160> + <tr> + <td style="height:100px;box-sizing:content-box" data-expected-height=140>100 height</td> + </tr> +</table> + +<p class="testdesc">border-box, C0 height:100px +<table data-expected-height=120> + <tr> + <td style="height:100px;box-sizing:border-box" data-expected-height=100>100 height</td> + </tr> +</table> + +<h2>Table-layout: fixed</h2> + +<h4>TD width:%</h4> + +<p class="testdesc">content-box, C0:50%/100 C1:Auto +Percent gets resolved to compute grid max size. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 +<table style="table-layout:fixed" data-expected-width=310> + <tr> + <td style="width:50%;box-sizing:content-box" data-expected-width=140> + <div style="width:100px">50%/100</td> + <td data-expected-width=140>Auto</td> + </tr> +</table> + +<p class="testdesc">border-box, C0:50%/100 C1:Auto +Same test as above, but box-sizing is border-box. +<table style="table-layout:fixed" data-expected-width=310> + <tr> + <td style="width:50%;box-sizing:border-box" data-expected-width=140> + <div style="width:100px">50%/100</td> + <td data-expected-width=140>Auto</td> + </tr> +</table> + +<p class="testdesc">content-box, C0:60%/100 C1:Auto +Percent gets resolved to compute final cell size from assignable width. +Assignable width is 530 - 3*10 = 500 +C0 content box width is 500 * 60% + 40px padding = 340 +C1 is 500 - 340 = 160 +<p class="error">Legacy/Edge treat %ge TD as border box, and end up with 300px</p> +<table style="table-layout:fixed;width:530px" data-expected-width=530> + <tr> + <td style="width:60%;box-sizing:content-box" data-expected-width=340> + <div style="width:100px">60%/100</td> + <td data-expected-width=160>Auto</td> + </tr> +</table> + +<p class="testdesc">border-box, C0:60%/100 C1:Auto +Same as above, but border-box +<table style="table-layout:fixed;width:530px" data-expected-width=530> + <tr> + <td style="width:60%;box-sizing:border-box" data-expected-width=300> + <div style="width:100px">80%/100</td> + <td data-expected-width=200>Auto</td> + </tr> +</table> + + +<h4>TD width:fixed</h4> +<p class="testdesc">content-box, C0:100/Auto C1:100/Auto +Tests whether box-sizing affects how percentages are computed. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 +<table style="table-layout:fixed" data-expected-width=310> + <tr> + <td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td> + <td style="width:100px;box-sizing:content-box">100</td> + </tr> +</table> +<p class="testdesc">border-box, C0:100/Auto C1:100/Auto +Same test as above, but box-sizing is border-box. +<table style="table-layout:fixed" data-expected-width=230> + <tr> + <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> + <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> + </tr> +</table> +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html new file mode 100644 index 0000000000..5823fc64c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html @@ -0,0 +1,123 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#computing-the-table-width" /> +<style> + .t { + display: table; + border-top-width: 20px; + border-bottom-width: 40px; + border-left-width: 20px; + border-right-width: 40px; + border-style: solid; + border-color: gray; + padding: 10px; + border-spacing: 0; + width:100px; + height: 100px; + } + .inline { + display: inline-table; + } + .cell { + display: table-cell; + background: yellow; + } + main td { + padding: 0; + background: yellow; + } +</style> +<main> +<p>box-sizing: default; border-collapse: separate </p> +<table class="t" style="border-collapse: separate" data-expected-width="100" data-expected-height="100"> + <tbody> + <td></td> + </tbody> +</table> +<p>box-sizing: border-box; border-collapse: separate</p> +<table class="t" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100"> + <tbody> + <td></td> + </tbody> +</table> +<p>box-sizing: content-box; border-collapse: separate</p> +<table class="t" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180"> + <tbody> + <td></td> + </tbody> +</table> +<p>box-sizing: default; border-collapse: collapse </p> +<table class="t" style="border-collapse: collapse" data-expected-width="100" data-expected-height="100"> + <tbody> + <td></td> + </tbody> +</table> +<p>box-sizing: border-box; border-collapse: collapse</p> +<table class="t" style="box-sizing:border-box;border-collapse: collapse" data-expected-width="100" data-expected-height="100"> + <tbody> + <td></td> + </tbody> +</table> +<p>box-sizing: content-box; border-collapse: collapse</p> +<table class="t" style="box-sizing:content-box;border-collapse: collapse" data-expected-width="130" data-expected-height="130"> + <tbody> + <td></td> + </tbody> +</table> +<p>div with display:table; box-sizing: default; border-collapse: separate</p> +<div class="t" style="border-collapse: separate" data-expected-width="180" data-expected-height="180"> + <div class="cell"></div> +</div> +<p>div with display:table; box-sizing: border-box; border-collapse: separate</p> +<div class="t" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100"> + <div class="cell"></div> +</div> +<p>div with display:table;box-sizing: content-box; border-collapse: separate</p> +<div class="t" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180"> + <div class="cell"></div> +</div> + +<h2>Same tests, but tables are inline.</h2> +<div> +<table class="t inline" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100"> + <tbody> + <td></td> + </tbody> +</table>box-sizing: border-box; border-collapse: separate + +<div> +<table class="t inline" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180"> + <tbody> + <td></td> + </tbody> +</table>box-sizing: content-box; border-collapse: separate</div> +<div> +<table class="t inline" style="box-sizing:border-box;border-collapse: collapse" data-expected-width="100" data-expected-height="100"> + <tbody> + <td></td> + </tbody> +</table>box-sizing: border-box; border-collapse: collapse</div> +<div> +<table class="t inline" style="box-sizing:content-box;border-collapse: collapse" data-expected-width="130" data-expected-height="130"> + <tbody> + <td></td> + </tbody> +</table>box-sizing: content-box; border-collapse: collapse</div> +<div> +<div class="t inline" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100"> + <div class="cell"></div> +</div> +div with display:inline-table; box-sizing: border-box; +</div> +<div> +<div class="t inline" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180"> + <div class="cell"></div> +</div> +div with display:inline-table;box-sizing: content-box</div> +</main> +<script> + checkLayout(".t"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html new file mode 100644 index 0000000000..40b01471fd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html @@ -0,0 +1,148 @@ +<!doctype html> +<title>TD box sizing</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/check-layout-th.js"></script> +<link rel='stylesheet' href='../support/base.css' /> +<link rel='stylesheet' href='/fonts/ahem.css' /> +<link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-cell-measures" /> +<style> + main table { + border-spacing: 0; + } + main td { + background: gray; + width:100px; + padding: 0; + } + .bb { + box-sizing: border-box; + } +</style> +<main> +<p>Tests of intrinsic cell sizing wrt border/padding, and box-sizing.</p> +<p>box-sizing: content-box; border px; padding px. +<table> + <tbody> + <tr> + <td data-expected-width="100"> + <div style="width:50px;height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> +<table> + <tbody> + <tr data-expected-width="120"> + <td data-expected-width="120" style="border:10px solid black"> + <div style="height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> +<table> + <tbody> + <tr data-expected-width="140"> + <td data-expected-width="140" style="border:10px solid black;padding: 10px"> + <div style="height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> +<p>box-sizing: border-box, border px, padding px. +<table> + <tbody> + <tr> + <td data-expected-width="100" class="bb"> + <div style="height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> +<table> + <tbody> + <tr> + <td data-expected-width="100" class="bb" style="border:10px solid black" > + <div style="height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> +<table> + <tbody> + <tr> + <td data-expected-width="100" class="bb" style="border:10px solid black;padding: 10px"> + <div style="height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> + +<p>box-sizing: border-box;padding: px, width px</p> +<li>td's intrinsic width must be >= border + padding</li> + +<table style="width:300px;table-layout:fixed"> + <tbody> + <tr> + <td style="box-sizing:border-box;padding-left:50px;padding-right:50px;width:30px" data-expected-width=100></td> + <td>auto</td> + <td>auto</td> + </tr> + </tbody> +</table> + +<p>box-sizing: border-box; border px; padding %.</p> +<li>intrinsic size of % padding is 0. +<li>final size of % padding is computed against table's width. +<table data-expected-width="240"> + <tbody> + <tr> + <td data-expected-width="120" style="border:10px solid black;padding: 30%"> + <div data-offset-x="72" data-offset-y="72" style="width:50px;height:50px;background:yellow">0,0</div> + </td> + <td style="border:10px solid black;padding: 30%"> + <div style="width:50px;height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> +<table data-expected-width="300"> + <caption><div style="width:300px;background:#ddd">300px caption</div></caption> + <tbody> + <tr> + <td data-expected-width="150" style="border:10px solid black;padding: 30%"> + <div data-offset-x="90" data-offset-y="90" style="width:50px;height:50px;background:yellow">0,0</div> + </td> + <td style="border:10px solid black;padding: 30%"> + <div style="width:50px;height:50px;background:yellow">0,0</div> + </td> + </tr> + </tbody> +</table> + +<p>Block percentage resolution of TD children + row fixed height during intrinsic pass</p> +<li>Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.</li> +<li>FF uses row height as %ge resolution size.</li> +<li>Proposal: file an issue on what is the right thing to do.</li> +<table> + <tr> + <td style="height:100px;font: 50px/1 Ahem;" id="cell" data-expected-height="100"> + y<div style="display:inline-block;height:100%;width:50px;background:yellow" + data-expected-height="100"></div> + </td> + </tr> +</table> +<table> + <tr style="height:100px"> + <td style="font: 50px/1 Ahem;" id="cell" data-expected-height="100"> + y<div style="display:inline-block;height:100%;width:50px;background:yellow" data-expected-height="0"></div> + </td> + </tr> +</table> + + +</main> +<script> + checkLayout("table"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/tfoot-crash-print.html b/testing/web-platform/tests/css/css-tables/tfoot-crash-print.html new file mode 100644 index 0000000000..00fa0070c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tfoot-crash-print.html @@ -0,0 +1,33 @@ +<!-- quirks --> +<!-- + This is just a crashtest, but there's no way to express that in wpt right + now, so we just ensure we don't render blank +--> +<link rel="mismatch" href="/common/blank.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables/"> +<style> + big { + font-size-adjust: 66; + border-right-style: dotted; + } +</style> +<script> + window.addEventListener('load', () => { + const table = document.createElement('table') + table.tFoot = document.getElementById('tfoot_0') + const element_0 = document.createElement('div') + table.appendChild(element_0) + document.documentElement.appendChild(table) + }) +</script> +</head> +<table> + <tfoot id='tfoot_0'> + <tr> + <tr readonly> + <caption> + <big></big> + </caption> + </tr> + </tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-tables/th-text-align-ref.html b/testing/web-platform/tests/css/css-tables/th-text-align-ref.html new file mode 100644 index 0000000000..ef6e09ff1a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/th-text-align-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://html.spec.whatwg.org/#tables-2"> + + <style> + table { + font-size: 15px; + border: 1px solid green; + margin-bottom: 5px; + } + + th { + width: 150px; + border: 1px solid blue; + } + + td { + border: 1px solid purple; + } + </style> + + <body> + <table> + <tr> + <th style="text-align: center;">A</th> + </tr> + <tr> + <td style="text-align: start;">A</td> + </tr> + </table> + <table> + <tr> + <th style="text-align: end;">A</th> + </tr> + <tr> + <td style="text-align: end;">A</td> + </tr> + </table> + <table> + <tr> + <th style="text-align: start;">A</th> + </tr> + <tr> + <td style="text-align: start;">A</td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/th-text-align.html b/testing/web-platform/tests/css/css-tables/th-text-align.html new file mode 100644 index 0000000000..4b1d312b40 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/th-text-align.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://html.spec.whatwg.org/#tables-2"> + <link rel="match" href="th-text-align-ref.html"> + + <style> + table { + font-size: 15px; + border: 1px solid green; + margin-bottom: 5px; + } + + th { + width: 150px; + border: 1px solid blue; + } + + td { + border: 1px solid purple; + } + </style> + + <body> + <table style="text-align: start;"> + <tr> + <th>A</th> + </tr> + <tr> + <td>A</td> + </tr> + </table> + <table style="text-align: end;"> + <tr> + <th>A</th> + </tr> + <tr> + <td>A</td> + </tr> + </table> + <table> + <tr> + <th style="text-align: inherit;">A</th> + </tr> + <tr> + <td>A</td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-tables/toggle-row-display-property-001-ref.html b/testing/web-platform/tests/css/css-tables/toggle-row-display-property-001-ref.html new file mode 100644 index 0000000000..a99f69eb44 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/toggle-row-display-property-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +td, th { + border: 1px solid black; +} +</style> + +<table> + <tr> + <th colspan="4">This cell must span all columns for repro in chrome</th> + </tr> + <tr> + <td rowspan="3" style="height:200px">A</td> + </tr> + <tr> + <td>1</td> + <td>2</td> + <td>3</td> + </tr> + <tr> + <td>1</td> + <td>2</td> + <td>3</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/toggle-row-display-property-001.html b/testing/web-platform/tests/css/css-tables/toggle-row-display-property-001.html new file mode 100644 index 0000000000..8755cd068f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/toggle-row-display-property-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=764031"> +<link rel="match" href="toggle-row-display-property-001-ref.html"> +<meta name="assert" content="After setting display:table-row on tr elements with display:none, the table should look same as if display:none were never used." /> + +<style> +td, th { + border: 1px solid black; +} +tr { + display: none; +} +</style> + +<table id=theTable> + <tr> + <th colspan="4">This cell must span all columns for repro in chrome</th> + </tr> + <tr> + <td rowspan="3" style="height:200px">A</td> + </tr> + <tr> + <td>1</td> + <td>2</td> + <td>3</td> + </tr> + <tr> + <td>1</td> + <td>2</td> + <td>3</td> + </tr> +</table> + +<script> +theTable.offsetTop; +let rows = document.querySelectorAll('tr'); +for (var i = 0; i < rows.length; i++) { + rows[i].style.display = 'table-row'; +} +</script> diff --git a/testing/web-platform/tests/css/css-tables/tools/markup-generator.html b/testing/web-platform/tests/css/css-tables/tools/markup-generator.html new file mode 100644 index 0000000000..3b37e6c5fe --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tools/markup-generator.html @@ -0,0 +1,200 @@ +<!doctype html> +<link rel="stylesheet" href="../support/base.css" /> +<aside style="position:absolute"><!-- THIS IS WHERE WE RUN THE EXPERIMENTS --></aside> +<main><textarea style="display: none; width: 100%"></textarea><script> + + var textarea = document.querySelector('textarea'); + var testingBorderAttributes = true; + var seed = 0; + + // This is not meant to be a good random number generator; I literally don't care + function XorshiftMath(seed) { + var x = 1; + var y = 2; + var z = 3; + var w = seed|0; + this.random = function random() { + var t = x; + t ^= t << 11; + t ^= t >> 8; + x = y; y = z; z = w; + w ^= w >> 19; + w ^= t; + return (w%1024)/1024; + } + } + + var rndGen = new XorshiftMath(seed); + function rnd(x) { + return x > rndGen.random(); + } + function pickInList(list) { + var i = list.length; while(i>1 && rnd(1/i)) { i--; } + return list[i-1]; + } + + function generateMarkup(root) { + if(rnd(0.99)) { + + // + // the table has a <table> element + // + var table = document.createElement('table'); + + // + if(testingBorderAttributes) { + if(rnd(0.3)) { table.setAttribute('border',pickInList(['0','10','yes'])); } + if(rnd(0.3)) { table.setAttribute('frame',pickInList(['box','vsides','none'])); } + if(rnd(0.3)) { table.setAttribute('rules',pickInList(['all','rows','groups'])); } + table.setAttribute("cellspacing","0"); + } + + + generateRowGroups(table); + root.appendChild(table); + + } else { + + // + // the table has no <table> element + // + + generateRowGroup(root); + + } + } + + function generateRowGroups(root) { + if(rnd(0.5)) { + + generateRowGroup(root); + while(rnd(0.25)) { + generateRowGroup(root); + } + + } else { + + generateRows(root); + + } + } + + function generateRowGroup(root) { + + var tbody; if(rnd(0.7)) { + tbody = document.createElement('tbody'); + } else if (rnd(0.5)) { + tbody = document.createElement('thead'); + } else { + tbody = document.createElement('tfoot'); + } + + generateRows(tbody); + root.appendChild(tbody); + + } + + function generateRows(root) { + + while(rnd(0.9)) { + if(rnd(0.9)) { + generateRow(root); + } else { + generateCells(root); + } + } + + } + + function generateRow(root) { + + var tr = document.createElement('tr'); + generateCells(tr); + root.appendChild(tr); + + } + + function generateCells(root) { + + while(rnd(0.9)) { + if(rnd(0.9)) { + generateCell(root); + } else { + generateCellContent(root); + } + } + + } + + function generateCell(root) { + + var td = document.createElement( rnd(0.9) ? 'td' : 'th' ); + generateCellContent(td); + root.appendChild(td); + + } + + function generateCellContent() { + // for now, do nothing + } + + for(var i = 10; i--;) { + //document.write("<textarea style='width: 100%; display: none'>"); + var div = document.createElement('div'); + generateMarkup(div); + appendReportFor(div); + //document.write(div.innerHTML); + //document.write("</textarea>"); + } + + if(navigator.userAgent.indexOf("Edge") == -1) { + var downloadLink = document.createElement('a'); + downloadLink.setAttribute("download","report.txt"); + downloadLink.href = "data:," + escape(textarea.value); + downloadLink.textContent = "download"; + document.body.appendChild(downloadLink); + } + + function appendReportFor(markup) { + var report = markup.innerHTML + '\r\n\r\n'; + + // + // append markup to the dom + // + var root = document.querySelector('aside'); + root.innerHTML = ''; + root.appendChild(markup); + + // + // output box stats + // + var boxes = markup.getElementsByTagName("*"); + for(var i = 0; i<boxes.length; i++) { + + var box = boxes[i]; + report += '' + i + ': ' + box.tagName + '\r\n'; + report += 'offsetWidth: ' + box.offsetWidth + '\r\n'; + report += 'offsetHeight: ' + box.offsetHeight + '\r\n'; + report += 'offsetLeft: ' + box.offsetLeft + '\r\n'; + report += 'offsetTop: ' + box.offsetTop + '\r\n'; + report += 'borderTopWidth: ' + getComputedStyle(box).borderTopWidth + '\r\n'; + report += 'borderTopStyle: ' + getComputedStyle(box).borderTopStyle + '\r\n'; + report += 'borderTopColor: ' + getComputedStyle(box).borderTopColor + '\r\n'; + report += 'borderLeftWidth: ' + getComputedStyle(box).borderLeftWidth + '\r\n'; + report += 'borderLeftStyle: ' + getComputedStyle(box).borderLeftStyle + '\r\n'; + report += 'borderLeftColor: ' + getComputedStyle(box).borderLeftColor + '\r\n'; + report += '\r\n'; + + } + + report += '\r\n'; + report += '=====================================================================\r\n'; + report += '\r\n'; + + textarea.value += report; + + root.innerHTML = ''; + + } + +</script></main> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-border-spacing.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-border-spacing.html new file mode 100644 index 0000000000..738cea16d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-border-spacing.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<table style="width: 100px; border-spacing: 10px; background: red;"> + <tbody style="outline: solid green 10px;"> + <tr style="visibility: collapse;"> + <td style="padding: 0;"></td> + </tr> + <tr> + <td style="padding: 0;"><div style="height: 80px; background: green;"></div></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-col-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-001.html new file mode 100644 index 0000000000..15368aceec --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-001.html @@ -0,0 +1,101 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a column to visibility:collapse changes table width but not height. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span style="height:50px"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + Bottom table is identical to top except left column has been collapsed. + <x-table id="two"> + <x-colgroup style="visibility:collapse;"></x-colgroup> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span style="height:50px"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> +</main> + +<script> + generate_tests(assert_equals, [ + [ + "col visibility:collapse doesn't change table height", + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight + ], + [ + "col visibility:collapse changes table width", + document.getElementById('two').offsetWidth, + 116 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-col-002.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-002.html new file mode 100644 index 0000000000..32c2efebb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-002.html @@ -0,0 +1,110 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a column to visibility:collapse changes table width but not height. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span style="height:50px"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + Second table is identical to first except both column groups have been collapsed. + 5px borders are still visible. + <x-table id="two"> + <x-colgroup style="visibility:collapse;"></x-colgroup> + <x-colgroup style="visibility:collapse;"></x-colgroup> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span style="height:50px"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "col visibility:collapse doesn't change table height" + ], + [ + document.getElementById('two').offsetWidth, + 10, + "col visibility:collapse changes table width" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-col-003.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-003.html new file mode 100644 index 0000000000..bf18adeac2 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-003.html @@ -0,0 +1,114 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a column to visibility:collapse changes table width but not height. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span style="height:50px"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + + Second table is identical to first except right column has been collapsed. + Visibility:collapse is applied on col, not colgroup. + + <x-table id="two"> + <x-colgroup></x-colgroup> + <x-colgroup> + <x-col style="visibility:collapse;"> + </x-colgroup> + + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span style="height:50px"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "col visibility:collapse doesn't change table height" + ], + [ + document.getElementById('two').offsetWidth, + 116, + "col visibility:collapse changes table width" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-col-004-dynamic.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-004-dynamic.html new file mode 100644 index 0000000000..cb868bac41 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-004-dynamic.html @@ -0,0 +1,81 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + table { + border: 5px solid black; + } + table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Dynamic Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a column to visibility:collapse changes table width but not height. + Bottom table is identical to top except left column has been collapsed. + </p> + <table id="test"> + <colgroup id="collapse"></colgroup> + <tbody> + <tr> + <td> + <span>row 1</span> + </td> + <td> + <span></span> + </td> + </tr> + <tr> + <td> + <span>row 2</span> + </td> + <td> + <span></span> + </td> + </tr> + <tr> + <td> + <span>row 3</span> + </td> + <td> + <span style="height:50px"></span> + </td> + </tr> + </tbody> + </table> +</main> + +<script> + colgroup = document.getElementById("collapse"); + colgroup.style.visibility = "collapse"; + + tests = [ + [ + document.getElementById('test').offsetHeight, + 342, + "col visibility:collapse doesn't change table height", + ], + [ + document.getElementById('test').offsetWidth, + 122, + "col visibility:collapse changes table width" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-col-005.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-005.html new file mode 100644 index 0000000000..b674cddf65 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-col-005.html @@ -0,0 +1,55 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + td { + padding: 0; + } +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> +<p> +Setting a spanning column to visibility:collapse changes table width but +not height. The right two columns here have been collapsed. +</p> +<table id="test" style="border-collapse: collapse;"> +<colgroup> + <col style="background:#00F"/> + <col span="2" style="background:#F00; visibility: collapse"/> +</colgroup> +<tbody> + <tr> + <td><div style="width: 100px; height: 100px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 1px; height: 1px"></div></td> + </tr> + <tr> + <td><div style="width: 100px; height: 100px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 1px; height: 1px"></div></td> + </tr> +</tbody> +</table> +<script> + tests = [ + [ + document.getElementById('test').offsetHeight, + 200, + "col visibility:collapse doesn't change table height", + ], + [ + document.getElementById('test').offsetWidth, + 100, + "col visibility:collapse changes table width" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-001.html new file mode 100644 index 0000000000..0b59f20fb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-001.html @@ -0,0 +1,62 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + td { + padding: 0; + } +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> +<p> +Setting a spanning column to visibility:collapse changes table width but +not height. The middle column has been collapsed. +</p> +<table id="test" style="border-spacing: 0;"> + <col style="background-color:red;"> + <col style="background-color: blue; visibility: collapse;"> + <col style="background-color: green;"> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> + <tr> + <td colspan="3"><div style="width: 30px; height: 10px"></div></td> + </tr> +</table> + +<script> + tests = [ + [ + document.getElementById('test').offsetHeight, + 40, + "col visibility:collapse doesn't change table height", + ], + [ + document.getElementById('test').offsetWidth, + 20, + "col visibility:collapse changes table width" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-002.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-002.html new file mode 100644 index 0000000000..0203749c53 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-002.html @@ -0,0 +1,62 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + td { + padding: 0; + } +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> +<p> +Setting a spanning column to visibility:collapse changes table width but +not height. The first column has been collapsed and column width is the widest cell +in the column. +</p> +<table id="test" style="border-spacing: 0;"> + <col style="background-color:red; visibility: collapse;"> + <col style="background-color: blue;"> + <col style="background-color: green;"> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 20px; height: 10px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 20px; height: 10px"></div></td> + <td><div style="width: 20px; height: 10px"></div></td> + </tr> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td><div style="width: 20px; height: 10px"></div></td> + <td><div style="width: 30px; height: 10px"></div></td> + </tr> + <tr> + <td colspan="3"><div style="width: 25px; height: 10px"></div></td> + </tr> +</table> +<script> + tests = [ + [ + document.getElementById('test').offsetHeight, + 40, + "col visibility:collapse doesn't change table height", + ], + [ + document.getElementById('test').offsetWidth, + 50, + "col visibility:collapse changes table width" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-003-ref.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-003-ref.html new file mode 100644 index 0000000000..4617a3a2ed --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-003-ref.html @@ -0,0 +1,38 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference: Overflow clipping in cells that span columns</title> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + .firstCol { + width: 65px; + } + .thirdCol { + width: 160px; + } +</style> +<table> + <col style="background-color:red;"> + <col style="background-color: blue; visibility:collapse;"> + <col style="background-color: green;"> + <tr> + <td class="firstCol">Row 1</td> + <td>Row 1 wordword</td> + <td class="thirdCol">Row 1 wordwordword</td> + </tr> + <tr> + <td class="firstCol">Row 2</td> + <td>Row 2 wordwordword</td> + <td class="thirdCol">Row 2 wordword</td> + </tr> + <tr> + <td class="firstCol">Row 3</td> + <td>Row 3 word</td> + <td class="thirdCol">Row 3 wordwordwordword</td> + </tr> + <tr> + <td colspan="3">superlongwordsuperlongwordsuper</td> + </tr> +</table> + diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-003.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-003.html new file mode 100644 index 0000000000..37092818f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-003.html @@ -0,0 +1,38 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Overflow clipping in cells that span columns</title> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<link rel="match" href="visibility-collapse-colspan-003-ref.html"> +<style> + .firstCol { + width: 65px; + } + .thirdCol { + width: 160px; + } +</style> +<table> + <col style="background-color:red;"> + <col style="background-color: blue; visibility:collapse;"> + <col style="background-color: green;"> + <tr> + <td class="firstCol">Row 1</td> + <td>Row 1 wordword</td> + <td class="thirdCol">Row 1 wordwordword</td> + </tr> + <tr> + <td class="firstCol">Row 2</td> + <td>Row 2 wordwordword</td> + <td class="thirdCol">Row 2 wordword</td> + </tr> + <tr> + <td class="firstCol">Row 3</td> + <td>Row 3 word</td> + <td class="thirdCol">Row 3 wordwordwordword</td> + </tr> + <tr> + <td colspan="3">superlongwordsuperlongwordsuper shouldbeclipped</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-crash.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-crash.html new file mode 100644 index 0000000000..591fbd9a99 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-colspan-crash.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> +<p> +When a row is collapsed, a cell spanning the row may get clipped. When the row is then uncollapsed, +the browser should not crash because the cell's children should be correctly updated and laid out. +</p> +<table> + <col style="background-color:red;"> + <col id="colToCollapse" style="background-color: blue;"> + <col style="background-color: green;"> + <tr> + <td class="firstCol">Row 1</td> + <td>Row 1 wordword</td> + <td class="thirdCol">Row 1 wordwordword</td> + </tr> + <tr> + <td class="firstCol">Row 2</td> + <td>Row 2 wordwordword</td> + <td class="thirdCol">Row 2 wordword</td> + </tr> + <tr> + <td class="firstCol">Row 3</td> + <td>Row 3 word</td> + <td class="thirdCol">Row 3 wordwordwordword</td> + </tr> + <tr> + <td colspan="3">superlongwordsuperlongwordsuper shouldbeclipped</td> + </tr> +</table> + +<script> + test(() => { + col = document.getElementById("colToCollapse"); + col.style.visibility = "collapse"; + step_timeout(function(){ col.style.visibility = "visible"; }, 500); + step_timeout(function(){ col.style.visibility = "collapse"; }, 1000); + }, "No crash or assertion failure. crbug.com/174167"); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-non-rowcol-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-non-rowcol-001.html new file mode 100644 index 0000000000..9765a37f8b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-non-rowcol-001.html @@ -0,0 +1,110 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#visibility-prop"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + When setting any element that is not a row, col, row group, or col group, + visibility:collapse is equivalent to visibility:hidden. + </p> + <x-table id="one"> + <x-tr> + <x-td id="visibleCell"> + <span>row 1</span> + </x-td> + <x-td> + <span id="visibleSpan"></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except top cells have been collapsed. + <x-table id="two"> + <x-tr> + <x-td id="hiddenCell" style="visibility:collapse"> + <span>row 1</span> + </x-td> + <x-td> + <span id="hiddenSpan" style="visibility:collapse"></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "table width is unchanged" + ], + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "table height is unchanged" + ], + [ + document.getElementById('hiddenCell').offsetWidth, + document.getElementById('visibleCell').offsetWidth, + "td visibility:collapse has no effect on td width" + ], + [ + document.getElementById('hiddenCell').offsetHeight, + document.getElementById('visibleCell').offsetHeight, + "td visibility:collapse has no effect on td height" + ], + [ + document.getElementById('hiddenSpan').offsetWidth, + document.getElementById('visibleSpan').offsetWidth, + "span visibility:collapse has no effect on span width" + ], + [ + document.getElementById('hiddenSpan').offsetHeight, + document.getElementById('visibleSpan').offsetHeight, + "span visibility:collapse has no effect on span height" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-001.html new file mode 100644 index 0000000000..51c87b6c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-001.html @@ -0,0 +1,80 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + </p> + <x-table id="one"> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except row 1 has been collapsed. + <x-table id="two"> + <x-tr style="visibility:collapse"> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + generate_tests(assert_equals, [ + [ + "row visibility:collapse doesn't change table width, unlike display:none", + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth + ], + [ + "row visibility:collapse changes table height, unlike visibility:hidden", + document.getElementById('two').offsetHeight, + 116 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-002-dynamic.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-002-dynamic.html new file mode 100644 index 0000000000..7bcf413023 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-002-dynamic.html @@ -0,0 +1,89 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + </p> + <x-table id="one"> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except row 2 has been collapsed. + <x-table id="two"> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr id="collapse"> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + row = document.getElementById("collapse"); + row.style.visibility = "collapse"; + + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "row visibility:collapse doesn't change table width, unlike display:none" + ], + [ + document.getElementById('two').offsetHeight, + 116, + "row visibility:collapse changes table height, unlike visibility:hidden" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-003-dynamic.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-003-dynamic.html new file mode 100644 index 0000000000..1488a4da7f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-003-dynamic.html @@ -0,0 +1,89 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + </p> + <x-table id="one"> + <x-tr> + <x-td> + <img src="../support/cat.png"> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except row 1 has been collapsed. + <x-table id="two"> + <x-tr id="collapse"> + <x-td> + <img src="../support/cat.png"> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + row = document.getElementById("collapse"); + row.style.visibility = "collapse"; + + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "row visibility:collapse doesn't change table width, unlike display:none" + ], + [ + document.getElementById('two').offsetHeight, + 116, + "row visibility:collapse changes table height, unlike visibility:hidden" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-004.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-004.html new file mode 100644 index 0000000000..994cc89281 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-004.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#dynamic-effects"> +<style> + table { background: red;} + td { background:green; padding: 0;} +</style> +<main> + <h1>Visibility collapse changes table height even when its height is fixed</h1> + + <table style="height:150px;border-spacing: 0"> + <tr> + <td style="width:50px">a</td> + </tr> + <tr style="visibility:collapse"> + <td style="width:100px">hello</td> + </tr> + <tr> + <td>b</td> + </tr> + </table> +</main> +<script> + test(function() { + let t = document.querySelector("table"); + assert_equals(t.offsetWidth, 100); + assert_equals(t.offsetHeight, 100); + }, "collapsed row shrinks table height"); +</script> + diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-005.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-005.html new file mode 100644 index 0000000000..a0b4ee8f9b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-005.html @@ -0,0 +1,69 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + main table { + border-spacing: 0; + } + main td { + width: 50px; + height: 50px; + background: gray; + padding: 0; + } +</style> +<main> + <h1>Visibility collapse and overflow</h1> + <p>Collapsed row should not contribute to overflow</p> + <div id="row" style="overflow-y: auto; width: 200px; height: 100px;border:1px solid black;"> + <table> + <tbody> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr style="visibility: collapse"> + <td></td> + <td></td> + </tr> + </tbody> + </table> + </div> + <p>Collapsed section should not contribute to overflow</p> + <div id="section" style="overflow-y: auto; width: 200px; height: 50px;border:1px solid black;"> + <table> + <thead> + <tr> + <td></td> + <td></td> + </tr> + </thead> + <tbody style="visibility:collapse"> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </tbody> + </table> + </div> +</main> +<script> + test( _ => { + assert_equals(document.querySelector("#row").scrollHeight, 100); + }, "collapsed row should not contribute to overflow"); + test( _ => { + assert_equals(document.querySelector("#section").scrollHeight, 50); + }, "collapsed section should not contribute to overflow"); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-group-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-group-001.html new file mode 100644 index 0000000000..ea76e902b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-group-001.html @@ -0,0 +1,124 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://www.w3.org/TR/2017/WD-css-tables-3-20170307/#visible-track"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Collapsing a row group but making its rows visible should still result in a + collapsed row group. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + <x-tr id="thirdRowRef"> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + When row group is collapsed, visible rows within the row group are still collapsed and therefore invisible. + <x-table id="two"> + <x-tbody style="visibility:collapse;"> + <x-tr style="visibility:visible;" id="firstRow"> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr style="visibility:visible;" id="secondRow"> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + <x-tr id="thirdRow"> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "row group visibility:collapse doesn't change table width" + ], + [ + document.getElementById('two').offsetHeight, + 116, + "row group visibility:collapse changes table height" + ], + [ + document.getElementById('firstRow').offsetHeight, + 0, + "the first row should be collapsed" + ], + [ + document.getElementById('secondRow').offsetHeight, + 0, + "the second row should be collapsed" + ], + [ + document.getElementById('thirdRow').offsetHeight, + document.getElementById('thirdRowRef').offsetHeight, + "the third row stays the same" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-row-group-002.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-group-002.html new file mode 100644 index 0000000000..1aa7a68048 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-row-group-002.html @@ -0,0 +1,107 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting row group to visibility:collapse changes table height but not width. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except row group of first two rows has been collapsed. + <x-table id="two"> + <x-tbody style="visibility:collapse;"> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "row group visibility:collapse doesn't change table width" + ], + [ + document.getElementById('two').offsetHeight, + 116, + "row group visibility:collapse changes table height" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowcol-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowcol-001.html new file mode 100644 index 0000000000..912ab0d8b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowcol-001.html @@ -0,0 +1,71 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> +table, td { + border: 1px solid; + height: 32px; + min-width: 32px; + white-space: nowrap; + padding: 0; +} +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> +<p> +Setting row and column to visibility:collapse changes both height and width. The +collapsed result should have whitespace in the bottom right corner. +</p> +<table id="test"> + <col style="background-color: pink"> + <col style="background-color: purple;"> + <col style="background-color: black; visibility: collapse;"> + <col style="background-color: grey; "> + <tbody> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td colspan="2" rowspan="2"></td> + <td></td> + <td></td> + </tr> + <tr style="visibility:collapse"> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td colspan="2"></td> + </tr> + </tbody> +</table> +<script> + tests = [ + [ + document.getElementById('test').offsetWidth, + 112, + "spanning col visibility:collapse changes table width" + ], + [ + document.getElementById('test').offsetHeight, + 112, + "spanning row visibility:collapse changes height" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowcol-002.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowcol-002.html new file mode 100644 index 0000000000..6876a40712 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowcol-002.html @@ -0,0 +1,57 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + td { + padding: 0; + } +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> +<p> +Setting row and spanning column to visibility:collapse changes height and width. +</p> +<table id="test" style="border-spacing:0;"> + <col style="background-color: pink;"> + <col style="background-color: green;"> + <col span="2" style="background-color: purple; visibility: collapse;"> + <tr> + <td><div style="width: 25px; height: 25px"></div></td> + <td><div style="width: 20px; height: 20px"></div></td> + <td><div style="width: 15px; height: 15px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> + <tr> + <td rowspan="2" colspan="3"><div style="width: 45px; height: 25px"></div></td> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> + <tr style="visibility: collapse;"> + <td><div style="width: 70px; height: 40px"></div></td> + </tr> +</table> +<script> + borderWidth = 2; + tests = [ + [ + document.getElementById('test').offsetWidth, + 45, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('test').offsetHeight, + 35, + "spanning row visibility:collapse doesn't change height in this case" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-001.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-001.html new file mode 100644 index 0000000000..72ceb3a34b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-001.html @@ -0,0 +1,69 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a rowspan to visibility:collapse doesn't change height or width in this case. + </p> + <table id="one"> + <tr> + <th>Month</th> + <th>Savings</th> + <th>Savings for holiday!</th> + </tr> + <tr> + <td>January</td> + <td>$100</td> + <td rowspan="2">$50</td> + </tr> + <tr> + <td>February</td> + <td>$80</td> + </tr> +</table> + Collapsing a spanning row does not change table height in this case. + <table id="two"> + <tr> + <th>Month</th> + <th>Savings</th> + <th>Savings for holiday!</th> + </tr> + <tr> + <td>January</td> + <td>$100</td> + <td rowspan="2" style="visibility:collapse;">$50</td> + </tr> + <tr> + <td>February</td> + <td>$80</td> + </tr> +</table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "spanning row visibility:collapse doesn't change height in this case" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-002-border-separate.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-002-border-separate.html new file mode 100644 index 0000000000..d6e7469d70 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-002-border-separate.html @@ -0,0 +1,107 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<style> +table { + border-spacing: 0; + border-collapse: separate; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + Here, the spanning cell is the only cell in its row. + </p> + <table id="one"> + <tr id="spanningRowRef"> + <td rowspan="5">B<br>B<br>B<br>B<br>B</td> + </tr> + <tr id="firstRowRef"> + <td>aaaa</td> + </tr> + <tr> + <td>bbbb</td> + </tr> + <tr id="thirdRowRef"> + <td>cccc</td> + </tr> + <tr id="fourthRowRef"> + <td>dddd</td> + </tr> + </table> + Bottom table is identical to top except second row has been collapsed. + The spanning cell's height shrinks and is clipped. + <table id="two"> + <tr id="spanningRow"> + <td rowspan="5" id="spanningCell">B<br>B<br>B<br>B<br>B</td> + </tr> + <tr id="firstRow"> + <td>aaaa</td> + </tr> + <tr id="secondRow" style="visibility: collapse"> + <td>bbbb</td> + </tr> + <tr id="thirdRow"> + <td>cccc</td> + </tr> + <tr id="fourthRow"> + <td>dddd</td> + </tr> + </table> + + This text should not intersect with the table. + +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "fourth row stays the same height" + ], + [ + document.getElementById('thirdRow').offsetHeight, + document.getElementById('thirdRowRef').offsetHeight, + "third row stays the same height" + ], + [ document.getElementById('secondRow').offsetHeight, + 0, + "spanning row visibility:collapse makes row height 0" + ], + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "first row stays the same height" + ], + [ + document.getElementById('spanningCell').offsetHeight, + document.getElementById('firstRow').offsetHeight + + document.getElementById('thirdRow').offsetHeight + + document.getElementById('fourthRow').offsetHeight, + "spanning cell shrinks to sum of remaining three rows' height" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-002.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-002.html new file mode 100644 index 0000000000..c88831a4ee --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-002.html @@ -0,0 +1,107 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<style> +table { + border-spacing: 0; + border-collapse: collapse; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + Here, the spanning cell is the only cell in its row. + </p> + <table id="one"> + <tr id="spanningRowRef"> + <td rowspan="5">B<br>B<br>B<br>B<br>B</td> + </tr> + <tr id="firstRowRef"> + <td>aaaa</td> + </tr> + <tr> + <td>bbbb</td> + </tr> + <tr id="thirdRowRef"> + <td>cccc</td> + </tr> + <tr id="fourthRowRef"> + <td>dddd</td> + </tr> + </table> + Bottom table is identical to top except second row has been collapsed. + The spanning cell's height shrinks and is clipped. + <table id="two"> + <tr id="spanningRow"> + <td rowspan="5" id="spanningCell">B<br>B<br>B<br>B<br>B</td> + </tr> + <tr id="firstRow"> + <td>aaaa</td> + </tr> + <tr id="secondRow" style="visibility: collapse"> + <td>bbbb</td> + </tr> + <tr id="thirdRow"> + <td>cccc</td> + </tr> + <tr id="fourthRow"> + <td>dddd</td> + </tr> + </table> + + This text should not intersect with the table. + +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "fourth row stays the same height" + ], + [ + document.getElementById('thirdRow').offsetHeight, + document.getElementById('thirdRowRef').offsetHeight, + "third row stays the same height" + ], + [ document.getElementById('secondRow').offsetHeight, + 0, + "spanning row visibility:collapse makes row height 0" + ], + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "first row stays the same height" + ], + [ + document.getElementById('spanningCell').offsetHeight, + document.getElementById('firstRow').offsetHeight + + document.getElementById('thirdRow').offsetHeight + + document.getElementById('fourthRow').offsetHeight, + "spanning cell shrinks to sum of remaining three rows' height" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-003-border-separate.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-003-border-separate.html new file mode 100644 index 0000000000..343da68516 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-003-border-separate.html @@ -0,0 +1,104 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> +table { + border-spacing: 0; + border-collapse: separate; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + Here the spanning cell and another cell are in the same row. + </p> + <table id="one"> + <tr id="firstRowRef"> + <td>aaaa</td> + </tr> + <tr id="secondRowRef"> + <td>bbbb</td> + </tr> + <tr id="collapsedRowRef"> + <td rowspan="2">spanning</td> + <td>cccc</td> + </tr> + <tr id="fourthRowRef"> + <td>dddd</td> + </tr> + <tr id="fifthRowRef"> + <td>eeee</td> + </tr> + </table> + Bottom table is identical to top except third row has been collapsed. + <table id="two"> + <tr id="firstRow"> + <td>aaaa</td> + </tr> + <tr id="secondRow"> + <td>bbbb</td> + </tr> + <tr style="visibility:collapse;" id="collapsedRow"> + <td rowspan="2">spanning</td> + <td>cccc</td> + </tr> + <tr id="fourthRow"> + <td>dddd</td> + </tr> + <tr id="fifthRow"> + <td>eeee</td> + </tr> + </table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('collapsedRow').offsetHeight, + 0, + "collapsed row has zero height" + ], + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "first row height doesn't change" + ], + [ + document.getElementById('secondRow').offsetHeight, + document.getElementById('secondRowRef').offsetHeight, + "second row height doesn't change" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "fourth row height doesn't change" + ], + [ + document.getElementById('fifthRow').offsetHeight, + document.getElementById('fifthRowRef').offsetHeight, + "fifth row height doesn't change" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-003.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-003.html new file mode 100644 index 0000000000..2de164f2fd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-003.html @@ -0,0 +1,104 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> +table { + border-spacing: 0; + border-collapse: collapse; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + Here the spanning cell and another cell are in the same row. + </p> + <table id="one"> + <tr id="firstRowRef"> + <td>aaaa</td> + </tr> + <tr id="secondRowRef"> + <td>bbbb</td> + </tr> + <tr id="collapsedRowRef"> + <td rowspan="2">spanning</td> + <td>cccc</td> + </tr> + <tr id="fourthRowRef"> + <td>dddd</td> + </tr> + <tr id="fifthRowRef"> + <td>eeee</td> + </tr> + </table> + Bottom table is identical to top except third row has been collapsed. + <table id="two"> + <tr id="firstRow"> + <td>aaaa</td> + </tr> + <tr id="secondRow"> + <td>bbbb</td> + </tr> + <tr style="visibility:collapse;" id="collapsedRow"> + <td rowspan="2">spanning</td> + <td>cccc</td> + </tr> + <tr id="fourthRow"> + <td>dddd</td> + </tr> + <tr id="fifthRow"> + <td>eeee</td> + </tr> + </table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('collapsedRow').offsetHeight, + 0, + "collapsed row has zero height" + ], + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "first row height doesn't change" + ], + [ + document.getElementById('secondRow').offsetHeight, + document.getElementById('secondRowRef').offsetHeight, + "second row height doesn't change" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "fourth row height doesn't change" + ], + [ + document.getElementById('fifthRow').offsetHeight, + document.getElementById('fifthRowRef').offsetHeight, + "fifth row height doesn't change" + ]]; + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-004-dynamic.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-004-dynamic.html new file mode 100644 index 0000000000..e6f65c450f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-004-dynamic.html @@ -0,0 +1,176 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<style> +table { + border-spacing: 0; + border-collapse: collapse; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<main> + <h1>Visibility collapse</h1> + <a href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering">Spec</a> + <p> + Setting a row to visibility:collapse changes table height but not width. + </p> + <table id="one"> + <tr id="firstRowRef"> + <td rowspan="5" id="spanningCellRef">B<br>B<br>B<br>B<br>B</td> + <td>first row</td> + </tr> + <tr id="secondRowRef"> + <td>aaaa</td> + </tr> + <tr> + <td>bbbb</td> + </tr> + <tr id="fourthRowRef"> + <td>cccc</td> + </tr> + <tr id="fifthRowRef"> + <td>dddd</td> + </tr> + </table> + In the bottom table, a row is dynamically collapsed, made visible, and collapsed again. + <table id="two"> + <tr id="firstRow"> + <td rowspan="5" id="spanningCell">B<br>B<br>B<br>B<br>B</td> + <td>first row</td> + </tr> + <tr id="secondRow"> + <td>aaaa</td> + </tr> + <tr id="thirdRow"> + <td>bbbb</td> + </tr> + <tr id="fourthRow"> + <td>cccc</td> + </tr> + <tr id="fifthRow"> + <td>dddd</td> + </tr> + </table> +</main> + +<script> + function runTests() { + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; + } + document.getElementById("thirdRow").style.visibility = "collapse"; + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "when third row is collapsed, first row stays the same height" + ], + [ + document.getElementById('secondRow').offsetHeight, + document.getElementById('secondRowRef').offsetHeight, + "when third row is collapsed, second row stays the same height" + ], + [ document.getElementById('thirdRow').offsetHeight, + 0, + "third row visibility:collapse makes row height 0" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "when third row is collapsed, fourth row stays the same height" + ], + [ + document.getElementById('spanningCell').offsetHeight, + document.getElementById('firstRow').offsetHeight + + document.getElementById('secondRow').offsetHeight + + document.getElementById('fourthRow').offsetHeight + + document.getElementById('fifthRow').offsetHeight, + "spanning cell shrinks to sum of remaining three rows' height" + ]]; + runTests(); + document.getElementById("thirdRow").style.visibility = "visible"; + tests = [ + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "when third row is visible, first row stays the same height" + ], + [ + document.getElementById('secondRow').offsetHeight, + document.getElementById('secondRowRef').offsetHeight, + "when third row is visible, second row stays the same height" + ], + [ document.getElementById('thirdRow').offsetHeight, + document.getElementById('secondRowRef').offsetHeight, + "when third row is visible, third row stays the same height" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "when third row is visible, fourth row stays the same height" + ], + [ + document.getElementById('fifthRow').offsetHeight, + document.getElementById('fifthRowRef').offsetHeight, + "when third row is visible, fifth row stays the same height" + ], + [ + document.getElementById('spanningCell').offsetHeight, + document.getElementById('spanningCellRef').offsetHeight, + "when third row is visible, spanning cell stays the same height" + ]]; + runTests(); + document.getElementById("thirdRow").style.visibility = "collapse"; + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "(2nd collapse) spanning row visibility:collapse doesn't change table width" + ], + [ + document.getElementById('firstRow').offsetHeight, + document.getElementById('firstRowRef').offsetHeight, + "when third row is collapsed again, first row stays the same height" + ], + [ + document.getElementById('secondRow').offsetHeight, + document.getElementById('secondRowRef').offsetHeight, + "when third row is collapsed again, second row stays the same height" + ], + [ document.getElementById('thirdRow').offsetHeight, + 0, + "(2nd collapse) third row visibility:collapse makes row height 0" + ], + [ + document.getElementById('fourthRow').offsetHeight, + document.getElementById('fourthRowRef').offsetHeight, + "when third row is collapsed again, fourth row stays the same height" + ], + [ + document.getElementById('spanningCell').offsetHeight, + document.getElementById('firstRow').offsetHeight + + document.getElementById('secondRow').offsetHeight + + document.getElementById('fourthRow').offsetHeight + + document.getElementById('fifthRow').offsetHeight, + "(2nd collapse) spanning cell shrinks to sum of remaining three rows' height" + ]]; + runTests(); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-005-ref.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-005-ref.html new file mode 100644 index 0000000000..27eceb19b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-005-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference: Overflow clipping in cells that span rows</title> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<style> +table { + border-spacing: 0; + border-collapse: collapse; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering">Spec</a> +<table> + <tr> + <td>Row 1 Left</td> + <td>Row 1 Center</td> + <td rowspan=2 style="width:100px"><p>Supersuperlongword</p><p style="visibility: hidden;">row with lots and lots of text</p></td> + </tr> + <tr style="visibility: collapse"> + <td>Row 2 Left</td> + <td>Row 2 Center</td> + </tr> + <tr> + <td>Row 3 Left</td> + <td>Row 3 Center</td> + <td>Row 3 Right</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-005.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-005.html new file mode 100644 index 0000000000..a10c56dda7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-005.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Overflow clipping in cells that span rows</title> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<link rel="match" href="visibility-collapse-rowspan-005-ref.html"> +<style> +table { + border-spacing: 0; + border-collapse: collapse; +} +table td { + border: 1px solid blue; + padding: 5px; +} +</style> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering">Spec</a> +<table> + <tr> + <td>Row 1 Left</td> + <td>Row 1 Center</td> + <td rowspan=2 style="width:100px"><p>Supersuperlongword</p><p>row with lots and lots of text</p></td> + </tr> + <tr style="visibility: collapse"> + <td>Row 2 Left</td> + <td>Row 2 Center</td> + </tr> + <tr> + <td>Row 3 Left</td> + <td>Row 3 Center</td> + <td>Row 3 Right</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-crash.html b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-crash.html new file mode 100644 index 0000000000..977c3a026e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-collapse-rowspan-crash.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> +<h1>Visibility collapse</h1> +<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> +<p> +When a row is collapsed, a cell spanning the row may get clipped. When the row is then uncollapsed, +the browser should not crash because the cell's children should be correctly updated and laid out. +</p> +<table> + <tr> + <td><div style="width: 10px; height: 10px"></div></td> + <td rowspan="2"> + <div style="outline: 1px solid cyan"> + Overflow Overflow Overflow</div> + </td> + </tr> + <tr id="rowToCollapse"> + <td><div style="width: 10px; height: 10px"></div></td> + </tr> +</table> + +<script> + test(() => { + row = document.getElementById("rowToCollapse"); + row.style.visibility = "collapse"; + step_timeout(function(){ row.style.visibility = "visible"; }, 500); + }, "No crash or assertion failure. crbug.com/753515"); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-tables/visibility-hidden-col-001.html b/testing/web-platform/tests/css/css-tables/visibility-hidden-col-001.html new file mode 100644 index 0000000000..914af3683e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-hidden-col-001.html @@ -0,0 +1,107 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility hidden</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a column of cells to visibility:hidden. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + Bottom table is identical to top except right column's cells are hidden. + <x-table id="two"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td style="visibility:hidden;"> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td style="visibility:hidden;"> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td style="visibility:hidden;"> + <span></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "visibility:hidden doesn't change table height" + ], + [ + document.getElementById('two').offsetWidth, + 222, + "visibility:hidden doesn't change table width" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-hidden-collapsed-borders.html b/testing/web-platform/tests/css/css-tables/visibility-hidden-collapsed-borders.html new file mode 100644 index 0000000000..c4aab2b61a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-hidden-collapsed-borders.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1216308"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="If a table has visibility:hidden collapsed borders should not be painted."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; background: green;"> + <table style="border: solid red 20px; border-collapse: collapse; width: 100px; height: 100px; box-sizing: border-box; visibility: hidden;"> + <td></td> + </table> +</table> diff --git a/testing/web-platform/tests/css/css-tables/visibility-hidden-nested-001.html b/testing/web-platform/tests/css/css-tables/visibility-hidden-nested-001.html new file mode 100644 index 0000000000..a2a80fdc46 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-hidden-nested-001.html @@ -0,0 +1,140 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#visibility-prop"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility hidden</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a table to visibility:hidden, but rows and cells to different visibility values. + </p> + <x-table id="one"> + <x-tbody> + <x-tr id="visibleRow"> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td id="visibleCell"> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span id="visibleSpan"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + Bottom table is identical to top, except entire table is hidden, the second row + is visible with a nested hidden cell, and the third row is visible with a nested + hidden span. + <x-table id="two" style="visibility:hidden;"> + <x-tbody> + <x-tr id="invisibleRow"> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr style="visibility:visible;"> + <x-td> + <span>row 2</span> + </x-td> + <x-td id="invisibleCell" style="visibility:hidden;"> + <span></span> + </x-td> + </x-tr> + <x-tr style="visibility:visible;"> + <x-td> + <span>row 3</span> + </x-td> + <x-td> + <span id="invisibleSpan" style="visibility:hidden;"></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "table visibility:hidden doesn't change table height" + ], + [ + document.getElementById('two').offsetWidth, + 222, + "table visibility:hidden doesn't change table width" + ], + [ + document.getElementById('visibleRow').offsetWidth, + document.getElementById('invisibleRow').offsetWidth, + "row visibility:hidden doesn't change row width" + ], + [ + document.getElementById('visibleRow').offsetHeight, + document.getElementById('invisibleRow').offsetHeight, + "row visibility:hidden doesn't change row height" + ], + [ + document.getElementById('visibleCell').offsetWidth, + document.getElementById('invisibleCell').offsetWidth, + "cell visibility:hidden doesn't change cell width" + ], + [ + document.getElementById('visibleCell').offsetHeight, + document.getElementById('invisibleCell').offsetHeight, + "cell visibility:hidden doesn't change cell height" + ], + [ + document.getElementById('visibleSpan').offsetWidth, + document.getElementById('invisibleSpan').offsetWidth, + "span visibility:hidden doesn't change span width" + ], + [ + document.getElementById('visibleSpan').offsetHeight, + document.getElementById('invisibleSpan').offsetHeight, + "span visibility:hidden doesn't change span height" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-hidden-nested-002.html b/testing/web-platform/tests/css/css-tables/visibility-hidden-nested-002.html new file mode 100644 index 0000000000..74da25b8b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-hidden-nested-002.html @@ -0,0 +1,106 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> +<link rel="help" href="https://drafts.csswg.org/css-box-3/#visibility-prop"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: lime; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility hidden</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> + <p> + Setting a table to visibility:hidden, but rows and cells to different nested visibility values. + Height and width of table should not change. + </p> + <x-table id="one"> + <x-tbody> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + Bottom table is identical to top except entire row group of two rows is hidden, and + first row is visible with two hidden cells and a visible span in the left cell. + <x-table id="two"> + <x-tbody style="visibility:hidden;"> + <x-tr id="invisibleRow" style="visibility:visible;"> + <x-td id="leftCell" style="visibility:hidden;"> + <span style="visibility:visible;">row 1</span> + </x-td> + <x-td id="rightCell" style="visibility:hidden;"> + <span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-tbody> + </x-table> + +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "table visibility:hidden doesn't change table height" + ], + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "table visibility:hidden doesn't change table width" + ], + [ + document.getElementById("leftCell").offsetWidth, + document.getElementById("rightCell").offsetWidth, + "hidden and visible cells should have same height" + ], + [ + document.getElementById("leftCell").offsetHeight, + document.getElementById("rightCell").offsetHeight, + "hidden and visible cells should have same width" + ] + ]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-hidden-row-001.html b/testing/web-platform/tests/css/css-tables/visibility-hidden-row-001.html new file mode 100644 index 0000000000..ed2e200cb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-hidden-row-001.html @@ -0,0 +1,92 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: pink; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility hidden</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting a row to visibility:hidden doesn't change table height or width. + </p> + <x-table id="one"> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except row 1 has been hidden. + <x-table id="two"> + <x-tr style="visibility:hidden"> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "row visibility:hidden doesn't change table width" + ], + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "row visibility:hidden doesn't change table height" + ], + [ + document.getElementById('two').offsetHeight, + 222, + "Table height is 222px" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/visibility-hidden-row-002.html b/testing/web-platform/tests/css/css-tables/visibility-hidden-row-002.html new file mode 100644 index 0000000000..e9090e6846 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/visibility-hidden-row-002.html @@ -0,0 +1,92 @@ +<!doctype html> +<meta charset="utf-8"> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='support/base.css' /> +<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> +<style> + x-table { + border: 5px solid black; + } + x-table span { + display: inline-block; + vertical-align: top; + background: pink; + margin: 3px; + height: 100px; + width: 100px; + } +</style> +<main> + <h1>Visibility hidden</h1> + <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> + <p> + Setting cells to visibility:hidden doesn't change table height or width. + </p> + <x-table id="one"> + <x-tr> + <x-td> + <span>row 1</span> + </x-td> + <x-td> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> + Bottom table is identical to top except row 1's cells has been hidden. + <x-table id="two"> + <x-tr> + <x-td style="visibility:hidden"> + <span>row 1</span> + </x-td> + <x-td style="visibility:hidden"> + <span></span><span></span> + </x-td> + </x-tr> + <x-tr> + <x-td> + <span>row 2</span> + </x-td> + <x-td> + <span></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + tests = [ + [ + document.getElementById('two').offsetWidth, + document.getElementById('one').offsetWidth, + "row visibility:hidden doesn't change table width" + ], + [ + document.getElementById('two').offsetHeight, + document.getElementById('one').offsetHeight, + "row visibility:hidden doesn't change table height" + ], + [ + document.getElementById('two').offsetHeight, + 222, + "Table height is 222px" + ]]; + + for (i = 0; i< tests.length; i++) { + test(function() + { + assert_equals.apply(this, tests[i]); + }, + tests[i][2]); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/whitespace-001-ref.html b/testing/web-platform/tests/css/css-tables/whitespace-001-ref.html new file mode 100644 index 0000000000..e9d5c50ccd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/whitespace-001-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> +.outer { + display: block; + width: 500px; + background: purple; + border: 1px solid green; +} +.half { + display: inline-block; + width: 50%; + background: blue; +} +.half + .half { + background: yellow; +} +</style> +<div class="outer"> + <div class="half">A</div> + <!-- White space here should take up space --> + <div class="half">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/whitespace-001.html b/testing/web-platform/tests/css/css-tables/whitespace-001.html new file mode 100644 index 0000000000..3fc6040b47 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/whitespace-001.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Whitespace inside table isn't incorrectly suppressed</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=251178"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1410345"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811353"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8358"> +<link rel="help" href="https://drafts.csswg.org/css-tables/#consecutive-boxes"> +<link rel="match" href="whitespace-001-ref.html"> +<style> +.outer { + display: table; + width: 500px; + background: purple; + border: 1px solid green; +} +.half { + display: inline-block; + width: 50%; + background: blue; +} +.half + .half { + background: yellow; +} +</style> +<div class="outer"> + <div class="half">A</div> + <!-- White space here should take up space --> + <div class="half">B</div> +</div> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-0.html b/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-0.html new file mode 100644 index 0000000000..795ad7e65c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-0.html @@ -0,0 +1,76 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> +<main> + <h1>Width Distribution</h1> + <h4>"Computing column measures"</h4> + <p>This is testing that the table root's minimum is max(table-root width, capmin, gridmin) <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec Text</a></p> + + <hr/> + <table id="one" cellspacing="0" cellpadding="0"> + <colgroup style="width: 1px;"> + <col style="width: 10px;"></col> + </colgroup> + <tr> + <td style="width: 1px;"></td> + </tr> + </table> + + <table id="two" cellspacing="0" cellpadding="0"> + <colgroup style="width: 10px;"> + <col style="width: 1px;"></col> + </colgroup> + <tr> + <td style="width: 1px;"></td> + </tr> + </table> + + <table id="three" cellspacing="0" cellpadding="0"> + <colgroup style="width: 1px;"> + <col style="width: 1px;"></col> + </colgroup> + <tr> + <td style="width: 10px;"></td> + </tr> + </table> + + <table id="four" cellspacing="0" cellpadding="0"> + <colgroup style="width: 10px;"> + <col></col> + </colgroup> + <tr> + <td style="width: 1px;"></td> + </tr> + </table> +</main> + +<script> + var i = 1; + generate_tests(assert_equals, [ + [ + "Checking intermediate min-content width for span 1 (1)", + document.getElementById('one').offsetWidth, + 10 + ], + [ + "Checking intermediate min-content width for span 1 (2)", + document.getElementById('two').offsetWidth, + 1 + ], + [ + "Checking intermediate min-content width for span 1 (3)", + document.getElementById('three').offsetWidth, + 10 + ], + [ + "Checking intermediate min-content width for span 1 (4)", + document.getElementById('four').offsetWidth, + 10 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-1.html b/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-1.html new file mode 100644 index 0000000000..eeae1c7a46 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-1.html @@ -0,0 +1,92 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> +<main> + <h1>Height Distribution</h1> + <h4>"Computing row measures"</h4> + <p>This is testing intermediate min-content height for span 2</p> + + <hr/> + <table cellspacing="0" cellpadding="0"> + <tbody style="height: auto"> + <tr style="height: 10px"> + <td id="one" style="height: 1px"></td> + <td rowspan="2" style="height: 51px"></td> + </tr> + <tr style="height: 20px"> + <td style="height: 2px"></td> + </tr> + </tbody> + </table> + + <table cellspacing="0" cellpadding="0"> + <tbody style="height: auto"> + <tr style="height: 10px"> + <td id="two" style="height: 1px"></td> + <td rowspan="2" style="height: 51px"></td> + </tr> + <tr style="height: auto"> + <td style="height: auto"></td> + </tr> + </tbody> + </table> + + <table cellspacing="0" cellpadding="0"> + <tbody style="height: 51px"> + <tr style="height: 10px"> + <td id="three" style="height: 1px"></td> + <td rowspan="2" style="height: 51px"></td> + </tr> + <tr style="height: 20px"> + <td style="height: 2px"></td> + </tr> + </tbody> + </table> + + <table cellspacing="0" cellpadding="0"> + <tbody style="height: 51px"> + <tr style="height: 10px"> + <td id="four" style="height: 1px"></td> + </tr> + <tr style="height: 20px"> + <td style="height: 2px"></td> + </tr> + </tbody> + </table> + +</main> + +<style> + table { margin-bottom: 10px; width: 50px; } + td { outline: 1px solid red; outline-offset: -1px; } +</style> +<script> + var i = 1; + generate_tests(assert_equals, [ + [ + "Checking intermediate min-content height for span 2 (1)", + document.getElementById('one').offsetHeight, + 17 + ], + [ + "Checking intermediate min-content height for span 2 (2)", + document.getElementById('two').offsetHeight, + 51 + ], + [ + "Checking intermediate min-content height for span 2 (3)", + document.getElementById('three').offsetHeight, + 17 + ], + [ + "Checking intermediate min-content height for span 2 (4)", + document.getElementById('four').offsetHeight, + 17 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-2.html b/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-2.html new file mode 100644 index 0000000000..b9840187f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-2.html @@ -0,0 +1,81 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Richard Townsend" href="Richard.Townsend@arm.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" /> +<style type="text/css"> +td { + padding: 0; +} +div { + /* Bug does not happen when the table's containing block is less + than (100+200+300)=600px, so make sure sure that it's larger. */ + width: 750px; +} +</style> +<div> + <h1>Width Distribution</h1> + <h4>"Computing column measures"</h4> + <p>This is testing that the table's auto columns are correctly recalculated after removing and adding a <code>col</code> element. + <a href="https://www.w3.org/TR/CSS2/tables.html#auto-table-layout">Spec Text</a></p> + + <hr/> + + <table id="one" style="border: 1px solid orange"> + <colgroup> + <col style="width: 100px" /> + <col style="width: 200px" /> + <col style="width: 300px;" id="hideable" /> + </colgroup> + <tr> + <td>100</td> + <td>200</td> + <td>300</td> + </tr> + </table> + + <table id="two" style="border: 1px solid orange"> + <colgroup> + <col style="width: 100px; display: none;" id="displayable" /> + <col style="width: 200px;" /> + <col style="width: auto;" /> + </colgroup> + <tr> + <td>100</td> + <td>200</td> + <td>300</td> + </tr> + </table> + + <table id="ref" style="border: 1px solid orange"> + <colgroup> + <col style="width: 100px;" /> + <col style="width: 200px;" /> + <col style="width: auto;" /> + </colgroup> + <tr> + <td>100</td> + <td>200</td> + <td>300</td> + </tr> + </table> + +</div> +<script> + test(function() { + var one = document.getElementById('one'); + var two = document.getElementById('two'); + var ref = document.getElementById('ref'); + + // Force initial layout. + assert_greater_than(one.offsetWidth, ref.offsetWidth); + + // Display two's colgroup and hide one's. + document.getElementById('displayable').style.display = 'table-column'; + document.getElementById('hideable').style.display = 'none'; + + // Both tables should now match the reference. + assert_equals(one.offsetWidth, ref.offsetWidth); + assert_equals(two.offsetWidth, ref.offsetWidth); + }, "Table recalculations should match the reference"); +</script> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/computing-table-width-0.html b/testing/web-platform/tests/css/css-tables/width-distribution/computing-table-width-0.html new file mode 100644 index 0000000000..49bae4b4f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/computing-table-width-0.html @@ -0,0 +1,39 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width" /> +<main> + <h1>Width Distribution</h1> + <h4>"Computing the table width"</h4> + <p>This is testing that the table root's minimum is max(table-root width, capmin, gridmin) <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec Text</a></p> + + <hr/> + <x-table id="one" style="width: 50px; height: 100px; border: 2px solid black;"> + <x-caption><span style="display: inline-block; height: 100px; width: 100px; background: blue;"></x-caption> + <x-tr> + <x-td></x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + // TEST ONE + "Width is 100px due to 100px content size of caption", + document.getElementById('one').offsetWidth, + 100 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/computing-table-width-1.html b/testing/web-platform/tests/css/css-tables/width-distribution/computing-table-width-1.html new file mode 100644 index 0000000000..d735568a12 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/computing-table-width-1.html @@ -0,0 +1,51 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width" /> + +<style> + x-table span { + display: inline-block; + background: green; + height: 100px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Computing the table width"</h4> + <p>This is testing that the table root's width when the TABLEROOT width is auto <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec Text</a></p> + <x-table id="one"> + <x-caption> + <span style="width: 100px; background: blue;"></span> + </x-caption> + <x-tr> + <x-td> + <span style="width: 100px;"></span> + </x-td> + <x-td> + <span style="width: 200px"></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 300px since that is the size of the content', + document.getElementById('one').offsetWidth, + 300 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-1.html b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-1.html new file mode 100644 index 0000000000..83357d7125 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-1.html @@ -0,0 +1,61 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution" /> + +<style> + x-table span { + display: inline-block; + background: green; + height: 100px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Distribution Algorithm"</h4> + <p>Tests the first step that all cells get their min content guess which is that + of their min content + <a href="https://drafts.csswg.org/css-tables-3/#width-distribution">Spec Text</a> + </p> + <x-table id="one"> + <x-tr> + <x-td id="two"> + <span style="width: 100px;"></span> + </x-td> + <x-td id="three"> + <span style="width: 200px"></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 300px since that is the size of the content', + document.getElementById('one').offsetWidth, + 300 + ], + [ + 'The first cell is 100px wide due to its content\'s size', + document.getElementById('two').offsetWidth, + 100 + ], + [ + 'The first cell is 200px wide due to its content\'s size', + document.getElementById('three').offsetWidth, + 200 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-2.html b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-2.html new file mode 100644 index 0000000000..83357d7125 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-2.html @@ -0,0 +1,61 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution" /> + +<style> + x-table span { + display: inline-block; + background: green; + height: 100px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Distribution Algorithm"</h4> + <p>Tests the first step that all cells get their min content guess which is that + of their min content + <a href="https://drafts.csswg.org/css-tables-3/#width-distribution">Spec Text</a> + </p> + <x-table id="one"> + <x-tr> + <x-td id="two"> + <span style="width: 100px;"></span> + </x-td> + <x-td id="three"> + <span style="width: 200px"></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 300px since that is the size of the content', + document.getElementById('one').offsetWidth, + 300 + ], + [ + 'The first cell is 100px wide due to its content\'s size', + document.getElementById('two').offsetWidth, + 100 + ], + [ + 'The first cell is 200px wide due to its content\'s size', + document.getElementById('three').offsetWidth, + 200 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-guess.html b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-guess.html new file mode 100644 index 0000000000..8ff39dd394 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-guess.html @@ -0,0 +1,61 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution" /> + +<style> + x-table span { + display: inline-block; + background: green; + height: 100px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Distribution Algorithm - min-content guess"</h4> + <p>Tests the first step that all cells get their min content guess which is that + of their min content + <a href="https://drafts.csswg.org/css-tables-3/#width-distribution-algorithm">Spec Text</a> + </p> + <x-table id="one"> + <x-tr> + <x-td id="two"> + <span style="width: 100px;"></span> + </x-td> + <x-td id="three"> + <span style="width: 200px"></span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 300px since that is the size of the content', + document.getElementById('one').offsetWidth, + 300 + ], + [ + 'The first cell is 100px wide due to its content\'s size', + document.getElementById('two').offsetWidth, + 100 + ], + [ + 'The first cell is 200px wide due to its content\'s size', + document.getElementById('three').offsetWidth, + 200 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-percent-guess.html b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-percent-guess.html new file mode 100644 index 0000000000..0541e8b0df --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-percent-guess.html @@ -0,0 +1,64 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution" /> + +<style> + x-td { + background: blue; + } + + x-table span { + display: inline-block; + background: green; + height: 100px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Distribution Algorithm - min-content-percent guess"</h4> + <p>Tests that the size of the column is given the max(%width, min-content width) + <a href="https://drafts.csswg.org/css-tables-3/#width-distribution-algorithm">Spec Text</a> + </p> + <x-table id="one" style="width: 400px;"> + <x-tr> + <x-td id="two" style="width: 50%"> + <span style="width: 100%">Cell 1</span> + </x-td> + <x-td id="three"> + <span style="width: 100%">Cell 2</span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 400px since that is the size of the content', + document.getElementById('one').offsetWidth, + 400 + ], + [ + 'The first cell is 200px due to its 50% specified width is greater than ', + document.getElementById('two').offsetWidth, + 200 + ], + [ + 'The second cell is 200px due to the 50% set on the first cell and the second gets distributed the remaining space since its auto', + document.getElementById('three').offsetWidth, + 200 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-specified-guess.1.html b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-specified-guess.1.html new file mode 100644 index 0000000000..f0def87f11 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-specified-guess.1.html @@ -0,0 +1,51 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution" /> + +<style> + x-td { + background: blue; + } + + x-table span { + display: inline-block; + background: green; + height: 50px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Distribution Algorithm - min-content-specified guess"</h4> + <p>Tests that the size of the column as the spec states that if the cell is constrained then the + <a href="https://drafts.csswg.org/css-tables-3/#width-distribution-algorithm">Spec Text</a> + </p> + <x-table style="width: 50px; border: 1px solid black;"> + <x-tr> + <x-td id="one" style="width: 50%;"> + <span style="width: 75px;">Cell 2</span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 75px due to its min-content size.', + document.getElementById('one').offsetWidth, + 75 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-specified-guess.html b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-specified-guess.html new file mode 100644 index 0000000000..a74c37005d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/distribution-algo-min-content-specified-guess.html @@ -0,0 +1,51 @@ +<!doctype html> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel='stylesheet' href='../support/base.css' /> + +<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#width-distribution" /> + +<style> + x-td { + background: blue; + } + + x-table span { + display: inline-block; + background: green; + height: 50px; + } +</style> +<main> + <h1>Width Distribution</h1> + <h4>"Distribution Algorithm - min-content-specified guess"</h4> + <p>Tests that the size of the column as the spec states that if the cell is constrained then the + <a href="https://drafts.csswg.org/css-tables-3/#width-distribution-algorithm">Spec Text</a> + </p> + <x-table style="width: 50px; border: 1px solid black;"> + <x-tr> + <x-td id="one" style="width: 100px;"> + <span style="width: 75px;">Cell 2</span> + </x-td> + </x-tr> + </x-table> +</main> + +<script> + while(true) { + var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; + var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } + xtd.parentNode.replaceChild(td,xtd); + } + + var i = 1; + generate_tests(assert_equals, [ + [ + 'The box should be 75px due to its min-content size.', + document.getElementById('one').offsetWidth, + 75 + ] + ]); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/td-with-subpixel-padding-vertical-rl.html b/testing/web-platform/tests/css/css-tables/width-distribution/td-with-subpixel-padding-vertical-rl.html new file mode 100644 index 0000000000..18ed2ddd00 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/td-with-subpixel-padding-vertical-rl.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-tables/#width-distribution" /> +<style> +td div { + display: inline-block; + width: 20px; + height: 20px; + background: blue; +} +</style> +Passes if each column (logical row) has two blue squares. +<div style="writing-mode: vertical-rl"> +<table> + <tr> + <td class='target' style="padding: 0.8px 0"><div></div> <div></div></td> + <td style="padding: 0.8px 0; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 1px 0"><div></div> <div></div></td> + <td style="padding: 1px 0; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 1.3px 0"><div></div> <div></div></td> + <td style="padding: 1.3px 0; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 1.5px 0"><div></div> <div></div></td> + <td style="padding: 1.5px 0; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 1.7px 0"><div></div> <div></div></td> + <td style="padding: 1.7px 0; width: 30px"></td> + </tr> +</table> +</div> +<script> +test(() => { + var targets = document.getElementsByClassName('target'); + for (var i = 0; i < targets.length; ++i) { + var divs = targets[i].getElementsByTagName('div'); + assert_equals(divs.length, 2); + assert_equals(divs[0].offsetLeft, divs[1].offsetLeft, 'Contents of td.target[' + i + '] should not wrap'); + } +}); +</script> diff --git a/testing/web-platform/tests/css/css-tables/width-distribution/td-with-subpixel-padding.html b/testing/web-platform/tests/css/css-tables/width-distribution/td-with-subpixel-padding.html new file mode 100644 index 0000000000..ff040773e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/width-distribution/td-with-subpixel-padding.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-tables/#width-distribution" /> +<style> +div { + display: inline-block; + width: 20px; + height: 20px; + background: blue; +} +</style> +Passes if each row has two blue squares. +<table> + <tr> + <td class='target' style="padding: 0 0.8px"><div></div> <div></div></td> + <td style="padding: 0 0.8px; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 0 1px"><div></div> <div></div></td> + <td style="padding: 0 1px; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 0 1.3px"><div></div> <div></div></td> + <td style="padding: 0 1.3px; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 0 1.5px"><div></div> <div></div></td> + <td style="padding: 0 1.5px; width: 30px"></td> + </tr> +</table> +<table> + <tr> + <td class='target' style="padding: 0 1.7px"><div></div> <div></div></td> + <td style="padding: 0 1.7px; width: 30px"></td> + </tr> +</table> +<script> +test(() => { + var targets = document.getElementsByClassName('target'); + for (var i = 0; i < targets.length; ++i) { + var divs = targets[i].getElementsByTagName('div'); + assert_equals(divs.length, 2); + assert_equals(divs[0].offsetTop, divs[1].offsetTop, 'Contents of td.target[' + i + '] should not wrap'); + } +}); +</script> diff --git a/testing/web-platform/tests/css/css-tables/zero-rowspan-001-ref.html b/testing/web-platform/tests/css/css-tables/zero-rowspan-001-ref.html new file mode 100644 index 0000000000..4f1dbdf96d --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/zero-rowspan-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Test: Reference Test</title> +<link rel="author" title="Robert Hogan" href="mailto:robhogan@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements"> +<table> + <tr><td rowspan="4">Foo</td></tr> + <tr><td>Foo</td></tr> + <tr><td>Foo</td></tr> + <tr><td>Foo</td></tr> +</table> + diff --git a/testing/web-platform/tests/css/css-tables/zero-rowspan-001.html b/testing/web-platform/tests/css/css-tables/zero-rowspan-001.html new file mode 100644 index 0000000000..bef5b947fc --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/zero-rowspan-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Test: Overflow clipping in cells that span columns</title> +<link rel="author" title="Robert Hogan" href="mailto:robhogan@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements"> +<link rel="match" href="zero-rowspan-001-ref.html"> +<table> + <tr><td rowspan="0">Foo</td></tr> + <tr><td>Foo</td></tr> + <tr><td>Foo</td></tr> + <tr><td>Foo</td></tr> +</table> + diff --git a/testing/web-platform/tests/css/css-tables/zero-rowspan-002-ref.html b/testing/web-platform/tests/css/css-tables/zero-rowspan-002-ref.html new file mode 100644 index 0000000000..3ccac78bd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/zero-rowspan-002-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS Test: Reference Test</title> +<link rel="author" title="Robert Hogan" href="mailto:robhogan@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements"> +<table> + <tr><td rowspan="3">1</td><td>2</td><td>3</td></tr> + <tr><td>1</td><td rowspan="2">2</td><td>3</td></tr> + <tr><td>1</td><td>2</td><td>3</td></tr> +</table> diff --git a/testing/web-platform/tests/css/css-tables/zero-rowspan-002.html b/testing/web-platform/tests/css/css-tables/zero-rowspan-002.html new file mode 100644 index 0000000000..7a79fc37b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/zero-rowspan-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Test: Overflow clipping in cells that span columns</title> +<link rel="author" title="Robert Hogan" href="mailto:robhogan@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements"> +<link rel="match" href="zero-rowspan-002-ref.html"> +<table> + <tr><td rowspan="0">1</td><td>2</td><td>3</td></tr> + <tr><td>1</td><td rowspan="0">2</td><td>3</td></tr> + <tr><td>1</td><td>2</td><td>3</td></tr> +</table> + |