2011-02-17 Martin Robinson <mrobinson@igalia.com>
[WebKit-https.git] / LayoutTests / platform / gtk / css1 / box_properties / float_on_text_elements-expected.txt
1 layer at (0,0) size 781x2820
2   RenderView at (0,0) size 781x600
3 layer at (0,0) size 781x2820
4   RenderBlock {HTML} at (0,0) size 781x2820
5     RenderBody {BODY} at (8,8) size 765x2804 [bgcolor=#CCCCCC]
6       RenderBlock (floating) {P} at (0,0) size 382x38 [bgcolor=#FFFF00]
7         RenderText {#text} at (0,0) size 382x38
8           text run at (0,0) width 382: "This paragraph is of class \"one\". It has a width of 50% and"
9           text run at (0,19) width 124: "is floated to the left."
10       RenderBlock {P} at (0,0) size 765x95
11         RenderText {#text} at (382,0) size 765x95
12           text run at (382,0) width 383: "This paragraph should start on the right side of a yellow box"
13           text run at (382,19) width 383: "which contains the previous paragraph. Since the text of this"
14           text run at (0,38) width 765: "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,57) width 765: "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,76) width 36: "other."
17       RenderBlock (anonymous) at (0,95) size 765x19
18         RenderBR {BR} at (0,0) size 0x19
19       RenderBlock {HR} at (0,122) size 765x2 [border: (1px inset #000000)]
20       RenderBlock (floating) {P} at (0,132) size 765x76 [bgcolor=#FFFF00]
21         RenderText {#text} at (0,0) size 765x76
22           text run at (0,0) width 765: "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,19) width 765: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and"
24           text run at (0,38) width 765: "a 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,57) width 217: "paragraph for diagnostic purposes."
26       RenderBlock (anonymous) at (0,132) size 765x95
27         RenderImage {IMG} at (0,76) size 15x15
28         RenderText {#text} at (15,76) size 4x19
29           text run at (15,76) width 4: " "
30         RenderBR {BR} at (19,91) size 0x0
31       RenderBlock {HR} at (0,235) size 765x2 [border: (1px inset #000000)]
32       RenderBlock (floating) {P} at (0,245) size 382x114 [bgcolor=#FFFF00]
33         RenderText {#text} at (0,0) size 382x114
34           text run at (0,0) width 382: "This paragraph is floated to the left and the orange square"
35           text run at (0,19) width 382: "image should appear to the right of the paragraph. This"
36           text run at (0,38) width 382: "paragraph has a yellow background and no padding, margin"
37           text run at (0,57) width 382: "or border. The right edge of this yellow box should be"
38           text run at (0,76) width 382: "horizontally aligned with the left edge of the yellow box"
39           text run at (0,95) width 79: "undernearth."
40       RenderBlock (anonymous) at (0,245) size 765x114
41         RenderImage {IMG} at (382,0) size 15x15
42         RenderText {#text} at (397,0) size 4x19
43           text run at (397,0) width 4: " "
44         RenderBR {BR} at (401,15) size 0x0
45       RenderBlock {HR} at (0,367) size 765x2 [border: (1px inset #000000)]
46       RenderBlock (floating) {P} at (383,377) size 382x114 [bgcolor=#FFFF00]
47         RenderText {#text} at (0,0) size 382x114
48           text run at (0,0) width 382: "This paragraph is floated to the right (using a STYLE"
49           text run at (0,19) width 382: "attribute) and the orange square image should appear to the"
50           text run at (0,38) width 382: "left of the paragraph. This paragraph has a yellow"
51           text run at (0,57) width 382: "background and no padding, margin or border. The left edge"
52           text run at (0,76) width 382: "of this yellow box should be horizonally aligned with the"
53           text run at (0,95) width 224: "right edge of the yellow box above."
54       RenderBlock (anonymous) at (0,377) size 765x114
55         RenderImage {IMG} at (0,0) size 15x15
56         RenderText {#text} at (15,0) size 4x19
57           text run at (15,0) width 4: " "
58         RenderBR {BR} at (19,15) size 0x0
59       RenderBlock {HR} at (0,499) size 765x2 [border: (1px inset #000000)]
60       RenderBlock {P} at (0,509) size 765x57
61         RenderBlock (floating) {SPAN} at (0,0) size 48x37 [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 765x57
65           text run at (48,0) width 717: "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,19) width 493: "well as bold, with a content width of 1.5em and a background-color of silver. "
67           text run at (541,19) width 223: "The top of the big letter \"T\" should"
68           text run at (0,38) 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,566) size 765x19
70         RenderBR {BR} at (0,0) size 0x19
71       RenderBlock {HR} at (0,593) size 765x2 [border: (1px inset #000000)]
72       RenderBlock (floating) {P} at (419,613) size 336x206 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
73         RenderText {#text} at (8,8) size 320x190
74           text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
75           text run at (8,27) width 320: "of like a 'sidebar' in a magazine article. Its width is"
76           text run at (8,46) width 320: "20em so the box should not be reformatted when"
77           text run at (8,65) width 320: "the size of the viewport is changed (e.g. when the"
78           text run at (8,84) width 320: "window is resized). The background color of the"
79           text run at (8,103) width 320: "element is yellow, and there should be a 3px solid"
80           text run at (8,122) width 320: "red border outside a 5px wide padding. Also, the"
81           text run at (8,141) width 320: "element has a 10px wide margin around it where"
82           text run at (8,160) width 320: "the blue background of the paragraph in the"
83           text run at (8,179) width 217: "normal flow should shine through."
84       RenderBlock {P} at (0,603) size 765x209 [bgcolor=#66CCFF]
85         RenderText {#text} at (0,0) size 409x209
86           text run at (0,0) width 409: "This paragraph is not floating. If there is enough room, the"
87           text run at (0,19) width 409: "textual content of the paragraph should appear on the left side of"
88           text run at (0,38) width 228: "the yellow \"sidebar\" on the right. "
89           text run at (228,38) width 181: "The content of this element"
90           text run at (0,57) width 270: "should flow around the floated element. "
91           text run at (270,57) width 138: "However, the floated"
92           text run at (0,76) width 409: "element may or may not be obscured by the blue background of"
93           text run at (0,95) width 409: "this element, as the specification does not say which is drawn"
94           text run at (0,114) width 65: "\"on top.\" "
95           text run at (65,114) width 343: "Even if the floated element is obscured, it still forces"
96           text run at (0,133) width 320: "the content of this element to flow around it. "
97           text run at (320,133) width 88: "If the floated"
98           text run at (0,152) width 409: "element is not obscured, then the blue rectangle of this paragraph"
99           text run at (0,171) width 409: "should extend 10px above and to the right of the sidebar's red"
100           text run at (0,190) width 368: "border, due to the margin styles set for the floated element."
101       RenderBlock (anonymous) at (0,812) size 765x19
102         RenderBR {BR} at (0,0) size 0x19
103       RenderBlock {HR} at (0,839) size 765x2 [border: (1px inset #000000)]
104       RenderBlock {DIV} at (0,849) size 765x27 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
105         RenderBlock (floating) {DIV} at (421,14) size 330x238 [bgcolor=#FFFF00]
106           RenderBlock {P} at (5,5) size 320x228
107             RenderText {#text} at (0,0) size 320x228
108               text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
109               text run at (0,19) width 320: "which is floated to the right. The width of the DIV"
110               text run at (0,38) width 320: "element is 20em. The background is yellow and"
111               text run at (0,57) width 320: "there is a 5px padding, a 10px margin and no"
112               text run at (0,76) width 320: "border. Since it is floated, the yellow box should"
113               text run at (0,95) width 320: "be rendered on top of the background and borders"
114               text run at (0,114) width 320: "of adjacent non-floated elements. To the left of this"
115               text run at (0,133) width 320: "yellow box there should be a short paragraph with"
116               text run at (0,152) width 320: "a blue background and a red border. The yellow"
117               text run at (0,171) width 320: "box should be rendered on top of the bottom red"
118               text run at (0,190) width 320: "border. I.e., the bottom red border will appear"
119               text run at (0,209) width 318: "broken where it's overlaid by the yellow rectangle."
120         RenderBlock {P} at (4,4) size 757x19
121           RenderText {#text} at (0,0) size 268x19
122             text run at (0,0) width 268: "See description in the box on the right side"
123       RenderBlock (anonymous) at (0,876) size 765x235
124         RenderBR {BR} at (0,0) size 0x19
125       RenderBlock {HR} at (0,1119) size 765x2 [border: (1px inset #000000)]
126       RenderBlock (floating) {DIV} at (0,1129) size 191x76 [bgcolor=#66CCFF]
127         RenderBlock {P} at (0,0) size 191x76
128           RenderText {#text} at (0,0) size 191x76
129             text run at (0,0) width 191: "This paragraph is inside a"
130             text run at (0,19) width 191: "DIV which is floated left. Its"
131             text run at (0,38) width 191: "background is blue and the"
132             text run at (0,57) width 87: "width is 25%."
133       RenderBlock (floating) {DIV} at (574,1129) size 191x76 [bgcolor=#FFFF00]
134         RenderBlock {P} at (0,0) size 191x76
135           RenderText {#text} at (0,0) size 191x76
136             text run at (0,0) width 191: "This paragraph is inside a"
137             text run at (0,19) width 191: "DIV which is floated right. Its"
138             text run at (0,38) width 191: "background is yellow and the"
139             text run at (0,57) width 87: "width is 25%."
140       RenderBlock {P} at (0,1129) size 765x38
141         RenderText {#text} at (191,0) size 383x38
142           text run at (191,0) width 383: "This paragraph should appear between a blue box (on the"
143           text run at (191,19) width 29: "left) "
144           text run at (220,19) width 199: "and a yellow box (on the right)."
145       RenderBlock (anonymous) at (0,1167) size 765x38
146         RenderBR {BR} at (191,0) size 0x19
147       RenderBlock {HR} at (0,1213) size 765x2 [border: (1px inset #000000)]
148       RenderBlock (floating) {DIV} at (0,1223) size 573x133 [bgcolor=#66CCFF]
149         RenderBlock (floating) {DIV} at (420,0) size 143x38 [bgcolor=#FFFF00]
150           RenderBlock {P} at (0,0) size 143x38
151             RenderText {#text} at (0,0) size 143x38
152               text run at (0,0) width 143: "See description in the"
153               text run at (0,19) width 124: "box on the left side."
154         RenderBlock {P} at (0,0) size 573x133
155           RenderText {#text} at (0,0) size 573x133
156             text run at (0,0) width 420: "This paragraph is inside a DIV which is floated left. The"
157             text run at (0,19) width 420: "background of the DIV element is blue and its width is 75%. This"
158             text run at (0,38) width 404: "text should all be inside the blue rectangle. The blue DIV "
159             text run at (404,38) width 168: "element has another DIV"
160             text run at (0,57) width 218: "element as a child. It has a yellow "
161             text run at (218,57) width 354: "background color and is floated to the right. Since it is a"
162             text run at (0,76) width 417: "child of the blue DIV, the yellow DIV should appear inside the "
163             text run at (417,76) width 156: "blue rectangle. Due to it"
164             text run at (0,95) width 234: "being floated to the right and having "
165             text run at (234,95) width 338: "a 10px right margin, the yellow rectange should have"
166             text run at (0,114) width 78: "a 10px blue "
167             text run at (78,114) width 138: "stripe on its right side."
168       RenderBlock (anonymous) at (0,1223) size 765x133
169         RenderBR {BR} at (573,0) size 0x19
170       RenderBlock {HR} at (0,1364) size 765x2 [border: (1px inset #000000)]
171       RenderTable {TABLE} at (0,1374) size 765x1430 [border: (1px outset #808080)]
172         RenderTableSection {TBODY} at (1,1) size 763x1428
173           RenderTableRow {TR} at (0,0) size 763x27
174             RenderTableCell {TD} at (0,0) size 763x27 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2]
175               RenderInline {STRONG} at (0,0) size 163x19
176                 RenderText {#text} at (4,4) size 163x19
177                   text run at (4,4) width 163: "TABLE Testing Section"
178           RenderTableRow {TR} at (0,27) size 763x1401
179             RenderTableCell {TD} at (0,714) size 12x27 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]
180               RenderText {#text} at (4,4) size 4x19
181                 text run at (4,4) width 4: " "
182             RenderTableCell {TD} at (12,27) size 751x1401 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]
183               RenderBlock (floating) {P} at (4,4) size 371x38 [bgcolor=#FFFF00]
184                 RenderText {#text} at (0,0) size 371x38
185                   text run at (0,0) width 371: "This paragraph is of class \"one\". It has a width of 50% and"
186                   text run at (0,19) width 124: "is floated to the left."
187               RenderBlock {P} at (4,4) size 743x95
188                 RenderText {#text} at (371,0) size 743x95
189                   text run at (371,0) width 372: "This paragraph should start on the right side of a yellow"
190                   text run at (371,19) width 372: "box which contains the previous paragraph. Since the text"
191                   text run at (0,38) width 743: "of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is"
192                   text run at (0,57) width 743: "no padding, border or margins on this and the previous element, so the text of the two elements should be very close"
193                   text run at (0,76) width 85: "to each other."
194               RenderBlock (anonymous) at (4,99) size 743x19
195                 RenderBR {BR} at (0,0) size 0x19
196               RenderBlock {HR} at (4,126) size 743x2 [border: (1px inset #000000)]
197               RenderBlock (floating) {P} at (4,136) size 743x76 [bgcolor=#FFFF00]
198                 RenderText {#text} at (0,0) size 743x76
199                   text run at (0,0) width 743: "This paragraph is of class \"two\". Since the width has been set to 100%, it should automatically be as wide as its"
200                   text run at (0,19) width 743: "parent element allows it to be. Therefore, even though the element is floated, there is no room for other content on the"
201                   text run at (0,38) width 743: "sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been"
202                   text run at (0,57) width 301: "added to this paragraph for diagnostic purposes."
203               RenderBlock (anonymous) at (4,136) size 743x95
204                 RenderImage {IMG} at (0,76) size 15x15
205                 RenderText {#text} at (15,76) size 4x19
206                   text run at (15,76) width 4: " "
207                 RenderBR {BR} at (19,91) size 0x0
208               RenderBlock {HR} at (4,239) size 743x2 [border: (1px inset #000000)]
209               RenderBlock (floating) {P} at (4,249) size 371x114 [bgcolor=#FFFF00]
210                 RenderText {#text} at (0,0) size 371x114
211                   text run at (0,0) width 371: "This paragraph is floated to the left and the orange square"
212                   text run at (0,19) width 371: "image should appear to the right of the paragraph. This"
213                   text run at (0,38) width 371: "paragraph has a yellow background and no padding,"
214                   text run at (0,57) width 371: "margin or border. The right edge of this yellow box should"
215                   text run at (0,76) width 371: "be horizontally aligned with the left edge of the yellow"
216                   text run at (0,95) width 107: "box undernearth."
217               RenderBlock (anonymous) at (4,249) size 743x114
218                 RenderImage {IMG} at (371,0) size 15x15
219                 RenderText {#text} at (386,0) size 4x19
220                   text run at (386,0) width 4: " "
221                 RenderBR {BR} at (390,15) size 0x0
222               RenderBlock {HR} at (4,371) size 743x2 [border: (1px inset #000000)]
223               RenderBlock (floating) {P} at (376,381) size 371x114 [bgcolor=#FFFF00]
224                 RenderText {#text} at (0,0) size 371x114
225                   text run at (0,0) width 371: "This paragraph is floated to the right (using a STYLE"
226                   text run at (0,19) width 371: "attribute) and the orange square image should appear to the"
227                   text run at (0,38) width 371: "left of the paragraph. This paragraph has a yellow"
228                   text run at (0,57) width 371: "background and no padding, margin or border. The left"
229                   text run at (0,76) width 371: "edge of this yellow box should be horizonally aligned with"
230                   text run at (0,95) width 247: "the right edge of the yellow box above."
231               RenderBlock (anonymous) at (4,381) size 743x114
232                 RenderImage {IMG} at (0,0) size 15x15
233                 RenderText {#text} at (15,0) size 4x19
234                   text run at (15,0) width 4: " "
235                 RenderBR {BR} at (19,15) size 0x0
236               RenderBlock {HR} at (4,503) size 743x2 [border: (1px inset #000000)]
237               RenderBlock {P} at (4,513) size 743x57
238                 RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
239                   RenderText {#text} at (0,0) size 21x36
240                     text run at (0,0) width 21: "T"
241                 RenderText {#text} at (48,0) size 743x57
242                   text run at (48,0) width 695: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the paragraph,"
243                   text run at (48,19) width 515: "as well as bold, with a content width of 1.5em and a background-color of silver. "
244                   text run at (563,19) width 179: "The top of the big letter \"T\""
245                   text run at (0,38) width 721: "should be vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."
246               RenderBlock (anonymous) at (4,570) size 743x19
247                 RenderBR {BR} at (0,0) size 0x19
248               RenderBlock {HR} at (4,597) size 743x2 [border: (1px inset #000000)]
249               RenderBlock (floating) {P} at (401,617) size 336x206 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
250                 RenderText {#text} at (8,8) size 320x190
251                   text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
252                   text run at (8,27) width 320: "of like a 'sidebar' in a magazine article. Its width is"
253                   text run at (8,46) width 320: "20em so the box should not be reformatted when"
254                   text run at (8,65) width 320: "the size of the viewport is changed (e.g. when the"
255                   text run at (8,84) width 320: "window is resized). The background color of the"
256                   text run at (8,103) width 320: "element is yellow, and there should be a 3px solid"
257                   text run at (8,122) width 320: "red border outside a 5px wide padding. Also, the"
258                   text run at (8,141) width 320: "element has a 10px wide margin around it where"
259                   text run at (8,160) width 320: "the blue background of the paragraph in the"
260                   text run at (8,179) width 217: "normal flow should shine through."
261               RenderBlock {P} at (4,607) size 743x228 [bgcolor=#66CCFF]
262                 RenderText {#text} at (0,0) size 387x228
263                   text run at (0,0) width 387: "This paragraph is not floating. If there is enough room, the"
264                   text run at (0,19) width 387: "textual content of the paragraph should appear on the left side"
265                   text run at (0,38) width 257: "of the yellow \"sidebar\" on the right. "
266                   text run at (257,38) width 129: "The content of this"
267                   text run at (0,57) width 324: "element should flow around the floated element. "
268                   text run at (324,57) width 63: "However,"
269                   text run at (0,76) width 387: "the floated element may or may not be obscured by the blue"
270                   text run at (0,95) width 387: "background of this element, as the specification does not say"
271                   text run at (0,114) width 183: "which is drawn \"on top.\" "
272                   text run at (183,114) width 203: "Even if the floated element is"
273                   text run at (0,133) width 387: "obscured, it still forces the content of this element to flow"
274                   text run at (0,152) width 64: "around it. "
275                   text run at (64,152) width 322: "If the floated element is not obscured, then the blue"
276                   text run at (0,171) width 387: "rectangle of this paragraph should extend 10px above and to"
277                   text run at (0,190) width 387: "the right of the sidebar's red border, due to the margin styles"
278                   text run at (0,209) width 166: "set for the floated element."
279               RenderBlock (anonymous) at (4,835) size 743x19
280                 RenderBR {BR} at (0,0) size 0x19
281               RenderBlock {HR} at (4,862) size 743x2 [border: (1px inset #000000)]
282               RenderBlock {DIV} at (4,872) size 743x27 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
283                 RenderBlock (floating) {DIV} at (399,14) size 330x238 [bgcolor=#FFFF00]
284                   RenderBlock {P} at (5,5) size 320x228
285                     RenderText {#text} at (0,0) size 320x228
286                       text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
287                       text run at (0,19) width 320: "which is floated to the right. The width of the DIV"
288                       text run at (0,38) width 320: "element is 20em. The background is yellow and"
289                       text run at (0,57) width 320: "there is a 5px padding, a 10px margin and no"
290                       text run at (0,76) width 320: "border. Since it is floated, the yellow box should"
291                       text run at (0,95) width 320: "be rendered on top of the background and borders"
292                       text run at (0,114) width 320: "of adjacent non-floated elements. To the left of this"
293                       text run at (0,133) width 320: "yellow box there should be a short paragraph with"
294                       text run at (0,152) width 320: "a blue background and a red border. The yellow"
295                       text run at (0,171) width 320: "box should be rendered on top of the bottom red"
296                       text run at (0,190) width 320: "border. I.e., the bottom red border will appear"
297                       text run at (0,209) width 318: "broken where it's overlaid by the yellow rectangle."
298                 RenderBlock {P} at (4,4) size 735x19
299                   RenderText {#text} at (0,0) size 268x19
300                     text run at (0,0) width 268: "See description in the box on the right side"
301               RenderBlock (anonymous) at (4,899) size 743x235
302                 RenderBR {BR} at (0,0) size 0x19
303               RenderBlock {HR} at (4,1142) size 743x2 [border: (1px inset #000000)]
304               RenderBlock (floating) {DIV} at (4,1152) size 185x76 [bgcolor=#66CCFF]
305                 RenderBlock {P} at (0,0) size 185x76
306                   RenderText {#text} at (0,0) size 185x76
307                     text run at (0,0) width 185: "This paragraph is inside a"
308                     text run at (0,19) width 185: "DIV which is floated left. Its"
309                     text run at (0,38) width 185: "background is blue and the"
310                     text run at (0,57) width 87: "width is 25%."
311               RenderBlock (floating) {DIV} at (562,1152) size 185x76 [bgcolor=#FFFF00]
312                 RenderBlock {P} at (0,0) size 185x76
313                   RenderText {#text} at (0,0) size 185x76
314                     text run at (0,0) width 185: "This paragraph is inside a"
315                     text run at (0,19) width 185: "DIV which is floated right."
316                     text run at (0,38) width 19: "Its "
317                     text run at (19,38) width 165: "background is yellow and"
318                     text run at (0,57) width 110: "the width is 25%."
319               RenderBlock {P} at (4,1152) size 743x38
320                 RenderText {#text} at (185,0) size 373x38
321                   text run at (185,0) width 373: "This paragraph should appear between a blue box (on the"
322                   text run at (185,19) width 29: "left) "
323                   text run at (214,19) width 199: "and a yellow box (on the right)."
324               RenderBlock (anonymous) at (4,1190) size 743x38
325                 RenderBR {BR} at (185,0) size 0x19
326               RenderBlock {HR} at (4,1236) size 743x2 [border: (1px inset #000000)]
327               RenderBlock (floating) {DIV} at (4,1246) size 557x133 [bgcolor=#66CCFF]
328                 RenderBlock (floating) {DIV} at (408,0) size 139x38 [bgcolor=#FFFF00]
329                   RenderBlock {P} at (0,0) size 139x38
330                     RenderText {#text} at (0,0) size 139x38
331                       text run at (0,0) width 139: "See description in the"
332                       text run at (0,19) width 124: "box on the left side."
333                 RenderBlock {P} at (0,0) size 557x133
334                   RenderText {#text} at (0,0) size 556x133
335                     text run at (0,0) width 408: "This paragraph is inside a DIV which is floated left. The"
336                     text run at (0,19) width 408: "background of the DIV element is blue and its width is 75%."
337                     text run at (0,38) width 32: "This "
338                     text run at (32,38) width 366: "text should all be inside the blue rectangle. The blue DIV "
339                     text run at (398,38) width 158: "element has another DIV"
340                     text run at (0,57) width 216: "element as a child. It has a yellow "
341                     text run at (216,57) width 340: "background color and is floated to the right. Since it is"
342                     text run at (0,76) width 11: "a "
343                     text run at (11,76) width 405: "child of the blue DIV, the yellow DIV should appear inside the "
344                     text run at (416,76) width 139: "blue rectangle. Due to"
345                     text run at (0,95) width 250: "it being floated to the right and having "
346                     text run at (250,95) width 306: "a 10px right margin, the yellow rectange should"
347                     text run at (0,114) width 112: "have a 10px blue "
348                     text run at (112,114) width 138: "stripe on its right side."
349               RenderBlock (anonymous) at (4,1246) size 743x133
350                 RenderBR {BR} at (557,0) size 0x19
351               RenderBlock {HR} at (4,1387) size 743x2 [border: (1px inset #000000)]