diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/css-tables/tentative/table-minmax.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/tentative/table-minmax.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-tables/tentative/table-minmax.html | 144 |
1 files changed, 144 insertions, 0 deletions
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> |