[css-grid] Support positioned grid children
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 5 Nov 2015 09:30:30 +0000 (09:30 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 5 Nov 2015 09:30:30 +0000 (09:30 +0000)
https://bugs.webkit.org/show_bug.cgi?id=150837

Reviewed by Darin Adler.

Source/WebCore:

According to the spec positioned grid children have
a special behavior described at:
https://drafts.csswg.org/css-grid/#abspos

The idea is that for positioned children the containing block will
correspond to the padding edges of the grid container, unless the
grid placement properties are defined.
This not only affects to positioned grid items (direct children) but
also to any descendant where the containing block is the grid container.

In order to manage this special behavior, the patch is overriding
RenderBlock::layoutPositionedObject() to calculate the position and size
depending on the grid-placement properties.

RenderBox class has some changes to calculate the containing block width
and height for positioned objects (using the override value). And also
to compute their static position.

Finally, the positioned items are not taken into account in all the
different grid methods, in order that they do not interfere the layout
of the grid as stated in the spec.

Tests: 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-background.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
       fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html
       fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html

* rendering/OrderIterator.cpp:
(WebCore::OrderIterator::next): Fix method to avoid issues if no items
are added to the iterator.
* rendering/RenderBlock.h: Mark layoutPositionedObject() as virtual.
* rendering/RenderBox.cpp: Add new maps for inline/block extra offsets.
(WebCore::RenderBox::~RenderBox): Clear the new maps.
(WebCore::RenderBox::extraInlineOffset): Extra offset that we need to
apply to positioned grid children due to the grid placement properties.
(WebCore::RenderBox::extraBlockOffset): Ditto.
(WebCore::RenderBox::setExtraInlineOffset):
(WebCore::RenderBox::setExtraBlockOffset):
(WebCore::RenderBox::clearExtraInlineAndBlockOffests):
(WebCore::RenderBox::containingBlockLogicalWidthForPositioned): Use the
override containing block if any.
(WebCore::RenderBox::containingBlockLogicalHeightForPositioned): Ditto.
(WebCore::RenderBox::computePositionedLogicalWidth): Add the extra
offset if it's a positioned element.
(WebCore::RenderBox::computePositionedLogicalHeight): Ditto.
* rendering/RenderBox.h:
(WebCore::RenderBox::scrollbarLogicalWidth): Add utility method.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock): Clear grid after layout positioned
objects instead of at the end of layoutGridItems().
(WebCore::RenderGrid::placeItemsOnGrid): Ignore positioned items.
(WebCore::RenderGrid::populateExplicitGridAndOrderIterator): Ditto.
(WebCore::RenderGrid::layoutGridItems): Ditto.
(WebCore::RenderGrid::prepareChildForPositionedLayout): Set static
position for positioned items.
(WebCore::RenderGrid::layoutPositionedObject): Calculate position and
size for positioned children.
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild): Calculate
extra offset and breadth for positioned children.
* rendering/RenderGrid.h:
* rendering/style/GridResolvedPosition.cpp:
(WebCore::GridResolvedPosition::isNonExistentNamedLineOrArea): Make it a
public static method.
(WebCore::GridUnresolvedSpan::adjustGridPositionsFromStyle): Fix calls
to isNonExistentNamedLineOrArea().
(WebCore::resolveGridPositionFromStyle): Ditto.
* rendering/style/GridResolvedPosition.h: Make
isNonExistentNamedLineOrArea() public.

LayoutTests:

* fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt: Added.
* fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html: Added.
* fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt: Added.
* fast/css-grid-layout/absolute-positioning-grid-container-parent.html: Added.
* fast/css-grid-layout/grid-positioned-items-background-expected.html: Added.
* fast/css-grid-layout/grid-positioned-items-background.html: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html: Added.
* fast/css-grid-layout/grid-positioned-items-implicit-grid.html: Added.
* fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt: Added.
* fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html: Added.
* fast/css-grid-layout/grid-sizing-positioned-items-expected.txt: Added.
* fast/css-grid-layout/grid-sizing-positioned-items.html: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt: Added.
* fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html: Added.
* fast/css-grid-layout/resources/grid.css: Added some common CSS classes.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@192054 268f45cc-cd09-0410-ab3c-d52691b4dbfc

29 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/grid.css
Source/WebCore/ChangeLog
Source/WebCore/rendering/OrderIterator.cpp
Source/WebCore/rendering/RenderBlock.h
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderBox.h
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h
Source/WebCore/rendering/style/GridResolvedPosition.cpp
Source/WebCore/rendering/style/GridResolvedPosition.h

index b3dac1cf1d8ff3d12f30371d7ff319b2e767919e..b559f2210a9daee6863f6db7397f308f22f0e14e 100644 (file)
@@ -1,3 +1,30 @@
+2015-11-05  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Support positioned grid children
+        https://bugs.webkit.org/show_bug.cgi?id=150837
+
+        Reviewed by Darin Adler.
+
+        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt: Added.
+        * fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html: Added.
+        * fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt: Added.
+        * fast/css-grid-layout/absolute-positioning-grid-container-parent.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-background-expected.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-background.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-implicit-grid.html: Added.
+        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt: Added.
+        * fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html: Added.
+        * fast/css-grid-layout/grid-sizing-positioned-items-expected.txt: Added.
+        * fast/css-grid-layout/grid-sizing-positioned-items.html: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt: Added.
+        * fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html: Added.
+        * fast/css-grid-layout/resources/grid.css: Added some common CSS classes.
+
 2015-11-04  Jiewen Tan  <jiewen_tan@apple.com>
 
         Null dereference loading Blink layout test editing/execCommand/delete-hidden-crash.html
