Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (245278 => 245279)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2019-05-14 15:07:19 UTC (rev 245278)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2019-05-14 15:08:46 UTC (rev 245279)
@@ -1,3 +1,24 @@
+2019-05-14 Manuel Rego Casasnovas <[email protected]>
+
+ [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 <[email protected]>
Implement page-break-* and -webkit-column-break-* as legacy-shorthands.
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001-expected.txt 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.html 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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=""
+<link rel="help" href=""
+<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=""
+<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=""
+<script src=""
+<script src=""
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002-expected.txt 2019-05-14 15:08:46 UTC (rev 245279)
@@ -0,0 +1,6 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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=""
+<link rel="help" href=""
+<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=""
+<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=""
+<script src=""
+<script src=""
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001-expected.txt 2019-05-14 15:08:46 UTC (rev 245279)
@@ -0,0 +1,6 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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=""
+<link rel="help" href=""
+<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=""
+<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=""
+<script src=""
+<script src=""
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001-expected.txt 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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=""
+<link rel="help" href=""
+<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=""
+<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=""
+<script src=""
+<script src=""
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002-expected.txt 2019-05-14 15:08:46 UTC (rev 245279)
@@ -0,0 +1,6 @@
+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html (0 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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=""
+<link rel="help" href=""
+<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=""
+<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=""
+<script src=""
+<script src=""
+<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>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log (245278 => 245279)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log 2019-05-14 15:07:19 UTC (rev 245278)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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
Modified: trunk/Source/WebCore/ChangeLog (245278 => 245279)
--- trunk/Source/WebCore/ChangeLog 2019-05-14 15:07:19 UTC (rev 245278)
+++ trunk/Source/WebCore/ChangeLog 2019-05-14 15:08:46 UTC (rev 245279)
@@ -1,3 +1,31 @@
+2019-05-14 Manuel Rego Casasnovas <[email protected]>
+
+ [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 <[email protected]>
Implement page-break-* and -webkit-column-break-* as legacy-shorthands.
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (245278 => 245279)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2019-05-14 15:07:19 UTC (rev 245278)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2019-05-14 15:08:46 UTC (rev 245279)
@@ -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);
}
- }
- bool needsToFulfillMinimumSize = false;
- if (!availableSize) {
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;
