2011-05-08 Abhishek Arya <inferno@chromium.org>
[WebKit-https.git] / LayoutTests / platform / chromium-win / css1 / box_properties / float_on_text_elements-expected.txt
1 layer at (0,0) size 785x2846
2   RenderView at (0,0) size 785x600
3 layer at (0,0) size 785x2846
4   RenderBlock {HTML} at (0,0) size 785x2846
5     RenderBody {BODY} at (8,8) size 769x2830 [bgcolor=#CCCCCC]
6       RenderBlock (floating) {P} at (0,0) size 384x40 [bgcolor=#FFFF00]
7         RenderText {#text} at (0,0) size 384x39
8           text run at (0,0) width 384: "This paragraph is of class \"one\". It has a width of 50% and is"
9           text run at (0,20) width 105: "floated to the left."
10       RenderBlock {P} at (0,0) size 769x80
11         RenderText {#text} at (384,0) size 769x79
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,20) width 385: "which contains the previous paragraph. Since the text of this"
14           text run at (0,40) width 769: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding,"
15           text run at (0,60) width 709: "border or margins on this and the previous element, so the text of the two elements should be very close to each other."
16       RenderBlock (anonymous) at (0,80) size 769x20
17         RenderBR {BR} at (0,0) size 0x19
18       RenderBlock {HR} at (0,108) size 769x2 [border: (1px inset #000000)]
19       RenderBlock (floating) {P} at (0,118) size 769x80 [bgcolor=#FFFF00]
20         RenderText {#text} at (0,0) size 769x79
21           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 element"
22           text run at (0,20) width 769: "allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a orange"
23           text run at (0,40) width 769: "square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this paragraph for"
24           text run at (0,60) width 123: "diagnostic purposes."
25       RenderBlock (anonymous) at (0,118) size 769x100
26         RenderImage {IMG} at (0,80) size 15x15
27         RenderText {#text} at (15,80) size 4x19
28           text run at (15,80) width 4: " "
29         RenderBR {BR} at (19,95) size 0x0
30       RenderBlock {HR} at (0,226) size 769x2 [border: (1px inset #000000)]
31       RenderBlock (floating) {P} at (0,236) size 384x100 [bgcolor=#FFFF00]
32         RenderText {#text} at (0,0) size 384x99
33           text run at (0,0) width 384: "This paragraph is floated to the left and the orange square image"
34           text run at (0,20) width 384: "should appear to the right of the paragraph. This paragraph has"
35           text run at (0,40) width 384: "a yellow background and no padding, margin or border. The"
36           text run at (0,60) width 384: "right edge of this yellow box should be horizontally aligned with"
37           text run at (0,80) width 260: "the left edge of the yellow box undernearth."
38       RenderBlock (anonymous) at (0,236) size 769x100
39         RenderImage {IMG} at (384,0) size 15x15
40         RenderText {#text} at (399,0) size 4x19
41           text run at (399,0) width 4: " "
42         RenderBR {BR} at (403,15) size 0x0
43       RenderBlock {HR} at (0,344) size 769x2 [border: (1px inset #000000)]
44       RenderBlock (floating) {P} at (385,354) size 384x120 [bgcolor=#FFFF00]
45         RenderText {#text} at (0,0) size 384x119
46           text run at (0,0) width 384: "This paragraph is floated to the right (using a STYLE attribute)"
47           text run at (0,20) width 384: "and the orange square image should appear to the left of the"
48           text run at (0,40) width 384: "paragraph. This paragraph has a yellow background and no"
49           text run at (0,60) width 384: "padding, margin or border. The left edge of this yellow box"
50           text run at (0,80) width 384: "should be horizonally aligned with the right edge of the yellow"
51           text run at (0,100) width 68: "box above."
52       RenderBlock (anonymous) at (0,354) size 769x120
53         RenderImage {IMG} at (0,0) size 15x15
54         RenderText {#text} at (15,0) size 4x19
55           text run at (15,0) width 4: " "
56         RenderBR {BR} at (19,15) size 0x0
57       RenderBlock {HR} at (0,482) size 769x2 [border: (1px inset #000000)]
58       RenderBlock {P} at (0,492) size 769x60
59         RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
60           RenderText {#text} at (0,0) size 21x36
61             text run at (0,0) width 21: "T"
62         RenderText {#text} at (48,0) size 769x59
63           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 well as"
64           text run at (48,20) width 431: "bold, with a content width of 1.5em and a background-color of silver. "
65           text run at (479,20) width 290: "The top of the big letter \"T\" should be vertically"
66           text run at (0,40) width 559: "aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."
67       RenderBlock (anonymous) at (0,552) size 769x20
68         RenderBR {BR} at (0,0) size 0x19
69       RenderBlock {HR} at (0,580) size 769x2 [border: (1px inset #000000)]
70       RenderBlock (floating) {P} at (423,600) size 336x216 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
71         RenderText {#text} at (8,8) size 320x199
72           text run at (8,8) width 320: "This paragraph should be floated to the right, sort of"
73           text run at (8,28) width 320: "like a 'sidebar' in a magazine article. Its width is"
74           text run at (8,48) width 320: "20em so the box should not be reformatted when the"
75           text run at (8,68) width 320: "size of the viewport is changed (e.g. when the"
76           text run at (8,88) width 320: "window is resized). The background color of the"
77           text run at (8,108) width 320: "element is yellow, and there should be a 3px solid"
78           text run at (8,128) width 320: "red border outside a 5px wide padding. Also, the"
79           text run at (8,148) width 320: "element has a 10px wide margin around it where the"
80           text run at (8,168) width 320: "blue background of the paragraph in the normal flow"
81           text run at (8,188) width 126: "should shine through."
82       RenderBlock {P} at (0,590) size 769x220 [bgcolor=#66CCFF]
83         RenderText {#text} at (0,0) size 413x219
84           text run at (0,0) width 413: "This paragraph is not floating. If there is enough room, the textual"
85           text run at (0,20) width 413: "content of the paragraph should appear on the left side of the yellow"
86           text run at (0,40) width 133: "\"sidebar\" on the right. "
87           text run at (133,40) width 280: "The content of this element should flow around"
88           text run at (0,60) width 126: "the floated element. "
89           text run at (126,60) width 287: "However, the floated element may or may not"
90           text run at (0,80) width 413: "be obscured by the blue background of this element, as the"
91           text run at (0,100) width 342: "specification does not say which is drawn \"on top.\" "
92           text run at (342,100) width 71: "Even if the"
93           text run at (0,120) width 413: "floated element is obscured, it still forces the content of this element"
94           text run at (0,140) width 107: "to flow around it. "
95           text run at (107,140) width 306: "If the floated element is not obscured, then the blue"
96           text run at (0,160) width 413: "rectangle of this paragraph should extend 10px above and to the"
97           text run at (0,180) width 413: "right of the sidebar's red border, due to the margin styles set for the"
98           text run at (0,200) width 95: "floated element."
99       RenderBlock (anonymous) at (0,810) size 769x20
100         RenderBR {BR} at (0,0) size 0x19
101       RenderBlock {HR} at (0,838) size 769x2 [border: (1px inset #000000)]
102       RenderBlock {DIV} at (0,848) size 769x28 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
103         RenderBlock (floating) {DIV} at (425,14) size 330x250 [bgcolor=#FFFF00]
104           RenderBlock {P} at (5,5) size 320x240
105             RenderText {#text} at (0,0) size 320x239
106               text run at (0,0) width 320: "This paragraph is placed inside a DIV element which"
107               text run at (0,20) width 320: "is floated to the right. The width of the DIV element"
108               text run at (0,40) width 320: "is 20em. The background is yellow and there is a"
109               text run at (0,60) width 320: "5px padding, a 10px margin and no border. Since it"
110               text run at (0,80) width 320: "is floated, the yellow box should be rendered on top"
111               text run at (0,100) width 320: "of the background and borders of adjacent non-"
112               text run at (0,120) width 320: "floated elements. To the left of this yellow box there"
113               text run at (0,140) width 320: "should be a short paragraph with a blue background"
114               text run at (0,160) width 320: "and a red border. The yellow box should be"
115               text run at (0,180) width 320: "rendered on top of the bottom red border. I.e., the"
116               text run at (0,200) width 320: "bottom red border will appear broken where it's"
117               text run at (0,220) width 194: "overlaid by the yellow rectangle."
118         RenderBlock {P} at (4,4) size 761x20
119           RenderText {#text} at (0,0) size 255x19
120             text run at (0,0) width 255: "See description in the box on the right side"
121       RenderBlock (anonymous) at (0,876) size 769x246
122         RenderBR {BR} at (0,0) size 0x19
123       RenderBlock {HR} at (0,1130) size 769x2 [border: (1px inset #000000)]
124       RenderBlock (floating) {DIV} at (0,1140) size 192x80 [bgcolor=#66CCFF]
125         RenderBlock {P} at (0,0) size 192x80
126           RenderText {#text} at (0,0) size 192x79
127             text run at (0,0) width 192: "This paragraph is inside a DIV"
128             text run at (0,20) width 192: "which is floated left. Its"
129             text run at (0,40) width 192: "background is blue and the"
130             text run at (0,60) width 83: "width is 25%."
131       RenderBlock (floating) {DIV} at (577,1140) size 192x80 [bgcolor=#FFFF00]
132         RenderBlock {P} at (0,0) size 192x80
133           RenderText {#text} at (0,0) size 192x79
134             text run at (0,0) width 192: "This paragraph is inside a DIV"
135             text run at (0,20) width 192: "which is floated right. Its"
136             text run at (0,40) width 192: "background is yellow and the"
137             text run at (0,60) width 83: "width is 25%."
138       RenderBlock {P} at (0,1140) size 769x40
139         RenderText {#text} at (192,0) size 385x39
140           text run at (192,0) width 385: "This paragraph should appear between a blue box (on the left)"
141           text run at (192,20) width 188: "and a yellow box (on the right)."
142       RenderBlock (anonymous) at (0,1180) size 769x40
143         RenderBR {BR} at (192,0) size 0x19
144       RenderBlock {HR} at (0,1228) size 769x2 [border: (1px inset #000000)]
145       RenderBlock (floating) {DIV} at (0,1238) size 576x120 [bgcolor=#66CCFF]
146         RenderBlock (floating) {DIV} at (422,0) size 144x40 [bgcolor=#FFFF00]
147           RenderBlock {P} at (0,0) size 144x40
148             RenderText {#text} at (0,0) size 144x39
149               text run at (0,0) width 144: "See description in the"
150               text run at (0,20) width 118: "box on the left side."
151         RenderBlock {P} at (0,0) size 576x120
152           RenderText {#text} at (0,0) size 576x119
153             text run at (0,0) width 350: "This paragraph is inside a DIV which is floated left. The "
154             text run at (350,0) width 72: "background"
155             text run at (0,20) width 320: "of the DIV element is blue and its width is 75%. This "
156             text run at (320,20) width 102: "text should all be"
157             text run at (0,40) width 248: "inside the blue rectangle. The blue DIV "
158             text run at (248,40) width 328: "element has another DIV element as a child. It has a"
159             text run at (0,60) width 45: "yellow "
160             text run at (45,60) width 367: "background color and is floated to the right. Since it is a "
161             text run at (412,60) width 164: "child of the blue DIV, the"
162             text run at (0,80) width 236: "yellow DIV should appear inside the "
163             text run at (236,80) width 340: "blue rectangle. Due to it being floated to the right and"
164             text run at (0,100) width 42: "having "
165             text run at (42,100) width 394: "a 10px right margin, the yellow rectange should have a 10px blue "
166             text run at (436,100) width 131: "stripe on its right side."
167       RenderBlock (anonymous) at (0,1238) size 769x120
168         RenderBR {BR} at (576,0) size 0x19
169       RenderBlock {HR} at (0,1366) size 769x2 [border: (1px inset #000000)]
170       RenderTable {TABLE} at (0,1376) size 769x1454 [border: (1px outset #808080)]
171         RenderTableSection {TBODY} at (1,1) size 767x1452
172           RenderTableRow {TR} at (0,0) size 767x28
173             RenderTableCell {TD} at (0,0) size 767x28 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2]
174               RenderInline {STRONG} at (0,0) size 159x19
175                 RenderText {#text} at (4,4) size 159x19
176                   text run at (4,4) width 159: "TABLE Testing Section"
177           RenderTableRow {TR} at (0,28) size 767x1424
178             RenderTableCell {TD} at (0,726) size 12x28 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]
179               RenderText {#text} at (4,4) size 4x19
180                 text run at (4,4) width 4: " "
181             RenderTableCell {TD} at (12,28) size 755x1424 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]
182               RenderBlock (floating) {P} at (4,4) size 373x40 [bgcolor=#FFFF00]
183                 RenderText {#text} at (0,0) size 373x39
184                   text run at (0,0) width 373: "This paragraph is of class \"one\". It has a width of 50% and is"
185                   text run at (0,20) width 105: "floated to the left."
186               RenderBlock {P} at (4,4) size 747x80
187                 RenderText {#text} at (373,0) size 747x79
188                   text run at (373,0) width 374: "This paragraph should start on the right side of a yellow box"
189                   text run at (373,20) width 374: "which contains the previous paragraph. Since the text of this"
190                   text run at (0,40) width 747: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding,"
191                   text run at (0,60) width 709: "border or margins on this and the previous element, so the text of the two elements should be very close to each other."
192               RenderBlock (anonymous) at (4,84) size 747x20
193                 RenderBR {BR} at (0,0) size 0x19
194               RenderBlock {HR} at (4,112) size 747x2 [border: (1px inset #000000)]
195               RenderBlock (floating) {P} at (4,122) size 747x80 [bgcolor=#FFFF00]
196                 RenderText {#text} at (0,0) size 747x79
197                   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"
198                   text run at (0,20) width 747: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a"
199                   text run at (0,40) width 747: "orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this"
200                   text run at (0,60) width 209: "paragraph for diagnostic purposes."
201               RenderBlock (anonymous) at (4,122) size 747x100
202                 RenderImage {IMG} at (0,80) size 15x15
203                 RenderText {#text} at (15,80) size 4x19
204                   text run at (15,80) width 4: " "
205                 RenderBR {BR} at (19,95) size 0x0
206               RenderBlock {HR} at (4,230) size 747x2 [border: (1px inset #000000)]
207               RenderBlock (floating) {P} at (4,240) size 373x120 [bgcolor=#FFFF00]
208                 RenderText {#text} at (0,0) size 373x119
209                   text run at (0,0) width 373: "This paragraph is floated to the left and the orange square"
210                   text run at (0,20) width 373: "image should appear to the right of the paragraph. This"
211                   text run at (0,40) width 373: "paragraph has a yellow background and no padding, margin"
212                   text run at (0,60) width 373: "or border. The right edge of this yellow box should be"
213                   text run at (0,80) width 373: "horizontally aligned with the left edge of the yellow box"
214                   text run at (0,100) width 75: "undernearth."
215               RenderBlock (anonymous) at (4,240) size 747x120
216                 RenderImage {IMG} at (373,0) size 15x15
217                 RenderText {#text} at (388,0) size 4x19
218                   text run at (388,0) width 4: " "
219                 RenderBR {BR} at (392,15) size 0x0
220               RenderBlock {HR} at (4,368) size 747x2 [border: (1px inset #000000)]
221               RenderBlock (floating) {P} at (378,378) size 373x120 [bgcolor=#FFFF00]
222                 RenderText {#text} at (0,0) size 373x119
223                   text run at (0,0) width 373: "This paragraph is floated to the right (using a STYLE"
224                   text run at (0,20) width 373: "attribute) and the orange square image should appear to the"
225                   text run at (0,40) width 373: "left of the paragraph. This paragraph has a yellow background"
226                   text run at (0,60) width 373: "and no padding, margin or border. The left edge of this yellow"
227                   text run at (0,80) width 373: "box should be horizonally aligned with the right edge of the"
228                   text run at (0,100) width 111: "yellow box above."
229               RenderBlock (anonymous) at (4,378) size 747x120
230                 RenderImage {IMG} at (0,0) size 15x15
231                 RenderText {#text} at (15,0) size 4x19
232                   text run at (15,0) width 4: " "
233                 RenderBR {BR} at (19,15) size 0x0
234               RenderBlock {HR} at (4,506) size 747x2 [border: (1px inset #000000)]
235               RenderBlock {P} at (4,516) size 747x60
236                 RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
237                   RenderText {#text} at (0,0) size 21x36
238                     text run at (0,0) width 21: "T"
239                 RenderText {#text} at (48,0) size 747x59
240                   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 well"
241                   text run at (48,20) width 460: "as bold, with a content width of 1.5em and a background-color of silver. "
242                   text run at (508,20) width 239: "The top of the big letter \"T\" should be"
243                   text run at (0,40) width 616: "vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."
244               RenderBlock (anonymous) at (4,576) size 747x20
245                 RenderBR {BR} at (0,0) size 0x19
246               RenderBlock {HR} at (4,604) size 747x2 [border: (1px inset #000000)]
247               RenderBlock (floating) {P} at (405,624) size 336x216 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
248                 RenderText {#text} at (8,8) size 320x199
249                   text run at (8,8) width 320: "This paragraph should be floated to the right, sort of"
250                   text run at (8,28) width 320: "like a 'sidebar' in a magazine article. Its width is"
251                   text run at (8,48) width 320: "20em so the box should not be reformatted when the"
252                   text run at (8,68) width 320: "size of the viewport is changed (e.g. when the"
253                   text run at (8,88) width 320: "window is resized). The background color of the"
254                   text run at (8,108) width 320: "element is yellow, and there should be a 3px solid"
255                   text run at (8,128) width 320: "red border outside a 5px wide padding. Also, the"
256                   text run at (8,148) width 320: "element has a 10px wide margin around it where the"
257                   text run at (8,168) width 320: "blue background of the paragraph in the normal flow"
258                   text run at (8,188) width 126: "should shine through."
259               RenderBlock {P} at (4,614) size 747x220 [bgcolor=#66CCFF]
260                 RenderText {#text} at (0,0) size 391x219
261                   text run at (0,0) width 391: "This paragraph is not floating. If there is enough room, the textual"
262                   text run at (0,20) width 391: "content of the paragraph should appear on the left side of the"
263                   text run at (0,40) width 181: "yellow \"sidebar\" on the right. "
264                   text run at (181,40) width 210: "The content of this element should"
265                   text run at (0,60) width 207: "flow around the floated element. "
266                   text run at (207,60) width 184: "However, the floated element"
267                   text run at (0,80) width 391: "may or may not be obscured by the blue background of this"
268                   text run at (0,100) width 391: "element, as the specification does not say which is drawn \"on"
269                   text run at (0,120) width 35: "top.\" "
270                   text run at (35,120) width 356: "Even if the floated element is obscured, it still forces the"
271                   text run at (0,140) width 249: "content of this element to flow around it. "
272                   text run at (249,140) width 142: "If the floated element is"
273                   text run at (0,160) width 391: "not obscured, then the blue rectangle of this paragraph should"
274                   text run at (0,180) width 391: "extend 10px above and to the right of the sidebar's red border,"
275                   text run at (0,200) width 304: "due to the margin styles set for the floated element."
276               RenderBlock (anonymous) at (4,834) size 747x20
277                 RenderBR {BR} at (0,0) size 0x19
278               RenderBlock {HR} at (4,862) size 747x2 [border: (1px inset #000000)]
279               RenderBlock {DIV} at (4,872) size 747x28 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
280                 RenderBlock (floating) {DIV} at (403,14) size 330x250 [bgcolor=#FFFF00]
281                   RenderBlock {P} at (5,5) size 320x240
282                     RenderText {#text} at (0,0) size 320x239
283                       text run at (0,0) width 320: "This paragraph is placed inside a DIV element which"
284                       text run at (0,20) width 320: "is floated to the right. The width of the DIV element"
285                       text run at (0,40) width 320: "is 20em. The background is yellow and there is a"
286                       text run at (0,60) width 320: "5px padding, a 10px margin and no border. Since it"
287                       text run at (0,80) width 320: "is floated, the yellow box should be rendered on top"
288                       text run at (0,100) width 320: "of the background and borders of adjacent non-"
289                       text run at (0,120) width 320: "floated elements. To the left of this yellow box there"
290                       text run at (0,140) width 320: "should be a short paragraph with a blue background"
291                       text run at (0,160) width 320: "and a red border. The yellow box should be"
292                       text run at (0,180) width 320: "rendered on top of the bottom red border. I.e., the"
293                       text run at (0,200) width 320: "bottom red border will appear broken where it's"
294                       text run at (0,220) width 194: "overlaid by the yellow rectangle."
295                 RenderBlock {P} at (4,4) size 739x20
296                   RenderText {#text} at (0,0) size 255x19
297                     text run at (0,0) width 255: "See description in the box on the right side"
298               RenderBlock (anonymous) at (4,900) size 747x246
299                 RenderBR {BR} at (0,0) size 0x19
300               RenderBlock {HR} at (4,1154) size 747x2 [border: (1px inset #000000)]
301               RenderBlock (floating) {DIV} at (4,1164) size 186x80 [bgcolor=#66CCFF]
302                 RenderBlock {P} at (0,0) size 186x80
303                   RenderText {#text} at (0,0) size 186x79
304                     text run at (0,0) width 186: "This paragraph is inside a DIV"
305                     text run at (0,20) width 186: "which is floated left. Its"
306                     text run at (0,40) width 186: "background is blue and the"
307                     text run at (0,60) width 83: "width is 25%."
308               RenderBlock (floating) {DIV} at (565,1164) size 186x80 [bgcolor=#FFFF00]
309                 RenderBlock {P} at (0,0) size 186x80
310                   RenderText {#text} at (0,0) size 186x79
311                     text run at (0,0) width 186: "This paragraph is inside a DIV"
312                     text run at (0,20) width 186: "which is floated right. Its"
313                     text run at (0,40) width 186: "background is yellow and the"
314                     text run at (0,60) width 83: "width is 25%."
315               RenderBlock {P} at (4,1164) size 747x40
316                 RenderText {#text} at (186,0) size 375x39
317                   text run at (186,0) width 375: "This paragraph should appear between a blue box (on the left)"
318                   text run at (186,20) width 188: "and a yellow box (on the right)."
319               RenderBlock (anonymous) at (4,1204) size 747x40
320                 RenderBR {BR} at (186,0) size 0x19
321               RenderBlock {HR} at (4,1252) size 747x2 [border: (1px inset #000000)]
322               RenderBlock (floating) {DIV} at (4,1262) size 560x140 [bgcolor=#66CCFF]
323                 RenderBlock (floating) {DIV} at (410,0) size 140x40 [bgcolor=#FFFF00]
324                   RenderBlock {P} at (0,0) size 140x40
325                     RenderText {#text} at (0,0) size 140x39
326                       text run at (0,0) width 140: "See description in the"
327                       text run at (0,20) width 118: "box on the left side."
328                 RenderBlock {P} at (0,0) size 560x140
329                   RenderText {#text} at (0,0) size 560x139
330                     text run at (0,0) width 338: "This paragraph is inside a DIV which is floated left. The "
331                     text run at (338,0) width 72: "background"
332                     text run at (0,20) width 326: "of the DIV element is blue and its width is 75%. This "
333                     text run at (326,20) width 84: "text should all"
334                     text run at (0,40) width 257: "be inside the blue rectangle. The blue DIV "
335                     text run at (257,40) width 303: "element has another DIV element as a child. It has"
336                     text run at (0,60) width 55: "a yellow "
337                     text run at (55,60) width 348: "background color and is floated to the right. Since it is a "
338                     text run at (403,60) width 157: "child of the blue DIV, the"
339                     text run at (0,80) width 230: "yellow DIV should appear inside the "
340                     text run at (230,80) width 330: "blue rectangle. Due to it being floated to the right and"
341                     text run at (0,100) width 43: "having "
342                     text run at (43,100) width 413: "a 10px right margin, the yellow rectange should have a 10px blue "
343                     text run at (456,100) width 104: "stripe on its right"
344                     text run at (0,120) width 28: "side."
345               RenderBlock (anonymous) at (4,1262) size 747x140
346                 RenderBR {BR} at (560,0) size 0x19
347               RenderBlock {HR} at (4,1410) size 747x2 [border: (1px inset #000000)]