[css-grid] Use max size to compute auto repeat tracks
https://bugs.webkit.org/show_bug.cgi?id=197854
Reviewed by Javier Fernandez.
LayoutTests/imported/w3c:
Imported WPT tests for this bug.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt: Added.
* web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html: Added.
* web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
Source/WebCore:
When available size is indefinite we should use max size to compute the number of auto repeat tracks.
The spec text is very clear (https://drafts.csswg.org/css-grid/#auto-repeat):
> When auto-fill is given as the repetition number, if the grid container
> has a definite size or **max size** in the relevant axis...
So far we were not doing that for widths, in this patch we modify RenderGrid::computeAutoRepeatTracksCount()
to do the same than for heights.
We also take advantage to fix problems related to min|max sizes and box-sizing property,
that were inconsistent for columns and rows.
Tests: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeAutoRepeatTracksCount const):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@245279 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
index e7132da..06b7495 100644
--- a/LayoutTests/imported/w3c/ChangeLog
+++ b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,24 @@
+2019-05-14 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Use max size to compute auto repeat tracks
+ https://bugs.webkit.org/show_bug.cgi?id=197854
+
+ Reviewed by Javier Fernandez.
+
+ Imported WPT tests for this bug.
+
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html: Added.
+ * web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
+
2019-05-14 Joonghun Park <jh718.park@samsung.com>
Implement page-break-* and -webkit-column-break-* as legacy-shorthands.
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt
new file mode 100644
index 0000000..b2203fa
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt
@@ -0,0 +1,14 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+PASS .grid 5
+PASS .grid 6
+PASS .grid 7
+PASS .grid 8
+PASS .grid 9
+PASS .grid 10
+PASS .grid 11
+PASS .grid 12
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html
new file mode 100644
index 0000000..e14f37a
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+ position: relative;
+ display: grid;
+ grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+ max-width: 300px;
+ max-height: 200px;
+}
+.border {
+ border: 10px solid;
+}
+.border-box {
+ box-sizing: border-box;
+}
+.item {
+ background: lime;
+ /* Place item on the last cell. */
+ grid-column: -2;
+ grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" data-expected-width="300" data-expected-height="170">
+ <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+ <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170">
+ <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170">
+ <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt
new file mode 100644
index 0000000..aa08e81
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt
@@ -0,0 +1,6 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
new file mode 100644
index 0000000..0f8c860
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+ position: relative;
+ display: grid;
+ grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+ max-width: 50%;
+ max-height: 80%;
+}
+.wrapper {
+ width: 600px;
+ height: 250px;
+}
+.item {
+ background: lime;
+ /* Place item on the last cell. */
+ grid-column: -2;
+ grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="wrapper">
+ <div class="grid" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="wrapper">
+ <div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="wrapper">
+ <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="wrapper">
+ <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt
new file mode 100644
index 0000000..aa08e81
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt
@@ -0,0 +1,6 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
new file mode 100644
index 0000000..e9d1fde
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks with min and max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks don't overflow the grid container size when max size is definite, even if min size is bigger than that.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+ position: relative;
+ display: grid;
+ grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+ max-width: 100px;
+ min-width: 250px;
+ max-height: 50px;
+ min-height: 125px;
+ float: left;
+}
+.border {
+ border: 10px solid;
+}
+.border-box {
+ box-sizing: border-box;
+}
+.item {
+ background: lime;
+ /* Place item on the last cell. */
+ grid-column: -2;
+ grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="250" data-expected-height="125">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125">
+ <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt
new file mode 100644
index 0000000..b2203fa
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt
@@ -0,0 +1,14 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+PASS .grid 5
+PASS .grid 6
+PASS .grid 7
+PASS .grid 8
+PASS .grid 9
+PASS .grid 10
+PASS .grid 11
+PASS .grid 12
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
new file mode 100644
index 0000000..08d5ff8
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and min sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+ position: relative;
+ display: grid;
+ grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+ min-width: 300px;
+ min-height: 200px;
+ float: left;
+}
+.border {
+ border: 10px solid;
+}
+.border-box {
+ box-sizing: border-box;
+}
+.item {
+ background: lime;
+ /* Place item on the last cell. */
+ grid-column: -2;
+ grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt
new file mode 100644
index 0000000..aa08e81
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt
@@ -0,0 +1,6 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
new file mode 100644
index 0000000..5fe4f33
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+ position: relative;
+ display: grid;
+ grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+ min-width: 50%;
+ min-height: 80%;
+ float: left;
+}
+.wrapper {
+ width: 600px;
+ height: 250px;
+}
+.item {
+ background: lime;
+ /* Place item on the last cell. */
+ grid-column: -2;
+ grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="wrapper">
+ <div class="grid" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="wrapper">
+ <div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="wrapper">
+ <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="wrapper">
+ <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+ <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+</body>
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 f7045c3..7e0710a 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
@@ -18,6 +18,11 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/fr-unit-with-percentage-expected.html
/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-auto-repeat-max-size-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
+/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-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 4f30011..8b6b239 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,31 @@
+2019-05-14 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Use max size to compute auto repeat tracks
+ https://bugs.webkit.org/show_bug.cgi?id=197854
+
+ Reviewed by Javier Fernandez.
+
+ When available size is indefinite we should use max size to compute the number of auto repeat tracks.
+
+ The spec text is very clear (https://drafts.csswg.org/css-grid/#auto-repeat):
+ > When auto-fill is given as the repetition number, if the grid container
+ > has a definite size or **max size** in the relevant axis...
+
+ So far we were not doing that for widths, in this patch we modify RenderGrid::computeAutoRepeatTracksCount()
+ to do the same than for heights.
+
+ We also take advantage to fix problems related to min|max sizes and box-sizing property,
+ that were inconsistent for columns and rows.
+
+ Tests: imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html
+ imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
+ imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
+ imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
+ imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::computeAutoRepeatTracksCount const):
+
2019-05-14 Joonghun Park <pjh0718@gmail.com>
Implement page-break-* and -webkit-column-break-* as legacy-shorthands.
diff --git a/Source/WebCore/rendering/RenderGrid.cpp b/Source/WebCore/rendering/RenderGrid.cpp
index 760a032..e35a2c1 100644
--- a/Source/WebCore/rendering/RenderGrid.cpp
+++ b/Source/WebCore/rendering/RenderGrid.cpp
@@ -456,24 +456,33 @@
if (!autoRepeatTrackListLength)
return 0;
- if (!isRowAxis && !availableSize) {
- const Length& maxLength = style().logicalMaxHeight();
- if (!maxLength.isUndefined()) {
- availableSize = computeContentLogicalHeight(MaxSize, maxLength, WTF::nullopt);
- if (availableSize)
- availableSize = constrainContentBoxLogicalHeightByMinMax(availableSize.value(), WTF::nullopt);
- }
- }
-
bool needsToFulfillMinimumSize = false;
if (!availableSize) {
+ const Length& maxSize = isRowAxis ? style().logicalMaxWidth() : style().logicalMaxHeight();
+ Optional<LayoutUnit> containingBlockAvailableSize;
+ Optional<LayoutUnit> availableMaxSize;
+ if (maxSize.isSpecified()) {
+ if (maxSize.isPercentOrCalculated())
+ containingBlockAvailableSize = isRowAxis ? containingBlockLogicalWidthForContent() : containingBlockLogicalHeightForContent(ExcludeMarginBorderPadding);
+ LayoutUnit maxSizeValue = valueForLength(maxSize, containingBlockAvailableSize.valueOr(LayoutUnit()));
+ availableMaxSize = isRowAxis ? adjustContentBoxLogicalWidthForBoxSizing(maxSizeValue) : adjustContentBoxLogicalHeightForBoxSizing(maxSizeValue);
+ }
+
const Length& minSize = isRowAxis ? style().logicalMinWidth() : style().logicalMinHeight();
- if (!minSize.isSpecified())
+ if (!availableMaxSize && !minSize.isSpecified())
return autoRepeatTrackListLength;
- LayoutUnit containingBlockAvailableSize = isRowAxis ? containingBlockLogicalWidthForContent() : containingBlockLogicalHeightForContent(ExcludeMarginBorderPadding);
- availableSize = valueForLength(minSize, containingBlockAvailableSize);
- needsToFulfillMinimumSize = true;
+ Optional<LayoutUnit> availableMinSize;
+ if (minSize.isSpecified()) {
+ if (!containingBlockAvailableSize && minSize.isPercentOrCalculated())
+ containingBlockAvailableSize = isRowAxis ? containingBlockLogicalWidthForContent() : containingBlockLogicalHeightForContent(ExcludeMarginBorderPadding);
+ LayoutUnit minSizeValue = valueForLength(minSize, containingBlockAvailableSize.valueOr(LayoutUnit()));
+ availableMinSize = isRowAxis ? adjustContentBoxLogicalWidthForBoxSizing(minSizeValue) : adjustContentBoxLogicalHeightForBoxSizing(minSizeValue);
+ if (!maxSize.isSpecified())
+ needsToFulfillMinimumSize = true;
+ }
+
+ availableSize = std::max(availableMinSize.valueOr(LayoutUnit()), availableMaxSize.valueOr(LayoutUnit()));
}
LayoutUnit autoRepeatTracksSize;
