Diff
Modified: trunk/LayoutTests/ChangeLog (147139 => 147140)
--- trunk/LayoutTests/ChangeLog 2013-03-28 19:08:02 UTC (rev 147139)
+++ trunk/LayoutTests/ChangeLog 2013-03-28 19:24:03 UTC (rev 147140)
@@ -1,3 +1,23 @@
+2013-03-28 Julien Chaffraix <jchaffr...@webkit.org>
+
+ [CSS Grid Layout] Before / start paddings and borders are not accounted for when placing the grid items
+ https://bugs.webkit.org/show_bug.cgi?id=113351
+
+ Reviewed by Tony Chang.
+
+ * fast/css-grid-layout/resources/grid.css:
+ (.verticalLR):
+ (.horizontalBT):
+ (.directionRTL):
+ Added more helper classes.
+
+ * fast/css-grid-layout/grid-element-border-grid-item-expected.txt: Added.
+ * fast/css-grid-layout/grid-element-border-grid-item.html: Added.
+ * fast/css-grid-layout/grid-element-border-padding-grid-item-expected.txt: Added.
+ * fast/css-grid-layout/grid-element-border-padding-grid-item.html: Added.
+ * fast/css-grid-layout/grid-element-padding-grid-item-expected.txt: Added.
+ * fast/css-grid-layout/grid-element-padding-grid-item.html: Added.
+
2013-03-28 Roger Fong <roger_f...@apple.com>
Unreviewed. Unskip some layout test folder on Windows port.
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item-expected.txt (0 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item-expected.txt 2013-03-28 19:24:03 UTC (rev 147140)
@@ -0,0 +1,9 @@
+This test checks that the grid items are shifted by the grid container's borders before and start.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html (0 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-grid-item.html 2013-03-28 19:24:03 UTC (rev 147140)
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<script src=""
+<link href="" rel="stylesheet">
+<style>
+.grid {
+ border-top: 20px dotted blue;
+ border-right: 30px dotted blue;
+ border-bottom: 40px dotted blue;
+ border-left: 50px dotted blue;
+ -webkit-grid-rows: 100px 100px;
+ -webkit-grid-columns: 100px 100px;
+ width: 200px;
+}
+</style>
+</head>
+<body _onload_="checkLayout('.grid')">
+
+<div>This test checks that the grid items are shifted by the grid container's borders before and start.</div>
+
+<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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item-expected.txt (0 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item-expected.txt 2013-03-28 19:24:03 UTC (rev 147140)
@@ -0,0 +1,9 @@
+This test checks that the grid items are shifted by the grid container's paddings and borders before / start.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html (0 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-border-padding-grid-item.html 2013-03-28 19:24:03 UTC (rev 147140)
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<script src=""
+<link href="" rel="stylesheet">
+<style>
+.grid {
+ padding: 10px;
+ border-top: 10px dotted blue;
+ border-right: 20px dotted blue;
+ border-bottom: 30px dotted blue;
+ border-left: 40px dotted blue;
+ -webkit-grid-rows: 100px 100px;
+ -webkit-grid-columns: 100px 100px;
+ width: 200px;
+}
+</style>
+</head>
+<body _onload_="checkLayout('.grid')">
+
+<div>This test checks that the grid items are shifted by the grid container's paddings and borders before / start.</div>
+
+<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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item-expected.txt (0 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item-expected.txt 2013-03-28 19:24:03 UTC (rev 147140)
@@ -0,0 +1,9 @@
+This test checks that the grid items are shifted by the grid container's paddings before and start.
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html (0 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-grid-item.html 2013-03-28 19:24:03 UTC (rev 147140)
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<script src=""
+<link href="" rel="stylesheet">
+<style>
+.grid {
+ padding: 20px 30px 40px 50px;
+ -webkit-grid-rows: 100px 100px;
+ -webkit-grid-columns: 100px 100px;
+ width: 200px;
+}
+</style>
+</head>
+<body _onload_="checkLayout('.grid')">
+
+<div>This test checks that the grid items are shifted by the grid container's paddings before and start.</div>
+
+<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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid.css (147139 => 147140)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2013-03-28 19:08:02 UTC (rev 147139)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid.css 2013-03-28 19:24:03 UTC (rev 147140)
@@ -144,3 +144,15 @@
.verticalRL {
-webkit-writing-mode: vertical-rl;
}
+
+.verticalLR {
+ -webkit-writing-mode: vertical-lr;
+}
+
+.horizontalBT {
+ -webkit-writing-mode: horizontal-bt;
+}
+
+.directionRTL {
+ direction: rtl;
+}
Modified: trunk/Source/WebCore/ChangeLog (147139 => 147140)
--- trunk/Source/WebCore/ChangeLog 2013-03-28 19:08:02 UTC (rev 147139)
+++ trunk/Source/WebCore/ChangeLog 2013-03-28 19:24:03 UTC (rev 147140)
@@ -1,3 +1,23 @@
+2013-03-28 Julien Chaffraix <jchaffr...@webkit.org>
+
+ [CSS Grid Layout] Before / start paddings and borders are not accounted for when placing the grid items
+ https://bugs.webkit.org/show_bug.cgi?id=113351
+
+ Reviewed by Tony Chang.
+
+ Tests: 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
+
+ * rendering/RenderBoxModelObject.h:
+ (WebCore::RenderBoxModelObject::borderAndPaddingBefore):
+ Added this helper function (we do have borderAndPaddingStart but didn't have this
+ one for some reason).
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::findChildLogicalPosition):
+ Shifted |offset| by the paddings and borders before / start.
+
2013-03-28 Zan Dobersek <zdober...@igalia.com>
[GTK] Build GTK-specific, non-layer-violating source code into WebCore-independent libPlatformGtk.la
Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.h (147139 => 147140)
--- trunk/Source/WebCore/rendering/RenderBoxModelObject.h 2013-03-28 19:08:02 UTC (rev 147139)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.h 2013-03-28 19:24:03 UTC (rev 147140)
@@ -128,6 +128,7 @@
LayoutUnit borderAndPaddingLogicalLeft() const { return style()->isHorizontalWritingMode() ? borderLeft() + paddingLeft() : borderTop() + paddingTop(); }
LayoutUnit borderAndPaddingStart() const { return borderStart() + paddingStart(); }
+ LayoutUnit borderAndPaddingBefore() const { return borderBefore() + paddingBefore(); }
LayoutUnit borderLogicalLeft() const { return style()->isHorizontalWritingMode() ? borderLeft() : borderTop(); }
LayoutUnit borderLogicalRight() const { return style()->isHorizontalWritingMode() ? borderRight() : borderBottom(); }
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (147139 => 147140)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-03-28 19:08:02 UTC (rev 147139)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-03-28 19:24:03 UTC (rev 147140)
@@ -792,7 +792,8 @@
{
const GridCoordinate& coordinate = cachedGridCoordinate(child);
- LayoutPoint offset;
+ // The grid items should be inside the grid container's border box, that's why they need to be shifted.
+ LayoutPoint offset(borderAndPaddingStart(), borderAndPaddingBefore());
// FIXME: |columnTrack| and |rowTrack| should be smaller than our column / row count.
for (size_t i = 0; i < coordinate.columns.initialPositionIndex && i < columnTracks.size(); ++i)
offset.setX(offset.x() + columnTracks[i].m_usedBreadth);
