diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-tables/width-distribution | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/width-distribution')
13 files changed, 796 insertions, 0 deletions
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> |