Fix for 3478435, <hr> tags should be centered by default. Ditched the 1px margin...
[WebKit-https.git] / LayoutTests / css1 / box_properties / float_on_text_elements-expected.txt
1 layer at (0,0) size 800x2822
2   RenderCanvas at (0,0) size 800x600
3 layer at (0,0) size 800x2822
4   RenderBlock {HTML} at (0,0) size 800x2822
5     RenderBody {BODY} at (8,8) size 784x2806 [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 (anonymous) at (0,0) size 784x0 [bgcolor=#000000]
11         RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#CCCCCC]
12       RenderBlock {P} at (0,0) size 784x72 [bgcolor=#000000]
13         RenderText {TEXT} at (392,0) size 784x72
14           text run at (392,0) width 392: "This paragraph should start on the right side of a yellow box"
15           text run at (392,18) width 392: "which contains the previous paragraph. Since the text of this"
16           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,"
17           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."
18       RenderBlock (anonymous) at (0,72) size 784x18 [bgcolor=#000000]
19         RenderBR {BR} at (0,0) size 0x0
20       RenderBlock {HR} at (0,102) size 784x2 [bgcolor=#000000]
21       RenderBlock (floating) {P} at (0,116) size 784x72 [bgcolor=#FFFF00]
22         RenderText {TEXT} at (0,0) size 784x72
23           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"
24           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"
25           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"
26           text run at (0,54) width 217: "paragraph for diagnostic purposes."
27       RenderBlock (anonymous) at (0,116) size 784x91 [bgcolor=#000000]
28         RenderImage {IMG} at (0,72) size 15x15
29         RenderText {TEXT} at (15,73) size 4x18 [bgcolor=#CCCCCC]
30           text run at (15,73) width 4: " "
31         RenderBR {BR} at (0,0) size 0x0
32       RenderBlock {HR} at (0,219) size 784x2 [bgcolor=#000000]
33       RenderBlock (floating) {P} at (0,233) size 392x108 [bgcolor=#FFFF00]
34         RenderText {TEXT} at (0,0) size 392x108
35           text run at (0,0) width 392: "This paragraph is floated to the left and the orange square"
36           text run at (0,18) width 392: "image should appear to the right of the paragraph. This"
37           text run at (0,36) width 392: "paragraph has a yellow background and no padding, margin"
38           text run at (0,54) width 392: "or border. The right edge of this yellow box should be"
39           text run at (0,72) width 392: "horizontally aligned with the left edge of the yellow box"
40           text run at (0,90) width 79: "undernearth."
41       RenderBlock (anonymous) at (0,233) size 784x108 [bgcolor=#000000]
42         RenderImage {IMG} at (392,0) size 15x15
43         RenderText {TEXT} at (407,1) size 4x18 [bgcolor=#CCCCCC]
44           text run at (407,1) width 4: " "
45         RenderBR {BR} at (0,0) size 0x0
46       RenderBlock {HR} at (0,353) size 784x2 [bgcolor=#000000]
47       RenderBlock (floating) {P} at (392,367) size 392x108 [bgcolor=#FFFF00]
48         RenderText {TEXT} at (0,0) size 392x108
49           text run at (0,0) width 392: "This paragraph is floated to the right (using a STYLE"
50           text run at (0,18) width 392: "attribute) and the orange square image should appear to the"
51           text run at (0,36) width 392: "left of the paragraph. This paragraph has a yellow background"
52           text run at (0,54) width 392: "and no padding, margin or border. The left edge of this"
53           text run at (0,72) width 392: "yellow box should be horizonally aligned with the right edge"
54           text run at (0,90) width 157: "of the yellow box above."
55       RenderBlock (anonymous) at (0,367) size 784x108 [bgcolor=#000000]
56         RenderImage {IMG} at (0,0) size 15x15
57         RenderText {TEXT} at (15,1) size 4x18 [bgcolor=#CCCCCC]
58           text run at (15,1) width 4: " "
59         RenderBR {BR} at (0,0) size 0x0
60       RenderBlock {HR} at (0,487) size 784x2 [bgcolor=#000000]
61       RenderBlock {P} at (0,501) size 784x54 [bgcolor=#000000]
62         RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
63           RenderText {TEXT} at (0,0) size 21x37
64             text run at (0,0) width 21: "T"
65         RenderText {TEXT} at (48,0) size 736x54
66           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"
67           text run at (48,18) width 235: "as bold, with a content width of 1.5"
68           text run at (283,18) width 246: "em and a background-color of silver. "
69           text run at (529,18) width 255: "The top of the big letter \"T\" should be"
70           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\"."
71       RenderBlock (anonymous) at (0,555) size 784x18 [bgcolor=#000000]
72         RenderBR {BR} at (0,0) size 0x0
73       RenderBlock {HR} at (0,585) size 784x2 [bgcolor=#000000]
74       RenderBlock (floating) {P} at (438,609) size 336x196 [bgcolor=#FFFF00]
75         RenderText {TEXT} at (8,8) size 320x180
76           text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
77           text run at (8,26) width 320: "of like a 'sidebar' in a magazine article. Its width is"
78           text run at (8,44) width 320: "20em so the box should not be reformatted when"
79           text run at (8,62) width 320: "the size of the viewport is changed (e.g. when the"
80           text run at (8,80) width 320: "window is resized). The background color of the"
81           text run at (8,98) width 269: "element is yellow, and there should be a 3"
82           text run at (277,98) width 51: "px solid"
83           text run at (8,116) width 143: "red border outside a 5"
84           text run at (151,116) width 177: "px wide padding. Also, the"
85           text run at (8,134) width 109: "element has a 10"
86           text run at (117,134) width 211: "px wide margin around it where"
87           text run at (8,152) width 320: "the blue background of the paragraph in the"
88           text run at (8,170) width 217: "normal flow should shine through."
89       RenderBlock {P} at (0,599) size 784x198 [bgcolor=#66CCFF]
90         RenderText {TEXT} at (0,0) size 428x198
91           text run at (0,0) width 428: "This paragraph is not floating. If there is enough room, the textual"
92           text run at (0,18) width 428: "content of the paragraph should appear on the left side of the yellow"
93           text run at (0,36) width 157: "\"sidebar\" on the right. "
94           text run at (157,36) width 271: "The content of this element should flow"
95           text run at (0,54) width 183: "around the floated element. "
96           text run at (183,54) width 245: "However, the floated element may or"
97           text run at (0,72) width 428: "may not be obscured by the blue background of this element, as the"
98           text run at (0,90) width 353: "specification does not say which is drawn \"on top.\" "
99           text run at (353,90) width 75: "Even if the"
100           text run at (0,108) width 428: "floated element is obscured, it still forces the content of this element"
101           text run at (0,126) width 121: "to flow around it. "
102           text run at (121,126) width 307: "If the floated element is not obscured, then the"
103           text run at (0,144) width 321: "blue rectangle of this paragraph should extend 10"
104           text run at (321,144) width 107: "px above and to"
105           text run at (0,162) width 428: "the right of the sidebar's red border, due to the margin styles set for"
106           text run at (0,180) width 123: "the floated element."
107       RenderBlock (anonymous) at (0,797) size 784x18 [bgcolor=#000000]
108         RenderBR {BR} at (0,0) size 0x0
109       RenderBlock {HR} at (0,827) size 784x2 [bgcolor=#000000]
110       RenderBlock {DIV} at (0,841) size 784x26 [bgcolor=#66CCFF]
111         RenderBlock (floating) {DIV} at (440,14) size 330x226 [bgcolor=#FFFF00]
112           RenderBlock {P} at (5,5) size 320x216 [bgcolor=#000000]
113             RenderText {TEXT} at (0,0) size 320x216
114               text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
115               text run at (0,18) width 320: "which is floated to the right. The width of the DIV"
116               text run at (0,36) width 88: "element is 20"
117               text run at (88,36) width 232: "em. The background is yellow and"
118               text run at (0,54) width 79: "there is a 5"
119               text run at (79,54) width 118: "px padding, a 10"
120               text run at (197,54) width 123: "px margin and no"
121               text run at (0,72) width 320: "border. Since it is floated, the yellow box should"
122               text run at (0,90) width 320: "be rendered on top of the background and borders"
123               text run at (0,108) width 320: "of adjacent non-floated elements. To the left of this"
124               text run at (0,126) width 320: "yellow box there should be a short paragraph with"
125               text run at (0,144) width 320: "a blue background and a red border. The yellow"
126               text run at (0,162) width 320: "box should be rendered on top of the bottom red"
127               text run at (0,180) width 320: "border. I.e., the bottom red border will appear"
128               text run at (0,198) width 318: "broken where it's overlaid by the yellow rectangle."
129         RenderBlock (anonymous) at (4,4) size 776x0 [bgcolor=#000000]
130           RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
131         RenderBlock {P} at (4,4) size 776x18 [bgcolor=#000000]
132           RenderText {TEXT} at (0,0) size 268x18
133             text run at (0,0) width 268: "See description in the box on the right side"
134       RenderBlock (anonymous) at (0,867) size 784x224 [bgcolor=#000000]
135         RenderBR {BR} at (0,0) size 0x0
136       RenderBlock {HR} at (0,1103) size 784x2 [bgcolor=#000000]
137       RenderBlock (floating) {DIV} at (0,1117) size 196x72 [bgcolor=#66CCFF]
138         RenderBlock {P} at (0,0) size 196x72 [bgcolor=#000000]
139           RenderText {TEXT} at (0,0) size 196x72
140             text run at (0,0) width 196: "This paragraph is inside a DIV"
141             text run at (0,18) width 196: "which is floated left. Its"
142             text run at (0,36) width 196: "background is blue and the"
143             text run at (0,54) width 87: "width is 25%."
144       RenderBlock (floating) {DIV} at (588,1117) size 196x72 [bgcolor=#FFFF00]
145         RenderBlock {P} at (0,0) size 196x72 [bgcolor=#000000]
146           RenderText {TEXT} at (0,0) size 196x72
147             text run at (0,0) width 196: "This paragraph is inside a DIV"
148             text run at (0,18) width 196: "which is floated right. Its"
149             text run at (0,36) width 196: "background is yellow and the"
150             text run at (0,54) width 87: "width is 25%."
151       RenderBlock {P} at (0,1117) size 784x36 [bgcolor=#000000]
152         RenderText {TEXT} at (196,0) size 392x36
153           text run at (196,0) width 392: "This paragraph should appear between a blue box (on the left)"
154           text run at (196,18) width 199: "and a yellow box (on the right)."
155       RenderBlock (anonymous) at (0,1153) size 784x36 [bgcolor=#000000]
156         RenderBR {BR} at (0,0) size 0x0
157       RenderBlock {HR} at (0,1201) size 784x2 [bgcolor=#000000]
158       RenderBlock (floating) {DIV} at (0,1215) size 588x126 [bgcolor=#66CCFF]
159         RenderBlock (floating) {DIV} at (431,0) size 147x36 [bgcolor=#FFFF00]
160           RenderBlock {P} at (0,0) size 147x36 [bgcolor=#000000]
161             RenderText {TEXT} at (0,0) size 147x36
162               text run at (0,0) width 147: "See description in the"
163               text run at (0,18) width 124: "box on the left side."
164         RenderBlock (anonymous) at (0,0) size 588x0 [bgcolor=#000000]
165           RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
166         RenderBlock {P} at (0,0) size 588x126 [bgcolor=#000000]
167           RenderText {TEXT} at (0,0) size 588x126
168             text run at (0,0) width 431: "This paragraph is inside a DIV which is floated left. The"
169             text run at (0,18) width 431: "background of the DIV element is blue and its width is 75%. This"
170             text run at (0,36) width 373: "text should all be inside the blue rectangle. The blue DIV "
171             text run at (373,36) width 215: "element has another DIV element"
172             text run at (0,54) width 170: "as a child. It has a yellow "
173             text run at (170,54) width 368: "background color and is floated to the right. Since it is a "
174             text run at (538,54) width 50: "child of"
175             text run at (0,72) width 350: "the blue DIV, the yellow DIV should appear inside the "
176             text run at (350,72) width 238: "blue rectangle. Due to it being floated"
177             text run at (0,90) width 155: "to the right and having "
178             text run at (155,90) width 28: "a 10"
179             text run at (183,90) width 356: "px right margin, the yellow rectange should have a 10"
180             text run at (539,90) width 49: "px blue"
181             text run at (0,108) width 138: "stripe on its right side."
182       RenderBlock (anonymous) at (0,1215) size 784x126 [bgcolor=#000000]
183         RenderBR {BR} at (0,0) size 0x0
184       RenderBlock {HR} at (0,1353) size 784x2 [bgcolor=#000000]
185       RenderTable {TABLE} at (0,1367) size 784x1439 [bgcolor=#000000]
186         RenderTableSection {TBODY} at (1,1) size 0x1437
187           RenderTableRow {TR} at (0,0) size 0x0
188             RenderTableCell {TD} at (0,0) size 782x26 [bgcolor=#C0C0C0] [r=0 c=0 rs=1 cs=2]
189               RenderInline {STRONG} at (0,0) size 163x18 [bgcolor=#000000]
190                 RenderText {TEXT} at (4,4) size 163x18
191                   text run at (4,4) width 163: "TABLE Testing Section"
192           RenderTableRow {TR} at (0,0) size 0x0
193             RenderTableCell {TD} at (0,718) size 12x26 [bgcolor=#C0C0C0] [r=1 c=0 rs=1 cs=1]
194               RenderText {TEXT} at (4,4) size 4x18
195                 text run at (4,4) width 4: " "
196             RenderTableCell {TD} at (12,26) size 770x1411 [r=1 c=1 rs=1 cs=1]
197               RenderBlock (floating) {P} at (4,4) size 381x36 [bgcolor=#FFFF00]
198                 RenderText {TEXT} at (0,0) size 381x36
199                   text run at (0,0) width 381: "This paragraph is of class \"one\". It has a width of 50% and"
200                   text run at (0,18) width 124: "is floated to the left."
201               RenderBlock (anonymous) at (4,4) size 762x0
202                 RenderText {TEXT} at (0,0) size 0x0
203               RenderBlock {P} at (4,4) size 762x90
204                 RenderText {TEXT} at (381,0) size 762x90
205                   text run at (381,0) width 381: "This paragraph should start on the right side of a yellow box"
206                   text run at (381,18) width 381: "which contains the previous paragraph. Since the text of this"
207                   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"
208                   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"
209                   text run at (0,72) width 36: "other."
210               RenderBlock (anonymous) at (4,94) size 762x18
211                 RenderBR {BR} at (0,0) size 0x0
212               RenderBlock {HR} at (4,124) size 762x2
213               RenderBlock (floating) {P} at (4,138) size 762x72 [bgcolor=#FFFF00]
214                 RenderText {TEXT} at (0,0) size 762x72
215                   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"
216                   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"
217                   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"
218                   text run at (0,54) width 217: "paragraph for diagnostic purposes."
219               RenderBlock (anonymous) at (4,138) size 762x91
220                 RenderImage {IMG} at (0,72) size 15x15
221                 RenderText {TEXT} at (15,73) size 4x18
222                   text run at (15,73) width 4: " "
223                 RenderBR {BR} at (0,0) size 0x0
224               RenderBlock {HR} at (4,241) size 762x2
225               RenderBlock (floating) {P} at (4,255) size 381x108 [bgcolor=#FFFF00]
226                 RenderText {TEXT} at (0,0) size 381x108
227                   text run at (0,0) width 381: "This paragraph is floated to the left and the orange square"
228                   text run at (0,18) width 381: "image should appear to the right of the paragraph. This"
229                   text run at (0,36) width 381: "paragraph has a yellow background and no padding, margin"
230                   text run at (0,54) width 381: "or border. The right edge of this yellow box should be"
231                   text run at (0,72) width 381: "horizontally aligned with the left edge of the yellow box"
232                   text run at (0,90) width 79: "undernearth."
233               RenderBlock (anonymous) at (4,255) size 762x108
234                 RenderImage {IMG} at (381,0) size 15x15
235                 RenderText {TEXT} at (396,1) size 4x18
236                   text run at (396,1) width 4: " "
237                 RenderBR {BR} at (0,0) size 0x0
238               RenderBlock {HR} at (4,375) size 762x2
239               RenderBlock (floating) {P} at (385,389) size 381x108 [bgcolor=#FFFF00]
240                 RenderText {TEXT} at (0,0) size 381x108
241                   text run at (0,0) width 381: "This paragraph is floated to the right (using a STYLE"
242                   text run at (0,18) width 381: "attribute) and the orange square image should appear to the"
243                   text run at (0,36) width 381: "left of the paragraph. This paragraph has a yellow"
244                   text run at (0,54) width 381: "background and no padding, margin or border. The left"
245                   text run at (0,72) width 381: "edge of this yellow box should be horizonally aligned with"
246                   text run at (0,90) width 247: "the right edge of the yellow box above."
247               RenderBlock (anonymous) at (4,389) size 762x108
248                 RenderImage {IMG} at (0,0) size 15x15
249                 RenderText {TEXT} at (15,1) size 4x18
250                   text run at (15,1) width 4: " "
251                 RenderBR {BR} at (0,0) size 0x0
252               RenderBlock {HR} at (4,509) size 762x2
253               RenderBlock {P} at (4,523) size 762x54
254                 RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]
255                   RenderText {TEXT} at (0,0) size 21x37
256                     text run at (0,0) width 21: "T"
257                 RenderText {TEXT} at (48,0) size 714x54
258                   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"
259                   text run at (48,18) width 254: "well as bold, with a content width of 1.5"
260                   text run at (302,18) width 236: "em and a background-color of silver. "
261                   text run at (538,18) width 224: "The top of the big letter \"T\" should"
262                   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\"."
263               RenderBlock (anonymous) at (4,577) size 762x18
264                 RenderBR {BR} at (0,0) size 0x0
265               RenderBlock {HR} at (4,607) size 762x2
266               RenderBlock (floating) {P} at (420,631) size 336x196 [bgcolor=#FFFF00]
267                 RenderText {TEXT} at (8,8) size 320x180
268                   text run at (8,8) width 320: "This paragraph should be floated to the right, sort"
269                   text run at (8,26) width 320: "of like a 'sidebar' in a magazine article. Its width is"
270                   text run at (8,44) width 320: "20em so the box should not be reformatted when"
271                   text run at (8,62) width 320: "the size of the viewport is changed (e.g. when the"
272                   text run at (8,80) width 320: "window is resized). The background color of the"
273                   text run at (8,98) width 269: "element is yellow, and there should be a 3"
274                   text run at (277,98) width 51: "px solid"
275                   text run at (8,116) width 143: "red border outside a 5"
276                   text run at (151,116) width 177: "px wide padding. Also, the"
277                   text run at (8,134) width 109: "element has a 10"
278                   text run at (117,134) width 211: "px wide margin around it where"
279                   text run at (8,152) width 320: "the blue background of the paragraph in the"
280                   text run at (8,170) width 217: "normal flow should shine through."
281               RenderBlock {P} at (4,621) size 762x216 [bgcolor=#66CCFF]
282                 RenderText {TEXT} at (0,0) size 406x216
283                   text run at (0,0) width 406: "This paragraph is not floating. If there is enough room, the"
284                   text run at (0,18) width 406: "textual content of the paragraph should appear on the left side of"
285                   text run at (0,36) width 226: "the yellow \"sidebar\" on the right. "
286                   text run at (226,36) width 180: "The content of this element"
287                   text run at (0,54) width 268: "should flow around the floated element. "
288                   text run at (268,54) width 138: "However, the floated"
289                   text run at (0,72) width 406: "element may or may not be obscured by the blue background of"
290                   text run at (0,90) width 406: "this element, as the specification does not say which is drawn"
291                   text run at (0,108) width 64: "\"on top.\" "
292                   text run at (64,108) width 342: "Even if the floated element is obscured, it still forces"
293                   text run at (0,126) width 318: "the content of this element to flow around it. "
294                   text run at (318,126) width 88: "If the floated"
295                   text run at (0,144) width 406: "element is not obscured, then the blue rectangle of this"
296                   text run at (0,162) width 185: "paragraph should extend 10"
297                   text run at (185,162) width 221: "px above and to the right of the"
298                   text run at (0,180) width 406: "sidebar's red border, due to the margin styles set for the floated"
299                   text run at (0,198) width 53: "element."
300               RenderBlock (anonymous) at (4,837) size 762x18
301                 RenderBR {BR} at (0,0) size 0x0
302               RenderBlock {HR} at (4,867) size 762x2
303               RenderBlock {DIV} at (4,881) size 762x26 [bgcolor=#66CCFF]
304                 RenderBlock (floating) {DIV} at (418,14) size 330x226 [bgcolor=#FFFF00]
305                   RenderBlock {P} at (5,5) size 320x216 [bgcolor=#000000]
306                     RenderText {TEXT} at (0,0) size 320x216
307                       text run at (0,0) width 320: "This paragraph is placed inside a DIV element"
308                       text run at (0,18) width 320: "which is floated to the right. The width of the DIV"
309                       text run at (0,36) width 88: "element is 20"
310                       text run at (88,36) width 232: "em. The background is yellow and"
311                       text run at (0,54) width 79: "there is a 5"
312                       text run at (79,54) width 118: "px padding, a 10"
313                       text run at (197,54) width 123: "px margin and no"
314                       text run at (0,72) width 320: "border. Since it is floated, the yellow box should"
315                       text run at (0,90) width 320: "be rendered on top of the background and borders"
316                       text run at (0,108) width 320: "of adjacent non-floated elements. To the left of this"
317                       text run at (0,126) width 320: "yellow box there should be a short paragraph with"
318                       text run at (0,144) width 320: "a blue background and a red border. The yellow"
319                       text run at (0,162) width 320: "box should be rendered on top of the bottom red"
320                       text run at (0,180) width 320: "border. I.e., the bottom red border will appear"
321                       text run at (0,198) width 318: "broken where it's overlaid by the yellow rectangle."
322                 RenderBlock (anonymous) at (4,4) size 754x0 [bgcolor=#000000]
323                   RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
324                 RenderBlock {P} at (4,4) size 754x18 [bgcolor=#000000]
325                   RenderText {TEXT} at (0,0) size 268x18
326                     text run at (0,0) width 268: "See description in the box on the right side"
327               RenderBlock (anonymous) at (4,907) size 762x224
328                 RenderBR {BR} at (0,0) size 0x0
329               RenderBlock {HR} at (4,1143) size 762x2
330               RenderBlock (floating) {DIV} at (4,1157) size 190x72 [bgcolor=#66CCFF]
331                 RenderBlock {P} at (0,0) size 190x72 [bgcolor=#000000]
332                   RenderText {TEXT} at (0,0) size 190x72
333                     text run at (0,0) width 190: "This paragraph is inside a"
334                     text run at (0,18) width 190: "DIV which is floated left. Its"
335                     text run at (0,36) width 190: "background is blue and the"
336                     text run at (0,54) width 87: "width is 25%."
337               RenderBlock (floating) {DIV} at (576,1157) size 190x72 [bgcolor=#FFFF00]
338                 RenderBlock {P} at (0,0) size 190x72 [bgcolor=#000000]
339                   RenderText {TEXT} at (0,0) size 190x72
340                     text run at (0,0) width 190: "This paragraph is inside a"
341                     text run at (0,18) width 190: "DIV which is floated right. Its"
342                     text run at (0,36) width 190: "background is yellow and the"
343                     text run at (0,54) width 87: "width is 25%."
344               RenderBlock {P} at (4,1157) size 762x36
345                 RenderText {TEXT} at (190,0) size 382x36
346                   text run at (190,0) width 382: "This paragraph should appear between a blue box (on the"
347                   text run at (190,18) width 29: "left) "
348                   text run at (219,18) width 199: "and a yellow box (on the right)."
349               RenderBlock (anonymous) at (4,1193) size 762x36
350                 RenderBR {BR} at (0,0) size 0x0
351               RenderBlock {HR} at (4,1241) size 762x2
352               RenderBlock (floating) {DIV} at (4,1255) size 571x126 [bgcolor=#66CCFF]
353                 RenderBlock (floating) {DIV} at (419,0) size 142x36 [bgcolor=#FFFF00]
354                   RenderBlock {P} at (0,0) size 142x36 [bgcolor=#000000]
355                     RenderText {TEXT} at (0,0) size 142x36
356                       text run at (0,0) width 142: "See description in the"
357                       text run at (0,18) width 124: "box on the left side."
358                 RenderBlock (anonymous) at (0,0) size 571x0 [bgcolor=#000000]
359                   RenderText {TEXT} at (0,0) size 0x0 [bgcolor=#66CCFF]
360                 RenderBlock {P} at (0,0) size 571x126 [bgcolor=#000000]
361                   RenderText {TEXT} at (0,0) size 571x126
362                     text run at (0,0) width 419: "This paragraph is inside a DIV which is floated left. The"
363                     text run at (0,18) width 419: "background of the DIV element is blue and its width is 75%. This"
364                     text run at (0,36) width 402: "text should all be inside the blue rectangle. The blue DIV "
365                     text run at (402,36) width 169: "element has another DIV"
366                     text run at (0,54) width 217: "element as a child. It has a yellow "
367                     text run at (217,54) width 354: "background color and is floated to the right. Since it is a"
368                     text run at (0,72) width 415: "child of the blue DIV, the yellow DIV should appear inside the "
369                     text run at (415,72) width 156: "blue rectangle. Due to it"
370                     text run at (0,90) width 233: "being floated to the right and having "
371                     text run at (233,90) width 27: "a 10"
372                     text run at (260,90) width 311: "px right margin, the yellow rectange should have"
373                     text run at (0,108) width 27: "a 10"
374                     text run at (27,108) width 51: "px blue "
375                     text run at (78,108) width 138: "stripe on its right side."
376               RenderBlock (anonymous) at (4,1255) size 762x126
377                 RenderBR {BR} at (0,0) size 0x0
378               RenderBlock {HR} at (4,1393) size 762x2