Title: [199223] trunk
- Revision
- 199223
- Author
- [email protected]
- Date
- 2016-04-08 01:52:17 -0700 (Fri, 08 Apr 2016)
Log Message
[css-grid] Fix positioned items with grid gaps
https://bugs.webkit.org/show_bug.cgi?id=156288
Reviewed by Darin Adler.
Source/WebCore:
When we place a positioned items in a grid with gaps,
we were not taking into accounts the gutter size.
We've to use that size to properly place and size the item.
Tests: fast/css-grid-layout/grid-positioned-items-gaps-rtl.html
fast/css-grid-layout/grid-positioned-items-gaps.html
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
LayoutTests:
Added new tests checking the right behavior.
* fast/css-grid-layout/grid-positioned-items-gaps-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-gaps-rtl-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-gaps-rtl.html: Added.
* fast/css-grid-layout/grid-positioned-items-gaps.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (199222 => 199223)
--- trunk/LayoutTests/ChangeLog 2016-04-08 08:01:04 UTC (rev 199222)
+++ trunk/LayoutTests/ChangeLog 2016-04-08 08:52:17 UTC (rev 199223)
@@ -1,3 +1,17 @@
+2016-04-08 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix positioned items with grid gaps
+ https://bugs.webkit.org/show_bug.cgi?id=156288
+
+ Reviewed by Darin Adler.
+
+ Added new tests checking the right behavior.
+
+ * fast/css-grid-layout/grid-positioned-items-gaps-expected.txt: Added.
+ * fast/css-grid-layout/grid-positioned-items-gaps-rtl-expected.txt: Added.
+ * fast/css-grid-layout/grid-positioned-items-gaps-rtl.html: Added.
+ * fast/css-grid-layout/grid-positioned-items-gaps.html: Added.
+
2016-04-08 John Wilander <[email protected]>
CSP: Block XHR when calling XMLHttpRequest.send() and throw network error.
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-expected.txt (0 => 199223)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-expected.txt 2016-04-08 08:52:17 UTC (rev 199223)
@@ -0,0 +1,46 @@
+This test checks the behavior of the positioned items in a grid container with gaps.
+
+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-gaps-rtl-expected.txt (0 => 199223)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl-expected.txt 2016-04-08 08:52:17 UTC (rev 199223)
@@ -0,0 +1,46 @@
+This test checks the behavior of the positioned items in a grid container with gaps 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
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html (0 => 199223)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html 2016-04-08 08:52:17 UTC (rev 199223)
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 100px 100px 100px 100px;
+ -webkit-grid-template-rows: 50px 50px;
+ -webkit-grid-gap: 25px 50px;
+ width: 800px;
+ height: 200px;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+ /* 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 container with gaps in RTL.</p>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <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="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
+ data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
+ data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
+ data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
+ data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
+ data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
+ data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
+ data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
+ data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
+ data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
+ data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
+ data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
+ data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="365" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="265" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
+ data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="800" data-offset-y="15" data-expected-width="15" data-expected-height="15">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="700" data-offset-y="15" data-expected-width="115" data-expected-height="65">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
+ data-offset-x="550" data-offset-y="15" data-expected-width="265" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
+ data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
+ data-offset-x="400" data-offset-y="15" data-expected-width="415" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
+ data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
+ data-offset-x="250" data-offset-y="15" data-expected-width="565" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
+ data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
+ data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid directionRTL">
+ <div class="offsets" style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+</body>
Added: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html (0 => 199223)
--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html 2016-04-08 08:52:17 UTC (rev 199223)
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<style>
+
+.grid {
+ -webkit-grid-template-columns: 100px 100px 100px 100px;
+ -webkit-grid-template-rows: 50px 50px;
+ -webkit-grid-gap: 25px 50px;
+ width: 800px;
+ height: 200px;
+ border: 5px solid black;
+ margin: 30px;
+ padding: 15px;
+ /* 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 container with gaps.</p>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / auto; -webkit-grid-row: auto / auto;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <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="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 1 / auto; -webkit-grid-row: 1 / auto;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 1 / 2; -webkit-grid-row: 1 / 2;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 1 / 3; -webkit-grid-row: 1 / 3;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 1 / 4; -webkit-grid-row: 1 / 4;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 1 / 5; -webkit-grid-row: 1 / 5;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 1 / 6; -webkit-grid-row: 1 / 6;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 2 / auto; -webkit-grid-row: 2 / auto;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 2 / 3; -webkit-grid-row: 2 / 3;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 2 / 4; -webkit-grid-row: 2 / 4;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 2 / 5; -webkit-grid-row: 2 / 5;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 2 / 6; -webkit-grid-row: 2 / 6;"
+ data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 3 / auto; -webkit-grid-row: 3 / auto;"
+ data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
+ data-offset-x="465" data-offset-y="15" data-expected-width="365" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 4 / auto; -webkit-grid-row: 4 / auto;"
+ data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
+ data-offset-x="565" data-offset-y="15" data-expected-width="265" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 5 / auto; -webkit-grid-row: 5 / auto;"
+ data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: 6 / auto; -webkit-grid-row: 6 / auto;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="15" data-expected-height="15">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: auto / 1; -webkit-grid-row: auto / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / 2; -webkit-grid-row: auto / 2;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="115" data-expected-height="65">
+ </div>
+</div>
+
+<div class="grid">
+ <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="115" data-expected-height="65">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="265" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: auto / 3; -webkit-grid-row: auto / 3;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="415" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: auto / 4; -webkit-grid-row: auto / 4;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="565" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: auto / 5; -webkit-grid-row: auto / 5;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+<div class="grid">
+ <div class="offsets" style="-webkit-grid-column: auto / 6; -webkit-grid-row: auto / 6;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+ </div>
+</div>
+
+</body>
Modified: trunk/Source/WebCore/ChangeLog (199222 => 199223)
--- trunk/Source/WebCore/ChangeLog 2016-04-08 08:01:04 UTC (rev 199222)
+++ trunk/Source/WebCore/ChangeLog 2016-04-08 08:52:17 UTC (rev 199223)
@@ -1,3 +1,20 @@
+2016-04-08 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix positioned items with grid gaps
+ https://bugs.webkit.org/show_bug.cgi?id=156288
+
+ Reviewed by Darin Adler.
+
+ When we place a positioned items in a grid with gaps,
+ we were not taking into accounts the gutter size.
+ We've to use that size to properly place and size the item.
+
+ Tests: fast/css-grid-layout/grid-positioned-items-gaps-rtl.html
+ fast/css-grid-layout/grid-positioned-items-gaps.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+
2016-04-08 Javier Fernandez <[email protected]>
[css-grid] Remove unnecessary iteration in populateGridPositions loop
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (199222 => 199223)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-08 08:01:04 UTC (rev 199222)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-04-08 08:52:17 UTC (rev 199223)
@@ -1532,6 +1532,10 @@
end = m_columnPositions[endLine] - m_columnPositions[0] + paddingStart();
else
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)
+ end -= guttersSize(direction, 2);
}
breadth = end - start;
@@ -1546,6 +1550,9 @@
LayoutUnit alignmentOffset = m_columnPositions[0] - borderAndPaddingStart();
LayoutUnit offsetFromLastLine = m_columnPositions[m_columnPositions.size() - 1] - m_columnPositions[endLine];
offset = paddingLeft() + alignmentOffset + offsetFromLastLine;
+
+ if (endLine > firstExplicitLine && endLine < lastExplicitLine)
+ offset += guttersSize(direction, 2);
}
}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
