Title: [200572] trunk
Revision
200572
Author
r...@igalia.com
Date
2016-05-09 03:17:29 -0700 (Mon, 09 May 2016)

Log Message

[css-grid] Fix static position for positioned grid items
https://bugs.webkit.org/show_bug.cgi?id=157417

Reviewed by Darin Adler.

Source/WebCore:

The spec was updated to define properly the static position
for positioned grid items, but we didn't update the implementation yet:
https://drafts.csswg.org/css-grid-1/issues-wd-20150108#issue-1

We were only setting the static position when the start line
was not auto. Otherwise we were using the default one
which includes the padding.
With the spec change we need to set it always,
even if the start line is auto.

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutPositionedObject):
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):

LayoutTests:

Updated several tests to follow the new expected behavior.

* fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
* fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
* fast/css-grid-layout/grid-positioned-items-gaps-rtl.html:
* fast/css-grid-layout/grid-positioned-items-gaps.html:
* fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
* fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
* fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
* fast/css-grid-layout/grid-sizing-positioned-items.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (200571 => 200572)


--- trunk/LayoutTests/ChangeLog	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/ChangeLog	2016-05-09 10:17:29 UTC (rev 200572)
@@ -1,3 +1,21 @@
+2016-05-09  Manuel Rego Casasnovas  <r...@igalia.com>
+
+        [css-grid] Fix static position for positioned grid items
+        https://bugs.webkit.org/show_bug.cgi?id=157417
+
+        Reviewed by Darin Adler.
+
+        Updated several tests to follow the new expected behavior.
+
+        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html:
+        * fast/css-grid-layout/absolute-positioning-grid-container-parent.html:
+        * fast/css-grid-layout/grid-positioned-items-gaps-rtl.html:
+        * fast/css-grid-layout/grid-positioned-items-gaps.html:
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html:
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid.html:
+        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html:
+        * fast/css-grid-layout/grid-sizing-positioned-items.html:
+
 2016-05-09  Gyuyoung Kim  <gyuyoung....@webkit.org>
 
         Fix wrong gardening in r200570

Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -113,7 +113,7 @@
 
 <div class="grid">
     <div class="sizedToGridArea absolute autoRowAutoColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
     </div>
     <div class="sizedToGridArea absolute firstRowFirstColumn"
         data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="515">
@@ -137,22 +137,22 @@
 
 <div class="grid">
     <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
-        data-offset-x="15" data-offset-y="65" data-expected-width="315" data-expected-height="250">
+        data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250">
     </div>
     <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
         data-offset-x="65" data-offset-y="65" data-expected-width="250" data-expected-height="250">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="165" data-expected-height="165">
+        data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expected-height="165">
+        data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165">
     </div>
     <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="165" data-expected-height="65">
+        data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65">
     </div>
     <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expected-height="65">
+        data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65">
     </div>
 </div>
 
@@ -229,7 +229,7 @@
 
 <div class="grid directionRTL">
     <div class="sizedToGridArea absolute autoRowAutoColumn"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
     </div>
     <div class="sizedToGridArea absolute firstRowFirstColumn"
         data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="515">
@@ -253,22 +253,22 @@
 
 <div class="grid directionRTL">
     <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
-        data-offset-x="200" data-offset-y="65" data-expected-width="315" data-expected-height="250">
+        data-offset-x="215" data-offset-y="65" data-expected-width="315" data-expected-height="250">
     </div>
     <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
         data-offset-x="215" data-offset-y="65" data-expected-width="250" data-expected-height="250">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
-        data-offset-x="350" data-offset-y="15" data-expected-width="165" data-expected-height="165">
+        data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="165">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
-        data-offset-x="450" data-offset-y="15" data-expected-width="65" data-expected-height="165">
+        data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="165">
     </div>
     <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
-        data-offset-x="350" data-offset-y="15" data-expected-width="165" data-expected-height="65">
+        data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="65">
     </div>
     <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
-        data-offset-x="450" data-offset-y="15" data-expected-width="65" data-expected-height="65">
+        data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="65">
     </div>
 </div>
 

Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -53,7 +53,7 @@
 
 <div class="container">
     <div class="grid relative">
-        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="15" data-offset-y="5" data-expected-width="330" data-expected-height="210"></div>
+        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
     </div>
 </div>
 
@@ -89,7 +89,7 @@
 
 <div class="container">
     <div class="grid relative directionRTL">
-        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-15" data-offset-y="5" data-expected-width="330" data-expected-height="210"></div>
+        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
     </div>
 </div>
 

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps-rtl.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -35,7 +35,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / auto; grid-row: auto / auto;"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
     </div>
 </div>
 
