[css-grid] Update grid when changing auto repeat type
https://bugs.webkit.org/show_bug.cgi?id=197849

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Import WPT test.

* web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html: Added.
* web-platform-tests/css/css-grid/grid-definition/w3c-import.log:

Source/WebCore:

Test: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html

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.

* css/CSSGridAutoRepeatValue.cpp:
(WebCore::CSSGridAutoRepeatValue::equals const):
* css/CSSGridAutoRepeatValue.h:

LayoutTests:

Remove the test which has been upstreamed to WPT.

* fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt: Removed.
* fast/css-grid-layout/grid-change-auto-repeat-tracks.html: Removed.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@245295 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index a4d3b90..be72471 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2019-05-14  Oriol Brufau  <obrufau@igalia.com>
+
+        [css-grid] Update grid when changing auto repeat type
+        https://bugs.webkit.org/show_bug.cgi?id=197849
+
+        Reviewed by Javier Fernandez.
+
+        Remove the test which has been upstreamed to WPT.
+
+        * fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt: Removed.
+        * fast/css-grid-layout/grid-change-auto-repeat-tracks.html: Removed.
+
 2019-05-14  Antti Koivisto  <antti@apple.com>
 
         Event region computation should respect transforms
diff --git a/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt b/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt
deleted file mode 100644
index 9faf22e..0000000
--- a/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt
+++ /dev/null
@@ -1,25 +0,0 @@
-This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
-PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html b/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html
deleted file mode 100644
index 12ec660..0000000
--- a/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<link href="resources/grid.css" rel="stylesheet">
-<style>
-.grid {
-    grid-auto-rows: 25px;
-    grid-auto-columns: 25px;
-    margin-bottom: 10px;
-}
-
-.fixedWidth {
-    width: 50px;
-    grid-auto-flow: row;
-    grid-template-columns: repeat(auto-fill, 25px);
-}
-
-.fixedHeight {
-    width: 100px;
-    height: 50px;
-    grid-auto-flow: column;
-    grid-template-rows: repeat(auto-fill, 25px);
-}
-
-#i1, #i21 {
-    grid-row: auto;
-    grid-column: 1;
-    background-color: orange;
-}
-
-#i2, #i22 {
-    grid-row: 1;
-    grid-column: auto;
-    background-color: green;
-}
-
-#i3, #i23 {
-    grid-row: auto;
-    grid-column: auto;
-    background-color: blue;
-}
-</style>
-<!-- Explicitly not using layout-th because it does not allow multiple checkLayout(). -->
-<script src="../../resources/check-layout.js"></script>
-<script>
-function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
-{
-     var gridElement = document.getElementById(id);
-     gridElement.style.gridTemplateRows = gridTemplateRows;
-     gridElement.style.gridTemplateColumns = gridTemplateColumns;
-}
-
-function setGridSize(id, width, height)
-{
-     var gridElement = document.getElementById(id);
-     gridElement.style.width = width;
-     gridElement.style.height = height;
-}
-
-function testGridTemplates(firstGridItemData, secondGridItemData, thirdGridItemData)
-{
-    var i1 = document.getElementById(firstGridItemData.id);
-    i1.setAttribute("data-expected-width", firstGridItemData.width);
-    i1.setAttribute("data-expected-height", firstGridItemData.height);
-    i1.setAttribute("data-offset-x", firstGridItemData.x);
-    i1.setAttribute("data-offset-y", firstGridItemData.y);
-
-    var i2 = document.getElementById(secondGridItemData.id);
-    i2.setAttribute("data-expected-width", secondGridItemData.width);
-    i2.setAttribute("data-expected-height", secondGridItemData.height);
-    i2.setAttribute("data-offset-x", secondGridItemData.x);
-    i2.setAttribute("data-offset-y", secondGridItemData.y);
-
-    var i3 = document.getElementById(thirdGridItemData.id);
-    i3.setAttribute("data-expected-width", thirdGridItemData.width);
-    i3.setAttribute("data-expected-height", thirdGridItemData.height);
-    i3.setAttribute("data-offset-x", thirdGridItemData.x);
-    i3.setAttribute("data-offset-y", thirdGridItemData.y);
-
-    checkLayout(".grid");
-}
-
-function testChangingGridDefinitions()
-{
-     // Test changing the number of auto-repeat tracks.
-     setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
-     testGridTemplates({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
-     setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
-     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
-
-     setGridTemplate('grid1', 'none', 'none');
-     testGridTemplates({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '0', 'y': '50' });
-     setGridTemplate('grid2', 'none', 'none');
-     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '50', 'y': '0' });
-
-     setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
-     testGridTemplates({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '20', 'height': '25', 'x': '5', 'y': '25' });
-     setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
-     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '20', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '20', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '20', 'x': '25', 'y': '20' });
-
-     setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
-     testGridTemplates({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '22', 'height': '25', 'x': '5', 'y': '25' });
-     setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
-     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '18', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '18', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '18', 'x': '25', 'y': '18' });
-
-     setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
-     testGridTemplates({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '0', 'y': '50' });
-     setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
-     testGridTemplates({ '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': '50', 'y': '0' });
-
-     // Test changing the size of the grid.
-     setGridSize('grid1', '100px', 'auto');
-     testGridTemplates({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '45', 'y': '25' });
-     setGridSize('grid2', '100px', '100px');
-     testGridTemplates({ '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' });
-}
-
-window.addEventListener("load", testChangingGridDefinitions, false);
-</script>
-
-<div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div>
-<div id="log"></div>
-
-<div style="position: relative">
-    <div id="grid1" class="grid fixedWidth">
-        <div id="i1"></div>
-        <div id="i2"></div>
-        <div id="i3"></div>
-    </div>
-</div>
-
-<div style="position: relative">
-    <div id="grid2" class="grid fixedHeight">
-        <div id="i21"></div>
-        <div id="i22"></div>
-        <div id="i23"></div>
-    </div>
-</div>
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
index 06b7495..7e0e47b 100644
--- a/LayoutTests/imported/w3c/ChangeLog
+++ b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,16 @@
+2019-05-14  Oriol Brufau  <obrufau@igalia.com>
+
+        [css-grid] Update grid when changing auto repeat type
+        https://bugs.webkit.org/show_bug.cgi?id=197849
+
+        Reviewed by Javier Fernandez.
+
+        Import WPT test.
+
+        * web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks-expected.txt: Added.
+        * web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html: Added.
+        * web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
+
 2019-05-14  Manuel Rego Casasnovas  <rego@igalia.com>
 
         [css-grid] Use max size to compute auto repeat tracks
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks-expected.txt
new file mode 100644
index 0000000..5854bec
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks-expected.txt
@@ -0,0 +1,20 @@
+
+Harness Error (FAIL), message = 2 duplicate test names: ".grid 1", ".grid 2"
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 1 
+PASS .grid 2 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html
new file mode 100644
index 0000000..33fcb24
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+<meta name="assert" content="This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.">
+
+<link href="support/grid.css" rel="stylesheet">
+<style>
+.grid {
+  grid-auto-rows: 25px;
+  grid-auto-columns: 25px;
+  margin-bottom: 10px;
+}
+.fixedWidth {
+  width: 50px;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fill, 25px);
+}
+.fixedHeight {
+  width: 100px;
+  height: 50px;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(auto-fill, 25px);
+}
+#i1-1, #i2-1 {
+  grid-row: auto;
+  grid-column: 1;
+  background-color: orange;
+}
+#i1-2, #i2-2 {
+  grid-row: 1;
+  grid-column: auto;
+  background-color: green;
+}
+#i1-3, #i2-3 {
+  grid-row: auto;
+  grid-column: auto;
+  background-color: blue;
+}
+</style>
+
+<div id="log"></div>
+
+<div style="position: relative">
+  <div id="grid1" class="grid fixedWidth">
+    <div id="i1-1"></div>
+    <div id="i1-2"></div>
+    <div id="i1-3"></div>
+  </div>
+</div>
+<div style="position: relative">
+  <div id="grid2" class="grid fixedHeight">
+    <div id="i2-1"></div>
+    <div id="i2-2"></div>
+    <div id="i2-3"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) {
+  let gridElement = document.getElementById(id);
+  gridElement.style.gridTemplateRows = gridTemplateRows;
+  gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function setGridSize(id, width, height) {
+  let gridElement = document.getElementById(id);
+  gridElement.style.width = width;
+  gridElement.style.height = height;
+}
+
+function setGridItemPlacement(id, gridRow, gridColumn) {
+  let gridItem = document.getElementById(id);
+  gridItem.style.gridRow = gridRow;
+  gridItem.style.gridColumn = gridColumn;
+}
+
+function testGridDefinitions(...gridItemDataList) {
+  for (let gridItemData of gridItemDataList) {
+    let gridItem = document.getElementById(gridItemData.id);
+    gridItem.setAttribute("data-expected-width", gridItemData.width);
+    gridItem.setAttribute("data-expected-height", gridItemData.height);
+    gridItem.setAttribute("data-offset-x", gridItemData.x);
+    gridItem.setAttribute("data-offset-y", gridItemData.y);
+  }
+  checkLayout(".grid", false);
+}
+
+// Test changing the number of auto-repeat tracks.
+setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '25', y: '25' },
+  { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '25', y: '25' });
+
+setGridTemplate('grid1', 'none', 'none');
+setGridTemplate('grid2', 'none', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '0', y: '50' },
+  { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '50', y: '0' });
+
+setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '20', height: '25', x: '5', y: '25' },
+  { id: 'i2-1', width: '25', height: '20', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '20', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '20', x: '25', y: '20' });
+
+setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '22', height: '25', x: '5', y: '25' },
+  { id: 'i2-1', width: '25', height: '18', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '18', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '18', x: '25', y: '18' });
+
+setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '45', height: '25', x: '0', y: '50' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '45', x: '50', y: '0' });
+
+// Test changing the size of the grid.
+setGridSize('grid1', '100px', 'auto');
+setGridSize('grid2', '100px', '100px');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '45', height: '25', x: '45', y: '25' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', 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('i1-3', 'auto', '3');
+setGridItemPlacement('i2-3', '3', 'auto');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '90', y: '25' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', 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)');
+setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '45', y: '25' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '25', y: '45' });
+
+done();
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
index 7e0710a..3716d9d 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
@@ -23,6 +23,7 @@
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 7e2f5e6..b244766 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,23 @@
+2019-05-14  Oriol Brufau  <obrufau@igalia.com>
+
+        [css-grid] Update grid when changing auto repeat type
+        https://bugs.webkit.org/show_bug.cgi?id=197849
+
+        Reviewed by Javier Fernandez.
+
+        Test: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html
+
+        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.
+
+        * css/CSSGridAutoRepeatValue.cpp:
+        (WebCore::CSSGridAutoRepeatValue::equals const):
+        * css/CSSGridAutoRepeatValue.h:
+
 2019-05-14  Antti Koivisto  <antti@apple.com>
 
         Event region computation should respect transforms
diff --git a/Source/WebCore/css/CSSGridAutoRepeatValue.cpp b/Source/WebCore/css/CSSGridAutoRepeatValue.cpp
index d5bc449..773177fd 100644
--- a/Source/WebCore/css/CSSGridAutoRepeatValue.cpp
+++ b/Source/WebCore/css/CSSGridAutoRepeatValue.cpp
@@ -46,4 +46,9 @@
     return result.toString();
 }
 
+bool CSSGridAutoRepeatValue::equals(const CSSGridAutoRepeatValue& other) const
+{
+    return m_autoRepeatID == other.m_autoRepeatID && CSSValueList::equals(other);
+}
+
 } // namespace WebCore
diff --git a/Source/WebCore/css/CSSGridAutoRepeatValue.h b/Source/WebCore/css/CSSGridAutoRepeatValue.h
index 774c81f..20780f4 100644
--- a/Source/WebCore/css/CSSGridAutoRepeatValue.h
+++ b/Source/WebCore/css/CSSGridAutoRepeatValue.h
@@ -54,6 +54,8 @@
     }
 
     String customCSSText() const;
+    bool equals(const CSSGridAutoRepeatValue&) const;
+
     CSSValueID autoRepeatID() const { return m_autoRepeatID; }
 
 private: