CSSIntrinsicSize: Add LayoutGrid implementation for intrinsic-size.

This patch implements intrinsic-size to work with a grid container.
The general strategy is to treat intrinsic-size, if specified in a direction,
as size containment in that direction while overriding the correct size.

Adds tests for the both intrinsic dimensions specified, as well as
only one specified and the other left as legacy to ensure that the correct
override is picked in the code.

R=rego@igalia.com, chrishtr@chromium.org

Bug: 991096
Change-Id: I1eefda7ae5288442716eb19cf945770cba2f1dca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1893734Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: vmpstr <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711936}

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

@@ -322,6 +322,9 @@ void LayoutGrid::UpdateBlockLayout(bool relayout_children) {
     if (CachedHasDefiniteLogicalHeight()) {
       ComputeTrackSizesForDefiniteSize(
           kForRows, AvailableLogicalHeight(kExcludeMarginBorderPadding));
+    } else if (HasOverrideIntrinsicContentLogicalHeight()) {
+      ComputeTrackSizesForDefiniteSize(kForRows,
+                                       OverrideIntrinsicContentLogicalHeight());
     } else {
       ComputeTrackSizesForIndefiniteSize(track_sizing_algorithm_, kForRows);
     }
@@ -504,6 +507,12 @@ void LayoutGrid::ComputeIntrinsicLogicalWidths(
   min_logical_width = scrollbar_width;
   max_logical_width = scrollbar_width;
 
+  if (HasOverrideIntrinsicContentLogicalWidth()) {
+    min_logical_width += OverrideIntrinsicContentLogicalWidth();
+    max_logical_width = min_logical_width;
+    return;
+  }
+
   std::unique_ptr<Grid> grid = Grid::Create(this);
   GridTrackSizingAlgorithm algorithm(this, *grid);
   PlaceItemsOnGrid(algorithm, base::nullopt);
@@ -521,7 +530,6 @@ void LayoutGrid::ComputeIntrinsicLogicalWidths(
     }
   }
 
-  // TODO(crbug.com/953915): Handle display-locked grid sizing.
   ComputeTrackSizesForIndefiniteSize(algorithm, kForColumns);
 
   size_t number_of_tracks = algorithm.Tracks(kForColumns).size();
@@ -544,6 +552,15 @@ void LayoutGrid::ComputeTrackSizesForIndefiniteSize(
 #endif
 }
 
+base::Optional<LayoutUnit> LayoutGrid::OverrideIntrinsicContentLogicalSize(
+    GridTrackSizingDirection direction) const {
+  if (direction == kForColumns && HasOverrideIntrinsicContentLogicalWidth())
+    return OverrideIntrinsicContentLogicalWidth();
+  if (direction == kForRows && HasOverrideIntrinsicContentLogicalHeight())
+    return OverrideIntrinsicContentLogicalHeight();
+  return base::nullopt;
+}
+
 LayoutUnit LayoutGrid::OverrideContainingBlockContentSizeForChild(
     const LayoutBox& child,
     GridTrackSizingDirection direction) {
@@ -565,6 +582,9 @@ size_t LayoutGrid::ComputeAutoRepeatTracksCount(
     base::Optional<LayoutUnit> available_size) const {
   DCHECK(!available_size || available_size.value() != -1);
   bool is_row_axis = direction == kForColumns;
+  // TODO(vmpstr): If we have available_size or min-size specified (as
+  // determined below), then should still repeat tracks to fill the available
+  // space.
   if (ShouldApplySizeContainment() &&
       ((is_row_axis &&
         StyleRef().GridAutoRepeatColumnsType() == AutoRepeatType::kAutoFit) ||
@@ -600,10 +620,15 @@ size_t LayoutGrid::ComputeAutoRepeatTracksCount(
               : AdjustContentBoxLogicalHeightForBoxSizing(max_size_value);
     }
 
+    base::Optional<LayoutUnit> intrinsic_size_override =
+        OverrideIntrinsicContentLogicalSize(direction);
+
     const Length& min_size = is_row_axis ? StyleRef().LogicalMinWidth()
                                          : StyleRef().LogicalMinHeight();
-    if (!available_max_size && !min_size.IsSpecified())
+    if (!available_max_size && !min_size.IsSpecified() &&
+        !intrinsic_size_override) {
       return auto_repeat_track_list_length;
+    }
 
     LayoutUnit available_min_size = LayoutUnit();
     if (min_size.IsSpecified()) {
@@ -619,11 +644,32 @@ size_t LayoutGrid::ComputeAutoRepeatTracksCount(
           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);
+    // We can treat the intrinsic-size similar to min-size when filling the
+    // remainder of space. That is, we should fill the intrinsic size fully.
+    // TODO(vmpstr): What happens in cases where max_size is specified but is
+    // smaller than min_size? The grid container would be sized to min_size but
+    // needs_to_fulfill_minimum_size below would be false.
+    if (!max_size.IsSpecified() &&
+        (min_size.IsSpecified() || intrinsic_size_override)) {
+      needs_to_fulfill_minimum_size = true;
+    }
+
+    // Now we need to determine the available size.
+    // We start with the maximum of all of the values. Then, we need to see if
+    // max-size is breached. If it is, then we can shrink the size back up to
+    // the max of min-size and max-size. This is because we can ignore
+    // intrinsic-size in this situation since the min- and max- sizes take
+    // priority.
+    auto available_intrinsic_size =
+        intrinsic_size_override.value_or(LayoutUnit());
+    available_size =
+        std::max(std::max(available_min_size, available_intrinsic_size),
+                 available_max_size);
+    if (max_size.IsSpecified() && available_max_size < available_size) {
+      available_size = std::max(available_min_size, available_max_size);
+    }
   }
 
   LayoutUnit auto_repeat_tracks_size;
@@ -684,8 +730,10 @@ size_t LayoutGrid::ComputeAutoRepeatTracksCount(
 
   // Provided the grid container does not have a definite size or max-size in
   // the relevant axis, if the min size is definite then the number of
-  // repetitions is the largest possible positive integer that fulfills that
-  // minimum requirement.
+  // repetitions is the smallest positive integer that fulfills that
+  // minimum requirement. If after determining the repetitions, we still have
+  // free space, then we need one more repetition to ensure we fill at least all
+  // of the space.
   if (needs_to_fulfill_minimum_size && free_space)
     ++repetitions;
 

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

@@ -179,6 +179,9 @@ class LayoutGrid final : public LayoutBlock {
   GridTrackSizingDirection AutoPlacementMajorAxisDirection() const;
   GridTrackSizingDirection AutoPlacementMinorAxisDirection() const;
 
+  base::Optional<LayoutUnit> OverrideIntrinsicContentLogicalSize(
+      GridTrackSizingDirection) const;
+
   void ComputeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm&,
                                           GridTrackSizingDirection) const;
   void ComputeTrackSizesForDefiniteSize(GridTrackSizingDirection,

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-022-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  box-sizing: content-box;
+  width: 70px;
+  height: 80px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-022.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-022-ref.html">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  intrinsic-size: 70px 80px;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-023-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 1fr 2fr / 3fr 4fr;
+  box-sizing: content-box;
+  width: 70px;
+  height: 80px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-023.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-023-ref.html">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 1fr 2fr / 3fr 4fr;
+  intrinsic-size: 70px 80px;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-024-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size, large size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  box-sizing: content-box;
+  width: 200px;
+  height: 300px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-024.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size, large size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-024-ref.html">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  intrinsic-size: 200px 300px;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-025-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size, auto-fit</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  width: 70px;
+  height: 80px;
+  box-sizing: content-box;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
+}
+.two {
+  grid-template: 1fr 2fr / repeat(auto-fit, 15px);
+}
+.three {
+  grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
+}
+
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-025.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size, auto-fit</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-025-ref.html">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  intrinsic-size: 70px 80px;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
+}
+.two {
+  grid-template: 1fr 2fr / repeat(auto-fit, 15px);
+}
+.three {
+  grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
+}
+
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-026-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid auto-fit, min- max- size interactions</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  display: inline-grid;
+  border: 1px solid black;
+  grid-template-columns: repeat(auto-fit, 100px);
+}
+.one {
+  width: 200px;
+}
+.two {
+  width: 200px;
+}
+.three {
+  width: 200px;
+}
+.four {
+  width: 150px;
+}
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<p>min-width larger than intrinsic-width:
+<div class="grid one">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width smaller than intrinsic-width:
+<div class="grid two">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>max-width ignored since min-width is larger:
+<div class="grid three">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width shrinks grid since it overrides intrinsic-width:
+<div class="grid four">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-026.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid auto-fit, min- max- size interactions</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-026-ref.html">
+
+<style>
+.grid {
+  display: inline-grid;
+  border: 1px solid black;
+  grid-template-columns: repeat(auto-fit, 100px);
+}
+.one {
+  intrinsic-width: 100px;
+  min-width: 200px;
+}
+.two {
+  intrinsic-width: 200px;
+  min-width: 100px;
+}
+.three {
+  intrinsic-width: 100px;
+  min-width: 200px;
+  max-width: 150px;
+}
+.four {
+  intrinsic-width: 200px;
+  min-width: 100px;
+  max-width: 150px;
+}
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<p>min-width larger than intrinsic-width:
+<div class="grid one">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width smaller than intrinsic-width:
+<div class="grid two">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>max-width ignored since min-width is larger:
+<div class="grid three">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width shrinks grid since it overrides intrinsic-width:
+<div class="grid four">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-005-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  box-sizing: content-box;
+  width: 70px;
+  height: 80px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div class=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-005.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-with-legacy-005-ref.html">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  intrinsic-size: legacy 80px;
+  width: 70px;
+}
+.two {
+  intrinsic-size: 70px legacy;
+  height: 80px;
+  width: min-content;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-006-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 1fr 2fr / 3fr 4fr;
+  box-sizing: content-box;
+  width: 70px;
+  height: 80px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div class=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-006.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-with-legacy-006-ref.html">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 1fr 2fr / 3fr 4fr;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  intrinsic-size: legacy 80px;
+  width: 70px;
+}
+.two {
+  intrinsic-size: 70px legacy;
+  width: min-content;
+  height: 80px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-007-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size, large size with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  box-sizing: content-box;
+  width: 200px;
+  height: 300px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div class=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-007.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid definite size, large size with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-with-legacy-007-ref.html">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  intrinsic-size: legacy 300px;
+  width: 200px;
+}
+.two {
+  intrinsic-size: 200px legacy;
+  width: max-content;
+  height: 300px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-008-ref.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size, auto-fit with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  width: 70px;
+  height: 80px;
+  box-sizing: content-box;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
+}
+.two {
+  grid-template: 1fr 2fr / repeat(auto-fit, 15px);
+}
+.three {
+  grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
+}
+
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>

third_party/blink/web_tests/wpt_internal/css/css-intrinsic-size/intrinsic-size-with-legacy-008.html

+<!doctype html>
+<meta charset="utf8">
+<title>CSS intrinsic-size: grid indefinite size, auto-fit with legacy</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="intrinsic-size-with-legacy-008-ref.html">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
+}
+.two {
+  grid-template: 1fr 2fr / repeat(auto-fit, 15px);
+}
+.three {
+  grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
+}
+.width {
+  intrinsic-size: 70px legacy;
+  width: max-content;
+  height: 80px;
+}
+.height {
+  intrinsic-size: legacy 80px;
+  width: 70px;
+}
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<div class="grid one width">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two width">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three width">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid one height">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two height">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three height">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>