Add support for parsing <grid-line> that includes a 'span'

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 1883b772df923ba564a21845dfc77e1a4d431823..1eadd86cf1bb3bf7dc8b8fb854fc9b057bfe3dcf 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
@@ -14,6 +14,18 @@ if (window.testRunner)
     -webkit-grid-start: -10;
     -webkit-grid-before: -15;
 }
+.gridItemWithBeforeSpan {
+    -webkit-grid-start: span 2;
+    -webkit-grid-before: span 8;
+}
+.gridItemWithAfterSpan {
+    -webkit-grid-start: 2 span;
+    -webkit-grid-before: 8 span;
+}
+.gridItemWithOnlySpan {
+    -webkit-grid-start: span;
+    -webkit-grid-before: span;
+}
 .gridItemWithAuto {
     -webkit-grid-start: auto;
     -webkit-grid-before: auto;
@@ -26,6 +38,9 @@ if (window.testRunner)
 <div id="gridElement"></div>
 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
+<div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div>
+<div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div>
+<div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
 <script>
     description('Test that setting and getting grid-start and grid-before works as expected');
@@ -49,6 +64,24 @@ if (window.testRunner)
     shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-before')", "'-15'");
     shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row')", "'-15 / auto'");
 
+    var gridItemWithBeforeSpan = document.getElementById("gridItemWithBeforeSpan");
+    shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-start')", "'span 2'");
+    shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column')", "'span 2 / auto'");
+    shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-before')", "'span 8'");
+    shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row')", "'span 8 / auto'");
+
+    var gridItemWithAfterSpan = document.getElementById("gridItemWithAfterSpan");
+    shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-start')", "'span 2'");
+    shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column')", "'span 2 / auto'");
+    shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-before')", "'span 8'");
+    shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row')", "'span 8 / auto'");
+
+    var gridItemWithOnlySpan = document.getElementById("gridItemWithOnlySpan");
+    shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-start')", "'span 1'");
+    shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column')", "'span 1 / auto'");
+    shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-before')", "'span 1'");
+    shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row')", "'span 1 / auto'");
+
     var gridItemWithAutoElement = document.getElementById("gridItemWithAutoElement");
     shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-start')", "'auto'");
     shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
@@ -84,6 +117,15 @@ if (window.testRunner)
 
     element = document.createElement("div");
     document.body.appendChild(element);
+    element.style.webkitGridStart = "span 3";
+    element.style.webkitGridBefore = "span 20";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'span 3'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'span 3 / auto'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-before')", "'span 20'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'span 20 / auto'");

[ojan, 2013/04/11 02:44:47]

This, and the other cases where both grid-lines specify a span, don't seem to
match the spec. 

"If opposing grid-placement properties both specify a grid span, they both
compute to ‘auto’."

Am I misreading it?

[Julien - ping for review, 2013/04/17 14:26:27]

You are not! I thought we could get away with doing the computation in
RenderGrid but we wouldn't match the right 'computed value' so this needs to be
changed.

+
+    element = document.createElement("div");
+    document.body.appendChild(element);
     element.style.webkitGridStart = "auto";
     element.style.webkitGridBefore = "auto";
     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start')", "'auto'");