commit ce59e3b3eeb39099ff2a1f1328e7ecff28a39120
author David Grogan <dgrogan@chromium.org> Wed Apr 26 02:31:18 2023
committer Blink WPT Bot <blink-w3c-test-autoroller@chromium.org> Wed Apr 26 02:42:36 2023
tree ede41164531577bf46dbff72017799c3dafaa1f7
parent a932abfe32dd38cbd47425853b56423679cf03c5

[css-flex] Disable fixed-table's infinite size for intrinsic flex sizing

A fixed-table's intrinsic max-content is ~infinite when it has a
%-width. That's been around for a while and ships in all browsers.

But it is problematic for the new flex intrinsic sizing algorithm
because now the infinity percolates up to the flex container's
min-content size[1]. We obviously don't want a min-content size of
infinity and gmail relies on the old behavior.

So this is a hacky patch that makes fixed-tables max-content size be the
same as auto-tables when an ancestor flex table is calculating its
intrinsic sizes. It will probably be web compatible, but unsure.

This affects both the min and max intrinsic size of the flex container.

[1] New flex min-content algorithm accounts for item's flex base sizes.
A %-width fixed-table's flex base size is its max-content size, which,
as mentioned above, is ~infinity.

Change-Id: I7010fa73df8e88a4812b23780e5d58a3f63da730
Bug: 240765
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4420422
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1135691}

css/css-tables/tentative/table-fixed-minmax.html

diff --git a/css/css-tables/tentative/table-fixed-minmax.html b/css/css-tables/tentative/table-fixed-minmax.html
index e7b9c5c..5be81d2 100644
--- a/css/css-tables/tentative/table-fixed-minmax.html
+++ b/css/css-tables/tentative/table-fixed-minmax.html
@@ -42,6 +42,21 @@
   <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">
@@ -91,6 +106,20 @@
   }, "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);