<!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>[200181] 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/200181">200181</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2016-04-28 01:54:33 -0700 (Thu, 28 Apr 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Fix alignment with content distribution
https://bugs.webkit.org/show_bug.cgi?id=156623
Reviewed by Sergio Villar Senin.
Source/WebCore:
We were only subtracting the distribution offset for items spanning
several tracks, but not for items in a single cell.
We should actually subtract the offset in that situation too,
the same that we do for the grid gaps.
Test: fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::columnAxisOffsetForChild): Subtract distribution
offset like we do for gaps.
(WebCore::RenderGrid::rowAxisOffsetForChild): Ditto.
LayoutTests:
Created new test and renamed the old one as it was only testing
items spanning several cells.
* fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt:
* fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt:
Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt.
* fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html:
Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment.html.
* fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentspanningexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentspanninghtml">trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (200180 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-04-28 08:03:24 UTC (rev 200180)
+++ trunk/LayoutTests/ChangeLog 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2016-04-28 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Fix alignment with content distribution
+ https://bugs.webkit.org/show_bug.cgi?id=156623
+
+ Reviewed by Sergio Villar Senin.
+
+ Created new test and renamed the old one as it was only testing
+ items spanning several cells.
+
+ * fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt:
+ * fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt:
+ Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt.
+ * fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html:
+ Renamed from fast/css-grid-layout/grid-content-alignment-and-self-alignment.html.
+ * fast/css-grid-layout/grid-content-alignment-and-self-alignment.html:
+
</ins><span class="cx"> 2016-04-28 Daniel Bates <dabates@apple.com>
</span><span class="cx">
</span><span class="cx"> Skip test LayoutTests/media/video-with-file-url-allowed-by-csp-media-src-star-with-AllowContentSecurityPolicySourceStarToMatchAnyProtocol-enabled.html
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt (200180 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt 2016-04-28 08:03:24 UTC (rev 200180)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -1,50 +1,170 @@
</span><del>-This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.
</del><ins>+This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.
</ins><span class="cx">
</span><span class="cx"> direction: LTR | distribution: 'space-between' | self-alignment: center
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: LTR | distribution: 'space-between' | self-alignment: end
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: LTR | distribution: 'space-around' | self-alignment: center
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: LTR | distribution: 'space-around' | self-alignment: end
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: LTR | distribution: 'space-evenly' | self-alignment: center
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: LTR | distribution: 'space-evenly' | self-alignment: end
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><del>-direction: LTR | distribution: 'stretch' | self-alignment: center
</del><ins>+direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center
</ins><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><del>-direction: LTR | distribution: 'stretch' | self-alignment: end
</del><ins>+direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end
</ins><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><ins>+direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center
+
+X
+X
+X
+X
+PASS
+direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end
+
+X
+X
+X
+X
+PASS
+direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center
+
+X
+X
+X
+X
+PASS
+direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end
+
+X
+X
+X
+X
+PASS
</ins><span class="cx"> direction: RTL | distribution: 'space-between' | self-alignment: center
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: RTL | distribution: 'space-between' | self-alignment: end
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: RTL | distribution: 'space-around' | self-alignment: center
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: RTL | distribution: 'space-around' | self-alignment: end
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: RTL | distribution: 'space-evenly' | self-alignment: center
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><span class="cx"> direction: RTL | distribution: 'space-evenly' | self-alignment: end
</span><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><del>-direction: RTL | distribution: 'stretch' | self-alignment: center
</del><ins>+direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center
</ins><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><del>-direction: RTL | distribution: 'stretch' | self-alignment: end
</del><ins>+direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end
</ins><span class="cx">
</span><ins>+X
+X
+X
+X
</ins><span class="cx"> PASS
</span><ins>+direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center
+
+X
+X
+X
+X
+PASS
+direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end
+
+X
+X
+X
+X
+PASS
+direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center
+
+X
+X
+X
+X
+PASS
+direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end
+
+X
+X
+X
+X
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentspanningexpectedtxtfromrev200180trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentexpectedtxt"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt (from rev 200180, trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt) (0 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning-expected.txt 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.
+
+direction: LTR | distribution: 'space-between' | self-alignment: center
+
+PASS
+direction: LTR | distribution: 'space-between' | self-alignment: end
+
+PASS
+direction: LTR | distribution: 'space-around' | self-alignment: center
+
+PASS
+direction: LTR | distribution: 'space-around' | self-alignment: end
+
+PASS
+direction: LTR | distribution: 'space-evenly' | self-alignment: center
+
+PASS
+direction: LTR | distribution: 'space-evenly' | self-alignment: end
+
+PASS
+direction: LTR | distribution: 'stretch' | self-alignment: center
+
+PASS
+direction: LTR | distribution: 'stretch' | self-alignment: end
+
+PASS
+direction: RTL | distribution: 'space-between' | self-alignment: center
+
+PASS
+direction: RTL | distribution: 'space-between' | self-alignment: end
+
+PASS
+direction: RTL | distribution: 'space-around' | self-alignment: center
+
+PASS
+direction: RTL | distribution: 'space-around' | self-alignment: end
+
+PASS
+direction: RTL | distribution: 'space-evenly' | self-alignment: center
+
+PASS
+direction: RTL | distribution: 'space-evenly' | self-alignment: end
+
+PASS
+direction: RTL | distribution: 'stretch' | self-alignment: center
+
+PASS
+direction: RTL | distribution: 'stretch' | self-alignment: end
+
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmentspanninghtmlfromrev200180trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html (from rev 200180, trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html) (0 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -0,0 +1,215 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+ margin: 0px;
+}
+
+.grid {
+ -webkit-grid-auto-columns: 20px;
+ -webkit-grid-auto-rows: 40px;
+ -webkit-grid-template-areas: "a a b"
+ "c d b";
+ position: relative;
+ width: 300px;
+ height: 200px;
+}
+.a {
+ -webkit-grid-area: a;
+ background-color: blue;
+}
+.b {
+ -webkit-grid-area: b;
+ background-color: lime;
+}
+.c {
+ -webkit-grid-area: c;
+ background-color: purple;
+}
+.d {
+ -webkit-grid-area: d;
+ background-color: orange;
+}
+.stretchedGrid {
+ -webkit-grid-auto-columns: minmax(20px, auto);
+ -webkit-grid-auto-rows: minmax(40px, auto);
+}
+
+
+.cell {
+ width: 20px;
+ height: 40px;
+}
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.</p>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+ <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+ <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
+ <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
+ <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
+ <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
+ <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
+ <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
+ <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+ <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+ <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
+ <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
+ <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
+ <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
+ <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
+ <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
+ <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+ <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+ <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+ <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+ </div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcontentalignmentandselfalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html (200180 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html 2016-04-28 08:03:24 UTC (rev 200180)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -1,215 +1,459 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<html>
-<head>
</del><span class="cx"> <link href="resources/grid.css" rel="stylesheet">
</span><span class="cx"> <link href="resources/grid-alignment.css" rel="stylesheet">
</span><del>-<script src="../../resources/check-layout.js"></script>
</del><span class="cx"> <style>
</span><del>-body {
- margin: 0px;
-}
</del><span class="cx">
</span><span class="cx"> .grid {
</span><del>- -webkit-grid-auto-columns: 20px;
- -webkit-grid-auto-rows: 40px;
- -webkit-grid-template-areas: "a a b"
- "c d b";
</del><ins>+ -webkit-grid-template-columns: 200px 100px;
+ -webkit-grid-template-rows: 100px 50px;
+ width: 500px;
+ height: 350px;
</ins><span class="cx"> position: relative;
</span><del>- width: 300px;
- height: 200px;
</del><ins>+ font: 10px/1 Ahem;
</ins><span class="cx"> }
</span><del>-.a {
- -webkit-grid-area: a;
- background-color: blue;
</del><ins>+
+.gridGaps {
+ -webkit-grid-gap: 10px 20px;
</ins><span class="cx"> }
</span><del>-.b {
- -webkit-grid-area: b;
- background-color: lime;
-}
-.c {
- -webkit-grid-area: c;
- background-color: purple;
-}
-.d {
- -webkit-grid-area: d;
- background-color: orange;
-}
-.stretchedGrid {
- -webkit-grid-auto-columns: minmax(20px, auto);
- -webkit-grid-auto-rows: minmax(40px, auto);
-}
</del><span class="cx">
</span><del>-
-.cell {
- width: 20px;
- height: 40px;
-}
</del><span class="cx"> </style>
</span><del>-</head>
</del><ins>+<script src="../../resources/check-layout.js"></script>
</ins><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="cx">
</span><del>-<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.</p>
</del><ins>+<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.</p>
</ins><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
- <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid contentSpaceBetween itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
- <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid contentSpaceBetween itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
- <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid contentSpaceAround itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
- <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid contentSpaceAround itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
- <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid contentSpaceEvenly itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
- <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid contentSpaceEvenly itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
- <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- </div>
</del><ins>+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceBetween itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
- <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- </div>
</del><ins>+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceBetween itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceAround itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceAround itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceEvenly itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceEvenly itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
</ins><span class="cx"> <!-- RTL direction. -->
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
- <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+
+<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceBetween itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
- <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceBetween itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
- <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceAround itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
- <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceAround itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
- <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceEvenly itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
- <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
- </div>
</del><ins>+<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceEvenly itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
- <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- </div>
</del><ins>+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><del>-<div style="position: relative">
- <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
- <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
- <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
- <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
- <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- </div>
</del><ins>+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
+ <!-- Dummy DIVs to help checking the result visually. -->
+ <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+ <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+ <div class="firstRowFirstColumn"
+ data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="firstRowSecondColumn"
+ data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowFirstColumn"
+ data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+ <div class="secondRowSecondColumn"
+ data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
</ins><span class="cx"> </body>
</span><del>-</html>
</del></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (200180 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-04-28 08:03:24 UTC (rev 200180)
+++ trunk/Source/WebCore/ChangeLog 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2016-04-28 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Fix alignment with content distribution
+ https://bugs.webkit.org/show_bug.cgi?id=156623
+
+ Reviewed by Sergio Villar Senin.
+
+ We were only subtracting the distribution offset for items spanning
+ several tracks, but not for items in a single cell.
+ We should actually subtract the offset in that situation too,
+ the same that we do for the grid gaps.
+
+ Test: fast/css-grid-layout/grid-content-alignment-and-self-alignment-spanning.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::columnAxisOffsetForChild): Subtract distribution
+ offset like we do for gaps.
+ (WebCore::RenderGrid::rowAxisOffsetForChild): Ditto.
+
</ins><span class="cx"> 2016-04-27 Carlos Garcia Campos <cgarcia@igalia.com>
</span><span class="cx">
</span><span class="cx"> [GTK] Overlay scrollbars with steppers enabled render incorrectly
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (200180 => 200181)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-28 08:03:24 UTC (rev 200180)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-28 08:54:33 UTC (rev 200181)
</span><span class="lines">@@ -1936,14 +1936,12 @@
</span><span class="cx"> case GridAxisCenter: {
</span><span class="cx"> unsigned childEndLine = rowsSpan.endLine();
</span><span class="cx"> LayoutUnit endOfRow = m_rowPositions[childEndLine];
</span><del>- // m_rowPositions include gutters so we need to substract them to get the actual end position for a given
- // row (this does not have to be done for the last track as there are no more m_rowPositions after it)
</del><ins>+ // m_rowPositions include distribution offset (because of content alignment) and gutters
+ // so we need to subtract them to get the actual end position for a given row
+ // (this does not have to be done for the last track as there are no more m_rowPositions after it).
</ins><span class="cx"> if (childEndLine < m_rowPositions.size() - 1)
</span><del>- endOfRow -= guttersSize(ForRows, 2);
</del><ins>+ endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
</ins><span class="cx"> LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
</span><del>- // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
- if (childEndLine - childStartLine > 1 && childEndLine < m_rowPositions.size() - 1)
- endOfRow -= m_offsetBetweenRows;
</del><span class="cx"> LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
</span><span class="cx"> return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
</span><span class="cx"> }
</span><span class="lines">@@ -1970,14 +1968,12 @@
</span><span class="cx"> case GridAxisCenter: {
</span><span class="cx"> unsigned childEndLine = columnsSpan.endLine();
</span><span class="cx"> LayoutUnit endOfColumn = m_columnPositions[childEndLine];
</span><del>- // m_columnPositions include gutters so we need to substract them to get the actual end position for a given
- // column (this does not have to be done for the last track as there are no more m_columnPositions after it)
</del><ins>+ // m_columnPositions include distribution offset (because of content alignment) and gutters
+ // so we need to subtract them to get the actual end position for a given column
+ // (this does not have to be done for the last track as there are no more m_columnPositions after it).
</ins><span class="cx"> if (childEndLine < m_columnPositions.size() - 1)
</span><del>- endOfColumn -= guttersSize(ForColumns, 2);
</del><ins>+ endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
</ins><span class="cx"> LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
</span><del>- // In order to properly adjust the Self Alignment values we need to consider the offset between tracks.
- if (childEndLine - childStartLine > 1 && childEndLine < m_columnPositions.size() - 1)
- endOfColumn -= m_offsetBetweenColumns;
</del><span class="cx"> LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
</span><span class="cx"> return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>