[css-flexbox] Enable min-height: auto even for items with % children

We can just set an override containing block height to ensure that
percentages resolve to auto, as desired.

This resolved a long-standing bug we had and improves compat with
Firefox.

Bug: 998080
Change-Id: I43510e69f360c32d2739d9514a659ca517ccfd7d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1786297
Commit-Queue: Emil A Eklund <eae@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#694313}

third_party/blink/renderer/core/html/forms/resources/color_picker.css

@@ -17,6 +17,7 @@ color-picker {
 
 visual-color-picker {
   height: 59%;
+  min-height: 0;
 }
 
 color-well {
@@ -90,6 +91,7 @@ hue-slider > color-selection-ring {
 
 manual-color-picker {
   height: 28%;
+  min-height: 0;
 }
 
 color-value-container:not(.hidden-color-value-container) {
@@ -161,6 +163,7 @@ submission-controls {
   display: flex;
   flex-direction: row;
   height: 13%;
+  min-height: 0;
 }
 
 #submission-controls-padding {

third_party/blink/renderer/core/layout/flexible_box_algorithm.cc

@@ -592,15 +592,6 @@ bool FlexLayoutAlgorithm::ShouldApplyMinSizeAutoForChild(
   if (!min.IsAuto())
     return false;
 
-  // TODO(crbug.com/927066): We calculate an incorrect intrinsic logical height
-  // when percentages are involved, so for now don't apply min-height: auto
-  // in such cases. (This is only a problem if the child has a definite height)
-  const LayoutBlock* child_block = DynamicTo<LayoutBlock>(child);
-  if (IsColumnFlow() && child_block &&
-      child_block->HasPercentHeightDescendants() &&
-      child_block->HasDefiniteLogicalHeight())
-    return false;
-
   return !child.ShouldApplySizeContainment() &&
          !child.DisplayLockInducesSizeContainment() &&
          MainAxisOverflowForChild(child) == EOverflow::kVisible;

third_party/blink/renderer/core/layout/layout_flexible_box.cc

@@ -945,6 +945,10 @@ void LayoutFlexibleBox::LayoutFlexItems(bool relayout_children,
 
     ConstructAndAppendFlexItem(&flex_algorithm, *child, layout_type);
   }
+  // Because we set the override containing block logical height to -1 in
+  // ConstructAndAppendFlexItem, any value we may have cached for definiteness
+  // is incorrect; just reset it here.
+  has_definite_height_ = SizeDefiniteness::kUnknown;
 
   LayoutUnit cross_axis_offset = FlowAwareContentInsetBefore();
   LayoutUnit logical_width = LogicalWidth();
@@ -1187,9 +1191,19 @@ void LayoutFlexibleBox::ConstructAndAppendFlexItem(
     UpdateBlockChildDirtyBitsBeforeLayout(layout_type == kForceLayout, child);
     if (child.NeedsLayout() || layout_type == kForceLayout ||
         !intrinsic_size_along_main_axis_.Contains(&child)) {
+      // Don't resolve percentages in children. This is especially important
+      // for the min-height calculation, where we want percentages to be
+      // treated as auto. For flex-basis itself, this is not a problem because
+      // by definition we have an indefinite flex basis here and thus
+      // percentages should not resolve.
+      if (IsHorizontalWritingMode() == child.IsHorizontalWritingMode())
+        child.SetOverrideContainingBlockContentLogicalHeight(LayoutUnit(-1));
+      else
+        child.SetOverrideContainingBlockContentLogicalWidth(LayoutUnit(-1));
       child.ClearOverrideSize();
       child.ForceLayout();
       CacheChildMainSize(child);
+      child.ClearOverrideContainingBlockContentSize();
     }
   }
 

third_party/blink/web_tests/TestExpectations

@@ -1948,6 +1948,7 @@ crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/fle
 crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-007.xht [ Failure ]
 crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-008.xht [ Failure ]
 crbug.com/996474 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-009.html [ Pass Failure ]
+crbug.com/998080 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-012.html [ Failure ]
 crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-015.html [ Failure ]
 crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-005.xht [ Failure ]
 crbug.com/249112 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/flex-minimum-width-flex-items-007.xht [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-017.html

+<!DOCTYPE html>
+<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=998080" />
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+<style>
+.flexbox {
+  display: flex;
+  width: 100px;
+  height: 0;
+  flex-direction: column;
+}
+.item {
+  /* Because flex-basis is 0, we rely on min-height to size this item.
+   * We give it an explicit height so that percentages have a chance of
+   * resolving. We can't use 0 for the height because the min-height is
+   * basically min(height, min-content).  */
+  flex: 0 1 0px;
+  height: 100px;
+  background: green;
+}
+.percentage {
+  height: 100%;
+}
+.fixed {
+  height: 100px;
+}
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="flexbox">
+    <div class="item">
+        <div class="percentage">
+          <div class="fixed"></div>
+        </div>
+    </div>
+</div>
+

third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-minimum-height-flex-items-018.html

+<!DOCTYPE html>
+<title>CSS Flexbox: min-height: auto with flex items containing percentage-sized children</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=998080" />
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+<style>
+.flexbox {
+  display: flex;
+  width: 100px;
+  height: 0;
+  flex-direction: column;
+}
+.item {
+  /* Because the flexbox has height:0, this would flex-shrink to 0. So we rely
+   * on min-height: auto to get a nonzero height.  */
+  height: 100px;
+  background: green;
+}
+.percentage {
+  height: 100%;
+}
+.fixed {
+  height: 100px;
+}
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="flexbox">
+    <div class="item">
+        <div class="percentage">
+          <div class="fixed"></div>
+        </div>
+    </div>
+</div>
+