@@ -191,7 +191,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
-        data-offset-x="0" data-offset-y="15" data-expected-width="365" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
     </div>
 </div>
 
@@ -203,7 +203,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
-        data-offset-x="0" data-offset-y="15" data-expected-width="265" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
     </div>
 </div>
 
@@ -215,7 +215,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
     </div>
 </div>
 
@@ -227,7 +227,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / 1; grid-row: auto / 1;"
-        data-offset-x="800" data-offset-y="15" data-expected-width="15" data-expected-height="15">
+        data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
     </div>
 </div>
 
@@ -239,7 +239,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / 2; grid-row: auto / 2;"
-        data-offset-x="700" data-offset-y="15" data-expected-width="115" data-expected-height="65">
+        data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
     </div>
 </div>
 
@@ -251,7 +251,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / 3; grid-row: auto / 3;"
-        data-offset-x="550" data-offset-y="15" data-expected-width="265" data-expected-height="140">
+        data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
     </div>
 </div>
 
@@ -263,7 +263,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / 4; grid-row: auto / 4;"
-        data-offset-x="400" data-offset-y="15" data-expected-width="415" data-expected-height="230">
+        data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
     </div>
 </div>
 
@@ -275,7 +275,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / 5; grid-row: auto / 5;"
-        data-offset-x="250" data-offset-y="15" data-expected-width="565" data-expected-height="230">
+        data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
     </div>
 </div>
 
@@ -287,7 +287,7 @@
 
 <div class="grid directionRTL">
     <div style="grid-column: auto / 6; grid-row: auto / 6;"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
     </div>
 </div>
 

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-gaps.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -35,7 +35,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / auto; grid-row: auto / auto;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
     </div>
 </div>
 
@@ -191,7 +191,7 @@
 
 <div class="grid">
     <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
-        data-offset-x="465" data-offset-y="15" data-expected-width="365" data-expected-height="230">
+        data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230">
     </div>
 </div>
 
@@ -203,7 +203,7 @@
 
 <div class="grid">
     <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
-        data-offset-x="565" data-offset-y="15" data-expected-width="265" data-expected-height="230">
+        data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230">
     </div>
 </div>
 
@@ -215,7 +215,7 @@
 
 <div class="grid">
     <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
     </div>
 </div>
 
@@ -227,7 +227,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / 1; grid-row: auto / 1;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="15" data-expected-height="15">
+        data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
     </div>
 </div>
 
@@ -239,7 +239,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / 2; grid-row: auto / 2;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="115" data-expected-height="65">
+        data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65">
     </div>
 </div>
 
@@ -251,7 +251,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / 3; grid-row: auto / 3;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="265" data-expected-height="140">
+        data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140">
     </div>
 </div>
 
@@ -263,7 +263,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / 4; grid-row: auto / 4;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="415" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230">
     </div>
 </div>
 
@@ -275,7 +275,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / 5; grid-row: auto / 5;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="565" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230">
     </div>
 </div>
 
@@ -287,7 +287,7 @@
 
 <div class="grid">
     <div style="grid-column: auto / 6; grid-row: auto / 6;"
-        data-offset-x="15" data-offset-y="15" data-expected-width="830" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
     </div>
 </div>
 

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -50,7 +50,7 @@
 
 <div class="grid">
     <div class="absolute sizedToGridArea startImplicitLine"
-        data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
     </div>
     <div class="absolute sizedToGridArea endImplicitLine"
         data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
@@ -59,7 +59,7 @@
 
 <div class="grid">
     <div class="absolute sizedToGridArea startImplicitLineSpan"
-        data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
     </div>
     <div class="absolute sizedToGridArea endImplicitLineSpan"
         data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
@@ -68,7 +68,7 @@
 
 <div class="grid directionRTL">
     <div class="absolute sizedToGridArea startImplicitLine"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
     </div>
     <div class="absolute sizedToGridArea endImplicitLine"
         data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
@@ -77,7 +77,7 @@
 
 <div class="grid directionRTL">
     <div class="absolute sizedToGridArea startImplicitLineSpan"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
     </div>
     <div class="absolute sizedToGridArea endImplicitLineSpan"
         data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -30,13 +30,13 @@
 
 <div class="grid">
     <div class="sizedToGridArea absolute secondRowSecondColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
     <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
 </div>
 
@@ -45,7 +45,7 @@
         data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
-        data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
     <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
         data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
@@ -54,13 +54,13 @@
 
 <div class="grid directionRTL">
     <div class="sizedToGridArea absolute secondRowSecondColumn"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
     <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
 </div>
 
