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 (1,102) size 782x2 [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 (1,219) size 782x2 [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 (1,353) size 782x2 [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 (1,487) size 782x2 [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 (1,585) size 782x2 [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 (1,827) size 782x2 [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 (1,1103) size 782x2 [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 (1,1201) size 782x2 [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 (1,1353) size 782x2 [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 (5,124) size 760x2
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 (5,241) size 760x2
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 (5,375) size 760x2
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 (5,509) size 760x2
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 (5,607) size 760x2
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 (5,867) size 760x2
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 (5,1143) size 760x2
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 (5,1241) size 760x2
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 (5,1393) size 760x2