1 layer at (0,0) size 800x600 clip at (0,0) size 785x600 scrollHeight 2107
2 LayoutView at (0,0) size 800x600
3 layer at (0,0) size 785x2107 backgroundClip at (0,0) size 785x600 clip at (0,0) size 785x600
4 LayoutBlockFlow {HTML} at (0,0) size 785x2107.34
5 LayoutBlockFlow {BODY} at (8,19.91) size 769x2071.44
6 LayoutBlockFlow {H2} at (0,0) size 769x27
7 LayoutText {#text} at (0,0) size 147x26
8 text run at (0,0) width 147: "Test 1 (1 float)"
9 LayoutBlockFlow {HR} at (48,294.91) size 673x2 [border: (1px inset #EEEEEE)]
10 LayoutBlockFlow {H2} at (0,344.91) size 769x27
11 LayoutText {#text} at (0,0) size 147x26
12 text run at (0,0) width 147: "Test 2 (1 float)"
13 LayoutBlockFlow {HR} at (48,639.81) size 673x2 [border: (1px inset #EEEEEE)]
14 LayoutBlockFlow {H2} at (0,689.81) size 769x27
15 LayoutText {#text} at (0,0) size 147x26
16 text run at (0,0) width 147: "Test 3 (1 float)"
17 LayoutBlockFlow {HR} at (48,984.72) size 673x2 [border: (1px inset #EEEEEE)]
18 LayoutBlockFlow {H2} at (0,1034.72) size 769x27
19 LayoutText {#text} at (0,0) size 156x26
20 text run at (0,0) width 156: "Test 4 (2 floats)"
21 LayoutBlockFlow {HR} at (48,1329.63) size 673x2 [border: (1px inset #EEEEEE)]
22 LayoutBlockFlow {H2} at (0,1379.63) size 769x27
23 LayoutText {#text} at (0,0) size 156x26
24 text run at (0,0) width 156: "Test 5 (2 floats)"
25 LayoutBlockFlow {HR} at (48,1674.53) size 673x2 [border: (1px inset #EEEEEE)]
26 LayoutBlockFlow {H2} at (0,1724.53) size 769x27
27 LayoutText {#text} at (0,0) size 156x26
28 text run at (0,0) width 156: "Test 6 (2 floats)"
29 layer at (8,67) size 769x200
30 LayoutBlockFlow {DIV} at (0,46.91) size 769x200 [bgcolor=#C0C0C0]
31 LayoutBlockFlow (floating) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
32 LayoutText {#text} at (36,36) size 125x59
33 text run at (36,36) width 125: "This yellow square is"
34 text run at (36,56) width 124: "floated left and it has"
35 text run at (36,76) width 63: "no margin."
36 layer at (208,67) size 469x180
37 LayoutBlockFlow {DIV} at (200,0) size 469x180 [bgcolor=#FFA500]
38 LayoutText {#text} at (0,0) size 131x19
39 text run at (0,0) width 131: "This orange rectangle:"
40 LayoutBR {BR} at (131,0) size 0x19
41 LayoutText {#text} at (0,20) size 91x19
42 text run at (0,20) width 91: "\x{2013} establishes a "
43 LayoutInline {STRONG} at (0,0) size 187x19
44 LayoutText {#text} at (91,20) size 187x19
45 text run at (91,20) width 187: "new block formating context"
46 LayoutText {#text} at (278,20) size 184x19
47 text run at (278,20) width 184: " thanks to the CSS declaration"
48 LayoutInline {CODE} at (0,0) size 128x16
49 LayoutText {#text} at (0,43) size 128x16
50 text run at (0,43) width 128: "overflow: hidden"
51 LayoutText {#text} at (128,40) size 4x19
52 text run at (128,40) width 4: ";"
53 LayoutBR {BR} at (132,40) size 0x19
54 LayoutText {#text} at (0,60) size 310x19
55 text run at (0,60) width 310: "\x{2013} has a 100px left margin and a 100px right margin;"
56 LayoutBR {BR} at (310,60) size 0x19
57 LayoutBR {BR} at (0,80) size 0x19
58 LayoutText {#text} at (0,100) size 131x19
59 text run at (0,100) width 131: "This orange rectangle:"
60 LayoutBR {BR} at (131,100) size 0x19
61 LayoutText {#text} at (0,120) size 91x19
62 text run at (0,120) width 91: "\x{2013} establishes a "
63 LayoutInline {STRONG} at (0,0) size 187x19
64 LayoutText {#text} at (91,120) size 187x19
65 text run at (91,120) width 187: "new block formating context"
66 LayoutText {#text} at (278,120) size 184x19
67 text run at (278,120) width 184: " thanks to the CSS declaration"
68 LayoutInline {CODE} at (0,0) size 128x16
69 LayoutText {#text} at (0,143) size 128x16
70 text run at (0,143) width 128: "overflow: hidden"
71 LayoutText {#text} at (128,140) size 4x19
72 text run at (128,140) width 4: ";"
73 LayoutBR {BR} at (132,140) size 0x19
74 LayoutText {#text} at (0,160) size 310x19
75 text run at (0,160) width 310: "\x{2013} has a 100px left margin and a 100px right margin;"
76 layer at (8,412) size 769x200 backgroundClip at (8,412) size 769x188 clip at (8,412) size 769x188
77 LayoutBlockFlow {DIV} at (0,391.81) size 769x200 [bgcolor=#C0C0C0]
78 LayoutBlockFlow (floating) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
79 LayoutText {#text} at (36,36) size 125x59
80 text run at (36,36) width 125: "This yellow square is"
81 text run at (36,56) width 124: "floated left and it has"
82 text run at (36,76) width 63: "no margin."
83 layer at (208,412) size 569x180
84 LayoutBlockFlow {DIV} at (200,0) size 569x180 [bgcolor=#FFA500]
85 LayoutText {#text} at (0,0) size 131x19
86 text run at (0,0) width 131: "This orange rectangle:"
87 LayoutBR {BR} at (131,0) size 0x19
88 LayoutText {#text} at (0,20) size 91x19
89 text run at (0,20) width 91: "\x{2013} establishes a "
90 LayoutInline {STRONG} at (0,0) size 187x19
91 LayoutText {#text} at (91,20) size 187x19
92 text run at (91,20) width 187: "new block formating context"
93 LayoutText {#text} at (278,20) size 188x19
94 text run at (278,20) width 188: " thanks to the CSS declaration "
95 LayoutInline {CODE} at (0,0) size 538x36
96 LayoutText {#text} at (466,23) size 538x36
97 text run at (466,23) width 72: "overflow:"
98 text run at (0,43) width 48: "hidden"
99 LayoutText {#text} at (48,40) size 4x19
100 text run at (48,40) width 4: ";"
101 LayoutBR {BR} at (52,40) size 0x19
102 LayoutText {#text} at (0,60) size 156x19
103 text run at (0,60) width 156: "\x{2013} has a 200px left margin;"
104 LayoutBR {BR} at (156,60) size 0x19
105 LayoutBR {BR} at (0,80) size 0x19
106 LayoutText {#text} at (0,100) size 131x19
107 text run at (0,100) width 131: "This orange rectangle:"
108 LayoutBR {BR} at (131,100) size 0x19
109 LayoutText {#text} at (0,120) size 91x19
110 text run at (0,120) width 91: "\x{2013} establishes a "
111 LayoutInline {STRONG} at (0,0) size 187x19
112 LayoutText {#text} at (91,120) size 187x19
113 text run at (91,120) width 187: "new block formating context"
114 LayoutText {#text} at (278,120) size 188x19
115 text run at (278,120) width 188: " thanks to the CSS declaration "
116 LayoutInline {CODE} at (0,0) size 538x36
117 LayoutText {#text} at (466,123) size 538x36
118 text run at (466,123) width 72: "overflow:"
119 text run at (0,143) width 48: "hidden"
120 LayoutText {#text} at (48,140) size 4x19
121 text run at (48,140) width 4: ";"
122 LayoutBR {BR} at (52,140) size 0x19
123 LayoutText {#text} at (0,160) size 156x19
124 text run at (0,160) width 156: "\x{2013} has a 200px left margin;"
125 layer at (8,757) size 769x200 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
126 LayoutBlockFlow {DIV} at (0,736.72) size 769x200 [bgcolor=#C0C0C0]
127 LayoutBlockFlow (floating) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
128 LayoutText {#text} at (36,36) size 125x79
129 text run at (36,36) width 125: "This yellow square is"
130 text run at (36,56) width 111: "a floated left and it"
131 text run at (36,76) width 121: "has a right margin of"
132 text run at (36,96) width 43: "100px."
133 layer at (308,757) size 369x180 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
134 LayoutBlockFlow {DIV} at (300,0) size 369x180 [bgcolor=#FFA500]
135 LayoutText {#text} at (0,0) size 131x19
136 text run at (0,0) width 131: "This orange rectangle:"
137 LayoutBR {BR} at (131,0) size 0x19
138 LayoutText {#text} at (0,20) size 91x19
139 text run at (0,20) width 91: "\x{2013} establishes a "
140 LayoutInline {STRONG} at (0,0) size 187x19
141 LayoutText {#text} at (91,20) size 187x19
142 text run at (91,20) width 187: "new block formating context"
143 LayoutText {#text} at (278,20) size 359x39
144 text run at (278,20) width 81: " thanks to the"
145 text run at (0,40) width 103: "CSS declaration "
146 LayoutInline {CODE} at (0,0) size 128x16
147 LayoutText {#text} at (103,43) size 128x16
148 text run at (103,43) width 128: "overflow: hidden"
149 LayoutText {#text} at (231,40) size 4x19
150 text run at (231,40) width 4: ";"
151 LayoutBR {BR} at (235,40) size 0x19
152 LayoutText {#text} at (0,60) size 294x19
153 text run at (0,60) width 294: "\x{2013} has a 0px left margin and a 100px right margin;"
154 LayoutBR {BR} at (294,60) size 0x19
155 LayoutBR {BR} at (0,80) size 0x19
156 LayoutText {#text} at (0,100) size 131x19
157 text run at (0,100) width 131: "This orange rectangle:"
158 LayoutBR {BR} at (131,100) size 0x19
159 LayoutText {#text} at (0,120) size 91x19
160 text run at (0,120) width 91: "\x{2013} establishes a "
161 LayoutInline {STRONG} at (0,0) size 187x19
162 LayoutText {#text} at (91,120) size 187x19
163 text run at (91,120) width 187: "new block formating context"
164 LayoutText {#text} at (278,120) size 359x39
165 text run at (278,120) width 81: " thanks to the"
166 text run at (0,140) width 103: "CSS declaration "
167 LayoutInline {CODE} at (0,0) size 128x16
168 LayoutText {#text} at (103,143) size 128x16
169 text run at (103,143) width 128: "overflow: hidden"
170 LayoutText {#text} at (231,140) size 4x19
171 text run at (231,140) width 4: ";"
172 LayoutBR {BR} at (235,140) size 0x19
173 LayoutText {#text} at (0,160) size 294x19
174 text run at (0,160) width 294: "\x{2013} has a 0px left margin and a 100px right margin;"
175 layer at (8,1102) size 769x200 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
176 LayoutBlockFlow {DIV} at (0,1081.63) size 769x200 [bgcolor=#C0C0C0]
177 LayoutBlockFlow (floating) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
178 LayoutText {#text} at (36,36) size 125x59
179 text run at (36,36) width 125: "This yellow square is"
180 text run at (36,56) width 124: "floated left and it has"
181 text run at (36,76) width 63: "no margin."
182 LayoutBlockFlow (floating) {DIV} at (569,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
183 LayoutText {#text} at (36,36) size 125x59
184 text run at (36,36) width 125: "This yellow square is"
185 text run at (36,56) width 119: "a floated right and it"
186 text run at (36,76) width 87: "has no margin."
187 layer at (208,1102) size 369x180 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
188 LayoutBlockFlow {DIV} at (200,0) size 369x180 [bgcolor=#FFA500]
189 LayoutText {#text} at (0,0) size 131x19
190 text run at (0,0) width 131: "This orange rectangle:"
191 LayoutBR {BR} at (131,0) size 0x19
192 LayoutText {#text} at (0,20) size 91x19
193 text run at (0,20) width 91: "\x{2013} establishes a "
194 LayoutInline {STRONG} at (0,0) size 187x19
195 LayoutText {#text} at (91,20) size 187x19
196 text run at (91,20) width 187: "new block formating context"
197 LayoutText {#text} at (278,20) size 359x39
198 text run at (278,20) width 81: " thanks to the"
199 text run at (0,40) width 103: "CSS declaration "
200 LayoutInline {CODE} at (0,0) size 128x16
201 LayoutText {#text} at (103,43) size 128x16
202 text run at (103,43) width 128: "overflow: hidden"
203 LayoutText {#text} at (231,40) size 4x19
204 text run at (231,40) width 4: ";"
205 LayoutBR {BR} at (235,40) size 0x19
206 LayoutText {#text} at (0,60) size 310x19
207 text run at (0,60) width 310: "\x{2013} has a 100px left margin and a 100px right margin;"
208 LayoutBR {BR} at (310,60) size 0x19
209 LayoutBR {BR} at (0,80) size 0x19
210 LayoutText {#text} at (0,100) size 131x19
211 text run at (0,100) width 131: "This orange rectangle:"
212 LayoutBR {BR} at (131,100) size 0x19
213 LayoutText {#text} at (0,120) size 91x19
214 text run at (0,120) width 91: "\x{2013} establishes a "
215 LayoutInline {STRONG} at (0,0) size 187x19
216 LayoutText {#text} at (91,120) size 187x19
217 text run at (91,120) width 187: "new block formating context"
218 LayoutText {#text} at (278,120) size 359x39
219 text run at (278,120) width 81: " thanks to the"
220 text run at (0,140) width 103: "CSS declaration "
221 LayoutInline {CODE} at (0,0) size 128x16
222 LayoutText {#text} at (103,143) size 128x16
223 text run at (103,143) width 128: "overflow: hidden"
224 LayoutText {#text} at (231,140) size 4x19
225 text run at (231,140) width 4: ";"
226 LayoutBR {BR} at (235,140) size 0x19
227 LayoutText {#text} at (0,160) size 310x19
228 text run at (0,160) width 310: "\x{2013} has a 100px left margin and a 100px right margin;"
229 layer at (8,1446) size 769x200 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
230 LayoutBlockFlow {DIV} at (0,1426.53) size 769x200 [bgcolor=#C0C0C0]
231 LayoutBlockFlow (floating) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
232 LayoutText {#text} at (36,36) size 125x59
233 text run at (36,36) width 125: "This yellow square is"
234 text run at (36,56) width 124: "floated left and it has"
235 text run at (36,76) width 63: "no margin."
236 LayoutBlockFlow (floating) {DIV} at (569,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
237 LayoutText {#text} at (36,36) size 125x59
238 text run at (36,36) width 125: "This yellow square is"
239 text run at (36,56) width 119: "a floated right and it"
240 text run at (36,76) width 87: "has no margin."
241 layer at (208,1446) size 369x180 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
242 LayoutBlockFlow {DIV} at (200,0) size 369x180 [bgcolor=#FFA500]
243 LayoutText {#text} at (0,0) size 131x19
244 text run at (0,0) width 131: "This orange rectangle:"
245 LayoutBR {BR} at (131,0) size 0x19
246 LayoutText {#text} at (0,20) size 91x19
247 text run at (0,20) width 91: "\x{2013} establishes a "
248 LayoutInline {STRONG} at (0,0) size 187x19
249 LayoutText {#text} at (91,20) size 187x19
250 text run at (91,20) width 187: "new block formating context"
251 LayoutText {#text} at (278,20) size 359x39
252 text run at (278,20) width 81: " thanks to the"
253 text run at (0,40) width 103: "CSS declaration "
254 LayoutInline {CODE} at (0,0) size 128x16
255 LayoutText {#text} at (103,43) size 128x16
256 text run at (103,43) width 128: "overflow: hidden"
257 LayoutText {#text} at (231,40) size 4x19
258 text run at (231,40) width 4: ";"
259 LayoutBR {BR} at (235,40) size 0x19
260 LayoutText {#text} at (0,60) size 164x19
261 text run at (0,60) width 164: "\x{2013} has a 200px right margin;"
262 LayoutBR {BR} at (164,60) size 0x19
263 LayoutBR {BR} at (0,80) size 0x19
264 LayoutText {#text} at (0,100) size 131x19
265 text run at (0,100) width 131: "This orange rectangle:"
266 LayoutBR {BR} at (131,100) size 0x19
267 LayoutText {#text} at (0,120) size 91x19
268 text run at (0,120) width 91: "\x{2013} establishes a "
269 LayoutInline {STRONG} at (0,0) size 187x19
270 LayoutText {#text} at (91,120) size 187x19
271 text run at (91,120) width 187: "new block formating context"
272 LayoutText {#text} at (278,120) size 359x39
273 text run at (278,120) width 81: " thanks to the"
274 text run at (0,140) width 103: "CSS declaration "
275 LayoutInline {CODE} at (0,0) size 128x16
276 LayoutText {#text} at (103,143) size 128x16
277 text run at (103,143) width 128: "overflow: hidden"
278 LayoutText {#text} at (231,140) size 4x19
279 text run at (231,140) width 4: ";"
280 LayoutBR {BR} at (235,140) size 0x19
281 LayoutText {#text} at (0,160) size 164x19
282 text run at (0,160) width 164: "\x{2013} has a 200px right margin;"
283 layer at (8,1791) size 769x300 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
284 LayoutBlockFlow {DIV} at (0,1771.44) size 769x300 [bgcolor=#C0C0C0]
285 LayoutBlockFlow (floating) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
286 LayoutText {#text} at (36,36) size 125x79
287 text run at (36,36) width 125: "This yellow square is"
288 text run at (36,56) width 124: "floated left and it has"
289 text run at (36,76) width 97: "a right margin of"
290 text run at (36,96) width 43: "100px."
291 LayoutBlockFlow (floating) {DIV} at (569,0) size 200x200 [bgcolor=#FFFF00] [border: (4px solid #008000)]
292 LayoutText {#text} at (36,36) size 125x79
293 text run at (36,36) width 125: "This yellow square is"
294 text run at (36,56) width 108: "floated right and it"
295 text run at (36,76) width 113: "has a left margin of"
296 text run at (36,96) width 43: "100px."
297 layer at (308,1791) size 169x300 backgroundClip at (0,0) size 0x0 clip at (0,0) size 0x0
298 LayoutBlockFlow {DIV} at (300,0) size 169x300 [bgcolor=#FFA500]
299 LayoutText {#text} at (0,0) size 131x19
300 text run at (0,0) width 131: "This orange rectangle:"
301 LayoutBR {BR} at (131,0) size 0x19
302 LayoutText {#text} at (0,20) size 91x19
303 text run at (0,20) width 91: "\x{2013} establishes a "
304 LayoutInline {STRONG} at (0,0) size 157x39
305 LayoutText {#text} at (91,20) size 157x39
306 text run at (91,20) width 66: "new block"
307 text run at (0,40) width 117: "formating context"
308 LayoutText {#text} at (117,40) size 160x39
309 text run at (117,40) width 43: " thanks"
310 text run at (0,60) width 137: "to the CSS declaration"
311 LayoutInline {CODE} at (0,0) size 128x16
312 LayoutText {#text} at (0,83) size 128x16
313 text run at (0,83) width 128: "overflow: hidden"
314 LayoutText {#text} at (128,80) size 4x19
315 text run at (128,80) width 4: ";"
316 LayoutBR {BR} at (132,80) size 0x19
317 LayoutText {#text} at (0,100) size 162x39
318 text run at (0,100) width 162: "\x{2013} has a 0px left margin and"
319 text run at (0,120) width 112: "a 0px right margin;"
320 LayoutBR {BR} at (112,120) size 0x19
321 LayoutBR {BR} at (0,140) size 0x19
322 LayoutText {#text} at (0,160) size 131x19
323 text run at (0,160) width 131: "This orange rectangle:"
324 LayoutBR {BR} at (131,160) size 0x19
325 LayoutText {#text} at (0,180) size 91x19
326 text run at (0,180) width 91: "\x{2013} establishes a "
327 LayoutInline {STRONG} at (0,0) size 157x39
328 LayoutText {#text} at (91,180) size 157x39
329 text run at (91,180) width 66: "new block"
330 text run at (0,200) width 117: "formating context"
331 LayoutText {#text} at (117,200) size 160x39
332 text run at (117,200) width 43: " thanks"
333 text run at (0,220) width 137: "to the CSS declaration"
334 LayoutInline {CODE} at (0,0) size 128x16
335 LayoutText {#text} at (0,243) size 128x16
336 text run at (0,243) width 128: "overflow: hidden"
337 LayoutText {#text} at (128,240) size 4x19
338 text run at (128,240) width 4: ";"
339 LayoutBR {BR} at (132,240) size 0x19
340 LayoutText {#text} at (0,260) size 162x39
341 text run at (0,260) width 162: "\x{2013} has a 0px left margin and"
342 text run at (0,280) width 112: "a 0px right margin;"