Skip to content

GitLab

T
tangled
Commit 43043c98 authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot
Browse files
Options

[css-flexbox] Do layout for block axis intrinsic sizes 

In the block axis, we do have to do layout for {min,max,fit}-content
so we can determine the intrinsic size. MainAxisLengthIsDefinite here
is called from ConstructAndAppendFlexItem via ChildHasIntrinsicMainAxisSize
(which needs a better name).

Bug: 968940
Change-Id: If74e6098280077fefe607e2c5b1f70f133ca1032
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1641510Reviewed-by: default avatarEmil A Eklund <eae@chromium.org>
Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665663}
parent 8449f47c
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 0 deletions
third_party/blink/renderer/core/layout/layout_flexible_box.cc
View file @ 43043c98
...@@ -732,6 +732,8 @@ bool LayoutFlexibleBox::MainAxisLengthIsDefinite(const LayoutBox& child, ...@@ -732,6 +732,8 @@ bool LayoutFlexibleBox::MainAxisLengthIsDefinite(const LayoutBox& child,
bool add_to_cb) const { bool add_to_cb) const {
if (flex_basis.IsAuto()) if (flex_basis.IsAuto())
return false; return false;
if (IsColumnFlow() && flex_basis.IsIntrinsic())
return false;
if (flex_basis.IsPercentOrCalc()) { if (flex_basis.IsPercentOrCalc()) {
if (!IsColumnFlow() || has_definite_height_ == SizeDefiniteness::kDefinite) if (!IsColumnFlow() || has_definite_height_ == SizeDefiniteness::kDefinite)
return true; return true;
......
third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-height-min-content.html 0 → 100644
View file @ 43043c98
<!DOCTYPE html>
<title>CSS Flexbox Test: height: min-content is sized correctly</title>
<link rel="author" title="Google LLC" href="http://www.google.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<style>
#flex {
display: flex;
flex-direction: column;
width: 100px;
}
#item {
min-height: 30px;
height: min-content;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flex">
<div id="item">
<div style="height: 100px; width: 100px;"></div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment