[css-grid] Fix line name positions after auto repeat with no line names

When serializing grid-template-rows/columns of a grid container, we need
to handle auto repeat() specially in order to insert the line names at
the correct places.

Before this patch, this was skipped for indices before the insertion
point of the auto repeat, and in case the auto repeat had no line name.
The latter logic was wrong, if there is an auto repeat we still need the
special code after the insertion point, even if it has no line names.
The proper condition to check is whether there is no auto repeat.

The patch also avoids a 2nd call to GridAutoRepeatRows/Columns since we
already have the value in a variable.

BUG=1011329

TEST=external/wpt/css/css-grid/parsing/grid-template-columns-computed-nogrid.html
TEST=external/wpt/css/css-grid/parsing/grid-template-columns-computed.html
TEST=external/wpt/css/css-grid/parsing/grid-template-rows-computed-nogrid.html
TEST=external/wpt/css/css-grid/parsing/grid-template-rows-computed-withcontent.html
TEST=external/wpt/css/css-grid/parsing/grid-template-rows-computed.html

There are some test failures because integer repeat() is still expanded
at computed-value time (http://crbug.com/989004).

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

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

@@ -1170,15 +1170,14 @@ class OrderedNamedLinesCollectorInGridLayout
  public:
   OrderedNamedLinesCollectorInGridLayout(const ComputedStyle& style,
                                          bool is_row_axis,
-                                         size_t auto_repeat_tracks_count)
+                                         size_t auto_repeat_tracks_count,
+                                         size_t auto_repeat_track_list_length)
       : OrderedNamedLinesCollector(style, is_row_axis),
         insertion_point_(is_row_axis
                              ? style.GridAutoRepeatColumnsInsertionPoint()
                              : style.GridAutoRepeatRowsInsertionPoint()),
         auto_repeat_total_tracks_(auto_repeat_tracks_count),
-        auto_repeat_track_list_length_(
-            is_row_axis ? style.GridAutoRepeatColumns().size()
-                        : style.GridAutoRepeatRows().size()) {}
+        auto_repeat_track_list_length_(auto_repeat_track_list_length) {}
   void CollectLineNamesForIndex(cssvalue::CSSGridLineNamesValue&,
                                 size_t index) const override;
 
