third_party/WebKit/LayoutTests/fast/block/float/float-avoidance.html

   1 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
   2 the WinIE quirk and are behaving more like Firefox.
   3
   4 <hr>
   5
   6 The inline-level button should be below the select and fill the width of the block.
   7
   8 <p style="border:10px solid red; width:200px">Line One<br>
   9 <select style="width:50%; float:left"><option>One</select>
  10 <input type=button value="Hi" style="width:100%">
  11 </p>
  12
  13 The floating button with a percentage width should be even with the select.
  14 <p style="border:10px solid red; width:200px">Line One<br>
  15 <select style="width:50%; float:left"><option>One</select>
  16 <input type=button value="Hi" style="float:left; width:50%">
  17 <br clear=all>
  18 </p>
  19
  20 The block-level button with an auto width should be even with the select.
  21 <p style="border:10px solid red; width:200px">Line One<br>
  22 <select style="width:50%; float:left"><option>One</select>
  23 <input type=button value="Hi" style="display:block">
  24 <br clear=all>
  25 </p>
  26
  27 The block-level button with a percentage width should be even with the select.
  28 <p style="border:10px solid red; width:200px">Line One<br>
  29 <select style="width:50%; float:left"><option>One</select>
  30 <input type=button value="Hi" style="display:block; width:50%">
  31 <br clear=all>
  32 </p>
  33
  34 The floating table with a percentage width should be even with the select.
  35
  36 <p style="border:10px solid red; width:200px">Line One<br>
  37 <select style="width:50%; float:left"><option>One</select>
  38 <table border=2 style="float:left; width:50%"><tr><td>Table</table>
  39 <br clear=all>
  40 </p>
  41
  42 The floating table with an auto width should be even with the select and shrinks to use the available line width.
  43 THIS IS CURRENTLY BUGGY.
  44
  45 <p style="border:10px solid red; width:200px">Line One<br>
  46 <select style="width:50%; float:left"><option>One</select>
  47 <table border=2 style="float:right"><tr><td>Floating table that should shrink so it can be next to previous float.</table>
  48 <br clear=all>
  49 </p>
  50
  51 The block-level table below has a percentage width and should still be even with the select.  It spills out of the block.
  52
  53 <p style="border:10px solid red; width:200px">Line One<br>
  54 <select style="width:50%; float:left"><option>One</select>
  55 <table border=2 style="width:100%"><tr><td>Floating table that should shrink so it can be next to previous float.</table>
  56 <br clear=all>
  57 </p>
  58
  59
  60 The block-level table below has an auto width and should still be even with the select.  It shrinks to fit inside the block.
  61
  62 <p style="border:10px solid red; width:200px">Line One<br>
  63 <select style="width:50%; float:left"><option>One</select>
  64 <table border=2><tr><td>Floating table that should shrink so it can be next to previous float.</table>
  65 <br clear=all>
  66 </p>
  67
  68
  69
  70
  71
  72 The floating overflow section with a percentage width should be even with the select.
  73
  74 <div style="border:10px solid red; width:200px">Line One<br>
  75 <select style="width:50%; float:left"><option>One</select>
  76 <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>
  77 <br clear=all>
  78 </div>
  79
  80 The floating overflow section with an auto width should be even with the select and shrinks to use the available line width.
  81 THIS IS CURRENTLY BUGGY.
  82
  83 <div style="border:10px solid red; width:200px">Line One<br>
  84 <select style="width:50%; float:left"><option>One</select>
  85 <div border=2 style="float:left; overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
  86 <br clear=all>
  87 </div>
  88
  89 The block-level overflow section below has a percentage width and should still be even with the select.
  90
  91 <div style="border:10px solid red; width:200px">Line One<br>
  92 <select style="width:50%; float:left"><option>One</select>
  93 <div border=2 style="width:50%; overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
  94 <br clear=all>
  95 </div>
  96
  97
  98 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.
  99
 100 <div style="border:10px solid red; width:200px">Line One<br>
 101 <select style="width:50%; float:left"><option>One</select>
 102 <div border=2 style="overflow:auto">This is an overflow section with enough text to have to wrap to multiple lines.</div>
 103 <br clear=all>
 104 </div>
 105
 106
 107
 108 The floating hr with a percentage width should be even with the select.
 109
 110 <div style="border:10px solid red; width:200px">Line One<br>
 111 <select style="width:50%; float:left"><option>One</select>
 112 <hr style="float:left; width:40%; margin:2px">
 113 <br clear=all>
 114 </div>
 115
 116 The floating hr below should still be even with the select and shrinks to use its intrinsic width (which is basically like 1-2px).
 117
 118 <div style="border:10px solid red; width:200px">Line One<br>
 119 <select style="width:50%; float:left"><option>One</select>
 120 <hr style="float:left; margin:2px">
 121
 122 <br clear=all>
 123 </div>
 124
 125 The block-level hr below has a percentage width and should still be even with the select.
 126
 127 <div style="border:10px solid red; width:200px">Line One<br>
 128 <select style="width:50%; float:left"><option>One</select>
 129 <hr style="width:100%">
 130 <br clear=all>
 131 </div>
 132
 133 The block-level hr below has an auto width and should still be even with the select.  It shrinks to fit.
 134
 135 <div style="border:10px solid red; width:200px">Line One<br>
 136 <select style="width:50%; float:left"><option>One</select>
 137 <hr>
 138 <br clear=all>
 139 </div>
 140