third_party/WebKit/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     grid-auto-columns: minmax(50px, max-content);
   8     grid-auto-rows: minmax(50px, max-content);
   9     width: -webkit-fit-content;
  10 }
  11
  12 .floatChild {
  13    float: left;
  14    clear: both;
  15 }
  16
  17 </style>
  18 </style>
  19 </head>
  20
  21 <body>
  22
  23 <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>
  24
  25 <div class="grid">
  26   <div class="firstRowFirstColumn">
  27     <div class="floatChild">Float</div>
  28     <div class="floatChild">Float</div>
  29     <div class="floatChild">Float</div>
  30     <div class="floatChild">Float</div>
  31   </div>
  32   <div class="firstRowSecondColumn"></div>
  33   <div class="secondRowFirstColumn"></div>
  34   <div class="secondRowSecondColumn"></div>
  35 </div>
  36
  37 </body>
  38 </html>