[CSS Grid Layout] Support for align-self and align-items in grid layout
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 26 Apr 2015 22:44:11 +0000 (22:44 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 26 Apr 2015 22:44:11 +0000 (22:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=133225

Reviewed by Darin Adler.

Source/WebCore:

Implementation of align-self and align-items properties for grid. It supports
different writing-modes and direction. Margins, borders and paddings are also
considered when computing the final position and stretched size.

Overflow handling is still missing and will be added when implemented row-axis
alignment support.

Test: fast/css-grid-layout/grid-align.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalHeight):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::logicalContentHeightForChild):
(WebCore::RenderGrid::layoutGridItems):
(WebCore::computeOverflowAlignmentOffset):
(WebCore::RenderGrid::endOfRowForChild):
(WebCore::RenderGrid::startOfRowForChild):
(WebCore::RenderGrid::centeredRowPositionForChild):
(WebCore::marginWidthForChild):
(WebCore::marginHeightForChild):
(WebCore::RenderGrid::allowedToStretchLogicalHeightForChild):
(WebCore::RenderGrid::needToStretchChildLogicalHeight):
(WebCore::RenderGrid::marginLogicalHeightForChild):
(WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
(WebCore::RenderGrid::rowPositionForChild):
(WebCore::RenderGrid::findChildLogicalPosition):
(WebCore::RenderGrid::populateGridPositions): Deleted.
* rendering/RenderGrid.h:

LayoutTests:

Implementation of align-self and align-items properties ifor grid.

Several layout tests were touched for adapting them to the new grid item's
column-axis position when using RTL direction.

* fast/css-grid-layout/grid-align-expected.txt: Added.
* fast/css-grid-layout/grid-align.html: Added.
* fast/css-grid-layout/grid-element-border-grid-item.html:
* fast/css-grid-layout/grid-element-border-padding-grid-item.html:
* fast/css-grid-layout/grid-element-padding-grid-item.html:
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html:
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html:
* fast/css-grid-layout/grid-item-margin-resolution.html:

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

13 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-align-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html
LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html
LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html
LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html
LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index 8d4988f..b37052f 100644 (file)
@@ -1,3 +1,24 @@
+2015-04-26  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Support for align-self and align-items in grid layout
+        https://bugs.webkit.org/show_bug.cgi?id=133225
+
+        Reviewed by Darin Adler.
+
+        Implementation of align-self and align-items properties ifor grid.
+
+        Several layout tests were touched for adapting them to the new grid item's
+        column-axis position when using RTL direction.
+
+        * fast/css-grid-layout/grid-align-expected.txt: Added.
+        * fast/css-grid-layout/grid-align.html: Added.
+        * fast/css-grid-layout/grid-element-border-grid-item.html:
+        * fast/css-grid-layout/grid-element-border-padding-grid-item.html:
+        * fast/css-grid-layout/grid-element-padding-grid-item.html:
+        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html:
+        * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html:
+        * fast/css-grid-layout/grid-item-margin-resolution.html:
+
 2015-04-26  Doug Russell  <d_russell@apple.com>
 
         AX: richer text change notifications (142719)
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-expected.txt b/LayoutTests/fast/css-grid-layout/grid-align-expected.txt
new file mode 100644 (file)
index 0000000..5ec7e80
--- /dev/null
@@ -0,0 +1,18 @@
+This test checks that the align-self property is applied correctly.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-align.html b/LayoutTests/fast/css-grid-layout/grid-align.html
new file mode 100644 (file)
index 0000000..663698c
--- /dev/null
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    -webkit-grid-template-columns: 100px 100px;
+    -webkit-grid-template-rows: 200px 200px;
+    width: -webkit-fit-content;
+    margin-bottom: 20px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+.item {
+    width: 8px;
+    height: 16px;
+    background: black;
+}
+
+.alignSelfAuto {
+    align-self: auto;
+}
+
+.alignSelfStretch {
+    align-self: stretch;
+}
+
+.alignSelfStart {
+    align-self: start;
+}
+
+.alignSelfEnd {
+    align-self: end;
+}
+
+.alignSelfCenter {
+    align-self: center;
+}
+
+.alignSelfRight {
+    align-self: right;
+}
+
+.alignSelfLeft {
+    align-self: left;
+}
+
+.alignSelfFlexStart {
+    align-self: flex-start;
+}
+
+.alignSelfFlexEnd {
+    align-self: flex-end;
+}
+
+.alignSelfSelfStart {
+    align-self: self-start;
+}
+
+.alignSelfSelfEnd {
+    align-self: self-end;
+}
+
+.alignItemsCenter {
+    align-items: center;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the align-self property is applied correctly.</p>
+
+<div style="position: relative">
+    <div class="grid" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid" data-expected-width="200" data-expected-height="400">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Default alignment and initial values. -->
+<div style="position: relative">
+    <div class="grid alignItemsCenter" data-expected-width="200" data-expected-height="400">
+        <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow direction). -->
+<div style="position: relative">
+     <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="80" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="80" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<div style="position: relative">
+     <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+         <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="80" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
+<div style="position: relative">
+     <div class="grid" data-expected-width="200" data-expected-height="400">
+         <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfRight secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<div style="position: relative">
+     <div class="grid" data-expected-width="200" data-expected-height="400">
+         <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- Vertical RL writing mode. -->
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode. -->
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfRight secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfLeft secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" data-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
index 87b7dea..6c49c54 100644 (file)
 
 <div style="position: relative">
     <div class="grid" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
-<!-- rtl direciton -->
+<!-- rtl direction -->
 <div style="position: relative">
     <div class="grid directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
index 2f4eb78..2ab3452 100644 (file)
 
 <div style="position: relative">
     <div class="grid" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <!-- rtl direciton -->
 <div style="position: relative">
     <div class="grid directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
index db6e541..50e7a07 100644 (file)
 
 <div style="position: relative">
     <div class="grid" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <!-- rtl direciton -->
 <div style="position: relative">
     <div class="grid directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT directionRTL" data-expected-width="280" data-expected-height="260">
-        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
-        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="100" data-expected-height="100"></div>
     </div>
 </div>
 
index b4b3b87..ec28d00 100644 (file)
 
 <div class="testContainer">
     <div class="grid gridLong">
-        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 20px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="left: 0px"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 60px;"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 60px;"></div>
     </div>
 </div>
 
 <div class="testContainer">
     <div class="grid gridShort">
-        <div class="gridItem firstRowFirstColumn"   style="top: 20px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="left: 20px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="top: 60px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 20px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="left: 0px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 60px;"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 60px;"></div>
     </div>
 </div>
 
 <div class="testContainer">
     <div class="grid gridLong">
-        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 80px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 20px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 80px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="left: 0px; top: 80px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 0px; top: 20px;"></div>
     </div>
 </div>
 
 <div class="testContainer">
     <div class="grid gridShort">
-        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="left: 20px; top: 40px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="left: 0px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 20px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="left: 20px; top: 60px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="left: 0px; top: 40px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 0px;"></div>
     </div>
 </div>
 
index 7e65577..1caad2f 100644 (file)
 
 <div class="testContainer">
     <div class="grid gridLong">
-        <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="left: 160px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 80px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 80px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 20px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 80px;"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div>
     </div>
 </div>
 
 <div class="testContainer">
     <div class="grid gridShort">
-        <div class="gridItem firstRowFirstColumn"   style="left: 180px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 60px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 20px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 60px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="left: 180px; top: 60px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="left: 180px; top: 0px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 160px; top: 40px;"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 160px; top: 0px;"></div>
     </div>
 </div>
 
 <div class="testContainer">
     <div class="grid gridLong">
-        <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="left: 20px;"></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 80px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="top: 80px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="top: 20px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 80px"></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div>
     </div>
 </div>
 
 <div class="testContainer">
     <div class="grid gridShort">
-        <div class="gridItem firstRowFirstColumn"   style="top: 0px;"></div>
-        <div class="gridItem firstRowSecondColumn"  style="top: 60px;"></div>
-        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 20px;" ></div>
-        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 60px;"></div>
+        <div class="gridItem firstRowFirstColumn"   style="top: 60px;"></div>
+        <div class="gridItem firstRowSecondColumn"  style="top: 0px;"></div>
+        <div class="gridItem secondRowFirstColumn"  style="left: 20px; top: 40px;" ></div>
+        <div class="gridItem secondRowSecondColumn" style="left: 20px; top: 0px;"></div>
     </div>
 </div>
index 57b2da6..8e922dd 100644 (file)
 <!-- rtl direction -->
 <div style="position: relative">
     <div class="grid directionRTL" data-expected-width="200" data-expected-height="200">
-        <div class="gridItem firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem firstRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalRL directionRTL" data-expected-width="200" data-expected-height="200">
-        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem firstRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid verticalLR directionRTL" data-expected-width="200" data-expected-height="200">
-        <div class="gridItem firstRowFirstColumn" data-offset-x="50" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowSecondColumn" data-offset-x="150" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowFirstColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowSecondColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid horizontalBT directionRTL" data-expected-width="200" data-expected-height="200">
-        <div class="gridItem firstRowFirstColumn" data-offset-x="30" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem firstRowSecondColumn" data-offset-x="130" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
-        <div class="gridItem secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowFirstColumn" data-offset-x="150" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowFirstColumn" data-offset-x="150" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="20" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
index 81f8743..c3413e9 100644 (file)
@@ -1,3 +1,40 @@
+2015-04-26  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Support for align-self and align-items in grid layout
+        https://bugs.webkit.org/show_bug.cgi?id=133225
+
+        Reviewed by Darin Adler.
+
+        Implementation of align-self and align-items properties for grid. It supports
+        different writing-modes and direction. Margins, borders and paddings are also
+        considered when computing the final position and stretched size.
+
+        Overflow handling is still missing and will be added when implemented row-axis
+        alignment support.
+
+        Test: fast/css-grid-layout/grid-align.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::computeLogicalHeight):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::logicalContentHeightForChild):
+        (WebCore::RenderGrid::layoutGridItems):
+        (WebCore::computeOverflowAlignmentOffset):
+        (WebCore::RenderGrid::endOfRowForChild):
+        (WebCore::RenderGrid::startOfRowForChild):
+        (WebCore::RenderGrid::centeredRowPositionForChild):
+        (WebCore::marginWidthForChild):
+        (WebCore::marginHeightForChild):
+        (WebCore::RenderGrid::allowedToStretchLogicalHeightForChild):
+        (WebCore::RenderGrid::needToStretchChildLogicalHeight):
+        (WebCore::RenderGrid::marginLogicalHeightForChild):
+        (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching):
+        (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
+        (WebCore::RenderGrid::rowPositionForChild):
+        (WebCore::RenderGrid::findChildLogicalPosition):
+        (WebCore::RenderGrid::populateGridPositions): Deleted.
+        * rendering/RenderGrid.h:
+
 2015-04-26  Doug Russell  <d_russell@apple.com>
 
         AX: richer text change notifications (142719)
index 7038d70..fa0a7b6 100644 (file)
@@ -2712,7 +2712,7 @@ void RenderBox::computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logica
         // grab our cached flexible height.
         // FIXME: Account for block-flow in flexible boxes.
         // https://bugs.webkit.org/show_bug.cgi?id=46418
-        if (hasOverrideLogicalContentHeight() && parent()->isFlexibleBoxIncludingDeprecated())
+        if (hasOverrideLogicalContentHeight() && (parent()->isFlexibleBoxIncludingDeprecated() || parent()->isRenderGrid()))
             h = Length(overrideLogicalContentHeight(), Fixed);
         else if (treatAsReplaced)
             h = Length(computeReplacedLogicalHeight(), Fixed);
index 8fbe8ce..4810e7c 100644 (file)
@@ -40,6 +40,8 @@ namespace WebCore {
 
 static const int infinity = -1;
 
+enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
+
 class GridTrack {
 public:
     GridTrack() {}
@@ -548,8 +550,11 @@ LayoutUnit RenderGrid::logicalContentHeightForChild(RenderBox& child, Vector<Gri
 {
     LayoutUnit oldOverrideContainingBlockContentLogicalWidth = child.hasOverrideContainingBlockLogicalWidth() ? child.overrideContainingBlockContentLogicalWidth() : LayoutUnit();
     LayoutUnit overrideContainingBlockContentLogicalWidth = gridAreaBreadthForChild(child, ForColumns, columnTracks);
-    if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth)
+    if (child.hasRelativeLogicalHeight() || oldOverrideContainingBlockContentLogicalWidth != overrideContainingBlockContentLogicalWidth) {
         child.setNeedsLayout(MarkOnlyThis);
+        // We need to clear the stretched height to properly compute logical height during layout.
+        child.clearOverrideLogicalContentHeight();
+    }
 
     child.setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
     // If |child| has a relative logical height, we shouldn't let it override its intrinsic height, which is
@@ -1174,9 +1179,11 @@ void RenderGrid::layoutGridItems()
 
         LayoutRect oldChildRect = child->frameRect();
 
-        // FIXME: Grid items should stretch to fill their cells. Once we
-        // implement grid-{column,row}-align, we can also shrink to fit. For
-        // now, just size as if we were a regular child.
+        // Stretching logic might force a child layout, so we need to run it before the layoutIfNeeded
+        // call to avoid unnecessary relayouts. This might imply that child margins, needed to correctly
+        // determine the available space before stretching, are not set yet.
+        applyStretchAlignmentToChildIfNeeded(*child, overrideContainingBlockContentLogicalHeight);
+
         child->layoutIfNeeded();
 
         child->setLogicalLocation(findChildLogicalPosition(*child, sizingData));
@@ -1233,14 +1240,171 @@ void RenderGrid::populateGridPositions(const GridSizingData& sizingData)
         m_rowPositions[i + 1] = m_rowPositions[i] + sizingData.rowTracks[i].baseSize();
 }
 
-LayoutPoint RenderGrid::findChildLogicalPosition(RenderBox& child, const GridSizingData& sizingData)
+LayoutUnit RenderGrid::endOfRowForChild(const RenderBox& child) const
+{
+    const GridCoordinate& coordinate = cachedGridCoordinate(child);
+
+    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
+    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
+    LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
+
+    LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
+    // FIXME: This should account for the grid item's <overflow-position>.
+    return rowPosition + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight());
+}
+
+LayoutUnit RenderGrid::startOfRowForChild(const RenderBox& child) const
+{
+    const GridCoordinate& coordinate = cachedGridCoordinate(child);
+
+    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
+    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
+    // FIXME: This should account for the grid item's <overflow-position>.
+    LayoutUnit rowPosition = startOfRow + marginBeforeForChild(child);
+
+    return rowPosition;
+}
+
+LayoutUnit RenderGrid::centeredRowPositionForChild(const RenderBox& child) const
+{
+    const GridCoordinate& coordinate = cachedGridCoordinate(child);
+
+    // The grid items should be inside the grid container's border box, that's why they need to be shifted.
+    LayoutUnit startOfRow = m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()];
+    LayoutUnit endOfRow = m_rowPositions[coordinate.rows.resolvedFinalPosition.next().toInt()];
+    // FIXME: This should account for the grid item's <overflow-position>.
+    return startOfRow + std::max<LayoutUnit>(0, endOfRow - startOfRow - child.logicalHeight()) / 2;
+}
+
+bool RenderGrid::allowedToStretchLogicalHeightForChild(const RenderBox& child) const
+{
+    return child.style().logicalHeight().isAuto() && !child.style().marginBeforeUsing(&style()).isAuto() && !child.style().marginAfterUsing(&style()).isAuto();
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
+bool RenderGrid::needToStretchChildLogicalHeight(const RenderBox& child) const
+{
+    if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch)
+        return false;
+
+    return isHorizontalWritingMode() && child.style().height().isAuto();
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
+LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox& child) const
+{
+    return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent();
+}
+
+LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox& child) const
+{
+    return gridAreaBreadthForChild - marginLogicalHeightForChild(child);
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
+void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild)
+{
+    if (RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch) != ItemPositionStretch)
+        return;
+
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+    if (allowedToStretchLogicalHeightForChild(child)) {
+        // FIXME: If the child has orthogonal flow, then it already has an override height set, so use it.
+        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+        if (!hasOrthogonalWritingMode) {
+            LayoutUnit stretchedLogicalHeight = availableAlignmentSpaceForChildBeforeStretching(gridAreaBreadthForChild, child);
+            LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight);
+
+            // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
+            bool childNeedsRelayout = desiredLogicalHeight != child.logicalHeight();
+            if (childNeedsRelayout || !child.hasOverrideLogicalContentHeight())
+                child.setOverrideLogicalContentHeight(desiredLogicalHeight - child.borderAndPaddingLogicalHeight());
+            if (childNeedsRelayout) {
+                child.setLogicalHeight(0);
+                child.setNeedsLayout();
+            }
+        }
+    }
+}
+
+static GridAxisPosition columnAxisPosition(ItemPosition position, bool hasOrthogonalWritingMode, bool hasSameWritingMode)
+{
+    switch (position) {
+    case ItemPositionSelfStart:
+        // If orthogonal writing-modes, this computes to 'start'.
+        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+        // self-start is based on the child's block axis direction. That's why we need to check against the grid container's block flow.
+        return (hasOrthogonalWritingMode || hasSameWritingMode) ? GridAxisStart : GridAxisEnd;
+    case ItemPositionSelfEnd:
+        // If orthogonal writing-modes, this computes to 'end'.
+        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+        // self-end is based on the child's block axis direction. That's why we need to check against the grid container's block flow.
+        return (hasOrthogonalWritingMode || hasSameWritingMode) ? GridAxisEnd : GridAxisStart;
+    case ItemPositionLeft:
+        // The alignment axis (column axis) and the inline axis are parallell in
+        // orthogonal writing mode. Otherwise this this is equivalent to 'start'.
+        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+        return GridAxisStart;
+    case ItemPositionRight:
+        // The alignment axis (column axis) and the inline axis are parallell in
+        // orthogonal writing mode. Otherwise this this is equivalent to 'start'.
+        // FIXME: grid track sizing and positioning do not support orthogonal modes yet.
+        return hasOrthogonalWritingMode ? GridAxisEnd : GridAxisStart;
+    case ItemPositionCenter:
+        return GridAxisCenter;
+    case ItemPositionFlexStart: // Only used in flex layout, otherwise equivalent to 'start'.
+    case ItemPositionStart:
+        return GridAxisStart;
+    case ItemPositionFlexEnd: // Only used in flex layout, otherwise equivalent to 'end'.
+    case ItemPositionEnd:
+        return GridAxisEnd;
+    case ItemPositionStretch:
+        return GridAxisStart;
+    case ItemPositionBaseline:
+    case ItemPositionLastBaseline:
+        // FIXME: Implement the ItemPositionBaseline value. For now, we always 'start' align the child.
+        return GridAxisStart;
+    case ItemPositionAuto:
+        break;
+    }
+
+    ASSERT_NOT_REACHED();
+    return GridAxisStart;
+}
+
+LayoutUnit RenderGrid::rowPositionForChild(const RenderBox& child) const
+{
+    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+    bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
+    ItemPosition position = RenderStyle::resolveAlignment(style(), child.style(), ItemPositionStretch);
+
+    switch (columnAxisPosition(position, hasOrthogonalWritingMode, hasSameWritingMode)) {
+    case GridAxisStart:
+        return startOfRowForChild(child);
+    case GridAxisEnd:
+        return endOfRowForChild(child);
+    case GridAxisCenter:
+        return centeredRowPositionForChild(child);
+    }
+
+    ASSERT_NOT_REACHED();
+    return 0;
+}
+
+LayoutPoint RenderGrid::findChildLogicalPosition(const RenderBox& child, const GridSizingData& sizingData) const
 {
     const GridCoordinate& coordinate = cachedGridCoordinate(child);
     ASSERT_UNUSED(sizingData, coordinate.columns.resolvedInitialPosition.toInt() < sizingData.columnTracks.size());
     ASSERT_UNUSED(sizingData, coordinate.rows.resolvedInitialPosition.toInt() < sizingData.rowTracks.size());
 
+    LayoutUnit columnPosition = m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child);
+    // We stored m_columnPositions's data ignoring the direction, hence we might need now
+    // to translate positions from RTL to LTR, as it's more convenient for painting.
+    if (!style().isLeftToRightDirection())
+        columnPosition = (m_columnPositions[m_columnPositions.size() - 1] + borderAndPaddingLogicalLeft()) - columnPosition  - child.logicalWidth();
+
     // The grid items should be inside the grid container's border box, that's why they need to be shifted.
