1b34bece54a81e45c80bbff8e4461eafcb07bfe9
[WebKit-https.git] / LayoutTests / platform / gtk / css1 / box_properties / float_on_text_elements-expected.txt
1 layer at (0,0) size 785x2589
2   RenderView at (0,0) size 785x600
3 layer at (0,0) size 785x2589
4   RenderBlock {HTML} at (0,0) size 785x2589
5     RenderBody {BODY} at (8,8) size 769x2573 [bgcolor=#CCCCCC]
6       RenderBlock (floating) {P} at (0,0) size 385x34 [bgcolor=#FFFF00]
7         RenderText {#text} at (0,0) size 384x34
8           text run at (0,0) width 384: "This paragraph is of class \"one\". It has a width of 50% and"
9           text run at (0,17) width 124: "is floated to the left."
10       RenderBlock {P} at (0,0) size 769x85
11         RenderText {#text} at (384,0) size 769x85
12           text run at (384,0) width 385: "This paragraph should start on the right side of a yellow box"
13           text run at (384,17) width 385: "which contains the previous paragraph. Since the text of this"
14           text run at (0,34) width 769: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no"
15           text run at (0,51) width 769: "padding, border or margins on this and the previous element, so the text of the two elements should be very close to each"
16           text run at (0,68) width 36: "other."
17       RenderBlock (anonymous) at (0,85) size 769x17
18         RenderBR {BR} at (0,0) size 0x17
19       RenderBlock {HR} at (0,110) size 769x2 [border: (1px inset #000000)]
20       RenderBlock (floating) {P} at (0,120) size 769x68 [bgcolor=#FFFF00]
21         RenderText {#text} at (0,0) size 769x68
22           text run at (0,0) width 769: "This paragraph is of class \"two\". Since the width has been set to 100%, it should automatically be as wide as its parent"
23           text run at (0,17) width 769: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a"
24           text run at (0,34) width 769: "orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this"
25           text run at (0,51) width 217: "paragraph for diagnostic purposes."
26       RenderBlock (anonymous) at (0,120) size 769x86
27         RenderImage {IMG} at (0,68) size 15x15
28         RenderText {#text} at (15,69) size 4x17
29           text run at (15,69) width 4: " "
30         RenderBR {BR} at (19,83) size 0x0
31       RenderBlock {HR} at (0,214) size 769x2 [border: (1px inset #000000)]
32       RenderBlock (floating) {P} at (0,224) size 385x102 [bgcolor=#FFFF00]
33         RenderText {#text} at (0,0) size 384x102
34           text run at (0,0) width 384: "This paragraph is floated to the left and the orange square"
35           text run at (0,17) width 384: "image should appear to the right of the paragraph. This"
36           text run at (0,34) width 384: "paragraph has a yellow background and no padding, margin"
37           text run at (0,51) width 384: "or border. The right edge of this yellow box should be"
38           text run at (0,68) width 384: "horizontally aligned with the left edge of the yellow box"
39           text run at (0,85) width 79: "undernearth."
40       RenderBlock (anonymous) at (0,224) size 769x102
41         RenderImage {IMG} at (384,0) size 16x15
42         RenderText {#text} at (399,1) size 5x17
43           text run at (399,1) width 5: " "
44         RenderBR {BR} at (403,15) size 1x0
45       RenderBlock {HR} at (0,334) size 769x2 [border: (1px inset #000000)]
46       RenderBlock (floating) {P} at (384,344) size 385x102 [bgcolor=#FFFF00]
47         RenderText {#text} at (0,0) size 384x102
48           text run at (0,0) width 384: "This paragraph is floated to the right (using a STYLE"
49           text run at (0,17) width 384: "attribute) and the orange square image should appear to the"
50           text run at (0,34) width 384: "left of the paragraph. This paragraph has a yellow"
51           text run at (0,51) width 384: "background and no padding, margin or border. The left edge"
52           text run at (0,68) width 384: "of this yellow box should be horizonally aligned with the"
53           text run at (0,85) width 224: "right edge of the yellow box above."
54       RenderBlock (anonymous) at (0,344) size 769x102
55         RenderImage {IMG} at (0,0) size 15x15
56         RenderText {#text} at (15,1) size 4x17
57           text run at (15,1) width 4: " "
58         RenderBR {BR} at (19,15) size 0x0
59       RenderBlock {HR} at (0,454) size 769x2 [border: (1px inset #000000)]
60       RenderBlock {P} at (0,464) size 769x51
61         RenderBlock (floating) {SPAN} at (0,0) size 48x36 [bgcolor=#C0C0C0]
62           RenderText {#text} at (0,0) size 21x36
63             text run at (0,0) width 21: "T"
64         RenderText {#text} at (48,0) size 721x51
65           text run at (48,0) width 721: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as"
66           text run at (48,17) width 496: "well as bold, with a content width of 1.5em and a background-color of silver. "
67           text run at (544,17) width 225: "The top of the big letter \"T\" should"
68           text run at (48,34) width 675: "be vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."
69       RenderBlock (anonymous) at (0,515) size 769x17
70         RenderBR {BR} at (0,0) size 0x17
71       RenderBlock {HR} at (0,540) size 769x2 [border: (1px inset #000000)]
72       RenderBlock (floating) {P} at (423,560) size 336x186 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
73         RenderText {#text} at (8,8) size 320x170
74           text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
75           text run at (8,25) width 320: "of like a 'sidebar' in a magazine article. Its width is"
76           text run at (8,42) width 320: "20em so the box should not be reformatted when"
77           text run at (8,59) width 320: "the size of the viewport is changed (e.g. when the"
78           text run at (8,76) width 320: "window is resized). The background color of the"
79           text run at (8,93) width 320: "element is yellow, and there should be a 3px solid"
80           text run at (8,110) width 320: "red border outside a 5px wide padding. Also, the"
81           text run at (8,127) width 320: "element has a 10px wide margin around it where"
82           text run at (8,144) width 320: "the blue background of the paragraph in the"
83           text run at (8,161) width 217: "normal flow should shine through."
84       RenderBlock {P} at (0,550) size 769x187 [bgcolor=#66CCFF]
85         RenderText {#text} at (0,0) size 413x187
86           text run at (0,0) width 413: "This paragraph is not floating. If there is enough room, the textual"
87           text run at (0,17) width 413: "content of the paragraph should appear on the left side of the"
88           text run at (0,34) width 193: "yellow \"sidebar\" on the right. "
89           text run at (193,34) width 220: "The content of this element should"
90           text run at (0,51) width 219: "flow around the floated element. "
91           text run at (219,51) width 194: "However, the floated element"
92           text run at (0,68) width 413: "may or may not be obscured by the blue background of this"
93           text run at (0,85) width 413: "element, as the specification does not say which is drawn \"on"
94           text run at (0,102) width 37: "top.\" "
95           text run at (37,102) width 376: "Even if the floated element is obscured, it still forces the"
96           text run at (0,119) width 263: "content of this element to flow around it. "
97           text run at (263,119) width 150: "If the floated element is"
98           text run at (0,136) width 413: "not obscured, then the blue rectangle of this paragraph should"
99           text run at (0,153) width 413: "extend 10px above and to the right of the sidebar's red border,"
100           text run at (0,170) width 319: "due to the margin styles set for the floated element."
101       RenderBlock (anonymous) at (0,737) size 769x19
102         RenderBR {BR} at (0,0) size 0x17
103       RenderBlock {HR} at (0,764) size 769x2 [border: (1px inset #000000)]
104       RenderBlock {DIV} at (0,774) size 769x25 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
105         RenderBlock (floating) {DIV} at (425,14) size 330x214 [bgcolor=#FFFF00]
106           RenderBlock {P} at (5,5) size 320x204
107             RenderText {#text} at (0,0) size 320x204
108               text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
109               text run at (0,17) width 320: "which is floated to the right. The width of the DIV"
110               text run at (0,34) width 320: "element is 20em. The background is yellow and"
111               text run at (0,51) width 320: "there is a 5px padding, a 10px margin and no"
112               text run at (0,68) width 320: "border. Since it is floated, the yellow box should"
113               text run at (0,85) width 320: "be rendered on top of the background and borders"
114               text run at (0,102) width 320: "of adjacent non-floated elements. To the left of this"
115               text run at (0,119) width 320: "yellow box there should be a short paragraph with"
116               text run at (0,136) width 320: "a blue background and a red border. The yellow"
117               text run at (0,153) width 320: "box should be rendered on top of the bottom red"
118               text run at (0,170) width 320: "border. I.e., the bottom red border will appear"
119               text run at (0,187) width 318: "broken where it's overlaid by the yellow rectangle."
120         RenderBlock {P} at (4,4) size 761x17
121           RenderText {#text} at (0,0) size 268x17
122             text run at (0,0) width 268: "See description in the box on the right side"
123       RenderBlock (anonymous) at (0,799) size 769x213
124         RenderBR {BR} at (0,0) size 0x17
125       RenderBlock {HR} at (0,1020) size 769x2 [border: (1px inset #000000)]
126       RenderBlock (floating) {DIV} at (0,1030) size 193x68 [bgcolor=#66CCFF]
127         RenderBlock {P} at (0,0) size 193x68
128           RenderText {#text} at (0,0) size 192x68
129             text run at (0,0) width 192: "This paragraph is inside a"
130             text run at (0,17) width 192: "DIV which is floated left. Its"
131             text run at (0,34) width 192: "background is blue and the"
132             text run at (0,51) width 87: "width is 25%."
133       RenderBlock (floating) {DIV} at (576,1030) size 193x68 [bgcolor=#FFFF00]
134         RenderBlock {P} at (0,0) size 193x68
135           RenderText {#text} at (0,0) size 192x68
136             text run at (0,0) width 192: "This paragraph is inside a"
137             text run at (0,17) width 192: "DIV which is floated right. Its"
138             text run at (0,34) width 192: "background is yellow and the"
139             text run at (0,51) width 87: "width is 25%."
140       RenderBlock {P} at (0,1030) size 769x34
141         RenderText {#text} at (192,0) size 385x34
142           text run at (192,0) width 385: "This paragraph should appear between a blue box (on the"
143           text run at (192,17) width 30: "left) "
144           text run at (221,17) width 200: "and a yellow box (on the right)."
145       RenderBlock (anonymous) at (0,1064) size 769x34
146         RenderBR {BR} at (192,0) size 1x17
147       RenderBlock {HR} at (0,1106) size 769x2 [border: (1px inset #000000)]
148       RenderBlock (floating) {DIV} at (0,1116) size 577x119 [bgcolor=#66CCFF]
149         RenderBlock (floating) {DIV} at (422,0) size 145x34 [bgcolor=#FFFF00]
150           RenderBlock {P} at (0,0) size 145x34
151             RenderText {#text} at (0,0) size 144x34
152               text run at (0,0) width 144: "See description in the"
153               text run at (0,17) width 124: "box on the left side."
154         RenderBlock {P} at (0,0) size 577x119
155           RenderText {#text} at (0,0) size 576x119
156             text run at (0,0) width 422: "This paragraph is inside a DIV which is floated left. The"
157             text run at (0,17) width 422: "background of the DIV element is blue and its width is 75%. This"
158             text run at (0,34) width 365: "text should all be inside the blue rectangle. The blue DIV "
159             text run at (365,34) width 211: "element has another DIV element"
160             text run at (0,51) width 166: "as a child. It has a yellow "
161             text run at (166,51) width 362: "background color and is floated to the right. Since it is a "
162             text run at (528,51) width 48: "child of"
163             text run at (0,68) width 374: "the blue DIV, the yellow DIV should appear inside the "
164             text run at (374,68) width 202: "blue rectangle. Due to it being"
165             text run at (0,85) width 193: "floated to the right and having "
166             text run at (193,85) width 383: "a 10px right margin, the yellow rectange should have a 10px"
167             text run at (0,102) width 31: "blue "
168             text run at (31,102) width 138: "stripe on its right side."
169       RenderBlock (anonymous) at (0,1116) size 769x119
170         RenderBR {BR} at (576,0) size 1x17
171       RenderBlock {HR} at (0,1243) size 769x2 [border: (1px inset #000000)]
172       RenderTable {TABLE} at (0,1253) size 769x1320 [border: (1px outset #808080)]
173         RenderTableSection {TBODY} at (1,1) size 767x1318
174           RenderTableRow {TR} at (0,0) size 767x25
175             RenderTableCell {TD} at (0,0) size 767x25 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2]
176               RenderInline {STRONG} at (0,0) size 163x17
177                 RenderText {#text} at (4,4) size 163x17
178                   text run at (4,4) width 163: "TABLE Testing Section"
179           RenderTableRow {TR} at (0,25) size 767x1293
180             RenderTableCell {TD} at (0,659) size 12x25 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]
181               RenderText {#text} at (4,4) size 4x17
182                 text run at (4,4) width 4: " "
183             RenderTableCell {TD} at (12,25) size 755x1293 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]
184               RenderBlock (floating) {P} at (4,4) size 374x34 [bgcolor=#FFFF00]
185                 RenderText {#text} at (0,0) size 373x34
186                   text run at (0,0) width 373: "This paragraph is of class \"one\". It has a width of 50% and"
187                   text run at (0,17) width 124: "is floated to the left."
188               RenderBlock {P} at (4,4) size 747x85
189                 RenderText {#text} at (373,0) size 747x85
190                   text run at (373,0) width 374: "This paragraph should start on the right side of a yellow"
191                   text run at (373,17) width 374: "box which contains the previous paragraph. Since the text"
192                   text run at (0,34) width 747: "of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is"
193                   text run at (0,51) width 747: "no padding, border or margins on this and the previous element, so the text of the two elements should be very close to"
194                   text run at (0,68) width 69: "each other."
195               RenderBlock (anonymous) at (4,89) size 747x17
196                 RenderBR {BR} at (0,0) size 0x17
197               RenderBlock {HR} at (4,114) size 747x2 [border: (1px inset #000000)]
198               RenderBlock (floating) {P} at (4,124) size 747x68 [bgcolor=#FFFF00]
199                 RenderText {#text} at (0,0) size 747x68
200                   text run at (0,0) width 747: "This paragraph is of class \"two\". Since the width has been set to 100%, it should automatically be as wide as its parent"
201                   text run at (0,17) width 747: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides"
202                   text run at (0,34) width 747: "and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added"
203                   text run at (0,51) width 259: "to this paragraph for diagnostic purposes."
204               RenderBlock (anonymous) at (4,124) size 747x86
205                 RenderImage {IMG} at (0,68) size 15x15
206                 RenderText {#text} at (15,69) size 4x17
207                   text run at (15,69) width 4: " "
208                 RenderBR {BR} at (19,83) size 0x0
209               RenderBlock {HR} at (4,218) size 747x2 [border: (1px inset #000000)]
210               RenderBlock (floating) {P} at (4,228) size 374x102 [bgcolor=#FFFF00]
211                 RenderText {#text} at (0,0) size 373x102
212                   text run at (0,0) width 373: "This paragraph is floated to the left and the orange square"
213                   text run at (0,17) width 373: "image should appear to the right of the paragraph. This"
214                   text run at (0,34) width 373: "paragraph has a yellow background and no padding,"
215                   text run at (0,51) width 373: "margin or border. The right edge of this yellow box should"
216                   text run at (0,68) width 373: "be horizontally aligned with the left edge of the yellow box"
217                   text run at (0,85) width 79: "undernearth."
218               RenderBlock (anonymous) at (4,228) size 747x102
219                 RenderImage {IMG} at (373,0) size 16x15
220                 RenderText {#text} at (388,1) size 5x17
221                   text run at (388,1) width 5: " "
222                 RenderBR {BR} at (392,15) size 1x0
223               RenderBlock {HR} at (4,338) size 747x2 [border: (1px inset #000000)]
224               RenderBlock (floating) {P} at (377,348) size 374x102 [bgcolor=#FFFF00]
225                 RenderText {#text} at (0,0) size 373x102
226                   text run at (0,0) width 373: "This paragraph is floated to the right (using a STYLE"
227                   text run at (0,17) width 373: "attribute) and the orange square image should appear to the"
228                   text run at (0,34) width 373: "left of the paragraph. This paragraph has a yellow"
229                   text run at (0,51) width 373: "background and no padding, margin or border. The left"
230                   text run at (0,68) width 373: "edge of this yellow box should be horizonally aligned with"
231                   text run at (0,85) width 247: "the right edge of the yellow box above."
232               RenderBlock (anonymous) at (4,348) size 747x102
233                 RenderImage {IMG} at (0,0) size 15x15
234                 RenderText {#text} at (15,1) size 4x17
235                   text run at (15,1) width 4: " "
236                 RenderBR {BR} at (19,15) size 0x0
237               RenderBlock {HR} at (4,458) size 747x2 [border: (1px inset #000000)]
238               RenderBlock {P} at (4,468) size 747x68
239                 RenderBlock (floating) {SPAN} at (0,0) size 48x36 [bgcolor=#C0C0C0]
240                   RenderText {#text} at (0,0) size 21x36
241                     text run at (0,0) width 21: "T"
242                 RenderText {#text} at (48,0) size 747x68
243                   text run at (48,0) width 699: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as"
244                   text run at (48,17) width 513: "well as bold, with a content width of 1.5em and a background-color of silver. "
245                   text run at (561,17) width 186: "The top of the big letter \"T\""
246                   text run at (48,34) width 699: "should be vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-"
247                   text run at (0,51) width 33: "cap\"."
248               RenderBlock (anonymous) at (4,536) size 747x17
249                 RenderBR {BR} at (0,0) size 0x17
250               RenderBlock {HR} at (4,561) size 747x2 [border: (1px inset #000000)]
251               RenderBlock (floating) {P} at (405,581) size 336x186 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
252                 RenderText {#text} at (8,8) size 320x170
253                   text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
254                   text run at (8,25) width 320: "of like a 'sidebar' in a magazine article. Its width is"
255                   text run at (8,42) width 320: "20em so the box should not be reformatted when"
256                   text run at (8,59) width 320: "the size of the viewport is changed (e.g. when the"
257                   text run at (8,76) width 320: "window is resized). The background color of the"
258                   text run at (8,93) width 320: "element is yellow, and there should be a 3px solid"
259                   text run at (8,110) width 320: "red border outside a 5px wide padding. Also, the"
260                   text run at (8,127) width 320: "element has a 10px wide margin around it where"
261                   text run at (8,144) width 320: "the blue background of the paragraph in the"
262                   text run at (8,161) width 217: "normal flow should shine through."
263               RenderBlock {P} at (4,571) size 747x204 [bgcolor=#66CCFF]
264                 RenderText {#text} at (0,0) size 391x204
265                   text run at (0,0) width 391: "This paragraph is not floating. If there is enough room, the"
266                   text run at (0,17) width 391: "textual content of the paragraph should appear on the left side"
267                   text run at (0,34) width 260: "of the yellow \"sidebar\" on the right. "
268                   text run at (260,34) width 131: "The content of this"
269                   text run at (0,51) width 328: "element should flow around the floated element. "
270                   text run at (328,51) width 63: "However,"
271                   text run at (0,68) width 391: "the floated element may or may not be obscured by the blue"
272                   text run at (0,85) width 391: "background of this element, as the specification does not say"
273                   text run at (0,102) width 185: "which is drawn \"on top.\" "
274                   text run at (185,102) width 206: "Even if the floated element is"
275                   text run at (0,119) width 391: "obscured, it still forces the content of this element to flow"
276                   text run at (0,136) width 65: "around it. "
277                   text run at (65,136) width 326: "If the floated element is not obscured, then the blue"
278                   text run at (0,153) width 391: "rectangle of this paragraph should extend 10px above and to"
279                   text run at (0,170) width 391: "the right of the sidebar's red border, due to the margin styles"
280                   text run at (0,187) width 166: "set for the floated element."
281               RenderBlock (anonymous) at (4,775) size 747x17
282                 RenderBR {BR} at (0,0) size 0x17
283               RenderBlock {HR} at (4,800) size 747x2 [border: (1px inset #000000)]
284               RenderBlock {DIV} at (4,810) size 747x25 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
285                 RenderBlock (floating) {DIV} at (403,14) size 330x214 [bgcolor=#FFFF00]
286                   RenderBlock {P} at (5,5) size 320x204
287                     RenderText {#text} at (0,0) size 320x204
288                       text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
289                       text run at (0,17) width 320: "which is floated to the right. The width of the DIV"
290                       text run at (0,34) width 320: "element is 20em. The background is yellow and"
291                       text run at (0,51) width 320: "there is a 5px padding, a 10px margin and no"
292                       text run at (0,68) width 320: "border. Since it is floated, the yellow box should"
293                       text run at (0,85) width 320: "be rendered on top of the background and borders"
294                       text run at (0,102) width 320: "of adjacent non-floated elements. To the left of this"
295                       text run at (0,119) width 320: "yellow box there should be a short paragraph with"
296                       text run at (0,136) width 320: "a blue background and a red border. The yellow"
297                       text run at (0,153) width 320: "box should be rendered on top of the bottom red"
298                       text run at (0,170) width 320: "border. I.e., the bottom red border will appear"
299                       text run at (0,187) width 318: "broken where it's overlaid by the yellow rectangle."
300                 RenderBlock {P} at (4,4) size 739x17
301                   RenderText {#text} at (0,0) size 268x17
302                     text run at (0,0) width 268: "See description in the box on the right side"
303               RenderBlock (anonymous) at (4,835) size 747x213
304                 RenderBR {BR} at (0,0) size 0x17
305               RenderBlock {HR} at (4,1056) size 747x2 [border: (1px inset #000000)]
306               RenderBlock (floating) {DIV} at (4,1066) size 187x68 [bgcolor=#66CCFF]
307                 RenderBlock {P} at (0,0) size 187x68
308                   RenderText {#text} at (0,0) size 186x68
309                     text run at (0,0) width 186: "This paragraph is inside a"
310                     text run at (0,17) width 186: "DIV which is floated left. Its"
311                     text run at (0,34) width 186: "background is blue and the"
312                     text run at (0,51) width 87: "width is 25%."
313               RenderBlock (floating) {DIV} at (564,1066) size 187x68 [bgcolor=#FFFF00]
314                 RenderBlock {P} at (0,0) size 187x68
315                   RenderText {#text} at (0,0) size 186x68
316                     text run at (0,0) width 186: "This paragraph is inside a"
317                     text run at (0,17) width 186: "DIV which is floated right."
318                     text run at (0,34) width 20: "Its "
319                     text run at (20,34) width 166: "background is yellow and"
320                     text run at (0,51) width 110: "the width is 25%."
321               RenderBlock {P} at (4,1066) size 747x34
322                 RenderText {#text} at (186,0) size 374x34
323                   text run at (186,0) width 374: "This paragraph should appear between a blue box (on the"
324                   text run at (186,17) width 30: "left) "
325                   text run at (215,17) width 200: "and a yellow box (on the right)."
326               RenderBlock (anonymous) at (4,1100) size 747x34
327                 RenderBR {BR} at (186,0) size 1x17
328               RenderBlock {HR} at (4,1142) size 747x2 [border: (1px inset #000000)]
329               RenderBlock (floating) {DIV} at (4,1152) size 561x119 [bgcolor=#66CCFF]
330                 RenderBlock (floating) {DIV} at (410,0) size 141x34 [bgcolor=#FFFF00]
331                   RenderBlock {P} at (0,0) size 141x34
332                     RenderText {#text} at (0,0) size 140x34
333                       text run at (0,0) width 140: "See description in the"
334                       text run at (0,17) width 124: "box on the left side."
335                 RenderBlock {P} at (0,0) size 561x119
336                   RenderText {#text} at (0,0) size 560x119
337                     text run at (0,0) width 410: "This paragraph is inside a DIV which is floated left. The"
338                     text run at (0,17) width 410: "background of the DIV element is blue and its width is 75%."
339                     text run at (0,34) width 32: "This "
340                     text run at (32,34) width 368: "text should all be inside the blue rectangle. The blue DIV "
341                     text run at (400,34) width 160: "element has another DIV"
342                     text run at (0,51) width 217: "element as a child. It has a yellow "
343                     text run at (217,51) width 343: "background color and is floated to the right. Since it is"
344                     text run at (0,68) width 11: "a "
345                     text run at (11,68) width 408: "child of the blue DIV, the yellow DIV should appear inside the "
346                     text run at (419,68) width 141: "blue rectangle. Due to"
347                     text run at (0,85) width 252: "it being floated to the right and having "
348                     text run at (252,85) width 308: "a 10px right margin, the yellow rectange should"
349                     text run at (0,102) width 112: "have a 10px blue "
350                     text run at (112,102) width 138: "stripe on its right side."
351               RenderBlock (anonymous) at (4,1152) size 747x119
352                 RenderBR {BR} at (560,0) size 1x17
353               RenderBlock {HR} at (4,1279) size 747x2 [border: (1px inset #000000)]