Diff
Modified: trunk/LayoutTests/ChangeLog (183369 => 183370)
--- trunk/LayoutTests/ChangeLog 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/ChangeLog 2015-04-26 22:44:11 UTC (rev 183370)
@@ -1,3 +1,24 @@
+2015-04-26 Javier Fernandez <[email protected]>
+
+ [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 <[email protected]>
AX: richer text change notifications (142719)
Added: trunk/LayoutTests/fast/css-grid-layout/grid-align-expected.txt (0 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-expected.txt 2015-04-26 22:44:11 UTC (rev 183370)
@@ -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
Added: trunk/LayoutTests/fast/css-grid-layout/grid-align.html (0 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="" rel="stylesheet">
+<script src=""
+<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html (183369 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -20,74 +20,74 @@
<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html (183369 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -21,74 +21,74 @@
<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html (183369 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -17,74 +17,74 @@
<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html (183369 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -53,37 +53,37 @@
<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html (183369 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -53,36 +53,36 @@
<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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html (183369 => 183370)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-margin-resolution.html 2015-04-26 22:44:11 UTC (rev 183370)
@@ -60,37 +60,37 @@
<!-- 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>
Modified: trunk/Source/WebCore/ChangeLog (183369 => 183370)
--- trunk/Source/WebCore/ChangeLog 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/Source/WebCore/ChangeLog 2015-04-26 22:44:11 UTC (rev 183370)
@@ -1,3 +1,40 @@
+2015-04-26 Javier Fernandez <[email protected]>
+
+ [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 <[email protected]>
AX: richer text change notifications (142719)
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (183369 => 183370)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2015-04-26 22:44:11 UTC (rev 183370)
@@ -2712,7 +2712,7 @@
// 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);
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (183369 => 183370)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-04-26 22:44:11 UTC (rev 183370)
@@ -40,6 +40,8 @@
static const int infinity = -1;
+enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
+
class GridTrack {
public:
GridTrack() {}
@@ -548,8 +550,11 @@
{
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 @@
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 @@
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)
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (183369 => 183370)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-04-26 22:31:12 UTC (rev 183369)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-04-26 22:44:11 UTC (rev 183370)
@@ -117,12 +117,22 @@
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>&);
