[css-grid] Exclude implicit grid tracks from the resolved value

https://github.com/w3c/csswg-drafts/issues/4475 resolved to try to stop
including implicit tracks in the resolved value of grid-template-columns
and grid-template-rows.

This implies that the resolved values will have less information now,
which affects lots of tests. I have edited them depending on the case:
 - When the size of the track was irrelevant (e.g. just checking whether
   some value was syntactically valid), I have just updated the expected
   value.
 - When the size of the track was relevant, but it wasn't important for
   the tracks to be implicit, I have made them explicit in order to get
   the same value.
 - When the test was about the sizes of implicit tracks, I have added
   new checks for the size and position of the grid items.

Intent to Implement and Ship:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/EKvyx2lZJXI

Spec: https://drafts.csswg.org/css-grid/#resolved-track-list

Bug: 1024927

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

third_party/blink/renderer/core/css/properties/computed_style_utils.cc

@@ -1324,18 +1324,7 @@ CSSValue* ComputedStyleUtils::ValueForGridTrackList(
   bool is_layout_grid = layout_object && layout_object->IsLayoutGrid();
 
   // Handle the 'none' case.
-  bool track_list_is_empty =
-      track_sizes.IsEmpty() && auto_repeat_track_sizes.IsEmpty();
-  if (is_layout_grid && track_list_is_empty) {
-    // For grids we should consider every listed track, whether implicitly or
-    // explicitly created. Empty grids have a sole grid line per axis.
-    auto& positions = is_row_axis
-                          ? ToLayoutGrid(layout_object)->ColumnPositions()
-                          : ToLayoutGrid(layout_object)->RowPositions();
-    track_list_is_empty = positions.size() == 1;
-  }
-
-  if (track_list_is_empty)
+  if (track_sizes.IsEmpty() && auto_repeat_track_sizes.IsEmpty())
     return CSSIdentifierValue::Create(CSSValueID::kNone);
 
   CSSValueList* list = CSSValueList::CreateSpaceSeparated();

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

@@ -1219,11 +1219,22 @@ Vector<LayoutUnit> LayoutGrid::TrackSizesForComputedStyle(
   DCHECK(!grid_->NeedsItemsPlacement());
   bool has_collapsed_tracks = grid_->HasAutoRepeatEmptyTracks(direction);
   LayoutUnit gap = !has_collapsed_tracks ? GridGap(direction) : LayoutUnit();
-  tracks.ReserveCapacity(num_positions - 1);
-  for (size_t i = 0; i < num_positions - 2; ++i)
+  size_t explicit_start = -grid_->SmallestTrackStart(direction);
+  size_t explicit_end = explicit_start +
+                        (is_row_axis ? StyleRef().GridTemplateColumns()
+                                     : StyleRef().GridTemplateRows())
+                            .size() +
+                        AutoRepeatCountForDirection(direction);
+  // Usually we have `explicit_end <= num_positions - 1`, but the latter may be
+  // smaller when the maximum number of tracks is reached.
+  explicit_end = std::min(explicit_end, num_positions - 1);
+  tracks.ReserveCapacity(explicit_end - explicit_start);
+  size_t loop_end = std::min(explicit_end, num_positions - 2);
+  for (size_t i = explicit_start; i < loop_end; ++i)
     tracks.push_back(positions[i + 1] - positions[i] - offset_between_tracks -
                      gap);
-  tracks.push_back(positions[num_positions - 1] - positions[num_positions - 2]);
+  if (loop_end < explicit_end)
+    tracks.push_back(positions[explicit_end] - positions[explicit_end - 1]);
 
   if (!has_collapsed_tracks)
     return tracks;
@@ -1233,7 +1244,7 @@ Vector<LayoutUnit> LayoutGrid::TrackSizesForComputedStyle(
   size_t last_line = tracks.size();
   gap = GridGap(direction);
   for (size_t i = 1; i < last_line; ++i) {
-    if (grid_->IsEmptyAutoRepeatTrack(direction, i - 1)) {
+    if (grid_->IsEmptyAutoRepeatTrack(direction, i - 1 + explicit_start)) {
       --remaining_empty_tracks;
     } else {
       // Remove the gap between consecutive non empty tracks. Remove it also
@@ -1242,7 +1253,7 @@ Vector<LayoutUnit> LayoutGrid::TrackSizesForComputedStyle(
       bool all_remaining_tracks_are_empty =
           remaining_empty_tracks == (last_line - i);
       if (!all_remaining_tracks_are_empty ||
-          !grid_->IsEmptyAutoRepeatTrack(direction, i))
+          !grid_->IsEmptyAutoRepeatTrack(direction, i + explicit_start))
         tracks[i - 1] -= gap;
     }
   }

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html

@@ -85,21 +85,21 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html

@@ -31,7 +31,7 @@ setup({explicit_done: true});
 document.fonts.ready.then(()=> {
   // Single values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
   TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
@@ -77,13 +77,13 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html

@@ -77,47 +77,47 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-inline-support-repeat-001.html

@@ -65,19 +65,19 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html

@@ -85,21 +85,21 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html

@@ -31,7 +31,7 @@ setup({explicit_done: true});
 document.fonts.ready.then(()=> {
   // Single values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
   TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
@@ -77,13 +77,13 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html

@@ -77,47 +77,47 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-support-repeat-001.html

@@ -65,19 +65,19 @@ document.fonts.ready.then(()=> {
 
   // Wrong values.
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
   TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
-  TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
   done();
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html

@@ -11,9 +11,15 @@
 <style>
   .grid {
     display: inline-grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto;
     font: 25px/1 Ahem;
   }
 
+  .grid2rows {
+    grid-template-rows: auto auto;
+  }
+
   .constrainedGrid {
     width: 10px;
     height: 10px;
@@ -126,32 +132,32 @@
 
 <!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. -->
 
-<div id="grid-7" class="grid">
+<div id="grid-7" class="grid grid2rows">
   <img id="img-7" class="width200px" src="support/50x50-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-8" class="grid constrainedGrid">
+<div id="grid-8" class="grid grid2rows constrainedGrid">
   <img id="img-8" class="width200px" src="support/50x50-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-9" class="grid width200px">
+<div id="grid-9" class="grid grid2rows width200px">
   <img id="img-9" class="width100percent" src="support/50x50-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-10" class="grid width200px constrainedGrid">
+<div id="grid-10" class="grid grid2rows width200px constrainedGrid">
   <img id="img-10" class="width100percent" src="support/50x50-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-11" class="grid width200px justifyContentStart">
+<div id="grid-11" class="grid grid2rows width200px justifyContentStart">
   <img id="img-11" class="width100percent" src="support/50x50-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-12" class="grid width200px constrainedGrid justifyContentStart">
+<div id="grid-12" class="grid grid2rows width200px constrainedGrid justifyContentStart">
   <img id="img-12" class="width100percent" src="support/50x50-green.png">
   <div>ITEM</div>
 </div>
@@ -184,32 +190,32 @@
 
 <!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. -->
 
-<div id="grid-19" class="grid">
+<div id="grid-19" class="grid grid2rows">
   <img id="img-19" class="width200px" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-20" class="grid constrainedGrid">
+<div id="grid-20" class="grid grid2rows constrainedGrid">
   <img id="img-20" class="width200px" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-21" class="grid width200px">
+<div id="grid-21" class="grid grid2rows width200px">
   <img id="img-21" class="width100percent" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-22" class="grid width200px constrainedGrid">
+<div id="grid-22" class="grid grid2rows width200px constrainedGrid">
   <img id="img-22" class="width100percent" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-23" class="grid width200px justifyContentStart">
+<div id="grid-23" class="grid grid2rows width200px justifyContentStart">
   <img id="img-23" class="width100percent" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
 
-<div id="grid-24" class="grid width200px constrainedGrid justifyContentStart">
+<div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart">
   <img id="img-24" class="width100percent" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>

third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-columns-computed-withcontent.html

@@ -36,7 +36,7 @@
   </div>
 </div>
 <script>
-test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child
+test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
 
 // track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
 test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width

third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-rows-computed-withcontent.html

@@ -36,7 +36,7 @@
   </div>
 </div>
 <script>
-test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child
+test_computed_value("grid-template-rows", 'none', 'none'); // "none" without #child
 
 // track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
 test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height

third_party/blink/web_tests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt

@@ -15,19 +15,19 @@ PASS window.getComputedStyle(gridAutoFitContent, '').getPropertyValue('grid-auto
 PASS window.getComputedStyle(gridAutoFitContent, '').getPropertyValue('grid-auto-columns') is "fit-content(30px)"
 
 
-Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
+Test that getting grid-template-columns and grid-template-rows set through CSS only lists explicit tracks, but not implicit ones
 PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
 PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "50px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "50px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
 PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "40px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "20px 40px 40px"
-PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "15px 30px 30px"
-PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-columns') is "25px 50px 100px 25px"
-PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-rows') is "10px 20px 30px 10px"
-PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-columns') is "100px 25px 50px 100px"
-PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-rows') is "30px 10px 20px 30px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "20px"
+PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "15px"
+PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-rows') is "none"
 
 
 Test that grid-template-* definitions are not affected by grid-auto-* definitions

third_party/blink/web_tests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html

@@ -84,13 +84,13 @@ testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "
 testGridAutoDefinitionsValues(document.getElementById("gridAutoFitContent"), "fit-content(50%)", "fit-content(30px)");
 
 debug("");
-debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
+debug("Test that getting grid-template-columns and grid-template-rows set through CSS only lists explicit tracks, but not implicit ones");
 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "30px", "50px");
-testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
+testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "none", "none");
 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
-testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px 40px 40px", "15px 30px 30px");
-testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracks"), "25px 50px 100px 25px", "10px 20px 30px 10px");
-testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracksNegativeIndexes"), "100px 25px 50px 100px", "30px 10px 20px 30px");
+testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px");
+testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracks"), "none", "none");
+testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracksNegativeIndexes"), "none", "none");
 
 debug("");
 debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions");

third_party/blink/web_tests/fast/css-grid-layout/grid-columns-rows-get-set.html

@@ -93,7 +93,7 @@
 }
 .gridWithFitContentFunction {
     grid-template-columns: fit-content(30%);
-    grid-template-rows: fit-content(20px):
+    grid-template-rows: fit-content(20px);
 }
 </style>
 <script src="../../resources/js-test.js"></script>

third_party/blink/web_tests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt

@@ -48,10 +48,10 @@ PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAnd
 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('grid-template-columns') is "10px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('grid-template-rows') is "0px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-rows') is "0px"
 PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('grid-template-areas') is "\"a\""
-PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-columns') is "0px"
+PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-rows') is "[first] 0px"
 PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('grid-template-areas') is "\"a\""
 PASS window.getComputedStyle(gridTemplateConsecutiveAreas, '').getPropertyValue('grid-template-columns') is "10px"
@@ -186,7 +186,7 @@ PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[f
 PASS element.style.gridTemplateRows is "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\" \"b\""
 PASS element.style.gridTemplateAreas is "\"a\" \"b\""
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS element.style.gridTemplateColumns is "none"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
 PASS element.style.gridTemplateRows is "auto"

third_party/blink/web_tests/fast/css-grid-layout/grid-template-shorthand-get-set.html

@@ -222,8 +222,8 @@
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"), "[first] 10px [nav nav2] 15px [nav] 15px [last]", "100px [nav nav2] 25px [nav nav2] 25px [last]", '"a b c" "d e f" "g h i"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes"), "[first] 10px [nav nav2] 15px [nav] 15px [last]", "0px [nav nav2] 0px [nav nav2] 0px [last]", '"a b c" "d e f" "g h i"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
-    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "0px", "0px", '"a"');
-    testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "0px", "[first] 0px", '"a"');
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "none", "0px", '"a"');
+    testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "none", "[first] 0px", '"a"');
     testGridDefinitionsValues(document.getElementById("gridTemplateConsecutiveAreas"), "10px", "0px 0px", '"a" "a"');
 
     debug("");
@@ -275,7 +275,7 @@
     testGridDefinitionsSetJSValues("66px / 18px", "18px", "66px", "none");
     testGridDefinitionsSetJSValues("[head] 'a' 15px [tail] / 10px", "10px", "[head] 15px [tail]", "\"a\"");
     testGridDefinitionsSetJSValues("[foo1 bar1] 'a' 50px [foo2 bar2] [foo3 bar3] 'b' 50px [foo4 bar4] / 100px", "100px", "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]", "\"a\" \"b\"");
-    testGridDefinitionsSetJSValues("'a'", "0px", "0px", "\"a\"", "none", "auto");
+    testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto");
 
     debug("");
     debug("Test setting grid-template shorthand to bad values through JS");

third_party/blink/web_tests/fast/css-grid-layout/mark-as-infinitely-growable.html

@@ -5,6 +5,7 @@
 <style>
 .grid {
     font: 10px/1 Ahem;
+    grid-template-rows: auto;
 }
 .gridAutoAndAuto {
     grid-template-columns: auto auto;

third_party/blink/web_tests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt

-Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks
+Test that computed style for grid-template-columns and grid-template-rows works as expected, with named grid lines but without implicit tracks. Also test the size and position of the items, since the size of implicit tracks is not exposed
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b]"
-PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y] 50px 50px 50px"
-PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b] 150px"
-PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y] 50px"
-PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b] 150px 100px"
-PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y] 50px"
-PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b] 150px 100px 50px"
+PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y]"
+PASS gridOneColumnSingle.childElementCount is 4
+PASS gridOneColumnSingle.children[0].offsetWidth is 200
+PASS gridOneColumnSingle.children[0].offsetTop is 0
+PASS gridOneColumnSingle.children[0].offsetHeight is 50
+PASS gridOneColumnSingle.children[1].offsetWidth is 200
+PASS gridOneColumnSingle.children[1].offsetTop is 50
+PASS gridOneColumnSingle.children[1].offsetHeight is 50
+PASS gridOneColumnSingle.children[2].offsetWidth is 200
+PASS gridOneColumnSingle.children[2].offsetTop is 100
+PASS gridOneColumnSingle.children[2].offsetHeight is 50
+PASS gridOneColumnSingle.children[3].offsetWidth is 200
+PASS gridOneColumnSingle.children[3].offsetTop is 150
+PASS gridOneColumnSingle.children[3].offsetHeight is 50
+PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b]"
+PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y]"
+PASS gridTwoColumnsSingle.childElementCount is 4
+PASS gridTwoColumnsSingle.children[0].offsetWidth is 200
+PASS gridTwoColumnsSingle.children[0].offsetTop is 0
+PASS gridTwoColumnsSingle.children[0].offsetHeight is 50
+PASS gridTwoColumnsSingle.children[1].offsetWidth is 150
+PASS gridTwoColumnsSingle.children[1].offsetTop is 0
+PASS gridTwoColumnsSingle.children[1].offsetHeight is 50
+PASS gridTwoColumnsSingle.children[2].offsetWidth is 200
+PASS gridTwoColumnsSingle.children[2].offsetTop is 50
+PASS gridTwoColumnsSingle.children[2].offsetHeight is 50
+PASS gridTwoColumnsSingle.children[3].offsetWidth is 150
+PASS gridTwoColumnsSingle.children[3].offsetTop is 50
+PASS gridTwoColumnsSingle.children[3].offsetHeight is 50
+PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b]"
+PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y]"
+PASS gridThreeColumnsSingle.childElementCount is 4
+PASS gridThreeColumnsSingle.children[0].offsetWidth is 200
+PASS gridThreeColumnsSingle.children[0].offsetTop is 0
+PASS gridThreeColumnsSingle.children[0].offsetHeight is 50
+PASS gridThreeColumnsSingle.children[1].offsetWidth is 150
+PASS gridThreeColumnsSingle.children[1].offsetTop is 0
+PASS gridThreeColumnsSingle.children[1].offsetHeight is 50
+PASS gridThreeColumnsSingle.children[2].offsetWidth is 100
+PASS gridThreeColumnsSingle.children[2].offsetTop is 0
+PASS gridThreeColumnsSingle.children[2].offsetHeight is 50
+PASS gridThreeColumnsSingle.children[3].offsetWidth is 200
+PASS gridThreeColumnsSingle.children[3].offsetTop is 50
+PASS gridThreeColumnsSingle.children[3].offsetHeight is 50
+PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('grid-template-columns') is "[a] 200px [b]"
 PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('grid-template-rows') is "[x] 50px [y]"
