[css-grid] Fix auto repeat tracks computation with definite min sizes
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 23 Mar 2018 16:44:27 +0000 (16:44 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 23 Mar 2018 16:44:27 +0000 (16:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=183933

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

The relevant test for this change is just grid-inline-auto-repeat-001.html. The other ones
were pulled in by the import. The unique change in those tests is the location of a
stylesheet. Since we're using it in the new test it seems sensible to use this same commit
to import those changes too. There is one important change in testing-utils.js which is
also required by the new test.

* resources/import-expectations.json:
* web-platform-tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html:
* web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-expected.html:
* web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html:
* web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-expected.html:
* web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html:
* web-platform-tests/css/css-grid/grid-definition/support/grid.css: Added.
(.grid):
(.inline-grid):
(.firstRowFirstColumn):
(.onlyFirstRowOnlyFirstColumn):
(.firstRowSecondColumn):
(.onlyFirstRowOnlySecondColumn):
(.secondRowFirstColumn):
(.onlySecondRowOnlyFirstColumn):
(.secondRowSecondColumn):
(.onlySecondRowOnlySecondColumn):
(.endSecondRowEndSecondColumn):
(.thirdRowSecondColumn):
(.firstRowThirdColumn):
(.secondRowThirdColumn):
(.firstRowFourthColumn):
(.secondRowFourthColumn):
(.firstAutoRowSecondAutoColumn):
(.autoLastRowAutoLastColumn):
(.autoSecondRowAutoFirstColumn):
(.firstRowBothColumn):
(.secondRowBothColumn):
(.bothRowFirstColumn):
(.bothRowSecondColumn):
(.bothRowBothColumn):
(.autoRowAutoColumn):
(.firstRowAutoColumn):
(.secondRowAutoColumn):
(.thirdRowAutoColumn):
(.autoRowFirstColumn):
(.autoRowSecondColumn):
(.autoRowThirdColumn):
(.autoRowAutoColumnSpanning2):
(.autoRowSpanning2AutoColumn):
(.autoRowSpanning2AutoColumnSpanning3):
(.autoRowSpanning3AutoColumnSpanning2):
(.autoRowFirstColumnSpanning2):
(.autoRowSecondColumnSpanning2):
(.firstRowSpanning2AutoColumn):
(.secondRowSpanning2AutoColumn):
(.gridAutoFlowColumnSparse):
(.gridAutoFlowColumnDense):
(.gridAutoFlowRowSparse):
(.gridAutoFlowRowDense):
(.constrainedContainer):
(.unconstrainedContainer):
(.sizedToGridArea):
(.verticalRL):
(.verticalLR):
(.horizontalTB):
(.directionRTL):
(.directionLTR):
* web-platform-tests/css/css-grid/grid-definition/support/testing-utils.js:
(checkGridTemplateRows): Convert the passed computed style to an Array in case it is just an string.
* web-platform-tests/css/css-grid/grid-definition/support/w3c-import.log:
* web-platform-tests/css/css-grid/grid-definition/w3c-import.log:

Source/WebCore:

Indefinitely sized containers use the specified definite min-size (if any) as available
space in order to compute the number of auto repeat tracks to create. A bug in that code was
causing the grid to be one track larger than expected. That was only happening in the case
of the free space being a multiple of the total size of the autorepeat tracks.

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

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeAutoRepeatTracksCount const):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@229897 268f45cc-cd09-0410-ab3c-d52691b4dbfc

15 files changed:
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/resources/import-expectations.json
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-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-expected.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-expected.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/grid.css [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/testing-utils.js
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/w3c-import.log
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 39c683c..df33717 100644 (file)
@@ -1,3 +1,81 @@
+2018-03-23  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Fix auto repeat tracks computation with definite min sizes
+        https://bugs.webkit.org/show_bug.cgi?id=183933
+
+        Reviewed by Javier Fernandez.
+
+        The relevant test for this change is just grid-inline-auto-repeat-001.html. The other ones
+        were pulled in by the import. The unique change in those tests is the location of a
+        stylesheet. Since we're using it in the new test it seems sensible to use this same commit
+        to import those changes too. There is one important change in testing-utils.js which is
+        also required by the new test.
+
+        * resources/import-expectations.json:
+        * web-platform-tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html:
+        * web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001-expected.txt: Added.
+        * web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html: Added.
+        * web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-expected.html:
+        * web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html:
+        * web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-expected.html:
+        * web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html:
+        * web-platform-tests/css/css-grid/grid-definition/support/grid.css: Added.
+        (.grid):
+        (.inline-grid):
+        (.firstRowFirstColumn):
+        (.onlyFirstRowOnlyFirstColumn):
+        (.firstRowSecondColumn):
+        (.onlyFirstRowOnlySecondColumn):
+        (.secondRowFirstColumn):
+        (.onlySecondRowOnlyFirstColumn):
+        (.secondRowSecondColumn):
+        (.onlySecondRowOnlySecondColumn):
+        (.endSecondRowEndSecondColumn):
+        (.thirdRowSecondColumn):
+        (.firstRowThirdColumn):
+        (.secondRowThirdColumn):
+        (.firstRowFourthColumn):
+        (.secondRowFourthColumn):
+        (.firstAutoRowSecondAutoColumn):
+        (.autoLastRowAutoLastColumn):
+        (.autoSecondRowAutoFirstColumn):
+        (.firstRowBothColumn):
+        (.secondRowBothColumn):
+        (.bothRowFirstColumn):
+        (.bothRowSecondColumn):
+        (.bothRowBothColumn):
+        (.autoRowAutoColumn):
+        (.firstRowAutoColumn):
+        (.secondRowAutoColumn):
+        (.thirdRowAutoColumn):
+        (.autoRowFirstColumn):
+        (.autoRowSecondColumn):
+        (.autoRowThirdColumn):
+        (.autoRowAutoColumnSpanning2):
+        (.autoRowSpanning2AutoColumn):
+        (.autoRowSpanning2AutoColumnSpanning3):
+        (.autoRowSpanning3AutoColumnSpanning2):
+        (.autoRowFirstColumnSpanning2):
+        (.autoRowSecondColumnSpanning2):
+        (.firstRowSpanning2AutoColumn):
+        (.secondRowSpanning2AutoColumn):
+        (.gridAutoFlowColumnSparse):
+        (.gridAutoFlowColumnDense):
+        (.gridAutoFlowRowSparse):
+        (.gridAutoFlowRowDense):
+        (.constrainedContainer):
+        (.unconstrainedContainer):
+        (.sizedToGridArea):
+        (.verticalRL):
+        (.verticalLR):
+        (.horizontalTB):
+        (.directionRTL):
+        (.directionLTR):
+        * web-platform-tests/css/css-grid/grid-definition/support/testing-utils.js:
+        (checkGridTemplateRows): Convert the passed computed style to an Array in case it is just an string.
+        * web-platform-tests/css/css-grid/grid-definition/support/w3c-import.log:
+        * web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
+
 2018-03-23  Antoine Quint  <graouts@apple.com>
 
         [Web Animations] Animated transform styles are ignored when calling getComputedStyle()
index 393f5e9..e143b28 100644 (file)
@@ -62,6 +62,7 @@
     "web-platform-tests/css/css-color": "import", 
     "web-platform-tests/css/css-display": "import", 
     "web-platform-tests/css/css-grid": "import", 
+    "web-platform-tests/css/css-grid/grid-definition/": "import", 
     "web-platform-tests/css/css-multicol": "import", 
     "web-platform-tests/css/css-pseudo": "import", 
     "web-platform-tests/css/css-scoping": "import", 
index d08712d..9441b0a 100644 (file)
@@ -6,7 +6,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
 <meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.">
 <meta name="flags" content="ahem">
-<link rel="stylesheet" href="../support/grid.css">
+<link rel="stylesheet" href="support/grid.css">
 <style>
 .grid {
   width: fit-content;
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001-expected.txt
new file mode 100644 (file)
index 0000000..eb4df08
--- /dev/null
@@ -0,0 +1,14 @@
+
+PASS 'autoFillColumns' with: grid-template-columns: repeat(auto-fill, 10px); and grid-template-rows: 20px; 
+PASS 'autoFitColumns' with: grid-template-columns: repeat(auto-fit, 10px); and grid-template-rows: 20px; 
+PASS 'autoFillRows' with: grid-template-columns: 20px; and grid-template-rows: repeat(auto-fill, 10px); 
+PASS 'autoFitRows' with: grid-template-columns: 20px; and grid-template-rows: repeat(auto-fit, 10px); 
+PASS 'autoFillColumns' with: grid-template-columns: repeat(auto-fill, 9px); and grid-template-rows: 20px; 
+PASS 'autoFitColumns' with: grid-template-columns: repeat(auto-fit, 9px); and grid-template-rows: 20px; 
+PASS 'autoFillRows' with: grid-template-columns: 20px; and grid-template-rows: repeat(auto-fill, 9px); 
+PASS 'autoFitRows' with: grid-template-columns: 20px; and grid-template-rows: repeat(auto-fit, 9px); 
+PASS 'autoFillColumns' with: grid-template-columns: repeat(auto-fill, 30px); and grid-template-rows: 20px; 
+PASS 'autoFitColumns' with: grid-template-columns: repeat(auto-fit, 30px); and grid-template-rows: 20px; 
+PASS 'autoFillRows' with: grid-template-columns: 20px; and grid-template-rows: repeat(auto-fill, 30px); 
+PASS 'autoFitRows' with: grid-template-columns: 20px; and grid-template-rows: repeat(auto-fit, 30px); 
+   
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html
new file mode 100644 (file)
index 0000000..b06ffe5
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: auto repeat tracks in indefinite containers with minimum size</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-syntax">
+<meta name="assert" content="This test checks that we properly compute the number of required auto repeat tracks in indefinite sized containers with minimum sizes.">
+<link rel="stylesheet" href="support/grid.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<style>
+.grid {
+    display: inline-grid;
+    grid: 20px / 20px;
+    min-width: 20px;
+    min-height: 20px;
+    justify-content: start;
+    align-content: start;
+}
+</style>
+<div id="log"></div>
+
+<div id="autoFillColumns" class="grid"></div>
+<div id="autoFitColumns" class="grid"></div>
+
+<div id="autoFillRows" class="grid"></div>
+<div id="autoFitRows" class="grid"></div>
+
+<script>
+// Exact fit
+TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"]);
+TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"]);
+
+// Require an extra track
+TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 9px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"]);
+TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 9px)", "20px", ["repeat(3, 0px)", "0px 0px 0px"]);
+
+// A single repetition is enough to fill in all the available space
+TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 30px)", "20px", "30px", "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 30px)", "20px", "0px", "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 30px)", "20px", "30px");
+TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 30px)", "20px", "0px");
+</script>
index cb7a582..f90bd04 100644 (file)
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <title>CSS Grid Layout Test: grid-template-columns fit-content() reference file</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="../support/grid.css">
+<link rel="stylesheet" href="support/grid.css">
 <meta name="flags" content="ahem">
 <style>
 .grid {
index d492d45..c594d80 100644 (file)
@@ -7,7 +7,7 @@
 <link rel="match" href="grid-template-columns-fit-content-001-ref.html">
 <meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-columns, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
 <meta name="flags" content="ahem">
-<link rel="stylesheet" href="../support/grid.css">
+<link rel="stylesheet" href="support/grid.css">
 <style>
 .grid {
   justify-content: start;
index a1f83dc..a6785fc 100644 (file)
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="../support/grid.css">
+<link rel="stylesheet" href="support/grid.css">
 <meta name="flags" content="ahem">
 <style>
 .grid {
index 6d406c3..2931960 100644 (file)
@@ -7,7 +7,7 @@
 <link rel="match" href="grid-template-rows-fit-content-001-ref.html">
 <meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-rows, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
 <meta name="flags" content="ahem">
-<link rel="stylesheet" href="../support/grid.css">
+<link rel="stylesheet" href="support/grid.css">
 <style>
 .grid {
   justify-content: start;
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/grid.css b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/grid.css
new file mode 100644 (file)
index 0000000..602e114
--- /dev/null
@@ -0,0 +1,277 @@
+.grid {
+  display: grid;
+  background-color: grey;
+}
+
+.inline-grid {
+  display: inline-grid;
+  background-color: grey;
+}
+
+.firstRowFirstColumn {
+  background-color: blue;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+  background-color: blue;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.firstRowSecondColumn {
+  background-color: lime;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlySecondColumn {
+  background-color: lime;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+.secondRowFirstColumn {
+  background-color: purple;
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlyFirstColumn {
+  background-color: purple;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+.secondRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlySecondColumn {
+  background-color: orange;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.endSecondRowEndSecondColumn {
+  background-color: orange;
+  grid-column-end: 3;
+  grid-row-end: 3;
+}
+
+.thirdRowSecondColumn {
+  background-color: red;
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.firstRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.secondRowThirdColumn {
+  background-color: navy;
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.firstRowFourthColumn {
+  background-color: green;
+  grid-column: 4;
+  grid-row: 1;
+}
+
+.secondRowFourthColumn {
+  background-color: pink;
+  grid-column: 4;
+  grid-row: 2;
+}
+
+.firstAutoRowSecondAutoColumn {
+  grid-row: 1 / auto;
+  grid-column: 2 / auto;
+}
+
+.autoLastRowAutoLastColumn {
+  grid-row: auto / -1;
+  grid-column: auto / -1;
+}
+
+.autoSecondRowAutoFirstColumn {
+  grid-row: auto / 2;
+  grid-column: auto / 1;
+}
+
+.firstRowBothColumn {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+
+.secondRowBothColumn {
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+
+.bothRowFirstColumn {
+  grid-row: 1 / -1;
+  grid-column: 1;
+}
+
+.bothRowSecondColumn {
+  grid-row: 1 / -1;
+  grid-column: 2;
+}
+
+.bothRowBothColumn {
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+}
+
+/* Auto column / row. */
+.autoRowAutoColumn {
+  background-color: pink;
+  grid-column: auto;
+  grid-row: auto;
+}
+
+.firstRowAutoColumn {
+  background-color: blue;
+  grid-column: auto;
+  grid-row: 1;
+}
+
+.secondRowAutoColumn {
+  background-color: purple;
+  grid-column: auto;
+  grid-row: 2;
+}
+
+.thirdRowAutoColumn {
+  background-color: navy;
+  grid-column: auto;
+  grid-row: 3;
+}
+
+.autoRowFirstColumn {
+  background-color: lime;
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.autoRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: auto;
+}
+
+.autoRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: auto;
+}
+
+.autoRowAutoColumnSpanning2 {
+  background-color: maroon;
+  grid-column: span 2;
+  grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+  background-color: aqua;
+  grid-column: auto;
+  grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+  background-color: olive;
+  grid-column: span 3;
+  grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+  background-color: indigo;
+  grid-column: span 2;
+  grid-row: span 3;
+}
+
+.autoRowFirstColumnSpanning2 {
+  background-color: maroon;
+  grid-column: 1 / span 2;
+  grid-row: auto;
+}
+
+.autoRowSecondColumnSpanning2 {
+  background-color: olive;
+  grid-column: 2 / span 2;
+  grid-row: auto;
+}
+
+.firstRowSpanning2AutoColumn {
+  background-color: maroon;
+  grid-column: auto;
+  grid-row: 1 / span 2;
+  height: 100%;
+}
+
+.secondRowSpanning2AutoColumn {
+  background-color: olive;
+  grid-column: auto;
+  grid-row: 2 / span 2;
+  height: 100%;
+}
+
+/* Grid element flow. */
+.gridAutoFlowColumnSparse {
+  grid-auto-flow: column;
+}
+
+.gridAutoFlowColumnDense {
+  grid-auto-flow: column dense;
+}
+
+.gridAutoFlowRowSparse {
+  grid-auto-flow: row;
+}
+
+.gridAutoFlowRowDense {
+  grid-auto-flow: row dense;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+  width: 10px;
+  height: 10px;
+}
+
+.unconstrainedContainer {
+  width: 1000px;
+  height: 1000px;
+}
+
+.sizedToGridArea {
+  font: 10px/1 Ahem;
+  /* Make us fit our grid area. */
+  width: 100%;
+  height: 100%;
+}
+
+.verticalRL {
+  writing-mode: vertical-rl;
+}
+.verticalLR {
+  writing-mode: vertical-lr;
+}
+.horizontalTB {
+  writing-mode: horizontal-tb;
+}
+.directionRTL {
+  direction: rtl;
+}
+.directionLTR {
+  direction: ltr;
+}
index 202c865..217b620 100644 (file)
@@ -1,10 +1,14 @@
 var TestingUtils = (function() {
 
     function checkGridTemplateColumns(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
         assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
     }
 
     function checkGridTemplateRows(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
         assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
     }
 
@@ -19,6 +23,8 @@ var TestingUtils = (function() {
     }
 
     function checkGridTemplateAreas(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
         assert_in_array(getComputedStyle(element).gridTemplateAreas, value, "gridTemplateAreas");
     }
 
index fa4ea9b..ad08831 100644 (file)
@@ -14,4 +14,5 @@ Property values requiring vendor prefixes:
 None
 ------------------------------------------------------------------------
 List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/grid.css
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/support/testing-utils.js
index 0ddae0a..abcab4b 100644 (file)
@@ -19,6 +19,7 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/fr-unit-with-percentage.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/fr-unit.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
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html
index 173487a..b885c4a 100644 (file)
@@ -1,3 +1,20 @@
+2018-03-23  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Fix auto repeat tracks computation with definite min sizes
+        https://bugs.webkit.org/show_bug.cgi?id=183933
+
+        Reviewed by Javier Fernandez.
+
+        Indefinitely sized containers use the specified definite min-size (if any) as available
+        space in order to compute the number of auto repeat tracks to create. A bug in that code was
+        causing the grid to be one track larger than expected. That was only happening in the case
+        of the free space being a multiple of the total size of the autorepeat tracks.
+
+        Test: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeAutoRepeatTracksCount const):
+
 2018-03-23  Miguel Gomez  <magomez@igalia.com>
 
         [GTK][WPE] Avoid software color conversion inside BitmapTextureGL
index 120e97c..e835219 100644 (file)
@@ -506,12 +506,15 @@ unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection direc
     if (freeSpace <= 0)
         return autoRepeatTrackListLength;
 
-    unsigned repetitions = 1 + (freeSpace / (autoRepeatTracksSize + gapSize)).toInt();
+    LayoutUnit autoRepeatSizeWithGap = autoRepeatTracksSize + gapSize;
+    unsigned repetitions = 1 + (freeSpace / autoRepeatSizeWithGap).toUnsigned();
+    freeSpace -= autoRepeatSizeWithGap * (repetitions - 1);
+    ASSERT(freeSpace >= 0);
 
     // Provided the grid container does not have a definite size or max-size in the relevant axis,
     // if the min size is definite then the number of repetitions is the largest possible positive
     // integer that fulfills that minimum requirement.
-    if (needsToFulfillMinimumSize)
+    if (needsToFulfillMinimumSize && freeSpace)
         ++repetitions;
 
     return repetitions * autoRepeatTrackListLength;