- Revision
- 200181
- Author
- [email protected]
- Date
- 2016-04-28 01:54:33 -0700 (Thu, 28 Apr 2016)
Log Message
[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:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (200180 => 200181)
--- trunk/LayoutTests/ChangeLog 2016-04-28 08:03:24 UTC (rev 200180)
+++ trunk/LayoutTests/ChangeLog 2016-04-28 08:54:33 UTC (rev 200181)
@@ -1,3 +1,20 @@
+2016-04-28 Manuel Rego Casasnovas <[email protected]>
+
+ [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:
+
2016-04-28 Daniel Bates <[email protected]>
Skip test LayoutTests/media/video-with-file-url-allowed-by-csp-media-src-star-with-AllowContentSecurityPolicySourceStarToMatchAnyProtocol-enabled.html
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt (200180 => 200181)
--- 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)
@@ -1,50 +1,170 @@
-This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.
+This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.
direction: LTR | distribution: 'space-between' | self-alignment: center
+X
+X
+X
+X
PASS
direction: LTR | distribution: 'space-between' | self-alignment: end
+X
+X
+X
+X
PASS
direction: LTR | distribution: 'space-around' | self-alignment: center
+X
+X
+X
+X
PASS
direction: LTR | distribution: 'space-around' | self-alignment: end
+X
+X
+X
+X
PASS
direction: LTR | distribution: 'space-evenly' | self-alignment: center
+X
+X
+X
+X
PASS
direction: LTR | distribution: 'space-evenly' | self-alignment: end
+X
+X
+X
+X
PASS
-direction: LTR | distribution: 'stretch' | self-alignment: center
+direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center
+X
+X
+X
+X
PASS
-direction: LTR | distribution: 'stretch' | self-alignment: end
+direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end
+X
+X
+X
+X
PASS
+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
direction: RTL | distribution: 'space-between' | self-alignment: center
+X
+X
+X
+X
PASS
direction: RTL | distribution: 'space-between' | self-alignment: end
+X
+X
+X
+X
PASS
direction: RTL | distribution: 'space-around' | self-alignment: center
+X
+X
+X
+X
PASS
direction: RTL | distribution: 'space-around' | self-alignment: end
+X
+X
+X
+X
PASS
direction: RTL | distribution: 'space-evenly' | self-alignment: center
+X
+X
+X
+X
PASS
direction: RTL | distribution: 'space-evenly' | self-alignment: end
+X
+X
+X
+X
PASS
-direction: RTL | distribution: 'stretch' | self-alignment: center
+direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center
+X
+X
+X
+X
PASS
-direction: RTL | distribution: 'stretch' | self-alignment: end
+direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end
+X
+X
+X
+X
PASS
+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
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)
--- 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)
@@ -0,0 +1,50 @@
+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
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)
--- 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)
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+<script src=""
+<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html (200180 => 200181)
--- 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)
@@ -1,215 +1,459 @@
<!DOCTYPE html>
-<html>
-<head>
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
-<script src=""
<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";
+ -webkit-grid-template-columns: 200px 100px;
+ -webkit-grid-template-rows: 100px 50px;
+ width: 500px;
+ height: 350px;
position: relative;
- width: 300px;
- height: 200px;
+ font: 10px/1 Ahem;
}
-.a {
- -webkit-grid-area: a;
- background-color: blue;
+
+.gridGaps {
+ -webkit-grid-gap: 10px 20px;
}
-.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>
+<script src=""
<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>
+<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</div>
+<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>
+
<!-- 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>
+
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</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>
+<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>
</div>
+<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>
+
</body>
-</html>
Modified: trunk/Source/WebCore/ChangeLog (200180 => 200181)
--- 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)
@@ -1,3 +1,22 @@
+2016-04-28 Manuel Rego Casasnovas <[email protected]>
+
+ [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.
+
2016-04-27 Carlos Garcia Campos <[email protected]>
[GTK] Overlay scrollbars with steppers enabled render incorrectly
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (200180 => 200181)
--- 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)
@@ -1936,14 +1936,12 @@
case GridAxisCenter: {
unsigned childEndLine = rowsSpan.endLine();
LayoutUnit endOfRow = m_rowPositions[childEndLine];
- // 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)
+ // 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).
if (childEndLine < m_rowPositions.size() - 1)
- endOfRow -= guttersSize(ForRows, 2);
+ endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
- // 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;
LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
}
@@ -1970,14 +1968,12 @@
case GridAxisCenter: {
unsigned childEndLine = columnsSpan.endLine();
LayoutUnit endOfColumn = m_columnPositions[childEndLine];
- // 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)
+ // 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).
if (childEndLine < m_columnPositions.size() - 1)
- endOfColumn -= guttersSize(ForColumns, 2);
+ endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
- // 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;
LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
}