diff --git a/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt b/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block-expected.txt
new file mode 100644 (file)
index 0000000..2824e28
--- /dev/null
@@ -0,0 +1,7 @@
+This test checks the behavior of the absolutely positioned elements with a grid container as containing block.
+
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html b/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html
new file mode 100644 (file)
index 0000000..e8c173c
--- /dev/null
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 50px 100px 150px 200px;
+    -webkit-grid-template-rows: 50px 100px 150px 200px;
+    width: 500px;
+    height: 500px;
+    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;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.thirdRowThirdColumnSpanning2Rows {
+    -webkit-grid-column: 3;
+    -webkit-grid-row: 3 / span 2;
+    background-color: maroon;
+}
+
+.thirdRowThirdColumnSpanning2Rows2Columns {
+    -webkit-grid-column: 3 / span 2;
+    -webkit-grid-row: 3 / span 2;
+    background-color: aqua;
+}
+
+.endFirstRowEndFirstColumn {
+    background-color: blue;
+    -webkit-grid-column-end: 2;
+    -webkit-grid-row-end: 2;
+}
+
+.endFirstRowEndSecondColumn {
+    background-color: lime;
+    -webkit-grid-column-end: 3;
+    -webkit-grid-row-end: 2;
+}
+
+.endSecondRowEndFirstColumn {
+    background-color: purple;
+    -webkit-grid-column-end: 2;
+    -webkit-grid-row-end: 3;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows {
+    -webkit-grid-column-end: 4;
+    -webkit-grid-row: span 2 / 4;
+    background-color: maroon;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows2Columns {
+    -webkit-grid-column: span 2 / 4;
+    -webkit-grid-row: span 2 / 4;
+    background-color: aqua;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows {
+    -webkit-grid-column: 3 / 4;
+    -webkit-grid-row: 3 / 5;
+    background-color: maroon;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns {
+    -webkit-grid-column: 3 / 5;
+    -webkit-grid-row: 3 / 5;
+    background-color: aqua;
+}
+
+.offsetLeft25 {
+    left: 25px;
+}
+
+.offsetRight50 {
+    right: 50px;
+}
+
+.offsetTop75 {
+    top: 75px;
+}
+
+.offsetBottom100 {
+    bottom: 100px;
+}
+
+.offsetLeftMinus20 {
+    left: -20px;
+}
+
+.offsetRightMinus40 {
+    right: -40px;
+}
+
+.offsetTopMinus60 {
+    top: -60px;
+}
+
+.offsetBottomMinus80 {
+    bottom: -80px;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks the behavior of the absolutely positioned elements with a grid container as containing block.</p>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute autoRowAutoColumn"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+    <div class="sizedToGridArea absolute secondRowFirstColumn"
+        data-offset-x="15" data-offset-y="65" data-expected-width="515" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute firstRowSecondColumn"
+        data-offset-x="65" data-offset-y="15" data-expected-width="465" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowSecondColumn"
+        data-offset-x="65" data-offset-y="65" data-expected-width="465" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
+        data-offset-x="165" data-offset-y="165" data-expected-width="365" data-expected-height="350">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
+        data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
+        data-offset-x="15" 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">
+    </div>
+    <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+    <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
+        data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expected-height="65">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
+        data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
+        data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expected-height="100">
+    </div>
+    <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
+        data-offset-x="65" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+        data-offset-x="65" data-offset-y="65" data-expected-width="100" data-expected-height="100">
+    </div>
+    <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
+        data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+    </div>
+    <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
+        data-offset-x="165" data-offset-y="165" data-expected-width="150" data-expected-height="350">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+        data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+    </div>
+    <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+        data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+        data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+        data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+        data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+        data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+        data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+    </div>
+</div>
+
+<div class="grid">
+    <div>
+        <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+            data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+        </div>
+        <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+            data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+        </div>
+        <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+            data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+        </div>
+        <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+            data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+        </div>
+        <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+            data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+        </div>
+        <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+            data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+        </div>
+        <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+            data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt b/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent-expected.txt
new file mode 100644 (file)
index 0000000..3a407b7
--- /dev/null
@@ -0,0 +1,8 @@
+This test checks the behavior of the absolutely positioned elements with a grid container as parent.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html b/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html
new file mode 100644 (file)
index 0000000..b250c3b
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 50px 100px 150px;
+    -webkit-grid-template-rows: 25px 50px 100px;
+    width: 300px;
+    height: 200px;
+    border: 5px solid black;
+    margin: 20px 30px;
+    padding: 5px 15px;
+}
+
+.container {
+    width: 500px;
+    height: 400px;
+}
+
+.relative {
+    /* Ensures that the element is the containing block of the absolutely positioned elements. */
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.container')">
+
+<p>This test checks the behavior of the absolutely positioned elements with a grid container as parent.</p>
+
+<div class="container relative">
+    <div class="grid">
+        <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+    </div>
+</div>
+
+<div class="container relative">
+    <div class="grid">
+        <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+    </div>
+</div>
+
+<div class="container relative">
+    <div class="grid">
+        <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+    </div>
+</div>
+
+<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>
+</div>
+
+<div class="container">
+    <div class="grid relative">
+        <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid relative">
+        <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="65" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html b/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html
new file mode 100644 (file)
index 0000000..c0f4103
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+    width: 400px;
+    height: 300px;
+    border: 5px solid black;
+    margin: 30px;
+    padding: 15px;
+    background-color: grey;
+}
+
+.container {
+    position: relative;
+    float: left;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.green {
+    background-color: green;
+}
+</style>
+<body>
+
+<p>This test checks that the background of positioned items is painted in the right position.</p>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+    <div class="grid"></div>
+    <div class="absolute green" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
+    <div class="absolute green" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
+    <div class="absolute green" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
+    <div class="absolute green" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html b/LayoutTests/fast/css-grid-layout/grid-positioned-items-background.html
new file mode 100644 (file)
index 0000000..cf6555d
--- /dev/null
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 50px 150px;
+    width: 400px;
+    height: 300px;
+    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;
+}
+
+.container {
+    position: relative;
+    float: left;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.grid > div {
+    background-color: green;
+}
+
+.lengthSize {
+    width: 50px;
+    height: 20px;
+}
+
+.percentageSize {
+    width: 50%;
+    height: 20%;
+}
+
+.offsetsSize {
+    left: 25px;
+    right: 30px;
+    top: 35px;
+    bottom: 40px;
+}
+
+.red {
+    background-color: red;
+}
+</style>
+<body>
+
+<p>This test checks that the background of positioned items is painted in the right position.</p>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+    <div class="absolute red" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
+    <div class="absolute red" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
+    <div class="absolute red" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
+    <div class="absolute red" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
+    <div class="grid">
+        <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+            style="left: 5px;">
+        </div>
+        <div class="absolute onlyFirstRowOnlySecondColumn lengthSize"
+            style="right: 10px;">
+        </div>
+        <div class="absolute onlySecondRowOnlyFirstColumn percentageSize"
+            style="top: 15px;">
+        </div>
+        <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt b/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-expected.txt
new file mode 100644 (file)
index 0000000..5807b83
--- /dev/null
@@ -0,0 +1,4 @@
+This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.
+
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt b/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line-expected.txt
new file mode 100644 (file)
index 0000000..052a56b
--- /dev/null
@@ -0,0 +1,4 @@
+This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as "auto".
+
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html b/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid-line.html
new file mode 100644 (file)
index 0000000..09144c7
--- /dev/null
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 50px 150px;
+    width: 500px;
+    height: 300px;
+    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;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.startImplicitLine {
+    background-color: blue;
+    -webkit-grid-column: 5;
+    -webkit-grid-row: 8;
+}
+
+.endImplicitLine {
+    background-color: orange;
+    -webkit-grid-column: 1 / 5;
+    -webkit-grid-row: 1 / 8;
+}
+
+.startImplicitLineSpan {
+    background-color: blue;
+    -webkit-grid-column: span 5;
+    -webkit-grid-row: span 8;
+}
+
+.endImplicitLineSpan {
+    background-color: orange;
+    -webkit-grid-column: 1 / span 5;
+    -webkit-grid-row: 1 / span 8;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as "auto".</p>
+
+<div class="grid">
+    <div class="absolute sizedToGridArea startImplicitLine"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="absolute sizedToGridArea startImplicitLineSpan"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html b/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.html
new file mode 100644 (file)
index 0000000..d35ffa3
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    width: 200px;
+    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-columns-rows {
+    -webkit-grid-template-columns: 100px;
+    -webkit-grid-template-rows: 50px;
+}
+
+.absolute {
+    position: absolute;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.</p>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute secondRowSecondColumn"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+        data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+    </div>
+</div>
+
+<div class="grid grid-columns-rows">
+    <div class="sizedToGridArea absolute secondRowSecondColumn"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+    <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+        data-offset-x="15" data-offset-y="15" data-expected-width="230" data-expected-height="230">
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt b/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line-expected.txt
new file mode 100644 (file)
index 0000000..8d99806
--- /dev/null
@@ -0,0 +1,3 @@
+This test checks that grid placement properties of absolutely positioned items using unknown named grid lines are treated as "auto".
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html b/LayoutTests/fast/css-grid-layout/grid-positioned-items-unknown-named-grid-line.html
new file mode 100644 (file)
index 0000000..4c6f4d2
--- /dev/null
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 50px 150px;
+    width: 500px;
+    height: 300px;
+    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;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.startUnknownLine {
+    background-color: blue;
+    -webkit-grid-column: foo / 3;
+    -webkit-grid-row: bar / 3;
+}
+
+.endUnknownLine {
+    background-color: orange;
+    -webkit-grid-column: 1 / foo;
+    -webkit-grid-row: 1 / bar;
+}
+
+.startAndEndUnknownLines {
+    background-color: green;
+    -webkit-grid-column: foo / bar;
+    -webkit-grid-row: foo / bar;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid placement properties of absolutely positioned items using unknown named grid lines are treated as "auto".</p>
+
+<div class="grid">
+    <div class="absolute sizedToGridArea startAndEndUnknownLines"
+        data-offset-x="15" data-offset-y="15" 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">
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt b/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items-expected.txt
new file mode 100644 (file)
index 0000000..3ae8d8b
--- /dev/null
@@ -0,0 +1,6 @@
+This test checks the different size options for absolutely positioned grid items.
+
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html b/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.html
new file mode 100644 (file)
index 0000000..61a21cb
--- /dev/null
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 50px 150px;
+    width: 100%;
+    height: 100%;
+    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;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.lengthSize {
+    width: 50px;
+    height: 20px;
+}
+
+.percentageSize {
+    width: 40%;
+    height: 20%;
+}
+
+.offsets {
+    left: 5px;
+    right: 10px;
+    top: 15px;
+    bottom: 20px;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks the different size options for absolutely positioned grid items.</p>
+
+<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">
+        </div>
+        <div class="absolute secondRowSecondColumn sizedToGridArea"
+            data-offset-x="115" data-offset-y="65" data-expected-width="915" data-expected-height="965">
+        </div>
+        <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+            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">
+        </div>
+    </div>
+</div>
+
+<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">
+        </div>
+        <div class="absolute secondRowSecondColumn lengthSize"
+            data-offset-x="115" data-offset-y="65" data-expected-width="50" data-expected-height="20">
+        </div>
+        <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
+            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">
+        </div>
+    </div>
+</div>
+
+<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">
+        </div>
+        <div class="absolute secondRowSecondColumn percentageSize"
+            data-offset-x="115" data-offset-y="65" data-expected-width="366" 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">
+        </div>
+        <div class="absolute endSecondRowEndSecondColumn percentageSize"
+            data-offset-x="15" data-offset-y="15" data-expected-width="126" data-expected-height="43">
+        </div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="absolute autoRowAutoColumn offsets"
+            data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995">
+        </div>
+        <div class="absolute secondRowSecondColumn offsets"
+            data-offset-x="120" data-offset-y="80" data-expected-width="900" data-expected-height="930">
+        </div>
+        <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
+            data-offset-x="20" data-offset-y="30" data-expected-width="85" data-expected-height="15">
+        </div>
+        <div class="absolute endSecondRowEndSecondColumn offsets"
+            data-offset-x="5" data-offset-y="15" data-expected-width="300" data-expected-height="180">
+        </div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt b/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks-expected.txt
new file mode 100644 (file)
index 0000000..2b40604
--- /dev/null
@@ -0,0 +1,3 @@
+This test checks that positioned items shouldn't create implicit tracks on the grid.
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html b/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html
new file mode 100644 (file)
index 0000000..31bf7ae
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-auto-columns: 100px;
+    -webkit-grid-auto-rows: 50px;
+    width: 400px;
+    height: 300px;
+    /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.seventhRowFourthColumn {
+    background-color: coral;
+    -webkit-grid-column: 4;
+    -webkit-grid-row: 7;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that positioned items shouldn't create implicit tracks on the grid.</p>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute seventhRowFourthColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt b/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space-expected.txt
new file mode 100644 (file)
index 0000000..028f251
--- /dev/null
@@ -0,0 +1,18 @@
+This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.
+
+Absolutely positioned:
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+Fixed positioned:
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html b/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html
new file mode 100644 (file)
index 0000000..d83fcb2
--- /dev/null
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    -webkit-grid-template-columns: 50px 100px;
+    -webkit-grid-template-rows: 50px 100px;
+    width: 150px;
+    height: 150px;
+    /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+    position: relative;
+    /* Ensures that the grid container is the containing block of the fixed positioned grid children. */
+    transform: translate(10px, 20px);
+}
+
+.absolute {
+    position: absolute;
+}
+
+.fixed {
+    position: fixed;
+}
+
+.offsetLeft100 {
+    left: 100px;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.</p>
+
+<p>Absolutely positioned:</p>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
+        data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea absolute autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
+        data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+        <div class="sizedToGridArea absolute autoRowAutoColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+        </div>
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+        <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
+            data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+        </div>
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+    </div>
+</div>
+
+<p>Fixed positioned:</p>
+
+<div class="grid">
+    <div class="sizedToGridArea fixed autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
+        data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea fixed autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
+        data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+        <div class="sizedToGridArea fixed autoRowAutoColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+        </div>
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+    </div>
+</div>
+
+<div class="grid">
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+        <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
+            data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+        </div>
+    </div>
+    <div class="sizedToGridArea autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+    </div>
+</div>
+
+</body>
+</html>
index a3dfe60fa5b7d57c709ec1bd3899a430ad89bcc3..46f42c62ce6212b622e10ee4cac84ebaa116d7e5 100644 (file)
     -webkit-grid-row: 1;
 }
 
+.onlyFirstRowOnlyFirstColumn {
+    background-color: blue;
+    -webkit-grid-column: 1 / 2;
+    -webkit-grid-row: 1 / 2;
+}
+
 .firstRowSecondColumn {
     background-color: lime;
     -webkit-grid-column: 2;
     -webkit-grid-row: 1;
 }
 
+.onlyFirstRowOnlySecondColumn {
+    background-color: lime;
+    -webkit-grid-column: 2 / 3;
+    -webkit-grid-row: 1 / 2;
+}
+
 .firstRowThirdColumn {
     background-color: magenta;
     -webkit-grid-column: 3;
     -webkit-grid-row: 2;
 }
 
+.onlySecondRowOnlyFirstColumn {
+    background-color: purple;
+    -webkit-grid-column: 1 / 2;
+    -webkit-grid-row: 2 / 3;
+}
+
 .secondRowSecondColumn {
     background-color: orange;
     -webkit-grid-column: 2;
     -webkit-grid-row: 2;
 }
 
+.onlySecondRowOnlySecondColumn {
+    background-color: orange;
+    -webkit-grid-column: 2 / 3;
+    -webkit-grid-row: 2 / 3;
+}
+
+.endSecondRowEndSecondColumn {
+    background-color: orange;
+    -webkit-grid-column-end: 3;
+    -webkit-grid-row-end: 3;
+}
+
 .secondRowThirdColumn {
     background-color: navy;
     -webkit-grid-column: 3;
index 00edd4d4b13731a00dc13564d14e71ea11658b87..dc22ba4c3355f9be753900a0959bf0361313619b 100644 (file)
@@ -1,3 +1,84 @@
+2015-11-05  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Support positioned grid children
+        https://bugs.webkit.org/show_bug.cgi?id=150837
+
+        Reviewed by Darin Adler.
+
+        According to the spec positioned grid children have
+        a special behavior described at:
+        https://drafts.csswg.org/css-grid/#abspos
+
+        The idea is that for positioned children the containing block will
+        correspond to the padding edges of the grid container, unless the
+        grid placement properties are defined.
+        This not only affects to positioned grid items (direct children) but
+        also to any descendant where the containing block is the grid container.
+
+        In order to manage this special behavior, the patch is overriding
+        RenderBlock::layoutPositionedObject() to calculate the position and size
+        depending on the grid-placement properties.
+
+        RenderBox class has some changes to calculate the containing block width
+        and height for positioned objects (using the override value). And also
+        to compute their static position.
+
+        Finally, the positioned items are not taken into account in all the
+        different grid methods, in order that they do not interfere the layout
+        of the grid as stated in the spec.
+
+        Tests: 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-background.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
+               fast/css-grid-layout/positioned-grid-items-should-not-create-implicit-tracks.html
+               fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html
+
+        * rendering/OrderIterator.cpp:
+        (WebCore::OrderIterator::next): Fix method to avoid issues if no items
+        are added to the iterator.
+        * rendering/RenderBlock.h: Mark layoutPositionedObject() as virtual.
+        * rendering/RenderBox.cpp: Add new maps for inline/block extra offsets.
+        (WebCore::RenderBox::~RenderBox): Clear the new maps.
+        (WebCore::RenderBox::extraInlineOffset): Extra offset that we need to
+        apply to positioned grid children due to the grid placement properties.
+        (WebCore::RenderBox::extraBlockOffset): Ditto.
+        (WebCore::RenderBox::setExtraInlineOffset):
+        (WebCore::RenderBox::setExtraBlockOffset):
+        (WebCore::RenderBox::clearExtraInlineAndBlockOffests):
+        (WebCore::RenderBox::containingBlockLogicalWidthForPositioned): Use the
+        override containing block if any.
+        (WebCore::RenderBox::containingBlockLogicalHeightForPositioned): Ditto.
+        (WebCore::RenderBox::computePositionedLogicalWidth): Add the extra
+        offset if it's a positioned element.
+        (WebCore::RenderBox::computePositionedLogicalHeight): Ditto.
+        * rendering/RenderBox.h:
+        (WebCore::RenderBox::scrollbarLogicalWidth): Add utility method.
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::layoutBlock): Clear grid after layout positioned
+        objects instead of at the end of layoutGridItems().
+        (WebCore::RenderGrid::placeItemsOnGrid): Ignore positioned items.
+        (WebCore::RenderGrid::populateExplicitGridAndOrderIterator): Ditto.
+        (WebCore::RenderGrid::layoutGridItems): Ditto.
+        (WebCore::RenderGrid::prepareChildForPositionedLayout): Set static
+        position for positioned items.
+        (WebCore::RenderGrid::layoutPositionedObject): Calculate position and
+        size for positioned children.
+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild): Calculate
+        extra offset and breadth for positioned children.
+        * rendering/RenderGrid.h:
+        * rendering/style/GridResolvedPosition.cpp:
+        (WebCore::GridResolvedPosition::isNonExistentNamedLineOrArea): Make it a
+        public static method.
+        (WebCore::GridUnresolvedSpan::adjustGridPositionsFromStyle): Fix calls
+        to isNonExistentNamedLineOrArea().
+        (WebCore::resolveGridPositionFromStyle): Ditto.
+        * rendering/style/GridResolvedPosition.h: Make
+        isNonExistentNamedLineOrArea() public.
+
 2015-11-04  Jiewen Tan  <jiewen_tan@apple.com>
 
         Null dereference loading Blink layout test editing/execCommand/delete-hidden-crash.html
index a3898677f63adcb046b7628395d5e52d9a3a631b..656db3603d35af8ebd07911c110a9caf7953b70e 100644 (file)
@@ -59,16 +59,14 @@ RenderBox* OrderIterator::next()
             continue;
         }
 
-        if (m_orderIndex == endIndex)
-            return nullptr;
-
-        if (m_orderIndex != cInvalidIndex) {
+        if (m_orderIndex != cInvalidIndex)
             ++m_orderIndex;
-            if (m_orderIndex == endIndex)
-                return nullptr;
-        } else
+        else
             m_orderIndex = 0;
 
+        if (m_orderIndex == endIndex)
+            return nullptr;
+
         m_currentChild = m_containerBox.firstChildBox();
     } while (!m_currentChild || m_currentChild->style().order() != m_orderValues[m_orderIndex]);
 
index 5bd2e2d7852390a07631c0f264914214b4448903..ce97172f6d9e20591f07c54764093e5dcbb74e1b 100644 (file)
@@ -313,7 +313,7 @@ protected:
     virtual void layout() override;
 
     void layoutPositionedObjects(bool relayoutChildren, bool fixedPositionObjectsOnly = false);
-    void layoutPositionedObject(RenderBox&, bool relayoutChildren, bool fixedPositionObjectsOnly);
+    virtual void layoutPositionedObject(RenderBox&, bool relayoutChildren, bool fixedPositionObjectsOnly);
     
     void markFixedPositionObjectForLayoutIfNeeded(RenderObject& child);
 
index 25eb8c2d867d3d77a4d4eef6e98948d8e2270109..2e0c7626442c20be47db78bc7ef1b1079fdb356e 100644 (file)
@@ -95,6 +95,8 @@ static OverrideSizeMap* gOverrideWidthMap = nullptr;
 typedef WTF::HashMap<const RenderBox*, Optional<LayoutUnit>> OverrideOptionalSizeMap;
 static OverrideOptionalSizeMap* gOverrideContainingBlockLogicalHeightMap = nullptr;
 static OverrideOptionalSizeMap* gOverrideContainingBlockLogicalWidthMap = nullptr;
+static OverrideSizeMap* gExtraInlineOffsetMap = nullptr;
+static OverrideSizeMap* gExtraBlockOffsetMap = nullptr;
 #endif
 
 // Size of border belt for autoscroll. When mouse pointer in border belt,
@@ -141,6 +143,7 @@ RenderBox::~RenderBox()
     clearOverrideSize();
 #if ENABLE(CSS_GRID_LAYOUT)
     clearContainingBlockOverrideSize();
+    clearExtraInlineAndBlockOffests();
 #endif
 
     RenderBlock::removePercentHeightDescendantIfNeeded(*this);
@@ -1137,6 +1140,38 @@ void RenderBox::clearOverrideContainingBlockContentLogicalHeight()
     if (gOverrideContainingBlockLogicalHeightMap)
         gOverrideContainingBlockLogicalHeightMap->remove(this);
 }
+
+LayoutUnit RenderBox::extraInlineOffset() const
+{
+    return gExtraInlineOffsetMap ? gExtraInlineOffsetMap->get(this) : LayoutUnit();
+}
+
+LayoutUnit RenderBox::extraBlockOffset() const
+{
+    return gExtraBlockOffsetMap ? gExtraBlockOffsetMap->get(this) : LayoutUnit();
+}
+
+void RenderBox::setExtraInlineOffset(LayoutUnit inlineOffest)
+{
+    if (!gExtraInlineOffsetMap)
+        gExtraInlineOffsetMap = new OverrideSizeMap;
+    gExtraInlineOffsetMap->set(this, inlineOffest);
+}
+
+void RenderBox::setExtraBlockOffset(LayoutUnit blockOffest)
+{
+    if (!gExtraBlockOffsetMap)
+        gExtraBlockOffsetMap = new OverrideSizeMap;
+    gExtraBlockOffsetMap->set(this, blockOffest);
+}
+
+void RenderBox::clearExtraInlineAndBlockOffests()
+{
+    if (gExtraInlineOffsetMap)
+        gExtraInlineOffsetMap->remove(this);
+    if (gExtraBlockOffsetMap)
+        gExtraBlockOffsetMap->remove(this);
+}
 #endif // ENABLE(CSS_GRID_LAYOUT)
 
 LayoutUnit RenderBox::adjustBorderBoxLogicalWidthForBoxSizing(LayoutUnit width) const
@@ -3170,6 +3205,13 @@ LayoutUnit RenderBox::containingBlockLogicalWidthForPositioned(const RenderBoxMo
     if (checkForPerpendicularWritingMode && containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
         return containingBlockLogicalHeightForPositioned(containingBlock, false);
 
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (hasOverrideContainingBlockLogicalWidth()) {
+        if (auto overrideLogicalWidth = overrideContainingBlockContentLogicalWidth())
+            return overrideLogicalWidth.value();
+    }
+#endif
+
     if (is<RenderBox>(*containingBlock)) {
         bool isFixedPosition = style().position() == FixedPosition;
 
@@ -3233,6 +3275,13 @@ LayoutUnit RenderBox::containingBlockLogicalHeightForPositioned(const RenderBoxM
     if (checkForPerpendicularWritingMode && containingBlock->isHorizontalWritingMode() != isHorizontalWritingMode())
         return containingBlockLogicalWidthForPositioned(containingBlock, nullptr, false);
 
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (hasOverrideContainingBlockLogicalHeight()) {
+        if (auto overrideLogicalHeight = overrideContainingBlockContentLogicalHeight())
+            return overrideLogicalHeight.value();
+    }
+#endif
+
     if (containingBlock->isBox()) {
         bool isFixedPosition = style().position() == FixedPosition;
 
@@ -3431,6 +3480,11 @@ void RenderBox::computePositionedLogicalWidth(LogicalExtentComputedValues& compu
         }
     }
 
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (!style().hasStaticInlinePosition(isHorizontal))
+        computedValues.m_position += extraInlineOffset();
+#endif
+
     computedValues.m_extent += bordersPlusPadding;
     
     // Adjust logicalLeft if we need to for the flipped version of our writing mode in regions.
@@ -3750,6 +3804,11 @@ void RenderBox::computePositionedLogicalHeight(LogicalExtentComputedValues& comp
         }
     }
 
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (!style().hasStaticBlockPosition(isHorizontalWritingMode()))
+        computedValues.m_position += extraBlockOffset();
+#endif
+
     // Set final height value.
     computedValues.m_extent += bordersPlusPadding;
     
index 52817e877222ab651d8653281a32e2eb8729d3bf..f6894f44deaa2b8fab83dd8c5f07a079a488b24f 100644 (file)
@@ -326,6 +326,11 @@ public:
     void setOverrideContainingBlockContentLogicalHeight(Optional<LayoutUnit>);
     void clearContainingBlockOverrideSize();
     void clearOverrideContainingBlockContentLogicalHeight();
+    LayoutUnit extraInlineOffset() const;
+    LayoutUnit extraBlockOffset() const;
+    void setExtraInlineOffset(LayoutUnit);
+    void setExtraBlockOffset(LayoutUnit);
+    void clearExtraInlineAndBlockOffests();
 #endif
 
     virtual LayoutSize offsetFromContainer(RenderElement&, const LayoutPoint&, bool* offsetDependsOnPoint = nullptr) const override;
@@ -449,6 +454,7 @@ public:
     virtual int verticalScrollbarWidth() const;
     int horizontalScrollbarHeight() const;
     int intrinsicScrollbarLogicalWidth() const;
+    int scrollbarLogicalWidth() const { return style().isHorizontalWritingMode() ? verticalScrollbarWidth() : horizontalScrollbarHeight(); }
     int scrollbarLogicalHeight() const { return style().isHorizontalWritingMode() ? horizontalScrollbarHeight() : verticalScrollbarWidth(); }
     virtual bool scroll(ScrollDirection, ScrollGranularity, float multiplier = 1, Element** stopElement = nullptr, RenderBox* startBox = nullptr, const IntPoint& wheelEventAbsolutePoint = IntPoint());
     virtual bool logicalScroll(ScrollLogicalDirection, ScrollGranularity, float multiplier = 1, Element** stopElement = nullptr);
index 4bd8b3032f3e9b5eca0508f093f262316fffeb6e..86ac6da8a6ad05566d8a55e36ce8c28937c7ba47 100644 (file)
@@ -322,6 +322,8 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
 
     layoutPositionedObjects(relayoutChildren || isDocumentElementRenderer());
 
+    clearGrid();
+
     computeOverflow(oldClientAfterEdge);
     statePusher.pop();
 
@@ -1050,6 +1052,9 @@ void RenderGrid::placeItemsOnGrid()
     Vector<RenderBox*> autoMajorAxisAutoGridItems;
     Vector<RenderBox*> specifiedMajorAxisAutoGridItems;
     for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
+        if (child->isOutOfFlowPositioned())
+            continue;
+
         auto unresolvedRowPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), *child, ForRows);
         auto unresolvedColumnPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), *child, ForColumns);
 
@@ -1082,6 +1087,9 @@ void RenderGrid::populateExplicitGridAndOrderIterator()
     unsigned maximumColumnIndex = std::max<unsigned>(1, GridResolvedPosition::explicitGridColumnCount(style()));
 
     for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+        if (child->isOutOfFlowPositioned())
+            continue;
+
         populator.collectChild(*child);
 
         auto unresolvedRowPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), *child, ForRows);
@@ -1286,6 +1294,11 @@ void RenderGrid::layoutGridItems()
     populateGridPositions(sizingData);
 
     for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+        if (child->isOutOfFlowPositioned()) {
+            prepareChildForPositionedLayout(*child);
+            continue;
+        }
+
         // Because the grid area cannot be styled, we don't need to adjust
         // the grid breadth to account for 'box-sizing'.
         Optional<LayoutUnit> oldOverrideContainingBlockContentLogicalWidth = child->hasOverrideContainingBlockLogicalWidth() ? child->overrideContainingBlockContentLogicalWidth() : LayoutUnit();
@@ -1336,8 +1349,96 @@ void RenderGrid::layoutGridItems()
         height = std::max(height, minHeight);
     }
     setLogicalHeight(height);
+}
 
