Diff
Modified: trunk/LayoutTests/ChangeLog (238487 => 238488)
--- trunk/LayoutTests/ChangeLog 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/LayoutTests/ChangeLog 2018-11-26 08:06:52 UTC (rev 238488)
@@ -1,3 +1,17 @@
+2018-11-26 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix grid container sizing under min-content height
+ https://bugs.webkit.org/show_bug.cgi?id=191889
+
+ Reviewed by Javier Fernandez.
+
+ Update tests results to the new behavior.
+ Also modified a little bit the test to keep them in sync with Blink versions.
+
+ * fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt:
+ * fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html:
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html:
+
2018-11-25 Ryan Haddad <[email protected]>
Unreviewed test gardening, rebaseline webgpu/queue-creation.html.
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt (238487 => 238488)
--- trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt 2018-11-26 08:06:52 UTC (rev 238488)
@@ -1,3 +1,21 @@
+
+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
+PASS .grid 13
+PASS .grid 14
+PASS .grid 15
+PASS .grid 16
+PASS .grid 17
This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.
Grid using fixed width and height.
@@ -7,7 +25,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under min-content constrain and fixed height.
All grid items sized with min-{width, height} auto.
Orthogonal green row track assumed as infinity, hence 10px for the column track. Actual row tracks size is different, hence overflowing.
@@ -15,7 +32,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under max-content constrain and fixed height.
All grid items sized with min-{width, height} auto.
Parallel blue column track sized as its max of 150x, while Orthogonal green row, assumed as infinity, sized as 10px. Since actual row tracks size is different, green column track will occupy some space initally assigned to the blue one.
@@ -23,7 +39,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under fit-content constrain and fixed height.
All grid items sized with min-{width, height} auto.
Since we use assumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.
@@ -31,7 +46,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under min-content constrain.
All grid items sized with min-{width, height} auto.
Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.
@@ -39,7 +53,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under min-content constrain.
All grid items sized with min-{width, height} auto.
Both paralell and orthogonal tracks reach their maximum sizes.
@@ -47,7 +60,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under min-content constrain.
All grid items sized with min-{width, height} auto.
Same result as sizing under max-content constrain.
@@ -55,7 +67,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid using fixed width and height.
All grid items sized with min-width: 0px, min-height: auto.
Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.
@@ -63,7 +74,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under min-content constrain and fixed height.
All grid items sized with min-width: 0px, min-height: auto.
Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
@@ -71,7 +81,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under max-content constrain and fixed height.
All grid items sized with min-width: 0px, min-height: auto.
Since container is sized under max-content, tracks will use its maximum size.
@@ -79,7 +88,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under min-content constrain.
All grid items sized with min-width: auto, min-height: 0px.
Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
@@ -87,7 +95,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under max-content constrain.
All grid items sized with min-width: auto, min-height: 0px.
Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
@@ -95,7 +102,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid using fixed width and height.
All grid items sized with min-width: 50px, min-height: auto.
Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.
@@ -103,7 +109,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under min-content constrain and fixed height.
All grid items sized with min-width: 50px, min-height: auto.
Column tracks size is set by min-width, while rows grow until exhaust the available height.
@@ -111,7 +116,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid width under max-content constrain and fixed height.
All grid items sized with min-width: 50px, min-height: auto.
.
@@ -119,7 +123,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under min-content constrain.
All grid items sized with min-width: auto, min-height: 50px.
Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.
@@ -127,7 +130,6 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Grid with fixed width and height under max-content constrain.
All grid items sized with min-width: auto, min-height: 50px.
Orthogonal rows can grow now to reach their maximum, exceeding min-height as well, while parallel row tracks are still sized according to min-height.
@@ -135,4 +137,3 @@
XX XXX X XXX XX
X XXX XX XXXXX XX XXX X XXXX X XX
XXXX XX X XX XXX
-PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html (238487 => 238488)
--- trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html 2018-11-26 08:06:52 UTC (rev 238488)
@@ -31,8 +31,11 @@
grid-row: 1 / 3;
}
</style>
-<script src=""
+<script src=""
+<script src=""
+<script src=""
<body _onload_="checkLayout('.grid')">
+<div id="log"></div>
<p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
<div class="container">
@@ -73,10 +76,10 @@
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.</p>
- <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="90">
+ <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="490">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
- <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
- <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="40">XXXX XX X XX XXX</div>
+ <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+ <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
@@ -129,10 +132,10 @@
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
- <div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="0">
+ <div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="490">
<div class="minHeightZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
- <div class="minHeightZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
- <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="40">XXXX XX X XX XXX</div>
+ <div class="minHeightZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+ <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
@@ -174,10 +177,10 @@
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.</p>
- <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="100">
+ <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="490">
<div class="minHeightFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
- <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
- <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="50">XXXX XX X XX XXX</div>
+ <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+ <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
Modified: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (238487 => 238488)
--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2018-11-26 08:06:52 UTC (rev 238488)
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<style>
@@ -7,9 +8,6 @@
.grid {
grid-template-rows: minmax(0px, 100px);
width: 40px;
-
- align-items: start;
- justify-items: start;
}
.max-height-35 { max-height: 35px; }
@@ -24,31 +22,31 @@
<h2>Check the behavior of grids under max-content constraints.</h2>
<div class="max-content max-height-35">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX XXX</div>
</div>
</div>
<div class="max-content max-height-min-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
</div>
</div>
<div class="max-height-min-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</div>
</div>
<div class="max-content max-height-fill-available">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXX X XXX</div>
</div>
</div>
<div class="max-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXX XX</div>
</div>
</div>
@@ -57,11 +55,11 @@
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX XXX</div>
</div>
-<div class="grid max-content max-height-min-content" data-expected-width="40" data-expected-height="0">
+<div class="grid max-content max-height-min-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
</div>
-<div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
+<div class="grid max-height-min-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</div>
@@ -76,19 +74,19 @@
<br>
<h2>Check the behavior of grids under min-content contstraints.</h2>
<div class="min-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
</div>
</div>
<div class="min-content min-height-50">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</div>
</div>
<div class="min-content min-height-fit-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXXX</div>
</div>
</div>
@@ -95,7 +93,7 @@
<div style="height: 200px;">
<div class="min-content min-height-fill-available">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXXX XXXX XXX</div>
</div>
</div>
@@ -102,99 +100,99 @@
</div>
<div class="min-content min-height-min-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</div>
</div>
<div class="min-content min-height-35">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX</div>
</div>
</div>
<div class="min-content min-height-max-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX X</div>
</div>
</div>
<div class="min-content min-height-50">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XXXX XXXX XXXX</div>
</div>
</div>
<div class="min-content max-height-50">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="100">XXXX X X XXXX</div>
</div>
</div>
-<div class="grid min-content" data-expected-width="40" data-expected-height="0">
+<div class="grid itemsStart min-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
</div>
-<div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
+<div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</div>
-<div class="grid min-content min-height-fit-content" data-expected-width="40" data-expected-height="100">
+<div class="grid itemsStart min-content min-height-fit-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXXX</div>
</div>
<div style="height: 200px;">
- <div class="grid min-content min-height-fill-available" data-expected-width="40" data-expected-height="200">
+ <div class="grid itemsStart min-content min-height-fill-available" data-expected-width="40" data-expected-height="200">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXXX XXXX XXX</div>
</div>
</div>
-<div class="grid min-content min-height-min-content" data-expected-width="40" data-expected-height="0">
+<div class="grid itemsStart min-content min-height-min-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</div>
-<div class="grid min-content min-height-35" data-expected-width="40" data-expected-height="35">
+<div class="grid itemsStart min-content min-height-35" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX</div>
</div>
-<div class="grid min-content min-height-max-content" data-expected-width="40" data-expected-height="100">
+<div class="grid itemsStart min-content min-height-max-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX X</div>
</div>
-<div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
+<div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XXXX XXXX XXXX</div>
</div>
-<div class="grid min-content max-height-50" data-expected-width="40" data-expected-height="0">
+<div class="grid itemsStart min-content max-height-50" data-expected-width="40" data-expected-height="50">
<div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="100">XXXX X X XXXX</div>
</div>
<br>
<h2>Check the behavior of grids with definite available space.</h2>
-<div class="grid" style="height: 100px;" data-expected-width="40" data-expected-height="100">
+<div class="grid itemsStart" style="height: 100px;" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
</div>
-<div class="grid max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">
+<div class="grid itemsStart max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX XX</div>
</div>
-<div class="grid min-height-50" style="height: 10px;" data-expected-width="40" data-expected-height="50">
+<div class="grid itemsStart min-height-50" style="height: 10px;" data-expected-width="40" data-expected-height="50">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX XXXX</div>
</div>
-<div class="grid min-height-50" style="height: 20px; data-expected-width="40" data-expected-height="50">
+<div class="grid itemsStart min-height-50" style="height: 20px;" data-expected-width="40" data-expected-height="50">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX XXX XX XXX XX XXX</div>
</div>
<div style="height: 100px;">
- <div class="grid" style="height: 37%;" data-expected-width="40" data-expected-height="37">
+ <div class="grid itemsStart" style="height: 37%;" data-expected-width="40" data-expected-height="37">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="37">X X X X</div>
</div>
- <div class="grid min-height-50" style="height: 37%;" data-expected-width="40" data-expected-height="50">
+ <div class="grid itemsStart min-height-50" style="height: 37%;" data-expected-width="40" data-expected-height="50">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX XX XX</div>
</div>
- <div class="grid min-height-35" style="height: 37%;" data-expected-width="40" data-expected-height="37">
+ <div class="grid itemsStart min-height-35" style="height: 37%;" data-expected-width="40" data-expected-height="37">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="37">XXXX</div>
</div>
</div>
@@ -202,60 +200,60 @@
<br>
<h2>Check the behavior of grids with indefinite available space.</h2>
<div class="fit-content">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</div>
- <div class="grid min-height-35" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart min-height-35" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXXX X</div>
</div>
- <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
+ <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
</div>
- <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart fit-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XX X</div>
</div>
</div>
<div class="fit-content" style="height: 125px;">
- <div class="grid fill-available" data-expected-width="40" data-expected-height="125">
+ <div class="grid itemsStart fill-available" data-expected-width="40" data-expected-height="125">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XX X</div>
</div>
</div>
<div class="fit-content min-height-50">
- <div class="grid" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XX X XXX</div>
</div>
- <div class="grid min-height-35" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart min-height-35" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX X X</div>
</div>
- <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
+ <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX XX</div>
</div>
- <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
+ <div class="grid itemsStart fit-content" data-expected-width="40" data-expected-height="100">
<div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX X</div>
</div>
</div>
<div class="fit-content min-height-50" style="height: 75px;">
- <div class="grid fill-available" data-expected-width="40" data-expected-height="75">
- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
- </div>
+ <div class="grid itemsStart fill-available" data-expected-width="40" data-expected-height="75">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="75">XX X</div>
+ </div>
</div>
<div style="height: 25px;">
- <div class="grid fit-content" data-expected-width="40" data-expected-height="25">
- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
- </div>
- <div class="grid fill-available" data-expected-width="40" data-expected-height="25">
- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
- </div>
- <div class="grid fit-content min-height-35" data-expected-width="40" data-expected-height="35">
- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
- </div>
- <div class="grid fit-content max-height-min-content" data-expected-width="40" data-expected-height="0">
- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
- </div>
+ <div class="grid itemsStart fit-content" data-expected-width="40" data-expected-height="100">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
+ </div>
+ <div class="grid itemsStart fill-available" data-expected-width="40" data-expected-height="25">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="25">XX X</div>
+ </div>
+ <div class="grid itemsStart fit-content min-height-35" data-expected-width="40" data-expected-height="100">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
+ </div>
+ <div class="grid itemsStart fit-content max-height-min-content" data-expected-width="40" data-expected-height="100">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
+ </div>
</div>
</body>
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (238487 => 238488)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2018-11-26 08:06:52 UTC (rev 238488)
@@ -1,3 +1,16 @@
+2018-11-26 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix grid container sizing under min-content height
+ https://bugs.webkit.org/show_bug.cgi?id=191889
+
+ Reviewed by Javier Fernandez.
+
+ Imported tests from WPT.
+
+ * web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html: Added.
+ * web-platform-tests/css/css-grid/grid-model/w3c-import.log:
+
2018-11-23 Javier Fernandez <[email protected]>
[css-grid] Implement Baseline Alignment for grid items
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001-expected.txt (0 => 238488)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001-expected.txt 2018-11-26 08:06:52 UTC (rev 238488)
@@ -0,0 +1,17 @@
+
+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
+PASS .grid 13
+PASS .grid 14
+PASS .grid 15
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html (0 => 238488)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html 2018-11-26 08:06:52 UTC (rev 238488)
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<link rel="help" href=""
+<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.">
+<style>
+ .grid {
+ display: grid;
+ float: left;
+ background: lime;
+ }
+
+ .grid-columns-minmax-50-100 {
+ grid-template-columns: minmax(50px, 100px);
+ }
+
+ .grid-columns-minmax-100-200 {
+ grid-template-columns: minmax(100px, 200px);
+ }
+
+ .grid-rows-minmax-50-100 {
+ grid-template-rows: minmax(50px, 100px);
+ }
+
+ .min-content {
+ width: min-content;
+ height: min-content;
+ }
+
+ .max-content {
+ width: max-content;
+ height: max-content;
+ }
+</style>
+<script src=""
+<script src=""
+<script src=""
+
+<body _onload_="checkLayout('.grid');">
+
+ <div id="log"></div>
+
+ <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="min-content">
+ <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+ </div>
+
+ <div class="max-content">
+ <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+ </div>
+
+ <div style="writing-mode: vertical-lr;">
+
+ <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="min-content">
+ <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+ </div>
+
+ <div class="max-content">
+ <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+ </div>
+
+ </div>
+
+ <div style="writing-mode: vertical-rl;">
+
+ <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+
+ <div class="min-content">
+ <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+ </div>
+
+ <div class="max-content">
+ <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+ data-expected-width="100" data-expected-height="100"></div>
+ </div>
+
+ </div>
+
+</body>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/w3c-import.log (238487 => 238488)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/w3c-import.log 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/w3c-import.log 2018-11-26 08:06:52 UTC (rev 238488)
@@ -30,6 +30,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-display-grid-001-expected.xht
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-display-grid-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-display-inline-grid-001-expected.xht
Modified: trunk/Source/WebCore/ChangeLog (238487 => 238488)
--- trunk/Source/WebCore/ChangeLog 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/Source/WebCore/ChangeLog 2018-11-26 08:06:52 UTC (rev 238488)
@@ -1,3 +1,34 @@
+2018-11-26 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix grid container sizing under min-content height
+ https://bugs.webkit.org/show_bug.cgi?id=191889
+
+ Reviewed by Javier Fernandez.
+
+ The spec is quite clear
+ (https://drafts.csswg.org/css-sizing/#valdef-width-min-content):
+ "min-content
+ If specified for the inline axis, use the min-content inline size;
+ otherwise behaves as the property’s initial value."
+
+ So if a grid container has "height: min-content" it should behave
+ the same than with "height: auto".
+
+ The patch removes computeIntrinsicLogicalContentHeightUsing() in
+ RenderGrid as we don't need a custom one anymore.
+ We can also get rid of m_minContentHeight and m_maxContentHeight
+ attributes that were only used for this logic.
+
+ Test: fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
+ fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
+ imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutBlock):
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths const):
+ (WebCore::RenderGrid::computeTrackSizesForIndefiniteSize const):
+ * rendering/RenderGrid.h:
+
2018-11-25 Zalan Bujtas <[email protected]>
[LFC] Remove PointInContainingBlock and PositionInContainingBlock
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (238487 => 238488)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2018-11-26 08:06:52 UTC (rev 238488)
@@ -245,18 +245,9 @@
// 2- Next, the track sizing algorithm resolves the sizes of the grid rows,
// using the grid column sizes calculated in the previous step.
- if (!hasDefiniteLogicalHeight) {
- m_minContentHeight = 0_lu;
- m_maxContentHeight = 0_lu;
- computeTrackSizesForIndefiniteSize(m_trackSizingAlgorithm, ForRows, *m_minContentHeight, *m_maxContentHeight);
- // FIXME: This should be really added to the intrinsic height in RenderBox::computeContentAndScrollbarLogicalHeightUsing().
- // Remove this when that is fixed.
- ASSERT(m_minContentHeight);
- ASSERT(m_maxContentHeight);
- LayoutUnit scrollbarHeight = scrollbarLogicalHeight();
- *m_minContentHeight += scrollbarHeight;
- *m_maxContentHeight += scrollbarHeight;
- } else
+ if (!hasDefiniteLogicalHeight)
+ computeTrackSizesForIndefiniteSize(m_trackSizingAlgorithm, ForRows);
+ else
computeTrackSizesForDefiniteSize(ForRows, availableLogicalHeight(ExcludeMarginBorderPadding));
LayoutUnit trackBasedLogicalHeight = m_trackSizingAlgorithm.computeTrackBasedSize() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
setLogicalHeight(trackBasedLogicalHeight);
@@ -416,7 +407,7 @@
}
}
- computeTrackSizesForIndefiniteSize(algorithm, ForColumns, minLogicalWidth, maxLogicalWidth);
+ computeTrackSizesForIndefiniteSize(algorithm, ForColumns, &minLogicalWidth, &maxLogicalWidth);
if (hadExcludedChildren) {
minLogicalWidth = std::max(minLogicalWidth, childMinWidth);
@@ -428,7 +419,7 @@
maxLogicalWidth += scrollbarWidth;
}
-void RenderGrid::computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm& algorithm, GridTrackSizingDirection direction, LayoutUnit& minIntrinsicSize, LayoutUnit& maxIntrinsicSize) const
+void RenderGrid::computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm& algorithm, GridTrackSizingDirection direction, LayoutUnit* minIntrinsicSize, LayoutUnit* maxIntrinsicSize) const
{
const Grid& grid = algorithm.grid();
algorithm.setup(direction, numTracks(direction, grid), IntrinsicSizeComputation, std::nullopt, std::nullopt);
@@ -437,34 +428,14 @@
size_t numberOfTracks = algorithm.tracks(direction).size();
LayoutUnit totalGuttersSize = guttersSize(grid, direction, 0, numberOfTracks, std::nullopt);
- minIntrinsicSize = algorithm.minContentSize() + totalGuttersSize;
- maxIntrinsicSize = algorithm.maxContentSize() + totalGuttersSize;
+ if (minIntrinsicSize)
+ *minIntrinsicSize = algorithm.minContentSize() + totalGuttersSize;
+ if (maxIntrinsicSize)
+ *maxIntrinsicSize = algorithm.maxContentSize() + totalGuttersSize;
ASSERT(algorithm.tracksAreWiderThanMinTrackBreadth());
}
-std::optional<LayoutUnit> RenderGrid::computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, std::optional<LayoutUnit> intrinsicLogicalHeight, LayoutUnit borderAndPadding) const
-{
- if (!intrinsicLogicalHeight)
- return std::nullopt;
-
- if (logicalHeightLength.isMinContent())
- return m_minContentHeight;
-
- if (logicalHeightLength.isMaxContent())
- return m_maxContentHeight;
-
- if (logicalHeightLength.isFitContent()) {
- LayoutUnit fillAvailableExtent = containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding);
- return std::min(m_maxContentHeight.value_or(0), std::max(m_minContentHeight.value_or(0), fillAvailableExtent));
- }
-
- if (logicalHeightLength.isFillAvailable())
- return containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding) - borderAndPadding;
- ASSERT_NOT_REACHED();
- return std::nullopt;
-}
-
unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection direction, std::optional<LayoutUnit> availableSize) const
{
ASSERT(!availableSize || availableSize.value() != -1);
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (238487 => 238488)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2018-11-26 06:55:00 UTC (rev 238487)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2018-11-26 08:06:52 UTC (rev 238488)
@@ -101,8 +101,6 @@
bool explicitGridDidResize(const RenderStyle&) const;
bool namedGridLinesDefinitionDidChange(const RenderStyle&) const;
- std::optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, std::optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const override;
-
unsigned computeAutoRepeatTracksCount(GridTrackSizingDirection, std::optional<LayoutUnit> availableSize) const;
unsigned clampAutoRepeatTracks(GridTrackSizingDirection, unsigned autoRepeatTracks) const;
@@ -127,7 +125,7 @@
void layoutPositionedObject(RenderBox&, bool relayoutChildren, bool fixedPositionObjectsOnly) override;
void computeTrackSizesForDefiniteSize(GridTrackSizingDirection, LayoutUnit availableSpace);
- void computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm&, GridTrackSizingDirection, LayoutUnit& minIntrinsicSize, LayoutUnit& maxIntrinsicSize) const;
+ void computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm&, GridTrackSizingDirection, LayoutUnit* minIntrinsicSize = nullptr, LayoutUnit* maxIntrinsicSize = nullptr) const;
LayoutUnit computeTrackBasedLogicalHeight() const;
void repeatTracksSizingIfNeeded(LayoutUnit availableSpaceForColumns, LayoutUnit availableSpaceForRows);
@@ -200,9 +198,6 @@
OutOfFlowPositionsMap m_outOfFlowItemColumn;
OutOfFlowPositionsMap m_outOfFlowItemRow;
- std::optional<LayoutUnit> m_minContentHeight;
- std::optional<LayoutUnit> m_maxContentHeight;
-
bool m_hasAnyOrthogonalItem {false};
bool m_baselineItemsCached {false};
};