@@ -1227,7 +1226,7 @@ void OrderedNamedLinesCollectorInGridLayout::CollectLineNamesForIndex(
     cssvalue::CSSGridLineNamesValue& line_names_value,
     size_t i) const {
   DCHECK(!IsEmpty());
-  if (ordered_named_auto_repeat_grid_lines_.IsEmpty() || i < insertion_point_) {
+  if (auto_repeat_track_list_length_ == 0LU || i < insertion_point_) {
     AppendLines(line_names_value, i, kNamedLines);
     return;
   }
@@ -1346,7 +1345,8 @@ CSSValue* ComputedStyleUtils::ValueForGridTrackList(
   if (is_layout_grid) {
     const auto* grid = ToLayoutGrid(layout_object);
     OrderedNamedLinesCollectorInGridLayout collector(
-        style, is_row_axis, grid->AutoRepeatCountForDirection(direction));
+        style, is_row_axis, grid->AutoRepeatCountForDirection(direction),
+        auto_repeat_track_sizes.size());
     PopulateGridTrackList(
         list, collector, grid->TrackSizesForComputedStyle(direction),
         [&](const LayoutUnit& v) { return ZoomAdjustedPixelValue(v, style); });

third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-columns-computed-nogrid-expected.txt

@@ -8,6 +8,9 @@ PASS Property grid-template-columns value '[a] 1px [b]' computes to '[a] 1px [b]
 FAIL Property grid-template-columns value '1px repeat(1, 2px) 3px' computes to '1px repeat(1, 2px) 3px' assert_equals: expected "1px repeat(1, 2px) 3px" but got "1px 2px 3px"
 PASS Property grid-template-columns value '1px repeat(auto-fill, 2px) 3px' computes to '1px repeat(auto-fill, 2px) 3px'
 PASS Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px' computes to '1px repeat(auto-fit, 2px) 3px'
+FAIL Property grid-template-columns value '1px [a] repeat(1, 2px 3px) [b] 4px' computes to '1px [a] repeat(1, 2px 3px) [b] 4px' assert_equals: expected "1px [a] repeat(1, 2px 3px) [b] 4px" but got "1px [a] 2px 3px [b] 4px"
+PASS Property grid-template-columns value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' computes to '1px [a] repeat(auto-fill, 2px 3px) [b] 4px'
+PASS Property grid-template-columns value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' computes to '1px [a] repeat(auto-fit, 2px 3px) [b] 4px'
 FAIL Property grid-template-columns value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' computes to '1px [a] repeat(1, [b] 2px [c]) [d] 3px' assert_equals: expected "1px [a] repeat(1, [b] 2px [c]) [d] 3px" but got "1px [a b] 2px [c d] 3px"
 PASS Property grid-template-columns value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' computes to '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px'
 PASS Property grid-template-columns value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' computes to '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px'

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

@@ -25,6 +25,9 @@ test_computed_value("grid-template-columns", "[a] 1px [b]");
 test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px");
 test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px");
 test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
 test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
 test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
 test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");

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

@@ -25,6 +25,9 @@ test_computed_value("grid-template-columns", "[a] 1px [b]");
 test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px", "1px 2px 3px");
 test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
 test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
 test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
 test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
 test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");

third_party/blink/web_tests/external/wpt/css/css-grid/parsing/grid-template-rows-computed-nogrid-expected.txt

@@ -8,6 +8,9 @@ PASS Property grid-template-rows value '[a] 1px [b]' computes to '[a] 1px [b]'
 FAIL Property grid-template-rows value '1px repeat(1, 2px) 3px' computes to '1px repeat(1, 2px) 3px' assert_equals: expected "1px repeat(1, 2px) 3px" but got "1px 2px 3px"
 PASS Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px' computes to '1px repeat(auto-fill, 2px) 3px'
 PASS Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px' computes to '1px repeat(auto-fit, 2px) 3px'
+FAIL Property grid-template-rows value '1px [a] repeat(1, 2px 3px) [b] 4px' computes to '1px [a] repeat(1, 2px 3px) [b] 4px' assert_equals: expected "1px [a] repeat(1, 2px 3px) [b] 4px" but got "1px [a] 2px 3px [b] 4px"
+PASS Property grid-template-rows value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' computes to '1px [a] repeat(auto-fill, 2px 3px) [b] 4px'
+PASS Property grid-template-rows value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' computes to '1px [a] repeat(auto-fit, 2px 3px) [b] 4px'
 FAIL Property grid-template-rows value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' computes to '1px [a] repeat(1, [b] 2px [c]) [d] 3px' assert_equals: expected "1px [a] repeat(1, [b] 2px [c]) [d] 3px" but got "1px [a b] 2px [c d] 3px"
 PASS Property grid-template-rows value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' computes to '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px'
 PASS Property grid-template-rows value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' computes to '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px'

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

@@ -25,6 +25,9 @@ test_computed_value("grid-template-rows", "[a] 1px [b]");
 test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px");
 test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px");
 test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
 test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
 test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
 test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");

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

-This is a testharness.js-based test.
-PASS Property grid-template-rows value 'none' computes to '600px'
-PASS Property grid-template-rows value '20%' computes to '120px'
-PASS Property grid-template-rows value 'calc(-0.5em + 10px)' computes to '0px'
-PASS Property grid-template-rows value 'calc(0.5em + 10px)' computes to '30px'
-PASS Property grid-template-rows value 'calc(30% + 40px)' computes to '220px'
-PASS Property grid-template-rows value '5fr' computes to '600px'
-PASS Property grid-template-rows value 'min-content' computes to '60px'
-PASS Property grid-template-rows value 'max-content' computes to '60px'
-PASS Property grid-template-rows value 'auto' computes to '600px'
-PASS Property grid-template-rows value 'minmax(10px, auto)' computes to '600px'
-PASS Property grid-template-rows value 'minmax(20%, max-content)' computes to '120px'
-PASS Property grid-template-rows value 'minmax(min-content, calc(-0.5em + 10px))' computes to '60px'
-PASS Property grid-template-rows value 'minmax(auto, 0)' computes to '60px'
-PASS Property grid-template-rows value 'fit-content(70px)' computes to '60px'
-PASS Property grid-template-rows value 'fit-content(20%)' computes to '60px'
-PASS Property grid-template-rows value 'fit-content(calc(-0.5em + 10px))' computes to '60px'
-PASS Property grid-template-rows value 'repeat(1, 10px)' computes to '10px'
-PASS Property grid-template-rows value 'repeat(1, [one two] 20%)' computes to '[one two] 120px'
-PASS Property grid-template-rows value 'repeat(2, minmax(10px, auto))' computes to '325px 275px'
-PASS Property grid-template-rows value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])' computes to '60px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]'
-PASS Property grid-template-rows value 'min-content repeat(5, minmax(10px, auto))' computes to '60px 108px 108px 108px 108px 108px'
-PASS Property grid-template-rows value '[] 150px [] 1fr []' computes to '150px 450px'
-PASS Property grid-template-rows value 'repeat(auto-fill, 200px)' computes to '200px 200px 200px'
-PASS Property grid-template-rows value 'repeat(auto-fit, [one] 20%)' computes to '[one] 120px [one] 0px [one] 0px [one] 0px [one] 0px'
-PASS Property grid-template-rows value 'repeat(auto-fill, minmax(100px, 5fr) [two])' computes to '100px [two] 100px [two] 100px [two] 100px [two] 100px [two] 100px [two]'
-PASS Property grid-template-rows value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])' computes to '[three] 240px [four three] 0px [four]'
-FAIL Property grid-template-rows value '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]' computes to '[one] 50px 50px [two] 30px [three] 10px 10px 10px 40px [four five] 200px 200px [six]' assert_equals: expected "[one] 50px 50px [two] 30px [three] 10px 10px 10px 40px [four five] 200px 200px [six]" but got "[one] 50px 50px [two] 30px [three] 10px 10px [four five] 10px 40px [six] 200px 200px"
-Harness: the test ran to completion.
-

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

@@ -25,6 +25,9 @@ test_computed_value("grid-template-rows", "[a] 1px [b]");
 test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px", "1px 2px 3px");
 test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
 test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
 test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
 test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
 test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");