[CSS Grid Layout] Split the grid-item-margin-auto-columns-rows.html test.
https://bugs.webkit.org/show_bug.cgi?id=131064
Patch by Javier Fernandez <jfernandez@igalia.com> on 2014-05-22
Reviewed by Benjamin Poulain.
Splitting the "grid-item-margin-auto-columns-rows" into different writing-modes
related tests, so besides increasing clarity, it makes it fit in the 800x600 viewport.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html: Removed.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows.html: Removed.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html: Added.
* fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@169197 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 41111a9..ab62e4e 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,24 @@
+2014-05-22 Javier Fernandez <jfernandez@igalia.com>
+
+ [CSS Grid Layout] Split the grid-item-margin-auto-columns-rows.html test.
+ https://bugs.webkit.org/show_bug.cgi?id=131064
+
+ Reviewed by Benjamin Poulain.
+
+ Splitting the "grid-item-margin-auto-columns-rows" into different writing-modes
+ related tests, so besides increasing clarity, it makes it fit in the 800x600 viewport.
+
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html: Removed.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows.html: Removed.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html: Added.
+ * fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html: Added.
+
2014-05-21 Antti Koivisto <antti@apple.com>
REGRESSION(r167870): Crash in simple line layout code with :after
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html
deleted file mode 100644
index 1301aa0..0000000
--- a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-expected.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html>
-<style>
-.grid {
- display: block;
- background-color: grey;
- width: 200px;
-}
-
-.gridLong {
- height: 120px;
-}
-
-.gridShort {
- height: 100px;
-}
-
-.firstRowFirstColumn {
- background-color: blue;
- position: absolute;
-}
-
-.firstRowSecondColumn {
- background-color: lime;
- position: absolute;
-}
-
-.secondRowFirstColumn {
- background-color: purple;
- position: absolute;
-}
-
-.secondRowSecondColumn {
- background-color: orange;
- position: absolute;
- left: 20px;
-}
-
-.gridItem {
- width: 20px;
- height: 40px;
-}
-
-.testContainer {
- position: relative;
- margin-bottom: 20px;
-}
-</style>
-</head>
-<body>
-
-<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
-
-<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>
-</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>
-</div>
-
-<div class="testContainer">
- <div class="grid gridLong">
- <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 20px;"></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: 60px;"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid gridShort">
- <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 20px;"></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: 60px;"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid gridLong">
- <div class="gridItem firstRowFirstColumn" style="top: 20px;"></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: 60px;"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid gridShort">
- <div class="gridItem firstRowFirstColumn" style="top: 20px;"></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: 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="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>
-</div>
-
-<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>
-</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>
-</div>
-
-<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>
-</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>
-</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>
-</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>
-</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>
-</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>
-</div>
-
-</body>
-</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html
new file mode 100644
index 0000000..203723e
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr-expected.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+ display: block;
+ background-color: grey;
+ width: 200px;
+}
+
+.gridLong {
+ height: 120px;
+}
+
+.gridShort {
+ height: 100px;
+}
+
+.firstRowFirstColumn {
+ background-color: blue;
+ position: absolute;
+}
+
+.firstRowSecondColumn {
+ background-color: lime;
+ position: absolute;
+}
+
+.secondRowFirstColumn {
+ background-color: purple;
+ position: absolute;
+}
+
+.secondRowSecondColumn {
+ background-color: orange;
+ position: absolute;
+ left: 20px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<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>
+</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>
+</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="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>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html
new file mode 100644
index 0000000..93b1d0b
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-ltr.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-rows: auto auto;
+ -webkit-grid-template-columns: auto auto;
+ width: 200px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.marginTop {
+ margin-top: 20px;
+}
+
+.marginBottom {
+ margin-bottom: 20px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<div class="testContainer">
+ <div class="grid">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem marginBottom firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid horizontalBT">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid horizontalBT">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem marginBottom firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html
new file mode 100644
index 0000000..b4b3b87
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl-expected.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+ display: block;
+ background-color: grey;
+ width: 200px;
+}
+
+.gridLong {
+ height: 120px;
+}
+
+.gridShort {
+ height: 100px;
+}
+
+.firstRowFirstColumn {
+ background-color: blue;
+ position: absolute;
+}
+
+.firstRowSecondColumn {
+ background-color: lime;
+ position: absolute;
+}
+
+.secondRowFirstColumn {
+ background-color: purple;
+ position: absolute;
+}
+
+.secondRowSecondColumn {
+ background-color: orange;
+ position: absolute;
+ left: 20px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<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>
+</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>
+</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>
+</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>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html
new file mode 100644
index 0000000..976245e
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-horizontal-rtl.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-rows: auto auto;
+ -webkit-grid-template-columns: auto auto;
+ width: 200px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.marginTop {
+ margin-top: 20px;
+}
+
+.marginBottom {
+ margin-bottom: 20px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+<div class="testContainer">
+ <div class="grid directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem marginBottom firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid horizontalBT directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid horizontalBT directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem marginBottom firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html
new file mode 100644
index 0000000..f60214d
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr-expected.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+ display: block;
+ background-color: grey;
+ width: 200px;
+}
+
+.gridLong {
+ height: 120px;
+}
+
+.gridShort {
+ height: 100px;
+}
+
+.firstRowFirstColumn {
+ background-color: blue;
+ position: absolute;
+}
+
+.firstRowSecondColumn {
+ background-color: lime;
+ position: absolute;
+}
+
+.secondRowFirstColumn {
+ background-color: purple;
+ position: absolute;
+}
+
+.secondRowSecondColumn {
+ background-color: orange;
+ position: absolute;
+ left: 20px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<div class="testContainer">
+ <div class="grid gridLong">
+ <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 20px;"></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: 60px;"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid gridShort">
+ <div class="gridItem firstRowFirstColumn" style="left: 180px; top: 20px;"></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: 60px;"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid gridLong">
+ <div class="gridItem firstRowFirstColumn" style="top: 20px;"></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: 60px;"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid gridShort">
+ <div class="gridItem firstRowFirstColumn" style="top: 20px;"></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: 60px;"></div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html
new file mode 100644
index 0000000..ef19285
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-ltr.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-rows: auto auto;
+ -webkit-grid-template-columns: auto auto;
+ width: 200px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.marginTop {
+ margin-top: 20px;
+}
+
+.marginBottom {
+ margin-bottom: 20px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<div class="testContainer">
+ <div class="grid verticalRL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem marginBottom secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid verticalRL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid verticalLR">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem marginBottom secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid verticalLR">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html
new file mode 100644
index 0000000..7e65577
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl-expected.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+ display: block;
+ background-color: grey;
+ width: 200px;
+}
+
+.gridLong {
+ height: 120px;
+}
+
+.gridShort {
+ height: 100px;
+}
+
+.firstRowFirstColumn {
+ background-color: blue;
+ position: absolute;
+}
+
+.firstRowSecondColumn {
+ background-color: lime;
+ position: absolute;
+}
+
+.secondRowFirstColumn {
+ background-color: purple;
+ position: absolute;
+}
+
+.secondRowSecondColumn {
+ background-color: orange;
+ position: absolute;
+ left: 20px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<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>
+</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>
+</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>
+</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>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html
new file mode 100644
index 0000000..17420c6
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows-vertical-rtl.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-rows: auto auto;
+ -webkit-grid-template-columns: auto auto;
+ width: 200px;
+}
+
+.gridItem {
+ width: 20px;
+ height: 40px;
+}
+
+.marginTop {
+ margin-top: 20px;
+}
+
+.marginBottom {
+ margin-bottom: 20px;
+}
+
+.testContainer {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+</style>
+</head>
+<body>
+
+<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
+
+<div class="testContainer">
+ <div class="grid verticalRL directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem marginBottom secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid verticalRL directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid verticalLR directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem secondRowFirstColumn"></div>
+ <div class="gridItem marginBottom secondRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="testContainer">
+ <div class="grid verticalLR directionRTL">
+ <div class="gridItem marginTop firstRowFirstColumn"></div>
+ <div class="gridItem firstRowSecondColumn"></div>
+ <div class="gridItem marginBottom secondRowFirstColumn"></div>
+ <div class="gridItem secondRowSecondColumn"></div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html b/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html
deleted file mode 100644
index c1e747a..0000000
--- a/LayoutTests/fast/css-grid-layout/grid-item-margin-auto-columns-rows.html
+++ /dev/null
@@ -1,181 +0,0 @@
-<!DOCTYPE html>
-<html>
-<link href="resources/grid.css" rel="stylesheet">
-<style>
-.grid {
- -webkit-grid-template-rows: auto auto;
- -webkit-grid-template-columns: auto auto;
- width: 200px;
-}
-
-.gridItem {
- width: 20px;
- height: 40px;
-}
-
-.marginTop {
- margin-top: 20px;
-}
-
-.marginBottom {
- margin-bottom: 20px;
-}
-
-.testContainer {
- position: relative;
- margin-bottom: 20px;
-}
-
-</style>
-</head>
-<body>
-
-<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>
-
-<div class="testContainer">
- <div class="grid">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem marginBottom firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalRL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem marginBottom secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalRL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalLR">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem marginBottom secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalLR">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid horizontalBT">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid horizontalBT">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem marginBottom firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<!-- rtl direction -->
-<div class="testContainer">
- <div class="grid directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem marginBottom firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalRL directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem marginBottom secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalRL directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalLR directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem marginBottom secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid verticalLR directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid horizontalBT directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem firstRowSecondColumn"></div>
- <div class="gridItem marginBottom secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-<div class="testContainer">
- <div class="grid horizontalBT directionRTL">
- <div class="gridItem marginTop firstRowFirstColumn"></div>
- <div class="gridItem marginBottom firstRowSecondColumn"></div>
- <div class="gridItem secondRowFirstColumn"></div>
- <div class="gridItem secondRowSecondColumn"></div>
- </div>
-</div>
-
-</body>
-</html>
