diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/height-distribution')
23 files changed, 973 insertions, 0 deletions
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> |