Skip to content

GitLab

T
tangled
Commit 35b382aa authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot
Browse files
Options

[css-flexbox] Apply min-height: auto to nested flexboxes again 

To avoid the previous regression (see analysis in bug), we force
layout in the case where we otherwise would get an outdated result.

Bug: 596743
Change-Id: I9cf47675f7fcd88f94b2fe76b46bceae17e36756
Reviewed-on: https://chromium-review.googlesource.com/1246730
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594752}
parent 5115783a
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 9 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 35b382aa
...@@ -1396,7 +1396,6 @@ crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-shrink-to ...@@ -1396,7 +1396,6 @@ crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-shrink-to
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline.html [ Skip ] crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/negative-flex-rounding-assert.html [ Skip ] crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/negative-flex-rounding-assert.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/negative-overflow.html [ Skip ] crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/negative-overflow.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/nested-flexbox-min-size-auto.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/nested-orthogonal-flexbox-relayout.html [ Skip ] crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/nested-orthogonal-flexbox-relayout.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/nested-stretch.html [ Skip ] crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/nested-stretch.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/order-painting.html [ Failure ] crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/order-painting.html [ Failure ]
...@@ -1516,6 +1515,7 @@ crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/fle ...@@ -1516,6 +1515,7 @@ crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/fle
crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-006.xht [ Skip ] crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-006.xht [ Skip ]
crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-007.xht [ Skip ] crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-007.xht [ Skip ]
crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-008.xht [ Skip ] crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-008.xht [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-009.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-001.xht [ Failure ] crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-001.xht [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-002.xht [ Failure ] crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-002.xht [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-003.xht [ Failure ] crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-003.xht [ Failure ]
......
third_party/WebKit/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto.html → third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-009.html
View file @ 35b382aa
<!DOCTYPE html> <!DOCTYPE html>
<link href="resources/flexbox.css" rel="stylesheet"> <title>Tests correct handling of min-height: auto with dynamic changes</title>
<script src="../../resources/testharness.js"></script> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<script src="../../resources/testharnessreport.js"></script> <link rel="author" title="Google Inc." href="http://www.google.com/">
<script src="../../resources/check-layout-th.js"></script> <link href="support/flexbox.css" rel="stylesheet">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style> <style>
#container { .container {
height: 300px; height: 300px;
outline: 2px solid black; outline: 2px solid black;
} }
...@@ -15,19 +18,37 @@ ...@@ -15,19 +18,37 @@
flex: 1; flex: 1;
background-color: green; background-color: green;
} }
#container2 .flexbox > * { flex-basis: 0; }
#container2 .column > * { flex-basis: auto; }
</style> </style>
<script> <script>
function change() { function change() {
var container = document.getElementById('container'); var container = document.getElementById('container');
container.offsetHeight; container.offsetHeight;
container.style.height = '80px'; container.style.height = '80px';
checkLayout('#container'); container = document.getElementById('container2');
container.offsetHeight;
container.style.height = '80px';
checkLayout('.container');
} }
</script> </script>
<body onload="change()"> <body onload="change()">
<p>Green rectangle should be entirely within the black rectangle</p> <p>Green rectangle should be entirely within the black rectangle</p>
<div id="log"></div> <div id="log"></div>
<div id="container"> <div id="container" class="container">
<div class="flexbox column" style="height: 100%;">
<div class="flexbox flex-one">
<div class="flexbox column">
<div class="flexbox column flex-one">
<div class="inner" data-expected-height="80">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="container2" class="container">
<div class="flexbox column" style="height: 100%;"> <div class="flexbox column" style="height: 100%;">
<div class="flexbox flex-one"> <div class="flexbox flex-one">
<div class="flexbox column"> <div class="flexbox column">
......
third_party/blink/renderer/core/layout/layout_flexible_box.cc
View file @ 35b382aa
...@@ -437,6 +437,14 @@ bool LayoutFlexibleBox::IsMultiline() const { ...@@ -437,6 +437,14 @@ bool LayoutFlexibleBox::IsMultiline() const {
return StyleRef().FlexWrap() != EFlexWrap::kNowrap; return StyleRef().FlexWrap() != EFlexWrap::kNowrap;
} }
bool LayoutFlexibleBox::ShouldApplyMinSizeAutoForChild(
const LayoutBox& child) const {
Length min = IsHorizontalFlow() ? child.StyleRef().MinWidth()
: child.StyleRef().MinHeight();
return min.IsAuto() && !child.ShouldApplySizeContainment() &&
MainAxisOverflowForChild(child) == EOverflow::kVisible;
}
Length LayoutFlexibleBox::FlexBasisForChild(const LayoutBox& child) const { Length LayoutFlexibleBox::FlexBasisForChild(const LayoutBox& child) const {
Length flex_length = child.StyleRef().FlexBasis(); Length flex_length = child.StyleRef().FlexBasis();
if (flex_length.IsAuto()) { if (flex_length.IsAuto()) {
...@@ -997,14 +1005,7 @@ MinMaxSize LayoutFlexibleBox::ComputeMinAndMaxSizesForChild( ...@@ -997,14 +1005,7 @@ MinMaxSize LayoutFlexibleBox::ComputeMinAndMaxSizesForChild(
// computeMainAxisExtentForChild can return -1 when the child has a // computeMainAxisExtentForChild can return -1 when the child has a
// percentage min size, but we have an indefinite size in that axis. // percentage min size, but we have an indefinite size in that axis.
sizes.min_size = std::max(LayoutUnit(), sizes.min_size); sizes.min_size = std::max(LayoutUnit(), sizes.min_size);
} else if (min.IsAuto() && !child.ShouldApplySizeContainment() && } else if (ShouldApplyMinSizeAutoForChild(child)) {
MainAxisOverflowForChild(child) == EOverflow::kVisible &&
!(IsColumnFlow() && child.IsFlexibleBox())) {
// TODO(cbiesinger): For now, we do not handle min-height: auto for nested
// column flexboxes. We need to implement
// https://drafts.csswg.org/css-flexbox/#intrinsic-sizes before that
// produces reasonable results. Tracking bug: https://crbug.com/581553
// css-flexbox section 4.5
LayoutUnit content_size = LayoutUnit content_size =
ComputeMainAxisExtentForChild(child, kMinSize, Length(kMinContent)); ComputeMainAxisExtentForChild(child, kMinSize, Length(kMinContent));
DCHECK_GE(content_size, LayoutUnit()); DCHECK_GE(content_size, LayoutUnit());
...@@ -1124,6 +1125,14 @@ LayoutUnit LayoutFlexibleBox::AdjustChildSizeForAspectRatioCrossAxisMinAndMax( ...@@ -1124,6 +1125,14 @@ LayoutUnit LayoutFlexibleBox::AdjustChildSizeForAspectRatioCrossAxisMinAndMax(
DISABLE_CFI_PERF DISABLE_CFI_PERF
FlexItem LayoutFlexibleBox::ConstructFlexItem(LayoutBox& child, FlexItem LayoutFlexibleBox::ConstructFlexItem(LayoutBox& child,
ChildLayoutType layout_type) { ChildLayoutType layout_type) {
if (layout_type == kLayoutIfNeeded && IsColumnFlow() &&
child.IsFlexibleBox() && ShouldApplyMinSizeAutoForChild(child)) {
// In this case, we have to force-layout to update the intrinsic height of
// our child; otherwise, it may be too big because it is based on previous
// flexing of a descendant, which would be a problem for applying
// min-size: auto.
layout_type = kForceLayout;
}
if (layout_type != kNeverLayout && ChildHasIntrinsicMainAxisSize(child)) { if (layout_type != kNeverLayout && ChildHasIntrinsicMainAxisSize(child)) {
// If this condition is true, then ComputeMainAxisExtentForChild will call // If this condition is true, then ComputeMainAxisExtentForChild will call
// child.IntrinsicContentLogicalHeight() and // child.IntrinsicContentLogicalHeight() and
......
third_party/blink/renderer/core/layout/layout_flexible_box.h
View file @ 35b382aa
...@@ -111,6 +111,7 @@ class CORE_EXPORT LayoutFlexibleBox : public LayoutBlock { ...@@ -111,6 +111,7 @@ class CORE_EXPORT LayoutFlexibleBox : public LayoutBlock {
bool IsColumnFlow() const; bool IsColumnFlow() const;
bool IsLeftToRightFlow() const; bool IsLeftToRightFlow() const;
bool IsMultiline() const; bool IsMultiline() const;
bool ShouldApplyMinSizeAutoForChild(const LayoutBox& child) const;
Length FlexBasisForChild(const LayoutBox& child) const; Length FlexBasisForChild(const LayoutBox& child) const;
LayoutUnit CrossAxisExtentForChild(const LayoutBox& child) const; LayoutUnit CrossAxisExtentForChild(const LayoutBox& child) const;
LayoutUnit CrossAxisIntrinsicExtentForChild(const LayoutBox& child) const; LayoutUnit CrossAxisIntrinsicExtentForChild(const LayoutBox& child) const;
......
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