<!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>[210211] 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/210211">210211</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2016-12-30 02:53:58 -0800 (Fri, 30 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Isolate instrinsic size computation from layout
https://bugs.webkit.org/show_bug.cgi?id=166530
Reviewed by Darin Adler.
Source/WebCore:
This is the last patch of the items placement data refactoring. By using a different Grid
instance in computeIntrinsicLogicalWidths we effectively isolate the intrinsic size
computation from the layout. They are now using different data structures so they don't
interfere each other.
This also means that we no longer reuse the placement of items done in the intrinsic size
computation. That shouldn't be a big issue once we make m_grid persistent on RenderGrid.
Last but not least, this patch finally removes the ugly const_cast's we had in
computeIntrinsicLogicalWidths() as we no longer modify the internal state of RenderGrid.
Tests: fast/css-grid-layout/grid-auto-repeat-intrinsic.html
fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeIntrinsicLogicalWidths): Use a new instance of Grid.
(WebCore::RenderGrid::computeEmptyTracksForAutoRepeat): Fixed a missing m_grid -> grid
rename.
(WebCore::RenderGrid::placeItemsOnGrid): Constify it. It nows repositions the items if the
number of auto repeat tracks has changed.
* rendering/RenderGrid.h:
LayoutTests:
* fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt: Added.
* fast/css-grid-layout/grid-auto-repeat-intrinsic.html: Added.
* fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt: Added.
* fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.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="#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="#trunkLayoutTestsfastcssgridlayoutgridautorepeatintrinsicexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautorepeatintrinsichtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridchangeintrinsicsizewithautorepeattracksexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridchangeintrinsicsizewithautorepeattrackshtml">trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (210210 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-30 10:09:05 UTC (rev 210210)
+++ trunk/LayoutTests/ChangeLog 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2016-12-28 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Isolate instrinsic size computation from layout
+ https://bugs.webkit.org/show_bug.cgi?id=166530
+
+ Reviewed by Darin Adler.
+
+ * fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-repeat-intrinsic.html: Added.
+ * fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt: Added.
+ * fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html: Added.
+
</ins><span class="cx"> 2016-12-28 Carlos Alberto Lopez Perez <clopez@igalia.com>
</span><span class="cx">
</span><span class="cx"> [Gardening] Remove INDIE_UI related entries from TestExpectation files.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautorepeatintrinsicexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt (0 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+This test checks that auto repeat tracks are properly recomputed and items are properly repositioned when grids have intrinsic inline sizes.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic-expected.txt
</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="trunkLayoutTestsfastcssgridlayoutgridautorepeatintrinsichtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic.html (0 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic.html 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -0,0 +1,105 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+
+<style>
+.grid {
+ border: 2px solid black;
+ position: relative;
+ padding-top: 10px;
+ justify-items: start;
+}
+
+.item {
+ background: cyan;
+ height: 20px;
+}
+
+.gridAutoFillFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(-webkit-min-content, 40px); }
+.gridAutoFillAuto { grid-template-columns: repeat(auto-fill, 10px) minmax(60px, auto); }
+.gridAutoFitFixed { grid-template-columns: repeat(auto-fit, 20px) minmax(-webkit-min-content, 40px); }
+.gridAutoFitAuto { grid-template-columns: repeat(auto-fit, 10px) minmax(60px, auto); }
+
+.paddingTop { padding-top: 10px; }
+
+.abs {
+ height: 5px;
+ position: absolute;
+ width: 100%;
+}
+</style>
+
+<script src="../../resources/check-layout.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that auto repeat tracks are properly recomputed and items are properly repositioned when grids have intrinsic inline sizes.</p>
+
+<div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<!-- auto-fill -->
+
+<div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+<div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
+ <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
+ <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+</div>
+
+</body>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic.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="trunkLayoutTestsfastcssgridlayoutgridchangeintrinsicsizewithautorepeattracksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt (0 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks-expected.txt
</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="trunkLayoutTestsfastcssgridlayoutgridchangeintrinsicsizewithautorepeattrackshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html (0 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -0,0 +1,141 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<style>
+.grid {
+ border: 2px solid black;
+ position: relative;
+ min-width: 30px;
+
+ grid-auto-columns: 20px;
+
+ padding-top: 10px;
+ margin-bottom: 10px;
+}
+
+.abs { height: 5px; position: absolute; width: 100%; }
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<script>
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
+{
+ var gridElement = document.getElementById(id);
+ gridElement.style.gridTemplateRows = gridTemplateRows;
+ gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function setItemSize(id, width, height)
+{
+ var gridElement = document.getElementById(id);
+ gridElement.style.width = width;
+ gridElement.style.height = height;
+}
+
+function testGridDefinitions(gridItemsData)
+{
+ var length = gridItemsData.length;
+ for (i = 0; i < length; ++i) {
+ var item = document.getElementById(gridItemsData[i].id);
+ item.setAttribute("data-expected-width", gridItemsData[i].width);
+ item.setAttribute("data-expected-height", gridItemsData[i].height);
+ item.setAttribute("data-offset-x", gridItemsData[i].x);
+ item.setAttribute("data-offset-y", gridItemsData[i].y);
+ }
+
+ checkLayout(".grid");
+}
+
+function testChangingGridDefinitions()
+{
+ setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(-webkit-min-content, 40px)');
+
+ setItemSize('item', '100px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+ { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
+ ]);
+
+ setItemSize('item', '80px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
+ { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
+ ]);
+
+ setItemSize('item', '15px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' },
+ { 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' }
+ ]);
+
+ setItemSize('item', '120px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+ { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
+ ]);
+
+ var grid = document.getElementById('grid1');
+ grid.className = grid.className.replace('max-content', 'min-content');
+
+ setItemSize('item', '100px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+ { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
+ ]);
+
+ setItemSize('item', '80px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
+ { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
+ ]);
+
+ setItemSize('item', '15px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' },
+ { 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' }
+ ]);
+
+ setItemSize('item', '120px', '30px');
+ testGridDefinitions([
+ { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
+ { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+ { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+ { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+ { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
+ ]);
+}
+
+window.addEventListener("load", testChangingGridDefinitions, false);
+</script>
+
+<div>This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.</div>
+<div id="log"></div>
+
+<div id="grid1" class="grid max-content">
+ <div id="item" style="grid-column: 1 / -1; background: cyan;"></div>
+ <div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></div>
+ <div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></div>
+ <div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></div>
+ <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></div>
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.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 (210210 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-12-30 10:09:05 UTC (rev 210210)
+++ trunk/Source/WebCore/ChangeLog 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2016-12-28 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Isolate instrinsic size computation from layout
+ https://bugs.webkit.org/show_bug.cgi?id=166530
+
+ Reviewed by Darin Adler.
+
+ This is the last patch of the items placement data refactoring. By using a different Grid
+ instance in computeIntrinsicLogicalWidths we effectively isolate the intrinsic size
+ computation from the layout. They are now using different data structures so they don't
+ interfere each other.
+
+ This also means that we no longer reuse the placement of items done in the intrinsic size
+ computation. That shouldn't be a big issue once we make m_grid persistent on RenderGrid.
+
+ Last but not least, this patch finally removes the ugly const_cast's we had in
+ computeIntrinsicLogicalWidths() as we no longer modify the internal state of RenderGrid.
+
+ Tests: fast/css-grid-layout/grid-auto-repeat-intrinsic.html
+ fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths): Use a new instance of Grid.
+ (WebCore::RenderGrid::computeEmptyTracksForAutoRepeat): Fixed a missing m_grid -> grid
+ rename.
+ (WebCore::RenderGrid::placeItemsOnGrid): Constify it. It nows repositions the items if the
+ number of auto repeat tracks has changed.
+ * rendering/RenderGrid.h:
+
</ins><span class="cx"> 2016-12-30 Michael Catanzaro <mcatanzaro@igalia.com>
</span><span class="cx">
</span><span class="cx"> [GTK] Improve user agent construction
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (210210 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-12-30 10:09:05 UTC (rev 210210)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -735,11 +735,10 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
</span><span class="cx"> {
</span><del>- bool wasPopulated = !m_grid.needsItemsPlacement();
- if (!wasPopulated)
- const_cast<RenderGrid*>(this)->placeItemsOnGrid(const_cast<Grid&>(m_grid), IntrinsicSizeComputation);
</del><ins>+ Grid grid(const_cast<RenderGrid&>(*this));
+ placeItemsOnGrid(grid, IntrinsicSizeComputation);
</ins><span class="cx">
</span><del>- GridSizingData sizingData(numTracks(ForColumns, m_grid), numTracks(ForRows, m_grid), const_cast<Grid&>(m_grid));
</del><ins>+ GridSizingData sizingData(numTracks(ForColumns, grid), numTracks(ForRows, grid), grid);
</ins><span class="cx"> sizingData.setAvailableSpace(std::nullopt);
</span><span class="cx"> sizingData.setFreeSpace(ForColumns, std::nullopt);
</span><span class="cx"> sizingData.sizingOperation = IntrinsicSizeComputation;
</span><span class="lines">@@ -752,9 +751,6 @@
</span><span class="cx"> LayoutUnit scrollbarWidth = intrinsicScrollbarLogicalWidth();
</span><span class="cx"> minLogicalWidth += scrollbarWidth;
</span><span class="cx"> maxLogicalWidth += scrollbarWidth;
</span><del>-
- if (!wasPopulated)
- const_cast<RenderGrid*>(this)->clearGrid();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
</span><span class="lines">@@ -1708,7 +1704,7 @@
</span><span class="cx"> unsigned firstAutoRepeatTrack = insertionPoint + std::abs(grid.smallestTrackStart(direction));
</span><span class="cx"> unsigned lastAutoRepeatTrack = firstAutoRepeatTrack + grid.autoRepeatTracks(direction);
</span><span class="cx">
</span><del>- if (!m_grid.hasGridItems()) {
</del><ins>+ if (!grid.hasGridItems()) {
</ins><span class="cx"> emptyTrackIndexes = std::make_unique<OrderedTrackIndexSet>();
</span><span class="cx"> for (unsigned trackIndex = firstAutoRepeatTrack; trackIndex < lastAutoRepeatTrack; ++trackIndex)
</span><span class="cx"> emptyTrackIndexes->add(trackIndex);
</span><span class="lines">@@ -1725,15 +1721,19 @@
</span><span class="cx"> return emptyTrackIndexes;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderGrid::placeItemsOnGrid(Grid& grid, SizingOperation sizingOperation)
</del><ins>+void RenderGrid::placeItemsOnGrid(Grid& grid, SizingOperation sizingOperation) const
</ins><span class="cx"> {
</span><del>- ASSERT(grid.needsItemsPlacement());
- ASSERT(!grid.hasGridItems());
-
</del><span class="cx"> unsigned autoRepeatColumns = computeAutoRepeatTracksCount(ForColumns, sizingOperation);
</span><span class="cx"> unsigned autoRepeatRows = computeAutoRepeatTracksCount(ForRows, sizingOperation);
</span><del>- grid.setAutoRepeatTracks(autoRepeatRows, autoRepeatColumns);
</del><ins>+ if (autoRepeatColumns != grid.autoRepeatTracks(ForColumns) || autoRepeatRows != grid.autoRepeatTracks(ForRows)) {
+ grid.setNeedsItemsPlacement(true);
+ grid.setAutoRepeatTracks(autoRepeatRows, autoRepeatColumns);
+ }
</ins><span class="cx">
</span><ins>+ if (!grid.needsItemsPlacement())
+ return;
+
+ ASSERT(!grid.hasGridItems());
</ins><span class="cx"> populateExplicitGridAndOrderIterator(grid);
</span><span class="cx">
</span><span class="cx"> Vector<RenderBox*> autoMajorAxisAutoGridItems;
</span><span class="lines">@@ -2793,7 +2793,7 @@
</span><span class="cx"> // to get it from the style. Note that we know for sure that there are't any implicit tracks,
</span><span class="cx"> // because not having rows implies that there are no "normal" children (out-of-flow children are
</span><span class="cx"> // not stored in m_grid).
</span><del>- ASSERT(!m_grid.needsItemsPlacement());
</del><ins>+ ASSERT(!grid.needsItemsPlacement());
</ins><span class="cx"> if (direction == ForRows)
</span><span class="cx"> return grid.numTracks(ForRows);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (210210 => 210211)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2016-12-30 10:09:05 UTC (rev 210210)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2016-12-30 10:53:58 UTC (rev 210211)
</span><span class="lines">@@ -94,7 +94,7 @@
</span><span class="cx"> typedef ListHashSet<size_t> OrderedTrackIndexSet;
</span><span class="cx"> std::unique_ptr<OrderedTrackIndexSet> computeEmptyTracksForAutoRepeat(Grid&, GridTrackSizingDirection) const;
</span><span class="cx">
</span><del>- void placeItemsOnGrid(Grid&, SizingOperation);
</del><ins>+ void placeItemsOnGrid(Grid&, SizingOperation) const;
</ins><span class="cx"> void populateExplicitGridAndOrderIterator(Grid&) const;
</span><span class="cx"> std::unique_ptr<GridArea> createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(Grid&, const RenderBox&, GridTrackSizingDirection, const GridSpan&) const;
</span><span class="cx"> void placeSpecifiedMajorAxisItemsOnGrid(Grid&, const Vector<RenderBox*>&) const;
</span></span></pre>
</div>
</div>
</body>
</html>