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