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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .cell {
   7    width: 50px;
   8    height: auto;
   9    min-height: 50px
  10 }
  11
  12 .invisibleFont {
  13    color: lime;
  14 }
  15
  16 .floatLeft {
  17    float: left;
  18 }
  19
  20 .clearLeft {
  21    clear: left;
  22 }
  23
  24 .relative {
  25    position: relative;
  26 }
  27 </style>
  28 </head>
  29
  30 <body>
  31
  32 <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>
  33
  34 <div>
  35   <div class="cell relative floatLeft firstRowFirstColumn">
  36     <div>Float</div>
  37     <div>Float</div>
  38     <div>Float</div>
  39     <div>Float</div>
  40   </div>
  41   <div class="cell floatLeft firstRowSecondColumn">
  42     <div class="invisibleFont">Float</div>
  43     <div class="invisibleFont">Float</div>
  44     <div class="invisibleFont">Float</div>
  45     <div class="invisibleFont">Float</div>
  46   </div>
  47   <div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
  48   <div class="cell floatLeft secondRowSecondColumn"></div>
  49 </div>
  50
  51 </body>
  52 </html>