<!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>[189910] 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/189910">189910</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2015-09-17 02:13:35 -0700 (Thu, 17 Sep 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Grid Layout] Relayout whenever Box Alignment properties change
https://bugs.webkit.org/show_bug.cgi?id=148070
Reviewed by Darin Adler.
Source/WebCore:
We were Reattaching the styles to the RenderTree whenever Content Alignment
properties (align-items and justify-items) changed their values, since the
Self Alignment properties depend on such values to resolve 'auto' values
during layout.
This patch removes such restriction, since we resolve the auto values
whenever we access the alignment properties. The only thing we need to
do is to mark a grid item for layout whenever the Default Alignment
properties change from/to stretch, since it implies a resize of the grid
items using 'auto' values for the Self Alignment properties.
Tests: fast/css-grid-layout/relayout-align-items-changed.html
fast/css-grid-layout/relayout-align-self-changed.html
fast/css-grid-layout/relayout-justify-items-changed.html
fast/css-grid-layout/relayout-justify-self-changed.html
fast/repaint/align-items-change.html
fast/repaint/align-items-overflow-change.html
fast/repaint/align-self-change.html
fast/repaint/align-self-overflow-change.html
fast/repaint/justify-items-change.html
fast/repaint/justify-items-legacy-change.html
fast/repaint/justify-items-overflow-change.html
fast/repaint/justify-self-change.html
fast/repaint/justify-self-overflow-change.html
* rendering/RenderGrid.cpp:
(WebCore::defaultAlignmentIsStretch):
(WebCore::RenderGrid::styleDidChange):
* rendering/RenderGrid.h:
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::resolveAlignmentOverflow):
(WebCore::RenderStyle::changeRequiresLayout):
* style/StyleResolveTree.cpp:
(WebCore::Style::determineChange): Deleted.
LayoutTests:
Tests to verify we force a layout of grid container or grid items, as appropriated,
whenever Box Alignment properties change their value.
This patch also adds some repaint tests, so we can ensure we generate the correct
repaint rects as well.
* fast/css-grid-layout/relayout-align-items-changed-expected.txt: Added.
* fast/css-grid-layout/relayout-align-items-changed.html: Added.
* fast/css-grid-layout/relayout-align-self-changed-expected.txt: Added.
* fast/css-grid-layout/relayout-align-self-changed.html: Added.
* fast/css-grid-layout/relayout-justify-items-changed-expected.txt: Added.
* fast/css-grid-layout/relayout-justify-items-changed.html: Added.
* fast/css-grid-layout/relayout-justify-self-changed-expected.txt: Added.
* fast/css-grid-layout/relayout-justify-self-changed.html: Added.
* fast/repaint/align-items-change-expected.txt: Added.
* fast/repaint/align-items-change.html: Added.
* fast/repaint/align-items-overflow-change-expected.txt: Added.
* fast/repaint/align-items-overflow-change.html: Added.
* fast/repaint/align-self-change-expected.txt: Added.
* fast/repaint/align-self-change.html: Added.
* fast/repaint/align-self-overflow-change-expected.txt: Added.
* fast/repaint/align-self-overflow-change.html: Added.
* fast/repaint/justify-items-change-expected.txt: Added.
* fast/repaint/justify-items-change.html: Added.
* fast/repaint/justify-items-legacy-change-expected.txt: Added.
* fast/repaint/justify-items-legacy-change.html: Added.
* fast/repaint/justify-items-overflow-change-expected.txt: Added.
* fast/repaint/justify-items-overflow-change.html: Added.
* fast/repaint/justify-self-change-expected.txt: Added.
* fast/repaint/justify-self-change.html: Added.
* fast/repaint/justify-self-overflow-change-expected.txt: Added.
* fast/repaint/justify-self-overflow-change.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>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStylecpp">trunk/Source/WebCore/rendering/style/RenderStyle.cpp</a></li>
<li><a href="#trunkSourceWebCorestyleStyleResolveTreecpp">trunk/Source/WebCore/style/StyleResolveTree.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutalignitemschangedexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutalignitemschangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutalignselfchangedexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutalignselfchangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutjustifyitemschangedexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutjustifyitemschangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutjustifyselfchangedexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutrelayoutjustifyselfchangedhtml">trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignitemschangeexpectedtxt">trunk/LayoutTests/fast/repaint/align-items-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignitemschangehtml">trunk/LayoutTests/fast/repaint/align-items-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignitemsoverflowchangeexpectedtxt">trunk/LayoutTests/fast/repaint/align-items-overflow-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignitemsoverflowchangehtml">trunk/LayoutTests/fast/repaint/align-items-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignselfchangeexpectedtxt">trunk/LayoutTests/fast/repaint/align-self-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignselfchangehtml">trunk/LayoutTests/fast/repaint/align-self-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignselfoverflowchangeexpectedtxt">trunk/LayoutTests/fast/repaint/align-self-overflow-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintalignselfoverflowchangehtml">trunk/LayoutTests/fast/repaint/align-self-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemschangeexpectedtxt">trunk/LayoutTests/fast/repaint/justify-items-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemschangehtml">trunk/LayoutTests/fast/repaint/justify-items-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemslegacychangeexpectedtxt">trunk/LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemslegacychangehtml">trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemsoverflowchangeexpectedtxt">trunk/LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyitemsoverflowchangehtml">trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyselfchangeexpectedtxt">trunk/LayoutTests/fast/repaint/justify-self-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyselfchangehtml">trunk/LayoutTests/fast/repaint/justify-self-change.html</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyselfoverflowchangeexpectedtxt">trunk/LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastrepaintjustifyselfoverflowchangehtml">trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (189909 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-09-17 07:28:52 UTC (rev 189909)
+++ trunk/LayoutTests/ChangeLog 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2015-09-17 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Relayout whenever Box Alignment properties change
+ https://bugs.webkit.org/show_bug.cgi?id=148070
+
+ Reviewed by Darin Adler.
+
+ Tests to verify we force a layout of grid container or grid items, as appropriated,
+ whenever Box Alignment properties change their value.
+
+ This patch also adds some repaint tests, so we can ensure we generate the correct
+ repaint rects as well.
+
+ * fast/css-grid-layout/relayout-align-items-changed-expected.txt: Added.
+ * fast/css-grid-layout/relayout-align-items-changed.html: Added.
+ * fast/css-grid-layout/relayout-align-self-changed-expected.txt: Added.
+ * fast/css-grid-layout/relayout-align-self-changed.html: Added.
+ * fast/css-grid-layout/relayout-justify-items-changed-expected.txt: Added.
+ * fast/css-grid-layout/relayout-justify-items-changed.html: Added.
+ * fast/css-grid-layout/relayout-justify-self-changed-expected.txt: Added.
+ * fast/css-grid-layout/relayout-justify-self-changed.html: Added.
+ * fast/repaint/align-items-change-expected.txt: Added.
+ * fast/repaint/align-items-change.html: Added.
+ * fast/repaint/align-items-overflow-change-expected.txt: Added.
+ * fast/repaint/align-items-overflow-change.html: Added.
+ * fast/repaint/align-self-change-expected.txt: Added.
+ * fast/repaint/align-self-change.html: Added.
+ * fast/repaint/align-self-overflow-change-expected.txt: Added.
+ * fast/repaint/align-self-overflow-change.html: Added.
+ * fast/repaint/justify-items-change-expected.txt: Added.
+ * fast/repaint/justify-items-change.html: Added.
+ * fast/repaint/justify-items-legacy-change-expected.txt: Added.
+ * fast/repaint/justify-items-legacy-change.html: Added.
+ * fast/repaint/justify-items-overflow-change-expected.txt: Added.
+ * fast/repaint/justify-items-overflow-change.html: Added.
+ * fast/repaint/justify-self-change-expected.txt: Added.
+ * fast/repaint/justify-self-change.html: Added.
+ * fast/repaint/justify-self-overflow-change-expected.txt: Added.
+ * fast/repaint/justify-self-overflow-change.html: Added.
+
</ins><span class="cx"> 2015-09-16 Carlos Garcia Campos <cgarcia@igalia.com>
</span><span class="cx">
</span><span class="cx"> printing does not use minimum page zoom factor
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutalignitemschangedexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+Tests how a align-items style change requires a relayout of the grid and previously stretched items.
+
+The grid bellow had initially 'align-items: end' and was changed to 'stretch'.
+
+PASS
+The grid bellow was initially stretched and it has now 'align-items: center'.
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutalignitemschangedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,36 @@
</span><ins>+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid: 100px 100px / 150px;
+ position: relative;
+}
+#fromStretch { align-items: stretch; }
+#toStretch { align-items: end; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<p>Tests how a align-items style change requires a relayout of the grid and previously stretched items.</p>
+<p>The grid bellow had initially 'align-items: end' and was changed to 'stretch'.</p>
+<div id="toStretch" class="grid">
+ <div style="width: 50px;" class="firstRowFirstColumn" data-expected-height="150" data-offset-y="0">
+ <div style="height: 50px"></div>
+ </div>
+ <div style="width: 50px;" class="firstRowSecondColumn" data-expected-height="150" data-offset-y="0">
+ <div style="height: 100px"></div>
+ </div>
+</div>
+<p>The grid bellow was initially stretched and it has now 'align-items: center'.</p>
+<div id="fromStretch" class="grid">
+ <div style="width: 50px;" class="firstRowFirstColumn" data-expected-height="50" data-offset-y="50">
+ <div style="height: 50px"></div>
+ </div>
+ <div style="width: 50px;" class="firstRowSecondColumn" data-expected-height="100" data-offset-y="25">
+ <div style="height: 100px"></div>
+ </div>
+</div>
+<script>
+document.body.offsetLeft;
+document.getElementById("toStretch").style.alignItems = "stretch";
+document.getElementById("fromStretch").style.alignItems = "center";
+checkLayout(".grid");
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutalignselfchangedexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+Tests how a align-self style change requires a relayout of the grid and previously stretched items.
+
+The grid bellow had initially 'align-self: end' and was changed to 'stretch'.
+
+PASS
+The grid bellow was initially stretched and it has now 'align-self: center'.
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutalignselfchangedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid: 100px 100px / 150px;
+ width: 200px;
+ position: relative;
+}
+.toStretch { align-self: end; }
+.fromStretch { align-self: stretch; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<p>Tests how a align-self style change requires a relayout of the grid and previously stretched items.</p>
+<p>The grid bellow had initially 'align-self: end' and was changed to 'stretch'.</p>
+<div class="grid">
+ <div style="width: 50px;" class="toStretch firstRowFirstColumn" data-expected-height="150" data-offset-y="0">
+ <div style="height: 50px"></div>
+ </div>
+ <div style="width: 50px;" class="toStretch firstRowSecondColumn" data-expected-height="150" data-offset-y="0">
+ <div style="height: 100px"></div>
+ </div>
+</div>
+<p>The grid bellow was initially stretched and it has now 'align-self: center'.</p>
+<div class="grid">
+ <div style="width: 50px;" class="fromStretch firstRowFirstColumn" data-expected-height="50" data-offset-y="50">
+ <div style="height: 50px"></div>
+ </div>
+ <div style="width: 50px;" class="fromStretch firstRowSecondColumn" data-expected-height="100" data-offset-y="25">
+ <div style="height: 100px"></div>
+ </div>
+</div>
+<script>
+document.body.offsetLeft;
+document.getElementsByClassName('toStretch')[0].style.alignSelf = 'stretch';
+document.getElementsByClassName('toStretch')[1].style.alignSelf = 'stretch';
+document.getElementsByClassName('fromStretch')[0].style.alignSelf = 'center';
+document.getElementsByClassName('fromStretch')[1].style.alignSelf = 'center';
+checkLayout(".grid");
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutjustifyitemschangedexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+Tests how a justify-items style change requires a relayout of the grid and previously stretched items.
+
+The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.
+
+PASS
+The grid bellow was initially stretched and it has now 'justify-items: center'.
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutjustifyitemschangedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid: 150px / 100px 100px;
+ width: 150px;
+ position: relative;
+}
+#fromStretch { justify-items: stretch; }
+#toStretch { justify-items: end; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<p>Tests how a justify-items style change requires a relayout of the grid and previously stretched items.</p>
+<p>The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.</p>
+<div id="toStretch" class="grid">
+ <div style="height: 50px;" class="firstRowFirstColumn" data-expected-width="150" data-offset-x="0">
+ <div style="width: 50px;"></div>
+ </div>
+ <div style="height: 50px;" class="secondRowFirstColumn" data-expected-width="150" data-offset-x="0">
+ <div style="width: 100px;"></div>
+ </div>
+</div>
+<p>The grid bellow was initially stretched and it has now 'justify-items: center'.</p>
+<div id="fromStretch" class="grid">
+ <div style="height: 50px;" class="firstRowFirstColumn" data-expected-width="50" data-offset-x="50">
+ <div style="width: 50px;"></div>
+ </div>
+ <div style="height: 50px;" class="secondRowFirstColumn" data-expected-width="100" data-offset-x="25">
+ <div style="width: 100px;"></div>
+ </div>
+</div>
+<script>
+document.body.offsetLeft;
+document.getElementById("toStretch").style.justifyItems = "stretch";
+document.getElementById("fromStretch").style.justifyItems = "center";
+checkLayout(".grid");
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutjustifyselfchangedexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+Tests how a justify-self style change requires a relayout of the grid and previously stretched items.
+
+The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.
+
+PASS
+The grid bellow was initially stretched and it has now 'justify-self: center'.
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutrelayoutjustifyselfchangedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+<!DOCTYPE HTML>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid: 150px / 100px 100px;
+ width: 150px;
+ position: relative;
+}
+.fromStretch { justify-self: stretch; }
+.toStretch { justify-self: end; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<p>Tests how a justify-self style change requires a relayout of the grid and previously stretched items.</p>
+<p>The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.</p>
+<div class="grid">
+ <div style="height: 50px;" class="toStretch firstRowFirstColumn" data-expected-width="150" data-offset-x="0">
+ <div style="width: 50px;"></div>
+ </div>
+ <div style="height: 50px;" class="toStretch secondRowFirstColumn" data-expected-width="150" data-offset-x="0">
+ <div style="width: 100px;"></div>
+ </div>
+</div>
+<p>The grid bellow was initially stretched and it has now 'justify-self: center'.</p>
+<div class="grid">
+ <div style="height: 50px;" class="fromStretch firstRowFirstColumn" data-expected-width="50" data-offset-x="50">
+ <div style="width: 50px;"></div>
+ </div>
+ <div style="height: 50px;" class="fromStretch secondRowFirstColumn" data-expected-width="100" data-offset-x="25">
+ <div style="width: 100px;"></div>
+ </div>
+</div>
+<script>
+document.body.offsetLeft;
+document.getElementsByClassName('toStretch')[0].style.justifySelf = 'stretch';
+document.getElementsByClassName('toStretch')[1].style.justifySelf = 'stretch';
+document.getElementsByClassName('fromStretch')[0].style.justifySelf = 'center';
+document.getElementsByClassName('fromStretch')[1].style.justifySelf = 'center';
+checkLayout(".grid");
+</script>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignitemschangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-items-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-items-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-items-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Tests invalidation on align-items style change. Passes if there is no red.
+
+(repaint rects
+ (rect 0 52 100 300)
+ (rect 0 51 100 1)
+ (rect 100 52 100 300)
+ (rect 100 51 100 1)
+ (rect 0 52 200 300)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignitemschangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-items-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-items-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-items-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementById('container').style.alignItems = 'stretch';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: flex;
+ align-items: flex-start;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item {
+ background-color: green;
+ border: solid thin blue;
+ width: 100px;
+}
+</style>
+<p style="height: 20px">Tests invalidation on align-items style change. Passes if there is no red.</p>
+<div id="container">
+ <div class="item">
+ <div style="height: 100px"></div>
+ </div>
+ <div class="item">
+ <div style="height: 150px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignitemsoverflowchangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-items-overflow-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-items-overflow-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-items-overflow-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+Tests invalidation on align-items style change (just overflow). Passes if there is no red.
+
+(repaint rects
+ (rect 0 2 200 350)
+ (rect 0 52 200 300)
+ (rect 0 2 800 14)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignitemsoverflowchangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-items-overflow-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-items-overflow-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementById('container').style.alignItems = 'end safe';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 200px / 150px 150px;
+ align-items: end true;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ background-color: green;
+}
+.item2 {
+ -webkit-grid-row: 2;
+ -webkit-grid-column: 1;
+ background-color: green;
+}
+</style>
+<p style="height: 20px">Tests invalidation on align-items style change (just overflow). Passes if there is no red.</p>
+<div id="container">
+ <div class="item1">
+ <div style="height: 200px"></div>
+ </div>
+ <div class="item2">
+ <div style="height: 100px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignselfchangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-self-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-self-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-self-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+Tests invalidation on align-self style change. Passes if there is no red.
+
+(repaint rects
+ (rect 0 302 100 300)
+ (rect 0 302 100 50)
+ (rect 0 52 100 300)
+ (rect 100 52 100 300)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignselfchangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-self-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-self-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-self-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementsByClassName('item1')[0].style.alignSelf = 'stretch';
+ document.getElementsByClassName('item2')[0].style.alignSelf = 'stretch';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 100px 100px / 300px;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ align-self: end;
+ background-color: green;
+}
+.item2 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 2;
+ align-self: start;
+ background-color: green;
+}
+</style>
+<p style="height: 20px">Tests invalidation on align-self style change. Passes if there is no red.</p>
+<div id="container">
+ <div class="item1">
+ <div style="height: 50px"></div>
+ </div>
+ <div class="item2">
+ <div style="height: 50px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignselfoverflowchangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-self-overflow-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-self-overflow-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-self-overflow-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+Tests invalidation on align-self style change (just overflow). Passes if there is no red.
+
+(repaint rects
+ (rect 0 2 200 200)
+ (rect 0 2 200 200)
+ (rect 0 52 200 200)
+ (rect 0 252 200 100)
+ (rect 0 2 200 50)
+ (rect 0 2 800 14)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintalignselfoverflowchangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/align-self-overflow-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/align-self-overflow-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementsByClassName('item1')[0].style.alignSelf = 'end safe';
+ document.getElementsByClassName('item2')[0].style.alignSelf = 'end safe';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 200px / 150px 150px;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ align-self: end true;
+ background-color: green;
+}
+.item2 {
+ -webkit-grid-row: 2;
+ -webkit-grid-column: 1;
+ align-self: end true;
+ background-color: green;
+</style>
+<p style="height: 20px">Tests invalidation on align-self style change (just overflow). Passes if there is no red.</p>
+<div id="container">
+ <div class="item1">
+ <div style="height: 200px"></div>
+ </div>
+ <div class="item2">
+ <div style="height: 100px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemschangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-items-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-items-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+Tests invalidation on justify-items style change. Passes if there is no red.
+
+(repaint rects
+ (rect 200 52 150 300)
+ (rect 0 52 200 300)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemschangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-items-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-items-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementById('container').style.justifyItems = 'stretch';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 200px / 300px;
+ justify-items: end;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ background-color: green;
+}
+</style>
+<p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
+<div id="container">
+ <div class="item">
+ <div style="width: 50px; height: 50px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemslegacychangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-items-legacy-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.
+
+(repaint rects
+ (rect 0 52 300 400)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemslegacychangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-items-legacy-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementById('parentContainer').style.justifyItems = 'legacy center';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#parentContainer {
+ justify-items: center;
+ background-color: orange;
+ width: 300px;
+ height: 400px;
+}
+
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 100px 100px / 150px 150px;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ background-color: green;
+ border: solid thin blue;
+ width: 50px;
+}
+.item2 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 2;
+ background-color: green;
+ border: solid thin blue;
+ width: 50px;
+</style>
+<p style="height: 20px">Tests invalidation on justify-items style change (legacy value). Passes if green bars are centerd inside their red container.</p>
+<div id="parentContainer">
+ <div id="container">
+ <div class="item1">
+ <div style="height: 50px"></div>
+ </div>
+ <div class="item2">
+ <div style="height: 50px"></div>
+ </div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemsoverflowchangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-items-overflow-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+Tests invalidation on justify-items style change. Passes if there is no red.
+
+(repaint rects
+ (rect -60 52 260 300)
+ (rect 0 52 200 300)
+ (rect -60 16 60 336)
+ (rect -60 0 60 352)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyitemsoverflowchangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementById('container').style.justifyItems = 'end safe';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 100px 100px / 300px;
+ justify-items: end true;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ background-color: green;
+ width: 160px;
+}
+.item2 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 2;
+ background-color: green;
+ width: 50px;
+</style>
+<p style="height: 20px">Tests invalidation on justify-items style change. Passes if there is no red.</p>
+<div id="container">
+ <div class="item1">
+ <div style="height: 50px"></div>
+ </div>
+ <div class="item2">
+ <div style="height: 50px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyselfchangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-self-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-self-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-self-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,13 @@
</span><ins>+Tests invalidation on justify-self style change. Passes if there is no red.
+
+(repaint rects
+ (rect 24 52 52 300)
+ (rect 24 52 100 300)
+ (rect 24 52 52 300)
+ (rect 0 52 100 300)
+ (rect 124 52 52 300)
+ (rect 124 52 100 300)
+ (rect 124 52 52 300)
+ (rect 100 52 100 300)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyselfchangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-self-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-self-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-self-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementsByClassName('item1')[0].style.justifySelf = 'stretch';
+ document.getElementsByClassName('item2')[0].style.justifySelf = 'stretch';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 100px 100px / 300px;
+ justify-items: center;
+ width: 200px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ background-color: green;
+ border: solid thin blue;
+}
+.item2 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 2;
+ background-color: green;
+ border: solid thin blue;
+</style>
+<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
+<div id="container">
+ <div class="item1">
+ <div style="width: 50px; height: 150px"></div>
+ </div>
+ <div class="item2">
+ <div style="width: 50px; height: 100px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyselfoverflowchangeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-self-overflow-change-expected.txt 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Tests invalidation on justify-self style change. Passes if there is no red.
+
+(repaint rects
+ (rect -50 52 150 300)
+ (rect -50 52 150 300)
+ (rect 0 52 150 300)
+ (rect 150 52 50 300)
+ (rect -50 52 50 300)
+ (rect -50 16 50 336)
+ (rect -50 0 50 352)
+)
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastrepaintjustifyselfoverflowchangehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html (0 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html (rev 0)
+++ trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -0,0 +1,43 @@
</span><ins>+<!DOCTYPE HTML>
+<script src="resources/text-based-repaint.js"></script>
+<script>
+function repaintTest() {
+ document.getElementsByClassName('item1')[0].style.justifySelf = 'end safe';
+ document.getElementsByClassName('item2')[0].style.justifySelf = 'end safe';
+}
+onload = runRepaintTest;
+</script>
+<style>
+body {
+ margin: 0;
+}
+#container {
+ display: -webkit-grid;
+ -webkit-grid: 100px 100px / 300px;
+ width: 200px;
+ height: 300px;
+ background-color: red;
+}
+.item1 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 1;
+ justify-self: end true;
+ background-color: green;
+ width: 150px;
+}
+.item2 {
+ -webkit-grid-row: 1;
+ -webkit-grid-column: 2;
+ background-color: green;
+ justify-self: end true;
+ width: 50px;
+</style>
+<p style="height: 20px">Tests invalidation on justify-self style change. Passes if there is no red.</p>
+<div id="container">
+ <div class="item1">
+ <div style="height: 150px"></div>
+ </div>
+ <div class="item2">
+ <div style="height: 100px"></div>
+ </div>
+</div>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (189909 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-09-17 07:28:52 UTC (rev 189909)
+++ trunk/Source/WebCore/ChangeLog 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -1,3 +1,45 @@
</span><ins>+2015-09-17 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Relayout whenever Box Alignment properties change
+ https://bugs.webkit.org/show_bug.cgi?id=148070
+
+ Reviewed by Darin Adler.
+
+ We were Reattaching the styles to the RenderTree whenever Content Alignment
+ properties (align-items and justify-items) changed their values, since the
+ Self Alignment properties depend on such values to resolve 'auto' values
+ during layout.
+
+ This patch removes such restriction, since we resolve the auto values
+ whenever we access the alignment properties. The only thing we need to
+ do is to mark a grid item for layout whenever the Default Alignment
+ properties change from/to stretch, since it implies a resize of the grid
+ items using 'auto' values for the Self Alignment properties.
+
+ Tests: fast/css-grid-layout/relayout-align-items-changed.html
+ fast/css-grid-layout/relayout-align-self-changed.html
+ fast/css-grid-layout/relayout-justify-items-changed.html
+ fast/css-grid-layout/relayout-justify-self-changed.html
+ fast/repaint/align-items-change.html
+ fast/repaint/align-items-overflow-change.html
+ fast/repaint/align-self-change.html
+ fast/repaint/align-self-overflow-change.html
+ fast/repaint/justify-items-change.html
+ fast/repaint/justify-items-legacy-change.html
+ fast/repaint/justify-items-overflow-change.html
+ fast/repaint/justify-self-change.html
+ fast/repaint/justify-self-overflow-change.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::defaultAlignmentIsStretch):
+ (WebCore::RenderGrid::styleDidChange):
+ * rendering/RenderGrid.h:
+ * rendering/style/RenderStyle.cpp:
+ (WebCore::RenderStyle::resolveAlignmentOverflow):
+ (WebCore::RenderStyle::changeRequiresLayout):
+ * style/StyleResolveTree.cpp:
+ (WebCore::Style::determineChange): Deleted.
+
</ins><span class="cx"> 2015-09-16 Carlos Garcia Campos <cgarcia@igalia.com>
</span><span class="cx">
</span><span class="cx"> printing does not use minimum page zoom factor
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (189909 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-09-17 07:28:52 UTC (rev 189909)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -242,6 +242,53 @@
</span><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static inline bool defaultAlignmentIsStretch(ItemPosition position)
+{
+ return position == ItemPositionStretch || position == ItemPositionAuto;
+}
+
+static inline bool defaultAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
+{
+ return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
+}
+
+static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
+{
+ return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
+}
+
+static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
+{
+ return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) != ItemPositionStretch
+ && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) == ItemPositionStretch;
+}
+
+static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
+{
+ return RenderStyle::resolveAlignment(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
+ && RenderStyle::resolveAlignment(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
+}
+
+void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
+{
+ RenderBlock::styleDidChange(diff, oldStyle);
+ if (!oldStyle || diff != StyleDifferenceLayout)
+ return;
+
+ const RenderStyle& newStyle = style();
+ if (defaultAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle) || defaultAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle)) {
+ // Grid items that were not previously stretched in row-axis need to be relayed out so we can compute new available space.
+ // Grid items that were previously stretching in column-axis need to be relayed out so we can compute new available space.
+ // This is only necessary for stretching since other alignment values don't change the size of the box.
+ for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+ if (child->isOutOfFlowPositioned())
+ continue;
+ if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child->style()) || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child->style()))
+ child->setChildNeedsLayout(MarkOnlyThis);
+ }
+ }
+}
+
</ins><span class="cx"> void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(needsLayout());
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (189909 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-09-17 07:28:52 UTC (rev 189909)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -49,6 +49,7 @@
</span><span class="cx">
</span><span class="cx"> Element& element() const { return downcast<Element>(nodeForNonAnonymous()); }
</span><span class="cx">
</span><ins>+ virtual void styleDidChange(StyleDifference, const RenderStyle* oldStyle) override;
</ins><span class="cx"> virtual void layoutBlock(bool relayoutChildren, LayoutUnit pageLogicalHeight = 0) override;
</span><span class="cx">
</span><span class="cx"> virtual bool avoidsFloats() const override { return true; }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStylecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (189909 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2015-09-17 07:28:52 UTC (rev 189909)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -196,7 +196,7 @@
</span><span class="cx">
</span><span class="cx"> OverflowAlignment RenderStyle::resolveAlignmentOverflow(const RenderStyle& parentStyle, const RenderStyle& childStyle)
</span><span class="cx"> {
</span><del>- return resolveJustificationData(parentStyle, childStyle, ItemPositionStretch).overflow();
</del><ins>+ return resolveAlignmentData(parentStyle, childStyle, ItemPositionStretch).overflow();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> ItemPosition RenderStyle::resolveJustification(const RenderStyle& parentStyle, const RenderStyle& childStyle, ItemPosition resolvedAutoPositionForRenderer)
</span><span class="lines">@@ -524,7 +524,9 @@
</span><span class="cx"> || rareNonInheritedData->m_alignContent != other.rareNonInheritedData->m_alignContent
</span><span class="cx"> || rareNonInheritedData->m_alignItems != other.rareNonInheritedData->m_alignItems
</span><span class="cx"> || rareNonInheritedData->m_alignSelf != other.rareNonInheritedData->m_alignSelf
</span><del>- || rareNonInheritedData->m_justifyContent != other.rareNonInheritedData->m_justifyContent)
</del><ins>+ || rareNonInheritedData->m_justifyContent != other.rareNonInheritedData->m_justifyContent
+ || rareNonInheritedData->m_justifyItems != other.rareNonInheritedData->m_justifyItems
+ || rareNonInheritedData->m_justifySelf != other.rareNonInheritedData->m_justifySelf)
</ins><span class="cx"> return true;
</span><span class="cx">
</span><span class="cx"> if (!rareNonInheritedData->reflectionDataEquivalent(*other.rareNonInheritedData.get()))
</span></span></pre></div>
<a id="trunkSourceWebCorestyleStyleResolveTreecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/style/StyleResolveTree.cpp (189909 => 189910)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/style/StyleResolveTree.cpp 2015-09-17 07:28:52 UTC (rev 189909)
+++ trunk/Source/WebCore/style/StyleResolveTree.cpp 2015-09-17 09:13:35 UTC (rev 189910)
</span><span class="lines">@@ -97,8 +97,6 @@
</span><span class="cx"> // a separate render region object.
</span><span class="cx"> if (s1.hasFlowFrom() && (s1.specifiesColumns() != s2.specifiesColumns()))
</span><span class="cx"> return Detach;
</span><del>- if (s1.alignItems() != s2.alignItems())
- return Detach;
</del><span class="cx">
</span><span class="cx"> if (s1 != s2) {
</span><span class="cx"> if (s1.inheritedNotEqual(&s2))
</span></span></pre>
</div>
</div>
</body>
</html>