Skip to content

Commit

Permalink
[css-flex] Obey stretch size in replaced items' content size suggestion
Browse files Browse the repository at this point in the history
Content size suggestion is just min-content size. The min-content size
of a replaced element is supposed to account for preferred size in the
opposite axis. We were not doing that for content size suggestion when
the opposize axis preferred size came from a flexbox's fixed cross size.

In the example below, Blink now gives the image content size suggestion
100px because 100 = 300*150/50. Before this patch Blink gave it a
content size suggestion equal to its natural width 300px.

<div style="display: flex; height: 50px;">
  <img src="support/300x150-green.png">
</div>

Firefox matches Blink's behavior before this patch. We may have compat
issues.

See w3c/csswg-drafts#6693 for discussion of
this new behavior.

Bug: 1246126
Change-Id: I1d42c7151b9a0da7e001ca89ea1d7fb9187ae235
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3173922
Commit-Queue: David Grogan <[email protected]>
Reviewed-by: Ian Kilpatrick <[email protected]>
Cr-Commit-Position: refs/heads/main@{#931259}
  • Loading branch information
davidsgrogan authored and chromium-wpt-export-bot committed Oct 13, 2021
1 parent 6ccfe6f commit 2c83d2e
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 35 deletions.
6 changes: 3 additions & 3 deletions css/css-flexbox/flex-aspect-ratio-img-column-011.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@
data-expected-width="5" data-expected-height="5">
</div>

<div class="flexbox column" style="height: 10px;" data-expected-height="10">
<!-- should use min(specified, content height) = 10px as minimum height,
<div class="flexbox column" style="height: 10px; width: 50px;" data-expected-height="10">
<!-- should use min(specified=100, content height=50) = 50px as minimum height,
which the image will shrink to due to default flex-shrink. -->
<img src="support/10x10-green.png" style="height: 100px;" data-expected-height="10">
<img src="support/10x10-green.png" style="height: 100px;" data-expected-height="50">
</div>

<div class="flexbox" style="height: 10px;" data-expected-height="10">
Expand Down
34 changes: 20 additions & 14 deletions css/css-flexbox/flex-minimum-height-flex-items-023.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,35 @@
specified size suggestion). We ignore transferred size suggestion because
this item has a specified size.
5. content size suggestion = 150, because 150 is the min-content size in the
main axis.
5. content size suggestion = 50px because the stretched width of 100px is sent
through the 2:1 aspect ratio to determine the image's min-content size in the
block axis.
5a. This flex container qualifies for 9.8.3:
If a single-line flex container has a definite cross size, the automatic
preferred outer cross size of any stretched flex items is the flex
container's inner cross size (clamped to the flex item's min and max cross
size) and is considered definite.
So the preferred width of the image is 100px.
5b. The float specified by the min-content calculation from css-sizing 5.1 is
<img src="support/300x150-green.png" style="width: 100px; float: left;" />
This element gets height 50px.
6. specified size suggestion = 100px because that's what's specified.
7. So content-based min size = min(150, 100) = 100px. That becomes its flexed
7. So content-based min size = min(50, 100) = 50px. That becomes its flexed
height (see #1).
8. Then, the item stretches its width to 100px. The item has an aspect ratio,
so does the new width change the height? Not according to
https://drafts.csswg.org/css-flexbox/#algo-stretch, which says "Note that
this step does not affect the main size of the flex item, even if it has an
intrinsic aspect ratio." The height remains 100px.
FF 77 gives the item height of 50px. It's probably due to a disagreement in #8;
I think FF applies the aspect ratio of the new stretched width to get a height.
But it might be a disagreement in #4.
Chrome <= 83 gives the item height 150 because it doesn't treat
min-height:min-content as min-height:auto. That makes the used min-height be
150px. That might change in Chrome 84 or 85 when FlexNG launches.
intrinsic aspect ratio." The height remains 50px.
-->

<div style="height: 50px; width: 100px; background: green;"></div>
<div style="display: flex; flex-direction: column; width:100px; height: 0px;">
<img src="support/300x150-green.png" style="display: flex; min-height: min-content; height: 100px;" />
<img src="support/300x150-green.png" style="min-height: min-content; height: 100px;" />
</div>
27 changes: 9 additions & 18 deletions css/css-flexbox/flex-minimum-width-flex-items-013.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5663" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="min-width: auto ignores transferred size suggestion when item has a definite specified main size">
<meta name="assert" content="content size suggestion of a replaced aspect-ratio item accounts for definition stretched cross size">

<style>
#reference-overlapped-red {
Expand All @@ -19,25 +19,16 @@
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div style="width:100px; height: 75px; background: green;"></div>
<div style="display: flex; width: 0px; height: 25px;">
<div style="width:100px; height: 50px; background: green;"></div> <!-- This just completes the green square. -->
<div style="display: flex; width: 0px; height: 50px;">
<!--
content size suggestion is 300px
specified size suggestion is 100px
content size suggestion is 100px because the image has a stretched height of 50px. So min-content size of the image is 300x150/50 = 100.
specified size suggestion is 150px
transferred size suggestion is 100px
Chrome 87 and Firefox 84a1 disagree about transferred size suggestion here
(Chrome says undefined. Firefox says 300/150 * 25 = 50. See spec issue
above.) but it doesn't matter: this test asserts that the transferred size
suggestion is ignored, because of this from the spec (capitalization
added):
transferred size suggestion is ignored because there is a specified size.
In general, the content-based minimum size of a flex item is the smaller of
its content size suggestion and its specified size suggestion. However, if
the box has an aspect ratio AND NO specified size, its content-based
minimum size is the smaller of its content size suggestion and its
transferred size suggestion.
So here the content-based minimum size is min(300, 100) = 100.
So here the content-based minimum size is min(100px, 150px) = 100px
-->
<img src="support/300x150-green.png" style="width: 100px;">
<img src="support/300x150-green.png" style="width: 999px;">
</div>

0 comments on commit 2c83d2e

Please sign in to comment.