LayoutTests/css1/formatting_model/floating_elements.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS1 Test Suite: 4.1.4 Floating Elements</title>
   2
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4 <meta http-equiv="Content-Style-Type" content="text/css">
   5
   6 <link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
   7 <style type="text/css">
   8 HR.minor {clear: both; width: 5%;}
   9 HR.major {clear: both; width: 75%; margin: 1.5em;}
  10 DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
  11 P.left, P.right {width: 10em; padding: 1em; margin: 0;
  12    border: 1px solid lime; background-color: silver;}
  13 IMG.left, IMG.right {margin: 0; border: 3px solid black;}
  14 .left {float: left;}
  15 .right {float: right;}
  16 </style></head>
  17
  18 <body><p>The style declarations which apply to the text below are:</p>
  19 <pre>HR.minor {clear: both; width: 5%;}
  20 HR.major {clear: both; width: 75%; margin: 1.5em;}
  21 DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
  22 P.left, P.right {width: 10em; padding: 1em; margin: 0;
  23    border: 1px solid lime; background-color: silver;}
  24 IMG.left, IMG.right {margin: 0; border: 3px solid black;}
  25 .left {float: left;}
  26 .right {float: right;}
  27
  28 </pre>
  29 <hr>
  30 <p> On this test page, each test is performed once with floating
  31 paragraphs, and then again with floating images.  Other than the
  32 substitution of images for pargraphs, the structure of the test is
  33 exactly the same, including the direction of the floats. </p>
  34
  35
  36 <hr class="major">
  37
  38 <div>
  39 <p class="left">This is a left-floating paragraph (first in source).</p>
  40 <p class="right">This is a right-floating paragraph (second in source).</p>
  41 This is text within the DIV.  The floating elements within this DIV
  42 should not go beyond the left or right inner edge of this DIV, which
  43 means that the borders of the floating elements should not overlap the
  44 top or side borders of the DIV. </div>
  45 <hr class="minor">
  46 <div>
  47 <img src="../resources/vblank.gif" class="left">
  48 <img src="../resources/vblank.gif" class="right"> This is text within
  49 the DIV.  The floating images within this DIV should not go beyond the
  50 left or right inner edge of this DIV, which means that the borders of
  51 the floating images should not overlap the top or side borders of the
  52 DIV. </div>
  53
  54 <hr class="major">
  55
  56 <div style="width: 27em;">
  57 <p class="left">This is the first left-floating paragraph.</p>
  58 <p class="left">This is the second left-floating paragraph.</p>
  59 <p class="left">This is the third left-floating paragraph.</p> This is
  60 text within the DIV.  The floating elements within this DIV should not
  61 go beyond the left or right inner edge of this DIV, which means that
  62 the borders of the floating elements should not overlap the top or side
  63 borders of the DIV in any way.  In addition, they should not overlap
  64 each other.  The first two should be side by side, whereas the third
  65 should be on the next "line." </div>
  66 <hr class="minor">
  67 <div style="width: 350px;">
  68 <img src="../resources/hblank1.gif" class="left" width="150" height="30">
  69 <img src="../resources/hblank2.gif" class="left" width="150" height="30">
  70 <img src="../resources/hblank2.gif" class="left" width="150" height="30">
  71 This is text within the DIV.  The floating images within this DIV should
  72 not go beyond the left or right inner edge of this DIV, which means
  73 that the borders of the floating images should not overlap the top or
  74 side borders of the DIV in any way.  In addition, they should not
  75 overlap each other.  The first two should be side by side, whereas the
  76 third should be on the next "line." </div>
  77
  78 <hr class="major">
  79
  80 <div style="width: 19em;">
  81 <p class="left">This is a left-floating paragraph (first in source).</p>
  82 <p class="right">This is a right-floating paragraph (second in source).</p>
  83 This is text within the DIV.  The floating elements within this DIV
  84 should not go beyond the left or right inner edge of this DIV, which
  85 means that the borders of the floating elements should not overlap the
  86 top or side borders of the DIV in any way.  In addition, they should
  87 not overlap each other in any way, nor should the floated elements be
  88 overwritten by the DIV text.  In addition, the floated elements should
  89 not be side-by-side, but instead the first should be floated left, and
  90 the second floated to the right below the first. </div>
  91 <hr class="minor">
  92 <div style="width: 400px;">
  93 <img src="../resources/hblank1.gif" class="left" width="250">
  94 <img src="../resources/hblank2.gif" class="right" width="250"> This is
  95 text within the DIV.  The floating images within this DIV should not go
  96 beyond the left or right inner edge of this DIV, which means that the
  97 borders of the floating images should not overlap the top or side
  98 borders of the DIV in any way.  In addition, they should not overlap
  99 each other in any way, nor should the floated elements be overwritten
 100 by the DIV text.  In addition, the floated images should not be
 101 side-by-side, but instead the first should be floated left, and the
 102 second floated to the right below the first. </div>
 103
 104 <hr class="major">
 105
 106 <div>
 107 <p class="right">This is a right-floating paragraph (first in source).</p>
 108 <p class="left">This is a left-floating paragraph (second in source).</p>
 109 This is text within the DIV.  The floating elements within this DIV
 110 should not go beyond the top side of this DIV, which means that the
 111 borders of the floating elements should not overlap the top or side
 112 borders of the DIV in any way.  In addition, the top of the
 113 left-floating box should not be higher than the top of the
 114 right-floating box. </div>
 115 <hr class="minor">
 116 <div>
 117 <img src="../resources/vblank.gif" class="left">
 118 <img src="../resources/vblank.gif" class="right"> This is text within
 119 the DIV.  The floating images within this DIV should not go beyond the
 120 top side of this DIV, which means that the borders of the floating
 121 images should not overlap the top or side borders of the DIV in any
 122 way.  In addition, the top of the left-floating image should not be
 123 higher than the top of the right-floating image. </div>
 124
 125 <hr class="major">
 126
 127 <div>
 128 This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
 129 The floating elements within this DIV should not go any higher than the
 130 line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
 131 This means that the top side of each float can be, at most, as high as
 132 the top edge of the inline element containing the content just before
 133 the floating elements occur in the source.  In order to mark these
 134 points clearly, an asterisk has been inserted just before each floated
 135 element. </div>
 136 <hr class="minor">
 137 <div>
 138 This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
 139 The floating images within this DIV should not go any higher than the
 140 line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right"> This means that the
 141 top side of each float can be, at most, as high as the top edge of the
 142 inline element containing the content just before the floating images
 143 occur in the source.  In order to mark these points clearly, an
 144 asterisk has been inserted just before each floated image. </div>
 145
 146 <hr class="major">
 147
 148 <div>
 149 This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
 150 The floating elements within this DIV should not go any higher than the
 151 line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
 152 This means that the top side of each float can be,*<p class="left">This is a left-floating paragraph (third in source).</p>
 153 at most, as high as the top edge of the inline element containing the
 154 content just before the floating elements occur in the source.  *<p class="left">This is a left-floating paragraph (fourth in source).</p>
 155 In order to mark these points clearly, an asterisk has been inserted
 156 just before each floated element.  If a line has room for a floated
 157 element, then the element should float so that its top is aligned with
 158 the top of the line-box in which the asterisk appears.  Otherwise, its
 159 top should align with the top of the next line-box. </div>
 160 <hr class="minor">
 161 <div>
 162 This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
 163 The floating images within this DIV should not go any higher than the
 164 line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right">
 165 This means that the top side of each float can be,  *<img src="../resources/vblank.gif" class="left">
 166 at most, as high as the top edge of the inline element containing the
 167 content just before the floating images occur in the source.  *<img src="../resources/vblank.gif" class="left">
 168 In order to mark these points clearly, an asterisk has been inserted
 169 just before each floated image.  If a line has room for a floated
 170 image, then the image should float so that its top is aligned with the
 171 top of the line-box in which the asterisk appears.  Otherwise, its top
 172 should align with the top of the next line-box. </div>
 173
 174 <hr class="major">
 175
 176 <div style="width: 30em;">
 177 This is *<p class="left">This is a left-floating paragraph (first in source).</p> *<p class="right">This is a right-floating paragraph (second in source).</p>
 178 text within the DIV.  Under CSS1, the left floating element should be
 179 placed in the upper left corner of the DIV, and the purple border of
 180 the DIV should abut the green border of the floating element.
 181 Similarly, the right floating element should be placed in the upper
 182 right corner of the DIV, and the purple border of the DIV should abut
 183 the green border of the floating element. The text of the DIV element
 184 should flow between and under the two floating elements. The two
 185 asterisk characters mark the insertion points of the floating elements.
 186 It is expected that, under future specifications, it may be acceptable
 187 for the top of floated elements to align with the top of the line-box
 188 following the insertion point of the floated element to avoid floating
 189 elements appearing before text which precedes it in the source
 190 document. </div>
 191 <hr class="minor">
 192 <div style="width: 30em;">
 193 This is *<img src="../resources/vblank.gif" class="left"> *<img src="../resources/vblank.gif" class="right">
 194 text within the DIV.  Under CSS1, the left floating image should be
 195 placed in the upper left corner of the DIV, and the purple border of
 196 the DIV should abut the green border of the floating image.  Similarly,
 197 the right floating image should be placed in the upper right corner of
 198 the DIV, and the purple border of the DIV should abut the green border
 199 of the floating image. The text of the DIV element should flow between
 200 and under the two floating image. The two asterisk characters mark the
 201 insertion points of the floating image.  It is expected that, under
 202 future specifications, it may be acceptable for the top of floated
 203 elements to align with the top of the line-box following the insertion
 204 point of the floated element to avoid floating elements appearing
 205 before text which precedes it in the source document. </div>
 206
 207 <hr class="major">
 208
 209
 210 <table border="1" cellspacing="0" cellpadding="3" class="tabletest">
 211 <tbody><tr>
 212 <td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td>
 213 </tr>
 214 <tr>
 215 <td bgcolor="silver"> </td>
 216 <td><p> On this test page, each test is performed once with floating
 217 paragraphs, and then again with floating images.  Other than the
 218 substitution of images for pargraphs, the structure of the test is
 219 exactly the same, including the direction of the floats. </p>
 220
 221
 222 <hr class="major">
 223
 224 <div>
 225 <p class="left">This is a left-floating paragraph (first in source).</p>
 226 <p class="right">This is a right-floating paragraph (second in source).</p>
 227 This is text within the DIV.  The floating elements within this DIV
 228 should not go beyond the left or right inner edge of this DIV, which
 229 means that the borders of the floating elements should not overlap the
 230 top or side borders of the DIV. </div>
 231 <hr class="minor">
 232 <div>
 233 <img src="../resources/vblank.gif" class="left">
 234 <img src="../resources/vblank.gif" class="right"> This is text within
 235 the DIV.  The floating images within this DIV should not go beyond the
 236 left or right inner edge of this DIV, which means that the borders of
 237 the floating images should not overlap the top or side borders of the
 238 DIV. </div>
 239
 240 <hr class="major">
 241
 242 <div style="width: 27em;">
 243 <p class="left">This is the first left-floating paragraph.</p>
 244 <p class="left">This is the second left-floating paragraph.</p>
 245 <p class="left">This is the third left-floating paragraph.</p> This is
 246 text within the DIV.  The floating elements within this DIV should not
 247 go beyond the left or right inner edge of this DIV, which means that
 248 the borders of the floating elements should not overlap the top or side
 249 borders of the DIV in any way.  In addition, they should not overlap
 250 each other.  The first two should be side by side, whereas the third
 251 should be on the next "line." </div>
 252 <hr class="minor">
 253 <div style="width: 350px;">
 254 <img src="../resources/hblank1.gif" class="left" width="150" height="30">
 255 <img src="../resources/hblank2.gif" class="left" width="150" height="30">
 256 <img src="../resources/hblank2.gif" class="left" width="150" height="30">
 257 This is text within the DIV.  The floating images within this DIV should
 258 not go beyond the left or right inner edge of this DIV, which means
 259 that the borders of the floating images should not overlap the top or
 260 side borders of the DIV in any way.  In addition, they should not
 261 overlap each other.  The first two should be side by side, whereas the
 262 third should be on the next "line." </div>
 263
 264 <hr class="major">
 265
 266 <div style="width: 19em;">
 267 <p class="left">This is a left-floating paragraph (first in source).</p>
 268 <p class="right">This is a right-floating paragraph (second in source).</p>
 269 This is text within the DIV.  The floating elements within this DIV
 270 should not go beyond the left or right inner edge of this DIV, which
 271 means that the borders of the floating elements should not overlap the
 272 top or side borders of the DIV in any way.  In addition, they should
 273 not overlap each other in any way, nor should the floated elements be
 274 overwritten by the DIV text.  In addition, the floated elements should
 275 not be side-by-side, but instead the first should be floated left, and
 276 the second floated to the right below the first. </div>
 277 <hr class="minor">
 278 <div style="width: 400px;">
 279 <img src="../resources/hblank1.gif" class="left" width="250">
 280 <img src="../resources/hblank2.gif" class="right" width="250"> This is
 281 text within the DIV.  The floating images within this DIV should not go
 282 beyond the left or right inner edge of this DIV, which means that the
 283 borders of the floating images should not overlap the top or side
 284 borders of the DIV in any way.  In addition, they should not overlap
 285 each other in any way, nor should the floated elements be overwritten
 286 by the DIV text.  In addition, the floated images should not be
 287 side-by-side, but instead the first should be floated left, and the
 288 second floated to the right below the first. </div>
 289
 290 <hr class="major">
 291
 292 <div>
 293 <p class="right">This is a right-floating paragraph (first in source).</p>
 294 <p class="left">This is a left-floating paragraph (second in source).</p>
 295 This is text within the DIV.  The floating elements within this DIV
 296 should not go beyond the top side of this DIV, which means that the
 297 borders of the floating elements should not overlap the top or side
 298 borders of the DIV in any way.  In addition, the top of the
 299 left-floating box should not be higher than the top of the
 300 right-floating box. </div>
 301 <hr class="minor">
 302 <div>
 303 <img src="../resources/vblank.gif" class="left">
 304 <img src="../resources/vblank.gif" class="right"> This is text within
 305 the DIV.  The floating images within this DIV should not go beyond the
 306 top side of this DIV, which means that the borders of the floating
 307 images should not overlap the top or side borders of the DIV in any
 308 way.  In addition, the top of the left-floating image should not be
 309 higher than the top of the right-floating image. </div>
 310
 311 <hr class="major">
 312
 313 <div>
 314 This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
 315 The floating elements within this DIV should not go any higher than the
 316 line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
 317 This means that the top side of each float can be, at most, as high as
 318 the top edge of the inline element containing the content just before
 319 the floating elements occur in the source.  In order to mark these
 320 points clearly, an asterisk has been inserted just before each floated
 321 element. </div>
 322 <hr class="minor">
 323 <div>
 324 This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
 325 The floating images within this DIV should not go any higher than the
 326 line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right"> This means that the
 327 top side of each float can be, at most, as high as the top edge of the
 328 inline element containing the content just before the floating images
 329 occur in the source.  In order to mark these points clearly, an
 330 asterisk has been inserted just before each floated image. </div>
 331
 332 <hr class="major">
 333
 334 <div>
 335 This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
 336 The floating elements within this DIV should not go any higher than the
 337 line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
 338 This means that the top side of each float can be,*<p class="left">This is a left-floating paragraph (third in source).</p>
 339 at most, as high as the top edge of the inline element containing the
 340 content just before the floating elements occur in the source.  *<p class="left">This is a left-floating paragraph (fourth in source).</p>
 341 In order to mark these points clearly, an asterisk has been inserted
 342 just before each floated element.  If a line has room for a floated
 343 element, then the element should float so that its top is aligned with
 344 the top of the line-box in which the asterisk appears.  Otherwise, its
 345 top should align with the top of the next line-box. </div>
 346 <hr class="minor">
 347 <div>
 348 This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
 349 The floating images within this DIV should not go any higher than the
 350 line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right">
 351 This means that the top side of each float can be,  *<img src="../resources/vblank.gif" class="left">
 352 at most, as high as the top edge of the inline element containing the
 353 content just before the floating images occur in the source.  *<img src="../resources/vblank.gif" class="left">
 354 In order to mark these points clearly, an asterisk has been inserted
 355 just before each floated image.  If a line has room for a floated
 356 image, then the image should float so that its top is aligned with the
 357 top of the line-box in which the asterisk appears.  Otherwise, its top
 358 should align with the top of the next line-box. </div>
 359
 360 <hr class="major">
 361
 362 <div style="width: 30em;">
 363 This is *<p class="left">This is a left-floating paragraph (first in source).</p> *<p class="right">This is a right-floating paragraph (second in source).</p>
 364 text within the DIV.  Under CSS1, the left floating element should be
 365 placed in the upper left corner of the DIV, and the purple border of
 366 the DIV should abut the green border of the floating element.
 367 Similarly, the right floating element should be placed in the upper
 368 right corner of the DIV, and the purple border of the DIV should abut
 369 the green border of the floating element. The text of the DIV element
 370 should flow between and under the two floating elements. The two
 371 asterisk characters mark the insertion points of the floating elements.
 372 It is expected that, under future specifications, it may be acceptable
 373 for the top of floated elements to align with the top of the line-box
 374 following the insertion point of the floated element to avoid floating
 375 elements appearing before text which precedes it in the source
 376 document. </div>
 377 <hr class="minor">
 378 <div style="width: 30em;">
 379 This is *<img src="../resources/vblank.gif" class="left"> *<img src="../resources/vblank.gif" class="right">
 380 text within the DIV.  Under CSS1, the left floating image should be
 381 placed in the upper left corner of the DIV, and the purple border of
 382 the DIV should abut the green border of the floating image.  Similarly,
 383 the right floating image should be placed in the upper right corner of
 384 the DIV, and the purple border of the DIV should abut the green border
 385 of the floating image. The text of the DIV element should flow between
 386 and under the two floating image. The two asterisk characters mark the
 387 insertion points of the floating image.  It is expected that, under
 388 future specifications, it may be acceptable for the top of floated
 389 elements to align with the top of the line-box following the insertion
 390 point of the floated element to avoid floating elements appearing
 391 before text which precedes it in the source document. </div>
 392
 393 <hr class="major">
 394 </td></tr></tbody></table></body></html>