[CSS Grid Layout] Rename grid placement properties

LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html

Index: LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html b/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html
index 70ee94675914c2155c2f59331e5aa1a3be1272ad..cb9903891e006283ee6503eaa755dc4b1b3b73ba 100644
--- a/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html
@@ -7,40 +7,40 @@ if (window.testRunner)
 </script>
 <style>
 .gridItemWithPositiveInteger {
-    grid-start: 10;
-    grid-before: 15;
+    grid-column-start: 10;
+    grid-row-start: 15;
 }
 .gridItemWithNegativeInteger {
-    grid-start: -10;
-    grid-before: -15;
+    grid-column-start: -10;
+    grid-row-start: -15;
 }
 .gridItemWithBeforeSpan {
-    grid-start: span 2;
-    grid-before: span 8;
+    grid-column-start: span 2;
+    grid-row-start: span 8;
 }
 .gridItemWithAfterSpan {
-    grid-start: 2 span;
-    grid-before: 8 span;
+    grid-column-start: 2 span;
+    grid-row-start: 8 span;
 }
 .gridItemWithOnlySpan {
-    grid-start: span;
-    grid-before: span;
+    grid-column-start: span;
+    grid-row-start: span;
 }
 .gridItemWithAuto {
-    grid-start: auto;
-    grid-before: auto;
+    grid-column-start: auto;
+    grid-row-start: auto;
 }
 .gridItemWithString {
-    grid-start: "first";
-    grid-before: "last";
+    grid-column-start: "first";
+    grid-row-start: "last";
 }
 .gridItemWithSpanString {
-    grid-start: "first" span;
-    grid-before: span "last";
+    grid-column-start: "first" span;
+    grid-row-start: span "last";
 }
 .gridItemWithSpanNumberString {
-    grid-start: 2 "first" span;
-    grid-before: "last" 3 span;
+    grid-column-start: 2 "first" span;
+    grid-row-start: "last" 3 span;
 }
 </style>
 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
@@ -59,13 +59,13 @@ if (window.testRunner)
 <div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div>
 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringElement"></div>
 <script>
-    description('Test that setting and getting grid-start and grid-before works as expected');
+    description('Test that setting and getting grid-column-start and grid-row-start works as expected');
 
-    debug("Test getting grid-start and grid-before set through CSS");
+    debug("Test getting grid-column-start and grid-row-start set through CSS");
     var gridElement = document.getElementById("gridElement");
-    shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-start')", "'auto'");
+    shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column-start')", "'auto'");
     shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')", "'auto / auto'");
-    shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-before')", "'auto'");
+    shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row-start')", "'auto'");
     shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", "'auto / auto'");
 
     testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
@@ -82,43 +82,43 @@ if (window.testRunner)
     debug("Test the initial value");
     var element = document.createElement("div");
     document.body.appendChild(element);
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'auto'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "'auto'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 
     debug("");
-    debug("Test getting and setting grid-start and grid-before through JS");
-    testStartBeforeJSParsing("18", "66");
-    testStartBeforeJSParsing("-55", "-40");
-    testStartBeforeJSParsing("'nav'", "'last'", "1 nav", "1 last");
-    testStartBeforeJSParsing("span 3", "span 20");
-    testStartBeforeJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last");
-    testStartBeforeJSParsing("auto", "auto");
+    debug("Test getting and setting grid-column-start and grid-row-start through JS");
+    testColumnStartRowStartJSParsing("18", "66");
+    testColumnStartRowStartJSParsing("-55", "-40");
+    testColumnStartRowStartJSParsing("'nav'", "'last'", "1 nav", "1 last");
+    testColumnStartRowStartJSParsing("span 3", "span 20");
+    testColumnStartRowStartJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last");
+    testColumnStartRowStartJSParsing("auto", "auto");
 
     debug("");
-    debug("Test setting grid-start and grid-before to 'inherit' through JS");
-    testStartBeforeInheritJSParsing("inherit", "18");
-    testStartBeforeInheritJSParsing("2", "inherit");
-    testStartBeforeInheritJSParsing("inherit", "inherit");
+    debug("Test setting grid-column-start and grid-row-start to 'inherit' through JS");
+    testColumnStartRowStartInheritJSParsing("inherit", "18");
+    testColumnStartRowStartInheritJSParsing("2", "inherit");
+    testColumnStartRowStartInheritJSParsing("inherit", "inherit");
 
     debug("");
-    debug("Test setting grid-start and grid-before to 'initial' through JS");
-    testStartBeforeInitialJSParsing();
+    debug("Test setting grid-column-start and grid-row-start to 'initial' through JS");
+    testColumnStartRowStartInitialJSParsing();
 
     debug("");
-    debug("Test setting grid-start and grid-before back to 'auto' through JS");
-    element.style.gridStart = "18";
-    element.style.gridBefore = "66";
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'18'");
+    debug("Test setting grid-column-start and grid-row-start back to 'auto' through JS");
+    element.style.gridColumnStart = "18";
+    element.style.gridRowStart = "66";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / auto'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "'66'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'");
-    element.style.gridStart = "auto";
-    element.style.gridBefore = "auto";
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-start')", "'auto'");
+    element.style.gridColumnStart = "auto";
+    element.style.gridRowStart = "auto";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
-    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-before')", "'auto'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 </script>
 <script src="../js/resources/js-test-post.js"></script>