Bug 1667626 [wpt PR 25805] - [css-flex] Pass a ConstraintSpace to ortho_table.ComputeMinMaxSizes(), a=testonly
authorDavid Grogan <dgrogan@chromium.org>
Wed, 30 Sep 2020 22:07:39 +0000
changeset 551272 eba41c8e77baea1f040467c83658f388e56e5f2d
parent 551271 9e1ac00b7bb147d2b46d2d8f8e0c8ddeba164a38
child 551273 339856f276287301bfc852c8ddfe561a6ff1d986
push id37830
push usernbeleuzu@mozilla.com
push dateSat, 03 Oct 2020 10:23:35 +0000
treeherdermozilla-central@7d7faf0b6d7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1667626, 25805, 1128262, 1131890, 2433594, 811216
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1667626 [wpt PR 25805] - [css-flex] Pass a ConstraintSpace to ortho_table.ComputeMinMaxSizes(), a=testonly Automatic update from web-platform-tests [css-flex] Pass a ConstraintSpace to ortho_table.ComputeMinMaxSizes() ComputeMinMaxSizes needs a ConstraintSpace when the child is not in a parallel writing mode. Flex wasn't providing one when it retrieved a table's intrinsic min size. Before this bug was introduced, flex was calling ComputeMinAndMaxContentContribution(..., table, ...) instead of table.ComputeMinMaxSizes(...). ComputeMinAndMaxContentContribution builds its own ConstraintSpace for ortho items, so flex didn't need to provide one. We originally switched from ComputeMinAndMaxContentContribution to table.ComputeMinMaxSizes because: * One input to the flex algorithm is the item's used min-width (for a row flexbox). The flex algorithm will never assign a flex item a width smaller than its used min-width. For most elements, we get this value via ResolveMinInlineLength(..., style.LogicalMinWidth(), ...). * But table's used min-width is defined specially to be "the greater of the resolved min-width, CAPMIN, and GRIDMIN". So to get the table-as-flex-item's used min-width, we need to retrieve max(CAPMIN, GRIDMIN) in addition to resolving style.LogicalMinWidth from the above step. * ComputeMinAndMaxContentContribution(table).min returns max(CAPMIN, GRIDMIN, style.LogicalWidth()). I.e. it obeys any specified width on the table. * But table.ComputeMinMaxSizes().min returns only max(CAPMIN, GRIDMIN)[1], which is what we want. In the example below, the flexbox will try to shrink the table's width to 75px. Using ComputeMinAndMaxContentContribution for the table's min-width computation would result in the table being 100px wide. Using table.ComputeMinMaxSizes would make it 75px wide. 75px is correct. <div style="display: flex; width: 75px;"> <table style="width: 100px; min-width: 0px;"> <td> <div style="float: left; width:50px"></div> <div style="float: left; width:50px"></div> </td> </table> </div> https://jsfiddle.net/dgrogan/gwu4ac82/3/ [1] This is actually not true today but is true for TablesNG. Switching to table.ComputeMinMaxSizes gets us closer. Bug: 1128262 Fixed: 1131890 Change-Id: Ie5a4eac97e4a6a2e96104397bd5c5ec483d40e78 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2433594 Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#811216} -- wpt-commits: 2531feaeef0530450b7a7271b2bb4cc450edb831 wpt-pr: 25805
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/ortho-table-item-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>ortho table is flex item</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#ref-for-hypothetical-main-size">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Table's specially-defined used min width is honored when the table is an ortho flex item.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: flex; width: 0px;">
+  <div style="display: table; writing-mode: vertical-rl; min-width: 0px; width: 100px; height: 100px; background: green;">
+    <div style="display: table-cell">
+      <div style="width: 100px"></div>
+    </div>
+  </div>