LayoutTests/fast/css-grid-layout/float-not-protruding-into-next-grid-item.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
     grid-auto-columns: 50px;
     grid-auto-rows: minmax(50px, -webkit-max-content);
     width: -webkit-fit-content;
 }

 .cell {
    width: 100%;
    height: 100%;
 }

 .floatChild {
    float: left;
 }

 </style>
 </head>

 <body>

 <p>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</p>

 <div class="grid">
   <div class="cell firstRowFirstColumn">
     <div class="floatChild">Float</div>
     <div class="floatChild">Float</div>
     <div class="floatChild">Float</div>
     <div class="floatChild">Float</div>
   </div>
   <div class="cell firstRowSecondColumn"></div>
   <div class="cell secondRowFirstColumn"></div>
   <div class="cell secondRowSecondColumn"></div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="resources/grid.css" rel="stylesheet">
	<style>
	.grid {
	grid-auto-columns: 50px;
	grid-auto-rows: minmax(50px, -webkit-max-content);
	width: -webkit-fit-content;
	}

	.cell {
	width: 100%;
	height: 100%;
	}

	.floatChild {
	float: left;
	}

	</style>
	</head>

	<body>

	<p>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</p>

	<div class="grid">
	<div class="cell firstRowFirstColumn">
	<div class="floatChild">Float</div>
	<div class="floatChild">Float</div>
	<div class="floatChild">Float</div>
	<div class="floatChild">Float</div>
	</div>
	<div class="cell firstRowSecondColumn"></div>
	<div class="cell secondRowFirstColumn"></div>
	<div class="cell secondRowSecondColumn"></div>
	</div>

	</body>
	</html>