<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[192154] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/192154">192154</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2015-11-09 04:56:43 -0800 (Mon, 09 Nov 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[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.
Source/WebCore:
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:
LayoutTests:
* 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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementchangecolumnsrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemchangecolumnrepainthtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpreferredlogicalwidthshtml">trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html</a></li>
<li><a href="#trunkLayoutTestsfasteventskeyeventsineditablegridboxexpectedtxt">trunk/LayoutTests/fast/events/key-events-in-editable-gridbox-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfasteventskeyeventsineditablegridboxhtml">trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxh">trunk/Source/WebCore/rendering/RenderBox.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioningdefinitesizesexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutabsolutepositioningdefinitesizeshtml">trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizesexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizeshtml">trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheightexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheighthtml">trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefinitewidthexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefinitewidthhtml">trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-11-09 12:24:38 UTC (rev 192153)
+++ trunk/LayoutTests/ChangeLog 2015-11-09 12:56:43 UTC (rev 192154)
</span><span class="lines">@@ -1,3 +1,26 @@
</span><ins>+2015-11-02 Sergio Villar Senin <svillar@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.
+
</ins><span class="cx"> 2015-11-05 Sergio Villar Senin <svillar@igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Grid placement conflict handling
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioningdefinitesizesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+Items should extend to fill the width of the absolutely positioned grid container.
+
+XXX X
+XX XXX XX
+PASS
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutabsolutepositioningdefinitesizeshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,38 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" 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="../../resources/check-layout.js"></script>
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutflexandintrinsicsizeshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="resources/grid.css" 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="../../resources/check-layout.js"></script>
+
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/flex-and-intrinsic-sizes.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementchangecolumnsrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -16,7 +16,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- width: -webkit-fit-content;
</del><ins>+ width: -webkit-min-content;
</ins><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="cx"> -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemchangecolumnrepainthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -16,7 +16,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .grid {
</span><del>- width: -webkit-fit-content;
</del><ins>+ width: -webkit-min-content;
</ins><span class="cx"> -webkit-grid-template-rows: 50px;
</span><span class="cx"> -webkit-grid-template-columns: minmax(100px, 180px) 100px minmax(50px, 100px);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpreferredlogicalwidthshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -43,8 +43,6 @@
</span><span class="cx"> margin: 10px 20px 30px 40px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.dummyContainer { }
-
</del><span class="cx"> .minWidth70 {
</span><span class="cx"> min-width: 70px;
</span><span class="cx"> }
</span><span class="lines">@@ -56,230 +54,160 @@
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><del>-<body onload="checkLayout('.dummyContainer')">
</del><ins>+<body onload="checkLayout('.grid')">
</ins><span class="cx"> <body>
</span><span class="cx"> <p>This test checks that the grid element's preferred logical widths are properly computed with different combinations of minmax().</p>
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="dummyContainer">
- <div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div>
-</div>
</del><ins>+<div class="grid gridFixedFixed min-content" data-expected-height="10" data-expected-width="60"></div>
</ins><span class="cx">
</span><del>-<div class="dummyContainer">
- <div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div>
-</div>
</del><ins>+<div class="grid gridFixedFixed max-content" data-expected-height="10" data-expected-width="80"></div>
</ins><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div class="dummyContainer">
- <div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
-</div>
</del><ins>+<div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
</ins><span class="cx">
</span><del>-<div class="dummyContainer">
- <div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
-</div>
</del><ins>+<div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
</ins><span class="cx"> <!-- Now with margin on one of the grid items. -->
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Spanning cells -->
</span><del>-<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>
</del><ins>+<div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20">
+ <div class="firstRowBothColumn">XX XX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <!-- Grids under min-width / max-width constraints -->
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<div class="min-content grid gridFixedFixed minWidth70" data-expected-height="10" data-expected-width="70"></div>
</ins><span class="cx">
</span><del>-<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>
</del><ins>+<div class="max-content grid gridFixedFixed maxWidth20" data-expected-height="10" data-expected-width="20"></div>
</ins><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<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>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<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>
</del><ins>+<div class="min-content grid gridFixedFraction minWidth70" data-expected-height="10" data-expected-width="70"></div>
</ins><span class="cx">
</span><del>-<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>
</del><ins>+<div class="max-content grid gridFixedFraction maxWidth20" data-expected-height="10" data-expected-width="20"></div>
</ins><span class="cx">
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheightexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,109 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheighthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,261 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" 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="../../resources/check-layout.js"></script>
+
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefinitewidthexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,97 @@
</span><ins>+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
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefinitewidthhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html (0 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,215 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" 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="../../resources/check-layout.js"></script>
+
+<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>
+
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercentofindefinitetracksizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -3,6 +3,7 @@
</span><span class="cx"> <style>
</span><span class="cx"> .indefiniteSizeGrid {
</span><span class="cx"> font: 10px/1 Ahem;
</span><ins>+ width: -webkit-min-content;
</ins><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><span class="cx"> -webkit-grid-template-columns: 25%;
</span></span></pre></div>
<a id="trunkLayoutTestsfasteventskeyeventsineditablegridboxexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/events/key-events-in-editable-gridbox-expected.txt (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,7 +1,15 @@
</span><span class="cx"> PASS targetDiv.innerText is "TEST"
</span><span class="cx"> PASS targetDiv.innerText is ""
</span><span class="cx"> PASS targetDiv.innerText is "TEST"
</span><ins>+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"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span><span class="cx"> TEST
</span><ins>+TEST
+TEST
</ins></span></pre></div>
<a id="trunkLayoutTestsfasteventskeyeventsineditablegridboxhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/events/key-events-in-editable-gridbox.html (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -3,36 +3,39 @@
</span><span class="cx"> <head>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> <style>
</span><del>- #target {
- display: -webkit-grid;
- }
</del><ins>+.grid { display: -webkit-grid; }
+.intrinsicSize { height: -webkit-min-content; }
+.fixedSize { height: 1px; }
</ins><span class="cx"> </style>
</span><ins>+
+<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>
+
</ins><span class="cx"> <script>
</span><del>- var targetDiv;
- function test()
- {
- targetDiv = document.getElementById('target');
- targetDiv.focus();
</del><ins>+var targetDiv;
+function test(id)
+{
+ targetDiv = document.getElementById(id);
+ targetDiv.focus();
</ins><span class="cx">
</span><del>- // Move cursor to the end of line.
- getSelection().modify('move', 'forward', 'lineboundary');
</del><ins>+ // Move cursor to the end of line.
+ getSelection().modify('move', 'forward', 'lineboundary');
</ins><span class="cx">
</span><del>- document.execCommand("insertText", false, "EST");
- shouldBeEqualToString("targetDiv.innerText", "TEST");
</del><ins>+ document.execCommand("insertText", false, "EST");
+ shouldBeEqualToString("targetDiv.innerText", "TEST");
</ins><span class="cx">
</span><del>- document.execCommand("delete");
- document.execCommand("delete");
- document.execCommand("delete");
- document.execCommand("delete");
- document.execCommand("delete"); // Remove '\n'
- shouldBeEmptyString("targetDiv.innerText");
</del><ins>+ document.execCommand("delete");
+ document.execCommand("delete");
+ document.execCommand("delete");
+ document.execCommand("delete");
+ document.execCommand("delete"); // Remove '\n'
+ shouldBeEmptyString("targetDiv.innerText");
</ins><span class="cx">
</span><del>- document.execCommand("insertText", false, "TEST");
- shouldBeEqualToString("targetDiv.innerText", "TEST");
- }
</del><ins>+ document.execCommand("insertText", false, "TEST");
+ shouldBeEqualToString("targetDiv.innerText", "TEST");
+}
+test("targetAuto");
+test("targetFixed");
+test("targetIntrinsic");
</ins><span class="cx"> </script>
</span><del>-</head>
-<body onload="test()">
-<div id="target" contentEditable>T</div>
-</body>
-</html>
</del></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,53 @@
</span><ins>+2015-11-02 Sergio Villar Senin <svillar@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:
+
</ins><span class="cx"> 2015-11-05 Sergio Villar Senin <svillar@igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Grid placement conflict handling
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.h (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -652,7 +652,7 @@
</span><span class="cx"> void computePositionedLogicalWidth(LogicalExtentComputedValues&, RenderRegion* = nullptr) const;
</span><span class="cx">
</span><span class="cx"> LayoutUnit computeIntrinsicLogicalWidthUsing(Length logicalWidthLength, LayoutUnit availableLogicalWidth, LayoutUnit borderAndPadding) const;
</span><del>- Optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const;
</del><ins>+ virtual Optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const;
</ins><span class="cx">
</span><span class="cx"> virtual bool shouldComputeSizeAsReplaced() const { return isReplaced() && !isInlineBlockOrInlineTable(); }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -210,11 +210,9 @@
</span><span class="cx"> class RenderGrid::GridSizingData {
</span><span class="cx"> WTF_MAKE_NONCOPYABLE(GridSizingData);
</span><span class="cx"> public:
</span><del>- GridSizingData(unsigned gridColumnCount, unsigned gridRowCount, LayoutUnit freeSpaceForColumns, LayoutUnit freeSpaceForRows)
</del><ins>+ GridSizingData(unsigned gridColumnCount, unsigned gridRowCount)
</ins><span class="cx"> : columnTracks(gridColumnCount)
</span><span class="cx"> , rowTracks(gridRowCount)
</span><del>- , freeSpaceForColumns(freeSpaceForColumns)
- , freeSpaceForRows(freeSpaceForRows)
</del><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -227,13 +225,22 @@
</span><span class="cx"> Vector<GridTrack*> growBeyondGrowthLimitsTracks;
</span><span class="cx"> Vector<GridItemWithSpan> itemsSortedByIncreasingSpan;
</span><span class="cx">
</span><del>- LayoutUnit& freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
</del><ins>+ Optional<LayoutUnit> freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
+ void setFreeSpaceForDirection(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);
</ins><span class="cx">
</span><span class="cx"> private:
</span><del>- LayoutUnit freeSpaceForColumns;
- LayoutUnit freeSpaceForRows;
</del><ins>+ Optional<LayoutUnit> freeSpaceForColumns;
+ Optional<LayoutUnit> freeSpaceForRows;
</ins><span class="cx"> };
</span><span class="cx">
</span><ins>+void RenderGrid::GridSizingData::setFreeSpaceForDirection(GridTrackSizingDirection direction, Optional<LayoutUnit> freeSpace)
+{
+ if (direction == ForColumns)
+ freeSpaceForColumns = freeSpace;
+ else
+ freeSpaceForRows = freeSpace;
+}
+
</ins><span class="cx"> RenderGrid::RenderGrid(Element& element, Ref<RenderStyle>&& style)
</span><span class="cx"> : RenderBlock(element, WTF::move(style), 0)
</span><span class="cx"> , m_orderIterator(*this)
</span><span class="lines">@@ -293,6 +300,30 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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));
+}
+
</ins><span class="cx"> void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(needsLayout());
</span><span class="lines">@@ -300,8 +331,6 @@
</span><span class="cx"> if (!relayoutChildren && simplifiedLayout())
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- // 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.
</del><span class="cx"> LayoutRepainter repainter(*this, checkForRepaintDuringLayout());
</span><span class="cx"> LayoutStateMaintainer statePusher(view(), *this, locationOffset(), hasTransform() || hasReflection() || style().isFlippedBlocksWritingMode());
</span><span class="cx">
</span><span class="lines">@@ -311,12 +340,45 @@
</span><span class="cx">
</span><span class="cx"> setLogicalHeight(0);
</span><span class="cx"> updateLogicalWidth();
</span><ins>+ bool logicalHeightWasIndefinite = !computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
</ins><span class="cx">
</span><del>- layoutGridItems();
</del><ins>+ placeItemsOnGrid();
</ins><span class="cx">
</span><ins>+ 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());
+
</ins><span class="cx"> LayoutUnit oldClientAfterEdge = clientLogicalBottom();
</span><span class="cx"> updateLogicalHeight();
</span><span class="cx">
</span><ins>+ // 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);
+
</ins><span class="cx"> if (size() != previousSize)
</span><span class="cx"> relayoutChildren = true;
</span><span class="cx">
</span><span class="lines">@@ -355,17 +417,10 @@
</span><span class="cx"> if (!wasPopulated)
</span><span class="cx"> const_cast<RenderGrid*>(this)->placeItemsOnGrid();
</span><span class="cx">
</span><del>- GridSizingData sizingData(gridColumnCount(), gridRowCount(), 0, 0);
- const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData);
</del><ins>+ GridSizingData sizingData(gridColumnCount(), gridRowCount());
+ sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);
+ const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
</ins><span class="cx">
</span><del>- for (auto& column : sizingData.columnTracks) {
- LayoutUnit minTrackBreadth = column.baseSize();
- LayoutUnit maxTrackBreadth = column.growthLimit();
-
- minLogicalWidth += minTrackBreadth;
- maxLogicalWidth += maxTrackBreadth;
- }
-
</del><span class="cx"> LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
</span><span class="cx"> minLogicalWidth += totalGuttersSize;
</span><span class="cx"> maxLogicalWidth += totalGuttersSize;
</span><span class="lines">@@ -378,25 +433,64 @@
</span><span class="cx"> const_cast<RenderGrid*>(this)->clearGrid();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-bool RenderGrid::gridElementIsShrinkToFit()
</del><ins>+void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
</ins><span class="cx"> {
</span><del>- return isFloatingOrOutOfFlowPositioned();
</del><ins>+ 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));
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+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;
+}
+
</ins><span class="cx"> static inline double normalizedFlexFraction(const GridTrack& track, double flexFactor)
</span><span class="cx"> {
</span><span class="cx"> return track.baseSize() / std::max<double>(1, flexFactor);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
</del><ins>+void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization)
</ins><span class="cx"> {
</span><del>- LayoutUnit& availableLogicalSpace = sizingData.freeSpaceForDirection(direction);
- const LayoutUnit initialAvailableLogicalSpace = availableLogicalSpace;
</del><ins>+ const Optional<LayoutUnit> initialFreeSpace = sizingData.freeSpaceForDirection(direction);
</ins><span class="cx"> Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
</span><span class="cx"> Vector<unsigned> flexibleSizedTracksIndex;
</span><span class="cx"> sizingData.contentSizedTracksIndex.shrink(0);
</span><span class="cx">
</span><del>- const LayoutUnit maxSize = direction == ForColumns ? contentLogicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt).valueOr(0);
</del><ins>+ const LayoutUnit maxSize = initialFreeSpace.valueOr(0);
</ins><span class="cx"> // 1. Initialize per Grid track variables.
</span><span class="cx"> for (unsigned i = 0; i < tracks.size(); ++i) {
</span><span class="cx"> GridTrack& track = tracks[i];
</span><span class="lines">@@ -418,18 +512,24 @@
</span><span class="cx"> if (!sizingData.contentSizedTracksIndex.isEmpty())
</span><span class="cx"> resolveContentBasedTrackSizingFunctions(direction, sizingData);
</span><span class="cx">
</span><ins>+ baseSizesWithoutMaximization = growthLimitsWithoutMaximization = 0;
+
</ins><span class="cx"> for (auto& track : tracks) {
</span><span class="cx"> ASSERT(!track.growthLimitIsInfinite());
</span><del>- availableLogicalSpace -= track.baseSize();
</del><ins>+ baseSizesWithoutMaximization += track.baseSize();
+ growthLimitsWithoutMaximization += track.growthLimit();
</ins><span class="cx"> }
</span><ins>+ LayoutUnit freeSpace = initialFreeSpace ? initialFreeSpace.value() - baseSizesWithoutMaximization : LayoutUnit(0);
</ins><span class="cx">
</span><del>- const bool hasUndefinedRemainingSpace = (direction == ForRows) ? style().logicalHeight().isAuto() : gridElementIsShrinkToFit();
</del><ins>+ const bool hasDefiniteFreeSpace = !!initialFreeSpace;
</ins><span class="cx">
</span><del>- if (!hasUndefinedRemainingSpace && availableLogicalSpace <= 0)
</del><ins>+ if (hasDefiniteFreeSpace && freeSpace <= 0) {
+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
</ins><span class="cx"> return;
</span><ins>+ }
</ins><span class="cx">
</span><del>- // 3. Grow all Grid tracks in GridTracks from their UsedBreadth up to their MaxBreadth value until availableLogicalSpace is exhausted.
- if (!hasUndefinedRemainingSpace) {
</del><ins>+ // 3. Grow all Grid tracks in GridTracks from their UsedBreadth up to their MaxBreadth value until freeSpace is exhausted.
+ if (hasDefiniteFreeSpace) {
</ins><span class="cx"> const unsigned tracksSize = tracks.size();
</span><span class="cx"> Vector<GridTrack*> tracksForDistribution(tracksSize);
</span><span class="cx"> for (unsigned i = 0; i < tracksSize; ++i) {
</span><span class="lines">@@ -437,7 +537,7 @@
</span><span class="cx"> tracksForDistribution[i]->setPlannedSize(tracksForDistribution[i]->baseSize());
</span><span class="cx"> }
</span><span class="cx">
</span><del>- distributeSpaceToTracks<MaximizeTracks>(tracksForDistribution, nullptr, availableLogicalSpace);
</del><ins>+ distributeSpaceToTracks<MaximizeTracks>(tracksForDistribution, nullptr, freeSpace);
</ins><span class="cx">
</span><span class="cx"> for (auto* track : tracksForDistribution)
</span><span class="cx"> track->setBaseSize(track->plannedSize());
</span><span class="lines">@@ -446,13 +546,15 @@
</span><span class="cx"> track.setBaseSize(track.growthLimit());
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (flexibleSizedTracksIndex.isEmpty())
</del><ins>+ if (flexibleSizedTracksIndex.isEmpty()) {
+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
</ins><span class="cx"> return;
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
</span><span class="cx"> double flexFraction = 0;
</span><del>- if (!hasUndefinedRemainingSpace)
- flexFraction = findFlexFactorUnitSize(tracks, GridSpan(0, tracks.size() - 1), direction, initialAvailableLogicalSpace);
</del><ins>+ if (hasDefiniteFreeSpace)
+ flexFraction = findFlexFactorUnitSize(tracks, GridSpan(0, tracks.size() - 1), direction, initialFreeSpace.value());
</ins><span class="cx"> else {
</span><span class="cx"> for (const auto& trackIndex : flexibleSizedTracksIndex)
</span><span class="cx"> flexFraction = std::max(flexFraction, normalizedFlexFraction(tracks[trackIndex], gridTrackSize(direction, trackIndex).maxTrackBreadth().flex()));
</span><span class="lines">@@ -479,9 +581,13 @@
</span><span class="cx"> LayoutUnit baseSize = std::max<LayoutUnit>(oldBaseSize, flexFraction * trackSize.maxTrackBreadth().flex());
</span><span class="cx"> if (LayoutUnit increment = baseSize - oldBaseSize) {
</span><span class="cx"> track.setBaseSize(baseSize);
</span><del>- availableLogicalSpace -= increment;
</del><ins>+ freeSpace -= increment;
+
+ baseSizesWithoutMaximization += increment;
+ growthLimitsWithoutMaximization += increment;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><ins>+ sizingData.setFreeSpaceForDirection(direction, freeSpace);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(const GridLength& gridLength, LayoutUnit maxSize) const
</span><span class="lines">@@ -961,14 +1067,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> template <RenderGrid::TrackSizeComputationPhase phase>
</span><del>-void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& availableLogicalSpace)
</del><ins>+void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& freeSpace)
</ins><span class="cx"> {
</span><del>- ASSERT(availableLogicalSpace >= 0);
</del><ins>+ ASSERT(freeSpace >= 0);
</ins><span class="cx">
</span><span class="cx"> for (auto* track : tracks)
</span><span class="cx"> track->tempSize() = trackSizeForTrackSizeComputationPhase(phase, *track, ForbidInfinity);
</span><span class="cx">
</span><del>- if (availableLogicalSpace > 0) {
</del><ins>+ if (freeSpace > 0) {
</ins><span class="cx"> std::sort(tracks.begin(), tracks.end(), sortByGridTrackGrowthPotential);
</span><span class="cx">
</span><span class="cx"> unsigned tracksSize = tracks.size();
</span><span class="lines">@@ -979,22 +1085,22 @@
</span><span class="cx"> LayoutUnit trackGrowthPotential = infiniteGrowthPotential ? track.growthLimit() : track.growthLimit() - trackBreadth;
</span><span class="cx"> // Let's avoid computing availableLogicalSpaceShare as much as possible as it's a hot spot in performance tests.
</span><span class="cx"> if (trackGrowthPotential > 0 || infiniteGrowthPotential) {
</span><del>- LayoutUnit availableLogicalSpaceShare = availableLogicalSpace / (tracksSize - i);
</del><ins>+ LayoutUnit availableLogicalSpaceShare = freeSpace / (tracksSize - i);
</ins><span class="cx"> LayoutUnit growthShare = infiniteGrowthPotential ? availableLogicalSpaceShare : std::min(availableLogicalSpaceShare, trackGrowthPotential);
</span><del>- 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.");
</del><ins>+ 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.");
</ins><span class="cx"> track.tempSize() += growthShare;
</span><del>- availableLogicalSpace -= growthShare;
</del><ins>+ freeSpace -= growthShare;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (availableLogicalSpace > 0 && growBeyondGrowthLimitsTracks) {
</del><ins>+ if (freeSpace > 0 && growBeyondGrowthLimitsTracks) {
</ins><span class="cx"> unsigned tracksGrowingBeyondGrowthLimitsSize = growBeyondGrowthLimitsTracks->size();
</span><span class="cx"> for (unsigned i = 0; i < tracksGrowingBeyondGrowthLimitsSize; ++i) {
</span><span class="cx"> GridTrack* track = growBeyondGrowthLimitsTracks->at(i);
</span><del>- LayoutUnit growthShare = availableLogicalSpace / (tracksGrowingBeyondGrowthLimitsSize - i);
</del><ins>+ LayoutUnit growthShare = freeSpace / (tracksGrowingBeyondGrowthLimitsSize - i);
</ins><span class="cx"> track->tempSize() += growthShare;
</span><del>- availableLogicalSpace -= growthShare;
</del><ins>+ freeSpace -= growthShare;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1003,9 +1109,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #ifndef NDEBUG
</span><del>-bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection direction, const Vector<GridTrack>& tracks)
</del><ins>+bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection direction, GridSizingData& sizingData)
</ins><span class="cx"> {
</span><del>- const LayoutUnit maxSize = direction == ForColumns ? contentLogicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt).valueOr(0);
</del><ins>+ const Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
+ const LayoutUnit maxSize = sizingData.freeSpaceForDirection(direction).valueOr(0);
</ins><span class="cx"> for (unsigned i = 0; i < tracks.size(); ++i) {
</span><span class="cx"> const GridTrackSize& trackSize = gridTrackSize(direction, i);
</span><span class="cx"> const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="lines">@@ -1244,8 +1351,9 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection direction, GridSizingData& sizingData)
</span><span class="cx"> {
</span><del>- LayoutUnit& availableSpace = sizingData.freeSpaceForDirection(direction);
- if (availableSpace <= 0
</del><ins>+ Optional<LayoutUnit> freeSpace = sizingData.freeSpaceForDirection(direction);
+ if (!freeSpace
+ || freeSpace.value() <= 0
</ins><span class="cx"> || (direction == ForColumns && style().resolvedJustifyContentDistribution() != ContentDistributionStretch)
</span><span class="cx"> || (direction == ForRows && style().resolvedAlignContentDistribution() != ContentDistributionStretch))
</span><span class="cx"> return;
</span><span class="lines">@@ -1263,34 +1371,16 @@
</span><span class="cx"> if (numberOfAutoSizedTracks < 1)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- LayoutUnit sizeToIncrease = availableSpace / numberOfAutoSizedTracks;
</del><ins>+ LayoutUnit sizeToIncrease = freeSpace.value() / numberOfAutoSizedTracks;
</ins><span class="cx"> for (const auto& trackIndex : autoSizedTracksIndex) {
</span><span class="cx"> auto& track = tracks[trackIndex];
</span><span class="cx"> track.setBaseSize(track.baseSize() + sizeToIncrease);
</span><span class="cx"> }
</span><del>- availableSpace = 0;
</del><ins>+ sizingData.setFreeSpaceForDirection(direction, Optional<LayoutUnit>(0));
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderGrid::layoutGridItems()
</del><ins>+void RenderGrid::layoutGridItems(GridSizingData& sizingData)
</ins><span class="cx"> {
</span><del>- 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);
-
</del><span class="cx"> populateGridPositions(sizingData);
</span><span class="cx">
</span><span class="cx"> for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
</span><span class="lines">@@ -1335,20 +1425,6 @@
</span><span class="cx"> if (!selfNeedsLayout() && child->checkForRepaintDuringLayout())
</span><span class="cx"> child->repaintDuringLayoutIfMoved(oldChildRect);
</span><span class="cx"> }
</span><del>-
- 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);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderGrid::prepareChildForPositionedLayout(RenderBox& child)
</span><span class="lines">@@ -1488,7 +1564,7 @@
</span><span class="cx"> unsigned numberOfLines = numberOfTracks + 1;
</span><span class="cx"> unsigned lastLine = numberOfLines - 1;
</span><span class="cx"> unsigned nextToLastLine = numberOfLines - 2;
</span><del>- ContentAlignmentData offset = computeContentPositionAndDistributionOffset(ForColumns, sizingData.freeSpaceForDirection(ForColumns), numberOfTracks);
</del><ins>+ ContentAlignmentData offset = computeContentPositionAndDistributionOffset(ForColumns, sizingData.freeSpaceForDirection(ForColumns).value(), numberOfTracks);
</ins><span class="cx"> LayoutUnit trackGap = guttersSize(ForColumns, 2);
</span><span class="cx"> m_columnPositions.resize(numberOfLines);
</span><span class="cx"> m_columnPositions[0] = borderAndPaddingStart() + offset.positionOffset;
</span><span class="lines">@@ -1500,7 +1576,7 @@
</span><span class="cx"> numberOfLines = numberOfTracks + 1;
</span><span class="cx"> lastLine = numberOfLines - 1;
</span><span class="cx"> nextToLastLine = numberOfLines - 2;
</span><del>- offset = computeContentPositionAndDistributionOffset(ForRows, sizingData.freeSpaceForDirection(ForRows), numberOfTracks);
</del><ins>+ offset = computeContentPositionAndDistributionOffset(ForRows, sizingData.freeSpaceForDirection(ForRows).value(), numberOfTracks);
</ins><span class="cx"> trackGap = guttersSize(ForRows, 2);
</span><span class="cx"> m_rowPositions.resize(numberOfLines);
</span><span class="cx"> m_rowPositions[0] = borderAndPaddingBefore() + offset.positionOffset;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (192153 => 192154)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -67,10 +67,11 @@
</span><span class="cx"> virtual bool isRenderGrid() const override { return true; }
</span><span class="cx"> virtual void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
</span><span class="cx">
</span><ins>+ Optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const override;
+
</ins><span class="cx"> class GridIterator;
</span><span class="cx"> class GridSizingData;
</span><del>- void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
- bool gridElementIsShrinkToFit();
</del><ins>+ void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization);
</ins><span class="cx"> LayoutUnit computeUsedBreadthOfMinLength(const GridLength&, LayoutUnit maxSize) const;
</span><span class="cx"> LayoutUnit computeUsedBreadthOfMaxLength(const GridLength&, LayoutUnit usedBreadth, LayoutUnit maxSize) const;
</span><span class="cx"> void resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection, GridSizingData&);
</span><span class="lines">@@ -87,10 +88,15 @@
</span><span class="cx"> GridTrackSizingDirection autoPlacementMajorAxisDirection() const;
</span><span class="cx"> GridTrackSizingDirection autoPlacementMinorAxisDirection() const;
</span><span class="cx">
</span><del>- void layoutGridItems();
</del><span class="cx"> void prepareChildForPositionedLayout(RenderBox&);
</span><span class="cx"> void layoutPositionedObject(RenderBox&, bool relayoutChildren, bool fixedPositionObjectsOnly) override;
</span><span class="cx"> void offsetAndBreadthForPositionedChild(const RenderBox&, GridTrackSizingDirection, LayoutUnit& offset, LayoutUnit& breadth);
</span><ins>+
+ void computeIntrinsicLogicalHeight(GridSizingData&);
+ LayoutUnit computeTrackBasedLogicalHeight(const GridSizingData&) const;
+ void computeTrackSizesForDirection(GridTrackSizingDirection, GridSizingData&, LayoutUnit freeSpace);
+
+ void layoutGridItems(GridSizingData&);
</ins><span class="cx"> void populateGridPositions(GridSizingData&);
</span><span class="cx"> void clearGrid();
</span><span class="cx">
</span><span class="lines">@@ -155,7 +161,7 @@
</span><span class="cx"> void updateAutoMarginsInRowAxisIfNeeded(RenderBox&);
</span><span class="cx">
</span><span class="cx"> #ifndef NDEBUG
</span><del>- bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, const Vector<GridTrack>&);
</del><ins>+ bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);
</ins><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> bool gridWasPopulated() const { return !m_grid.isEmpty() && !m_grid[0].isEmpty(); }
</span><span class="lines">@@ -180,6 +186,9 @@
</span><span class="cx"> Vector<LayoutUnit> m_rowPositions;
</span><span class="cx"> HashMap<const RenderBox*, GridCoordinate> m_gridItemCoordinate;
</span><span class="cx"> OrderIterator m_orderIterator;
</span><ins>+
+ Optional<LayoutUnit> m_minContentHeight;
+ Optional<LayoutUnit> m_maxContentHeight;
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> } // namespace WebCore
</span></span></pre>
</div>
</div>
</body>
</html>