[css-grid] Use max size to compute auto repeat tracks

When available size is indefinite we should use max size to compute
the number of auto repeat tracks.

The spec text is very clear
(https://drafts.csswg.org/css-grid/#auto-repeat):
> When auto-fill is given as the repetition number,
> if the grid container has a definite size or **max size**
> in the relevant axis...

So far we were not doing that for widths,
in this patch we modify LayoutGrid::ComputeAutoRepeatTracksCount()
to do the same than for heights.

We also take advantage to fix problems related to min|max sizes
and box-sizing property, that were inconsistent for columns and rows.

BUG=957932
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
TEST=external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html

Change-Id: I9cce24d38f1a00bea8fa04e42645c777c57e486e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1588388Reviewed-by: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#658809}

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

@@ -579,32 +579,51 @@ size_t LayoutGrid::ComputeAutoRepeatTracksCount(
   if (!auto_repeat_track_list_length)
     return 0;
 
-  if (!is_row_axis) {
-    if (!available_size) {
-      const Length& max_length = StyleRef().LogicalMaxHeight();
-      if (!max_length.IsMaxSizeNone()) {
-        available_size = ConvertLayoutUnitToOptional(
-            ConstrainContentBoxLogicalHeightByMinMax(
-                AvailableLogicalHeightUsing(max_length,
-                                            kExcludeMarginBorderPadding),
-                LayoutUnit(-1)));
+  bool needs_to_fulfill_minimum_size = false;
+  if (!available_size) {
+    const Length& max_size = is_row_axis ? StyleRef().LogicalMaxWidth()
+                                         : StyleRef().LogicalMaxHeight();
+    base::Optional<LayoutUnit> containing_block_available_size;
+    LayoutUnit available_max_size = LayoutUnit();
+    if (max_size.IsSpecified()) {
+      if (max_size.IsPercentOrCalc()) {
+        containing_block_available_size =
+            is_row_axis ? ContainingBlockLogicalWidthForContent()
+                        : ContainingBlockLogicalHeightForContent(
+                              kExcludeMarginBorderPadding);
       }
+      LayoutUnit max_size_value = ValueForLength(
+          max_size, containing_block_available_size.value_or(LayoutUnit()));
+      available_max_size =
+          is_row_axis
+              ? AdjustContentBoxLogicalWidthForBoxSizing(max_size_value)
+              : AdjustContentBoxLogicalHeightForBoxSizing(max_size_value);
     }
-  }
 
-  bool needs_to_fulfill_minimum_size = false;
-  if (!available_size) {
     const Length& min_size = is_row_axis ? StyleRef().LogicalMinWidth()
                                          : StyleRef().LogicalMinHeight();
-    if (!min_size.IsSpecified())
+    if (!available_max_size && !min_size.IsSpecified())
       return auto_repeat_track_list_length;
 
-    LayoutUnit containing_block_available_size =
-        is_row_axis ? ContainingBlockLogicalWidthForContent()
-                    : ContainingBlockLogicalHeightForContent(
-                          kExcludeMarginBorderPadding);
-    available_size = ValueForLength(min_size, containing_block_available_size);
-    needs_to_fulfill_minimum_size = true;
+    LayoutUnit available_min_size = LayoutUnit();
+    if (min_size.IsSpecified()) {
+      if (!containing_block_available_size && min_size.IsPercentOrCalc()) {
+        containing_block_available_size =
+            is_row_axis ? ContainingBlockLogicalWidthForContent()
+                        : ContainingBlockLogicalHeightForContent(
+                              kExcludeMarginBorderPadding);
+      }
+      LayoutUnit min_size_value = ValueForLength(
+          min_size, containing_block_available_size.value_or(LayoutUnit()));
+      available_min_size =
+          is_row_axis
+              ? AdjustContentBoxLogicalWidthForBoxSizing(min_size_value)
+              : AdjustContentBoxLogicalHeightForBoxSizing(min_size_value);
+      if (!max_size.IsSpecified())
+        needs_to_fulfill_minimum_size = true;
+    }
+
+    available_size = std::max(available_min_size, available_max_size);
   }
 
   LayoutUnit auto_repeat_tracks_size;

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  max-width: 300px;
+  max-height: 200px;
+}
+.border {
+  border: 10px solid;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" data-expected-width="300" data-expected-height="170">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+  <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  max-width: 50%;
+  max-height: 80%;
+}
+.wrapper {
+  width: 600px;
+  height: 250px;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <div class="grid" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks with min and max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks don't overflow the grid container size when max size is definite, even if min size is bigger than that.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  max-width: 100px;
+  min-width: 250px;
+  max-height: 50px;
+  min-height: 125px;
+  float: left;
+}
+.border {
+  border: 10px solid;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and min sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  min-width: 300px;
+  min-height: 200px;
+  float: left;
+}
+.border {
+  border: 10px solid;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  min-width: 50%;
+  min-height: 80%;
+  float: left;
+}
+.wrapper {
+  width: 600px;
+  height: 250px;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <div class="grid" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>