Diff
Modified: trunk/LayoutTests/ChangeLog (192153 => 192154)
--- trunk/LayoutTests/ChangeLog 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/ChangeLog 2015-11-09 12:56:43 UTC (rev 192154)
@@ -1,3 +1,26 @@
+2015-11-02 Sergio Villar Senin <svil...@igalia.com>
+
+ [css-grid] Improve grid container sizing with size constraints and intrinsic sizes
+ https://bugs.webkit.org/show_bug.cgi?id=150679
+
+ Reviewed by Darin Adler.
+
+ * fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt: Added.
+ * fast/css-grid-layout/absolute-positioning-definite-sizes.html: Added.
+ * fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt: Added.
+ * fast/css-grid-layout/flex-and-intrinsic-sizes.html: Added.
+ * fast/css-grid-layout/grid-element-change-columns-repaint.html:
+ * fast/css-grid-layout/grid-item-change-column-repaint.html:
+ * fast/css-grid-layout/grid-preferred-logical-widths.html:
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt: Added.
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html: Added.
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt: Added.
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html: Added.
+ * fast/css-grid-layout/percent-of-indefinite-track-size.html:
+ * fast/events/key-events-in-editable-gridbox-expected.txt:
+ * fast/events/key-events-in-editable-gridbox.html: Added more test
+ cases for intrinsic and fixed sized heights.
+
2015-11-05 Sergio Villar Senin <svil...@igalia.com>
[css-grid] Grid placement conflict handling
Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,5 @@
+Items should extend to fill the width of the absolutely positioned grid container.
+
+XXX X
+XX XXX XX
+PASS
Property changes on: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template: 1fr / 50px 1fr;
+
+ position: absolute;
+ left: 50px;
+ top: 50px;
+
+ width: 200px;
+ height: 200px;
+
+ border: 7px solid #ccc;
+ font: 10px/1 Ahem;
+}
+
+.row1 {
+ grid-row-start: 1;
+ background-color: yellow;
+}
+
+.row2 {
+ grid-row-start: 2;
+ background-color: cyan;
+}
+</style>
+
+<p>Items should extend to fill the width of the absolutely positioned grid container.</p>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<div class="grid">
+ <div class="row1" data-expected-height="50" data-expected-width="200">XXX X</div>
+ <div class="row2" data-expected-height="150" data-expected-width="200">XX XXX XX</div>
+</div>
+
+</body>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,19 @@
+This test checks that fr tracks are properly sized whenever grid have intrinsic sizes.
+
+XXX XXX
+PASS
+XXX XXX
+FAIL:
+Expected 30 for width, but got 70.
+
+<div class="container">
+ <div class="grid minContent" data-expected-width="30" data-expected-height="10">
+ <div>XXX XXX</div>
+ </div>
+</div>
+XXX XXX
+PASS
+XXX XXX
+PASS
+XXX XXX
+PASS
Property changes on: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+<link href="" rel="stylesheet">
+
+<style>
+.container {
+ width: 100px;
+ height: 100px;
+}
+
+.grid {
+ -webkit-grid-template-columns: 1fr;
+ -webkit-grid-template-rows: 1fr;
+}
+
+div { font: 10px/1 Ahem; }
+
+.minContent {
+ width: -webkit-min-content;
+ height: -webkit-min-content;
+}
+
+.maxContent {
+ width: -webkit-max-content;
+ height: -webkit-max-content;
+}
+
+.fitContent {
+ width: -webkit-fit-content;
+ height: -webkit-fit-content;
+}
+
+.fillAvailable {
+ width: -webkit-fill-available;
+ height: -webkit-fill-available;
+}
+
+</style>
+
+<script src=""
+
+<body _onload_="checkLayout('.grid')">
+
+<p>This test checks that fr tracks are properly sized whenever grid have intrinsic sizes.</p>
+
+<div class="container">
+ <div class="grid" data-expected-width="100" data-expected-height="10">
+ <div>XXX XXX</div>
+ </div>
+</div>
+
+<!-- This fails due to https://bugs.webkit.org/show_bug.cgi?id=150674 -->
+<div class="container">
+ <div class="grid minContent" data-expected-width="30" data-expected-height="10">
+ <div>XXX XXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid maxContent" data-expected-width="70" data-expected-height="10">
+ <div>XXX XXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid fitContent" data-expected-width="70" data-expected-height="10">
+ <div>XXX XXX</div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="grid fillAvailable" data-expected-width="100" data-expected-height="100">
+ <div>XXX XXX</div>
+ </div>
+</div>
+
+</body>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html (192153 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -16,7 +16,7 @@
}
.grid {
- width: -webkit-fit-content;
+ width: -webkit-min-content;
-webkit-grid-template-rows: 50px;
-webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
}
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html (192153 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -16,7 +16,7 @@
}
.grid {
- width: -webkit-fit-content;
+ width: -webkit-min-content;
-webkit-grid-template-rows: 50px;
-webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
}
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html (192153 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -43,8 +43,6 @@
margin: 10px 20px 30px 40px;
}
-.dummyContainer { }
-
.minWidth70 {
min-width: 70px;
}
@@ -56,230 +54,160 @@
</style>
</head>
<script src=""
-<body _onload_="checkLayout('.dummyContainer')">
+<body _onload_="checkLayout('.grid')">
<body>
<p>This test checks that the grid element's preferred logical widths are properly computed with different combinations of minmax().</p>
-<div class="dummyContainer">
- <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="40">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="40">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="80">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
- <div class="firstRowFirstColumn">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn">XXXXX XXXXX</div>
- </div>
+<div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
+ <div class="firstRowFirstColumn">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="100">
- <div class="firstRowFirstColumn">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn">XXXXX XXXXX</div>
- </div>
+<div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="100">
+ <div class="firstRowFirstColumn">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="160">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="160">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div>
-</div>
+<div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div>
-<div class="dummyContainer">
- <div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div>
-</div>
+<div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div>
-<div class="dummyContainer">
- <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="40">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="40">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="160">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="160">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
-</div>
+<div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
-<div class="dummyContainer">
- <div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
-</div>
+<div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
<!-- Now with margin on one of the grid items. -->
-<div class="dummyContainer">
- <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="100">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn margins">XX XX XX</div>
- </div>
+<div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="100">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn margins">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="120">
- <div class="firstRowFirstColumn margins">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="120">
+ <div class="firstRowFirstColumn margins">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
- <div class="firstRowFirstColumn">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn margins">XXXXX XXXXX</div>
- </div>
+<div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60">
+ <div class="firstRowFirstColumn">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn margins">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="160">
- <div class="firstRowFirstColumn margins">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn">XXXXX XXXXX</div>
- </div>
+<div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="160">
+ <div class="firstRowFirstColumn margins">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn margins">XX XX XX</div>
- </div>
+<div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn margins">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="220">
- <div class="firstRowFirstColumn margins">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="220">
+ <div class="firstRowFirstColumn margins">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
<!-- Spanning cells -->
-<div class="dummyContainer">
- <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20">
- <div class="firstRowBothColumn">XX XX XX</div>
- </div>
+<div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowBothColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="80">
- <div class="firstRowBothColumn">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn">XXXXX XXXXX</div>
- </div>
+<div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowBothColumn">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="80">
- <div class="firstRowBothColumn">XX XX XX</div>
- <div class="firstRowBothColumn">XX XX XX</div>
- </div>
+<div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowBothColumn">XX XX XX</div>
+ <div class="firstRowBothColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="20">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowBothColumn">XX XX XX</div>
- </div>
+<div class="grid gridAutoContent min-content" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowBothColumn">XX XX XX</div>
</div>
-<div class="dummyContainer">
- <div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="80">
- <div class="firstRowBothColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="grid gridAutoContent max-content" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowBothColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
<!-- Grids under min-width / max-width constraints -->
-<div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
- <div class="grid gridMinContentFixed minWidth70" data-expected-height="10" data-expected-width="70">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="min-content grid gridMinContentFixed minWidth70" data-expected-height="10" data-expected-width="70">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
- <div class="grid gridMinContentFixed maxWidth20" data-expected-height="10" data-expected-width="20">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="max-content grid gridMinContentFixed maxWidth20" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
- <div class="grid gridFixedMinContent minWidth70" data-expected-height="10" data-expected-width="70">
- <div class="firstRowFirstColumn">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn">XXXXX XXXXX</div>
- </div>
+<div class="min-content grid gridFixedMinContent minWidth70" data-expected-height="10" data-expected-width="70">
+ <div class="firstRowFirstColumn">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
- <div class="grid gridFixedMinContent maxWidth20" data-expected-height="10" data-expected-width="20">
- <div class="firstRowFirstColumn">XXXXX XXXXX</div>
- <div class="firstRowSecondColumn">XXXXX XXXXX</div>
- </div>
+<div class="max-content grid gridFixedMinContent maxWidth20" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowFirstColumn">XXXXX XXXXX</div>
+ <div class="firstRowSecondColumn">XXXXX XXXXX</div>
</div>
-<div class="dummyContainer min-content" data-expected-height="10" data-expected-width="80">
- <div class="grid gridFixedMaxContent minWidth70" data-expected-height="10" data-expected-width="80">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="min-content grid gridFixedMaxContent minWidth70" data-expected-height="10" data-expected-width="80">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
- <div class="grid gridFixedMaxContent maxWidth20" data-expected-height="10" data-expected-width="20">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="max-content grid gridFixedMaxContent maxWidth20" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
- <div class="grid gridFixedFixed minWidth70" data-expected-height="10" data-expected-width="70"></div>
-</div>
+<div class="min-content grid gridFixedFixed minWidth70" data-expected-height="10" data-expected-width="70"></div>
-<div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
- <div class="grid gridFixedFixed maxWidth20" data-expected-height="10" data-expected-width="20"></div>
-</div>
+<div class="max-content grid gridFixedFixed maxWidth20" data-expected-height="10" data-expected-width="20"></div>
-<div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
- <div class="grid gridAutoContent minWidth70" data-expected-height="10" data-expected-width="70">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="min-content grid gridAutoContent minWidth70" data-expected-height="10" data-expected-width="70">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
- <div class="grid gridAutoContent maxWidth20" data-expected-height="10" data-expected-width="20">
- <div class="firstRowFirstColumn">XX XX XX</div>
- <div class="firstRowSecondColumn">XX XX XX</div>
- </div>
+<div class="max-content grid gridAutoContent maxWidth20" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowFirstColumn">XX XX XX</div>
+ <div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="dummyContainer min-content" data-expected-height="10" data-expected-width="70">
- <div class="grid gridFixedFraction minWidth70" data-expected-height="10" data-expected-width="70"></div>
-</div>
+<div class="min-content grid gridFixedFraction minWidth70" data-expected-height="10" data-expected-width="70"></div>
-<div class="dummyContainer max-content" data-expected-height="10" data-expected-width="20">
- <div class="grid gridFixedFraction maxWidth20" data-expected-height="10" data-expected-width="20"></div>
-</div>
+<div class="max-content grid gridFixedFraction maxWidth20" data-expected-height="10" data-expected-width="20"></div>
</body>
</html>
Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,109 @@
+Check the behavior of grids under max-content constraints.
+
+XX XXX XX XXX
+PASS
+XX XXX X
+PASS
+XX XXX
+PASS
+XXX X XXX
+PASS
+XX XXX XXX XX
+PASS
+XX XXX XX XXX
+PASS
+XX XXX X
+PASS
+XX XXX
+PASS
+XXX X XXX
+PASS
+XX XXX XXX XX
+PASS
+
+Check the behavior of grids under min-content contstraints.
+
+XX XX XX
+PASS
+XX X
+PASS
+XX XXX XXXX
+PASS
+XX XXXX XXXX XXX
+PASS
+XX XXX
+PASS
+XX XX
+PASS
+X XXX X
+PASS
+XXXX XXXX XXXX XXXX
+PASS
+XXXX X X XXXX
+PASS
+XX XX XX
+PASS
+XX X
+PASS
+XX XXX XXXX
+PASS
+XX XXXX XXXX XXX
+PASS
+XX XXX
+PASS
+XX XX
+PASS
+X XXX X
+PASS
+XXXX XXXX XXXX XXXX
+PASS
+XXXX X X XXXX
+PASS
+
+Check the behavior of grids with definite available space.
+
+XX XXX X
+PASS
+XX XX
+PASS
+XX XXXX
+PASS
+XX XXX XX XXX XX XXX
+PASS
+X X X X
+PASS
+XX XX XX
+PASS
+XXXX
+PASS
+
+Check the behavior of grids with indefinite available space.
+
+XX XXX
+PASS
+X XXXX X
+PASS
+XX XX XX
+PASS
+X XX X
+PASS
+X XX X
+PASS
+XXXX XX X XXX
+PASS
+XXXX X X
+PASS
+X XXX XX
+PASS
+XX XXX XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+
+<style>
+.grid {
+ -webkit-grid-template-rows: minmax(0px, 100px);
+ width: 40px;
+
+ align-items: start;
+ justify-items: start;
+}
+
+.max-height-35 { max-height: 35px; }
+.max-height-50 { max-height: 50px; }
+.min-height-35 { min-height: 35px; }
+.min-height-50 { min-height: 50px; }
+</style>
+
+<script src=""
+
+<body _onload_="checkLayout('.grid')">
+
+<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="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="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="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="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="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXX XX</div>
+ </div>
+</div>
+
+<div class="grid max-content max-height-35" data-expected-width="40" data-expected-height="35">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">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="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX X</div>
+</div>
+
+<div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX</div>
+</div>
+
+<div class="grid max-content max-height-fill-available" 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 class="grid max-content" 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>
+
+<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="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="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="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXXX</div>
+ </div>
+</div>
+
+<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="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXXX XXXX XXX</div>
+ </div>
+ </div>
+</div>
+
+<div class="min-content min-height-min-content">
+ <div class="grid" 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="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="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="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="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="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XX XX</div>
+</div>
+
+<div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid 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="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="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX</div>
+</div>
+
+<div class="grid min-content min-height-35" 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-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="sizedToGridArea" data-expected-width="40" data-expected-height="50">XXXX XXXX XXXX XXXX</div>
+</div>
+
+<div class="grid min-content max-height-50" data-expected-width="40" data-expected-height="0">
+ <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="50">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="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="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="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="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="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="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="sizedToGridArea" data-expected-width="40" data-expected-height="37">XXXX</div>
+ </div>
+</div>
+
+<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="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="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="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XX XX</div>
+ </div>
+ <div class="grid 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="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="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="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="sizedToGridArea" data-expected-width="40" data-expected-height="0">X XXX XX</div>
+ </div>
+ <div class="grid 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="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="25">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="25">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="35">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="0">XX X</div>
+ </div>
+</div>
+
+</body>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,97 @@
+Check the behavior of grids under max-content constraints.
+
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+
+Check the behavior of grids under min-content contstraints.
+
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+
+Check the behavior of grids with definite available space.
+
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+
+Check the behavior of grids with indefinite available space.
+
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html (0 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+
+<style>
+div.grid > div { font: 10px/1 Ahem; }
+
+.max-width-35 { max-width: 35px; }
+.min-width-35 { min-width: 35px; }
+.min-width-50 { min-width: 50px; }
+</style>
+
+<script src=""
+
+<body _onload_="checkLayout('.grid')">
+
+<h2>Check the behavior of grids under max-content constraints.</h2>
+<div class="max-content max-width-35">
+ <div class="grid" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<div class="max-content max-width-min-content">
+ <div class="grid" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<div class="max-content">
+ <div class="grid max-width-35" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<div class="max-content">
+ <div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<div class="max-content">
+ <div class="grid" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div class="max-content">
+ <div class="grid max-width-fill-available" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div class="max-content max-width-fill-available">
+ <div class="grid" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div class="grid max-content max-width-35" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+</div>
+
+<div class="grid max-content max-width-min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+</div>
+
+<div class="grid max-content" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+</div>
+
+<br>
+<h2>Check the behavior of grids under min-content contstraints.</h2>
+<div class="min-content min-width-50">
+ <div class="grid" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid min-content min-width-35" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid min-content min-width-fit-content" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div style="width: 200px;">
+ <div class="grid min-content min-width-fill-available" data-expected-width="200" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div class="grid min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+</div>
+
+<div class="grid min-content min-width-min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+</div>
+
+<div class="grid min-content min-width-35" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+</div>
+
+<div class="grid min-content min-width-max-content" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+</div>
+
+<div class="grid min-content min-width-50" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+</div>
+
+<br>
+<h2>Check the behavior of grids with definite available space.</h2>
+<div style="width: 100px;">
+ <div class="grid" data-expected-width="100" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div class="max-width-35" style="width: 100px;">
+ <div class="grid" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<div style="width: 100px;">
+ <div class="grid max-width-35" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<div class="grid" style="width: 90px;" data-expected-width="90" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+</div>
+
+<div class="grid min-width-50" style="width: 10px;" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+</div>
+
+<div class="min-width-50" style="width: 20px;">
+ <div class="grid" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div style="width: 100px;">
+ <div class="grid" style="width: 37%;" data-expected-width="37" data-expected-height="20">
+ <div data-expected-width="37" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid min-width-35" style="width: 37%;" data-expected-width="37" data-expected-height="20">
+ <div data-expected-width="37" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+<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="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid min-width-35" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid fit-content" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid fill-available" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div class="fit-content min-width-50">
+ <div class="grid" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid min-width-35" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid fit-content" data-expected-width="40" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+ <div class="grid fill-available" data-expected-width="50" data-expected-height="10">
+ <div data-expected-width="40" data-expected-height="10">XX X</div>
+ </div>
+</div>
+
+<div style="width: 25px;">
+ <div class="grid fit-content" data-expected-width="25" data-expected-height="20">
+ <div data-expected-width="25" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid fill-available" data-expected-width="25" data-expected-height="20">
+ <div data-expected-width="25" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid fit-content min-width-35" data-expected-width="35" data-expected-height="20">
+ <div data-expected-width="35" data-expected-height="20">XX X</div>
+ </div>
+ <div class="grid fit-content max-width-min-content" data-expected-width="20" data-expected-height="20">
+ <div data-expected-width="20" data-expected-height="20">XX X</div>
+ </div>
+</div>
+
+
Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html (192153 => 192154)
--- trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -3,6 +3,7 @@
<style>
.indefiniteSizeGrid {
font: 10px/1 Ahem;
+ width: -webkit-min-content;
}
.gridWithPercent {
-webkit-grid-template-columns: 25%;
Modified: trunk/LayoutTests/fast/events/key-events-in-editable-gridbox-expected.txt (192153 => 192154)
--- trunk/LayoutTests/fast/events/key-events-in-editable-gridbox-expected.txt 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/fast/events/key-events-in-editable-gridbox-expected.txt 2015-11-09 12:56:43 UTC (rev 192154)
@@ -1,7 +1,15 @@
PASS targetDiv.innerText is "TEST"
PASS targetDiv.innerText is ""
PASS targetDiv.innerText is "TEST"
+PASS targetDiv.innerText is "TEST"
+PASS targetDiv.innerText is ""
+PASS targetDiv.innerText is "TEST"
+PASS targetDiv.innerText is "TEST"
+PASS targetDiv.innerText is ""
+PASS targetDiv.innerText is "TEST"
PASS successfullyParsed is true
TEST COMPLETE
TEST
+TEST
+TEST
Modified: trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html (192153 => 192154)
--- trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html 2015-11-09 12:56:43 UTC (rev 192154)
@@ -3,36 +3,39 @@
<head>
<script src=""
<style>
- #target {
- display: -webkit-grid;
- }
+.grid { display: -webkit-grid; }
+.intrinsicSize { height: -webkit-min-content; }
+.fixedSize { height: 1px; }
</style>
+
+<div id="targetAuto" class="grid" contentEditable>T</div>
+<div id="targetFixed" class="grid fixedSize" contentEditable>T</div>
+<div id="targetIntrinsic" class="grid intrinsicSize" contentEditable>T</div>
+
<script>
- var targetDiv;
- function test()
- {
- targetDiv = document.getElementById('target');
- targetDiv.focus();
+var targetDiv;
+function test(id)
+{
+ targetDiv = document.getElementById(id);
+ targetDiv.focus();
- // Move cursor to the end of line.
- getSelection().modify('move', 'forward', 'lineboundary');
+ // Move cursor to the end of line.
+ getSelection().modify('move', 'forward', 'lineboundary');
- document.execCommand("insertText", false, "EST");
- shouldBeEqualToString("targetDiv.innerText", "TEST");
+ document.execCommand("insertText", false, "EST");
+ shouldBeEqualToString("targetDiv.innerText", "TEST");
- document.execCommand("delete");
- document.execCommand("delete");
- document.execCommand("delete");
- document.execCommand("delete");
- document.execCommand("delete"); // Remove '\n'
- shouldBeEmptyString("targetDiv.innerText");
+ document.execCommand("delete");
+ document.execCommand("delete");
+ document.execCommand("delete");
+ document.execCommand("delete");
+ document.execCommand("delete"); // Remove '\n'
+ shouldBeEmptyString("targetDiv.innerText");
- document.execCommand("insertText", false, "TEST");
- shouldBeEqualToString("targetDiv.innerText", "TEST");
- }
+ document.execCommand("insertText", false, "TEST");
+ shouldBeEqualToString("targetDiv.innerText", "TEST");
+}
+test("targetAuto");
+test("targetFixed");
+test("targetIntrinsic");
</script>
-</head>
-<body _onload_="test()">
-<div id="target" contentEditable>T</div>
-</body>
-</html>
Modified: trunk/Source/WebCore/ChangeLog (192153 => 192154)
--- trunk/Source/WebCore/ChangeLog 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/Source/WebCore/ChangeLog 2015-11-09 12:56:43 UTC (rev 192154)
@@ -1,3 +1,53 @@
+2015-11-02 Sergio Villar Senin <svil...@igalia.com>
+
+ [css-grid] Improve grid container sizing with size constraints and intrinsic sizes
+ https://bugs.webkit.org/show_bug.cgi?id=150679
+
+ Reviewed by Darin Adler.
+
+ The grid container stores from now on its min-content and
+ max-content block sizes in order to be able to properly
+ compute its intrinsic size. It has to redefine
+ computeIntrinsicLogicalContentHeightUsing() because the
+ behavior of grid is different to "normal" blocks:
+
+ - the min-content size is the sum of the grid container's
+ track sizes in the appropiate axis when the grid is sized
+ under a min-content constraint.
+ - the max-content size is the sum of the grid container's
+ track sizes in the appropiate axis when the grid is sized
+ under a max-content constraint.
+ - the auto block size is the max-content size.
+
+ A nice side effect is that we can now properly detect whether
+ the grid has a definite size on a given axis or not.
+
+ Tests: fast/css-grid-layout/absolute-positioning-definite-sizes.html
+ fast/css-grid-layout/flex-and-intrinsic-sizes.html
+ fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
+ fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html
+
+ * rendering/RenderBox.h: made
+ computeIntrinsicLogicalContentHeightUsing() virtual.
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::GridSizingData::GridSizingData):
+ (WebCore::RenderGrid::GridSizingData::freeSpaceForDirection):
+ (WebCore::RenderGrid::GridSizingData::setFreeSpaceForDirection):
+ (WebCore::RenderGrid::computeTrackBasedLogicalHeight):
+ (WebCore::RenderGrid::computeTrackSizesForDirection):
+ (WebCore::RenderGrid::layoutBlock):
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+ (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+ (WebCore::RenderGrid::computeIntrinsicLogicalContentHeightUsing):
+ (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+ (WebCore::RenderGrid::distributeSpaceToTracks):
+ (WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
+ (WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded):
+ (WebCore::RenderGrid::layoutGridItems):
+ (WebCore::RenderGrid::populateGridPositions):
+ (WebCore::RenderGrid::gridElementIsShrinkToFit): Deleted.
+ * rendering/RenderGrid.h:
+
2015-11-05 Sergio Villar Senin <svil...@igalia.com>
[css-grid] Grid placement conflict handling
Modified: trunk/Source/WebCore/rendering/RenderBox.h (192153 => 192154)
--- trunk/Source/WebCore/rendering/RenderBox.h 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2015-11-09 12:56:43 UTC (rev 192154)
@@ -652,7 +652,7 @@
void computePositionedLogicalWidth(LogicalExtentComputedValues&, RenderRegion* = nullptr) const;
LayoutUnit computeIntrinsicLogicalWidthUsing(Length logicalWidthLength, LayoutUnit availableLogicalWidth, LayoutUnit borderAndPadding) const;
- Optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const;
+ virtual Optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const;
virtual bool shouldComputeSizeAsReplaced() const { return isReplaced() && !isInlineBlockOrInlineTable(); }
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (192153 => 192154)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-11-09 12:56:43 UTC (rev 192154)
@@ -210,11 +210,9 @@
class RenderGrid::GridSizingData {
WTF_MAKE_NONCOPYABLE(GridSizingData);
public:
- GridSizingData(unsigned gridColumnCount, unsigned gridRowCount, LayoutUnit freeSpaceForColumns, LayoutUnit freeSpaceForRows)
+ GridSizingData(unsigned gridColumnCount, unsigned gridRowCount)
: columnTracks(gridColumnCount)
, rowTracks(gridRowCount)
- , freeSpaceForColumns(freeSpaceForColumns)
- , freeSpaceForRows(freeSpaceForRows)
{
}
@@ -227,13 +225,22 @@
Vector<GridTrack*> growBeyondGrowthLimitsTracks;
Vector<GridItemWithSpan> itemsSortedByIncreasingSpan;
- LayoutUnit& freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
+ Optional<LayoutUnit> freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
+ void setFreeSpaceForDirection(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);
private:
- LayoutUnit freeSpaceForColumns;
- LayoutUnit freeSpaceForRows;
+ Optional<LayoutUnit> freeSpaceForColumns;
+ Optional<LayoutUnit> freeSpaceForRows;
};
+void RenderGrid::GridSizingData::setFreeSpaceForDirection(GridTrackSizingDirection direction, Optional<LayoutUnit> freeSpace)
+{
+ if (direction == ForColumns)
+ freeSpaceForColumns = freeSpace;
+ else
+ freeSpaceForRows = freeSpace;
+}
+
RenderGrid::RenderGrid(Element& element, Ref<RenderStyle>&& style)
: RenderBlock(element, WTF::move(style), 0)
, m_orderIterator(*this)
@@ -293,6 +300,30 @@
}
}
+LayoutUnit RenderGrid::computeTrackBasedLogicalHeight(const GridSizingData& sizingData) const
+{
+ LayoutUnit logicalHeight;
+
+ for (const auto& row : sizingData.rowTracks)
+ logicalHeight += row.baseSize();
+
+ logicalHeight += guttersSize(ForRows, sizingData.rowTracks.size());
+
+ return logicalHeight;
+}
+
+void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit freeSpace)
+{
+ ASSERT(freeSpace >= 0);
+ LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());
+ freeSpace = std::max<LayoutUnit>(0, freeSpace - totalGuttersSize);
+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
+
+ LayoutUnit baseSizes, growthLimits;
+ computeUsedBreadthOfGridTracks(direction, sizingData, baseSizes, growthLimits);
+ ASSERT(tracksAreWiderThanMinTrackBreadth(direction, sizingData));
+}
+
void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
{
ASSERT(needsLayout());
@@ -300,8 +331,6 @@
if (!relayoutChildren && simplifiedLayout())
return;
- // FIXME: Much of this method is boiler plate that matches RenderBox::layoutBlock and Render*FlexibleBox::layoutBlock.
- // It would be nice to refactor some of the duplicate code.
LayoutRepainter repainter(*this, checkForRepaintDuringLayout());
LayoutStateMaintainer statePusher(view(), *this, locationOffset(), hasTransform() || hasReflection() || style().isFlippedBlocksWritingMode());
@@ -311,12 +340,45 @@
setLogicalHeight(0);
updateLogicalWidth();
+ bool logicalHeightWasIndefinite = !computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
- layoutGridItems();
+ placeItemsOnGrid();
+ GridSizingData sizingData(gridColumnCount(), gridRowCount());
+
+ // At this point the logical width is always definite as the above call to updateLogicalWidth()
+ // properly resolves intrinsic sizes. We cannot do the same for heights though because many code
+ // paths inside updateLogicalHeight() require a previous call to setLogicalHeight() to resolve
+ // heights properly (like for positioned items for example).
+ computeTrackSizesForDirection(ForColumns, sizingData, availableLogicalWidth());
+
+ if (logicalHeightWasIndefinite)
+ computeIntrinsicLogicalHeight(sizingData);
+ else
+ computeTrackSizesForDirection(ForRows, sizingData, availableLogicalHeight(ExcludeMarginBorderPadding));
+ setLogicalHeight(computeTrackBasedLogicalHeight(sizingData) + borderAndPaddingLogicalHeight());
+
LayoutUnit oldClientAfterEdge = clientLogicalBottom();
updateLogicalHeight();
+ // The above call might have changed the grid's logical height depending on min|max height restrictions.
+ // Update the sizes of the rows whose size depends on the logical height (also on definite|indefinite sizes).
+ if (logicalHeightWasIndefinite)
+ computeTrackSizesForDirection(ForRows, sizingData, logicalHeight());
+
+ // Grid container should have the minimum height of a line if it's editable. That does not affect track sizing though.
+ if (hasLineIfEmpty()) {
+ LayoutUnit minHeightForEmptyLine = borderAndPaddingLogicalHeight()
+ + lineHeight(true, isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes)
+ + scrollbarLogicalHeight();
+ setLogicalHeight(std::max(logicalHeight(), minHeightForEmptyLine));
+ }
+
+ applyStretchAlignmentToTracksIfNeeded(ForColumns, sizingData);
+ applyStretchAlignmentToTracksIfNeeded(ForRows, sizingData);
+
+ layoutGridItems(sizingData);
+
if (size() != previousSize)
relayoutChildren = true;
@@ -355,17 +417,10 @@
if (!wasPopulated)
const_cast<RenderGrid*>(this)->placeItemsOnGrid();
- GridSizingData sizingData(gridColumnCount(), gridRowCount(), 0, 0);
- const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData);
+ GridSizingData sizingData(gridColumnCount(), gridRowCount());
+ sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);
+ const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
- for (auto& column : sizingData.columnTracks) {
- LayoutUnit minTrackBreadth = column.baseSize();
- LayoutUnit maxTrackBreadth = column.growthLimit();
-
- minLogicalWidth += minTrackBreadth;
- maxLogicalWidth += maxTrackBreadth;
- }
-
LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
minLogicalWidth += totalGuttersSize;
maxLogicalWidth += totalGuttersSize;
@@ -378,25 +433,64 @@
const_cast<RenderGrid*>(this)->clearGrid();
}
-bool RenderGrid::gridElementIsShrinkToFit()
+void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
{
- return isFloatingOrOutOfFlowPositioned();
+ ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
+ sizingData.setFreeSpaceForDirection(ForRows, Nullopt);
+ LayoutUnit minHeight, maxHeight;
+ computeUsedBreadthOfGridTracks(ForRows, sizingData, minHeight, maxHeight);
+
+ // FIXME: This should be really added to the intrinsic height in RenderBox::computeContentAndScrollbarLogicalHeightUsing().
+ // Remove this when that is fixed.
+ LayoutUnit scrollbarHeight = scrollbarLogicalHeight();
+ minHeight += scrollbarHeight;
+ maxHeight += scrollbarHeight;
+
+ LayoutUnit totalGuttersSize = guttersSize(ForRows, gridRowCount());
+ minHeight += totalGuttersSize;
+ maxHeight += totalGuttersSize;
+
+ m_minContentHeight = minHeight;
+ m_maxContentHeight = maxHeight;
+
+ ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData));
}
+Optional<LayoutUnit> RenderGrid::computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicLogicalHeight, LayoutUnit borderAndPadding) const
+{
+ if (!intrinsicLogicalHeight)
+ return 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.valueOr(0), std::max(m_minContentHeight.valueOr(0), fillAvailableExtent));
+ }
+
+ if (logicalHeightLength.isFillAvailable())
+ return containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding) - borderAndPadding;
+ ASSERT_NOT_REACHED();
+ return Nullopt;
+}
+
static inline double normalizedFlexFraction(const GridTrack& track, double flexFactor)
{
return track.baseSize() / std::max<double>(1, flexFactor);
}
-void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
+void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization)
{
- LayoutUnit& availableLogicalSpace = sizingData.freeSpaceForDirection(direction);
- const LayoutUnit initialAvailableLogicalSpace = availableLogicalSpace;
+ const Optional<LayoutUnit> initialFreeSpace = sizingData.freeSpaceForDirection(direction);
Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
Vector<unsigned> flexibleSizedTracksIndex;
sizingData.contentSizedTracksIndex.shrink(0);
- const LayoutUnit maxSize = direction == ForColumns ? contentLogicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt).valueOr(0);
+ const LayoutUnit maxSize = initialFreeSpace.valueOr(0);
// 1. Initialize per Grid track variables.
for (unsigned i = 0; i < tracks.size(); ++i) {
GridTrack& track = tracks[i];
@@ -418,18 +512,24 @@
if (!sizingData.contentSizedTracksIndex.isEmpty())
resolveContentBasedTrackSizingFunctions(direction, sizingData);
+ baseSizesWithoutMaximization = growthLimitsWithoutMaximization = 0;
+
for (auto& track : tracks) {
ASSERT(!track.growthLimitIsInfinite());
- availableLogicalSpace -= track.baseSize();
+ baseSizesWithoutMaximization += track.baseSize();
+ growthLimitsWithoutMaximization += track.growthLimit();
}
+ LayoutUnit freeSpace = initialFreeSpace ? initialFreeSpace.value() - baseSizesWithoutMaximization : LayoutUnit(0);
- const bool hasUndefinedRemainingSpace = (direction == ForRows) ? style().logicalHeight().isAuto() : gridElementIsShrinkToFit();
+ const bool hasDefiniteFreeSpace = !!initialFreeSpace;
- if (!hasUndefinedRemainingSpace && availableLogicalSpace <= 0)
+ if (hasDefiniteFreeSpace && freeSpace <= 0) {
+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
return;
+ }
- // 3. Grow all Grid tracks in GridTracks from their UsedBreadth up to their MaxBreadth value until availableLogicalSpace is exhausted.
- if (!hasUndefinedRemainingSpace) {
+ // 3. Grow all Grid tracks in GridTracks from their UsedBreadth up to their MaxBreadth value until freeSpace is exhausted.
+ if (hasDefiniteFreeSpace) {
const unsigned tracksSize = tracks.size();
Vector<GridTrack*> tracksForDistribution(tracksSize);
for (unsigned i = 0; i < tracksSize; ++i) {
@@ -437,7 +537,7 @@
tracksForDistribution[i]->setPlannedSize(tracksForDistribution[i]->baseSize());
}
- distributeSpaceToTracks<MaximizeTracks>(tracksForDistribution, nullptr, availableLogicalSpace);
+ distributeSpaceToTracks<MaximizeTracks>(tracksForDistribution, nullptr, freeSpace);
for (auto* track : tracksForDistribution)
track->setBaseSize(track->plannedSize());
@@ -446,13 +546,15 @@
track.setBaseSize(track.growthLimit());
}
- if (flexibleSizedTracksIndex.isEmpty())
+ if (flexibleSizedTracksIndex.isEmpty()) {
+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
return;
+ }
// 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
double flexFraction = 0;
- if (!hasUndefinedRemainingSpace)
- flexFraction = findFlexFactorUnitSize(tracks, GridSpan(0, tracks.size() - 1), direction, initialAvailableLogicalSpace);
+ if (hasDefiniteFreeSpace)
+ flexFraction = findFlexFactorUnitSize(tracks, GridSpan(0, tracks.size() - 1), direction, initialFreeSpace.value());
else {
for (const auto& trackIndex : flexibleSizedTracksIndex)
flexFraction = std::max(flexFraction, normalizedFlexFraction(tracks[trackIndex], gridTrackSize(direction, trackIndex).maxTrackBreadth().flex()));
@@ -479,9 +581,13 @@
LayoutUnit baseSize = std::max<LayoutUnit>(oldBaseSize, flexFraction * trackSize.maxTrackBreadth().flex());
if (LayoutUnit increment = baseSize - oldBaseSize) {
track.setBaseSize(baseSize);
- availableLogicalSpace -= increment;
+ freeSpace -= increment;
+
+ baseSizesWithoutMaximization += increment;
+ growthLimitsWithoutMaximization += increment;
}
}
+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
}
LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(const GridLength& gridLength, LayoutUnit maxSize) const
@@ -961,14 +1067,14 @@
}
template <RenderGrid::TrackSizeComputationPhase phase>
-void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& availableLogicalSpace)
+void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& freeSpace)
{
- ASSERT(availableLogicalSpace >= 0);
+ ASSERT(freeSpace >= 0);
for (auto* track : tracks)
track->tempSize() = trackSizeForTrackSizeComputationPhase(phase, *track, ForbidInfinity);
- if (availableLogicalSpace > 0) {
+ if (freeSpace > 0) {
std::sort(tracks.begin(), tracks.end(), sortByGridTrackGrowthPotential);
unsigned tracksSize = tracks.size();
@@ -979,22 +1085,22 @@
LayoutUnit trackGrowthPotential = infiniteGrowthPotential ? track.growthLimit() : track.growthLimit() - trackBreadth;
// Let's avoid computing availableLogicalSpaceShare as much as possible as it's a hot spot in performance tests.
if (trackGrowthPotential > 0 || infiniteGrowthPotential) {
- LayoutUnit availableLogicalSpaceShare = availableLogicalSpace / (tracksSize - i);
+ LayoutUnit availableLogicalSpaceShare = freeSpace / (tracksSize - i);
LayoutUnit growthShare = infiniteGrowthPotential ? availableLogicalSpaceShare : std::min(availableLogicalSpaceShare, trackGrowthPotential);
- ASSERT_WITH_MESSAGE(growthShare >= 0, "We should never shrink any grid track or else we can't guarantee we abide by our min-sizing function. We can still have 0 as growthShare if the amount of tracks greatly exceeds the availableLogicalSpace.");
+ ASSERT_WITH_MESSAGE(growthShare >= 0, "We should never shrink any grid track or else we can't guarantee we abide by our min-sizing function. We can still have 0 as growthShare if the amount of tracks greatly exceeds the freeSpace.");
track.tempSize() += growthShare;
- availableLogicalSpace -= growthShare;
+ freeSpace -= growthShare;
}
}
}
- if (availableLogicalSpace > 0 && growBeyondGrowthLimitsTracks) {
+ if (freeSpace > 0 && growBeyondGrowthLimitsTracks) {
unsigned tracksGrowingBeyondGrowthLimitsSize = growBeyondGrowthLimitsTracks->size();
for (unsigned i = 0; i < tracksGrowingBeyondGrowthLimitsSize; ++i) {
GridTrack* track = growBeyondGrowthLimitsTracks->at(i);
- LayoutUnit growthShare = availableLogicalSpace / (tracksGrowingBeyondGrowthLimitsSize - i);
+ LayoutUnit growthShare = freeSpace / (tracksGrowingBeyondGrowthLimitsSize - i);
track->tempSize() += growthShare;
- availableLogicalSpace -= growthShare;
+ freeSpace -= growthShare;
}
}
@@ -1003,9 +1109,10 @@
}
#ifndef NDEBUG
-bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection direction, const Vector<GridTrack>& tracks)
+bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection direction, GridSizingData& sizingData)
{
- const LayoutUnit maxSize = direction == ForColumns ? contentLogicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt).valueOr(0);
+ const Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
+ const LayoutUnit maxSize = sizingData.freeSpaceForDirection(direction).valueOr(0);
for (unsigned i = 0; i < tracks.size(); ++i) {
const GridTrackSize& trackSize = gridTrackSize(direction, i);
const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
@@ -1244,8 +1351,9 @@
void RenderGrid::applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection direction, GridSizingData& sizingData)
{
- LayoutUnit& availableSpace = sizingData.freeSpaceForDirection(direction);
- if (availableSpace <= 0
+ Optional<LayoutUnit> freeSpace = sizingData.freeSpaceForDirection(direction);
+ if (!freeSpace
+ || freeSpace.value() <= 0
|| (direction == ForColumns && style().resolvedJustifyContentDistribution() != ContentDistributionStretch)
|| (direction == ForRows && style().resolvedAlignContentDistribution() != ContentDistributionStretch))
return;
@@ -1263,34 +1371,16 @@
if (numberOfAutoSizedTracks < 1)
return;
- LayoutUnit sizeToIncrease = availableSpace / numberOfAutoSizedTracks;
+ LayoutUnit sizeToIncrease = freeSpace.value() / numberOfAutoSizedTracks;
for (const auto& trackIndex : autoSizedTracksIndex) {
auto& track = tracks[trackIndex];
track.setBaseSize(track.baseSize() + sizeToIncrease);
}
- availableSpace = 0;
+ sizingData.setFreeSpaceForDirection(direction, Optional<LayoutUnit>(0));
}
-void RenderGrid::layoutGridItems()
+void RenderGrid::layoutGridItems(GridSizingData& sizingData)
{
- placeItemsOnGrid();
-
- LayoutUnit availableSpaceForColumns = availableLogicalWidth();
- LayoutUnit availableSpaceForRows = availableLogicalHeight(IncludeMarginBorderPadding);
-
- // Remove space consumed by gutters from the available logical space.
- availableSpaceForColumns -= guttersSize(ForColumns, gridColumnCount());
- availableSpaceForRows -= guttersSize(ForRows, gridRowCount());
-
- GridSizingData sizingData(gridColumnCount(), gridRowCount(), availableSpaceForColumns, availableSpaceForRows);
- computeUsedBreadthOfGridTracks(ForColumns, sizingData);
- ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData.columnTracks));
- computeUsedBreadthOfGridTracks(ForRows, sizingData);
- ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData.rowTracks));
-
- applyStretchAlignmentToTracksIfNeeded(ForColumns, sizingData);
- applyStretchAlignmentToTracksIfNeeded(ForRows, sizingData);
-
populateGridPositions(sizingData);
for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
@@ -1335,20 +1425,6 @@
if (!selfNeedsLayout() && child->checkForRepaintDuringLayout())
child->repaintDuringLayoutIfMoved(oldChildRect);
}
-
- LayoutUnit height = borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
- for (auto& row : sizingData.rowTracks)
- height += row.baseSize();
-
- height += guttersSize(ForRows, sizingData.rowTracks.size());
- // min / max logical height is handled in updateLogicalHeight().
- if (hasLineIfEmpty()) {
- LayoutUnit minHeight = borderAndPaddingLogicalHeight()
- + lineHeight(true, isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes)
- + scrollbarLogicalHeight();
- height = std::max(height, minHeight);
- }
- setLogicalHeight(height);
}
void RenderGrid::prepareChildForPositionedLayout(RenderBox& child)
@@ -1488,7 +1564,7 @@
unsigned numberOfLines = numberOfTracks + 1;
unsigned lastLine = numberOfLines - 1;
unsigned nextToLastLine = numberOfLines - 2;
- ContentAlignmentData offset = computeContentPositionAndDistributionOffset(ForColumns, sizingData.freeSpaceForDirection(ForColumns), numberOfTracks);
+ ContentAlignmentData offset = computeContentPositionAndDistributionOffset(ForColumns, sizingData.freeSpaceForDirection(ForColumns).value(), numberOfTracks);
LayoutUnit trackGap = guttersSize(ForColumns, 2);
m_columnPositions.resize(numberOfLines);
m_columnPositions[0] = borderAndPaddingStart() + offset.positionOffset;
@@ -1500,7 +1576,7 @@
numberOfLines = numberOfTracks + 1;
lastLine = numberOfLines - 1;
nextToLastLine = numberOfLines - 2;
- offset = computeContentPositionAndDistributionOffset(ForRows, sizingData.freeSpaceForDirection(ForRows), numberOfTracks);
+ offset = computeContentPositionAndDistributionOffset(ForRows, sizingData.freeSpaceForDirection(ForRows).value(), numberOfTracks);
trackGap = guttersSize(ForRows, 2);
m_rowPositions.resize(numberOfLines);
m_rowPositions[0] = borderAndPaddingBefore() + offset.positionOffset;
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (192153 => 192154)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-11-09 12:56:43 UTC (rev 192154)
@@ -67,10 +67,11 @@
virtual bool isRenderGrid() const override { return true; }
virtual void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
+ Optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const override;
+
class GridIterator;
class GridSizingData;
- void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
- bool gridElementIsShrinkToFit();
+ void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization);
LayoutUnit computeUsedBreadthOfMinLength(const GridLength&, LayoutUnit maxSize) const;
LayoutUnit computeUsedBreadthOfMaxLength(const GridLength&, LayoutUnit usedBreadth, LayoutUnit maxSize) const;
void resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection, GridSizingData&);
@@ -87,10 +88,15 @@
GridTrackSizingDirection autoPlacementMajorAxisDirection() const;
GridTrackSizingDirection autoPlacementMinorAxisDirection() const;
- void layoutGridItems();
void prepareChildForPositionedLayout(RenderBox&);
void layoutPositionedObject(RenderBox&, bool relayoutChildren, bool fixedPositionObjectsOnly) override;
void offsetAndBreadthForPositionedChild(const RenderBox&, GridTrackSizingDirection, LayoutUnit& offset, LayoutUnit& breadth);
+
+ void computeIntrinsicLogicalHeight(GridSizingData&);
+ LayoutUnit computeTrackBasedLogicalHeight(const GridSizingData&) const;
+ void computeTrackSizesForDirection(GridTrackSizingDirection, GridSizingData&, LayoutUnit freeSpace);
+
+ void layoutGridItems(GridSizingData&);
void populateGridPositions(GridSizingData&);
void clearGrid();
@@ -155,7 +161,7 @@
void updateAutoMarginsInRowAxisIfNeeded(RenderBox&);
#ifndef NDEBUG
- bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, const Vector<GridTrack>&);
+ bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);
#endif
bool gridWasPopulated() const { return !m_grid.isEmpty() && !m_grid[0].isEmpty(); }
@@ -180,6 +186,9 @@
Vector<LayoutUnit> m_rowPositions;
HashMap<const RenderBox*, GridCoordinate> m_gridItemCoordinate;
OrderIterator m_orderIterator;
+
+ Optional<LayoutUnit> m_minContentHeight;
+ Optional<LayoutUnit> m_maxContentHeight;
};
} // namespace WebCore
