OLD | NEW |
1 layer at (0,0) size 800x600 clip at (0,0) size 785x600 scrollHeight 2504 | 1 layer at (0,0) size 800x600 clip at (0,0) size 785x600 scrollHeight 2786 |
2 RenderView at (0,0) size 800x600 | 2 RenderView at (0,0) size 800x600 |
3 layer at (0,0) size 785x2504 backgroundClip at (0,0) size 785x600 clip at (0,0)
size 785x600 outlineClip at (0,0) size 785x600 | 3 layer at (0,0) size 785x2786 backgroundClip at (0,0) size 785x600 clip at (0,0)
size 785x600 outlineClip at (0,0) size 785x600 |
4 RenderBlock {HTML} at (0,0) size 785x2504 | 4 RenderBlock {HTML} at (0,0) size 785x2786 |
5 RenderBody {BODY} at (8,8) size 769x2488 [bgcolor=#CCCCCC] | 5 RenderBody {BODY} at (8,8) size 769x2770 [bgcolor=#CCCCCC] |
6 RenderBlock (floating) {P} at (0,0) size 384.50x32 [bgcolor=#FFFF00] | 6 RenderBlock (floating) {P} at (0,0) size 384.50x36 [bgcolor=#FFFF00] |
7 RenderText {#text} at (0,0) size 385x32 | 7 RenderText {#text} at (0,0) size 385x36 |
8 text run at (0,0) width 385: "This paragraph is of class \"one\". It h
as a width of 50% and" | 8 text run at (0,0) width 385: "This paragraph is of class \"one\". It h
as a width of 50% and" |
9 text run at (0,16) width 129: "is floated to the left." | 9 text run at (0,18) width 129: "is floated to the left." |
10 RenderBlock {P} at (0,0) size 769x80 | 10 RenderBlock {P} at (0,0) size 769x90 |
11 RenderText {#text} at (384,0) size 769x80 | 11 RenderText {#text} at (384,0) size 769x90 |
12 text run at (384,0) width 385: "This paragraph should start on the rig
ht side of a yellow" | 12 text run at (384,0) width 385: "This paragraph should start on the rig
ht side of a yellow" |
13 text run at (384,16) width 385: "box which contains the previous parag
raph. Since the text" | 13 text run at (384,18) width 385: "box which contains the previous parag
raph. Since the text" |
14 text run at (0,32) width 769: "of this element is much longer than the
text in the previous element, the text will wrap around the yellow box. There i
s" | 14 text run at (0,36) width 769: "of this element is much longer than the
text in the previous element, the text will wrap around the yellow box. There i
s" |
15 text run at (0,48) width 769: "no padding, border or margins on this a
nd the previous element, so the text of the two elements should be very close to
" | 15 text run at (0,54) width 769: "no padding, border or margins on this a
nd the previous element, so the text of the two elements should be very close to
" |
16 text run at (0,64) width 71: "each other." | 16 text run at (0,72) width 71: "each other." |
17 RenderBlock (anonymous) at (0,80) size 769x16 | 17 RenderBlock (anonymous) at (0,90) size 769x18 |
18 RenderBR {BR} at (0,0) size 0x16 | 18 RenderBR {BR} at (0,0) size 0x18 |
19 RenderBlock {HR} at (0,104) size 769x2 [border: (1px inset #EEEEEE)] | 19 RenderBlock {HR} at (0,116) size 769x2 [border: (1px inset #EEEEEE)] |
20 RenderBlock (floating) {P} at (0,114) size 769x64 [bgcolor=#FFFF00] | 20 RenderBlock (floating) {P} at (0,126) size 769x72 [bgcolor=#FFFF00] |
21 RenderText {#text} at (0,0) size 769x64 | 21 RenderText {#text} at (0,0) size 769x72 |
22 text run at (0,0) width 769: "This paragraph is of class \"two\". Sinc
e the width has been set to 100%, it should automatically be as wide as its pare
nt" | 22 text run at (0,0) width 769: "This paragraph is of class \"two\". Sinc
e the width has been set to 100%, it should automatically be as wide as its pare
nt" |
23 text run at (0,16) width 769: "element allows it to be. Therefore, eve
n though the element is floated, there is no room for other content on the sides
" | 23 text run at (0,18) width 769: "element allows it to be. Therefore, eve
n though the element is floated, there is no room for other content on the sides
" |
24 text run at (0,32) width 769: "and a orange square image should be see
n AFTER the paragraph, not next to it. A yellow background has been added" | 24 text run at (0,36) width 769: "and a orange square image should be see
n AFTER the paragraph, not next to it. A yellow background has been added" |
25 text run at (0,48) width 265: "to this paragraph for diagnostic purpos
es." | 25 text run at (0,54) width 265: "to this paragraph for diagnostic purpos
es." |
26 RenderBlock (anonymous) at (0,114) size 769x83 | 26 RenderBlock (anonymous) at (0,126) size 769x91 |
27 RenderImage {IMG} at (0,64) size 15x15 | 27 RenderImage {IMG} at (0,72) size 15x15 |
28 RenderText {#text} at (15,67) size 4x16 | 28 RenderText {#text} at (15,73) size 4x18 |
29 text run at (15,67) width 4: " " | 29 text run at (15,73) width 4: " " |
30 RenderBR {BR} at (19,79) size 0x0 | 30 RenderBR {BR} at (19,87) size 0x0 |
31 RenderBlock {HR} at (0,205) size 769x2 [border: (1px inset #EEEEEE)] | 31 RenderBlock {HR} at (0,225) size 769x2 [border: (1px inset #EEEEEE)] |
32 RenderBlock (floating) {P} at (0,215) size 384.50x96 [bgcolor=#FFFF00] | 32 RenderBlock (floating) {P} at (0,235) size 384.50x108 [bgcolor=#FFFF00] |
33 RenderText {#text} at (0,0) size 385x96 | 33 RenderText {#text} at (0,0) size 385x108 |
34 text run at (0,0) width 384: "This paragraph is floated to the left an
d the orange square" | 34 text run at (0,0) width 384: "This paragraph is floated to the left an
d the orange square" |
35 text run at (0,16) width 384: "image should appear to the right of the
paragraph. This" | 35 text run at (0,18) width 384: "image should appear to the right of the
paragraph. This" |
36 text run at (0,32) width 385: "paragraph has a yellow background and n
o padding, margin" | 36 text run at (0,36) width 385: "paragraph has a yellow background and n
o padding, margin" |
37 text run at (0,48) width 385: "or border. The right edge of this yello
w box should be" | 37 text run at (0,54) width 385: "or border. The right edge of this yello
w box should be" |
38 text run at (0,64) width 385: "horizontally aligned with the left edge
of the yellow box" | 38 text run at (0,72) width 385: "horizontally aligned with the left edge
of the yellow box" |
39 text run at (0,80) width 81: "undernearth." | 39 text run at (0,90) width 81: "undernearth." |
40 RenderBlock (anonymous) at (0,215) size 769x96 | 40 RenderBlock (anonymous) at (0,235) size 769x108 |
41 RenderImage {IMG} at (384.50,0) size 15x15 | 41 RenderImage {IMG} at (384.50,0) size 15x15 |
42 RenderText {#text} at (399,3) size 5x16 | 42 RenderText {#text} at (399,1) size 5x18 |
43 text run at (399,3) width 5: " " | 43 text run at (399,1) width 5: " " |
44 RenderBR {BR} at (403,15) size 1x0 | 44 RenderBR {BR} at (403,15) size 1x0 |
45 RenderBlock {HR} at (0,319) size 769x2 [border: (1px inset #EEEEEE)] | 45 RenderBlock {HR} at (0,351) size 769x2 [border: (1px inset #EEEEEE)] |
46 RenderBlock (floating) {P} at (384.50,329) size 384.50x96 [bgcolor=#FFFF00
] | 46 RenderBlock (floating) {P} at (384.50,361) size 384.50x108 [bgcolor=#FFFF0
0] |
47 RenderText {#text} at (0,0) size 385x96 | 47 RenderText {#text} at (0,0) size 385x108 |
48 text run at (0,0) width 384: "This paragraph is floated to the right (
using a STYLE" | 48 text run at (0,0) width 384: "This paragraph is floated to the right (
using a STYLE" |
49 text run at (0,16) width 384: "attribute) and the orange square image
should appear to the" | 49 text run at (0,18) width 384: "attribute) and the orange square image
should appear to the" |
50 text run at (0,32) width 384: "left of the paragraph. This paragraph h
as a yellow" | 50 text run at (0,36) width 384: "left of the paragraph. This paragraph h
as a yellow" |
51 text run at (0,48) width 384: "background and no padding, margin or bo
rder. The left" | 51 text run at (0,54) width 384: "background and no padding, margin or bo
rder. The left" |
52 text run at (0,64) width 385: "edge of this yellow box should be horiz
onally aligned with" | 52 text run at (0,72) width 385: "edge of this yellow box should be horiz
onally aligned with" |
53 text run at (0,80) width 251: "the right edge of the yellow box above.
" | 53 text run at (0,90) width 251: "the right edge of the yellow box above.
" |
54 RenderBlock (anonymous) at (0,329) size 769x96 | 54 RenderBlock (anonymous) at (0,361) size 769x108 |
55 RenderImage {IMG} at (0,0) size 15x15 | 55 RenderImage {IMG} at (0,0) size 15x15 |
56 RenderText {#text} at (15,3) size 4x16 | 56 RenderText {#text} at (15,1) size 4x18 |
57 text run at (15,3) width 4: " " | 57 text run at (15,1) width 4: " " |
58 RenderBR {BR} at (19,15) size 0x0 | 58 RenderBR {BR} at (19,15) size 0x0 |
59 RenderBlock {HR} at (0,433) size 769x2 [border: (1px inset #EEEEEE)] | 59 RenderBlock {HR} at (0,477) size 769x2 [border: (1px inset #EEEEEE)] |
60 RenderBlock {P} at (0,443) size 769x48 | 60 RenderBlock {P} at (0,487) size 769x72 |
61 RenderBlock (floating) {SPAN} at (0,0) size 48x32 [bgcolor=#C0C0C0] | 61 RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0] |
62 RenderText {#text} at (0,0) size 22x32 | 62 RenderText {#text} at (0,0) size 22x37 |
63 text run at (0,0) width 22: "T" | 63 text run at (0,0) width 22: "T" |
64 RenderText {#text} at (48,0) size 769x48 | 64 RenderText {#text} at (48,0) size 769x72 |
65 text run at (48,0) width 721: "he first letter (a \"T\") of this parag
raph should float left and be twice the font-size of the rest of the paragraph,
as" | 65 text run at (48,0) width 721: "he first letter (a \"T\") of this parag
raph should float left and be twice the font-size of the rest of the paragraph,
as" |
66 text run at (48,16) width 530: "well as bold, with a content width of
1.5em and a background-color of silver. " | 66 text run at (48,18) width 530: "well as bold, with a content width of
1.5em and a background-color of silver. " |
67 text run at (577,16) width 192: "The top of the big letter \"T\"" | 67 text run at (577,18) width 192: "The top of the big letter \"T\"" |
68 text run at (0,32) width 736: "should be vertically aligned with the t
op of the first line of this paragraph. This is commonly known as \"drop-cap\"." | 68 text run at (48,36) width 721: "should be vertically aligned with the
top of the first line of this paragraph. This is commonly known as \"drop-" |
69 RenderBlock (anonymous) at (0,491) size 769x16 | 69 text run at (0,54) width 33: "cap\"." |
70 RenderBR {BR} at (0,0) size 0x16 | 70 RenderBlock (anonymous) at (0,559) size 769x18 |
71 RenderBlock {HR} at (0,515) size 769x2 [border: (1px inset #EEEEEE)] | 71 RenderBR {BR} at (0,0) size 0x18 |
72 RenderBlock (floating) {P} at (423,535) size 336x192 [bgcolor=#FFFF00] [bo
rder: (3px solid #FF0000)] | 72 RenderBlock {HR} at (0,585) size 769x2 [border: (1px inset #EEEEEE)] |
73 RenderText {#text} at (8,8) size 320x176 | 73 RenderBlock (floating) {P} at (423,605) size 336x214 [bgcolor=#FFFF00] [bo
rder: (3px solid #FF0000)] |
| 74 RenderText {#text} at (8,8) size 320x198 |
74 text run at (8,8) width 320: "This paragraph should be floated to the
right, sort" | 75 text run at (8,8) width 320: "This paragraph should be floated to the
right, sort" |
75 text run at (8,24) width 320: "of like a 'sidebar' in a magazine artic
le. Its width" | 76 text run at (8,26) width 320: "of like a 'sidebar' in a magazine artic
le. Its width" |
76 text run at (8,40) width 320: "is 20em so the box should not be reform
atted" | 77 text run at (8,44) width 320: "is 20em so the box should not be reform
atted" |
77 text run at (8,56) width 320: "when the size of the viewport is change
d (e.g." | 78 text run at (8,62) width 320: "when the size of the viewport is change
d (e.g." |
78 text run at (8,72) width 320: "when the window is resized). The backgr
ound" | 79 text run at (8,80) width 320: "when the window is resized). The backgr
ound" |
79 text run at (8,88) width 320: "color of the element is yellow, and the
re should" | 80 text run at (8,98) width 320: "color of the element is yellow, and the
re should" |
80 text run at (8,104) width 320: "be a 3px solid red border outside a 5p
x wide" | 81 text run at (8,116) width 320: "be a 3px solid red border outside a 5p
x wide" |
81 text run at (8,120) width 320: "padding. Also, the element has a 10px
wide" | 82 text run at (8,134) width 320: "padding. Also, the element has a 10px
wide" |
82 text run at (8,136) width 320: "margin around it where the blue backgr
ound of" | 83 text run at (8,152) width 320: "margin around it where the blue backgr
ound of" |
83 text run at (8,152) width 320: "the paragraph in the normal flow shoul
d shine" | 84 text run at (8,170) width 320: "the paragraph in the normal flow shoul
d shine" |
84 text run at (8,168) width 54: "through." | 85 text run at (8,188) width 54: "through." |
85 RenderBlock {P} at (0,525) size 769x192 [bgcolor=#66CCFF] | 86 RenderBlock {P} at (0,595) size 769x216 [bgcolor=#66CCFF] |
86 RenderText {#text} at (0,0) size 413x192 | 87 RenderText {#text} at (0,0) size 413x216 |
87 text run at (0,0) width 413: "This paragraph is not floating. If there
is enough room, the" | 88 text run at (0,0) width 413: "This paragraph is not floating. If there
is enough room, the" |
88 text run at (0,16) width 413: "textual content of the paragraph should
appear on the left side of" | 89 text run at (0,18) width 413: "textual content of the paragraph should
appear on the left side of" |
89 text run at (0,32) width 230: "the yellow \"sidebar\" on the right. " | 90 text run at (0,36) width 230: "the yellow \"sidebar\" on the right. " |
90 text run at (229,32) width 184: "The content of this element" | 91 text run at (229,36) width 184: "The content of this element" |
91 text run at (0,48) width 274: "should flow around the floated element.
" | 92 text run at (0,54) width 274: "should flow around the floated element.
" |
92 text run at (273,48) width 140: "However, the floated" | 93 text run at (273,54) width 140: "However, the floated" |
93 text run at (0,64) width 413: "element may or may not be obscured by t
he blue background of" | 94 text run at (0,72) width 413: "element may or may not be obscured by t
he blue background of" |
94 text run at (0,80) width 413: "this element, as the specification does
not say which is drawn" | 95 text run at (0,90) width 413: "this element, as the specification does
not say which is drawn" |
95 text run at (0,96) width 64: "\"on top.\" " | 96 text run at (0,108) width 64: "\"on top.\" " |
96 text run at (63,96) width 350: "Even if the floated element is obscure
d, it still forces" | 97 text run at (63,108) width 350: "Even if the floated element is obscur
ed, it still forces" |
97 text run at (0,112) width 322: "the content of this element to flow ar
ound it. " | 98 text run at (0,126) width 322: "the content of this element to flow ar
ound it. " |
98 text run at (321,112) width 92: "If the floated" | 99 text run at (321,126) width 92: "If the floated" |
99 text run at (0,128) width 413: "element is not obscured, then the blue
rectangle of this" | 100 text run at (0,144) width 413: "element is not obscured, then the blue
rectangle of this" |
100 text run at (0,144) width 413: "paragraph should extend 10px above and
to the right of the" | 101 text run at (0,162) width 413: "paragraph should extend 10px above and
to the right of the" |
101 text run at (0,160) width 413: "sidebar's red border, due to the margi
n styles set for the floated" | 102 text run at (0,180) width 413: "sidebar's red border, due to the margi
n styles set for the floated" |
102 text run at (0,176) width 55: "element." | 103 text run at (0,198) width 55: "element." |
103 RenderBlock (anonymous) at (0,717) size 769x20 | 104 RenderBlock (anonymous) at (0,811) size 769x18 |
104 RenderBR {BR} at (0,0) size 0x16 | 105 RenderBR {BR} at (0,0) size 0x18 |
105 RenderBlock {HR} at (0,745) size 769x2 [border: (1px inset #EEEEEE)] | 106 RenderBlock {HR} at (0,837) size 769x2 [border: (1px inset #EEEEEE)] |
106 RenderBlock {DIV} at (0,755) size 769x24 [bgcolor=#66CCFF] [border: (4px s
olid #FF0000)] | 107 RenderBlock {DIV} at (0,847) size 769x26 [bgcolor=#66CCFF] [border: (4px s
olid #FF0000)] |
107 RenderBlock (floating) {DIV} at (425,14) size 330x218 [bgcolor=#FFFF00] | 108 RenderBlock (floating) {DIV} at (425,14) size 330x244 [bgcolor=#FFFF00] |
108 RenderBlock {P} at (5,5) size 320x208 | 109 RenderBlock {P} at (5,5) size 320x234 |
109 RenderText {#text} at (0,0) size 320x208 | 110 RenderText {#text} at (0,0) size 320x234 |
110 text run at (0,0) width 320: "This paragraph is placed inside a DI
V element" | 111 text run at (0,0) width 320: "This paragraph is placed inside a DI
V element" |
111 text run at (0,16) width 320: "which is floated to the right. The
width of the" | 112 text run at (0,18) width 320: "which is floated to the right. The
width of the" |
112 text run at (0,32) width 320: "DIV element is 20em. The background
is yellow" | 113 text run at (0,36) width 320: "DIV element is 20em. The background
is yellow" |
113 text run at (0,48) width 320: "and there is a 5px padding, a 10px
margin and no" | 114 text run at (0,54) width 320: "and there is a 5px padding, a 10px
margin and no" |
114 text run at (0,64) width 320: "border. Since it is floated, the ye
llow box should" | 115 text run at (0,72) width 320: "border. Since it is floated, the ye
llow box should" |
115 text run at (0,80) width 320: "be rendered on top of the backgroun
d and borders" | 116 text run at (0,90) width 320: "be rendered on top of the backgroun
d and borders" |
116 text run at (0,96) width 320: "of adjacent non-floated elements. T
o the left of" | 117 text run at (0,108) width 320: "of adjacent non-floated elements.
To the left of" |
117 text run at (0,112) width 320: "this yellow box there should be a
short paragraph" | 118 text run at (0,126) width 320: "this yellow box there should be a
short paragraph" |
118 text run at (0,128) width 320: "with a blue background and a red b
order. The" | 119 text run at (0,144) width 320: "with a blue background and a red b
order. The" |
119 text run at (0,144) width 320: "yellow box should be rendered on t
op of the" | 120 text run at (0,162) width 320: "yellow box should be rendered on t
op of the" |
120 text run at (0,160) width 320: "bottom red border. I.e., the botto
m red border will" | 121 text run at (0,180) width 320: "bottom red border. I.e., the botto
m red border will" |
121 text run at (0,176) width 320: "appear broken where it's overlaid
by the yellow" | 122 text run at (0,198) width 320: "appear broken where it's overlaid
by the yellow" |
122 text run at (0,192) width 63: "rectangle." | 123 text run at (0,216) width 63: "rectangle." |
123 RenderBlock {P} at (4,4) size 761x16 | 124 RenderBlock {P} at (4,4) size 761x18 |
124 RenderText {#text} at (0,0) size 274x16 | 125 RenderText {#text} at (0,0) size 274x18 |
125 text run at (0,0) width 274: "See description in the box on the righ
t side" | 126 text run at (0,0) width 274: "See description in the box on the righ
t side" |
126 RenderBlock (anonymous) at (0,779) size 769x218 | 127 RenderBlock (anonymous) at (0,873) size 769x242 |
127 RenderBR {BR} at (0,0) size 0x16 | 128 RenderBR {BR} at (0,0) size 0x18 |
128 RenderBlock {HR} at (0,1005) size 769x2 [border: (1px inset #EEEEEE)] | 129 RenderBlock {HR} at (0,1123) size 769x2 [border: (1px inset #EEEEEE)] |
129 RenderBlock (floating) {DIV} at (0,1015) size 192.25x64 [bgcolor=#66CCFF] | 130 RenderBlock (floating) {DIV} at (0,1133) size 192.25x72 [bgcolor=#66CCFF] |
130 RenderBlock {P} at (0,0) size 192.25x64 | 131 RenderBlock {P} at (0,0) size 192.25x72 |
131 RenderText {#text} at (0,0) size 192x64 | 132 RenderText {#text} at (0,0) size 192x72 |
132 text run at (0,0) width 192: "This paragraph is inside a" | 133 text run at (0,0) width 192: "This paragraph is inside a" |
133 text run at (0,16) width 192: "DIV which is floated left. Its" | 134 text run at (0,18) width 192: "DIV which is floated left. Its" |
134 text run at (0,32) width 192: "background is blue and the" | 135 text run at (0,36) width 192: "background is blue and the" |
135 text run at (0,48) width 89: "width is 25%." | 136 text run at (0,54) width 89: "width is 25%." |
136 RenderBlock (floating) {DIV} at (576.75,1015) size 192.25x64 [bgcolor=#FFF
F00] | 137 RenderBlock (floating) {DIV} at (576.75,1133) size 192.25x72 [bgcolor=#FFF
F00] |
137 RenderBlock {P} at (0,0) size 192.25x64 | 138 RenderBlock {P} at (0,0) size 192.25x72 |
138 RenderText {#text} at (0,0) size 192x64 | 139 RenderText {#text} at (0,0) size 192x72 |
139 text run at (0,0) width 192: "This paragraph is inside a" | 140 text run at (0,0) width 192: "This paragraph is inside a" |
140 text run at (0,16) width 192: "DIV which is floated right." | 141 text run at (0,18) width 192: "DIV which is floated right." |
141 text run at (0,32) width 21: "Its " | 142 text run at (0,36) width 21: "Its " |
142 text run at (21,32) width 171: "background is yellow and" | 143 text run at (21,36) width 171: "background is yellow and" |
143 text run at (0,48) width 112: "the width is 25%." | 144 text run at (0,54) width 112: "the width is 25%." |
144 RenderBlock {P} at (0,1015) size 769x32 | 145 RenderBlock {P} at (0,1133) size 769x36 |
145 RenderText {#text} at (192,0) size 384x32 | 146 RenderText {#text} at (192,0) size 384x36 |
146 text run at (192,0) width 384: "This paragraph should appear between a
blue box (on the" | 147 text run at (192,0) width 384: "This paragraph should appear between a
blue box (on the" |
147 text run at (192,16) width 31: "left) " | 148 text run at (192,18) width 31: "left) " |
148 text run at (222,16) width 204: "and a yellow box (on the right)." | 149 text run at (222,18) width 204: "and a yellow box (on the right)." |
149 RenderBlock (anonymous) at (0,1047) size 769x32 | 150 RenderBlock (anonymous) at (0,1169) size 769x36 |
150 RenderBR {BR} at (192,0) size 1x16 | 151 RenderBR {BR} at (192,0) size 1x18 |
151 RenderBlock {HR} at (0,1087) size 769x2 [border: (1px inset #EEEEEE)] | 152 RenderBlock {HR} at (0,1213) size 769x2 [border: (1px inset #EEEEEE)] |
152 RenderBlock (floating) {DIV} at (0,1097) size 576.75x112 [bgcolor=#66CCFF] | 153 RenderBlock (floating) {DIV} at (0,1223) size 576.75x126 [bgcolor=#66CCFF] |
153 RenderBlock (floating) {DIV} at (422.56,0) size 144.19x32 [bgcolor=#FFFF
00] | 154 RenderBlock (floating) {DIV} at (422.56,0) size 144.19x36 [bgcolor=#FFFF
00] |
154 RenderBlock {P} at (0,0) size 144.19x32 | 155 RenderBlock {P} at (0,0) size 144.19x36 |
155 RenderText {#text} at (0,0) size 145x32 | 156 RenderText {#text} at (0,0) size 145x36 |
156 text run at (0,0) width 145: "See description in the" | 157 text run at (0,0) width 145: "See description in the" |
157 text run at (0,16) width 127: "box on the left side." | 158 text run at (0,18) width 127: "box on the left side." |
158 RenderBlock {P} at (0,0) size 576.75x112 | 159 RenderBlock {P} at (0,0) size 576.75x126 |
159 RenderText {#text} at (0,0) size 577x112 | 160 RenderText {#text} at (0,0) size 577x126 |
160 text run at (0,0) width 423: "This paragraph is inside a DIV which i
s floated left. The" | 161 text run at (0,0) width 423: "This paragraph is inside a DIV which i
s floated left. The" |
161 text run at (0,16) width 422: "background of the DIV element is blue
and its width is 75%. This" | 162 text run at (0,18) width 422: "background of the DIV element is blue
and its width is 75%. This" |
162 text run at (0,32) width 406: "text should all be inside the blue re
ctangle. The blue DIV " | 163 text run at (0,36) width 406: "text should all be inside the blue re
ctangle. The blue DIV " |
163 text run at (405,32) width 171: "element has another DIV" | 164 text run at (405,36) width 171: "element has another DIV" |
164 text run at (0,48) width 224: "element as a child. It has a yellow " | 165 text run at (0,54) width 224: "element as a child. It has a yellow " |
165 text run at (223,48) width 354: "background color and is floated to
the right. Since it is" | 166 text run at (223,54) width 354: "background color and is floated to
the right. Since it is" |
166 text run at (0,64) width 12: "a " | 167 text run at (0,72) width 12: "a " |
167 text run at (11,64) width 411: "child of the blue DIV, the yellow DI
V should appear inside the " | 168 text run at (11,72) width 411: "child of the blue DIV, the yellow DI
V should appear inside the " |
168 text run at (421,64) width 156: "blue rectangle. Due to it" | 169 text run at (421,72) width 156: "blue rectangle. Due to it" |
169 text run at (0,80) width 253: "being floated to the right and having
" | 170 text run at (0,90) width 253: "being floated to the right and having
" |
170 text run at (252,80) width 325: "a 10px right margin, the yellow rec
tange should" | 171 text run at (252,90) width 325: "a 10px right margin, the yellow rec
tange should" |
171 text run at (0,96) width 113: "have a 10px blue " | 172 text run at (0,108) width 113: "have a 10px blue " |
172 text run at (112,96) width 144: "stripe on its right side." | 173 text run at (112,108) width 144: "stripe on its right side." |
173 RenderBlock (anonymous) at (0,1097) size 769x112 | 174 RenderBlock (anonymous) at (0,1223) size 769x126 |
174 RenderBR {BR} at (576,0) size 1x16 | 175 RenderBR {BR} at (576,0) size 1x18 |
175 RenderBlock {HR} at (0,1217) size 769x2 [border: (1px inset #EEEEEE)] | 176 RenderBlock {HR} at (0,1357) size 769x2 [border: (1px inset #EEEEEE)] |
176 LayoutTable {TABLE} at (0,1227) size 769x1261 [border: (1px outset #808080
)] | 177 LayoutTable {TABLE} at (0,1367) size 769x1403 [border: (1px outset #808080
)] |
177 LayoutTableSection {TBODY} at (1,1) size 767x1259 | 178 LayoutTableSection {TBODY} at (1,1) size 767x1401 |
178 LayoutTableRow {TR} at (0,0) size 767x24 | 179 LayoutTableRow {TR} at (0,0) size 767x26 |
179 LayoutTableCell {TD} at (0,0) size 767x24 [bgcolor=#C0C0C0] [border:
(1px inset #808080)] [r=0 c=0 rs=1 cs=2] | 180 LayoutTableCell {TD} at (0,0) size 767x26 [bgcolor=#C0C0C0] [border:
(1px inset #808080)] [r=0 c=0 rs=1 cs=2] |
180 RenderInline {STRONG} at (0,0) size 163x16 | 181 RenderInline {STRONG} at (0,0) size 163x18 |
181 RenderText {#text} at (4,4) size 163x16 | 182 RenderText {#text} at (4,4) size 163x18 |
182 text run at (4,4) width 163: "TABLE Testing Section" | 183 text run at (4,4) width 163: "TABLE Testing Section" |
183 LayoutTableRow {TR} at (0,24) size 767x1235 | 184 LayoutTableRow {TR} at (0,26) size 767x1375 |
184 LayoutTableCell {TD} at (0,629) size 12x24 [bgcolor=#C0C0C0] [border
: (1px inset #808080)] [r=1 c=0 rs=1 cs=1] | 185 LayoutTableCell {TD} at (0,700) size 12x26 [bgcolor=#C0C0C0] [border
: (1px inset #808080)] [r=1 c=0 rs=1 cs=1] |
185 RenderText {#text} at (4,4) size 4x16 | 186 RenderText {#text} at (4,4) size 4x18 |
186 text run at (4,4) width 4: " " | 187 text run at (4,4) width 4: " " |
187 LayoutTableCell {TD} at (12,24) size 755x1235 [border: (1px inset #8
08080)] [r=1 c=1 rs=1 cs=1] | 188 LayoutTableCell {TD} at (12,26) size 755x1375 [border: (1px inset #8
08080)] [r=1 c=1 rs=1 cs=1] |
188 RenderBlock (floating) {P} at (4,4) size 373.50x32 [bgcolor=#FFFF0
0] | 189 RenderBlock (floating) {P} at (4,4) size 373.50x36 [bgcolor=#FFFF0
0] |
189 RenderText {#text} at (0,0) size 373x32 | 190 RenderText {#text} at (0,0) size 373x36 |
190 text run at (0,0) width 373: "This paragraph is of class \"one
\". It has a width of 50%" | 191 text run at (0,0) width 373: "This paragraph is of class \"one
\". It has a width of 50%" |
191 text run at (0,16) width 156: "and is floated to the left." | 192 text run at (0,18) width 156: "and is floated to the left." |
192 RenderBlock {P} at (4,4) size 747x80 | 193 RenderBlock {P} at (4,4) size 747x90 |
193 RenderText {#text} at (373,0) size 747x80 | 194 RenderText {#text} at (373,0) size 747x90 |
194 text run at (373,0) width 374: "This paragraph should start on
the right side of a yellow" | 195 text run at (373,0) width 374: "This paragraph should start on
the right side of a yellow" |
195 text run at (373,16) width 374: "box which contains the previo
us paragraph. Since the text" | 196 text run at (373,18) width 374: "box which contains the previo
us paragraph. Since the text" |
196 text run at (0,32) width 747: "of this element is much longer
than the text in the previous element, the text will wrap around the yellow box.
There" | 197 text run at (0,36) width 747: "of this element is much longer
than the text in the previous element, the text will wrap around the yellow box.
There" |
197 text run at (0,48) width 747: "is no padding, border or margin
s on this and the previous element, so the text of the two elements should be ve
ry" | 198 text run at (0,54) width 747: "is no padding, border or margin
s on this and the previous element, so the text of the two elements should be ve
ry" |
198 text run at (0,64) width 124: "close to each other." | 199 text run at (0,72) width 124: "close to each other." |
199 RenderBlock (anonymous) at (4,84) size 747x16 | 200 RenderBlock (anonymous) at (4,94) size 747x18 |
200 RenderBR {BR} at (0,0) size 0x16 | 201 RenderBR {BR} at (0,0) size 0x18 |
201 RenderBlock {HR} at (4,108) size 747x2 [border: (1px inset #EEEEEE
)] | 202 RenderBlock {HR} at (4,120) size 747x2 [border: (1px inset #EEEEEE
)] |
202 RenderBlock (floating) {P} at (4,118) size 747x64 [bgcolor=#FFFF00
] | 203 RenderBlock (floating) {P} at (4,130) size 747x72 [bgcolor=#FFFF00
] |
203 RenderText {#text} at (0,0) size 747x64 | 204 RenderText {#text} at (0,0) size 747x72 |
204 text run at (0,0) width 747: "This paragraph is of class \"two
\". Since the width has been set to 100%, it should automatically be as wide as
its" | 205 text run at (0,0) width 747: "This paragraph is of class \"two
\". Since the width has been set to 100%, it should automatically be as wide as
its" |
205 text run at (0,16) width 747: "parent element allows it to be.
Therefore, even though the element is floated, there is no room for other conte
nt on" | 206 text run at (0,18) width 747: "parent element allows it to be.
Therefore, even though the element is floated, there is no room for other conte
nt on" |
206 text run at (0,32) width 747: "the sides and a orange square i
mage should be seen AFTER the paragraph, not next to it. A yellow background has
" | 207 text run at (0,36) width 747: "the sides and a orange square i
mage should be seen AFTER the paragraph, not next to it. A yellow background has
" |
207 text run at (0,48) width 342: "been added to this paragraph fo
r diagnostic purposes." | 208 text run at (0,54) width 342: "been added to this paragraph fo
r diagnostic purposes." |
208 RenderBlock (anonymous) at (4,118) size 747x83 | 209 RenderBlock (anonymous) at (4,130) size 747x91 |
209 RenderImage {IMG} at (0,64) size 15x15 | 210 RenderImage {IMG} at (0,72) size 15x15 |
210 RenderText {#text} at (15,67) size 4x16 | 211 RenderText {#text} at (15,73) size 4x18 |
211 text run at (15,67) width 4: " " | 212 text run at (15,73) width 4: " " |
212 RenderBR {BR} at (19,79) size 0x0 | 213 RenderBR {BR} at (19,87) size 0x0 |
213 RenderBlock {HR} at (4,209) size 747x2 [border: (1px inset #EEEEEE
)] | 214 RenderBlock {HR} at (4,229) size 747x2 [border: (1px inset #EEEEEE
)] |
214 RenderBlock (floating) {P} at (4,219) size 373.50x96 [bgcolor=#FFF
F00] | 215 RenderBlock (floating) {P} at (4,239) size 373.50x108 [bgcolor=#FF
FF00] |
215 RenderText {#text} at (0,0) size 374x96 | 216 RenderText {#text} at (0,0) size 374x108 |
216 text run at (0,0) width 373: "This paragraph is floated to the
left and the orange square" | 217 text run at (0,0) width 373: "This paragraph is floated to the
left and the orange square" |
217 text run at (0,16) width 373: "image should appear to the righ
t of the paragraph. This" | 218 text run at (0,18) width 373: "image should appear to the righ
t of the paragraph. This" |
218 text run at (0,32) width 374: "paragraph has a yellow backgrou
nd and no padding," | 219 text run at (0,36) width 374: "paragraph has a yellow backgrou
nd and no padding," |
219 text run at (0,48) width 373: "margin or border. The right edg
e of this yellow box" | 220 text run at (0,54) width 373: "margin or border. The right edg
e of this yellow box" |
220 text run at (0,64) width 373: "should be horizontally aligned
with the left edge of the" | 221 text run at (0,72) width 373: "should be horizontally aligned
with the left edge of the" |
221 text run at (0,80) width 156: "yellow box undernearth." | 222 text run at (0,90) width 156: "yellow box undernearth." |
222 RenderBlock (anonymous) at (4,219) size 747x96 | 223 RenderBlock (anonymous) at (4,239) size 747x108 |
223 RenderImage {IMG} at (373.50,0) size 15x15 | 224 RenderImage {IMG} at (373.50,0) size 15x15 |
224 RenderText {#text} at (388,3) size 5x16 | 225 RenderText {#text} at (388,1) size 5x18 |
225 text run at (388,3) width 5: " " | 226 text run at (388,1) width 5: " " |
226 RenderBR {BR} at (392,15) size 1x0 | 227 RenderBR {BR} at (392,15) size 1x0 |
227 RenderBlock {HR} at (4,323) size 747x2 [border: (1px inset #EEEEEE
)] | 228 RenderBlock {HR} at (4,355) size 747x2 [border: (1px inset #EEEEEE
)] |
228 RenderBlock (floating) {P} at (377.50,333) size 373.50x96 [bgcolor
=#FFFF00] | 229 RenderBlock (floating) {P} at (377.50,365) size 373.50x108 [bgcolo
r=#FFFF00] |
229 RenderText {#text} at (0,0) size 374x96 | 230 RenderText {#text} at (0,0) size 374x108 |
230 text run at (0,0) width 373: "This paragraph is floated to the
right (using a STYLE" | 231 text run at (0,0) width 373: "This paragraph is floated to the
right (using a STYLE" |
231 text run at (0,16) width 374: "attribute) and the orange squar
e image should appear to" | 232 text run at (0,18) width 374: "attribute) and the orange squar
e image should appear to" |
232 text run at (0,32) width 374: "the left of the paragraph. This
paragraph has a yellow" | 233 text run at (0,36) width 374: "the left of the paragraph. This
paragraph has a yellow" |
233 text run at (0,48) width 373: "background and no padding, marg
in or border. The left" | 234 text run at (0,54) width 373: "background and no padding, marg
in or border. The left" |
234 text run at (0,64) width 373: "edge of this yellow box should
be horizonally aligned" | 235 text run at (0,72) width 373: "edge of this yellow box should
be horizonally aligned" |
235 text run at (0,80) width 284: "with the right edge of the yell
ow box above." | 236 text run at (0,90) width 284: "with the right edge of the yell
ow box above." |
236 RenderBlock (anonymous) at (4,333) size 747x96 | 237 RenderBlock (anonymous) at (4,365) size 747x108 |
237 RenderImage {IMG} at (0,0) size 15x15 | 238 RenderImage {IMG} at (0,0) size 15x15 |
238 RenderText {#text} at (15,3) size 4x16 | 239 RenderText {#text} at (15,1) size 4x18 |
239 text run at (15,3) width 4: " " | 240 text run at (15,1) width 4: " " |
240 RenderBR {BR} at (19,15) size 0x0 | 241 RenderBR {BR} at (19,15) size 0x0 |
241 RenderBlock {HR} at (4,437) size 747x2 [border: (1px inset #EEEEEE
)] | 242 RenderBlock {HR} at (4,481) size 747x2 [border: (1px inset #EEEEEE
)] |
242 RenderBlock {P} at (4,447) size 747x48 | 243 RenderBlock {P} at (4,491) size 747x72 |
243 RenderBlock (floating) {SPAN} at (0,0) size 48x32 [bgcolor=#C0C0
C0] | 244 RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0
C0] |
244 RenderText {#text} at (0,0) size 22x32 | 245 RenderText {#text} at (0,0) size 22x37 |
245 text run at (0,0) width 22: "T" | 246 text run at (0,0) width 22: "T" |
246 RenderText {#text} at (48,0) size 747x48 | 247 RenderText {#text} at (48,0) size 747x72 |
247 text run at (48,0) width 699: "he first letter (a \"T\") of th
is paragraph should float left and be twice the font-size of the rest of the par
agraph," | 248 text run at (48,0) width 699: "he first letter (a \"T\") of th
is paragraph should float left and be twice the font-size of the rest of the par
agraph," |
248 text run at (48,16) width 519: "as well as bold, with a conten
t width of 1.5em and a background-color of silver. " | 249 text run at (48,18) width 519: "as well as bold, with a conten
t width of 1.5em and a background-color of silver. " |
249 text run at (566,16) width 181: "The top of the big letter \"T
\"" | 250 text run at (566,18) width 181: "The top of the big letter \"T
\"" |
250 text run at (0,32) width 736: "should be vertically aligned wi
th the top of the first line of this paragraph. This is commonly known as \"drop
-cap\"." | 251 text run at (48,36) width 699: "should be vertically aligned w
ith the top of the first line of this paragraph. This is commonly known as" |
251 RenderBlock (anonymous) at (4,495) size 747x16 | 252 text run at (0,54) width 74: "\"drop-cap\"." |
252 RenderBR {BR} at (0,0) size 0x16 | 253 RenderBlock (anonymous) at (4,563) size 747x18 |
253 RenderBlock {HR} at (4,519) size 747x2 [border: (1px inset #EEEEEE
)] | 254 RenderBR {BR} at (0,0) size 0x18 |
254 RenderBlock (floating) {P} at (405,539) size 336x192 [bgcolor=#FFF
F00] [border: (3px solid #FF0000)] | 255 RenderBlock {HR} at (4,589) size 747x2 [border: (1px inset #EEEEEE
)] |
255 RenderText {#text} at (8,8) size 320x176 | 256 RenderBlock (floating) {P} at (405,609) size 336x214 [bgcolor=#FFF
F00] [border: (3px solid #FF0000)] |
| 257 RenderText {#text} at (8,8) size 320x198 |
256 text run at (8,8) width 320: "This paragraph should be floated
to the right, sort" | 258 text run at (8,8) width 320: "This paragraph should be floated
to the right, sort" |
257 text run at (8,24) width 320: "of like a 'sidebar' in a magazi
ne article. Its width" | 259 text run at (8,26) width 320: "of like a 'sidebar' in a magazi
ne article. Its width" |
258 text run at (8,40) width 320: "is 20em so the box should not b
e reformatted" | 260 text run at (8,44) width 320: "is 20em so the box should not b
e reformatted" |
259 text run at (8,56) width 320: "when the size of the viewport i
s changed (e.g." | 261 text run at (8,62) width 320: "when the size of the viewport i
s changed (e.g." |
260 text run at (8,72) width 320: "when the window is resized). Th
e background" | 262 text run at (8,80) width 320: "when the window is resized). Th
e background" |
261 text run at (8,88) width 320: "color of the element is yellow,
and there should" | 263 text run at (8,98) width 320: "color of the element is yellow,
and there should" |
262 text run at (8,104) width 320: "be a 3px solid red border outs
ide a 5px wide" | 264 text run at (8,116) width 320: "be a 3px solid red border outs
ide a 5px wide" |
263 text run at (8,120) width 320: "padding. Also, the element has
a 10px wide" | 265 text run at (8,134) width 320: "padding. Also, the element has
a 10px wide" |
264 text run at (8,136) width 320: "margin around it where the blu
e background of" | 266 text run at (8,152) width 320: "margin around it where the blu
e background of" |
265 text run at (8,152) width 320: "the paragraph in the normal fl
ow should shine" | 267 text run at (8,170) width 320: "the paragraph in the normal fl
ow should shine" |
266 text run at (8,168) width 54: "through." | 268 text run at (8,188) width 54: "through." |
267 RenderBlock {P} at (4,529) size 747x192 [bgcolor=#66CCFF] | 269 RenderBlock {P} at (4,599) size 747x216 [bgcolor=#66CCFF] |
268 RenderText {#text} at (0,0) size 391x192 | 270 RenderText {#text} at (0,0) size 391x216 |
269 text run at (0,0) width 391: "This paragraph is not floating.
If there is enough room, the" | 271 text run at (0,0) width 391: "This paragraph is not floating.
If there is enough room, the" |
270 text run at (0,16) width 391: "textual content of the paragrap
h should appear on the left" | 272 text run at (0,18) width 391: "textual content of the paragrap
h should appear on the left" |
271 text run at (0,32) width 269: "side of the yellow \"sidebar\"
on the right. " | 273 text run at (0,36) width 269: "side of the yellow \"sidebar\"
on the right. " |
272 text run at (268,32) width 123: "The content of this" | 274 text run at (268,36) width 123: "The content of this" |
273 text run at (0,48) width 328: "element should flow around the
floated element. " | 275 text run at (0,54) width 328: "element should flow around the
floated element. " |
274 text run at (327,48) width 64: "However," | 276 text run at (327,54) width 64: "However," |
275 text run at (0,64) width 391: "the floated element may or may
not be obscured by the blue" | 277 text run at (0,72) width 391: "the floated element may or may
not be obscured by the blue" |
276 text run at (0,80) width 391: "background of this element, as
the specification does not say" | 278 text run at (0,90) width 391: "background of this element, as
the specification does not say" |
277 text run at (0,96) width 183: "which is drawn \"on top.\" " | 279 text run at (0,108) width 183: "which is drawn \"on top.\" " |
278 text run at (182,96) width 209: "Even if the floated element i
s" | 280 text run at (182,108) width 209: "Even if the floated element
is" |
279 text run at (0,112) width 391: "obscured, it still forces the
content of this element to flow" | 281 text run at (0,126) width 391: "obscured, it still forces the
content of this element to flow" |
280 text run at (0,128) width 71: "around it. " | 282 text run at (0,144) width 71: "around it. " |
281 text run at (70,128) width 321: "If the floated element is not
obscured, then the" | 283 text run at (70,144) width 321: "If the floated element is not
obscured, then the" |
282 text run at (0,144) width 391: "blue rectangle of this paragra
ph should extend 10px above" | 284 text run at (0,162) width 391: "blue rectangle of this paragra
ph should extend 10px above" |
283 text run at (0,160) width 391: "and to the right of the sideba
r's red border, due to the margin" | 285 text run at (0,180) width 391: "and to the right of the sideba
r's red border, due to the margin" |
284 text run at (0,176) width 212: "styles set for the floated ele
ment." | 286 text run at (0,198) width 212: "styles set for the floated ele
ment." |
285 RenderBlock (anonymous) at (4,721) size 747x20 | 287 RenderBlock (anonymous) at (4,815) size 747x18 |
286 RenderBR {BR} at (0,0) size 0x16 | 288 RenderBR {BR} at (0,0) size 0x18 |
287 RenderBlock {HR} at (4,749) size 747x2 [border: (1px inset #EEEEEE
)] | 289 RenderBlock {HR} at (4,841) size 747x2 [border: (1px inset #EEEEEE
)] |
288 RenderBlock {DIV} at (4,759) size 747x24 [bgcolor=#66CCFF] [border
: (4px solid #FF0000)] | 290 RenderBlock {DIV} at (4,851) size 747x26 [bgcolor=#66CCFF] [border
: (4px solid #FF0000)] |
289 RenderBlock (floating) {DIV} at (403,14) size 330x218 [bgcolor=#
FFFF00] | 291 RenderBlock (floating) {DIV} at (403,14) size 330x244 [bgcolor=#
FFFF00] |
290 RenderBlock {P} at (5,5) size 320x208 | 292 RenderBlock {P} at (5,5) size 320x234 |
291 RenderText {#text} at (0,0) size 320x208 | 293 RenderText {#text} at (0,0) size 320x234 |
292 text run at (0,0) width 320: "This paragraph is placed ins
ide a DIV element" | 294 text run at (0,0) width 320: "This paragraph is placed ins
ide a DIV element" |
293 text run at (0,16) width 320: "which is floated to the rig
ht. The width of the" | 295 text run at (0,18) width 320: "which is floated to the rig
ht. The width of the" |
294 text run at (0,32) width 320: "DIV element is 20em. The ba
ckground is yellow" | 296 text run at (0,36) width 320: "DIV element is 20em. The ba
ckground is yellow" |
295 text run at (0,48) width 320: "and there is a 5px padding,
a 10px margin and no" | 297 text run at (0,54) width 320: "and there is a 5px padding,
a 10px margin and no" |
296 text run at (0,64) width 320: "border. Since it is floated
, the yellow box should" | 298 text run at (0,72) width 320: "border. Since it is floated
, the yellow box should" |
297 text run at (0,80) width 320: "be rendered on top of the b
ackground and borders" | 299 text run at (0,90) width 320: "be rendered on top of the b
ackground and borders" |
298 text run at (0,96) width 320: "of adjacent non-floated ele
ments. To the left of" | 300 text run at (0,108) width 320: "of adjacent non-floated el
ements. To the left of" |
299 text run at (0,112) width 320: "this yellow box there shou
ld be a short paragraph" | 301 text run at (0,126) width 320: "this yellow box there shou
ld be a short paragraph" |
300 text run at (0,128) width 320: "with a blue background and
a red border. The" | 302 text run at (0,144) width 320: "with a blue background and
a red border. The" |
301 text run at (0,144) width 320: "yellow box should be rende
red on top of the" | 303 text run at (0,162) width 320: "yellow box should be rende
red on top of the" |
302 text run at (0,160) width 320: "bottom red border. I.e., t
he bottom red border will" | 304 text run at (0,180) width 320: "bottom red border. I.e., t
he bottom red border will" |
303 text run at (0,176) width 320: "appear broken where it's o
verlaid by the yellow" | 305 text run at (0,198) width 320: "appear broken where it's o
verlaid by the yellow" |
304 text run at (0,192) width 63: "rectangle." | 306 text run at (0,216) width 63: "rectangle." |
305 RenderBlock {P} at (4,4) size 739x16 | 307 RenderBlock {P} at (4,4) size 739x18 |
306 RenderText {#text} at (0,0) size 274x16 | 308 RenderText {#text} at (0,0) size 274x18 |
307 text run at (0,0) width 274: "See description in the box on
the right side" | 309 text run at (0,0) width 274: "See description in the box on
the right side" |
308 RenderBlock (anonymous) at (4,783) size 747x218 | 310 RenderBlock (anonymous) at (4,877) size 747x242 |
309 RenderBR {BR} at (0,0) size 0x16 | 311 RenderBR {BR} at (0,0) size 0x18 |
310 RenderBlock {HR} at (4,1009) size 747x2 [border: (1px inset #EEEEE
E)] | 312 RenderBlock {HR} at (4,1127) size 747x2 [border: (1px inset #EEEEE
E)] |
311 RenderBlock (floating) {DIV} at (4,1019) size 186.75x64 [bgcolor=#
66CCFF] | 313 RenderBlock (floating) {DIV} at (4,1137) size 186.75x72 [bgcolor=#
66CCFF] |
312 RenderBlock {P} at (0,0) size 186.75x64 | 314 RenderBlock {P} at (0,0) size 186.75x72 |
313 RenderText {#text} at (0,0) size 187x64 | 315 RenderText {#text} at (0,0) size 187x72 |
314 text run at (0,0) width 187: "This paragraph is inside a" | 316 text run at (0,0) width 187: "This paragraph is inside a" |
315 text run at (0,16) width 186: "DIV which is floated left. It
s" | 317 text run at (0,18) width 186: "DIV which is floated left. It
s" |
316 text run at (0,32) width 187: "background is blue and the" | 318 text run at (0,36) width 187: "background is blue and the" |
317 text run at (0,48) width 89: "width is 25%." | 319 text run at (0,54) width 89: "width is 25%." |
318 RenderBlock (floating) {DIV} at (564.25,1019) size 186.75x64 [bgco
lor=#FFFF00] | 320 RenderBlock (floating) {DIV} at (564.25,1137) size 186.75x72 [bgco
lor=#FFFF00] |
319 RenderBlock {P} at (0,0) size 186.75x64 | 321 RenderBlock {P} at (0,0) size 186.75x72 |
320 RenderText {#text} at (0,0) size 187x64 | 322 RenderText {#text} at (0,0) size 187x72 |
321 text run at (0,0) width 187: "This paragraph is inside a" | 323 text run at (0,0) width 187: "This paragraph is inside a" |
322 text run at (0,16) width 186: "DIV which is floated right." | 324 text run at (0,18) width 186: "DIV which is floated right." |
323 text run at (0,32) width 20: "Its " | 325 text run at (0,36) width 20: "Its " |
324 text run at (20,32) width 166: "background is yellow and" | 326 text run at (20,36) width 166: "background is yellow and" |
325 text run at (0,48) width 112: "the width is 25%." | 327 text run at (0,54) width 112: "the width is 25%." |
326 RenderBlock {P} at (4,1019) size 747x32 | 328 RenderBlock {P} at (4,1137) size 747x36 |
327 RenderText {#text} at (186,0) size 374x32 | 329 RenderText {#text} at (186,0) size 374x36 |
328 text run at (186,0) width 374: "This paragraph should appear b
etween a blue box (on the" | 330 text run at (186,0) width 374: "This paragraph should appear b
etween a blue box (on the" |
329 text run at (186,16) width 32: "left) " | 331 text run at (186,18) width 32: "left) " |
330 text run at (217,16) width 203: "and a yellow box (on the righ
t)." | 332 text run at (217,18) width 203: "and a yellow box (on the righ
t)." |
331 RenderBlock (anonymous) at (4,1051) size 747x32 | 333 RenderBlock (anonymous) at (4,1173) size 747x36 |
332 RenderBR {BR} at (186,0) size 1x16 | 334 RenderBR {BR} at (186,0) size 1x18 |
333 RenderBlock {HR} at (4,1091) size 747x2 [border: (1px inset #EEEEE
E)] | 335 RenderBlock {HR} at (4,1217) size 747x2 [border: (1px inset #EEEEE
E)] |
334 RenderBlock (floating) {DIV} at (4,1101) size 560.25x112 [bgcolor=
#66CCFF] | 336 RenderBlock (floating) {DIV} at (4,1227) size 560.25x126 [bgcolor=
#66CCFF] |
335 RenderBlock (floating) {DIV} at (410.19,0) size 140.06x32 [bgcol
or=#FFFF00] | 337 RenderBlock (floating) {DIV} at (410.19,0) size 140.06x36 [bgcol
or=#FFFF00] |
336 RenderBlock {P} at (0,0) size 140.06x32 | 338 RenderBlock {P} at (0,0) size 140.06x36 |
337 RenderText {#text} at (0,0) size 140x32 | 339 RenderText {#text} at (0,0) size 140x36 |
338 text run at (0,0) width 140: "See description in the" | 340 text run at (0,0) width 140: "See description in the" |
339 text run at (0,16) width 127: "box on the left side." | 341 text run at (0,18) width 127: "box on the left side." |
340 RenderBlock {P} at (0,0) size 560.25x112 | 342 RenderBlock {P} at (0,0) size 560.25x126 |
341 RenderText {#text} at (0,0) size 561x112 | 343 RenderText {#text} at (0,0) size 561x126 |
342 text run at (0,0) width 410: "This paragraph is inside a DIV
which is floated left. The" | 344 text run at (0,0) width 410: "This paragraph is inside a DIV
which is floated left. The" |
343 text run at (0,16) width 410: "background of the DIV element
is blue and its width is 75%." | 345 text run at (0,18) width 410: "background of the DIV element
is blue and its width is 75%." |
344 text run at (0,32) width 35: "This " | 346 text run at (0,36) width 35: "This " |
345 text run at (34,32) width 394: "text should all be inside th
e blue rectangle. The blue DIV " | 347 text run at (34,36) width 394: "text should all be inside th
e blue rectangle. The blue DIV " |
346 text run at (428,32) width 132: "element has another" | 348 text run at (428,36) width 132: "element has another" |
347 text run at (0,48) width 268: "DIV element as a child. It ha
s a yellow " | 349 text run at (0,54) width 268: "DIV element as a child. It ha
s a yellow " |
348 text run at (267,48) width 294: "background color and is flo
ated to the right." | 350 text run at (267,54) width 294: "background color and is flo
ated to the right." |
349 text run at (0,64) width 90: "Since it is a " | 351 text run at (0,72) width 90: "Since it is a " |
350 text run at (89,64) width 444: "child of the blue DIV, the y
ellow DIV should appear inside the " | 352 text run at (89,72) width 444: "child of the blue DIV, the y
ellow DIV should appear inside the " |
351 text run at (532,64) width 29: "blue" | 353 text run at (532,72) width 29: "blue" |
352 text run at (0,80) width 395: "rectangle. Due to it being fl
oated to the right and having " | 354 text run at (0,90) width 395: "rectangle. Due to it being fl
oated to the right and having " |
353 text run at (394,80) width 166: "a 10px right margin, the" | 355 text run at (394,90) width 166: "a 10px right margin, the" |
354 text run at (0,96) width 266: "yellow rectange should have a
10px blue " | 356 text run at (0,108) width 266: "yellow rectange should have
a 10px blue " |
355 text run at (265,96) width 143: "stripe on its right side." | 357 text run at (265,108) width 143: "stripe on its right side." |
356 RenderBlock (anonymous) at (4,1101) size 747x112 | 358 RenderBlock (anonymous) at (4,1227) size 747x126 |
357 RenderBR {BR} at (560,0) size 1x16 | 359 RenderBR {BR} at (560,0) size 1x18 |
358 RenderBlock {HR} at (4,1221) size 747x2 [border: (1px inset #EEEEE
E)] | 360 RenderBlock {HR} at (4,1361) size 747x2 [border: (1px inset #EEEEE
E)] |
OLD | NEW |