<!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>[210669] 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/210669">210669</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2017-01-12 10:41:28 -0800 (Thu, 12 Jan 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Make the grid sizing data persistent through layouts
https://bugs.webkit.org/show_bug.cgi?id=166883
Reviewed by Darin Adler and Manuel Rego Casasnovas.
Source/WebCore:
We want to keep the grid sizing data structures through different
layouts. This will allow to optimize some operations, reusing
these data while still valid. Additionally, operations like
determining the baseline position when the grid container is under
an inline formatting context need these data once the grid has
been laid out.
This patch controls the sizing data validity and make the data
structures persistent after layout.
Tests: fast/css-grid-layout/grid-add-item-with-positioned-items.html
fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html
fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
fast/css-grid-layout/grid-item-change-order-auto-flow.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::styleDidChange): Evaluate if the style change made the grid data invalid.
(WebCore::RenderBox::updateGridPositionAfterStyleChange): Evaluate if the style change made the grid data invalid.
* rendering/RenderBox.h:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::Grid::setNeedsItemsPlacement): The grid must execute the items placement logic before continue processing the layout.
(WebCore::RenderGrid::addChild): Mark the grid data as dirty.
(WebCore::RenderGrid::removeChild): Mark the grid data as dirty.
(WebCore::RenderGrid::styleDidChange): Evaluate grid data validity.
(WebCore::RenderGrid::explicitGridDidResize): Mark the grid data as dirty.
(WebCore::RenderGrid::namedGridLinesDefinitionDidChange): Mark the grid data as dirty.
(WebCore::RenderGrid::layoutBlock): We don't need to clear the grid data anymore.
(WebCore::RenderGrid::dirtyGrid): Clearing the grid data and mark is as needing to execute the items placement logic.
(WebCore::RenderGrid::trackSizesForComputedStyle): Assert we don't need to perform the items placement logic.
(WebCore::RenderGrid::paintChildren): Assert we don't need to perform the items placement logic.
* rendering/RenderGrid.h:
(WebCore::RenderGrid::clear): Deleted.
LayoutTests:
The tests added are now needed to verify we perform correctly the
data validation after certain style changes.
* fast/css-grid-layout/grid-add-item-with-positioned-items-expected.txt: Added.
* fast/css-grid-layout/grid-add-item-with-positioned-items.html: Added.
* fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item-expected.txt: Added.
* fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html: Added.
* fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt: Added.
* fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html: Added.
* fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt: Added.
* fast/css-grid-layout/grid-item-change-order-auto-flow.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxh">trunk/Source/WebCore/rendering/RenderBox.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridadditemwithpositioneditemsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridadditemwithpositioneditemshtml">trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaddpositionedblockitemafterinlineitemexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridaddpositionedblockitemafterinlineitemhtml">trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerchangeexplicitgridrecomputechildexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontainerchangeexplicitgridrecomputechildhtml">trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemchangeorderautoflowexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemchangeorderautoflowhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (210668 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-01-12 18:34:20 UTC (rev 210668)
+++ trunk/LayoutTests/ChangeLog 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2017-01-12 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Make the grid sizing data persistent through layouts
+ https://bugs.webkit.org/show_bug.cgi?id=166883
+
+ Reviewed by Darin Adler and Manuel Rego Casasnovas.
+
+ The tests added are now needed to verify we perform correctly the
+ data validation after certain style changes.
+
+ * fast/css-grid-layout/grid-add-item-with-positioned-items-expected.txt: Added.
+ * fast/css-grid-layout/grid-add-item-with-positioned-items.html: Added.
+ * fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item-expected.txt: Added.
+ * fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html: Added.
+ * fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt: Added.
+ * fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html: Added.
+ * fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-change-order-auto-flow.html: Added.
+
</ins><span class="cx"> 2017-01-12 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> [iOS] Implement support for KeyboardEvent.code
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridadditemwithpositioneditemsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items-expected.txt (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items-expected.txt 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,3 @@
</span><ins>+This tests checks that adding grid items when some of them are positioned does not crash.
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridadditemwithpositioneditemshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items.html (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-add-item-with-positioned-items.html 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ #grid {
+ display: grid;
+ grid-auto-flow: stack;
+ }
+ .absolute {
+ position: absolute;
+ }
+</style>
+<script type="text/javascript">
+ if (window.testRunner)
+ testRunner.dumpAsText();
+</script>
+</head>
+<body>
+ <p>This tests checks that adding grid items when some of them are positioned does not crash.</p>
+ <div id="grid">
+ <div></div>
+ <div class="absolute"></div>
+ </div>
+ <script>
+ var grid = document.getElementById("grid");
+ grid.offsetTop;
+ var newItem1 = document.createElement("div");
+ grid.appendChild(newItem1);
+ var newItem2 = document.createElement("div");
+ newItem2.className = "absolute";
+ grid.appendChild(newItem2);
+ </script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaddpositionedblockitemafterinlineitemexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item-expected.txt (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item-expected.txt 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,3 @@
</span><ins>+This test checks that adding a positioned block grid item after an inline grid item (which inserts it inside the existing anonymous block wrapping the inline item) does not crash on debug.
+
+test
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridaddpositionedblockitemafterinlineitemhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ #grid {
+ display: grid;
+ grid-auto-flow: stack;
+ }
+ embed {
+ position: absolute;
+ }
+</style>
+<script type="text/javascript">
+ if (window.testRunner)
+ testRunner.dumpAsText();
+</script>
+</head>
+<body>
+ <p>This test checks that adding a positioned block grid item after an inline grid item (which inserts it inside the
+ existing anonymous block wrapping the inline item) does not crash on debug.</p>
+ <div id="grid">
+ test
+ </div>
+ <script>
+ var grid = document.getElementById("grid");
+ grid.offsetTop;
+ var embed = document.createElement("embed");
+ embed.setAttribute("type", "image/png");
+ grid.appendChild(embed);
+ </script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerchangeexplicitgridrecomputechildexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child-expected.txt 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+This test checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontainerchangeexplicitgridrecomputechildhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,79 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+.grid {
+ grid-auto-flow: row dense;
+ grid-auto-rows: 5px;
+ grid-auto-columns: 5px;
+}
+#firstGridItem {
+ grid-row: auto;
+ grid-column: 1;
+}
+
+#secondGridItem {
+ grid-row: 1;
+ grid-column: auto;
+}
+
+#thirdGridItem {
+ grid-row: auto;
+ grid-column: auto;
+}
+</style>
+<script>
+function testGridDefinitions(gridTemplateRows, gridTemplateColumns, gridTemplateAreas, firstGridItemData, secondGridItemData, thirdGridItemData)
+{
+ var gridElement = document.getElementsByClassName("grid")[0];
+ gridElement.style.gridTemplateRows = gridTemplateRows;
+ gridElement.style.gridTemplateColumns = gridTemplateColumns;
+ gridElement.style.gridTemplateAreas = gridTemplateAreas;
+
+ var firstGridItem = document.getElementById("firstGridItem");
+ firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
+ firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
+ firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
+ firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
+
+ var secondGridItem = document.getElementById("secondGridItem");
+ secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
+ secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
+ secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
+ secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
+
+ var thirdGridItem = document.getElementById("thirdGridItem");
+ thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
+ thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
+ thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
+ thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
+
+ checkLayout(".grid");
+}
+
+function testChangingGridDefinitions()
+{
+ testGridDefinitions('10px 20px', '10px', '', { 'width': '10', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '30' });
+ testGridDefinitions('10px', '10px', '"a"', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '15' });
+ testGridDefinitions('10px', '10px', '"a ."', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '5', 'height': '10', 'x': '10', 'y': '0' });
+ testGridDefinitions('50px', '30px 40px', '', { 'width': '30', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '30', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '40', 'height': '50', 'x': '30', 'y': '0' });
+ testGridDefinitions('50px', '60px', '', { 'width': '60', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '5', 'x': '0', 'y': '55' });
+ testGridDefinitions('50px 100px 150px', '60px', '', { 'width': '60', 'height': '100', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '150', 'x': '0', 'y': '150' });
+}
+
+window.addEventListener("load", testChangingGridDefinitions, false);
+</script>
+<body>
+<div>This test checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items.</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div class="sizedToGridArea" id="firstGridItem"></div>
+ <div class="sizedToGridArea" id="secondGridItem"></div>
+ <div class="sizedToGridArea" id="thirdGridItem"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemchangeorderautoflowexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow-expected.txt 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+This test checks that grid items' 'order' dynamic updates recomputes the positions of automatically placed grid items.
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemchangeorderautoflowhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html (0 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -0,0 +1,76 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+.grid {
+ grid-auto-flow: row;
+ grid-template-rows: 50px 100px;
+ grid-template-columns: 40px;
+}
+
+#firstGridItem {
+ grid-row: auto;
+ grid-column: 1;
+}
+
+#secondGridItem {
+ grid-row: 1;
+ grid-column: auto;
+}
+
+#thirdGridItem {
+ grid-row: auto;
+ grid-column: auto;
+}
+</style>
+<script>
+function testGridItemsOrder(firstGridItemData, secondGridItemData, thirdGridItemData)
+{
+ var firstGridItem = document.getElementById("firstGridItem");
+ firstGridItem.style.order = firstGridItemData.order;
+ firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
+ firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
+ firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
+ firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
+
+ var secondGridItem = document.getElementById("secondGridItem");
+ secondGridItem.style.order = secondGridItemData.order;
+ secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
+ secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
+ secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
+ secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
+
+ var thirdGridItem = document.getElementById("thirdGridItem");
+ thirdGridItem.style.order = thirdGridItemData.order;
+ thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
+ thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
+ thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
+ thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
+
+ checkLayout(".grid");
+}
+
+function testChangingGridItemsOrder()
+{
+ testGridItemsOrder({ 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }, { 'order': '0', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
+ testGridItemsOrder({ 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
+ testGridItemsOrder({ 'order': '1', 'width': '40', 'height': '0', 'x': '0', 'y': '150' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' });
+ testGridItemsOrder({ 'order': '1', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '10', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
+}
+
+window.addEventListener("load", testChangingGridItemsOrder, false);
+</script>
+<body>
+<div>This test checks that grid items' 'order' dynamic updates recomputes the positions of automatically placed grid items.</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div class="sizedToGridArea" id="firstGridItem"></div>
+ <div class="sizedToGridArea" id="secondGridItem"></div>
+ <div class="sizedToGridArea" id="thirdGridItem"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (210668 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-01-12 18:34:20 UTC (rev 210668)
+++ trunk/Source/WebCore/ChangeLog 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2017-01-12 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Make the grid sizing data persistent through layouts
+ https://bugs.webkit.org/show_bug.cgi?id=166883
+
+ Reviewed by Darin Adler and Manuel Rego Casasnovas.
+
+ We want to keep the grid sizing data structures through different
+ layouts. This will allow to optimize some operations, reusing
+ these data while still valid. Additionally, operations like
+ determining the baseline position when the grid container is under
+ an inline formatting context need these data once the grid has
+ been laid out.
+
+ This patch controls the sizing data validity and make the data
+ structures persistent after layout.
+
+ Tests: fast/css-grid-layout/grid-add-item-with-positioned-items.html
+ fast/css-grid-layout/grid-add-positioned-block-item-after-inline-item.html
+ fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
+ fast/css-grid-layout/grid-item-change-order-auto-flow.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::styleDidChange): Evaluate if the style change made the grid data invalid.
+ (WebCore::RenderBox::updateGridPositionAfterStyleChange): Evaluate if the style change made the grid data invalid.
+ * rendering/RenderBox.h:
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::Grid::setNeedsItemsPlacement): The grid must execute the items placement logic before continue processing the layout.
+ (WebCore::RenderGrid::addChild): Mark the grid data as dirty.
+ (WebCore::RenderGrid::removeChild): Mark the grid data as dirty.
+ (WebCore::RenderGrid::styleDidChange): Evaluate grid data validity.
+ (WebCore::RenderGrid::explicitGridDidResize): Mark the grid data as dirty.
+ (WebCore::RenderGrid::namedGridLinesDefinitionDidChange): Mark the grid data as dirty.
+ (WebCore::RenderGrid::layoutBlock): We don't need to clear the grid data anymore.
+ (WebCore::RenderGrid::dirtyGrid): Clearing the grid data and mark is as needing to execute the items placement logic.
+ (WebCore::RenderGrid::trackSizesForComputedStyle): Assert we don't need to perform the items placement logic.
+ (WebCore::RenderGrid::paintChildren): Assert we don't need to perform the items placement logic.
+ * rendering/RenderGrid.h:
+ (WebCore::RenderGrid::clear): Deleted.
+
</ins><span class="cx"> 2017-01-12 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> [iOS] Implement support for KeyboardEvent.code
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (210668 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp 2017-01-12 18:34:20 UTC (rev 210668)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -73,6 +73,10 @@
</span><span class="cx"> #include <math.h>
</span><span class="cx"> #include <wtf/StackStats.h>
</span><span class="cx">
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+#include "RenderGrid.h"
+#endif
+
</ins><span class="cx"> #if PLATFORM(IOS)
</span><span class="cx"> #include "Settings.h"
</span><span class="cx"> #endif
</span><span class="lines">@@ -450,6 +454,9 @@
</span><span class="cx">
</span><span class="cx"> if ((oldStyle && oldStyle->shapeOutside()) || style().shapeOutside())
</span><span class="cx"> updateShapeOutsideInfoAfterStyleChange(style(), oldStyle);
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+ updateGridPositionAfterStyleChange(style(), oldStyle);
+#endif
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderBox::willBeRemovedFromTree()
</span><span class="lines">@@ -462,6 +469,34 @@
</span><span class="cx"> RenderBoxModelObject::willBeRemovedFromTree();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#if ENABLE(CSS_GRID_LAYOUT)
+
+void RenderBox::updateGridPositionAfterStyleChange(const RenderStyle& style, const RenderStyle* oldStyle)
+{
+ if (!oldStyle || !is<RenderGrid>(parent()))
+ return;
+
+ if (oldStyle->gridItemColumnStart() == style.gridItemColumnStart()
+ && oldStyle->gridItemColumnEnd() == style.gridItemColumnEnd()
+ && oldStyle->gridItemRowStart() == style.gridItemRowStart()
+ && oldStyle->gridItemRowEnd() == style.gridItemRowEnd()
+ && oldStyle->order() == style.order()
+ && oldStyle->hasOutOfFlowPosition() == style.hasOutOfFlowPosition())
+ return;
+
+ // Positioned items don't participate on the layout of the grid,
+ // so we don't need to mark the grid as dirty if they change positions.
+ if (oldStyle->hasOutOfFlowPosition() && style.hasOutOfFlowPosition())
+ return;
+
+ // It should be possible to not dirty the grid in some cases (like moving an
+ // explicitly placed grid item).
+ // For now, it's more simple to just always recompute the grid.
+ downcast<RenderGrid>(*parent()).dirtyGrid();
+}
+
+#endif
+
</ins><span class="cx"> void RenderBox::updateShapeOutsideInfoAfterStyleChange(const RenderStyle& style, const RenderStyle* oldStyle)
</span><span class="cx"> {
</span><span class="cx"> const ShapeValue* shapeOutside = style.shapeOutside();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.h (210668 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.h 2017-01-12 18:34:20 UTC (rev 210668)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -654,6 +654,7 @@
</span><span class="cx"> void updateShapeOutsideInfoAfterStyleChange(const RenderStyle&, const RenderStyle* oldStyle);
</span><span class="cx">
</span><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><ins>+ void updateGridPositionAfterStyleChange(const RenderStyle&, const RenderStyle* oldStyle);
</ins><span class="cx"> bool isGridItem() const { return parent() && parent()->isRenderGrid(); }
</span><span class="cx"> #endif
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (210668 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2017-01-12 18:34:20 UTC (rev 210668)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -152,23 +152,20 @@
</span><span class="cx"> {
</span><span class="cx"> m_needsItemsPlacement = needsItemsPlacement;
</span><span class="cx">
</span><del>- if (needsItemsPlacement)
- clear();
-}
</del><ins>+ if (!needsItemsPlacement) {
+ m_grid.shrinkToFit();
+ return;
+ }
</ins><span class="cx">
</span><del>-void RenderGrid::Grid::clear()
-{
</del><span class="cx"> m_grid.resize(0);
</span><span class="cx"> m_gridItemArea.clear();
</span><span class="cx"> m_hasAnyOrthogonalGridItem = false;
</span><span class="cx"> m_smallestRowStart = 0;
</span><span class="cx"> m_smallestColumnStart = 0;
</span><del>- // FIXME: clear these once m_grid survives layout. We cannot clear them now because they're
- // needed after layout.
- // m_autoRepeatEmptyColumns = nullptr;
- // m_autoRepeatEmptyRows = nullptr;
- // m_autoRepeatColumns = 0;
- // m_autoRepeatRows = 0;
</del><ins>+ m_autoRepeatEmptyColumns = nullptr;
+ m_autoRepeatEmptyRows = nullptr;
+ m_autoRepeatColumns = 0;
+ m_autoRepeatRows = 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> class GridTrack {
</span><span class="lines">@@ -491,6 +488,24 @@
</span><span class="cx"> && childStyle.resolvedAlignSelf(newStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void RenderGrid::addChild(RenderObject* newChild, RenderObject* beforeChild)
+{
+ RenderBlock::addChild(newChild, beforeChild);
+
+ // The grid needs to be recomputed as it might contain auto-placed items that
+ // will change their position.
+ dirtyGrid();
+}
+
+void RenderGrid::removeChild(RenderObject& child)
+{
+ RenderBlock::removeChild(child);
+
+ // The grid needs to be recomputed as it might contain auto-placed items that
+ // will change their position.
+ dirtyGrid();
+}
+
</ins><span class="cx"> void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
</span><span class="cx"> {
</span><span class="cx"> RenderBlock::styleDidChange(diff, oldStyle);
</span><span class="lines">@@ -512,8 +527,28 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> }
</span><ins>+
+ if (explicitGridDidResize(*oldStyle) || namedGridLinesDefinitionDidChange(*oldStyle) || oldStyle->gridAutoFlow() != style().gridAutoFlow()
+ || (style().gridAutoRepeatColumns().size() || style().gridAutoRepeatRows().size()))
+ dirtyGrid();
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+bool RenderGrid::explicitGridDidResize(const RenderStyle& oldStyle) const
+{
+ return oldStyle.gridColumns().size() != style().gridColumns().size()
+ || oldStyle.gridRows().size() != style().gridRows().size()
+ || oldStyle.namedGridAreaColumnCount() != style().namedGridAreaColumnCount()
+ || oldStyle.namedGridAreaRowCount() != style().namedGridAreaRowCount()
+ || oldStyle.gridAutoRepeatColumns().size() != style().gridAutoRepeatColumns().size()
+ || oldStyle.gridAutoRepeatRows().size() != style().gridAutoRepeatRows().size();
+}
+
+bool RenderGrid::namedGridLinesDefinitionDidChange(const RenderStyle& oldStyle) const
+{
+ return oldStyle.namedGridRowLines() != style().namedGridRowLines()
+ || oldStyle.namedGridColumnLines() != style().namedGridColumnLines();
+}
+
</ins><span class="cx"> LayoutUnit RenderGrid::computeTrackBasedLogicalHeight(const GridSizingData& sizingData) const
</span><span class="cx"> {
</span><span class="cx"> LayoutUnit logicalHeight;
</span><span class="lines">@@ -651,8 +686,6 @@
</span><span class="cx">
</span><span class="cx"> layoutPositionedObjects(relayoutChildren || isDocumentElementRenderer());
</span><span class="cx">
</span><del>- clearGrid();
-
</del><span class="cx"> computeOverflow(oldClientAfterEdge);
</span><span class="cx"> statePusher.pop();
</span><span class="cx">
</span><span class="lines">@@ -1953,8 +1986,11 @@
</span><span class="cx"> return style().isGridAutoFlowDirectionColumn() ? ForRows : ForColumns;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderGrid::clearGrid()
</del><ins>+void RenderGrid::dirtyGrid()
</ins><span class="cx"> {
</span><ins>+ if (m_grid.needsItemsPlacement())
+ return;
+
</ins><span class="cx"> m_grid.setNeedsItemsPlacement(true);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1969,8 +2005,7 @@
</span><span class="cx"> if (numPositions < 2)
</span><span class="cx"> return tracks;
</span><span class="cx">
</span><del>- // FIXME: enable the ASSERT once m_grid is persistent.
- // ASSERT(!m_grid.needsItemsPlacement());
</del><ins>+ ASSERT(!m_grid.needsItemsPlacement());
</ins><span class="cx"> bool hasCollapsedTracks = m_grid.hasAutoRepeatEmptyTracks(direction);
</span><span class="cx"> LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();
</span><span class="cx"> tracks.reserveCapacity(numPositions - 1);
</span><span class="lines">@@ -2803,8 +2838,7 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::paintChildren(PaintInfo& paintInfo, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect)
</span><span class="cx"> {
</span><del>- // FIXME: enable the ASSERT once m_grid is persistent.
- // ASSERT(!m_grid.needsItemsPlacement());
</del><ins>+ ASSERT(!m_grid.needsItemsPlacement());
</ins><span class="cx"> for (RenderBox* child = m_grid.orderIterator().first(); child; child = m_grid.orderIterator().next())
</span><span class="cx"> paintChild(*child, paintInfo, paintOffset, forChild, usePrintRect, PaintAsInlineBlock);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (210668 => 210669)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2017-01-12 18:34:20 UTC (rev 210668)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2017-01-12 18:41:28 UTC (rev 210669)
</span><span class="lines">@@ -65,6 +65,7 @@
</span><span class="cx"> bool avoidsFloats() const override { return true; }
</span><span class="cx"> bool canDropAnonymousBlockChild() const override { return false; }
</span><span class="cx">
</span><ins>+ void dirtyGrid();
</ins><span class="cx"> Vector<LayoutUnit> trackSizesForComputedStyle(GridTrackSizingDirection) const;
</span><span class="cx">
</span><span class="cx"> const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
</span><span class="lines">@@ -77,6 +78,12 @@
</span><span class="cx"> bool isRenderGrid() const override { return true; }
</span><span class="cx"> void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
</span><span class="cx">
</span><ins>+ void addChild(RenderObject* newChild, RenderObject* beforeChild) final;
+ void removeChild(RenderObject&) final;
+
+ bool explicitGridDidResize(const RenderStyle&) const;
+ bool namedGridLinesDefinitionDidChange(const RenderStyle&) const;
+
</ins><span class="cx"> std::optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, std::optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const override;
</span><span class="cx">
</span><span class="cx"> class Grid;
</span><span class="lines">@@ -117,7 +124,6 @@
</span><span class="cx">
</span><span class="cx"> void layoutGridItems(GridSizingData&);
</span><span class="cx"> void populateGridPositionsForDirection(GridSizingData&, GridTrackSizingDirection);
</span><del>- void clearGrid();
</del><span class="cx">
</span><span class="cx"> static bool shouldProcessTrackForTrackSizeComputationPhase(TrackSizeComputationPhase, const GridTrackSize&);
</span><span class="cx"> static bool trackShouldGrowBeyondGrowthLimitsForTrackSizeComputationPhase(TrackSizeComputationPhase, const GridTrackSize&);
</span><span class="lines">@@ -241,8 +247,6 @@
</span><span class="cx"> private:
</span><span class="cx"> friend class GridIterator;
</span><span class="cx">
</span><del>- void clear();
-
</del><span class="cx"> OrderIterator m_orderIterator;
</span><span class="cx">
</span><span class="cx"> int m_smallestColumnStart { 0 };
</span></span></pre>
</div>
</div>
</body>
</html>