+PASS gridFourColumnsSingle.childElementCount is 4
+PASS gridFourColumnsSingle.children[0].offsetWidth is 200
+PASS gridFourColumnsSingle.children[0].offsetTop is 0
+PASS gridFourColumnsSingle.children[0].offsetHeight is 50
+PASS gridFourColumnsSingle.children[1].offsetWidth is 150
+PASS gridFourColumnsSingle.children[1].offsetTop is 0
+PASS gridFourColumnsSingle.children[1].offsetHeight is 50
+PASS gridFourColumnsSingle.children[2].offsetWidth is 100
+PASS gridFourColumnsSingle.children[2].offsetTop is 0
+PASS gridFourColumnsSingle.children[2].offsetHeight is 50
+PASS gridFourColumnsSingle.children[3].offsetWidth is 50
+PASS gridFourColumnsSingle.children[3].offsetTop is 0
+PASS gridFourColumnsSingle.children[3].offsetHeight is 50
 PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e]"
-PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w] 50px 50px 50px"
-PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e] 150px"
-PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w] 50px"
-PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e] 150px 100px"
-PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w] 50px"
-PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e] 150px 100px 50px"
+PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w]"
+PASS gridOneColumnMultiple.childElementCount is 4
+PASS gridOneColumnMultiple.children[0].offsetWidth is 200
+PASS gridOneColumnMultiple.children[0].offsetTop is 0
+PASS gridOneColumnMultiple.children[0].offsetHeight is 50
+PASS gridOneColumnMultiple.children[1].offsetWidth is 200
+PASS gridOneColumnMultiple.children[1].offsetTop is 50
+PASS gridOneColumnMultiple.children[1].offsetHeight is 50
+PASS gridOneColumnMultiple.children[2].offsetWidth is 200
+PASS gridOneColumnMultiple.children[2].offsetTop is 100
+PASS gridOneColumnMultiple.children[2].offsetHeight is 50
+PASS gridOneColumnMultiple.children[3].offsetWidth is 200
+PASS gridOneColumnMultiple.children[3].offsetTop is 150
+PASS gridOneColumnMultiple.children[3].offsetHeight is 50
+PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e]"
+PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w]"
+PASS gridTwoColumnsMultiple.childElementCount is 4
+PASS gridTwoColumnsMultiple.children[0].offsetWidth is 200
+PASS gridTwoColumnsMultiple.children[0].offsetTop is 0
+PASS gridTwoColumnsMultiple.children[0].offsetHeight is 50
+PASS gridTwoColumnsMultiple.children[1].offsetWidth is 150
+PASS gridTwoColumnsMultiple.children[1].offsetTop is 0
+PASS gridTwoColumnsMultiple.children[1].offsetHeight is 50
+PASS gridTwoColumnsMultiple.children[2].offsetWidth is 200
+PASS gridTwoColumnsMultiple.children[2].offsetTop is 50
+PASS gridTwoColumnsMultiple.children[2].offsetHeight is 50
+PASS gridTwoColumnsMultiple.children[3].offsetWidth is 150
+PASS gridTwoColumnsMultiple.children[3].offsetTop is 50
+PASS gridTwoColumnsMultiple.children[3].offsetHeight is 50
+PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e]"
+PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w]"
+PASS gridThreeColumnsMultiple.childElementCount is 4
+PASS gridThreeColumnsMultiple.children[0].offsetWidth is 200
+PASS gridThreeColumnsMultiple.children[0].offsetTop is 0
+PASS gridThreeColumnsMultiple.children[0].offsetHeight is 50
+PASS gridThreeColumnsMultiple.children[1].offsetWidth is 150
+PASS gridThreeColumnsMultiple.children[1].offsetTop is 0
+PASS gridThreeColumnsMultiple.children[1].offsetHeight is 50
+PASS gridThreeColumnsMultiple.children[2].offsetWidth is 100
+PASS gridThreeColumnsMultiple.children[2].offsetTop is 0
+PASS gridThreeColumnsMultiple.children[2].offsetHeight is 50
+PASS gridThreeColumnsMultiple.children[3].offsetWidth is 200
+PASS gridThreeColumnsMultiple.children[3].offsetTop is 50
+PASS gridThreeColumnsMultiple.children[3].offsetHeight is 50
+PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('grid-template-columns') is "[a b c] 200px [d e]"
 PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('grid-template-rows') is "[x y z] 50px [v w]"
