1c464ee4c613d3441971d5098d4d24cbe7552428
[WebKit-https.git] / LayoutTests / css1 / box_properties / float_on_text_elements-expected.txt
1 layer at (0,0) size 800x2990
2   RenderCanvas at (0,0) size 800x600
3 layer at (0,0) size 800x2990
4   RenderBlock {HTML} at (0,0) size 800x2990
5     RenderBody {BODY} at (8,8) size 784x2974 [bgcolor=#CCCCCC]
6       RenderBlock (floating) {P} at (0,0) size 392x34 [bgcolor=#FFFF00]
7         RenderText {TEXT} at (0,0) size 392x34
8           text run at (0,0) width 392: "This paragraph is of class \"one\". It has a width of 50%"
9           text run at (0,17) width 170: "and is floated to the left."
10       RenderBlock (anonymous) at (0,0) size 784x0 [bgcolor=#000000]
11         RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#CCCCCC]
12       RenderBlock {P} at (0,0) size 784x85 [bgcolor=#000000]
13         RenderText {TEXT} at (392,0) size 784x85
14           text run at (392,0) width 392: "This paragraph should start on the right side of a yellow"
15           text run at (392,17) width 392: "box which contains the previous paragraph. Since the"
16           text run at (0,34) width 784: "text of this element is much longer than the text in the previous element, the text will wrap around the yellow"
17           text run at (0,51) width 784: "box. There is no padding, border or margins on this and the previous element, so the text of the two elements"
18           text run at (0,68) width 239: "should be very close to each other."
19       RenderBlock (anonymous) at (0,85) size 784x17 [bgcolor=#000000]
20         RenderBR {BR} at (0,0) size 0x0
21       RenderBlock {HR} at (1,114) size 782x2 [bgcolor=#000000]
22       RenderBlock (floating) {P} at (0,128) size 784x68 [bgcolor=#FFFF00]
23         RenderText {TEXT} at (0,0) size 784x68
24           text run at (0,0) width 784: "This paragraph is of class \"two\". Since the width has been set to 100%, it should automatically be as wide as its"
25           text run at (0,17) width 784: "parent element allows it to be. Therefore, even though the element is floated, there is no room for other content"
26           text run at (0,34) width 784: "on the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background"
27           text run at (0,51) width 401: "has been added to this paragraph for diagnostic purposes."
28       RenderBlock (anonymous) at (0,128) size 784x86 [bgcolor=#000000]
29         RenderImage {IMG} at (0,68) size 15x15
30         RenderText {TEXT} at (15,69) size 4x17 [bgcolor=#CCCCCC]
31           text run at (15,69) width 4: " "
32         RenderBR {BR} at (0,0) size 0x0
33       RenderBlock {HR} at (1,226) size 782x2 [bgcolor=#000000]
34       RenderBlock (floating) {P} at (0,240) size 392x102 [bgcolor=#FFFF00]
35         RenderText {TEXT} at (0,0) size 392x102
36           text run at (0,0) width 392: "This paragraph is floated to the left and the orange"
37           text run at (0,17) width 392: "square image should appear to the right of the"
38           text run at (0,34) width 392: "paragraph. This paragraph has a yellow background and"
39           text run at (0,51) width 392: "no padding, margin or border. The right edge of this"
40           text run at (0,68) width 392: "yellow box should be horizontally aligned with the left"
41           text run at (0,85) width 248: "edge of the yellow box undernearth."
42       RenderBlock (anonymous) at (0,240) size 784x102 [bgcolor=#000000]
43         RenderImage {IMG} at (392,0) size 15x15
44         RenderText {TEXT} at (407,1) size 4x17 [bgcolor=#CCCCCC]
45           text run at (407,1) width 4: " "
46         RenderBR {BR} at (0,0) size 0x0
47       RenderBlock {HR} at (1,354) size 782x2 [bgcolor=#000000]
48       RenderBlock (floating) {P} at (392,368) size 392x102 [bgcolor=#FFFF00]
49         RenderText {TEXT} at (0,0) size 392x102
50           text run at (0,0) width 392: "This paragraph is floated to the right (using a STYLE"
51           text run at (0,17) width 392: "attribute) and the orange square image should appear to"
52           text run at (0,34) width 392: "the left of the paragraph. This paragraph has a yellow"
53           text run at (0,51) width 392: "background and no padding, margin or border. The left"
54           text run at (0,68) width 392: "edge of this yellow box should be horizonally aligned"
55           text run at (0,85) width 301: "with the right edge of the yellow box above."
56       RenderBlock (anonymous) at (0,368) size 784x102 [bgcolor=#000000]
57         RenderImage {IMG} at (0,0) size 15x15
58         RenderText {TEXT} at (15,1) size 4x17 [bgcolor=#CCCCCC]
59           text run at (15,1) width 4: " "
60         RenderBR {BR} at (0,0) size 0x0
61       RenderBlock {HR} at (1,482) size 782x2 [bgcolor=#000000]
62       RenderBlock {P} at (0,496) size 784x68 [bgcolor=#000000]
63         RenderBlock (floating) {SPAN} at (0,0) size 42x33 [bgcolor=#C0C0C0]
64           RenderText {TEXT} at (0,0) size 20x33
65             text run at (0,0) width 20: "T"
66         RenderText {TEXT} at (42,0) size 784x68
67           text run at (42,0) width 742: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the"
68           text run at (42,17) width 379: "paragraph, as well as bold, with a content width of 1.5"
69           text run at (421,17) width 263: "em and a background-color of silver. "
70           text run at (684,17) width 99: "The top of the"
71           text run at (0,34) width 784: "big letter \"T\" should be vertically aligned with the top of the first line of this paragraph. This is commonly known"
72           text run at (0,51) width 99: "as \"drop-cap\"."
73       RenderBlock (anonymous) at (0,564) size 784x17 [bgcolor=#000000]
74         RenderBR {BR} at (0,0) size 0x0
75       RenderBlock {HR} at (1,593) size 782x2 [bgcolor=#000000]
76       RenderBlock (floating) {P} at (478,617) size 296x237 [bgcolor=#FFFF00]
77         RenderText {TEXT} at (8,8) size 280x221
78           text run at (8,8) width 280: "This paragraph should be floated to the"
79           text run at (8,25) width 280: "right, sort of like a 'sidebar' in a"
80           text run at (8,42) width 235: "magazine article. Its width is 20"
81           text run at (243,42) width 45: "em so"
82           text run at (8,59) width 280: "the box should not be reformatted when"
83           text run at (8,76) width 280: "the size of the viewport is changed (e.g."
84           text run at (8,93) width 280: "when the window is resized). The"
85           text run at (8,110) width 280: "background color of the element is"
86           text run at (8,127) width 223: "yellow, and there should be a 3"
87           text run at (231,127) width 57: "px solid"
88           text run at (8,144) width 158: "red border outside a 5"
89           text run at (166,144) width 122: "px wide padding."
90           text run at (8,161) width 218: "Also, the element has a 10"
91           text run at (226,161) width 62: "px wide"
92           text run at (8,178) width 280: "margin around it where the blue"
93           text run at (8,195) width 280: "background of the paragraph in the"
94           text run at (8,212) width 236: "normal flow should shine through."
95       RenderBlock {P} at (0,607) size 784x187 [bgcolor=#66CCFF]
96         RenderText {TEXT} at (0,0) size 468x187
97           text run at (0,0) width 468: "This paragraph is not floating. If there is enough room, the textual"
98           text run at (0,17) width 468: "content of the paragraph should appear on the left side of the"
99           text run at (0,34) width 214: "yellow \"sidebar\" on the right. "
100           text run at (214,34) width 251: "The content of this element should"
101           text run at (0,51) width 231: "flow around the floated element. "
102           text run at (231,51) width 236: "However, the floated element may"
103           text run at (0,68) width 468: "or may not be obscured by the blue background of this element, as"
104           text run at (0,85) width 391: "the specification does not say which is drawn \"on top.\" "
105           text run at (391,85) width 75: "Even if the"
106           text run at (0,102) width 468: "floated element is obscured, it still forces the content of this"
107           text run at (0,119) width 192: "element to flow around it. "
108           text run at (192,119) width 274: "If the floated element is not obscured,"
109           text run at (0,136) width 404: "then the blue rectangle of this paragraph should extend 10"
110           text run at (404,136) width 64: "px above"
111           text run at (0,153) width 468: "and to the right of the sidebar's red border, due to the margin styles"
112           text run at (0,170) width 187: "set for the floated element."
113       RenderBlock (anonymous) at (0,794) size 784x70 [bgcolor=#000000]
114         RenderBR {BR} at (0,0) size 0x0
115       RenderBlock {HR} at (1,876) size 782x2 [bgcolor=#000000]
116       RenderBlock {DIV} at (0,890) size 784x25 [bgcolor=#66CCFF]
117         RenderBlock (floating) {DIV} at (480,14) size 290x282 [bgcolor=#FFFF00]
118           RenderBlock {P} at (5,5) size 280x272 [bgcolor=#000000]
119             RenderText {TEXT} at (0,0) size 280x272
120               text run at (0,0) width 280: "This paragraph is placed inside a DIV"
121               text run at (0,17) width 280: "element which is floated to the right."
122               text run at (0,34) width 254: "The width of the DIV element is 20"
123               text run at (254,34) width 26: "em."
124               text run at (0,51) width 280: "The background is yellow and there is a"
125               text run at (0,68) width 142: "5px padding, a 10"
126               text run at (142,68) width 138: "px margin and no"
127               text run at (0,85) width 280: "border. Since it is floated, the yellow"
128               text run at (0,102) width 280: "box should be rendered on top of the"
129               text run at (0,119) width 280: "background and borders of adjacent"
130               text run at (0,136) width 280: "non-floated elements. To the left of this"
131               text run at (0,153) width 280: "yellow box there should be a short"
132               text run at (0,170) width 280: "paragraph with a blue background and a"
133               text run at (0,187) width 280: "red border. The yellow box should be"
134               text run at (0,204) width 280: "rendered on top of the bottom red"
135               text run at (0,221) width 280: "border. I.e., the bottom red border will"
136               text run at (0,238) width 280: "appear broken where it's overlaid by the"
137               text run at (0,255) width 115: "yellow rectangle."
138         RenderBlock (anonymous) at (4,4) size 776x0 [bgcolor=#000000]
139           RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
140         RenderBlock {P} at (4,4) size 776x17 [bgcolor=#000000]
141           RenderText {TEXT} at (0,0) size 295x17
142             text run at (0,0) width 295: "See description in the box on the right side"
143       RenderBlock (anonymous) at (0,915) size 784x281 [bgcolor=#000000]
144         RenderBR {BR} at (0,0) size 0x0
145       RenderBlock {HR} at (1,1208) size 782x2 [bgcolor=#000000]
146       RenderBlock (floating) {DIV} at (0,1222) size 196x68 [bgcolor=#66CCFF]
147         RenderBlock {P} at (0,0) size 196x68 [bgcolor=#000000]
148           RenderText {TEXT} at (0,0) size 196x68
149             text run at (0,0) width 196: "This paragraph is inside a"
150             text run at (0,17) width 196: "DIV which is floated left. Its "
151             text run at (0,34) width 196: "background is blue and the"
152             text run at (0,51) width 91: "width is 25%."
153       RenderBlock (floating) {DIV} at (588,1222) size 196x68 [bgcolor=#FFFF00]
154         RenderBlock {P} at (0,0) size 196x68 [bgcolor=#000000]
155           RenderText {TEXT} at (0,0) size 196x68
156             text run at (0,0) width 196: "This paragraph is inside a"
157             text run at (0,17) width 196: "DIV which is floated right."
158             text run at (0,34) width 21: "Its "
159             text run at (21,34) width 175: "background is yellow and"
160             text run at (0,51) width 117: "the width is 25%."
161       RenderBlock {P} at (0,1222) size 784x34 [bgcolor=#000000]
162         RenderText {TEXT} at (196,0) size 392x34
163           text run at (196,0) width 392: "This paragraph should appear between a blue box (on"
164           text run at (196,17) width 57: "the left) "
165           text run at (253,17) width 213: "and a yellow box (on the right)."
166       RenderBlock (anonymous) at (0,1256) size 784x34 [bgcolor=#000000]
167         RenderBR {BR} at (0,0) size 0x0
168       RenderBlock {HR} at (1,1302) size 782x2 [bgcolor=#000000]
169       RenderBlock (floating) {DIV} at (0,1316) size 588x119 [bgcolor=#66CCFF]
170         RenderBlock (floating) {DIV} at (431,0) size 147x51 [bgcolor=#FFFF00]
171           RenderBlock {P} at (0,0) size 147x51 [bgcolor=#000000]
172             RenderText {TEXT} at (0,0) size 147x51
173               text run at (0,0) width 147: "See description in"
174               text run at (0,17) width 147: "the box on the left"
175               text run at (0,34) width 33: "side."
176         RenderBlock (anonymous) at (0,0) size 588x0 [bgcolor=#000000]
177           RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
178         RenderBlock {P} at (0,0) size 588x119 [bgcolor=#000000]
179           RenderText {TEXT} at (0,0) size 584x119
180             text run at (0,0) width 431: "This paragraph is inside a DIV which is floated left. The "
181             text run at (0,17) width 431: "background of the DIV element is blue and its width is 75%."
182             text run at (0,34) width 33: "This "
183             text run at (33,34) width 395: "text should all be inside the blue rectangle. The blue DIV "
184             text run at (0,51) width 414: "element has another DIV element as a child. It has a yellow "
185             text run at (414,51) width 169: "background color and is"
186             text run at (0,68) width 227: "floated to the right. Since it is a "
187             text run at (227,68) width 355: "child of the blue DIV, the yellow DIV should appear"
188             text run at (0,85) width 71: "inside the "
189             text run at (71,85) width 428: "blue rectangle. Due to it being floated to the right and having "
190             text run at (499,85) width 30: "a 10"
191             text run at (529,85) width 55: "px right"
192             text run at (0,102) width 309: "margin, the yellow rectange should have a 10"
193             text run at (309,102) width 56: "px blue "
194             text run at (365,102) width 156: "stripe on its right side."
195       RenderBlock (anonymous) at (0,1316) size 784x119 [bgcolor=#000000]
196         RenderBR {BR} at (0,0) size 0x0
197       RenderBlock {HR} at (1,1447) size 782x2 [bgcolor=#000000]
198       RenderTable {TABLE} at (0,1461) size 784x1513 [bgcolor=#000000]
199         RenderTableSection {TBODY} at (1,1) size 0x1511
200           RenderTableRow {TR} at (0,0) size 0x0
201             RenderTableCell {TD} at (0,0) size 782x25 [bgcolor=#C0C0C0] [r=0 c=0 rs=1 cs=2]
202               RenderInline {STRONG} at (0,0) size 164x17 [bgcolor=#000000]
203                 RenderText {TEXT} at (4,4) size 164x17
204                   text run at (4,4) width 164: "TABLE Testing Section"
205           RenderTableRow {TR} at (0,0) size 0x0
206             RenderTableCell {TD} at (0,755) size 12x25 [bgcolor=#C0C0C0] [r=1 c=0 rs=1 cs=1]
207               RenderText {TEXT} at (4,4) size 4x17
208                 text run at (4,4) width 4: "\x{A0}"
209             RenderTableCell {TD} at (12,25) size 770x1486 [r=1 c=1 rs=1 cs=1]
210               RenderBlock (floating) {P} at (4,4) size 381x34 [bgcolor=#FFFF00]
211                 RenderText {TEXT} at (0,0) size 381x34
212                   text run at (0,0) width 381: "This paragraph is of class \"one\". It has a width of 50%"
213                   text run at (0,17) width 170: "and is floated to the left."
214               RenderBlock (anonymous) at (4,4) size 762x0
215                 RenderText {TEXT} at (0,0) size 0x0
216               RenderBlock {P} at (4,4) size 762x85
217                 RenderText {TEXT} at (381,0) size 762x85
218                   text run at (381,0) width 381: "This paragraph should start on the right side of a"
219                   text run at (381,17) width 381: "yellow box which contains the previous paragraph."
220                   text run at (0,34) width 762: "Since the text of this element is much longer than the text in the previous element, the text will wrap around"
221                   text run at (0,51) width 762: "the yellow box. There is no padding, border or margins on this and the previous element, so the text of the"
222                   text run at (0,68) width 334: "two elements should be very close to each other."
223               RenderBlock (anonymous) at (4,89) size 762x17
224                 RenderBR {BR} at (0,0) size 0x0
225               RenderBlock {HR} at (5,118) size 760x2
226               RenderBlock (floating) {P} at (4,132) size 762x68 [bgcolor=#FFFF00]
227                 RenderText {TEXT} at (0,0) size 762x68
228                   text run at (0,0) width 762: "This paragraph is of class \"two\". Since the width has been set to 100%, it should automatically be as wide as its"
229                   text run at (0,17) width 762: "parent element allows it to be. Therefore, even though the element is floated, there is no room for other"
230                   text run at (0,34) width 762: "content on the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow"
231                   text run at (0,51) width 487: "background has been added to this paragraph for diagnostic purposes."
232               RenderBlock (anonymous) at (4,132) size 762x86
233                 RenderImage {IMG} at (0,68) size 15x15
234                 RenderText {TEXT} at (15,69) size 4x17
235                   text run at (15,69) width 4: " "
236                 RenderBR {BR} at (0,0) size 0x0
237               RenderBlock {HR} at (5,230) size 760x2
238               RenderBlock (floating) {P} at (4,244) size 381x102 [bgcolor=#FFFF00]
239                 RenderText {TEXT} at (0,0) size 381x102
240                   text run at (0,0) width 381: "This paragraph is floated to the left and the orange"
241                   text run at (0,17) width 381: "square image should appear to the right of the"
242                   text run at (0,34) width 381: "paragraph. This paragraph has a yellow background"
243                   text run at (0,51) width 381: "and no padding, margin or border. The right edge of"
244                   text run at (0,68) width 381: "this yellow box should be horizontally aligned with the"
245                   text run at (0,85) width 275: "left edge of the yellow box undernearth."
246               RenderBlock (anonymous) at (4,244) size 762x102
247                 RenderImage {IMG} at (381,0) size 15x15
248                 RenderText {TEXT} at (396,1) size 4x17
249                   text run at (396,1) width 4: " "
250                 RenderBR {BR} at (0,0) size 0x0
251               RenderBlock {HR} at (5,358) size 760x2
252               RenderBlock (floating) {P} at (385,372) size 381x102 [bgcolor=#FFFF00]
253                 RenderText {TEXT} at (0,0) size 381x102
254                   text run at (0,0) width 381: "This paragraph is floated to the right (using a STYLE"
255                   text run at (0,17) width 381: "attribute) and the orange square image should appear"
256                   text run at (0,34) width 381: "to the left of the paragraph. This paragraph has a"
257                   text run at (0,51) width 381: "yellow background and no padding, margin or border."
258                   text run at (0,68) width 381: "The left edge of this yellow box should be horizonally"
259                   text run at (0,85) width 355: "aligned with the right edge of the yellow box above."
260               RenderBlock (anonymous) at (4,372) size 762x102
261                 RenderImage {IMG} at (0,0) size 15x15
262                 RenderText {TEXT} at (15,1) size 4x17
263                   text run at (15,1) width 4: " "
264                 RenderBR {BR} at (0,0) size 0x0
265               RenderBlock {HR} at (5,486) size 760x2
266               RenderBlock {P} at (4,500) size 762x68
267                 RenderBlock (floating) {SPAN} at (0,0) size 42x33 [bgcolor=#C0C0C0]
268                   RenderText {TEXT} at (0,0) size 20x33
269                     text run at (0,0) width 20: "T"
270                 RenderText {TEXT} at (42,0) size 762x68
271                   text run at (42,0) width 720: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the"
272                   text run at (42,17) width 381: "paragraph, as well as bold, with a content width of 1.5"
273                   text run at (423,17) width 265: "em and a background-color of silver. "
274                   text run at (688,17) width 73: "The top of"
275                   text run at (0,34) width 762: "the big letter \"T\" should be vertically aligned with the top of the first line of this paragraph. This is commonly"
276                   text run at (0,51) width 148: "known as \"drop-cap\"."
277               RenderBlock (anonymous) at (4,568) size 762x17
278                 RenderBR {BR} at (0,0) size 0x0
279               RenderBlock {HR} at (5,597) size 760x2
280               RenderBlock (floating) {P} at (460,621) size 296x237 [bgcolor=#FFFF00]
281                 RenderText {TEXT} at (8,8) size 280x221
282                   text run at (8,8) width 280: "This paragraph should be floated to the"
283                   text run at (8,25) width 280: "right, sort of like a 'sidebar' in a"
284                   text run at (8,42) width 235: "magazine article. Its width is 20"
285                   text run at (243,42) width 45: "em so"
286                   text run at (8,59) width 280: "the box should not be reformatted when"
287                   text run at (8,76) width 280: "the size of the viewport is changed (e.g."
288                   text run at (8,93) width 280: "when the window is resized). The"
289                   text run at (8,110) width 280: "background color of the element is"
290                   text run at (8,127) width 223: "yellow, and there should be a 3"
291                   text run at (231,127) width 57: "px solid"
292                   text run at (8,144) width 158: "red border outside a 5"
293                   text run at (166,144) width 122: "px wide padding."
294                   text run at (8,161) width 218: "Also, the element has a 10"
295                   text run at (226,161) width 62: "px wide"
296                   text run at (8,178) width 280: "margin around it where the blue"
297                   text run at (8,195) width 280: "background of the paragraph in the"
298                   text run at (8,212) width 236: "normal flow should shine through."
299               RenderBlock {P} at (4,611) size 762x204 [bgcolor=#66CCFF]
300                 RenderText {TEXT} at (0,0) size 446x204
301                   text run at (0,0) width 446: "This paragraph is not floating. If there is enough room, the"
302                   text run at (0,17) width 446: "textual content of the paragraph should appear on the left side"
303                   text run at (0,34) width 252: "of the yellow \"sidebar\" on the right. "
304                   text run at (252,34) width 193: "The content of this element"
305                   text run at (0,51) width 295: "should flow around the floated element. "
306                   text run at (295,51) width 148: "However, the floated"
307                   text run at (0,68) width 446: "element may or may not be obscured by the blue background of"
308                   text run at (0,85) width 446: "this element, as the specification does not say which is drawn"
309                   text run at (0,102) width 67: "\"on top.\" "
310                   text run at (67,102) width 377: "Even if the floated element is obscured, it still forces"
311                   text run at (0,119) width 346: "the content of this element to flow around it. "
312                   text run at (346,119) width 96: "If the floated"
313                   text run at (0,136) width 446: "element is not obscured, then the blue rectangle of this"
314                   text run at (0,153) width 203: "paragraph should extend 10"
315                   text run at (203,153) width 243: "px above and to the right of the"
316                   text run at (0,170) width 446: "sidebar's red border, due to the margin styles set for the floated"
317                   text run at (0,187) width 60: "element."
318               RenderBlock (anonymous) at (4,815) size 762x53
319                 RenderBR {BR} at (0,0) size 0x0
320               RenderBlock {HR} at (5,880) size 760x2
321               RenderBlock {DIV} at (4,894) size 762x25 [bgcolor=#66CCFF]
322                 RenderBlock (floating) {DIV} at (458,14) size 290x282 [bgcolor=#FFFF00]
323                   RenderBlock {P} at (5,5) size 280x272 [bgcolor=#000000]
324                     RenderText {TEXT} at (0,0) size 280x272
325                       text run at (0,0) width 280: "This paragraph is placed inside a DIV"
326                       text run at (0,17) width 280: "element which is floated to the right."
327                       text run at (0,34) width 254: "The width of the DIV element is 20"
328                       text run at (254,34) width 26: "em."
329                       text run at (0,51) width 280: "The background is yellow and there is a"
330                       text run at (0,68) width 142: "5px padding, a 10"
331                       text run at (142,68) width 138: "px margin and no"
332                       text run at (0,85) width 280: "border. Since it is floated, the yellow"
333                       text run at (0,102) width 280: "box should be rendered on top of the"
334                       text run at (0,119) width 280: "background and borders of adjacent"
335                       text run at (0,136) width 280: "non-floated elements. To the left of this"
336                       text run at (0,153) width 280: "yellow box there should be a short"
337                       text run at (0,170) width 280: "paragraph with a blue background and a"
338                       text run at (0,187) width 280: "red border. The yellow box should be"
339                       text run at (0,204) width 280: "rendered on top of the bottom red"
340                       text run at (0,221) width 280: "border. I.e., the bottom red border will"
341                       text run at (0,238) width 280: "appear broken where it's overlaid by the"
342                       text run at (0,255) width 115: "yellow rectangle."
343                 RenderBlock (anonymous) at (4,4) size 754x0 [bgcolor=#000000]
344                   RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
345                 RenderBlock {P} at (4,4) size 754x17 [bgcolor=#000000]
346                   RenderText {TEXT} at (0,0) size 295x17
347                     text run at (0,0) width 295: "See description in the box on the right side"
348               RenderBlock (anonymous) at (4,919) size 762x281
349                 RenderBR {BR} at (0,0) size 0x0
350               RenderBlock {HR} at (5,1212) size 760x2
351               RenderBlock (floating) {DIV} at (4,1226) size 190x68 [bgcolor=#66CCFF]
352                 RenderBlock {P} at (0,0) size 190x68 [bgcolor=#000000]
353                   RenderText {TEXT} at (0,0) size 190x68
354                     text run at (0,0) width 190: "This paragraph is inside a"
355                     text run at (0,17) width 190: "DIV which is floated left. Its"
356                     text run at (0,34) width 190: "background is blue and the"
357                     text run at (0,51) width 91: "width is 25%."
358               RenderBlock (floating) {DIV} at (576,1226) size 190x68 [bgcolor=#FFFF00]
359                 RenderBlock {P} at (0,0) size 190x68 [bgcolor=#000000]
360                   RenderText {TEXT} at (0,0) size 190x68
361                     text run at (0,0) width 190: "This paragraph is inside a"
362                     text run at (0,17) width 190: "DIV which is floated right."
363                     text run at (0,34) width 27: "Its "
364                     text run at (27,34) width 157: "background is yellow"
365                     text run at (0,51) width 147: "and the width is 25%."
366               RenderBlock {P} at (4,1226) size 762x34
367                 RenderText {TEXT} at (190,0) size 382x34
368                   text run at (190,0) width 382: "This paragraph should appear between a blue box (on"
369                   text run at (190,17) width 57: "the left) "
370                   text run at (247,17) width 213: "and a yellow box (on the right)."
371               RenderBlock (anonymous) at (4,1260) size 762x34
372                 RenderBR {BR} at (0,0) size 0x0
373               RenderBlock {HR} at (5,1306) size 760x2
374               RenderBlock (floating) {DIV} at (4,1320) size 571x136 [bgcolor=#66CCFF]
375                 RenderBlock (floating) {DIV} at (419,0) size 142x51 [bgcolor=#FFFF00]
376                   RenderBlock {P} at (0,0) size 142x51 [bgcolor=#000000]
377                     RenderText {TEXT} at (0,0) size 142x51
378                       text run at (0,0) width 142: "See description in"
379                       text run at (0,17) width 142: "the box on the left"
380                       text run at (0,34) width 33: "side."
381                 RenderBlock (anonymous) at (0,0) size 571x0 [bgcolor=#000000]
382                   RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
383                 RenderBlock {P} at (0,0) size 571x136 [bgcolor=#000000]
384                   RenderText {TEXT} at (0,0) size 568x136
385                     text run at (0,0) width 419: "This paragraph is inside a DIV which is floated left. The "
386                     text run at (0,17) width 419: "background of the DIV element is blue and its width is 75%."
387                     text run at (0,34) width 34: "This "
388                     text run at (34,34) width 374: "text should all be inside the blue rectangle. The blue"
389                     text run at (0,51) width 28: "DIV "
390                     text run at (28,51) width 413: "element has another DIV element as a child. It has a yellow "
391                     text run at (441,51) width 121: "background color"
392                     text run at (0,68) width 270: "and is floated to the right. Since it is a "
393                     text run at (270,68) width 298: "child of the blue DIV, the yellow DIV should"
394                     text run at (0,85) width 123: "appear inside the "
395                     text run at (123,85) width 432: "blue rectangle. Due to it being floated to the right and having "
396                     text run at (555,85) width 8: "a"
397                     text run at (0,102) width 390: "10px right margin, the yellow rectange should have a 10"
398                     text run at (390,102) width 57: "px blue "
399                     text run at (447,102) width 120: "stripe on its right"
400                     text run at (0,119) width 33: "side."
401               RenderBlock (anonymous) at (4,1320) size 762x136
402                 RenderBR {BR} at (0,0) size 0x0
403               RenderBlock {HR} at (5,1468) size 760x2