[CSS Grid Layout] Unknown grid area should compute to 'auto'

LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js

 (function() {
 
 function checkColumnRowValues(gridItem, columnValue, rowValue)
 {
     this.gridItem = gridItem;
     this.gridColumnValue = columnValue;
     this.gridRowValue = rowValue;
 
     var gridColumnStartEndValues = columnValue.split("/")
     this.gridColumnStartValue = gridColumnStartEndValues[0].trim();
@@ skipping 13 matching lines @@
 
 window.testColumnRowCSSParsing = function(id, columnValue, rowValue)
 {
     var gridItem = document.getElementById(id);
     checkColumnRowValues(gridItem, columnValue, rowValue);
 }
 
 window.testColumnRowJSParsing = function(columnValue, rowValue, expectedColumnValue, expectedRowValue)
 {
     var gridItem = document.createElement("div");
-    document.body.appendChild(gridItem);
+    var gridElement = document.getElementsByClassName("grid")[0];
+    gridElement.appendChild(gridItem);
     gridItem.style.gridColumn = columnValue;
     gridItem.style.gridRow = rowValue;
 
     checkColumnRowValues(gridItem, expectedColumnValue ? expectedColumnValue : columnValue, expectedRowValue ? expectedRowValue : rowValue);
 
-    document.body.removeChild(gridItem);
+    gridElement.removeChild(gridItem);
 }
 
 window.testColumnStartRowStartJSParsing = function(columnStartValue, rowStartValue, expectedColumnStartValue, expectedRowStartValue)
 {
     var gridItem = document.createElement("div");
-    document.body.appendChild(gridItem);
+    var gridElement = document.getElementsByClassName("grid")[0];
+    gridElement.appendChild(gridItem);
     gridItem.style.gridColumnStart = columnStartValue;
     gridItem.style.gridRowStart = rowStartValue;
 
     if (expectedColumnStartValue === undefined)
         expectedColumnStartValue = columnStartValue;
     if (expectedRowStartValue === undefined)
         expectedRowStartValue = rowStartValue;
 
     checkColumnRowValues(gridItem, expectedColumnStartValue + " / auto", expectedRowStartValue + " / auto");
 
-    document.body.removeChild(gridItem);
+    gridElement.removeChild(gridItem);
 }
 
 window.testColumnEndRowEndJSParsing = function(columnEndValue, rowEndValue, expectedColumnEndValue, expectedRowEndValue)
 {
     var gridItem = document.createElement("div");
-    document.body.appendChild(gridItem);
+    var gridElement = document.getElementsByClassName("grid")[0];
+    gridElement.appendChild(gridItem);
     gridItem.style.gridColumnEnd = columnEndValue;
     gridItem.style.gridRowEnd = rowEndValue;
 
     if (expectedColumnEndValue === undefined)
         expectedColumnEndValue = columnEndValue;
     if (expectedRowEndValue === undefined)
         expectedRowEndValue = rowEndValue;
 
     checkColumnRowValues(gridItem, "auto / " + expectedColumnEndValue, "auto / " + expectedRowEndValue);
 
-    document.body.removeChild(gridItem);
+    gridElement.removeChild(gridItem);
 }
 
 window.testColumnRowInvalidJSParsing = function(columnValue, rowValue)
 {
     var gridItem = document.createElement("div");
     document.body.appendChild(gridItem);
     gridItem.style.gridColumn = columnValue;
     gridItem.style.gridRow = rowValue;
 
     checkColumnRowValues(gridItem, "auto / auto", "auto / auto");
@@ skipping 113 matching lines @@
     gridItem.style.gridColumnEnd = "initial";
     checkColumnRowValues(gridItem, placeholderColumnStartValueForInitial + " / auto", placeholderRowValueForInitial);
 
     gridItem.style.gridRowEnd = "initial";
     checkColumnRowValues(gridItem, placeholderColumnStartValueForInitial + " / auto", placeholderRowStartValueForInitial + " / auto");
 
     document.body.removeChild(gridItem);
 }
 
 })();