Commit edb1aeb9 authored by David Grogan's avatar David Grogan Committed by Commit Bot

[FlexNG] Layout overflow:auto items before calculating intrinsic widths

This brings back the behavior from
https://chromium-review.googlesource.com/c/chromium/src/+/1978103 that
was lost in
https://chromium-review.googlesource.com/c/chromium/src/+/2027075 . Now,
if a flex item with overflow: auto gets a scrollbar, we add the width of
the scrollbar to the intrinsic size. Blocks has similar behavior but
gets there differently. This could cause performance degradation.

This fixes the "inner dimensions" test from
css3/flexbox/overflow-auto-resizes-correctly.html .


I removed the intrinsicHeightBox part of the test. It asked that we give
the item 100px height in this case:

<flexbox column height:auto>
  <item style="min-height: min-content; flex: 0 1 0;">
    <div style="min-height: 100px">

This requires laying out the item to determine what the min-content is.
Legacy does this, Firefox doesn't. NG doesn't do it for blocks, e.g. the
outer div gets 0 height here:

<div style="height:0px; min-height: min-content">
  <div style="height: 100px;">

Bug: 845235
Change-Id: I35ba43d63676798f7a632c33ead4e147ea36f34f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2058066
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744318}
parent 34378d9c
...@@ -666,6 +666,8 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild( ...@@ -666,6 +666,8 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild(
// css-flexbox section 4.5 // css-flexbox section 4.5
const Length& min = IsHorizontalFlow() ? child.StyleRef().MinWidth() const Length& min = IsHorizontalFlow() ? child.StyleRef().MinWidth()
: child.StyleRef().MinHeight(); : child.StyleRef().MinHeight();
// TODO(dgrogan): min.IsIntrinsic should also get past this check when in the
// item's block direction.
if (!min.IsAuto()) if (!min.IsAuto())
return false; return false;
...@@ -673,6 +675,8 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild( ...@@ -673,6 +675,8 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild(
if (StyleRef().IsDeprecatedWebkitBox()) if (StyleRef().IsDeprecatedWebkitBox())
return false; return false;
// TODO(dgrogan): MainAxisOverflowForChild == kClip also qualifies, not just
// kVisible.
return !child.ShouldApplySizeContainment() && return !child.ShouldApplySizeContainment() &&
MainAxisOverflowForChild(child) == EOverflow::kVisible; MainAxisOverflowForChild(child) == EOverflow::kVisible;
} }
......
...@@ -426,6 +426,11 @@ void NGFlexLayoutAlgorithm::ConstructAndAppendFlexItems() { ...@@ -426,6 +426,11 @@ void NGFlexLayoutAlgorithm::ConstructAndAppendFlexItems() {
// We want the child's min/max size in its writing mode, not ours. // We want the child's min/max size in its writing mode, not ours.
// We'll only ever use it if the child's inline axis is our main axis. // We'll only ever use it if the child's inline axis is our main axis.
NGConstraintSpace child_space = BuildSpaceForIntrinsicBlockSize(child); NGConstraintSpace child_space = BuildSpaceForIntrinsicBlockSize(child);
if (child.Style().OverflowBlockDirection() == EOverflow::kAuto) {
// Ensure this child has been laid out so its auto scrollbars are
// included in its intrinsic sizes.
IntrinsicBlockSizeFunc();
}
min_max_size = child.ComputeMinMaxSize( min_max_size = child.ComputeMinMaxSize(
child_style.GetWritingMode(), child_style.GetWritingMode(),
MinMaxSizeInput(content_box_size_.block_size), &child_space); MinMaxSizeInput(content_box_size_.block_size), &child_space);
...@@ -579,6 +584,8 @@ void NGFlexLayoutAlgorithm::ConstructAndAppendFlexItems() { ...@@ -579,6 +584,8 @@ void NGFlexLayoutAlgorithm::ConstructAndAppendFlexItems() {
const Length& min = is_horizontal_flow_ ? child.Style().MinWidth() const Length& min = is_horizontal_flow_ ? child.Style().MinWidth()
: child.Style().MinHeight(); : child.Style().MinHeight();
// TODO(dgrogan): min.IsIntrinsic should enter this block when it's in the
// item's block direction.
if (min.IsAuto()) { if (min.IsAuto()) {
if (algorithm_->ShouldApplyMinSizeAutoForChild(*child.GetLayoutBox())) { if (algorithm_->ShouldApplyMinSizeAutoForChild(*child.GetLayoutBox())) {
// TODO(dgrogan): This should probably apply to column flexboxes also, // TODO(dgrogan): This should probably apply to column flexboxes also,
......
...@@ -1489,7 +1489,6 @@ virtual/layout_ng_fragment_traversal/external/wpt/css/CSS2/text/* [ Skip ] ...@@ -1489,7 +1489,6 @@ virtual/layout_ng_fragment_traversal/external/wpt/css/CSS2/text/* [ Skip ]
# Flexbox in NG # Flexbox in NG
# #
# Fail in NG flex, pass in legacy flex. # Fail in NG flex, pass in legacy flex.
crbug.com/845235 virtual/layout_ng_flex_box/css3/flexbox/overflow-auto-resizes-correctly.html [ Failure ]
crbug.com/845235 virtual/layout_ng_flex_box/css3/flexbox/relpos-with-percentage-top.html [ Failure ] crbug.com/845235 virtual/layout_ng_flex_box/css3/flexbox/relpos-with-percentage-top.html [ Failure ]
crbug.com/845235 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-margin.html [ Failure ] crbug.com/845235 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-margin.html [ Failure ]
crbug.com/845235 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-order.html [ Failure ] crbug.com/845235 virtual/layout_ng_flex_box/external/wpt/css/css-flexbox/hittest-overlapping-order.html [ Failure ]
......
...@@ -23,11 +23,6 @@ ...@@ -23,11 +23,6 @@
overflow-y: auto; overflow-y: auto;
max-height: 200px; max-height: 200px;
} }
.intrinsic-height-box {
min-height: -webkit-min-content;
overflow: auto;
flex-basis: 0;
}
.rect { .rect {
min-height: 100px; min-height: 100px;
min-width: 100px; min-width: 100px;
...@@ -43,12 +38,6 @@ ...@@ -43,12 +38,6 @@
</div> </div>
</div> </div>
<div class="vflex">
<div class="intrinsic-height-box">
<div class="rect" style="min-width: 300px"></div>
</div>
</div>
<div class="hflex"> <div class="hflex">
<div class="vbox"> <div class="vbox">
<div class="rect" style="min-height: 300px;"></div> <div class="rect" style="min-height: 300px;"></div>
...@@ -73,11 +62,6 @@ ...@@ -73,11 +62,6 @@
assert_equals(hbox.clientHeight, hbox.scrollHeight); assert_equals(hbox.clientHeight, hbox.scrollHeight);
}, 'hbox dimensions'); }, 'hbox dimensions');
var intrinsicHeightBox = document.querySelector('.intrinsic-height-box');
test(function() {
assert_equals(intrinsicHeightBox.clientHeight, intrinsicHeightBox.scrollHeight);
}, 'intrinsicHeightBox dimensions');
var measure = document.getElementById('measure'); var measure = document.getElementById('measure');
var scrollbarSize = measure.offsetWidth - measure.clientWidth; var scrollbarSize = measure.offsetWidth - measure.clientWidth;
test(function() { test(function() {
......
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