Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 16:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1642264 [wpt PR 23886] - [FlexNG] Treat specified intrinsic block size as auto for min-size: auto, a=testonly

Browse Source 
Automatic update from web-platform-tests
[FlexNG] Treat specified intrinsic block size as auto for min-size: auto

Previously FlexNG would give the item in this example min-height: 0, not
whatever the min-size: auto algorithm dictated.

<div style="display: flex; flex-direction: column">
  <div style="min-height: min-content">
    ...

There's still a behavior difference from legacy flex containers because
they honor min-height: min-content[1]. NG always treats them as auto[2],
flex-minimum-height-flex-items-023.html demonstrates this. Looks like
this case already differs between Firefox and legacy, so hopefully
compat problems between FlexNG and legacy are few. It's still
unfortunate to introduce a third behavior for this case, even if the new
behavior is spec compliant.

[1] https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/layout/layout_box.cc;l=4039;drc=feef24515266f41efe38da79056a216a8ae9d459
[2] https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/layout/ng/ng_length_utils.cc;l=74;drc=feef24515266f41efe38da79056a216a8ae9d459

Bug: 1088223
Change-Id: I17f5f5dd55b159da04e9693c0992c9a635862eb1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2224599
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#774967}

--

wpt-commits: 265d93de89004a0670cada12b1de5cc49157659b
wpt-pr: 23886
This commit is contained in:
David Grogan 2020-06-10 11:26:52 +00:00 committed by moz-wptsync-bot
parent 10c432b5fd
commit 772061a467
2 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<title>Flex minimum height of image with intrinsic min-height specified</title>
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" />
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
<link rel="bookmark" href="https://crbug.com/1088223">
<meta name="assert" content="Flex uses automatic minimum sizes when item specifies min-height:intrinsic, because that is treated as auto.">
<p>Test passes if there is a filled green square.</p>
<!--
Here's the spec trail why the height of this item is 100px.
1. The column flexbox has height:0, and the item has flex-shrink: 1. So
min-height will determine the item's flexed height.
2. The min-content value of the min-height property is equivalent to the
automatic size, per https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content,
because it's in the item's block dimension. (Blink legacy flex disagrees here)
3. Per https://drafts.csswg.org/css-flexbox/#min-size-auto, the used value of a
main axis automatic minimum size on a flex item that is not a scroll container
is a content-based minimum size.
4. The content-based min size of this item is min(content size suggestion,
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.
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
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.
-->
<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;" />
</div>

18
testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-024.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Flex minimum height with intrinsic min-height specified</title>
<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" />
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
<link rel="bookmark" href="https://crbug.com/1088223">
<meta name="assert" content="Flex uses automatic minimum sizes when item specifies min-height:intrinsic, because that is treated as auto.">
<p>Test passes if there is a filled green square.</p>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-basis: 0; min-height: min-content;">
<div style="background: green;">
<div style="height: 100px; width: 100px;"></div>
</div>
</div>
</div>