[CSS Grid Layout] Prevent issues with checkLayout() in grid items

When we use checkLayout() on a grid item, the results (PASS or FAIL
messages) are added as new auto-placed items in the grid. This causes
that the grid is marked as dirty which could hide bugs in the tests.

Modify the related layout tests to use a different container for the
test results. Updated expectations accordingly.

There is one test missing
"grid-item-addition-auto-placement-update.html". Which will be modified
in the patch to fix the bug in RenderGrid::addChild() (see
https://codereview.chromium.org/198703004/).

Review URL: https://codereview.chromium.org/208133003

git-svn-id: svn://svn.chromium.org/blink/trunk@169777 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt

 This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.
 XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
 PASS
 PASS
 PASS
@@ -9,7 +11,6 @@ PASS
 PASS
 PASS
 PASS
-XXXXX XXXXXX
 PASS
 PASS
 PASS
@@ -19,7 +20,6 @@ PASS
 PASS
 PASS
 PASS
-XXXXX XXXXXX
 PASS
 PASS
 PASS

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html

@@ -24,12 +24,12 @@ function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
     gridItem.setAttribute("data-expected-width", gridItemSize.width);
     gridItem.setAttribute("data-expected-height", gridItemSize.height);
 
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, document.getElementById("test-output"));
 }
 
 function updateGridAutoRowsColumns()
 {
-    checkLayout('.grid');
+    checkLayout('.grid', document.getElementById("test-output"));
 
     // The constrained example is always sized to the min width so we don't test max width.
     updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
@@ -84,5 +84,7 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
     </div>
 </div>
 
+<div id="test-output"></div>
+
 </body>
 </html>

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt

 This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.
 XXXXX XXXXXX
+XXXXX XXXXXX
+XXXXX XXXXXX
 PASS
 PASS
 PASS
 PASS
 PASS
 PASS
-XXXXX XXXXXX
 PASS
 PASS
 PASS
 PASS
 PASS
 PASS
-XXXXX XXXXXX
 PASS
 PASS
 PASS

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html

@@ -11,7 +11,7 @@ function testLayout(gridElementID, gridTracks, size)
     var gridItem = gridElement.firstChild.nextSibling;
     gridItem.setAttribute("data-expected-width", size.width);
     gridItem.setAttribute("data-expected-height", size.height);
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, document.getElementById("test-output"));
 }
 
 function updateRowsColumns()
@@ -63,5 +63,8 @@ window.addEventListener("load", updateRowsColumns, false);
         <div class="sizedToGridArea">XXXXX XXXXXX</div>
     </div>
 </div>
+
+<div id="test-output"></div>
+
 </body>
 </html>

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update-expected.txt

 This test checks that the tracks' auto positions are recomputed after removing a grid item.
 
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
 XXXXX XXXXX XXXXX
 PASS
 PASS
 PASS
 PASS
 PASS
-XXXXX XXXXX XXXXX
 PASS
 PASS
 PASS
 PASS
 PASS
-XXXXX XXXXX XXXXX
 PASS
 PASS
 PASS
 PASS
 PASS
-XXXXX XXXXX XXXXX
 PASS
 PASS
 PASS

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html

@@ -20,30 +20,31 @@ function testRemoval(gridElementID, autoFlowElementID, size)
 
     autoFlowElement.setAttribute("data-expected-width", size.width);
     autoFlowElement.setAttribute("data-expected-height", size.height);
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, document.getElementById("test-output"));
 }
 
 function testRemovals()
 {
-    checkLayout("#autoFlowColumnElement");
+    var testOutput = document.getElementById("test-output");
+    checkLayout("#autoFlowColumnElement", testOutput);
     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
 
-    checkLayout("#autoFlowRowElement");
+    checkLayout("#autoFlowRowElement", testOutput);
     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
 
-    checkLayout("#gridAutoFlowColumnWithAutoItems");
+    checkLayout("#gridAutoFlowColumnWithAutoItems", testOutput);
     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '100' });
     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '50' });
 
