chromium/src/third_party/blink/web_tests/fast/block/float/float-avoidance.html

Test of objects that avoid floats to see what they do with percentage and auto widths.  This test is designed to illustrate that we have removed
the WinIE quirk and are behaving more like Firefox.

<hr>

The inline-level button should be below the select and fill the width of the block.

<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<input type=button value="Hi" style="width:100%">
</p>

The floating button with a percentage width should be even with the select.
<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<input type=button value="Hi" style="float:left; width:50%">
<br clear=all>
</p>

The block-level button with an auto width should be even with the select.
<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<input type=button value="Hi" style="display:block">
<br clear=all>
</p>

The block-level button with a percentage width should be even with the select.
<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<input type=button value="Hi" style="display:block; width:50%">
<br clear=all>
</p>

The floating table with a percentage width should be even with the select.

<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<table border=2 style="float:left; width:50%"><tr><td>Table</table>
<br clear=all>
</p>

The floating table with an auto width should be even with the select and shrinks to use the available line width.
THIS IS CURRENTLY BUGGY.

<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<table border=2 style="float:right"><tr><td>Floating table that should shrink so it can be next to previous float.</table>
<br clear=all>
</p>

The block-level table below has a percentage width and should still be even with the select.  It spills out of the block.

<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<table border=2 style="width:100%"><tr><td>Floating table that should shrink so it can be next to previous float.</table>
<br clear=all>
</p>


The block-level table below has an auto width and should still be even with the select.  It shrinks to fit inside the block.

<p style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<table border=2><tr><td>Floating table that should shrink so it can be next to previous float.</table>
<br clear=all>
</p>





The floating overflow section with a percentage width should be even with the select.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<div border=2 style="float:left; width:50%; overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
<br clear=all>
</div>

The floating overflow section with an auto width should be even with the select and shrinks to use the available line width.
THIS IS CURRENTLY BUGGY.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<div border=2 style="float:left; overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
<br clear=all>
</div>

The block-level overflow section below has a percentage width and should still be even with the select.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<div border=2 style="width:50%; overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
<br clear=all>
</div>


The block-level overflow section below has an auto width and should still be even with the select.  It shrinks to fit inside the block.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<div border=2 style="overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
<br clear=all>
</div>



The floating hr with a percentage width should be even with the select.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<hr style="float:left; width:40%; margin:2px">
<br clear=all>
</div>

The floating hr below should still be even with the select and shrinks to use its intrinsic width (which is basically like 1-2px).

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<hr style="float:left; margin:2px">

<br clear=all>
</div>

The block-level hr below has a percentage width and should still be even with the select.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<hr style="width:100%">
<br clear=all>
</div>

The block-level hr below has an auto width and should still be even with the select.  It shrinks to fit.

<div style="border:10px solid red; width:200px">Line One<br>
<select style="width:50%; float:left"><option>One</select>
<hr>
<br clear=all>
</div>