third_party/WebKit/LayoutTests/fast/block/float/fit_line_below_floats.html

   1 <!DOCTYPE html>
   2
   3 <style>
   4 .container {
   5     width: 200px;
   6     border: 1px solid black;
   7 }
   8
   9 .float1
  10 {
  11     float: left;
  12     width: 100px;
  13     height: 50px;
  14     background: green;
  15 }
  16
  17 .float2 {
  18     float: right;
  19     width: 0px;
  20     height: 30px;
  21 }
  22
  23 .float3 {
  24     clear: right;
  25     float: right;
  26     width: 20px;
  27     height: 50px;
  28     background: green;
  29 }
  30
  31 .inlineBox {
  32     display: inline-block;
  33     width: 101px;
  34     height: 30px;
  35     background: cyan;
  36 }
  37
  38 .float4 {
  39     float: left;
  40     width: 30px;
  41     height: 30px;
  42     background: blue;
  43 }
  44
  45 /* Reverse the direction for the second test. */
  46 .second .float1, .second .float4 {
  47     float: right;
  48 }
  49
  50 .second .float2, .second .float3 {
  51     float: left;
  52 }
  53
  54 .second .float3 {
  55     clear: left;
  56 }
  57 </style>
  58
  59 <!-- LineWidth.m_left test case. -->
  60 <div class="container">
  61     <div class="float1"></div>
  62
  63     <!-- Use two floats here to make the initial m_left equal to 0. !-->
  64     <div class="float2"></div>
  65     <div class="float3"></div>
  66
  67     <div>
  68         <!-- The following div will trigger a fitBelowFloats, which should update the m_left/m_right in LineWidth. -->
  69         <div class="inlineBox"></div>
  70
  71         <!-- The following div will trigger a shrinkAvailableWidthForNewFloatIfNeeded which will only update m_left and recalculate. -->
  72         <div class="float4"></div>
  73
  74         Some text that should not overlap the floats.
  75     </div>
  76 </div>
  77
  78 <!-- LineWidth.m_right test case. -->
  79 <div class="container second">
  80     <div class="float1"></div>
  81
  82     <!-- Use two floats here to make the initial m_right equal to 0. !-->
  83     <div class="float2"></div>
  84     <div class="float3"></div>
  85
  86     <div>
  87         <!-- The following div will trigger a fitBelowFloats, which should update the m_left/m_right in LineWidth. -->
  88         <div class="inlineBox"></div>
  89
  90         <!-- The following div will trigger a shrinkAvailableWidthForNewFloatIfNeeded which will only update m_right and recalculate. -->
  91         <div class="float4"></div>
  92
  93         Some text that should not overlap the floats.
  94     </div>
  95 </div>