@@ -69,7 +69,7 @@
         data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
     </div>
     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+        data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
     </div>
     <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
         data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -44,25 +44,25 @@
 
 <div class="grid">
     <div class="absolute sizedToGridArea startAndEndUnknownLines"
-        data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
     </div>
     <div class="absolute sizedToGridArea endUnknownLine"
         data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
     </div>
     <div class="absolute sizedToGridArea startUnknownLine"
-        data-offset-x="15" data-offset-y="15" data-expected-width="315" data-expected-height="215">
+        data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215">
     </div>
 </div>
 
 <div class="grid directionRTL">
     <div class="absolute sizedToGridArea startAndEndUnknownLines"
-        data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-expected-height="330">
+        data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
     </div>
     <div class="absolute sizedToGridArea endUnknownLine"
         data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
     </div>
     <div class="absolute sizedToGridArea startUnknownLine"
-        data-offset-x="200" data-offset-y="15" data-expected-width="315" data-expected-height="215">
+        data-offset-x="215" data-offset-y="0" data-expected-width="315" data-expected-height="215">
     </div>
 </div>
 

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html (200571 => 200572)


--- trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html	2016-05-09 10:17:29 UTC (rev 200572)
@@ -25,7 +25,7 @@
 }
 
 .percentageSize {
-    width: 40%;
+    width: 50%;
     height: 20%;
 }
 
@@ -36,6 +36,18 @@
     bottom: 20px;
 }
 
+.onlyFirstRowOnlyFirstColumn {
+    background-color: blue;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+}
+
+.endSecondRowEndSecondColumn {
+    background-color: orange;
+    grid-column-end: 3;
+    grid-row-end: 3;
+}
+
 </style>
 <script src=""
 <body _onload_="checkLayout('.grid')">
@@ -45,7 +57,7 @@
 <div class="unconstrainedContainer">
     <div class="grid">
         <div class="absolute autoRowAutoColumn sizedToGridArea"
-            data-offset-x="15" data-offset-y="15" data-expected-width="1030" data-expected-height="1030">
+            data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
         </div>
         <div class="absolute secondRowSecondColumn sizedToGridArea"
             data-offset-x="115" data-offset-y="65" data-expected-width="915" data-expected-height="965">
@@ -54,7 +66,7 @@
             data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
         </div>
         <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
-            data-offset-x="15" data-offset-y="15" data-expected-width="315" data-expected-height="215">
+            data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215">
         </div>
     </div>
 </div>
@@ -62,7 +74,7 @@
 <div class="unconstrainedContainer">
     <div class="grid">
         <div class="absolute autoRowAutoColumn lengthSize"
-            data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">
         </div>
         <div class="absolute secondRowSecondColumn lengthSize"
             data-offset-x="115" data-offset-y="65" data-expected-width="50" data-expected-height="20">
@@ -71,7 +83,7 @@
             data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
         </div>
         <div class="absolute endSecondRowEndSecondColumn lengthSize"
-            data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">
         </div>
     </div>
 </div>
@@ -79,16 +91,16 @@
 <div class="unconstrainedContainer">
     <div class="grid">
         <div class="absolute autoRowAutoColumn percentageSize"
-            data-offset-x="15" data-offset-y="15" data-expected-width="412" data-expected-height="206">
+            data-offset-x="0" data-offset-y="0" data-expected-width="515" data-expected-height="206">
         </div>
         <div class="absolute secondRowSecondColumn percentageSize"
-            data-offset-x="115" data-offset-y="65" data-expected-width="366" data-expected-height="193">
+            data-offset-x="115" data-offset-y="65" data-expected-width="458" data-expected-height="193">
         </div>
         <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
-            data-offset-x="15" data-offset-y="15" data-expected-width="40" data-expected-height="10">
+            data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="10">
         </div>
         <div class="absolute endSecondRowEndSecondColumn percentageSize"
-            data-offset-x="15" data-offset-y="15" data-expected-width="126" data-expected-height="43">
+            data-offset-x="0" data-offset-y="0" data-expected-width="158" data-expected-height="43">
         </div>
     </div>
 </div>
@@ -113,7 +125,7 @@
 <div class="unconstrainedContainer">
     <div class="grid directionRTL">
         <div class="absolute autoRowAutoColumn sizedToGridArea"
-            data-offset-x="-15" data-offset-y="15" data-expected-width="1030" data-expected-height="1030">
+            data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
         </div>
         <div class="absolute secondRowSecondColumn sizedToGridArea"
             data-offset-x="0" data-offset-y="65" data-expected-width="915" data-expected-height="965">
