third_party/WebKit/LayoutTests/css3/flexbox/floated-flexitem.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 #flexbox {
   5   background-color: lightgrey;
   6   align-items: flex-start;
   7 }
   8 #flexbox > * {
   9   border: 1px solid green;
  10 }
  11 </style>
  12 <body>
  13 <p>
  14 This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
  15 a green border because the anonymous block is the flex item.
  16 </p>
  17 <div id="flexbox" style="display: flex">
  18
  19     <!-- flex item: block child -->
  20     <div id="item1">block</div>
  21
  22     <!-- flex item: floated element; floating is ignored -->
  23     <div id="item2" style="float: left;">float</div>
  24
  25     <!-- flex item: anonymous block box around inline content -->
  26     anonymous item 3
  27
  28     <!-- flex item: inline child -->
  29     <span>
  30         item 4
  31         <!-- flex items do not split around blocks -->
  32         <div id=not-an-item>item 4</div>
  33         item 4
  34     </span>
  35 </div>
  36 </body>
  37 </html>