- rolled in patch by opendarwin.org@mitzpettel.com for
[WebKit-https.git] / LayoutTests / css1 / box_properties / float_on_text_elements-expected.txt
1 layer at (0,0) size 800x2678
2   RenderCanvas at (0,0) size 800x600
3 layer at (0,0) size 800x2678
4   RenderBlock {HTML} at (0,0) size 800x2678
5     RenderBody {BODY} at (8,8) size 784x2662 [bgcolor=#CCCCCC]
6       RenderBlock (floating) {P} at (0,0) size 392x36 [bgcolor=#FFFF00]
7         RenderText {TEXT} at (0,0) size 392x36
8           text run at (0,0) width 392: "This paragraph is of class \"one\". It has a width of 50% and is"
9           text run at (0,18) width 110: "floated to the left."
10       RenderBlock {P} at (0,0) size 784x72
11         RenderText {TEXT} at (392,0) size 784x72
12           text run at (392,0) width 392: "This paragraph should start on the right side of a yellow box"
13           text run at (392,18) width 392: "which contains the previous paragraph. Since the text of this"
14           text run at (0,36) width 784: "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,54) width 740: "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,72) size 784x18
17         RenderBR {BR} at (0,0) size 0x18
18       RenderBlock {HR} at (0,98) size 784x2 [border: (1px inset #000000)]
19       RenderBlock (floating) {P} at (0,108) size 784x72 [bgcolor=#FFFF00]
20         RenderText {TEXT} at (0,0) size 784x72
21           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 parent"
22           text run at (0,18) width 784: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a"
23           text run at (0,36) width 784: "orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this"
24           text run at (0,54) width 217: "paragraph for diagnostic purposes."
25       RenderBlock (anonymous) at (0,108) size 784x91
26         RenderImage {IMG} at (0,72) size 15x15
27         RenderText {TEXT} at (15,73) size 4x18
28           text run at (15,73) width 4: " "
29         RenderBR {BR} at (0,0) size 0x0
30       RenderBlock {HR} at (0,207) size 784x2 [border: (1px inset #000000)]
31       RenderBlock (floating) {P} at (0,217) size 392x108 [bgcolor=#FFFF00]
32         RenderText {TEXT} at (0,0) size 392x108
33           text run at (0,0) width 392: "This paragraph is floated to the left and the orange square"
34           text run at (0,18) width 392: "image should appear to the right of the paragraph. This"
35           text run at (0,36) width 392: "paragraph has a yellow background and no padding, margin"
36           text run at (0,54) width 392: "or border. The right edge of this yellow box should be"
37           text run at (0,72) width 392: "horizontally aligned with the left edge of the yellow box"
38           text run at (0,90) width 79: "undernearth."
39       RenderBlock (anonymous) at (0,217) size 784x108
40         RenderImage {IMG} at (392,0) size 15x15
41         RenderText {TEXT} at (407,1) size 4x18
42           text run at (407,1) width 4: " "
43         RenderBR {BR} at (0,0) size 0x0
44       RenderBlock {HR} at (0,333) size 784x2 [border: (1px inset #000000)]
45       RenderBlock (floating) {P} at (392,343) size 392x108 [bgcolor=#FFFF00]
46         RenderText {TEXT} at (0,0) size 392x108
47           text run at (0,0) width 392: "This paragraph is floated to the right (using a STYLE"
48           text run at (0,18) width 392: "attribute) and the orange square image should appear to the"
49           text run at (0,36) width 392: "left of the paragraph. This paragraph has a yellow background"
50           text run at (0,54) width 392: "and no padding, margin or border. The left edge of this"
51           text run at (0,72) width 392: "yellow box should be horizonally aligned with the right edge"
52           text run at (0,90) width 157: "of the yellow box above."
53       RenderBlock (anonymous) at (0,343) size 784x108
54         RenderImage {IMG} at (0,0) size 15x15
55         RenderText {TEXT} at (15,1) size 4x18
56           text run at (15,1) width 4: " "
57         RenderBR {BR} at (0,0) size 0x0
58       RenderBlock {HR} at (0,459) size 784x2 [border: (1px inset #000000)]
59       RenderBlock {P} at (0,469) size 784x54
60         RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
61           RenderText {TEXT} at (0,0) size 21x37
62             text run at (0,0) width 21: "T"
63         RenderText {TEXT} at (48,0) size 736x54
64           text run at (48,0) width 736: "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"
65           text run at (48,18) width 481: "as bold, with a content width of 1.5em and a background-color of silver. "
66           text run at (529,18) width 255: "The top of the big letter \"T\" should be"
67           text run at (48,36) width 656: "vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."
68       RenderBlock (anonymous) at (0,523) size 784x18
69         RenderBR {BR} at (0,0) size 0x18
70       RenderBlock {HR} at (0,549) size 784x2 [border: (1px inset #000000)]
71       RenderBlock (floating) {P} at (438,569) size 336x196 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
72         RenderText {TEXT} at (8,8) size 320x180
73           text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
74           text run at (8,26) width 320: "of like a 'sidebar' in a magazine article. Its width is"
75           text run at (8,44) width 320: "20em so the box should not be reformatted when"
76           text run at (8,62) width 320: "the size of the viewport is changed (e.g. when the"
77           text run at (8,80) width 320: "window is resized). The background color of the"
78           text run at (8,98) width 320: "element is yellow, and there should be a 3px solid"
79           text run at (8,116) width 320: "red border outside a 5px wide padding. Also, the"
80           text run at (8,134) width 320: "element has a 10px wide margin around it where"
81           text run at (8,152) width 320: "the blue background of the paragraph in the"
82           text run at (8,170) width 217: "normal flow should shine through."
83       RenderBlock {P} at (0,559) size 784x198 [bgcolor=#66CCFF]
84         RenderText {TEXT} at (0,0) size 428x198
85           text run at (0,0) width 428: "This paragraph is not floating. If there is enough room, the textual"
86           text run at (0,18) width 428: "content of the paragraph should appear on the left side of the yellow"
87           text run at (0,36) width 157: "\"sidebar\" on the right. "
88           text run at (157,36) width 271: "The content of this element should flow"
89           text run at (0,54) width 183: "around the floated element. "
90           text run at (183,54) width 245: "However, the floated element may or"
91           text run at (0,72) width 428: "may not be obscured by the blue background of this element, as the"
92           text run at (0,90) width 353: "specification does not say which is drawn \"on top.\" "
93           text run at (353,90) width 75: "Even if the"
94           text run at (0,108) width 428: "floated element is obscured, it still forces the content of this element"
95           text run at (0,126) width 121: "to flow around it. "
96           text run at (121,126) width 307: "If the floated element is not obscured, then the"
97           text run at (0,144) width 428: "blue rectangle of this paragraph should extend 10px above and to"
98           text run at (0,162) width 428: "the right of the sidebar's red border, due to the margin styles set for"
99           text run at (0,180) width 123: "the floated element."
100       RenderBlock (anonymous) at (0,757) size 784x18
101         RenderBR {BR} at (0,0) size 0x18
102       RenderBlock {HR} at (0,783) size 784x2 [border: (1px inset #000000)]
103       RenderBlock {DIV} at (0,793) size 784x26 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
104         RenderBlock (floating) {DIV} at (440,14) size 330x226 [bgcolor=#FFFF00]
105           RenderBlock {P} at (5,5) size 320x216
106             RenderText {TEXT} at (0,0) size 320x216
107               text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
108               text run at (0,18) width 320: "which is floated to the right. The width of the DIV"
109               text run at (0,36) width 320: "element is 20em. The background is yellow and"
110               text run at (0,54) width 320: "there is a 5px padding, a 10px margin and no"
111               text run at (0,72) width 320: "border. Since it is floated, the yellow box should"
112               text run at (0,90) width 320: "be rendered on top of the background and borders"
113               text run at (0,108) width 320: "of adjacent non-floated elements. To the left of this"
114               text run at (0,126) width 320: "yellow box there should be a short paragraph with"
115               text run at (0,144) width 320: "a blue background and a red border. The yellow"
116               text run at (0,162) width 320: "box should be rendered on top of the bottom red"
117               text run at (0,180) width 320: "border. I.e., the bottom red border will appear"
118               text run at (0,198) width 318: "broken where it's overlaid by the yellow rectangle."
119         RenderBlock {P} at (4,4) size 776x18
120           RenderText {TEXT} at (0,0) size 268x18
121             text run at (0,0) width 268: "See description in the box on the right side"
122       RenderBlock (anonymous) at (0,819) size 784x224
123         RenderBR {BR} at (0,0) size 0x18
124       RenderBlock {HR} at (0,1051) size 784x2 [border: (1px inset #000000)]
125       RenderBlock (floating) {DIV} at (0,1061) size 196x72 [bgcolor=#66CCFF]
126         RenderBlock {P} at (0,0) size 196x72
127           RenderText {TEXT} at (0,0) size 196x72
128             text run at (0,0) width 196: "This paragraph is inside a DIV"
129             text run at (0,18) width 196: "which is floated left. Its"
130             text run at (0,36) width 196: "background is blue and the"
131             text run at (0,54) width 87: "width is 25%."
132       RenderBlock (floating) {DIV} at (588,1061) size 196x72 [bgcolor=#FFFF00]
133         RenderBlock {P} at (0,0) size 196x72
134           RenderText {TEXT} at (0,0) size 196x72
135             text run at (0,0) width 196: "This paragraph is inside a DIV"
136             text run at (0,18) width 196: "which is floated right. Its"
137             text run at (0,36) width 196: "background is yellow and the"
138             text run at (0,54) width 87: "width is 25%."
139       RenderBlock {P} at (0,1061) size 784x36
140         RenderText {TEXT} at (196,0) size 392x36
141           text run at (196,0) width 392: "This paragraph should appear between a blue box (on the left)"
142           text run at (196,18) width 199: "and a yellow box (on the right)."
143       RenderBlock (anonymous) at (0,1097) size 784x36
144         RenderBR {BR} at (196,0) size 0x18
145       RenderBlock {HR} at (0,1141) size 784x2 [border: (1px inset #000000)]
146       RenderBlock (floating) {DIV} at (0,1151) size 588x126 [bgcolor=#66CCFF]
147         RenderBlock (floating) {DIV} at (431,0) size 147x36 [bgcolor=#FFFF00]
148           RenderBlock {P} at (0,0) size 147x36
149             RenderText {TEXT} at (0,0) size 147x36
150               text run at (0,0) width 147: "See description in the"
151               text run at (0,18) width 124: "box on the left side."
152         RenderBlock {P} at (0,0) size 588x126
153           RenderText {TEXT} at (0,0) size 588x126
154             text run at (0,0) width 431: "This paragraph is inside a DIV which is floated left. The"
155             text run at (0,18) width 431: "background of the DIV element is blue and its width is 75%. This"
156             text run at (0,36) width 373: "text should all be inside the blue rectangle. The blue DIV "
157             text run at (373,36) width 215: "element has another DIV element"
158             text run at (0,54) width 170: "as a child. It has a yellow "
159             text run at (170,54) width 368: "background color and is floated to the right. Since it is a "
160             text run at (538,54) width 50: "child of"
161             text run at (0,72) width 350: "the blue DIV, the yellow DIV should appear inside the "
162             text run at (350,72) width 238: "blue rectangle. Due to it being floated"
163             text run at (0,90) width 155: "to the right and having "
164             text run at (155,90) width 433: "a 10px right margin, the yellow rectange should have a 10px blue"
165             text run at (0,108) width 138: "stripe on its right side."
166       RenderBlock (anonymous) at (0,1151) size 784x126
167         RenderBR {BR} at (588,0) size 0x18
168       RenderBlock {HR} at (0,1285) size 784x2 [border: (1px inset #000000)]
169       RenderTable {TABLE} at (0,1295) size 784x1367 [border: (1px outset #808080)]
170         RenderTableSection {TBODY} at (1,1) size 0x1365
171           RenderTableRow {TR} at (0,0) size 0x0
172             RenderTableCell {TD} at (0,0) size 782x26 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2]
173               RenderInline {STRONG} at (0,0) size 163x18
174                 RenderText {TEXT} at (4,4) size 163x18
175                   text run at (4,4) width 163: "TABLE Testing Section"
176           RenderTableRow {TR} at (0,0) size 0x0
177             RenderTableCell {TD} at (0,682) size 12x26 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]
178               RenderText {TEXT} at (4,4) size 4x18
179                 text run at (4,4) width 4: " "
180             RenderTableCell {TD} at (12,26) size 770x1339 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]
181               RenderBlock (floating) {P} at (4,4) size 381x36 [bgcolor=#FFFF00]
182                 RenderText {TEXT} at (0,0) size 381x36
183                   text run at (0,0) width 381: "This paragraph is of class \"one\". It has a width of 50% and"
184                   text run at (0,18) width 124: "is floated to the left."
185               RenderBlock {P} at (4,4) size 762x90
186                 RenderText {TEXT} at (381,0) size 762x90
187                   text run at (381,0) width 381: "This paragraph should start on the right side of a yellow box"
188                   text run at (381,18) width 381: "which contains the previous paragraph. Since the text of this"
189                   text run at (0,36) width 762: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no"
190                   text run at (0,54) width 762: "padding, border or margins on this and the previous element, so the text of the two elements should be very close to each"
191                   text run at (0,72) width 36: "other."
192               RenderBlock (anonymous) at (4,94) size 762x18
193                 RenderBR {BR} at (0,0) size 0x18
194               RenderBlock {HR} at (4,120) size 762x2 [border: (1px inset #000000)]
195               RenderBlock (floating) {P} at (4,130) size 762x72 [bgcolor=#FFFF00]
196                 RenderText {TEXT} at (0,0) size 762x72
197                   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 parent"
198                   text run at (0,18) width 762: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and"
199                   text run at (0,36) width 762: "a 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,54) width 217: "paragraph for diagnostic purposes."
201               RenderBlock (anonymous) at (4,130) size 762x91
202                 RenderImage {IMG} at (0,72) size 15x15
203                 RenderText {TEXT} at (15,73) size 4x18
204                   text run at (15,73) width 4: " "
205                 RenderBR {BR} at (0,0) size 0x0
206               RenderBlock {HR} at (4,229) size 762x2 [border: (1px inset #000000)]
207               RenderBlock (floating) {P} at (4,239) size 381x108 [bgcolor=#FFFF00]
208                 RenderText {TEXT} at (0,0) size 381x108
209                   text run at (0,0) width 381: "This paragraph is floated to the left and the orange square"
210                   text run at (0,18) width 381: "image should appear to the right of the paragraph. This"
211                   text run at (0,36) width 381: "paragraph has a yellow background and no padding, margin"
212                   text run at (0,54) width 381: "or border. The right edge of this yellow box should be"
213                   text run at (0,72) width 381: "horizontally aligned with the left edge of the yellow box"
214                   text run at (0,90) width 79: "undernearth."
215               RenderBlock (anonymous) at (4,239) size 762x108
216                 RenderImage {IMG} at (381,0) size 15x15
217                 RenderText {TEXT} at (396,1) size 4x18
218                   text run at (396,1) width 4: " "
219                 RenderBR {BR} at (0,0) size 0x0
220               RenderBlock {HR} at (4,355) size 762x2 [border: (1px inset #000000)]
221               RenderBlock (floating) {P} at (385,365) size 381x108 [bgcolor=#FFFF00]
222                 RenderText {TEXT} at (0,0) size 381x108
223                   text run at (0,0) width 381: "This paragraph is floated to the right (using a STYLE"
224                   text run at (0,18) width 381: "attribute) and the orange square image should appear to the"
225                   text run at (0,36) width 381: "left of the paragraph. This paragraph has a yellow"
226                   text run at (0,54) width 381: "background and no padding, margin or border. The left"
227                   text run at (0,72) width 381: "edge of this yellow box should be horizonally aligned with"
228                   text run at (0,90) width 247: "the right edge of the yellow box above."
229               RenderBlock (anonymous) at (4,365) size 762x108
230                 RenderImage {IMG} at (0,0) size 15x15
231                 RenderText {TEXT} at (15,1) size 4x18
232                   text run at (15,1) width 4: " "
233                 RenderBR {BR} at (0,0) size 0x0
234               RenderBlock {HR} at (4,481) size 762x2 [border: (1px inset #000000)]
235               RenderBlock {P} at (4,491) size 762x54
236                 RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
237                   RenderText {TEXT} at (0,0) size 21x37
238                     text run at (0,0) width 21: "T"
239                 RenderText {TEXT} at (48,0) size 714x54
240                   text run at (48,0) width 714: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as"
241                   text run at (48,18) width 491: "well as bold, with a content width of 1.5em and a background-color of silver. "
242                   text run at (539,18) width 223: "The top of the big letter \"T\" should"
243                   text run at (48,36) width 675: "be vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."
244               RenderBlock (anonymous) at (4,545) size 762x18
245                 RenderBR {BR} at (0,0) size 0x18
246               RenderBlock {HR} at (4,571) size 762x2 [border: (1px inset #000000)]
247               RenderBlock (floating) {P} at (420,591) size 336x196 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]
248                 RenderText {TEXT} at (8,8) size 320x180
249                   text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
250                   text run at (8,26) width 320: "of like a 'sidebar' in a magazine article. Its width is"
251                   text run at (8,44) width 320: "20em so the box should not be reformatted when"
252                   text run at (8,62) width 320: "the size of the viewport is changed (e.g. when the"
253                   text run at (8,80) width 320: "window is resized). The background color of the"
254                   text run at (8,98) width 320: "element is yellow, and there should be a 3px solid"
255                   text run at (8,116) width 320: "red border outside a 5px wide padding. Also, the"
256                   text run at (8,134) width 320: "element has a 10px wide margin around it where"
257                   text run at (8,152) width 320: "the blue background of the paragraph in the"
258                   text run at (8,170) width 217: "normal flow should shine through."
259               RenderBlock {P} at (4,581) size 762x216 [bgcolor=#66CCFF]
260                 RenderText {TEXT} at (0,0) size 406x216
261                   text run at (0,0) width 406: "This paragraph is not floating. If there is enough room, the"
262                   text run at (0,18) width 406: "textual content of the paragraph should appear on the left side of"
263                   text run at (0,36) width 226: "the yellow \"sidebar\" on the right. "
264                   text run at (226,36) width 180: "The content of this element"
265                   text run at (0,54) width 268: "should flow around the floated element. "
266                   text run at (268,54) width 138: "However, the floated"
267                   text run at (0,72) width 406: "element may or may not be obscured by the blue background of"
268                   text run at (0,90) width 406: "this element, as the specification does not say which is drawn"
269                   text run at (0,108) width 64: "\"on top.\" "
270                   text run at (64,108) width 342: "Even if the floated element is obscured, it still forces"
271                   text run at (0,126) width 318: "the content of this element to flow around it. "
272                   text run at (318,126) width 88: "If the floated"
273                   text run at (0,144) width 406: "element is not obscured, then the blue rectangle of this"
274                   text run at (0,162) width 406: "paragraph should extend 10px above and to the right of the"
275                   text run at (0,180) width 406: "sidebar's red border, due to the margin styles set for the floated"
276                   text run at (0,198) width 53: "element."
277               RenderBlock (anonymous) at (4,797) size 762x18
278                 RenderBR {BR} at (0,0) size 0x18
279               RenderBlock {HR} at (4,823) size 762x2 [border: (1px inset #000000)]
280               RenderBlock {DIV} at (4,833) size 762x26 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]
281                 RenderBlock (floating) {DIV} at (418,14) size 330x226 [bgcolor=#FFFF00]
282                   RenderBlock {P} at (5,5) size 320x216
283                     RenderText {TEXT} at (0,0) size 320x216
284                       text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
285                       text run at (0,18) width 320: "which is floated to the right. The width of the DIV"
286                       text run at (0,36) width 320: "element is 20em. The background is yellow and"
287                       text run at (0,54) width 320: "there is a 5px padding, a 10px margin and no"
288                       text run at (0,72) width 320: "border. Since it is floated, the yellow box should"
289                       text run at (0,90) width 320: "be rendered on top of the background and borders"
290                       text run at (0,108) width 320: "of adjacent non-floated elements. To the left of this"
291                       text run at (0,126) width 320: "yellow box there should be a short paragraph with"
292                       text run at (0,144) width 320: "a blue background and a red border. The yellow"
293                       text run at (0,162) width 320: "box should be rendered on top of the bottom red"
294                       text run at (0,180) width 320: "border. I.e., the bottom red border will appear"
295                       text run at (0,198) width 318: "broken where it's overlaid by the yellow rectangle."
296                 RenderBlock {P} at (4,4) size 754x18
297                   RenderText {TEXT} at (0,0) size 268x18
298                     text run at (0,0) width 268: "See description in the box on the right side"
299               RenderBlock (anonymous) at (4,859) size 762x224
300                 RenderBR {BR} at (0,0) size 0x18
301               RenderBlock {HR} at (4,1091) size 762x2 [border: (1px inset #000000)]
302               RenderBlock (floating) {DIV} at (4,1101) size 190x72 [bgcolor=#66CCFF]
303                 RenderBlock {P} at (0,0) size 190x72
304                   RenderText {TEXT} at (0,0) size 190x72
305                     text run at (0,0) width 190: "This paragraph is inside a"
306                     text run at (0,18) width 190: "DIV which is floated left. Its"
307                     text run at (0,36) width 190: "background is blue and the"
308                     text run at (0,54) width 87: "width is 25%."
309               RenderBlock (floating) {DIV} at (576,1101) size 190x72 [bgcolor=#FFFF00]
310                 RenderBlock {P} at (0,0) size 190x72
311                   RenderText {TEXT} at (0,0) size 190x72
312                     text run at (0,0) width 190: "This paragraph is inside a"
313                     text run at (0,18) width 190: "DIV which is floated right. Its"
314                     text run at (0,36) width 190: "background is yellow and the"
315                     text run at (0,54) width 87: "width is 25%."
316               RenderBlock {P} at (4,1101) size 762x36
317                 RenderText {TEXT} at (190,0) size 382x36
318                   text run at (190,0) width 382: "This paragraph should appear between a blue box (on the"
319                   text run at (190,18) width 29: "left) "
320                   text run at (219,18) width 199: "and a yellow box (on the right)."
321               RenderBlock (anonymous) at (4,1137) size 762x36
322                 RenderBR {BR} at (190,0) size 0x18
323               RenderBlock {HR} at (4,1181) size 762x2 [border: (1px inset #000000)]
324               RenderBlock (floating) {DIV} at (4,1191) size 571x126 [bgcolor=#66CCFF]
325                 RenderBlock (floating) {DIV} at (419,0) size 142x36 [bgcolor=#FFFF00]
326                   RenderBlock {P} at (0,0) size 142x36
327                     RenderText {TEXT} at (0,0) size 142x36
328                       text run at (0,0) width 142: "See description in the"
329                       text run at (0,18) width 124: "box on the left side."
330                 RenderBlock {P} at (0,0) size 571x126
331                   RenderText {TEXT} at (0,0) size 571x126
332                     text run at (0,0) width 419: "This paragraph is inside a DIV which is floated left. The"
333                     text run at (0,18) width 419: "background of the DIV element is blue and its width is 75%. This"
334                     text run at (0,36) width 402: "text should all be inside the blue rectangle. The blue DIV "
335                     text run at (402,36) width 169: "element has another DIV"
336                     text run at (0,54) width 217: "element as a child. It has a yellow "
337                     text run at (217,54) width 354: "background color and is floated to the right. Since it is a"
338                     text run at (0,72) width 415: "child of the blue DIV, the yellow DIV should appear inside the "
339                     text run at (415,72) width 156: "blue rectangle. Due to it"
340                     text run at (0,90) width 233: "being floated to the right and having "
341                     text run at (233,90) width 338: "a 10px right margin, the yellow rectange should have"
342                     text run at (0,108) width 78: "a 10px blue "
343                     text run at (78,108) width 138: "stripe on its right side."
344               RenderBlock (anonymous) at (4,1191) size 762x126
345                 RenderBR {BR} at (571,0) size 0x18
346               RenderBlock {HR} at (4,1325) size 762x2 [border: (1px inset #000000)]