@@ -122,7 +134,7 @@
             data-offset-x="915" data-offset-y="15" data-expected-width="100" data-expected-height="50">
         </div>
         <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
-            data-offset-x="700" data-offset-y="15" data-expected-width="315" data-expected-height="215">
+            data-offset-x="715" data-offset-y="0" data-expected-width="315" data-expected-height="215">
         </div>
     </div>
 </div>
@@ -130,7 +142,7 @@
 <div class="unconstrainedContainer">
     <div class="grid directionRTL">
         <div class="absolute autoRowAutoColumn lengthSize"
-            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+            data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20">
         </div>
         <div class="absolute secondRowSecondColumn lengthSize"
             data-offset-x="865" data-offset-y="65" data-expected-width="50" data-expected-height="20">
@@ -139,7 +151,7 @@
             data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
         </div>
         <div class="absolute endSecondRowEndSecondColumn lengthSize"
-            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+            data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20">
         </div>
     </div>
 </div>
@@ -147,16 +159,16 @@
 <div class="unconstrainedContainer">
     <div class="grid directionRTL">
         <div class="absolute autoRowAutoColumn percentageSize"
-            data-offset-x="603" data-offset-y="15" data-expected-width="412" data-expected-height="206">
+            data-offset-x="515" data-offset-y="0" data-expected-width="515" data-expected-height="206">
         </div>
         <div class="absolute secondRowSecondColumn percentageSize"
-            data-offset-x="549" data-offset-y="65" data-expected-width="366" data-expected-height="193">
+            data-offset-x="458" data-offset-y="65" data-expected-width="458" data-expected-height="193">
         </div>
         <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
-            data-offset-x="975" data-offset-y="15" data-expected-width="40" data-expected-height="10">
+            data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="10">
         </div>
         <div class="absolute endSecondRowEndSecondColumn percentageSize"
-            data-offset-x="889" data-offset-y="15" data-expected-width="126" data-expected-height="43">
+            data-offset-x="873" data-offset-y="0" data-expected-width="158" data-expected-height="43">
         </div>
     </div>
 </div>

Modified: trunk/Source/WebCore/ChangeLog (200571 => 200572)


--- trunk/Source/WebCore/ChangeLog	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/Source/WebCore/ChangeLog	2016-05-09 10:17:29 UTC (rev 200572)
@@ -1,3 +1,24 @@
+2016-05-09  Manuel Rego Casasnovas  <r...@igalia.com>
+
+        [css-grid] Fix static position for positioned grid items
+        https://bugs.webkit.org/show_bug.cgi?id=157417
+
+        Reviewed by Darin Adler.
+
+        The spec was updated to define properly the static position
+        for positioned grid items, but we didn't update the implementation yet:
+        https://drafts.csswg.org/css-grid-1/issues-wd-20150108#issue-1
+
+        We were only setting the static position when the start line
+        was not auto. Otherwise we were using the default one
+        which includes the padding.
+        With the spec change we need to set it always,
+        even if the start line is auto.
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::layoutPositionedObject):
+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+
 2016-05-08  Frederic Wang  <fw...@igalia.com>
 
         RenderMathMLOperator: refactor management of stretchy data and italic correction

Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (200571 => 200572)


--- trunk/Source/WebCore/rendering/RenderGrid.cpp	2016-05-09 08:55:50 UTC (rev 200571)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp	2016-05-09 10:17:29 UTC (rev 200572)
@@ -1520,6 +1520,12 @@
         child.setOverrideContainingBlockContentLogicalHeight(rowBreadth);
         child.setExtraInlineOffset(columnOffset);
         child.setExtraBlockOffset(rowOffset);
+
+        if (child.parent() == this) {
+            auto& childLayer = *child.layer();
+            childLayer.setStaticInlinePosition(borderStart() + columnOffset);
+            childLayer.setStaticBlockPosition(borderBefore() + rowOffset);
+        }
     }
 
     RenderBlock::layoutPositionedObject(child, relayoutChildren, fixedPositionObjectsOnly);
@@ -1603,15 +1609,6 @@
             }
         }
     }
-
-    if (child.parent() == this && !startIsAuto) {
-        // If column/row start is "auto" the static position has been already set in prepareChildForPositionedLayout().
-        RenderLayer* childLayer = child.layer();
-        if (isRowAxis)
-            childLayer->setStaticInlinePosition(borderStart() + offset);
-        else
-            childLayer->setStaticBlockPosition(borderBefore() + offset);
-    }
 }
 
 GridArea RenderGrid::cachedGridArea(const RenderBox& gridItem) const
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to