third_party/WebKit/LayoutTests/fast/block/float/element-clears-float-without-clearance.html

   1 <!DOCTYPE html>
   2 <style>
   3 .bfc {
   4     overflow:hidden;
   5     border:solid;
   6     margin-top:1em;
   7 }
   8
   9 .float {
  10     background-color: aqua;
  11     float: left;
  12     height: 30px;
  13 }
  14
  15 .clear {
  16     clear:left;
  17     margin-top:50px;
  18     height: 50px;
  19     background-color: orange;
  20 }
  21 </style>
  22 crbug.com/434048 : The orange boxes should sit right under the float.
  23 <div class="bfc">
  24     <div>
  25         <div class="float">float</div>
  26         <div>
  27             <div class="clear">clear</div>
  28         </div>
  29     </div>
  30 </div>
  31
  32 <div class="bfc">
  33     <div>
  34         <div class="float">float</div>
  35         <div class="clear">clear</div>
  36     </div>
  37 </div>
  38
  39 <div class="bfc">
  40     <div>
  41         <div>
  42             <div class="float">float</div>
  43         </div>
  44         <div class="clear">clear</div>
  45     </div>
  46 </div>
  47
  48 crbug.com/434048 : There should be 30px between the orange box and the float.
  49 <div class="bfc">
  50     <div>
  51         <div class="float">float</div>
  52     </div>
  53     <div class="clear">clear</div>
  54 </div>
  55
  56 <div class="bfc">
  57     <div class="float">float</div>
  58     <div style="margin-top: 30px;">
  59         <div>
  60             <div class="clear">clear</div>
  61         </div>
  62     </div>
  63 </div>
  64
  65 <div class="bfc">
  66     <div class="float">float</div>
  67     <div style="margin-top: 10px;">
  68         <div>
  69             <div class="clear">clear</div>
  70         </div>
  71     </div>
  72 </div>
  73
  74 <div class="bfc">
  75     <div class="float">float</div>
  76     <div>
  77         <div class="clear">clear</div>
  78     </div>
  79 </div>
  80
  81 <div class="bfc">
  82     <div class="float">float</div>
  83     <div style="margin-top: 40px;">
  84         <div class="clear">clear</div>
  85     </div>
  86 </div>
  87
  88 <div class="bfc">
  89     <div class="float">float</div>
  90     <div class="clear">clear</div>
  91 </div>