-    checkLayout("#gridAutoFlowRowWithAutoAndFixedItems");
+    checkLayout("#gridAutoFlowRowWithAutoAndFixedItems", testOutput);
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
@@ -95,5 +96,7 @@ window.addEventListener("load", testRemovals, false);
     </div>
 </div>
 
+<div id="test-output"></div>
+
 </body>
 </html>

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt

 This test checks that the tracks' breadth are recomputed after removing a grid item.
 
 XXX XXX XXX
+XXX XXX XXX
+XXX XXX XXX
+XXX XXX XXX
+XXX XXX XXX
+XXX XXX XXX
+XXX XXX XXX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
+XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XXX XXX XXX
 PASS
 PASS
 PASS
-XXX XXX XXX
 PASS
 PASS
 PASS
-XXX XXX XXX
 PASS
 PASS
 PASS
-XXX XXX XXX
 PASS
 PASS
 PASS
-XXX XXX XXX
 PASS
 PASS
 PASS
-XXX XXX XXX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS
-XX XX XX XX XX XX
 PASS
 PASS
 PASS

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html

@@ -43,6 +43,7 @@
 <script>
 function testRemoval(gridElementID, size1, size2, size3)
 {
+    var testOutput = document.getElementById("test-output");
     var gridElement = document.getElementById(gridElementID);
     var gridItem1 = gridElement.firstChild.nextSibling;
     var gridItem2 = gridItem1.nextSibling.nextSibling;
@@ -53,19 +54,19 @@ function testRemoval(gridElementID, size1, size2, size3)
     gridItem2.setAttribute("data-expected-height", size1.height);
     gridItem3.setAttribute("data-expected-width", size1.width);
     gridItem3.setAttribute("data-expected-height", size1.height);
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, testOutput);
 
     gridElement.removeChild(gridItem1);
     gridItem2.setAttribute("data-expected-width", size2.width);
     gridItem2.setAttribute("data-expected-height", size2.height);
     gridItem3.setAttribute("data-expected-width", size2.width);
     gridItem3.setAttribute("data-expected-height", size2.height);
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, testOutput);
 
     gridElement.removeChild(gridItem2);
     gridItem3.setAttribute("data-expected-width", size3.width);
     gridItem3.setAttribute("data-expected-height", size3.height);
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, testOutput);
 }
 
 function testRemovals()
@@ -279,5 +280,7 @@ window.addEventListener("load", testRemovals, false);
     </div>
 </div>
 
+<div id="test-output"></div>
+
 </body>
 </html>

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html

@@ -26,7 +26,7 @@ function testLayout(gridElementID, gridTracks, size)
     var gridItem = gridElement.firstChild.nextSibling;
     gridItem.setAttribute("data-expected-width", size.width);
     gridItem.setAttribute("data-expected-height", size.height);
-    checkLayout("#" + gridElementID)
+    checkLayout("#" + gridElementID, document.getElementById("test-output"))
 }
 
 function runTests()
@@ -56,5 +56,7 @@ window.addEventListener("load", runTests, false);
     <div id="maxHeightPercent"></div>
 </div>
 
+<div id="test-output"></div>
+
 </body>
 </html>

third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt

 This test checks that we properly recompute our grid tracks' sizes when a grid item changes its grid-row or grid-column.
 
 XXXX XXXX XXXX
+XXXX XXXX XXXX
+XXXXXX XXXXXX
 PASS
 PASS
 PASS
@@ -22,7 +24,6 @@ PASS
 PASS
 PASS
 PASS
-XXXX XXXX XXXX
 PASS
 PASS
 PASS
@@ -44,7 +45,6 @@ PASS
 PASS
 PASS
 PASS
-XXXXXX XXXXXX
 PASS
 PASS
 PASS

third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html

@@ -16,7 +16,7 @@ function testPosition(gridElementID, position, size)
     gridItem.style.gridRow = position.row;
     gridItem.setAttribute("data-expected-width", size.width);
     gridItem.setAttribute("data-expected-height", size.height);
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, document.getElementById("test-output"));
 }
 
 function updateImplicitGridColumn()
@@ -121,5 +121,7 @@ window.addEventListener("load", updateImplicitGridColumn, false);
     <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
 </div>
 
+<div id="test-output"></div>
+
 </body>
 </html>