LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <link href="resources/grid.css" rel="stylesheet">
 <link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     grid-template-columns: 50px 100px;
     grid-template-rows: 50px 100px;
 }
 </style>
 <script src="../../resources/check-layout.js"></script>
 <script>
 function testRemoval(gridElementID, autoFlowElementID, size)
 {
     var gridElement = document.getElementById(gridElementID);
     var autoFlowElement = document.getElementById(autoFlowElementID);

     // Remove the white space and the first grid item.
     gridElement.removeChild(gridElement.firstChild);
     gridElement.removeChild(gridElement.firstChild);

     autoFlowElement.setAttribute("data-expected-width", size.width);
     autoFlowElement.setAttribute("data-expected-height", size.height);
     checkLayout("#" + gridElementID);
 }

 function testRemovals()
 {
     checkLayout("#gridAutoFlowColumnSparse");
     testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
     testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '50', 'height': '50' });

     checkLayout("#gridAutoFlowRowSparse");
     testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '50', 'height': '50' });
     testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '50', 'height': '50' });

     checkLayout("#gridAutoFlowColumnWithAutoItems");
     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");
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '50', 'height': '50' });
 }
 window.addEventListener("load", testRemovals, false);
 </script>
 <body>

 <p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>

 <div class="unconstrainedContainer">
     <div class="grid gridAutoFlowColumnSparse justifyContentStart" id="gridAutoFlowColumnSparse">
         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>

 <div class="unconstrainedContainer">
     <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse">
         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
     </div>
 </div>

 <div class="unconstrainedContainer">
     <div class="grid gridAutoFlowColumnDense justifyContentStart" id="gridAutoFlowColumnWithAutoItems">
         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>

 <div class="unconstrainedContainer">
     <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<link href="resources/grid.css" rel="stylesheet">
	<link href="resources/grid-alignment.css" rel="stylesheet">
	<style>
	.grid {
	grid-template-columns: 50px 100px;
	grid-template-rows: 50px 100px;
	}
	</style>
	<script src="../../resources/check-layout.js"></script>
	<script>
	function testRemoval(gridElementID, autoFlowElementID, size)
	{
	var gridElement = document.getElementById(gridElementID);
	var autoFlowElement = document.getElementById(autoFlowElementID);

	// Remove the white space and the first grid item.
	gridElement.removeChild(gridElement.firstChild);
	gridElement.removeChild(gridElement.firstChild);

	autoFlowElement.setAttribute("data-expected-width", size.width);
	autoFlowElement.setAttribute("data-expected-height", size.height);
	checkLayout("#" + gridElementID);
	}

	function testRemovals()
	{
	checkLayout("#gridAutoFlowColumnSparse");
	testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
	testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
	testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
	testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '50', 'height': '50' });

	checkLayout("#gridAutoFlowRowSparse");
	testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '100', 'height': '100' });
	testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '100', 'height': '50' });
	testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '50', 'height': '50' });
	testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '50', 'height': '50' });

	checkLayout("#gridAutoFlowColumnWithAutoItems");
	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");
	testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
	testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
	testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
	testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '50', 'height': '50' });
	}
	window.addEventListener("load", testRemovals, false);
	</script>
	<body>

	<p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>

	<div class="unconstrainedContainer">
	<div class="grid gridAutoFlowColumnSparse justifyContentStart" id="gridAutoFlowColumnSparse">
	<div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse">
	<div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid gridAutoFlowColumnDense justifyContentStart" id="gridAutoFlowColumnWithAutoItems">
	<div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
	<div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
	<div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
	</div>
	</div>

	</body>
	</html>