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(
// css-flexbox section 4.5
const Length& min = IsHorizontalFlow() ? child.StyleRef().MinWidth()
: child.StyleRef().MinHeight();
// TODO(dgrogan): min.IsIntrinsic should also get past this check when in the
// item's block direction.
if (!min.IsAuto())
return false;
......@@ -673,6 +675,8 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild(
if (StyleRef().IsDeprecatedWebkitBox())
return false;
// TODO(dgrogan): MainAxisOverflowForChild == kClip also qualifies, not just
// kVisible.
return !child.ShouldApplySizeContainment() &&
MainAxisOverflowForChild(child) == EOverflow::kVisible;
}
......
......@@ -426,6 +426,11 @@ void NGFlexLayoutAlgorithm::ConstructAndAppendFlexItems() {
// 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.
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(
child_style.GetWritingMode(),
MinMaxSizeInput(content_box_size_.block_size), &child_space);
......@@ -579,6 +584,8 @@ void NGFlexLayoutAlgorithm::ConstructAndAppendFlexItems() {
const Length& min = is_horizontal_flow_ ? child.Style().MinWidth()
: child.Style().MinHeight();
// TODO(dgrogan): min.IsIntrinsic should enter this block when it's in the
// item's block direction.
if (min.IsAuto()) {
if (algorithm_->ShouldApplyMinSizeAutoForChild(*child.GetLayoutBox())) {
// 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 ]
# Flexbox in NG
#
# 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/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 ]
......
......@@ -23,11 +23,6 @@
overflow-y: auto;
max-height: 200px;
}
.intrinsic-height-box {
min-height: -webkit-min-content;
overflow: auto;
flex-basis: 0;
}
.rect {
min-height: 100px;
min-width: 100px;
......@@ -43,12 +38,6 @@
</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="vbox">
<div class="rect" style="min-height: 300px;"></div>
......@@ -73,11 +62,6 @@
assert_equals(hbox.clientHeight, hbox.scrollHeight);
}, '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 scrollbarSize = measure.offsetWidth - measure.clientWidth;
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