[css-grid] Use max size to compute auto repeat tracks
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 May 2019 15:08:46 +0000 (15:08 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 May 2019 15:08:46 +0000 (15:08 +0000)
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: https://svn.webkit.org/repository/webkit/trunk@245279 268f45cc-cd09-0410-ab3c-d52691b4dbfc

14 files changed:
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index e7132da..06b7495 100644 (file)
@@ -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 (file)
index 0000000..b2203fa
--- /dev/null
@@ -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 (file)
index 0000000..e14f37a
--- /dev/null
@@ -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 (file)
index 0000000..aa08e81
--- /dev/null
@@ -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 (file)
index 0000000..0f8c860
--- /dev/null
@@ -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 (file)
index 0000000..aa08e81
--- /dev/null
@@ -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 (file)
index 0000000..e9d1fde
--- /dev/null
@@ -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 (file)
index 0000000..b2203fa
--- /dev/null
@@ -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 (file)
index 0000000..08d5ff8
--- /dev/null
@@ -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 (file)
index 0000000..aa08e81
--- /dev/null
@@ -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 (file)
index 0000000..5fe4f33
--- /dev/null
@@ -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>
index f7045c3..7e0710a 100644 (file)
@@ -18,6 +18,11 @@ List of files:
 /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
index 4f30011..8b6b239 100644 (file)
@@ -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.
index 760a032..e35a2c1 100644 (file)
@@ -456,24 +456,33 @@ unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection direc
     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;