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

 <!DOCTYPE html>
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .cell {
    width: 50px;
    min-height: 50px
 }

 .invisibleFont {
    color: lime;
 }

 .floatLeft {
    float: left;
 }

 .clearLeft {
    clear: 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>
   <div class="cell floatLeft firstRowFirstColumn">
     <div class="text">Float</div>
     <div class="text">Float</div>
     <div class="text">Float</div>
     <div class="text">Float</div>
   </div>
   <div class="cell floatLeft firstRowSecondColumn">
     <div class="text invisibleFont">Float</div>
     <div class="text invisibleFont">Float</div>
     <div class="text invisibleFont">Float</div>
     <div class="text invisibleFont">Float</div>
   </div>
   <div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
   <div class="cell floatLeft secondRowSecondColumn"></div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="resources/grid.css" rel="stylesheet">
	<style>
	.cell {
	width: 50px;
	min-height: 50px
	}

	.invisibleFont {
	color: lime;
	}

	.floatLeft {
	float: left;
	}

	.clearLeft {
	clear: 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>
	<div class="cell floatLeft firstRowFirstColumn">
	<div class="text">Float</div>
	<div class="text">Float</div>
	<div class="text">Float</div>
	<div class="text">Float</div>
	</div>
	<div class="cell floatLeft firstRowSecondColumn">
	<div class="text invisibleFont">Float</div>
	<div class="text invisibleFont">Float</div>
	<div class="text invisibleFont">Float</div>
	<div class="text invisibleFont">Float</div>
	</div>
	<div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
	<div class="cell floatLeft secondRowSecondColumn"></div>
	</div>

	</body>
	</html>