<!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>[206253] 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/206253">206253</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2016-09-22 00:57:32 -0700 (Thu, 22 Sep 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Remove the x2 computation of row sizes with indefinite heights
https://bugs.webkit.org/show_bug.cgi?id=162150
Reviewed by Darin Adler.
PerformanceTests:
Added a new test case which checks the layout performance of grids inside other grids, i.e,
grids acting both as grid container and grid item.
* Layout/nested-grid.html: Added.
Source/WebCore:
On <a href="http://trac.webkit.org/projects/webkit/changeset/192154">r192154</a>, among other things, we added a second pass of the track sizing algorithm for
rows in order to properly compute row sizes when the height was indefinite. We did that in
order to have a symmetrical implementation for columns and rows, but unfortunatelly that was
not correct.
Apart from issuing incorrect results in some cases it created a huge performance issue in
the case of having nested grids because we were exponentially increasing the amount of
executions of the track sizing algorithm. The attached performance test shows a 200%
improvement with the patch (26 vs 80 runs/s).
Test: fast/css-grid-layout/nested-grid.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::layoutGridItems):
LayoutTests:
Added a new reftest to check the behavior of grids acting also as grid items and how the
track sizing of rows depend on that. It includes tests for grids which stretch their
children and grids which do not.
Apart from that some expected results were updated so that they no longer fail.
* fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html: Updated expectations.
* fast/css-grid-layout/nested-grid-expected.html: Added.
* fast/css-grid-layout/nested-grid.html: Added.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Removed FIXME.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Fixed 2
failing tests.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheighthtml">trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.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="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnestedgridexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutnestedgridhtml">trunk/LayoutTests/fast/css-grid-layout/nested-grid.html</a></li>
<li><a href="#trunkPerformanceTestsLayoutnestedgridhtml">trunk/PerformanceTests/Layout/nested-grid.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/ChangeLog 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2016-09-19 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Remove the x2 computation of row sizes with indefinite heights
+ https://bugs.webkit.org/show_bug.cgi?id=162150
+
+ Reviewed by Darin Adler.
+
+ Added a new reftest to check the behavior of grids acting also as grid items and how the
+ track sizing of rows depend on that. It includes tests for grids which stretch their
+ children and grids which do not.
+
+ Apart from that some expected results were updated so that they no longer fail.
+
+ * fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html: Updated expectations.
+ * fast/css-grid-layout/nested-grid-expected.html: Added.
+ * fast/css-grid-layout/nested-grid.html: Added.
+ * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Removed FIXME.
+ * fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Fixed 2
+ failing tests.
+
</ins><span class="cx"> 2016-09-21 Jiewen Tan <jiewen_tan@apple.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed, update ios-simulator-wk1 test expectations
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmaximizetracksdefiniteindefiniteheighthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -54,15 +54,15 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid max-content max-height-35" data-expected-width="40" data-expected-height="35">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX XXX XX XXX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX XXX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid max-content max-height-min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100">
</span><span class="lines">@@ -132,11 +132,11 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XX XX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content min-height-fit-content" data-expected-width="40" data-expected-height="100">
</span><span class="lines">@@ -150,11 +150,11 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content min-height-min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content min-height-35" data-expected-width="40" data-expected-height="35">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX XX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content min-height-max-content" data-expected-width="40" data-expected-height="100">
</span><span class="lines">@@ -162,11 +162,11 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XXXX XXXX XXXX XXXX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XXXX XXXX XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="grid min-content max-height-50" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="50">XXXX X X XXXX</div>
</del><ins>+ <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="100">XXXX X X XXXX</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <br>
</span><span class="lines">@@ -209,7 +209,7 @@
</span><span class="cx"> <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXXX X</div>
</span><span class="cx"> </div>
</span><span class="cx"> <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XX XX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
</span><span class="cx"> <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XX X</div>
</span><span class="lines">@@ -230,7 +230,7 @@
</span><span class="cx"> <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX X X</div>
</span><span class="cx"> </div>
</span><span class="cx"> <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">X XXX XX</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX XX</div>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
</span><span class="cx"> <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX X</div>
</span><span class="lines">@@ -239,22 +239,22 @@
</span><span class="cx">
</span><span class="cx"> <div class="fit-content min-height-50" style="height: 75px;">
</span><span class="cx"> <div class="grid fill-available" data-expected-width="40" data-expected-height="75">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="75">XX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div style="height: 25px;">
</span><span class="cx"> <div class="grid fit-content" data-expected-width="40" data-expected-height="25">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="25">XX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="grid fill-available" data-expected-width="40" data-expected-height="25">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="25">XX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="grid fit-content min-height-35" data-expected-width="40" data-expected-height="35">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="grid fit-content max-height-min-content" data-expected-width="40" data-expected-height="0">
</span><del>- <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX X</div>
</del><ins>+ <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutnestedgridexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html (0 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -0,0 +1,83 @@
</span><ins>+<!DOCTYPE html>
+
+<style>
+.outerGrid {
+ width: 200px;
+ height: 50px;
+ border: 5px solid;
+ background: magenta;
+ margin-bottom: 10px;
+}
+
+.innerGrid {
+ background: gray;
+}
+
+.gridItem {
+ background: cyan;
+ font: 10px/1 Ahem;
+}
+
+ .floatLeft {
+ float: left;
+ width: 250px;
+ }
+</style>
+
+<p>This test checks that percentage rows are properly resolved for a grid container that is a grid item.</p>
+
+<div class="floatLeft">
+
+<div class="outerGrid">
+ <div class="innerGrid" style="height: 100%">
+ <div class="gridItem" style="height: 50%"></div>
+ </div>
+</div>
+
+<div class="outerGrid">
+ <div class="innerGrid">
+ <div class="gridItem">X X<br>XX</div>
+ </div>
+</div>
+
+<div class="outerGrid">
+ <div class="innerGrid" style="height: calc(100% * (2/3))">
+ <div class="gridItem" style="height: 50%"></div>
+ </div>
+</div>
+
+<div class="outerGrid">
+ <div class="innerGrid">
+ <div class="gridItem">X X<br>XX</div>
+ </div>
+</div>
+
+</div>
+
+<div class="floatLeft">
+
+<div class="outerGrid">
+ <div class="innerGrid" style="height: 75%">
+ <div class="gridItem" style="height: 75%"></div>
+ </div>
+</div>
+
+<div class="outerGrid">
+ <div class="innerGrid" style="height: calc(20px * (4/3))">
+ <div class="gridItem" style="height: 20px">X X<br>XX</div>
+ </div>
+</div>
+
+<div class="outerGrid">
+ <div class="innerGrid" style="height: 100%;">
+ <div class="gridItem" style="height: 25%"></div>
+ </div>
+</div>
+
+<div class="outerGrid">
+ <div class="innerGrid" style="height: 20px;">
+ <div class="gridItem" style="height: 75%">X X<br>XX</div>
+ </div>
+</div>
+
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsfastcssgridlayoutnestedgridhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/nested-grid.html (0 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/nested-grid.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/nested-grid.html 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -0,0 +1,84 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+
+<style>
+.outerGrid {
+ width: 200px;
+ border: 5px solid;
+ background: magenta;
+ margin-bottom: 10px;
+}
+
+.innerGrid {
+ display: grid;
+}
+
+.gridItem {
+ background: cyan;
+ font: 10px/1 Ahem;
+}
+
+.floatLeft {
+ float: left;
+ width: 250px;
+}
+</style>
+
+<p>This test checks that percentage rows are properly resolved for a grid container that is a grid item.</p>
+
+<div class="floatLeft">
+
+<div class="grid outerGrid" style="grid: 50px / 1fr;">
+ <div class="grid" style="grid: 50% / 1fr;">
+ <div class="gridItem"></div>
+ </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="grid: 50px / 1fr;">
+ <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
+ <div class="gridItem">X X<br>XX</div>
+ </div>
+</div>
+
+<div class="grid outerGrid" style="height: 50px; grid: 2fr 1fr / 1fr;">
+ <div class="grid" style="grid: 50% / 1fr;">
+ <div class="gridItem"></div>
+ </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 2fr 1fr / 1fr;">
+ <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
+ <div class="gridItem">X X<br>XX</div>
+ </div>
+</div>
+
+</div>
+
+<div class="floatLeft">
+
+<div class="grid outerGrid" style="height: 50px; grid: 3fr 1fr / 1fr;">
+ <div class="grid" style="grid: 3fr 1fr / 1fr;">
+ <div class="gridItem"></div>
+ </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 3fr 1fr / 1fr;">
+ <div class="grid alignItemsStart" style="grid: 3fr 1fr / 1fr;">
+ <div class="gridItem">X X<br>XX</div>
+ </div>
+</div>
+
+<div class="grid outerGrid" style="height: 50px; grid: 100% / 1fr;">
+ <div class="grid" style="grid: 50% / 1fr;">
+ <div class="gridItem" style="height: 50%"></div>
+ </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 100% / 1fr;">
+ <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
+ <div class="gridItem" style="height: 75%">X X<br>XX</div>
+ </div>
+</div>
+
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/nested-grid.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsfastcssgridlayoutpercenttrackbreadthsregardingcontainersizeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -35,29 +35,11 @@
</span><span class="cx"> XX
</span><span class="cx"> XXXXX
</span><span class="cx"> XXX
</span><del>-FAIL:
-Expected 10 for height, but got 4.
-Expected 10 for height, but got 4.
-Expected 10 for height, but got 4.
-
-<div class="grid absolutelyPositioned">
- <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
- <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
- <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
- </div>
</del><ins>+PASS
</ins><span class="cx"> XX
</span><span class="cx"> XXXXX
</span><span class="cx"> XXX
</span><del>-FAIL:
-Expected 10 for height, but got 4.
-Expected 10 for height, but got 4.
-Expected 10 for height, but got 4.
-
-<div class="grid absolutelyPositioned">
- <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
- <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
- <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
- </div>
</del><ins>+PASS
</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 (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -119,9 +119,6 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><del>- <!-- 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 -->
</del><span class="cx"> <div class="fit-content indefiniteHeight">
</span><span class="cx"> <div class="grid absolutelyPositioned">
</span><span class="cx"> <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/PerformanceTests/ChangeLog 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2016-09-19 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Remove the x2 computation of row sizes with indefinite heights
+ https://bugs.webkit.org/show_bug.cgi?id=162150
+
+ Reviewed by Darin Adler.
+
+ Added a new test case which checks the layout performance of grids inside other grids, i.e,
+ grids acting both as grid container and grid item.
+
+ * Layout/nested-grid.html: Added.
+
</ins><span class="cx"> 2016-09-09 Simon Fraser <simon.fraser@apple.com>
</span><span class="cx">
</span><span class="cx"> Perf test Animation/css-accelerated-animation.html failing
</span></span></pre></div>
<a id="trunkPerformanceTestsLayoutnestedgridhtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Layout/nested-grid.html (0 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Layout/nested-grid.html (rev 0)
+++ trunk/PerformanceTests/Layout/nested-grid.html 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -0,0 +1,342 @@
</span><ins>+<!DOCTYPE html>
+<head>
+<style>
+html, body {
+ margin: 0;
+ height: 100%;
+}
+
+.grid { display: grid; }
+.gridItem { height: 10px; }
+#gridContainer { grid-auto-columns: 1fr; }
+</style>
+
+<script src="../resources/runner.js"></script>
+<script>
+'use strict';
+
+function startTest() {
+ document.body.offsetHeight;
+
+ var index = 0;
+ PerfTestRunner.measureRunsPerSecond({
+ description: "Measures performance of layout on a page using nested grids.",
+ run: function() {
+ var wrap = document.getElementById("wrap");
+ wrap.style.width = ++index % 2 ? "99%" : "90%";
+ document.body.offsetHeight;
+ }
+ });
+}
+</script>
+</head>
+
+<body onload="startTest()">
+ <div id="wrap" class="grid">
+ <div class="grid">
+ <div class="grid" id="gridContainer">
+ <div class='gridItem' style='grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
+ <div class='gridItem' style='grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
+ <div class='gridItem' style='grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
+ <div class='gridItem' style='grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
+ <div class='gridItem' style='grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
+ <div class='gridItem' style='grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
+ <div class='gridItem' style='grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
+ <div class='gridItem' style='grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
+ <div class='gridItem' style='grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
+ <div class='gridItem' style='grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
+ <div class='gridItem' style='grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
+ <div class='gridItem' style='grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
+ <div class='gridItem' style='grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
+ <div class='gridItem' style='grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
+ <div class='gridItem' style='grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
+ <div class='gridItem' style='grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
+ <div class='gridItem' style='grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
+ <div class='gridItem' style='grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
+ <div class='gridItem' style='grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
+ <div class='gridItem' style='grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
+ <div class='gridItem' style='grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
+ <div class='gridItem' style='grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
+ <div class='gridItem' style='grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
+ <div class='gridItem' style='grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
+ <div class='gridItem' style='grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
+ <div class='gridItem' style='grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
+ <div class='gridItem' style='grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
+ <div class='gridItem' style='grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
+ <div class='gridItem' style='grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
+ <div class='gridItem' style='grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
+ <div class='gridItem' style='grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
+ <div class='gridItem' style='grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
+ <div class='gridItem' style='grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
+ <div class='gridItem' style='grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
+ <div class='gridItem' style='grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
+ <div class='gridItem' style='grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
+ <div class='gridItem' style='grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
+ <div class='gridItem' style='grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
+ <div class='gridItem' style='grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
+ <div class='gridItem' style='grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
+ <div class='gridItem' style='grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
+ <div class='gridItem' style='grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
+ <div class='gridItem' style='grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
+ <div class='gridItem' style='grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
+ <div class='gridItem' style='grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
+ <div class='gridItem' style='grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
+ <div class='gridItem' style='grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
+ <div class='gridItem' style='grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
+ <div class='gridItem' style='grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
+ <div class='gridItem' style='grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
+ <div class='gridItem' style='grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
+ <div class='gridItem' style='grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
+ <div class='gridItem' style='grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
+ <div class='gridItem' style='grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
+ <div class='gridItem' style='grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
+ <div class='gridItem' style='grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
+ <div class='gridItem' style='grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
+ <div class='gridItem' style='grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
+ <div class='gridItem' style='grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
+ <div class='gridItem' style='grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
+ <div class='gridItem' style='grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
+ <div class='gridItem' style='grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
+ <div class='gridItem' style='grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
+ <div class='gridItem' style='grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
+ <div class='gridItem' style='grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
+ <div class='gridItem' style='grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
+ <div class='gridItem' style='grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
+ <div class='gridItem' style='grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
+ <div class='gridItem' style='grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
+ <div class='gridItem' style='grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
+ <div class='gridItem' style='grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
+ <div class='gridItem' style='grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
+ <div class='gridItem' style='grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
+ <div class='gridItem' style='grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
+ <div class='gridItem' style='grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
+ <div class='gridItem' style='grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
+ <div class='gridItem' style='grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
+ <div class='gridItem' style='grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
+ <div class='gridItem' style='grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
+ <div class='gridItem' style='grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
+ <div class='gridItem' style='grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
+ <div class='gridItem' style='grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
+ <div class='gridItem' style='grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
+ <div class='gridItem' style='grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
+ <div class='gridItem' style='grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
+ <div class='gridItem' style='grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
+ <div class='gridItem' style='grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
+ <div class='gridItem' style='grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
+ <div class='gridItem' style='grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
+ <div class='gridItem' style='grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
+ <div class='gridItem' style='grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
+ <div class='gridItem' style='grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
+ <div class='gridItem' style='grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
+ <div class='gridItem' style='grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
+ <div class='gridItem' style='grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
+ <div class='gridItem' style='grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
+ <div class='gridItem' style='grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
+ <div class='gridItem' style='grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
+ <div class='gridItem' style='grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
+ <div class='gridItem' style='grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
+ <div class='gridItem' style='grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
+ <div class='gridItem' style='grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
+ <div class='gridItem' style='grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
+ <div class='gridItem' style='grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
+ <div class='gridItem' style='grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
+ <div class='gridItem' style='grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
+ <div class='gridItem' style='grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
+ <div class='gridItem' style='grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
+ <div class='gridItem' style='grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
+ <div class='gridItem' style='grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
+ <div class='gridItem' style='grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
+ <div class='gridItem' style='grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
+ <div class='gridItem' style='grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
+ <div class='gridItem' style='grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
+ <div class='gridItem' style='grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
+ <div class='gridItem' style='grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
+ <div class='gridItem' style='grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
+ <div class='gridItem' style='grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
+ <div class='gridItem' style='grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
+ <div class='gridItem' style='grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
+ <div class='gridItem' style='grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
+ <div class='gridItem' style='grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
+ <div class='gridItem' style='grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
+ <div class='gridItem' style='grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
+ <div class='gridItem' style='grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
+ <div class='gridItem' style='grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
+ <div class='gridItem' style='grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
+ <div class='gridItem' style='grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
+ <div class='gridItem' style='grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
+ <div class='gridItem' style='grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
+ <div class='gridItem' style='grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
+ <div class='gridItem' style='grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
+ <div class='gridItem' style='grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
+ <div class='gridItem' style='grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
+ <div class='gridItem' style='grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
+ <div class='gridItem' style='grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
+ <div class='gridItem' style='grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
+ <div class='gridItem' style='grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
+ <div class='gridItem' style='grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
+ <div class='gridItem' style='grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
+ <div class='gridItem' style='grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
+ <div class='gridItem' style='grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
+ <div class='gridItem' style='grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
+ <div class='gridItem' style='grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
+ <div class='gridItem' style='grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
+ <div class='gridItem' style='grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
+ <div class='gridItem' style='grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
+ <div class='gridItem' style='grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
+ <div class='gridItem' style='grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
+ <div class='gridItem' style='grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
+ <div class='gridItem' style='grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
+ <div class='gridItem' style='grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
+ <div class='gridItem' style='grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
+ <div class='gridItem' style='grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
+ <div class='gridItem' style='grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
+ <div class='gridItem' style='grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
+ <div class='gridItem' style='grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
+ <div class='gridItem' style='grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
+ <div class='gridItem' style='grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
+ <div class='gridItem' style='grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
+ <div class='gridItem' style='grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
+ <div class='gridItem' style='grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
+ <div class='gridItem' style='grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
+ <div class='gridItem' style='grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
+ <div class='gridItem' style='grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
+ <div class='gridItem' style='grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
+ <div class='gridItem' style='grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
+ <div class='gridItem' style='grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
+ <div class='gridItem' style='grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
+ <div class='gridItem' style='grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
+ <div class='gridItem' style='grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
+ <div class='gridItem' style='grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
+ <div class='gridItem' style='grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
+ <div class='gridItem' style='grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
+ <div class='gridItem' style='grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
+ <div class='gridItem' style='grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
+ <div class='gridItem' style='grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
+ <div class='gridItem' style='grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
+ <div class='gridItem' style='grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
+ <div class='gridItem' style='grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
+ <div class='gridItem' style='grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
+ <div class='gridItem' style='grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
+ <div class='gridItem' style='grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
+ <div class='gridItem' style='grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
+ <div class='gridItem' style='grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
+ <div class='gridItem' style='grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
+ <div class='gridItem' style='grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
+ <div class='gridItem' style='grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
+ <div class='gridItem' style='grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
+ <div class='gridItem' style='grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
+ <div class='gridItem' style='grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
+ <div class='gridItem' style='grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
+ <div class='gridItem' style='grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
+ <div class='gridItem' style='grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
+ <div class='gridItem' style='grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
+ <div class='gridItem' style='grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
+ <div class='gridItem' style='grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
+ <div class='gridItem' style='grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
+ <div class='gridItem' style='grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
+ <div class='gridItem' style='grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
+ <div class='gridItem' style='grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
+ <div class='gridItem' style='grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
+ <div class='gridItem' style='grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
+ <div class='gridItem' style='grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
+ <div class='gridItem' style='grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
+ <div class='gridItem' style='grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
+ <div class='gridItem' style='grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
+ <div class='gridItem' style='grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
+ <div class='gridItem' style='grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
+ <div class='gridItem' style='grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
+ <div class='gridItem' style='grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
+ <div class='gridItem' style='grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
+ <div class='gridItem' style='grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
+ <div class='gridItem' style='grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
+ <div class='gridItem' style='grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
+ <div class='gridItem' style='grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
+ <div class='gridItem' style='grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
+ <div class='gridItem' style='grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
+ <div class='gridItem' style='grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
+ <div class='gridItem' style='grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
+ <div class='gridItem' style='grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
+ <div class='gridItem' style='grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
+ <div class='gridItem' style='grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
+ <div class='gridItem' style='grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
+ <div class='gridItem' style='grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
+ <div class='gridItem' style='grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
+ <div class='gridItem' style='grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
+ <div class='gridItem' style='grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
+ <div class='gridItem' style='grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
+ <div class='gridItem' style='grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
+ <div class='gridItem' style='grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
+ <div class='gridItem' style='grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
+ <div class='gridItem' style='grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
+ <div class='gridItem' style='grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
+ <div class='gridItem' style='grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
+ <div class='gridItem' style='grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
+ <div class='gridItem' style='grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
+ <div class='gridItem' style='grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
+ <div class='gridItem' style='grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
+ <div class='gridItem' style='grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
+ <div class='gridItem' style='grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
+ <div class='gridItem' style='grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
+ <div class='gridItem' style='grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
+ <div class='gridItem' style='grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
+ <div class='gridItem' style='grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
+ <div class='gridItem' style='grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
+ <div class='gridItem' style='grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
+ <div class='gridItem' style='grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
+ <div class='gridItem' style='grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
+ <div class='gridItem' style='grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
+ <div class='gridItem' style='grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
+ <div class='gridItem' style='grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
+ <div class='gridItem' style='grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
+ <div class='gridItem' style='grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
+ <div class='gridItem' style='grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
+ <div class='gridItem' style='grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
+ <div class='gridItem' style='grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
+ <div class='gridItem' style='grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
+ <div class='gridItem' style='grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
+ <div class='gridItem' style='grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
+ <div class='gridItem' style='grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
+ <div class='gridItem' style='grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
+ <div class='gridItem' style='grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
+ <div class='gridItem' style='grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
+ <div class='gridItem' style='grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
+ <div class='gridItem' style='grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
+ <div class='gridItem' style='grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
+ <div class='gridItem' style='grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
+ <div class='gridItem' style='grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
+ <div class='gridItem' style='grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
+ <div class='gridItem' style='grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
+ <div class='gridItem' style='grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
+ <div class='gridItem' style='grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
+ <div class='gridItem' style='grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
+ <div class='gridItem' style='grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
+ <div class='gridItem' style='grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
+ <div class='gridItem' style='grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
+ <div class='gridItem' style='grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
+ <div class='gridItem' style='grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
+ <div class='gridItem' style='grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
+ <div class='gridItem' style='grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
+ <div class='gridItem' style='grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
+ <div class='gridItem' style='grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
+ <div class='gridItem' style='grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
+ <div class='gridItem' style='grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
+ <div class='gridItem' style='grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
+ <div class='gridItem' style='grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
+ <div class='gridItem' style='grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
+ <div class='gridItem' style='grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
+ <div class='gridItem' style='grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
+ <div class='gridItem' style='grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
+ <div class='gridItem' style='grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
+ <div class='gridItem' style='grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
+ <div class='gridItem' style='grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
+ <div class='gridItem' style='grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
+ <div class='gridItem' style='grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
+ <div class='gridItem' style='grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
+ <div class='gridItem' style='grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
+ <div class='gridItem' style='grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
+ <div class='gridItem' style='grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
+ </div>
+ </div>
+ </div>
+ <pre id="log"></pre>
+</body>
</ins><span class="cx">Property changes on: trunk/PerformanceTests/Layout/nested-grid.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/Source/WebCore/ChangeLog 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2016-09-19 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Remove the x2 computation of row sizes with indefinite heights
+ https://bugs.webkit.org/show_bug.cgi?id=162150
+
+ Reviewed by Darin Adler.
+
+ On r192154, among other things, we added a second pass of the track sizing algorithm for
+ rows in order to properly compute row sizes when the height was indefinite. We did that in
+ order to have a symmetrical implementation for columns and rows, but unfortunatelly that was
+ not correct.
+
+ Apart from issuing incorrect results in some cases it created a huge performance issue in
+ the case of having nested grids because we were exponentially increasing the amount of
+ executions of the track sizing algorithm. The attached performance test shows a 200%
+ improvement with the patch (26 vs 80 runs/s).
+
+ Test: fast/css-grid-layout/nested-grid.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::layoutBlock):
+ (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+ (WebCore::RenderGrid::layoutGridItems):
+
</ins><span class="cx"> 2016-09-22 Youenn Fablet <youenn@apple.com>
</span><span class="cx">
</span><span class="cx"> Improve DeferredWrapper code
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (206252 => 206253)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-09-22 07:57:32 UTC (rev 206253)
</span><span class="lines">@@ -462,7 +462,6 @@
</span><span class="cx">
</span><span class="cx"> setLogicalHeight(0);
</span><span class="cx"> updateLogicalWidth();
</span><del>- bool logicalHeightWasIndefinite = !computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
</del><span class="cx">
</span><span class="cx"> placeItemsOnGrid(TrackSizing);
</span><span class="cx">
</span><span class="lines">@@ -475,7 +474,10 @@
</span><span class="cx"> LayoutUnit availableSpaceForColumns = availableLogicalWidth();
</span><span class="cx"> computeTrackSizesForDirection(ForColumns, sizingData, availableSpaceForColumns);
</span><span class="cx">
</span><del>- if (logicalHeightWasIndefinite)
</del><ins>+ // FIXME: We should use RenderBlock::hasDefiniteLogicalHeight() but it does not work for positioned stuff.
+ // FIXME: Consider caching the hasDefiniteLogicalHeight value throughout the layout.
+ bool hasDefiniteLogicalHeight = hasOverrideLogicalContentHeight() || computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
+ if (!hasDefiniteLogicalHeight)
</ins><span class="cx"> computeIntrinsicLogicalHeight(sizingData);
</span><span class="cx"> else
</span><span class="cx"> computeTrackSizesForDirection(ForRows, sizingData, availableLogicalHeight(ExcludeMarginBorderPadding));
</span><span class="lines">@@ -484,16 +486,10 @@
</span><span class="cx"> LayoutUnit oldClientAfterEdge = clientLogicalBottom();
</span><span class="cx"> updateLogicalHeight();
</span><span class="cx">
</span><del>- // 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).
- LayoutUnit availableSpaceForRows = contentLogicalHeight();
- if (logicalHeightWasIndefinite)
- computeTrackSizesForDirection(ForRows, sizingData, availableSpaceForRows);
-
</del><span class="cx"> // 3- If the min-content contribution of any grid items have changed based on the row
</span><span class="cx"> // sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content
</span><span class="cx"> // contribution (once only).
</span><del>- repeatTracksSizingIfNeeded(sizingData, availableSpaceForColumns, availableSpaceForRows);
</del><ins>+ repeatTracksSizingIfNeeded(sizingData, availableSpaceForColumns, contentLogicalHeight());
</ins><span class="cx">
</span><span class="cx"> // Grid container should have the minimum height of a line if it's editable. That does not affect track sizing though.
</span><span class="cx"> if (hasLineIfEmpty()) {
</span><span class="lines">@@ -633,6 +629,7 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
</span><span class="cx"> {
</span><ins>+ ASSERT(sizingData.isValidTransition(ForRows));
</ins><span class="cx"> ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
</span><span class="cx"> sizingData.setAvailableSpace(Nullopt);
</span><span class="cx"> sizingData.setFreeSpace(ForRows, Nullopt);
</span><span class="lines">@@ -654,6 +651,8 @@
</span><span class="cx"> m_maxContentHeight = maxHeight;
</span><span class="cx">
</span><span class="cx"> ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData));
</span><ins>+ sizingData.advanceNextState();
+ sizingData.sizingOperation = TrackSizing;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> Optional<LayoutUnit> RenderGrid::computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicLogicalHeight, LayoutUnit borderAndPadding) const
</span><span class="lines">@@ -1888,6 +1887,7 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::layoutGridItems(GridSizingData& sizingData)
</span><span class="cx"> {
</span><ins>+ ASSERT(sizingData.sizingOperation == TrackSizing);
</ins><span class="cx"> populateGridPositionsForDirection(sizingData, ForColumns);
</span><span class="cx"> populateGridPositionsForDirection(sizingData, ForRows);
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>