-    return LayoutPoint(m_columnPositions[coordinate.columns.resolvedInitialPosition.toInt()] + marginStartForChild(child), m_rowPositions[coordinate.rows.resolvedInitialPosition.toInt()] + marginBeforeForChild(child));
+    return LayoutPoint(columnPosition, rowPositionForChild(child));
 }
 
 void RenderGrid::paintChildren(PaintInfo& paintInfo, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect)
index dd6ccc9..50e5dba 100644 (file)
@@ -117,12 +117,22 @@ private:
     LayoutUnit logicalContentHeightForChild(RenderBox&, Vector<GridTrack>&);
     LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
     LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
-    LayoutPoint findChildLogicalPosition(RenderBox&, const GridSizingData&);
+    LayoutUnit startOfRowForChild(const RenderBox&) const;
+    LayoutUnit endOfRowForChild(const RenderBox&) const;
+    LayoutUnit centeredRowPositionForChild(const RenderBox&) const;
+    LayoutUnit rowPositionForChild(const RenderBox&) const;
+    LayoutPoint findChildLogicalPosition(const RenderBox&, const GridSizingData&) const;
     GridCoordinate cachedGridCoordinate(const RenderBox&) const;
 
     LayoutUnit gridAreaBreadthForChild(const RenderBox& child, GridTrackSizingDirection, const Vector<GridTrack>&) const;
 
     virtual void paintChildren(PaintInfo& forSelf, const LayoutPoint& paintOffset, PaintInfo& forChild, bool usePrintRect) override;
+    bool allowedToStretchLogicalHeightForChild(const RenderBox&) const;
+    bool needToStretchChildLogicalHeight(const RenderBox&) const;
+    LayoutUnit marginLogicalHeightForChild(const RenderBox&) const;
+    LayoutUnit computeMarginLogicalHeightForChild(const RenderBox&) const;
+    LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&) const;
+    void applyStretchAlignmentToChildIfNeeded(RenderBox&, LayoutUnit gridAreaBreadthForChild);
 
 #ifndef NDEBUG
     bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, const Vector<GridTrack>&);