[CSS Grid Layout] Refactor grid-template-areas-get-set.html test

LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html

Index: LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html b/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
index d2ca1da704b6daf5dd3489a48a14755e8ce9ddc6..23ab12f26f3806dc0275b0e12808f69e755550da 100644
--- a/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html
@@ -109,78 +109,56 @@
 <script>
     description("This test checks that grid-template-areas is properly parsed.");
 
-    debug("Test getting grid-template-areas set through CSS.");
-    var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getPropertyValue('grid-template-areas')", "none")
-
-    var gridWithSingleStringTemplate = document.getElementById("gridWithSingleStringTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate).getPropertyValue('grid-template-areas')", '"area"')
-
-    var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumnsTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).getPropertyValue('grid-template-areas')", '"first second"')
-
-    var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getPropertyValue('grid-template-areas')", '"first" "second"')
-
-    var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpanningColumnsTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('grid-template-areas')", '"span span"')
-
-    var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpanningRowsDotTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('grid-template-areas')", '"span" "."')
-
-    var gridWithSpanningRowsDotsTemplate = document.getElementById("gridWithSpanningRowsDotsTemplate");
-    shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotsTemplate).getPropertyValue('grid-template-areas')", '"span" "."')
-
-    var gridWithDotColumn = document.getElementById("gridWithDotColumn");
-    shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropertyValue('grid-template-areas')", '"header ." "footer ."')
+    function testGridTemplateAreas(gridItemID, expectedResult) {
+        shouldBeEqualToString("window.getComputedStyle(" + gridItemID + ").getPropertyValue('grid-template-areas')", expectedResult);
+    }
 
-    var gridWithDotsColumn = document.getElementById("gridWithDotsColumn");
-    shouldBeEqualToString("window.getComputedStyle(gridWithDotsColumn).getPropertyValue('grid-template-areas')", '"header ." "footer ."')
+    function testJSGridTemplateAreas(element, expectedResult) {
+        this.element = element;
+        shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", expectedResult);
+    }
 
-    var gridWithDotCells = document.getElementById("gridWithDotCells");
-    shouldBeEqualToString("window.getComputedStyle(gridWithDotCells).getPropertyValue('grid-template-areas')", '"first ." ". second"')
-
-    var gridWithDotsCells = document.getElementById("gridWithDotsCells");
-    shouldBeEqualToString("window.getComputedStyle(gridWithDotsCells).getPropertyValue('grid-template-areas')", '"first ." ". second"')
-
-    var gridWithComplexDotAreas = document.getElementById("gridWithComplexDotAreas");
-    shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotAreas).getPropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"')
-
-    var gridWithComplexDotsAreas = document.getElementById("gridWithComplexDotsAreas");
-    shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotsAreas).getPropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"')
-
-    var gridWithMixedDotAndDotsAreas = document.getElementById("gridWithMixedDotAndDotsAreas");
-    shouldBeEqualToString("window.getComputedStyle(gridWithMixedDotAndDotsAreas).getPropertyValue('grid-template-areas')", '". title ." ". main main" "nav . aside" ". footer ."')
-
-    var gridWithHorizontalRectangle = document.getElementById("gridWithHorizontalRectangle");
-    shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle).getPropertyValue('grid-template-areas')", '"a a a" "a a a"');
-
-    var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRectangle");
-    shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).getPropertyValue('grid-template-areas')", '"a a" "a a" "a a"');
+    debug("Test getting grid-template-areas set through CSS.");
+    testGridTemplateAreas("gridWithDefaultTemplate", "none");
+    testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
+    testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
+    testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
+    testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
+    testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
+    testGridTemplateAreas("gridWithSpanningRowsDotsTemplate", '"span" "."');
+    testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
+    testGridTemplateAreas("gridWithDotsColumn", '"header ." "footer ."');
+    testGridTemplateAreas("gridWithDotCells", '"first ." ". second"');
+    testGridTemplateAreas("gridWithDotsCells", '"first ." ". second"');
+    testGridTemplateAreas("gridWithComplexDotAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
+    testGridTemplateAreas("gridWithComplexDotsAreas", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"');
+    testGridTemplateAreas("gridWithMixedDotAndDotsAreas", '". title ." ". main main" "nav . aside" ". footer ."');
+    testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
+    testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');

[svillar, 2015/06/10 07:22:37]

I think these changes are great but...

 
     debug("Test grid-template-areas: initial");
     var element = document.createElement("div");
     document.body.appendChild(element);
     element.style.gridTemplateAreas = "'foobar'";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"foobar"')
+    testJSGridTemplateAreas(element, '"foobar"');
     element.style.gridTemplateAreas = "initial";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", 'none');
+    testJSGridTemplateAreas(element, 'none');
     element.style.gridTemplateAreas = "'foobar'";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"foobar"')
+    testJSGridTemplateAreas(element, '"foobar"');
     element.style.gridTemplateAreas = "none";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", 'none');
+    testJSGridTemplateAreas(element, 'none');
     document.body.removeChild(element);
 
     debug("Test grid-template-areas: inherit");
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
     parentElement.style.gridTemplateAreas = "'foo bar'";
-    shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyValue('grid-template-areas')", '"foo bar"')
+    testJSGridTemplateAreas(parentElement, '"foo bar"');
 
     var element = document.createElement("div");
     parentElement.appendChild(element);
     element.style.gridTemplateAreas = "inherit";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", '"foo bar"')
+    testJSGridTemplateAreas(element, '"foo bar"');
     document.body.removeChild(parentElement);
 
     debug("Test invalid grid-template-areas values.");
@@ -189,29 +167,29 @@
 
     // 'nav' is not a rectangular definition.
     element.style.gridTemplateAreas = "'nav head' 'nav nav'";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
+    testJSGridTemplateAreas(element, "none");
 
     // 'nav' is not contiguous in the column direction.
     element.style.gridTemplateAreas = "'nav head nav'";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
+    testJSGridTemplateAreas(element, "none");
 
     // 'nav' is not contiguous in the row direction.
     element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
+    testJSGridTemplateAreas(element, "none");
 
     // The rows don't have the same number of columns.
     element.style.gridTemplateAreas = "'nav head' 'foot'";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
+    testJSGridTemplateAreas(element, "none");
 
     // Empty rows.
     element.style.gridTemplateAreas = "'' ''";
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
+    testJSGridTemplateAreas(element, "none");
 
     debug("");
     debug("FIXME: We currently don't validate that the named grid areas are <indent>.");
     // <ident> only allows a leading '-'.
     element.style.gridTemplateAreas = '"nav-up"';
-    shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template-areas')", "none")
+    testJSGridTemplateAreas(element, "none");

[svillar, 2015/06/10 07:22:37]

... these ones do not improve the tests, I agree it's better to keep the old
code which is more explicit.

[Manuel Rego, 2015/06/10 11:56:47]

Acknowledged.

 </script>
 </body>
 </html>