- Revision
- 199657
- Author
- r...@igalia.com
- Date
- 2016-04-18 01:20:08 -0700 (Mon, 18 Apr 2016)
Log Message
[css-grid] Fix positioned items with content alignment
https://bugs.webkit.org/show_bug.cgi?id=156597
Reviewed by Darin Adler.
Source/WebCore:
Like for the case of gaps we need to take into account
the content alignment in order to properly place and size
the positioned items.
Regarding content alignment we need to care about 2 values:
the position offset and the distribution offset.
The position offset can be extracted from m_column|rowPositions,
but the distribution offset is stored in 2 new variables called
m_offsetBetweenColumns|Rows.
Tests: fast/css-grid-layout/grid-positioned-items-content-alignment.html
fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
(WebCore::RenderGrid::populateGridPositions):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisPositionForChild): Deleted.
* rendering/RenderGrid.h:
LayoutTests:
* fast/css-grid-layout/grid-positioned-items-content-alignment-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-content-alignment-rtl-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html: Added.
* fast/css-grid-layout/grid-positioned-items-content-alignment.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (199656 => 199657)
--- trunk/LayoutTests/ChangeLog 2016-04-18 08:09:56 UTC (rev 199656)
+++ trunk/LayoutTests/ChangeLog 2016-04-18 08:20:08 UTC (rev 199657)
@@ -1,3 +1,15 @@
+2016-04-18 Manuel Rego Casasnovas <r...@igalia.com>
+
+ [css-grid] Fix positioned items with content alignment
+ https://bugs.webkit.org/show_bug.cgi?id=156597
+
+ Reviewed by Darin Adler.
+
+ * fast/css-grid-layout/grid-positioned-items-content-alignment-expected.txt: Added.
+ * fast/css-grid-layout/grid-positioned-items-content-alignment-rtl-expected.txt: Added.
+ * fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html: Added.
+ * fast/css-grid-layout/grid-positioned-items-content-alignment.html: Added.
+
2016-04-18 Yusuke Suzuki <utatane....@gmail.com>
[Fetch] Use @isArray instead of `instanceof @Array`
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-expected.txt (0 => 199657)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-expected.txt 2016-04-18 08:20:08 UTC (rev 199657)
@@ -0,0 +1,62 @@
+This test checks the behavior of the positioned items in a grid using content alignment.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl-expected.txt (0 => 199657)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl-expected.txt 2016-04-18 08:20:08 UTC (rev 199657)
@@ -0,0 +1,62 @@
+This test checks the behavior of the positioned items in a grid using content alignment in RTL.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html (0 => 199657)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html 2016-04-18 08:20:08 UTC (rev 199657)
@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 100px 50px;
+ -webkit-grid-template-rows: 70px 30px;
+ width: 400px;
+ height: 200px;
+ margin: 5px;
+ /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+ position: relative;
+}
+
+.grid > div {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: lime;
+}
+
+.offsets {
+ left: 0;
+ top: 0;
+}
+
+</style>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<p>This test checks the behavior of the positioned items in a grid using content alignment in RTL.</p>
+
+<div class="grid directionRTL contentStart">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="238" data-offset-y="0" data-expected-width="163" data-expected-height="95">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="238" data-offset-y="0" data-expected-width="163" data-expected-height="95">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+</body>
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html (0 => 199657)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-content-alignment.html 2016-04-18 08:20:08 UTC (rev 199657)
@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 100px 50px;
+ -webkit-grid-template-rows: 70px 30px;
+ width: 400px;
+ height: 200px;
+ margin: 5px;
+ /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+ position: relative;
+}
+
+.grid > div {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: lime;
+}
+
+.offsets {
+ left: 0;
+ top: 0;
+}
+
+</style>
+<script src=""
+<body _onload_="checkLayout('.grid')">
+
+<p>This test checks the behavior of the positioned items in a grid using content alignment.</p>
+
+<div class="grid contentStart">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="288" data-offset-y="145" data-expected-width="113" data-expected-height="55">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="288" data-offset-y="145" data-expected-width="113" data-expected-height="55">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentStart">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentCenter">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentEnd">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentSpaceAround">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+ <div class="offsets" style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+ </div>
+</div>
+
+</body>
Modified: trunk/Source/WebCore/ChangeLog (199656 => 199657)
--- trunk/Source/WebCore/ChangeLog 2016-04-18 08:09:56 UTC (rev 199656)
+++ trunk/Source/WebCore/ChangeLog 2016-04-18 08:20:08 UTC (rev 199657)
@@ -1,5 +1,33 @@
2016-04-18 Manuel Rego Casasnovas <r...@igalia.com>
+ [css-grid] Fix positioned items with content alignment
+ https://bugs.webkit.org/show_bug.cgi?id=156597
+
+ Reviewed by Darin Adler.
+
+ Like for the case of gaps we need to take into account
+ the content alignment in order to properly place and size
+ the positioned items.
+
+ Regarding content alignment we need to care about 2 values:
+ the position offset and the distribution offset.
+ The position offset can be extracted from m_column|rowPositions,
+ but the distribution offset is stored in 2 new variables called
+ m_offsetBetweenColumns|Rows.
+
+ Tests: fast/css-grid-layout/grid-positioned-items-content-alignment.html
+ fast/css-grid-layout/grid-positioned-items-content-alignment-rtl.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+ (WebCore::RenderGrid::populateGridPositions):
+ (WebCore::RenderGrid::columnAxisOffsetForChild):
+ (WebCore::RenderGrid::rowAxisOffsetForChild):
+ (WebCore::RenderGrid::rowAxisPositionForChild): Deleted.
+ * rendering/RenderGrid.h:
+
+2016-04-18 Manuel Rego Casasnovas <r...@igalia.com>
+
[css-grid] Add method to translate RTL coordinates
https://bugs.webkit.org/show_bug.cgi?id=156589
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (199656 => 199657)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-18 08:09:56 UTC (rev 199656)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-18 08:20:08 UTC (rev 199657)
@@ -1534,10 +1534,21 @@
end = m_rowPositions[endLine] - m_rowPositions[0] + paddingBefore();
// These vectors store line positions including gaps, but we shouldn't consider them for the edges of the grid.
- if (endLine > firstExplicitLine && endLine < lastExplicitLine)
+ if (endLine > firstExplicitLine && endLine < lastExplicitLine) {
end -= guttersSize(direction, 2);
+ end -= isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
+ }
}
+ LayoutUnit alignmentOffset = isRowAxis ? m_columnPositions[0] - borderAndPaddingStart() : m_rowPositions[0] - borderAndPaddingBefore();
+ if (isRowAxis && !style().isLeftToRightDirection())
+ alignmentOffset = contentLogicalWidth() - (m_columnPositions[m_columnPositions.size() - 1] - borderAndPaddingStart());
+
+ if (!startIsAuto)
+ start += alignmentOffset;
+ if (!endIsAuto)
+ end += alignmentOffset;
+
breadth = end - start;
offset = start;
@@ -1549,8 +1560,10 @@
else {
offset = translateRTLCoordinate(m_columnPositions[endLine]) - borderLeft();
- if (endLine > firstExplicitLine && endLine < lastExplicitLine)
+ if (endLine > firstExplicitLine && endLine < lastExplicitLine) {
offset += guttersSize(direction, 2);
+ offset += isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
+ }
}
}
@@ -1625,6 +1638,7 @@
for (unsigned i = 0; i < nextToLastLine; ++i)
m_columnPositions[i + 1] = m_columnPositions[i] + offset.distributionOffset + sizingData.columnTracks[i].baseSize() + trackGap;
m_columnPositions[lastLine] = m_columnPositions[nextToLastLine] + sizingData.columnTracks[nextToLastLine].baseSize();
+ m_offsetBetweenColumns = offset.distributionOffset;
numberOfTracks = sizingData.rowTracks.size();
numberOfLines = numberOfTracks + 1;
@@ -1637,6 +1651,7 @@
for (unsigned i = 0; i < nextToLastLine; ++i)
m_rowPositions[i + 1] = m_rowPositions[i] + offset.distributionOffset + sizingData.rowTracks[i].baseSize() + trackGap;
m_rowPositions[lastLine] = m_rowPositions[nextToLastLine] + sizingData.rowTracks[nextToLastLine].baseSize();
+ m_offsetBetweenRows = offset.distributionOffset;
}
static inline LayoutUnit computeOverflowAlignmentOffset(OverflowAlignment overflow, LayoutUnit trackBreadth, LayoutUnit childBreadth)
@@ -1874,11 +1889,6 @@
return GridAxisStart;
}
-static inline LayoutUnit offsetBetweenTracks(ContentDistributionType distribution, const Vector<LayoutUnit>& trackPositions, const LayoutUnit& childBreadth)
-{
- return (distribution == ContentDistributionStretch || ContentDistributionStretch == ContentDistributionDefault) ? LayoutUnit() : trackPositions[1] - trackPositions[0] - childBreadth;
-}
-
LayoutUnit RenderGrid::columnAxisOffsetForChild(const RenderBox& child) const
{
const GridSpan& rowsSpan = cachedGridSpan(child, ForRows);
@@ -1902,7 +1912,7 @@
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 -= offsetBetweenTracks(style().resolvedAlignContentDistribution(normalValueBehaviorGrid()), m_rowPositions, childBreadth);
+ endOfRow -= m_offsetBetweenRows;
LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveAlignmentOverflow(style(), child.style()), endOfRow - startOfRow, childBreadth);
return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
}
@@ -1936,7 +1946,7 @@
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 -= offsetBetweenTracks(style().resolvedJustifyContentDistribution(normalValueBehaviorGrid()), m_columnPositions, childBreadth);
+ endOfColumn -= m_offsetBetweenColumns;
LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(RenderStyle::resolveJustificationOverflow(style(), child.style()), endOfColumn - startOfColumn, childBreadth);
return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);
}
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (199656 => 199657)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2016-04-18 08:09:56 UTC (rev 199656)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2016-04-18 08:20:08 UTC (rev 199657)
@@ -186,6 +186,8 @@
Vector<Vector<Vector<RenderBox*, 1>>> m_grid;
Vector<LayoutUnit> m_columnPositions;
Vector<LayoutUnit> m_rowPositions;
+ LayoutUnit m_offsetBetweenColumns;
+ LayoutUnit m_offsetBetweenRows;
HashMap<const RenderBox*, GridArea> m_gridItemArea;
OrderIterator m_orderIterator;
