[CSS Grid Layout] Grid items must set a new formatting context.
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / float-not-protruding-into-next-grid-item.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .grid {
7     -webkit-grid-auto-columns: 50px;
8     -webkit-grid-auto-rows: minmax(50px, -webkit-max-content);
9     width: -webkit-fit-content;
10 }
11
12 .cell {
13    width: 100%;
14    height: 100%;
15 }
16
17 .floatChild {
18    float: left;
19 }
20
21 </style>
22 </head>
23
24 <body>
25
26 <div>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).</div>
27
28 <div class="grid">
29   <div class="cell firstRowFirstColumn">
30     <div class="floatChild">Float</div>
31     <div class="floatChild">Float</div>
32     <div class="floatChild">Float</div>
33     <div class="floatChild">Float</div>
34   </div>
35   <div class="cell firstRowSecondColumn"></div>
36   <div class="cell secondRowFirstColumn"></div>
37   <div class="cell secondRowSecondColumn"></div>
38 </div>
39
40 </body>
41 </html>