[css-flexbox] ChildIntrinsicLogicalWidth needs to constrain by min/max

{Min,Max}PreferredLogicalWidth only constrains the size by the min/max-width if it is a fixed value. However, ChildIntrinsicLogicalWidth needs to constrain even for percentages and others. R=mstensho@chromium.org Bug: 935022 Change-Id: I3f5eff5e6f8e99484185635e44e3afa426c741fb Reviewed-on: https://chromium-review.googlesource.com/c/1484854 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#635190}

[css-flexbox] ChildIntrinsicLogicalWidth needs to constrain by min/max
{Min,Max}PreferredLogicalWidth only constrains the size by the min/max-width if it is a fixed value. However, ChildIntrinsicLogicalWidth needs to constrain even for percentages and others. R=mstensho@chromium.org Bug: 935022 Change-Id: I3f5eff5e6f8e99484185635e44e3afa426c741fb Reviewed-on: https://chromium-review.googlesource.com/c/1484854 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#635190}
32a115f8 · Christian Biesinger · Commit Bot · a55c7bb9 · 32a115f8 · 32a115f8
Commit 32a115f8 authored Feb 25, 2019 by Christian Biesinger Committed by Commit Bot Feb 25, 2019
2 changed files
--- a/third_party/blink/renderer/core/layout/layout_flexible_box.cc
+++ b/third_party/blink/renderer/core/layout/layout_flexible_box.cc
@@ -523,10 +523,12 @@ LayoutUnit LayoutFlexibleBox::ChildIntrinsicLogicalWidth(
  // If our height is auto, make sure that our returned height is unaffected by
  // earlier layouts by returning the shrink-to-fit size.
  if (!CrossAxisLengthIsDefinite(child, child.StyleRef().LogicalWidth())) {
+    LayoutUnit available_size =
+        ContentLogicalWidth() - child.MarginLogicalWidth();
    MinMaxSize sizes{child.MinPreferredLogicalWidth(),
                     child.MaxPreferredLogicalWidth()};
-    return sizes.ShrinkToFit(ContentLogicalWidth() -
-                             child.MarginLogicalWidth());
+    return child.ConstrainLogicalWidthByMinMax(
+        sizes.ShrinkToFit(available_size), available_size, this);
  }

  return child.LogicalWidth();

--- a/third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-wrap-005.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-wrap-005.html
+<!DOCTYPE html>
+<link rel="author" title="Google LLC" href="http://www.google.com" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
+<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+<meta name="assert" content="The flexbox here should have one flex line, 100px by 100px. The flex items overflow but are transparent." />
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<!-- This makes sure that we only see green if the flex items are sized correctly -->
+<div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
+
+<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 200px; height: 100px; line-height: 20px; align-content: flex-start;">
+  <div style="background-color: red; height: 100px; max-width: 50%; align-self: center;">
+    <!-- These zero-height divs give the flex item a min-content width of
+         50px and a max-content width of 250px -->
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+    <div style="width: 50px; display: inline-block;"></div>
+  </div>
+</div>