+PASS gridFourColumnsMultiple.childElementCount is 4
+PASS gridFourColumnsMultiple.children[0].offsetWidth is 200
+PASS gridFourColumnsMultiple.children[0].offsetTop is 0
+PASS gridFourColumnsMultiple.children[0].offsetHeight is 50
+PASS gridFourColumnsMultiple.children[1].offsetWidth is 150
+PASS gridFourColumnsMultiple.children[1].offsetTop is 0
+PASS gridFourColumnsMultiple.children[1].offsetHeight is 50
+PASS gridFourColumnsMultiple.children[2].offsetWidth is 100
+PASS gridFourColumnsMultiple.children[2].offsetTop is 0
+PASS gridFourColumnsMultiple.children[2].offsetHeight is 50
+PASS gridFourColumnsMultiple.children[3].offsetWidth is 50
+PASS gridFourColumnsMultiple.children[3].offsetTop is 0
+PASS gridFourColumnsMultiple.children[3].offsetHeight is 50
 PASS successfullyParsed is true
 
 TEST COMPLETE

third_party/blink/web_tests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html

@@ -4,6 +4,7 @@
 <style>
 .grid {
     font: 50px/1 Ahem;
+    position: relative;
 }
 
 .singleNamedGridLines {
@@ -76,15 +77,70 @@
 
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
-    description("Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks");
+    function testSizeAndPositionOfItems(element, expectedItemData) {
+        window.element = element;
+        var elementID = element.id || "element";
+        shouldBeEqualToNumber(elementID + ".childElementCount", expectedItemData.length);
+        var props = ["offsetWidth", "offsetTop", "offsetHeight"];
+        for (var i = 0; i < expectedItemData.length; ++i)
+            for (let prop of props)
+                shouldBeEqualToNumber(elementID + ".children[" + i + "]." + prop, expectedItemData[i][prop]);
+    }
 
-    testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y] 50px 50px 50px");
-    testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b] 150px", "[x] 50px [y] 50px");
-    testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b] 150px 100px", "[x] 50px [y] 50px");
-    testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b] 150px 100px 50px", "[x] 50px [y]");
+    function testGrid(element, columnValue, rowValue, expectedItemData) {
+        testGridDefinitionsValues(element, columnValue, rowValue);
+        testSizeAndPositionOfItems(element, expectedItemData);
+    }
 
-    testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px");
-    testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px");
-    testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px");
-    testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]");
+    description("Test that computed style for grid-template-columns and grid-template-rows works as expected, with named grid lines but without implicit tracks. Also test the size and position of the items, since the size of implicit tracks is not exposed");
+
+    testGrid(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 100, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 150, offsetHeight: 50},
+    ]);
+    testGrid(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 50, offsetHeight: 50},
+    ]);
+    testGrid(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
+    ]);
+    testGrid(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 450, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+    ]);
+
+    testGrid(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 100, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 150, offsetHeight: 50},
+    ]);
+    testGrid(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 50, offsetHeight: 50},
+    ]);
+    testGrid(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
+    ]);
+    testGrid(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
+      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+      {offsetLeft: 450, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+    ]);
 </script>

third_party/blink/web_tests/fast/css-grid-layout/negative-growth-share-as-infinity-crash.html

@@ -3,8 +3,8 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-    grid-auto-rows: minmax(min-content, 9px);
-    grid-auto-columns: min-content;
+    grid-template-rows: minmax(min-content, 9px);
+    grid-template-columns: min-content;
     height: 10px;
 }
 .firstRowFirstColumn {