self-collapsing-block-with-float-descendants.html

<!doctype html>
<html>
    <body>
    <div style="overflow: hidden;">
        <p> webkit.org/b/119979: The green box should be under the blue box. </p>
        <div style="height: 20px; width: 50px; background-color: blue; float:left;">
            Text1
        </div>
        <div style="margin-top:10px;clear:both;">
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div>
            </div>
        </div>
    </div>

    <div style="overflow: hidden;">
        <p> webkit.org/b/119979: The green box should be under the blue box. </p>
        <div style="height: 20px; width: 50px; background-color: blue; float:left;">
            Text1
        </div>
        <div style="margin-top:10px;clear:both;">
            <div>
                <div style="height:20px; width: 50px; float: left; background-color: green;">
                    Text2
                </div>
            </div>
        </div>
    </div>

    <div style="overflow: hidden;">
        <p> webkit.org/b/119979: The green box should be under the blue box. </p>
        <div style="height: 20px; width: 50px; background-color: blue; float:left;">
            Text1
        </div>
        <div style="margin-top:10px;clear:both;">
                <div style="height:20px; width: 50px; float: left; background-color: green;">
                    Text2
                </div>
        </div>
    </div>

    <div style="overflow: hidden;">
        <p> webkit.org/b/119979: The three green boxes should be in a row. </p>
        <div style="margin-top:10px;clear:both;">
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
        </div>
    </div>

    <div style="overflow: hidden;">
        <p> webkit.org/b/119979: The three green boxes should be in a row. </p>
        <div style="height: 20px; width: 50px; background-color: blue; float:left;">
            Text1
        </div>
        <div style="margin-top:10px;clear:both;">
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div>
            </div>
        </div>
    </div>

    <div style="overflow: hidden;">
        <p> webkit.org/b/119979: The three green boxes should be in a row. </p>
        <div style="height: 20px; width: 50px; background-color: blue; float:left;">
            Text1
        </div>
        <div style="margin-top:10px;clear:both;">
          <div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div style="height:20px; width: 50px; float: left; background-color: green;">
                Text2
            </div>
            <div>
            </div>
          </div>
        </div>
    </div>
    </body>
</html>
chromium/third_party/blink/web_tests/fast/block/margin-collapse/self-collapsing-block-with-float-descendants.html