-    clearGrid();
+void RenderGrid::prepareChildForPositionedLayout(RenderBox& child)
+{
+    ASSERT(child.isOutOfFlowPositioned());
+    child.containingBlock()->insertPositionedObject(child);
+
+    RenderLayer* childLayer = child.layer();
+    childLayer->setStaticInlinePosition(borderAndPaddingStart());
+    childLayer->setStaticBlockPosition(borderAndPaddingBefore());
+}
+
+void RenderGrid::layoutPositionedObject(RenderBox& child, bool relayoutChildren, bool fixedPositionObjectsOnly)
+{
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+    // FIXME: Properly support orthogonal writing mode.
+    if (!hasOrthogonalWritingMode) {
+        LayoutUnit columnOffset = LayoutUnit();
+        LayoutUnit columnBreadth = LayoutUnit();
+        offsetAndBreadthForPositionedChild(child, ForColumns, columnOffset, columnBreadth);
+        LayoutUnit rowOffset = LayoutUnit();
+        LayoutUnit rowBreadth = LayoutUnit();
+        offsetAndBreadthForPositionedChild(child, ForRows, rowOffset, rowBreadth);
+
+        child.setOverrideContainingBlockContentLogicalWidth(columnBreadth);
+        child.setOverrideContainingBlockContentLogicalHeight(rowBreadth);
+        child.setExtraInlineOffset(columnOffset);
+        child.setExtraBlockOffset(rowOffset);
+    }
+
+    RenderBlock::layoutPositionedObject(child, relayoutChildren, fixedPositionObjectsOnly);
+}
+
+void RenderGrid::offsetAndBreadthForPositionedChild(const RenderBox& child, GridTrackSizingDirection direction, LayoutUnit& offset, LayoutUnit& breadth)
+{
+    ASSERT(child.isHorizontalWritingMode() == isHorizontalWritingMode());
+
+    auto unresolvedPositions = GridResolvedPosition::unresolvedSpanFromStyle(style(), child, direction);
+    if (unresolvedPositions.requiresAutoPlacement()) {
+        offset = LayoutUnit();
+        breadth = (direction == ForColumns) ? clientLogicalWidth() : clientLogicalHeight();
+        return;
+    }
+
+    GridPosition startPosition = (direction == ForColumns) ? child.style().gridItemColumnStart() : child.style().gridItemRowStart();
+    GridPosition endPosition = (direction == ForColumns) ? child.style().gridItemColumnEnd() : child.style().gridItemRowEnd();
+    size_t lastTrackIndex = (direction == ForColumns ? gridColumnCount() : gridRowCount()) - 1;
+
+    GridSpan positions = GridResolvedPosition::resolveGridPositionsFromStyle(unresolvedPositions, style());
+    bool startIsAuto = startPosition.isAuto()
+        || (startPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(startPosition.namedGridLine(), style(), (direction == ForColumns) ? ColumnStartSide : RowStartSide))
+        || (positions.resolvedInitialPosition.toInt() > lastTrackIndex);
+    bool endIsAuto = endPosition.isAuto()
+        || (endPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(endPosition.namedGridLine(), style(), (direction == ForColumns) ? ColumnEndSide : RowEndSide))
+        || (positions.resolvedFinalPosition.toInt() > lastTrackIndex);
+
+    GridResolvedPosition firstPosition = GridResolvedPosition(0);
+    GridResolvedPosition initialPosition = startIsAuto ? firstPosition : positions.resolvedInitialPosition;
+    GridResolvedPosition lastPosition = GridResolvedPosition(lastTrackIndex);
+    GridResolvedPosition finalPosition = endIsAuto ? lastPosition : positions.resolvedFinalPosition;
+
+    // Positioned children do not grow the grid, so we need to clamp the positions to avoid ending up outside of it.
+    initialPosition = std::min<GridResolvedPosition>(initialPosition, lastPosition);
+    finalPosition = std::min<GridResolvedPosition>(finalPosition, lastPosition);
+
+    LayoutUnit start = startIsAuto ? LayoutUnit() : (direction == ForColumns) ?  m_columnPositions[initialPosition.toInt()] : m_rowPositions[initialPosition.toInt()];
+    LayoutUnit end = endIsAuto ? (direction == ForColumns) ? logicalWidth() : logicalHeight() : (direction == ForColumns) ?  m_columnPositions[finalPosition.next().toInt()] : m_rowPositions[finalPosition.next().toInt()];
+
+    breadth = end - start;
+
+    if (startIsAuto)
+        breadth -= (direction == ForColumns) ? borderStart() : borderBefore();
+    else
+        start -= ((direction == ForColumns) ? borderStart() : borderBefore());
+
+    if (endIsAuto) {
+        breadth -= (direction == ForColumns) ? borderEnd() : borderAfter();
+        breadth -= scrollbarLogicalWidth();
+    }
+
+    offset = start;
+
+    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 (direction == ForColumns)
+            childLayer->setStaticInlinePosition(borderStart() + offset);
+        else
+            childLayer->setStaticBlockPosition(borderBefore() + offset);
+    }
 }
 
 GridCoordinate RenderGrid::cachedGridCoordinate(const RenderBox& gridItem) const
