Reviewed by Darin.
[WebKit-https.git] / 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>