[CSS Grid Layout] Fix grid shorthands CSSOM serialization

LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html

Index: LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html b/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html
new file mode 100644
index 0000000000000000000000000000000000000000..719f5326fd6250b67a2bba80ee1a536f27fc9fab
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<div class="grid">
+    <div id="item"></div>
+</div>
+<script src="../../resources/js-test.js"></script>
+<script>
+    description('Test that the format of grid shorthands style uses slashes as expected');
+
+    var item = document.getElementById("item");
+
+    debug("Test grid-column shorthand");
+    item.style.gridColumn = "1";
+    shouldBeEqualToString("item.style.gridColumn", "1 / auto");
+    item.style.gridColumn = "1 / 3";
+    shouldBeEqualToString("item.style.gridColumn", "1 / 3");
+    item.style.gridColumn = "1 / span 2";
+    shouldBeEqualToString("item.style.gridColumn", "1 / span 2");
+    item.style.gridColumn = "foo / bar";
+    shouldBeEqualToString("item.style.gridColumn", "foo / bar");
+    item.style.gridColumn = "foo / span bar";
+    shouldBeEqualToString("item.style.gridColumn", "foo / span bar");
+    item.style.gridColumn = "2 foo / span 3 bar";
+    shouldBeEqualToString("item.style.gridColumn", "2 foo / span 3 bar");
+
+    debug("Test grid-row shorthand");
+    item.style.gridRow = "1";
+    shouldBeEqualToString("item.style.gridRow", "1 / auto");
+    item.style.gridRow = "1 / 3";
+    shouldBeEqualToString("item.style.gridRow", "1 / 3");
+    item.style.gridRow = "1 / span 2";
+    shouldBeEqualToString("item.style.gridRow", "1 / span 2");
+    item.style.gridRow = "foo / bar";
+    shouldBeEqualToString("item.style.gridRow", "foo / bar");
+    item.style.gridRow = "foo / span bar";
+    shouldBeEqualToString("item.style.gridRow", "foo / span bar");
+    item.style.gridRow = "2 foo / span 3 bar";
+    shouldBeEqualToString("item.style.gridRow", "2 foo / span 3 bar");
+
+    debug("Test grid-area shorthand");
+    item.style.gridArea = "1";
+    shouldBeEqualToString("item.style.gridArea", "1 / auto / auto / auto");
+    item.style.gridArea = "1 / 3";
+    shouldBeEqualToString("item.style.gridArea", "1 / 3 / auto / auto");
+    item.style.gridArea = "1 / span 2";
+    shouldBeEqualToString("item.style.gridArea", "1 / span 2 / auto / auto");
+    item.style.gridArea = "foo / foo";
+    shouldBeEqualToString("item.style.gridArea", "foo / foo / foo / foo");
+    item.style.gridArea = "foo / bar";
+    shouldBeEqualToString("item.style.gridArea", "foo / bar / foo / bar");
+    item.style.gridArea = "2 foo / span 3 bar";
+    shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / auto / auto");
+    item.style.gridArea = "1 / 2 / 3";
+    shouldBeEqualToString("item.style.gridArea", "1 / 2 / 3 / auto");
+    item.style.gridArea = "1 / 3 / 2 / 4";
+    shouldBeEqualToString("item.style.gridArea", "1 / 3 / 2 / 4");
+    item.style.gridArea = "1 / span 2 / 1 / span 2";
+    shouldBeEqualToString("item.style.gridArea", "1 / span 2 / 1 / span 2");
+    item.style.gridArea = "foo / bar / baz / qux";
+    shouldBeEqualToString("item.style.gridArea", "foo / bar / baz / qux");
+    item.style.gridArea = "foo / span bar / baz / span qux";
+    shouldBeEqualToString("item.style.gridArea", "foo / span bar / baz / span qux");
+    item.style.gridArea = "2 foo / span 3 bar / 3 baz / span 2 qux";
+    shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / 3 baz / span 2 qux");
+
+</script>