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