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