fit_line_below_floats.html | Explore in Territory

<!DOCTYPE html>

<style>
.container {
    width: 200px; 
    border: 1px solid black;
}

.float1
{
    float: left;
    width: 100px;
    height: 50px;
    background: green;
}

.float2 {
    float: right;
    width: 0px;
    height: 30px;
}

.float3 {
    clear: right;
    float: right;
    width: 20px;
    height: 50px;
    background: green;
}

.inlineBox {
    display: inline-block;
    width: 101px;
    height: 30px;
    background: cyan;
}

.float4 {
    float: left;
    width: 30px; 
    height: 30px; 
    background: blue;
}

/* Reverse the direction for the second test. */
.second .float1, .second .float4 {
    float: right;
}

.second .float2, .second .float3 {
    float: left;
}

.second .float3 {
    clear: left;
}
</style>

<!-- LineWidth.m_left test case. -->
<div class="container">
    <div class="float1"></div>
    
    <!-- Use two floats here to make the initial m_left equal to 0. !-->
    <div class="float2"></div>
    <div class="float3"></div>
    
    <div>
        <!-- The following div will trigger a fitBelowFloats, which should update the m_left/m_right in LineWidth. -->
        <div class="inlineBox"></div>
        
        <!-- The following div will trigger a shrinkAvailableWidthForNewFloatIfNeeded which will only update m_left and recalculate. -->
        <div class="float4"></div>
        
        Some text that should not overlap the floats.
    </div>
</div>

<!-- LineWidth.m_right test case. -->
<div class="container second">
    <div class="float1"></div>
    
    <!-- Use two floats here to make the initial m_right equal to 0. !-->
    <div class="float2"></div>
    <div class="float3"></div>
    
    <div>
        <!-- The following div will trigger a fitBelowFloats, which should update the m_left/m_right in LineWidth. -->
        <div class="inlineBox"></div>
        
        <!-- The following div will trigger a shrinkAvailableWidthForNewFloatIfNeeded which will only update m_right and recalculate. -->
        <div class="float4"></div>
        
        Some text that should not overlap the floats.
    </div>
</div>
chromium/third_party/blink/web_tests/fast/block/float/fit_line_below_floats.html
