<!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>[202974] 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/202974">202974</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-07-08 03:11:10 -0700 (Fri, 08 Jul 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>[css-grid] Inline size is never indefinite during layout
https://bugs.webkit.org/show_bug.cgi?id=159253

Reviewed by Sergio Villar Senin.

Source/WebCore:

The issue is that the inline size of the grid container
is only indefinite while we're computing the intrinsic sizes.
During layout we should be able to resolve the percentage tracks
against that size. This makes Grid Layout compatible with regular blocks
regarding how inline percentages are resolved.

The patch passes the SizingOperation enum to RenderGrid::gridTrackSize().
That way we can know if we're computing the intrinsic sizes or not.

Test: fast/css-grid-layout/grid-container-percentage-columns.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeTrackSizesForDirection):
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::minSizeForChild):
(WebCore::RenderGrid::spanningItemCrossesFlexibleSizedTracks):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems):
(WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
(WebCore::RenderGrid::rawGridTrackSize): Deleted.
* rendering/RenderGrid.h:

LayoutTests:

Created a new test verifying the expected behavior. Updated the results
in a few tests too.

* fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
* fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
* fast/css-grid-layout/grid-columns-rows-get-set.html:
* fast/css-grid-layout/grid-container-percentage-columns-expected.txt: Added.
* fast/css-grid-layout/grid-container-percentage-columns.html: Added.
* fast/css-grid-layout/named-grid-line-get-set-expected.txt:
* fast/css-grid-layout/named-grid-line-get-set.html:
* fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt:
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
The results of this test now show some FAIL messages becase of a bug in
RenderBox::hasDefiniteLogicalHeight() (http://webkit.org/b/159251).
* fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
* fast/css-grid-layout/resources/grid-columns-rows-get-set.js:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultipleexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultiplehtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsethtml">trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizeexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml">trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetmultiplejs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</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="#trunkLayoutTestsfastcssgridlayoutgridcontainerpercentagecolumnsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerpercentagecolumnshtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/ChangeLog        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+2016-07-08  Manuel Rego Casasnovas  &lt;rego@igalia.com&gt;
+
+        [css-grid] Inline size is never indefinite during layout
+        https://bugs.webkit.org/show_bug.cgi?id=159253
+
+        Reviewed by Sergio Villar Senin.
+
+        Created a new test verifying the expected behavior. Updated the results
+        in a few tests too.
+
+        * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+        * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
+        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+        * fast/css-grid-layout/grid-columns-rows-get-set.html:
+        * fast/css-grid-layout/grid-container-percentage-columns-expected.txt: Added.
+        * fast/css-grid-layout/grid-container-percentage-columns.html: Added.
+        * fast/css-grid-layout/named-grid-line-get-set-expected.txt:
+        * fast/css-grid-layout/named-grid-line-get-set.html:
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt:
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
+        The results of this test now show some FAIL messages becase of a bug in
+        RenderBox::hasDefiniteLogicalHeight() (http://webkit.org/b/159251).
+        * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
+        * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+
</ins><span class="cx"> 2016-07-08  Frederic Wang  &lt;fwang@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Use OpenType MATH constant AxisHeight.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -8,11 +8,11 @@
</span><span class="cx"> PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-rows') is &quot;none&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is &quot;10px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is &quot;15px&quot;
</span><del>-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is &quot;424px&quot;
</del><ins>+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is &quot;400px&quot;
</ins><span class="cx"> PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is &quot;162px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is &quot;0px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is &quot;0px&quot;
</span><del>-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is &quot;7px&quot;
</del><ins>+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is &quot;3.5px&quot;
</ins><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is &quot;11px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is &quot;0px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is &quot;0px&quot;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultipleexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -6,9 +6,9 @@
</span><span class="cx"> Test getting |grid-template-columns| and |grid-template-rows| set through CSS
</span><span class="cx"> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is &quot;7px 11px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is &quot;17px 2px&quot;
</span><del>-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is &quot;424px 792px&quot;
</del><ins>+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is &quot;400px 800px&quot;
</ins><span class="cx"> PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is &quot;162px 312px&quot;
</span><del>-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is &quot;7px 0px&quot;
</del><ins>+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is &quot;3.5px 7px&quot;
</ins><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is &quot;11px 0px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is &quot;0px 17px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is &quot;0px 3px&quot;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetmultiplehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx">     grid-template-rows: 17px 2px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>-    grid-template-columns: 53% 99%;
</del><ins>+    grid-template-columns: 50% 100%;
</ins><span class="cx">     grid-template-rows: 27% 52%;
</span><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -31,7 +31,7 @@
</span><span class="cx">     grid-template-rows: 15px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>-    grid-template-columns: 53%;
</del><ins>+    grid-template-columns: 50%;
</ins><span class="cx">     grid-template-rows: 27%;
</span><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerpercentagecolumnsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns-expected.txt (0 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns-expected.txt        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.
+
+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
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
+XX X
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerpercentagecolumnshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html (0 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html                                (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -0,0 +1,254 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;link href=&quot;../css-intrinsic-dimensions/resources/width-keyword-classes.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;link href=&quot;resources/grid.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;style&gt;
+.wrapper {
+    position: relative;
+    clear: both;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+}
+
+.float {
+    float: left;
+}
+
+.abspos {
+    position: absolute;
+}
+
+.fixedSize {
+    width: 200px;
+    height: 200px;
+}
+
+.oneColumn100 {
+    grid-template-columns: 100%;
+}
+
+.oneColumn50 {
+    grid-template-columns: 50%;
+}
+
+.twoColumns {
+    grid-template-columns: 50% 100px;
+}
+&lt;/style&gt;
+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;
+&lt;body onload=&quot;checkLayout('.grid')&quot;&gt;
+
+&lt;p&gt;This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.&lt;/p&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid float oneColumn100&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid abspos oneColumn100&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid max-content oneColumn100&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid fit-content oneColumn100&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid min-content oneColumn100&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid float oneColumn50&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid abspos oneColumn50&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid max-content oneColumn50&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid fit-content oneColumn50&quot; data-expected-width=&quot;40&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid min-content oneColumn50&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid float twoColumns&quot; data-expected-width=&quot;140&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;70&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;70&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid abspos twoColumns&quot; data-expected-width=&quot;140&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;70&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;70&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid max-content twoColumns&quot; data-expected-width=&quot;140&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;70&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;70&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid fit-content twoColumns&quot; data-expected-width=&quot;140&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;70&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;70&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid min-content twoColumns&quot; data-expected-width=&quot;120&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;60&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;60&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid float twoColumns&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid abspos twoColumns&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid max-content twoColumns&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid min-content twoColumns&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;wrapper&quot;&gt;
+    &lt;div class=&quot;grid fit-content twoColumns&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;div class=&quot;firstRowFirstColumn&quot;
+            data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;firstRowSecondColumn&quot;
+            data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;10&quot;&gt;
+            XX X
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -6,11 +6,11 @@
</span><span class="cx"> Test getting grid-template-columns and grid-template-rows set through CSS
</span><span class="cx"> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is &quot;[first] 10px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is &quot;[first] 15px&quot;
</span><del>-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is &quot;424px [last]&quot;
</del><ins>+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is &quot;400px [last]&quot;
</ins><span class="cx"> PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is &quot;162px [last]&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is &quot;0px [last]&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is &quot;0px [last]&quot;
</span><del>-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is &quot;77px [last]&quot;
</del><ins>+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is &quot;38.5px [last]&quot;
</ins><span class="cx"> PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is &quot;22px [last]&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is &quot;[first] 0px&quot;
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is &quot;0px [last]&quot;
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnamedgridlinegetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -21,7 +21,7 @@
</span><span class="cx">     grid-template-rows: [first] 15px;
</span><span class="cx"> }
</span><span class="cx"> .gridWithPercent {
</span><del>-    grid-template-columns: 53% [last];
</del><ins>+    grid-template-columns: 50% [last];
</ins><span class="cx">     grid-template-rows: 27% [last];
</span><span class="cx"> }
</span><span class="cx"> .gridWithAuto {
</span><span class="lines">@@ -99,9 +99,9 @@
</span><span class="cx"> 
</span><span class="cx">     debug(&quot;Test getting grid-template-columns and grid-template-rows set through CSS&quot;);
</span><span class="cx">     testGridTemplatesValues(document.getElementById(&quot;gridWithFixedElement&quot;), &quot;[first] 10px&quot;, &quot;[first] 15px&quot;);
</span><del>-    testGridTemplatesValues(document.getElementById(&quot;gridWithPercentElement&quot;), &quot;424px [last]&quot;, &quot;162px [last]&quot;);
</del><ins>+    testGridTemplatesValues(document.getElementById(&quot;gridWithPercentElement&quot;), &quot;400px [last]&quot;, &quot;162px [last]&quot;);
</ins><span class="cx">     testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSize&quot;), &quot;0px [last]&quot;, &quot;0px [last]&quot;);
</span><del>-    testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSizeWithChildren&quot;), &quot;77px [last]&quot;, &quot;22px [last]&quot;);
</del><ins>+    testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSizeWithChildren&quot;), &quot;38.5px [last]&quot;, &quot;22px [last]&quot;);
</ins><span class="cx">     testGridTemplatesValues(document.getElementById(&quot;gridWithAutoElement&quot;), &quot;[first] 0px&quot;, &quot;0px [last]&quot;);
</span><span class="cx">     testGridTemplatesValues(document.getElementById(&quot;gridWithAutoWithChildrenElement&quot;), &quot;[first] 77px&quot;, &quot;22px [last]&quot;);
</span><span class="cx">     testGridTemplatesValues(document.getElementById(&quot;gridWithMinMax&quot;), &quot;[first] 80px&quot;, &quot;300px [last]&quot;);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -35,11 +35,29 @@
</span><span class="cx"> XX
</span><span class="cx"> XXXXX
</span><span class="cx"> XXX
</span><del>-PASS
</del><ins>+FAIL:
+Expected 10 for height, but got 4. 
+Expected 10 for height, but got 4. 
+Expected 10 for height, but got 4. 
+
+&lt;div class=&quot;grid absolutelyPositioned&quot;&gt;
+            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+        &lt;/div&gt;
</ins><span class="cx"> XX
</span><span class="cx"> XXXXX
</span><span class="cx"> XXX
</span><del>-PASS
</del><ins>+FAIL:
+Expected 10 for height, but got 4. 
+Expected 10 for height, but got 4. 
+Expected 10 for height, but got 4. 
+
+&lt;div class=&quot;grid absolutelyPositioned&quot;&gt;
+            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
+        &lt;/div&gt;
</ins><span class="cx"> XX
</span><span class="cx"> XXXXX
</span><span class="cx"> XXX
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -89,9 +89,9 @@
</span><span class="cx"> 
</span><span class="cx">     &lt;div class=&quot;fit-content indefiniteHeight&quot;&gt;
</span><span class="cx">         &lt;div class=&quot;grid calculatedSize justifyContentStart&quot;&gt;
</span><del>-            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
-            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
-            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
</del><ins>+            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;44&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;110&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;66&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
</ins><span class="cx">         &lt;/div&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -105,9 +105,9 @@
</span><span class="cx"> 
</span><span class="cx">     &lt;div class=&quot;fit-content indefiniteHeight&quot;&gt;
</span><span class="cx">         &lt;div class=&quot;grid percentageSize&quot;&gt;
</span><del>-            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
-            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
-            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
</del><ins>+            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;25&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;15&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
</ins><span class="cx">         &lt;/div&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -119,19 +119,22 @@
</span><span class="cx">         &lt;/div&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> 
</span><ins>+    &lt;!-- FIXME: The height of the row is wrong calculated in the following 2 examples because of a bug in
+         RenderBox::hasDefiniteLogicalHeight() that considers that any positioned element has a definite height.
+         See: https://bugs.webkit.org/show_bug.cgi?id=159251 --&gt;
</ins><span class="cx">     &lt;div class=&quot;fit-content indefiniteHeight&quot;&gt;
</span><span class="cx">         &lt;div class=&quot;grid absolutelyPositioned&quot;&gt;
</span><del>-            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;XX&lt;/div&gt;
-            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;XXXXX&lt;/div&gt;
-            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;XXX&lt;/div&gt;
</del><ins>+            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
</ins><span class="cx">         &lt;/div&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx">     &lt;div class=&quot;unconstrainedContainer&quot;&gt;
</span><span class="cx">         &lt;div class=&quot;grid absolutelyPositioned&quot;&gt;
</span><del>-            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;XX&lt;/div&gt;
-            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;XXXXX&lt;/div&gt;
-            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;XXX&lt;/div&gt;
</del><ins>+            &lt;div class=&quot;firstRowFirstColumn sizedToGridArea&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;10&quot;&gt;XX&lt;/div&gt;
+            &lt;div class=&quot;firstRowSecondColumn sizedToGridArea&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;10&quot;&gt;XXXXX&lt;/div&gt;
+            &lt;div class=&quot;firstRowThirdColumn sizedToGridArea&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;10&quot;&gt;XXX&lt;/div&gt;
</ins><span class="cx">         &lt;/div&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetmultiplejs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -2,8 +2,8 @@
</span><span class="cx"> 
</span><span class="cx"> debug(&quot;Test getting |grid-template-columns| and |grid-template-rows| set through CSS&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithFixedElement&quot;), &quot;7px 11px&quot;, &quot;17px 2px&quot;);
</span><del>-testGridTemplatesValues(document.getElementById(&quot;gridWithPercentElement&quot;), &quot;53% 99%&quot;, &quot;27% 52%&quot;, &quot;424px 792px&quot;, &quot;162px 312px&quot;);
-testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSize&quot;), &quot;53% 99%&quot;, &quot;27% 52%&quot;, &quot;7px 0px&quot;, &quot;11px 0px&quot;);
</del><ins>+testGridTemplatesValues(document.getElementById(&quot;gridWithPercentElement&quot;), &quot;50% 100%&quot;, &quot;27% 52%&quot;, &quot;400px 800px&quot;, &quot;162px 312px&quot;);
+testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSize&quot;), &quot;50% 100%&quot;, &quot;27% 52%&quot;, &quot;3.5px 7px&quot;, &quot;11px 0px&quot;);
</ins><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithAutoElement&quot;), &quot;auto auto&quot;, &quot;auto auto&quot;, &quot;0px 17px&quot;, &quot;0px 3px&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithEMElement&quot;), &quot;100px 120px&quot;, &quot;150px 170px&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithThreeItems&quot;), &quot;15px auto 100px&quot;, &quot;120px 18px auto&quot;, &quot;15px 0px 100px&quot;, &quot;120px 18px 0px&quot;);
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -3,9 +3,9 @@
</span><span class="cx"> debug(&quot;Test getting grid-template-columns and grid-template-rows set through CSS&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithNoneElement&quot;), &quot;none&quot;, &quot;none&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithFixedElement&quot;), &quot;10px&quot;, &quot;15px&quot;);
</span><del>-testGridTemplatesValues(document.getElementById(&quot;gridWithPercentElement&quot;), &quot;424px&quot;, &quot;162px&quot;);
</del><ins>+testGridTemplatesValues(document.getElementById(&quot;gridWithPercentElement&quot;), &quot;400px&quot;, &quot;162px&quot;);
</ins><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSize&quot;), &quot;0px&quot;, &quot;0px&quot;);
</span><del>-testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSizeWithChildren&quot;), &quot;7px&quot;, &quot;11px&quot;);
</del><ins>+testGridTemplatesValues(document.getElementById(&quot;gridWithPercentWithoutSizeWithChildren&quot;), &quot;3.5px&quot;, &quot;11px&quot;);
</ins><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithAutoElement&quot;), &quot;0px&quot;, &quot;0px&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithAutoWithChildrenElement&quot;), &quot;7px&quot;, &quot;11px&quot;);
</span><span class="cx"> testGridTemplatesValues(document.getElementById(&quot;gridWithEMElement&quot;), &quot;100px&quot;, &quot;150px&quot;);
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/Source/WebCore/ChangeLog        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -1,3 +1,35 @@
</span><ins>+2016-07-08  Manuel Rego Casasnovas  &lt;rego@igalia.com&gt;
+
+        [css-grid] Inline size is never indefinite during layout
+        https://bugs.webkit.org/show_bug.cgi?id=159253
+
+        Reviewed by Sergio Villar Senin.
+
+        The issue is that the inline size of the grid container
+        is only indefinite while we're computing the intrinsic sizes.
+        During layout we should be able to resolve the percentage tracks
+        against that size. This makes Grid Layout compatible with regular blocks
+        regarding how inline percentages are resolved.
+
+        The patch passes the SizingOperation enum to RenderGrid::gridTrackSize().
+        That way we can know if we're computing the intrinsic sizes or not.
+
+        Test: fast/css-grid-layout/grid-container-percentage-columns.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeTrackSizesForDirection):
+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+        (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+        (WebCore::RenderGrid::gridTrackSize):
+        (WebCore::RenderGrid::minSizeForChild):
+        (WebCore::RenderGrid::spanningItemCrossesFlexibleSizedTracks):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems):
+        (WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth):
+        (WebCore::RenderGrid::rawGridTrackSize): Deleted.
+        * rendering/RenderGrid.h:
+
</ins><span class="cx"> 2016-07-08  Frederic Wang  &lt;fwang@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Use OpenType MATH constant AxisHeight.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -238,7 +238,6 @@
</span><span class="cx">     Optional&lt;LayoutUnit&gt; freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
</span><span class="cx">     void setFreeSpaceForDirection(GridTrackSizingDirection, Optional&lt;LayoutUnit&gt; freeSpace);
</span><span class="cx"> 
</span><del>-    enum SizingOperation { TrackSizing, IntrinsicSizeComputation };
</del><span class="cx">     SizingOperation sizingOperation { TrackSizing };
</span><span class="cx"> 
</span><span class="cx"> private:
</span><span class="lines">@@ -360,7 +359,7 @@
</span><span class="cx"> {
</span><span class="cx">     LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());
</span><span class="cx">     sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);
</span><del>-    sizingData.sizingOperation = GridSizingData::TrackSizing;
</del><ins>+    sizingData.sizingOperation = TrackSizing;
</ins><span class="cx"> 
</span><span class="cx">     LayoutUnit baseSizes, growthLimits;
</span><span class="cx">     computeUsedBreadthOfGridTracks(direction, sizingData, baseSizes, growthLimits);
</span><span class="lines">@@ -465,7 +464,7 @@
</span><span class="cx"> 
</span><span class="cx">     GridSizingData sizingData(gridColumnCount(), gridRowCount());
</span><span class="cx">     sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);
</span><del>-    sizingData.sizingOperation = GridSizingData::IntrinsicSizeComputation;
</del><ins>+    sizingData.sizingOperation = IntrinsicSizeComputation;
</ins><span class="cx">     const_cast&lt;RenderGrid*&gt;(this)-&gt;computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
</span><span class="cx"> 
</span><span class="cx">     LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
</span><span class="lines">@@ -484,7 +483,7 @@
</span><span class="cx"> {
</span><span class="cx">     ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
</span><span class="cx">     sizingData.setFreeSpaceForDirection(ForRows, Nullopt);
</span><del>-    sizingData.sizingOperation = GridSizingData::IntrinsicSizeComputation;
</del><ins>+    sizingData.sizingOperation = IntrinsicSizeComputation;
</ins><span class="cx">     LayoutUnit minHeight, maxHeight;
</span><span class="cx">     computeUsedBreadthOfGridTracks(ForRows, sizingData, minHeight, maxHeight);
</span><span class="cx"> 
</span><span class="lines">@@ -547,7 +546,7 @@
</span><span class="cx">     // 1. Initialize per Grid track variables.
</span><span class="cx">     for (unsigned i = 0; i &lt; tracks.size(); ++i) {
</span><span class="cx">         GridTrack&amp; track = tracks[i];
</span><del>-        const GridTrackSize&amp; trackSize = gridTrackSize(direction, i);
</del><ins>+        const GridTrackSize&amp; trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
</ins><span class="cx">         const GridLength&amp; minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="cx">         const GridLength&amp; maxTrackBreadth = trackSize.maxTrackBreadth();
</span><span class="cx"> 
</span><span class="lines">@@ -607,10 +606,10 @@
</span><span class="cx">     // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
</span><span class="cx">     double flexFraction = 0;
</span><span class="cx">     if (hasDefiniteFreeSpace)
</span><del>-        flexFraction = findFlexFactorUnitSize(tracks, GridSpan::translatedDefiniteGridSpan(0, tracks.size()), direction, initialFreeSpace.value());
</del><ins>+        flexFraction = findFlexFactorUnitSize(tracks, GridSpan::translatedDefiniteGridSpan(0, tracks.size()), direction, sizingData.sizingOperation, initialFreeSpace.value());
</ins><span class="cx">     else {
</span><span class="cx">         for (const auto&amp; trackIndex : flexibleSizedTracksIndex)
</span><del>-            flexFraction = std::max(flexFraction, normalizedFlexFraction(tracks[trackIndex], gridTrackSize(direction, trackIndex).maxTrackBreadth().flex()));
</del><ins>+            flexFraction = std::max(flexFraction, normalizedFlexFraction(tracks[trackIndex], gridTrackSize(direction, trackIndex, sizingData.sizingOperation).maxTrackBreadth().flex()));
</ins><span class="cx"> 
</span><span class="cx">         if (!m_gridItemArea.isEmpty()) {
</span><span class="cx">             for (unsigned i = 0; i &lt; flexibleSizedTracksIndex.size(); ++i) {
</span><span class="lines">@@ -622,7 +621,7 @@
</span><span class="cx">                     if (i &gt; 0 &amp;&amp; span.startLine() &lt;= flexibleSizedTracksIndex[i - 1])
</span><span class="cx">                         continue;
</span><span class="cx"> 
</span><del>-                    flexFraction = std::max(flexFraction, findFlexFactorUnitSize(tracks, span, direction, maxContentForChild(*gridItem, direction, sizingData)));
</del><ins>+                    flexFraction = std::max(flexFraction, findFlexFactorUnitSize(tracks, span, direction, sizingData.sizingOperation, maxContentForChild(*gridItem, direction, sizingData)));
</ins><span class="cx">                 }
</span><span class="cx">             }
</span><span class="cx">         }
</span><span class="lines">@@ -629,7 +628,7 @@
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     for (auto trackIndex : flexibleSizedTracksIndex) {
</span><del>-        const GridTrackSize&amp; trackSize = gridTrackSize(direction, trackIndex);
</del><ins>+        const GridTrackSize&amp; trackSize = gridTrackSize(direction, trackIndex, sizingData.sizingOperation);
</ins><span class="cx">         GridTrack&amp; track = tracks[trackIndex];
</span><span class="cx">         LayoutUnit oldBaseSize = track.baseSize();
</span><span class="cx">         LayoutUnit baseSize = std::max&lt;LayoutUnit&gt;(oldBaseSize, flexFraction * trackSize.maxTrackBreadth().flex());
</span><span class="lines">@@ -670,7 +669,7 @@
</span><span class="cx">     return infinity;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-double RenderGrid::computeFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp; tracks, GridTrackSizingDirection direction, double flexFactorSum, LayoutUnit leftOverSpace, const Vector&lt;unsigned, 8&gt;&amp; flexibleTracksIndexes, std::unique_ptr&lt;TrackIndexSet&gt; tracksToTreatAsInflexible) const
</del><ins>+double RenderGrid::computeFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp; tracks, GridTrackSizingDirection direction, SizingOperation sizingOperation, double flexFactorSum, LayoutUnit leftOverSpace, const Vector&lt;unsigned, 8&gt;&amp; flexibleTracksIndexes, std::unique_ptr&lt;TrackIndexSet&gt; tracksToTreatAsInflexible) const
</ins><span class="cx"> {
</span><span class="cx">     // We want to avoid the effect of flex factors sum below 1 making the factor unit size to grow exponentially.
</span><span class="cx">     double hypotheticalFactorUnitSize = leftOverSpace / std::max&lt;double&gt;(1, flexFactorSum);
</span><span class="lines">@@ -681,7 +680,7 @@
</span><span class="cx">         if (tracksToTreatAsInflexible &amp;&amp; tracksToTreatAsInflexible-&gt;contains(index))
</span><span class="cx">             continue;
</span><span class="cx">         LayoutUnit baseSize = tracks[index].baseSize();
</span><del>-        double flexFactor = gridTrackSize(direction, index).maxTrackBreadth().flex();
</del><ins>+        double flexFactor = gridTrackSize(direction, index, sizingOperation).maxTrackBreadth().flex();
</ins><span class="cx">         // treating all such tracks as inflexible.
</span><span class="cx">         if (baseSize &gt; hypotheticalFactorUnitSize * flexFactor) {
</span><span class="cx">             leftOverSpace -= baseSize;
</span><span class="lines">@@ -693,11 +692,11 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx">     if (!validFlexFactorUnit)
</span><del>-        return computeFlexFactorUnitSize(tracks, direction, flexFactorSum, leftOverSpace, flexibleTracksIndexes, WTFMove(tracksToTreatAsInflexible));
</del><ins>+        return computeFlexFactorUnitSize(tracks, direction, sizingOperation, flexFactorSum, leftOverSpace, flexibleTracksIndexes, WTFMove(tracksToTreatAsInflexible));
</ins><span class="cx">     return hypotheticalFactorUnitSize;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-double RenderGrid::findFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp; tracks, const GridSpan&amp; tracksSpan, GridTrackSizingDirection direction, LayoutUnit leftOverSpace) const
</del><ins>+double RenderGrid::findFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp; tracks, const GridSpan&amp; tracksSpan, GridTrackSizingDirection direction, SizingOperation sizingOperation, LayoutUnit leftOverSpace) const
</ins><span class="cx"> {
</span><span class="cx">     if (leftOverSpace &lt;= 0)
</span><span class="cx">         return 0;
</span><span class="lines">@@ -705,7 +704,7 @@
</span><span class="cx">     double flexFactorSum = 0;
</span><span class="cx">     Vector&lt;unsigned, 8&gt; flexibleTracksIndexes;
</span><span class="cx">     for (auto trackIndex : tracksSpan) {
</span><del>-        GridTrackSize trackSize = gridTrackSize(direction, trackIndex);
</del><ins>+        GridTrackSize trackSize = gridTrackSize(direction, trackIndex, sizingOperation);
</ins><span class="cx">         if (!trackSize.maxTrackBreadth().isFlex())
</span><span class="cx">             leftOverSpace -= tracks[trackIndex].baseSize();
</span><span class="cx">         else {
</span><span class="lines">@@ -718,14 +717,9 @@
</span><span class="cx">     // The function is not called if we don't have &lt;flex&gt; grid tracks
</span><span class="cx">     ASSERT(!flexibleTracksIndexes.isEmpty());
</span><span class="cx"> 
</span><del>-    return computeFlexFactorUnitSize(tracks, direction, flexFactorSum, leftOverSpace, flexibleTracksIndexes);
</del><ins>+    return computeFlexFactorUnitSize(tracks, direction, sizingOperation, flexFactorSum, leftOverSpace, flexibleTracksIndexes);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-bool RenderGrid::hasDefiniteLogicalSize(GridTrackSizingDirection direction) const
-{
-    return (direction == ForRows) ? hasDefiniteLogicalHeight() : hasDefiniteLogicalWidth();
-}
-
</del><span class="cx"> const GridTrackSize&amp; RenderGrid::rawGridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
</span><span class="cx"> {
</span><span class="cx">     bool isRowAxis = direction == ForColumns;
</span><span class="lines">@@ -757,7 +751,7 @@
</span><span class="cx">     return trackStyles[untranslatedIndex - repetitions];
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
</del><ins>+GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex, SizingOperation sizingOperation) const
</ins><span class="cx"> {
</span><span class="cx">     auto&amp; trackSize = rawGridTrackSize(direction, translatedIndex);
</span><span class="cx"> 
</span><span class="lines">@@ -765,7 +759,9 @@
</span><span class="cx">     GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
</span><span class="cx"> 
</span><span class="cx">     if (minTrackBreadth.isPercentage() || maxTrackBreadth.isPercentage()) {
</span><del>-        if (!hasDefiniteLogicalSize(direction)) {
</del><ins>+        // If the logical width/height of the grid container is indefinite, percentage values are treated as &lt;auto&gt;.
+        // For the inline axis this only happens when we're computing the intrinsic sizes (IntrinsicSizeComputation).
+        if (sizingOperation == IntrinsicSizeComputation || (direction == ForRows &amp;&amp; !hasDefiniteLogicalHeight())) {
</ins><span class="cx">             if (minTrackBreadth.isPercentage())
</span><span class="cx">                 minTrackBreadth = Length(Auto);
</span><span class="cx">             if (maxTrackBreadth.isPercentage())
</span><span class="lines">@@ -816,7 +812,7 @@
</span><span class="cx"> 
</span><span class="cx">     bool overrideLogicalWidthHasChanged = updateOverrideContainingBlockContentLogicalWidthForChild(child, sizingData);
</span><span class="cx">     if (isRowAxis) {
</span><del>-        LayoutUnit marginLogicalWidth = sizingData.sizingOperation == GridSizingData::TrackSizing ? computeMarginLogicalSizeForChild(ForColumns, child) : marginIntrinsicLogicalWidthForChild(child);
</del><ins>+        LayoutUnit marginLogicalWidth = sizingData.sizingOperation == TrackSizing ? computeMarginLogicalSizeForChild(ForColumns, child) : marginIntrinsicLogicalWidthForChild(child);
</ins><span class="cx">         return child.computeLogicalWidthInRegionUsing(MinSize, childMinSize, child.overrideContainingBlockContentLogicalWidth().valueOr(0), *this, nullptr) + marginLogicalWidth;
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -903,10 +899,10 @@
</span><span class="cx">     GridSpan m_span;
</span><span class="cx"> };
</span><span class="cx"> 
</span><del>-bool RenderGrid::spanningItemCrossesFlexibleSizedTracks(const GridSpan&amp; itemSpan, GridTrackSizingDirection direction) const
</del><ins>+bool RenderGrid::spanningItemCrossesFlexibleSizedTracks(const GridSpan&amp; itemSpan, GridTrackSizingDirection direction, SizingOperation sizingOperation) const
</ins><span class="cx"> {
</span><span class="cx">     for (auto trackPosition : itemSpan) {
</span><del>-        const GridTrackSize&amp; trackSize = gridTrackSize(direction, trackPosition);
</del><ins>+        const GridTrackSize&amp; trackSize = gridTrackSize(direction, trackPosition, sizingOperation);
</ins><span class="cx">         if (trackSize.minTrackBreadth().isFlex() || trackSize.maxTrackBreadth().isFlex())
</span><span class="cx">             return true;
</span><span class="cx">     }
</span><span class="lines">@@ -933,7 +929,7 @@
</span><span class="cx">                     GridSpan span = cachedGridSpan(*gridItem, direction);
</span><span class="cx">                     if (span.integerSpan() == 1)
</span><span class="cx">                         resolveContentBasedTrackSizingFunctionsForNonSpanningItems(direction, span, *gridItem, track, sizingData);
</span><del>-                    else if (!spanningItemCrossesFlexibleSizedTracks(span, direction))
</del><ins>+                    else if (!spanningItemCrossesFlexibleSizedTracks(span, direction, sizingData.sizingOperation))
</ins><span class="cx">                         sizingData.itemsSortedByIncreasingSpan.append(GridItemWithSpan(*gridItem, span));
</span><span class="cx">                 }
</span><span class="cx">             }
</span><span class="lines">@@ -963,7 +959,7 @@
</span><span class="cx"> void RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems(GridTrackSizingDirection direction, const GridSpan&amp; span, RenderBox&amp; gridItem, GridTrack&amp; track, GridSizingData&amp; sizingData)
</span><span class="cx"> {
</span><span class="cx">     unsigned trackPosition = span.startLine();
</span><del>-    GridTrackSize trackSize = gridTrackSize(direction, trackPosition);
</del><ins>+    GridTrackSize trackSize = gridTrackSize(direction, trackPosition, sizingData.sizingOperation);
</ins><span class="cx"> 
</span><span class="cx">     if (trackSize.hasMinContentMinTrackBreadth())
</span><span class="cx">         track.setBaseSize(std::max(track.baseSize(), minContentForChild(gridItem, direction, sizingData)));
</span><span class="lines">@@ -1118,7 +1114,7 @@
</span><span class="cx">         sizingData.growBeyondGrowthLimitsTracks.shrink(0);
</span><span class="cx">         LayoutUnit spanningTracksSize;
</span><span class="cx">         for (auto trackPosition : itemSpan) {
</span><del>-            const GridTrackSize&amp; trackSize = gridTrackSize(direction, trackPosition);
</del><ins>+            const GridTrackSize&amp; trackSize = gridTrackSize(direction, trackPosition, sizingData.sizingOperation);
</ins><span class="cx">             GridTrack&amp; track = (direction == ForColumns) ? sizingData.columnTracks[trackPosition] : sizingData.rowTracks[trackPosition];
</span><span class="cx">             spanningTracksSize += trackSizeForTrackSizeComputationPhase(phase, track, ForbidInfinity);
</span><span class="cx">             if (!shouldProcessTrackForTrackSizeComputationPhase(phase, trackSize))
</span><span class="lines">@@ -1209,7 +1205,7 @@
</span><span class="cx">     const Vector&lt;GridTrack&gt;&amp; tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
</span><span class="cx">     const LayoutUnit maxSize = sizingData.freeSpaceForDirection(direction).valueOr(0);
</span><span class="cx">     for (unsigned i = 0; i &lt; tracks.size(); ++i) {
</span><del>-        const GridTrackSize&amp; trackSize = gridTrackSize(direction, i);
</del><ins>+        const GridTrackSize&amp; trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
</ins><span class="cx">         const GridLength&amp; minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="cx">         if (computeUsedBreadthOfMinLength(minTrackBreadth, maxSize) &gt; tracks[i].baseSize())
</span><span class="cx">             return false;
</span><span class="lines">@@ -1560,7 +1556,7 @@
</span><span class="cx">     Vector&lt;GridTrack&gt;&amp; tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
</span><span class="cx">     Vector&lt;unsigned&gt; autoSizedTracksIndex;
</span><span class="cx">     for (unsigned i = 0; i &lt; tracks.size(); ++i) {
</span><del>-        const GridTrackSize&amp; trackSize = gridTrackSize(direction, i);
</del><ins>+        const GridTrackSize&amp; trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
</ins><span class="cx">         if (trackSize.hasAutoMaxTrackBreadth())
</span><span class="cx">             autoSizedTracksIndex.append(i);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (202973 => 202974)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h        2016-07-08 09:37:57 UTC (rev 202973)
+++ trunk/Source/WebCore/rendering/RenderGrid.h        2016-07-08 10:11:10 UTC (rev 202974)
</span><span class="lines">@@ -74,6 +74,7 @@
</span><span class="cx"> 
</span><span class="cx">     class GridIterator;
</span><span class="cx">     class GridSizingData;
</span><ins>+    enum SizingOperation { TrackSizing, IntrinsicSizeComputation };
</ins><span class="cx">     void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&amp;, LayoutUnit&amp; baseSizesWithoutMaximization, LayoutUnit&amp; growthLimitsWithoutMaximization);
</span><span class="cx">     LayoutUnit computeUsedBreadthOfMinLength(const GridLength&amp;, LayoutUnit maxSize) const;
</span><span class="cx">     LayoutUnit computeUsedBreadthOfMaxLength(const GridLength&amp;, LayoutUnit usedBreadth, LayoutUnit maxSize) const;
</span><span class="lines">@@ -131,11 +132,11 @@
</span><span class="cx">     template &lt;TrackSizeComputationPhase&gt; void distributeSpaceToTracks(Vector&lt;GridTrack*&gt;&amp;, const Vector&lt;GridTrack*&gt;* growBeyondGrowthLimitsTracks, LayoutUnit&amp; availableLogicalSpace);
</span><span class="cx"> 
</span><span class="cx">     typedef HashSet&lt;unsigned, DefaultHash&lt;unsigned&gt;::Hash, WTF::UnsignedWithZeroKeyHashTraits&lt;unsigned&gt;&gt; TrackIndexSet;
</span><del>-    double computeFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp;, GridTrackSizingDirection, double flexFactorSum, LayoutUnit leftOverSpace, const Vector&lt;unsigned, 8&gt;&amp; flexibleTracksIndexes, std::unique_ptr&lt;TrackIndexSet&gt; tracksToTreatAsInflexible = nullptr) const;
-    double findFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp;, const GridSpan&amp;, GridTrackSizingDirection, LayoutUnit spaceToFill) const;
</del><ins>+    double computeFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp;, GridTrackSizingDirection, SizingOperation, double flexFactorSum, LayoutUnit leftOverSpace, const Vector&lt;unsigned, 8&gt;&amp; flexibleTracksIndexes, std::unique_ptr&lt;TrackIndexSet&gt; tracksToTreatAsInflexible = nullptr) const;
+    double findFlexFactorUnitSize(const Vector&lt;GridTrack&gt;&amp;, const GridSpan&amp;, GridTrackSizingDirection, SizingOperation, LayoutUnit spaceToFill) const;
</ins><span class="cx"> 
</span><span class="cx">     const GridTrackSize&amp; rawGridTrackSize(GridTrackSizingDirection, unsigned) const;
</span><del>-    GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;
</del><ins>+    GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned, SizingOperation) const;
</ins><span class="cx"> 
</span><span class="cx">     bool updateOverrideContainingBlockContentLogicalWidthForChild(RenderBox&amp;, GridSizingData&amp;);
</span><span class="cx">     LayoutUnit logicalHeightForChild(RenderBox&amp;, GridSizingData&amp;);
</span><span class="lines">@@ -173,12 +174,11 @@
</span><span class="cx">     bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&amp;);
</span><span class="cx"> #endif
</span><span class="cx"> 
</span><del>-    bool spanningItemCrossesFlexibleSizedTracks(const GridSpan&amp;, GridTrackSizingDirection) const;
</del><ins>+    bool spanningItemCrossesFlexibleSizedTracks(const GridSpan&amp;, GridTrackSizingDirection, SizingOperation) const;
</ins><span class="cx"> 
</span><span class="cx">     unsigned gridColumnCount() const;
</span><span class="cx">     unsigned gridRowCount() const;
</span><span class="cx"> 
</span><del>-    bool hasDefiniteLogicalSize(GridTrackSizingDirection) const;
</del><span class="cx">     LayoutUnit translateRTLCoordinate(LayoutUnit) const;
</span><span class="cx"> 
</span><span class="cx">     Vector&lt;Vector&lt;Vector&lt;RenderBox*, 1&gt;&gt;&gt; m_grid;
</span></span></pre>
</div>
</div>

</body>
</html>