forked from mirrors/gecko-dev
9ab9eba42f
Automatic update from web-platform-tests
[css-flex] Ignore items' heights for intrinsic block size calculation
Blink currently makes this flex item 200px tall. Firefox gives it the
correct height of 100px.
<div style="display: flex; flex-direction: column">
<div style="flex-basis: 100px; height: 200px">
<div style="height: 100%">
Blink was letting the inner div's height resolve against the flex item's
200px, giving the flex item an automatic minimum size of 200px, even
though the min-content size is supposed to be calculated with the item
having an 'auto' size. Meaning we should ignore the item's 200px height.
To keep the 200px from having an effect, this patch broadens the
definition of ConstraintSpace().IsFixedBlockSizeDefinite. It no longer
has to accompany a FixedBlockSize. It now means that the element is to
be laid out as if it has an auto height.
Flexbox now sets this constraint on items when the flexbox needs the
item's intrinsic block size.
Fixed: 1033476, 607585
Change-Id: I0376e8ec71ef5a6a71989a8bdda63b39718852e8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2640774
Auto-Submit: David Grogan <dgrogan@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#848159}
--
wpt-commits: 0d4dd890e63a253602d69e4e12ddd9efc006ad08
wpt-pr: 27269
16 lines
873 B
HTML
16 lines
873 B
HTML
<!DOCTYPE html>
|
|
<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="match" href="../reference/ref-filled-green-100px-square-only.html" />
|
|
<meta name="assert" content="Child in nested column flexbox's grows to its parent's flex height, not its parent's specified height.">
|
|
<link href="support/flexbox.css" rel="stylesheet">
|
|
|
|
<p>Test passes if there is a filled green square.</p>
|
|
|
|
<div class="flexbox column" style="height: 100px;">
|
|
<!-- min-height: auto resolves to 0 because content-size suggestion is 0. -->
|
|
<div class="flexbox column" style="flex: 1 0 0px; height: 200px">
|
|
<!-- min-height: auto resolves to 0 because content-size suggestion is 0. -->
|
|
<div style="flex: 1 0 0px; width: 100px; background: green;"></div>
|
|
</div>
|
|
</div>
|