index 0c40e07fe459ed59d3aaf4c0df8fcacf615b500a..8185f56a91318db2f6c2914a4435871e3eaca869 100644 (file)
@@ -88,6 +88,9 @@ private:
     GridTrackSizingDirection autoPlacementMinorAxisDirection() const;
 
     void layoutGridItems();
+    void prepareChildForPositionedLayout(RenderBox&);
+    void layoutPositionedObject(RenderBox&, bool relayoutChildren, bool fixedPositionObjectsOnly) override;
+    void offsetAndBreadthForPositionedChild(const RenderBox&, GridTrackSizingDirection, LayoutUnit& offset, LayoutUnit& breadth);
     void populateGridPositions(GridSizingData&);
     void clearGrid();
 
index 22a84b2443c427c246efe859e3ec4c13aafa6403..faf075d026dd7a260a5de186334185034a230125 100644 (file)
@@ -58,7 +58,7 @@ static const String implicitNamedGridLineForSide(const String& lineName, GridPos
     return lineName + (isStartSide(side) ? "-start" : "-end");
 }
 
-static bool isNonExistentNamedLineOrArea(const String& lineName, const RenderStyle& style, GridPositionSide side)
+bool GridResolvedPosition::isNonExistentNamedLineOrArea(const String& lineName, const RenderStyle& style, GridPositionSide side)
 {
     const NamedGridLinesMap& gridLineNames = gridLinesForSide(style, side);
     return !gridLineNames.contains(implicitNamedGridLineForSide(lineName, side)) && !gridLineNames.contains(lineName);
@@ -81,10 +81,10 @@ void GridUnresolvedSpan::adjustGridPositionsFromStyle(const RenderStyle& gridCon
     // Try to early detect the case of non existing named grid lines. This way we could assume later that
     // GridResolvedPosition::resolveGrisPositionFromStyle() won't require the autoplacement to run, i.e., it'll always return a
     // valid resolved position.
-    if (m_initialPosition.isNamedGridArea() && isNonExistentNamedLineOrArea(m_initialPosition.namedGridLine(), gridContainerStyle, m_initialPositionSide))
+    if (m_initialPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(m_initialPosition.namedGridLine(), gridContainerStyle, m_initialPositionSide))
         m_initialPosition.setAutoPosition();
 
-    if (m_finalPosition.isNamedGridArea() && isNonExistentNamedLineOrArea(m_finalPosition.namedGridLine(), gridContainerStyle, m_finalPositionSide))
+    if (m_finalPosition.isNamedGridArea() && GridResolvedPosition::isNonExistentNamedLineOrArea(m_finalPosition.namedGridLine(), gridContainerStyle, m_finalPositionSide))
         m_finalPosition.setAutoPosition();
 
     // If the grid item has an automatic position and a grid span for a named line in a given dimension, instead treat the grid span as one.
@@ -272,7 +272,7 @@ static GridResolvedPosition resolveGridPositionFromStyle(const RenderStyle& grid
         // ''<custom-ident>-start (for grid-*-start) / <custom-ident>-end'' (for grid-*-end), contributes the first such
         // line to the grid item's placement.
         String namedGridLine = position.namedGridLine();
-        ASSERT(!isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
+        ASSERT(!GridResolvedPosition::isNonExistentNamedLineOrArea(namedGridLine, gridContainerStyle, side));
 
         const NamedGridLinesMap& gridLineNames = gridLinesForSide(gridContainerStyle, side);
         auto implicitLine = gridLineNames.find(implicitNamedGridLineForSide(namedGridLine, side));
index 9752b360f06e6a8dd828abf7402f42b9379fa547..c607f30a4d18ce5b2dcbba83e300c876692d555b 100644 (file)
@@ -138,6 +138,7 @@ public:
     static GridUnresolvedSpan unresolvedSpanFromStyle(const RenderStyle&, const RenderBox&, GridTrackSizingDirection);
     static unsigned explicitGridColumnCount(const RenderStyle&);
     static unsigned explicitGridRowCount(const RenderStyle&);
+    static bool isNonExistentNamedLineOrArea(const String& lineName, const RenderStyle&, GridPositionSide);
 
 private:
     unsigned m_integerPosition;