[css-grid] Update grid when changing auto repeat type

This patch makes two 'repeat()' values for 'grid-template' be considered
to be different if one uses 'auto-fill' and the other 'auto-fit'.

Previously, they were considered to be equal if the repeated values
were the same, without comparing the repeat type. Therefore, the grid
was not updated when setting both values one after the other.

BUG=961407
TEST=fast/css-grid-layout/grid-change-auto-repeat-tracks.html

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

third_party/blink/renderer/core/css/css_grid_auto_repeat_value.cc

@@ -19,5 +19,10 @@ String CSSGridAutoRepeatValue::CustomCSSText() const {
   return result.ToString();
 }
 
+bool CSSGridAutoRepeatValue::Equals(const CSSGridAutoRepeatValue& other) const {
+  return auto_repeat_id_ == other.auto_repeat_id_ &&
+         CSSValueList::Equals(other);
+}
+
 }  // namespace cssvalue
 }  // namespace blink

third_party/blink/renderer/core/css/css_grid_auto_repeat_value.h

@@ -34,6 +34,8 @@ class CSSGridAutoRepeatValue : public CSSValueList {
   }
 
   String CustomCSSText() const;
+  bool Equals(const CSSGridAutoRepeatValue&) const;
+
   CSSValueID AutoRepeatID() const { return auto_repeat_id_; }
 
   void TraceAfterDispatch(blink::Visitor* visitor) {

third_party/blink/web_tests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html

@@ -56,6 +56,12 @@ function setGridSize(id, width, height)
      gridElement.style.height = height;
 }
 
+function setGridItemPlacement(id, gridRow, gridColumn) {
+     var gridItem = document.getElementById(id);
+     gridItem.style.gridRow = gridRow;
+     gridItem.style.gridColumn = gridColumn;
+}
+
 function testGridDefinitions(firstGridItemData, secondGridItemData, thirdGridItemData)
 {
     var i1 = document.getElementById(firstGridItemData.id);
@@ -113,6 +119,18 @@ function testChangingGridDefinitions()
      setGridSize('grid2', '100px', '100px');
      testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '45', 'x': '25', 'y': '45' });
 
+     // Move the third item so that there is an empty track between it and the others.
+     setGridItemPlacement('i3', 'auto', '3');
+     testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '90', 'y': '25' });
+     setGridItemPlacement('i23', '3', 'auto');
+     testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '90' });
+
+     // Set the same templates, but using auto-fit instead of auto-fill. The empty track should collapse.
+     setGridTemplate('grid1', 'none', 'repeat(auto-fit, 45px)');
+     testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '45', 'y': '25' });
+     setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none');
+     testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '45' });
+
      done();
 }