layer at (0,0) size 785x2589 RenderView at (0,0) size 785x600 layer at (0,0) size 785x2589 RenderBlock {HTML} at (0,0) size 785x2589 RenderBody {BODY} at (8,8) size 769x2573 [bgcolor=#CCCCCC] RenderBlock (floating) {P} at (0,0) size 385x34 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 385x34 text run at (0,0) width 385: "This paragraph is of class \"one\". It has a width of 50% and" text run at (0,17) width 124: "is floated to the left." RenderBlock {P} at (0,0) size 769x85 RenderText {#text} at (384,0) size 769x85 text run at (384,0) width 385: "This paragraph should start on the right side of a yellow box" text run at (384,17) width 385: "which contains the previous paragraph. Since the text of this" text run at (0,34) width 769: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no" text run at (0,51) width 769: "padding, border or margins on this and the previous element, so the text of the two elements should be very close to each" text run at (0,68) width 36: "other." RenderBlock (anonymous) at (0,85) size 769x17 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (0,110) size 769x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (0,120) size 769x68 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 769x68 text run at (0,0) width 769: "This paragraph is of class \"two\". Since the width has been set to 100%, it should automatically be as wide as its parent" text run at (0,17) width 769: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a" text run at (0,34) width 769: "orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this" text run at (0,51) width 217: "paragraph for diagnostic purposes." RenderBlock (anonymous) at (0,120) size 769x86 RenderImage {IMG} at (0,68) size 15x15 RenderText {#text} at (15,69) size 4x17 text run at (15,69) width 4: " " RenderBR {BR} at (19,83) size 0x0 RenderBlock {HR} at (0,214) size 769x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (0,224) size 385x102 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 385x102 text run at (0,0) width 385: "This paragraph is floated to the left and the orange square" text run at (0,17) width 385: "image should appear to the right of the paragraph. This" text run at (0,34) width 385: "paragraph has a yellow background and no padding, margin" text run at (0,51) width 385: "or border. The right edge of this yellow box should be" text run at (0,68) width 385: "horizontally aligned with the left edge of the yellow box" text run at (0,85) width 79: "undernearth." RenderBlock (anonymous) at (0,224) size 769x102 RenderImage {IMG} at (384,0) size 16x15 RenderText {#text} at (399,1) size 5x17 text run at (399,1) width 5: " " RenderBR {BR} at (403,15) size 1x0 RenderBlock {HR} at (0,334) size 769x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (384,344) size 385x102 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 385x102 text run at (0,0) width 385: "This paragraph is floated to the right (using a STYLE" text run at (0,17) width 385: "attribute) and the orange square image should appear to the" text run at (0,34) width 385: "left of the paragraph. This paragraph has a yellow" text run at (0,51) width 385: "background and no padding, margin or border. The left edge" text run at (0,68) width 385: "of this yellow box should be horizonally aligned with the" text run at (0,85) width 224: "right edge of the yellow box above." RenderBlock (anonymous) at (0,344) size 769x102 RenderImage {IMG} at (0,0) size 15x15 RenderText {#text} at (15,1) size 4x17 text run at (15,1) width 4: " " RenderBR {BR} at (19,15) size 0x0 RenderBlock {HR} at (0,454) size 769x2 [border: (1px inset #000000)] RenderBlock {P} at (0,464) size 769x51 RenderBlock (floating) {SPAN} at (0,0) size 48x36 [bgcolor=#C0C0C0] RenderText {#text} at (0,0) size 21x36 text run at (0,0) width 21: "T" RenderText {#text} at (48,0) size 721x51 text run at (48,0) width 721: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as" text run at (48,17) width 496: "well as bold, with a content width of 1.5em and a background-color of silver. " text run at (544,17) width 225: "The top of the big letter \"T\" should" text run at (48,34) width 675: "be vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"." RenderBlock (anonymous) at (0,515) size 769x17 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (0,540) size 769x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (423,560) size 336x186 [bgcolor=#FFFF00] [border: (3px solid #FF0000)] RenderText {#text} at (8,8) size 320x170 text run at (8,8) width 320: "This paragraph should be floated to the right, sort" text run at (8,25) width 320: "of like a 'sidebar' in a magazine article. Its width is" text run at (8,42) width 320: "20em so the box should not be reformatted when" text run at (8,59) width 320: "the size of the viewport is changed (e.g. when the" text run at (8,76) width 320: "window is resized). The background color of the" text run at (8,93) width 320: "element is yellow, and there should be a 3px solid" text run at (8,110) width 320: "red border outside a 5px wide padding. Also, the" text run at (8,127) width 320: "element has a 10px wide margin around it where" text run at (8,144) width 320: "the blue background of the paragraph in the" text run at (8,161) width 217: "normal flow should shine through." RenderBlock {P} at (0,550) size 769x187 [bgcolor=#66CCFF] RenderText {#text} at (0,0) size 413x187 text run at (0,0) width 413: "This paragraph is not floating. If there is enough room, the textual" text run at (0,17) width 413: "content of the paragraph should appear on the left side of the" text run at (0,34) width 193: "yellow \"sidebar\" on the right. " text run at (193,34) width 220: "The content of this element should" text run at (0,51) width 220: "flow around the floated element. " text run at (219,51) width 194: "However, the floated element" text run at (0,68) width 413: "may or may not be obscured by the blue background of this" text run at (0,85) width 413: "element, as the specification does not say which is drawn \"on" text run at (0,102) width 38: "top.\" " text run at (37,102) width 376: "Even if the floated element is obscured, it still forces the" text run at (0,119) width 264: "content of this element to flow around it. " text run at (263,119) width 150: "If the floated element is" text run at (0,136) width 413: "not obscured, then the blue rectangle of this paragraph should" text run at (0,153) width 413: "extend 10px above and to the right of the sidebar's red border," text run at (0,170) width 319: "due to the margin styles set for the floated element." RenderBlock (anonymous) at (0,737) size 769x19 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (0,764) size 769x2 [border: (1px inset #000000)] RenderBlock {DIV} at (0,774) size 769x25 [bgcolor=#66CCFF] [border: (4px solid #FF0000)] RenderBlock (floating) {DIV} at (425,14) size 330x214 [bgcolor=#FFFF00] RenderBlock {P} at (5,5) size 320x204 RenderText {#text} at (0,0) size 320x204 text run at (0,0) width 320: "This paragraph is placed inside a DIV element" text run at (0,17) width 320: "which is floated to the right. The width of the DIV" text run at (0,34) width 320: "element is 20em. The background is yellow and" text run at (0,51) width 320: "there is a 5px padding, a 10px margin and no" text run at (0,68) width 320: "border. Since it is floated, the yellow box should" text run at (0,85) width 320: "be rendered on top of the background and borders" text run at (0,102) width 320: "of adjacent non-floated elements. To the left of this" text run at (0,119) width 320: "yellow box there should be a short paragraph with" text run at (0,136) width 320: "a blue background and a red border. The yellow" text run at (0,153) width 320: "box should be rendered on top of the bottom red" text run at (0,170) width 320: "border. I.e., the bottom red border will appear" text run at (0,187) width 318: "broken where it's overlaid by the yellow rectangle." RenderBlock {P} at (4,4) size 761x17 RenderText {#text} at (0,0) size 268x17 text run at (0,0) width 268: "See description in the box on the right side" RenderBlock (anonymous) at (0,799) size 769x213 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (0,1020) size 769x2 [border: (1px inset #000000)] RenderBlock (floating) {DIV} at (0,1030) size 193x68 [bgcolor=#66CCFF] RenderBlock {P} at (0,0) size 193x68 RenderText {#text} at (0,0) size 193x68 text run at (0,0) width 193: "This paragraph is inside a" text run at (0,17) width 193: "DIV which is floated left. Its" text run at (0,34) width 193: "background is blue and the" text run at (0,51) width 87: "width is 25%." RenderBlock (floating) {DIV} at (576,1030) size 193x68 [bgcolor=#FFFF00] RenderBlock {P} at (0,0) size 193x68 RenderText {#text} at (0,0) size 193x68 text run at (0,0) width 193: "This paragraph is inside a" text run at (0,17) width 193: "DIV which is floated right. Its" text run at (0,34) width 193: "background is yellow and the" text run at (0,51) width 87: "width is 25%." RenderBlock {P} at (0,1030) size 769x34 RenderText {#text} at (192,0) size 385x34 text run at (192,0) width 385: "This paragraph should appear between a blue box (on the" text run at (192,17) width 30: "left) " text run at (221,17) width 200: "and a yellow box (on the right)." RenderBlock (anonymous) at (0,1064) size 769x34 RenderBR {BR} at (192,0) size 1x17 RenderBlock {HR} at (0,1106) size 769x2 [border: (1px inset #000000)] RenderBlock (floating) {DIV} at (0,1116) size 577x119 [bgcolor=#66CCFF] RenderBlock (floating) {DIV} at (422,0) size 145x34 [bgcolor=#FFFF00] RenderBlock {P} at (0,0) size 145x34 RenderText {#text} at (0,0) size 145x34 text run at (0,0) width 145: "See description in the" text run at (0,17) width 124: "box on the left side." RenderBlock {P} at (0,0) size 577x119 RenderText {#text} at (0,0) size 577x119 text run at (0,0) width 423: "This paragraph is inside a DIV which is floated left. The" text run at (0,17) width 423: "background of the DIV element is blue and its width is 75%. This" text run at (0,34) width 366: "text should all be inside the blue rectangle. The blue DIV " text run at (365,34) width 212: "element has another DIV element" text run at (0,51) width 167: "as a child. It has a yellow " text run at (166,51) width 363: "background color and is floated to the right. Since it is a " text run at (528,51) width 49: "child of" text run at (0,68) width 375: "the blue DIV, the yellow DIV should appear inside the " text run at (374,68) width 203: "blue rectangle. Due to it being" text run at (0,85) width 194: "floated to the right and having " text run at (193,85) width 384: "a 10px right margin, the yellow rectange should have a 10px" text run at (0,102) width 31: "blue " text run at (31,102) width 138: "stripe on its right side." RenderBlock (anonymous) at (0,1116) size 769x119 RenderBR {BR} at (576,0) size 1x17 RenderBlock {HR} at (0,1243) size 769x2 [border: (1px inset #000000)] RenderTable {TABLE} at (0,1253) size 769x1320 [border: (1px outset #808080)] RenderTableSection {TBODY} at (1,1) size 767x1318 RenderTableRow {TR} at (0,0) size 767x25 RenderTableCell {TD} at (0,0) size 767x25 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2] RenderInline {STRONG} at (0,0) size 163x17 RenderText {#text} at (4,4) size 163x17 text run at (4,4) width 163: "TABLE Testing Section" RenderTableRow {TR} at (0,25) size 767x1293 RenderTableCell {TD} at (0,659) size 12x25 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1] RenderText {#text} at (4,4) size 4x17 text run at (4,4) width 4: " " RenderTableCell {TD} at (12,25) size 755x1293 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1] RenderBlock (floating) {P} at (4,4) size 374x34 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 374x34 text run at (0,0) width 374: "This paragraph is of class \"one\". It has a width of 50% and" text run at (0,17) width 124: "is floated to the left." RenderBlock {P} at (4,4) size 747x85 RenderText {#text} at (373,0) size 747x85 text run at (373,0) width 374: "This paragraph should start on the right side of a yellow" text run at (373,17) width 374: "box which contains the previous paragraph. Since the text" text run at (0,34) width 747: "of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is" text run at (0,51) width 747: "no padding, border or margins on this and the previous element, so the text of the two elements should be very close to" text run at (0,68) width 69: "each other." RenderBlock (anonymous) at (4,89) size 747x17 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (4,114) size 747x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (4,124) size 747x68 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 747x68 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 parent" text run at (0,17) width 747: "element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides" text run at (0,34) width 747: "and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added" text run at (0,51) width 259: "to this paragraph for diagnostic purposes." RenderBlock (anonymous) at (4,124) size 747x86 RenderImage {IMG} at (0,68) size 15x15 RenderText {#text} at (15,69) size 4x17 text run at (15,69) width 4: " " RenderBR {BR} at (19,83) size 0x0 RenderBlock {HR} at (4,218) size 747x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (4,228) size 374x102 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 374x102 text run at (0,0) width 374: "This paragraph is floated to the left and the orange square" text run at (0,17) width 374: "image should appear to the right of the paragraph. This" text run at (0,34) width 374: "paragraph has a yellow background and no padding," text run at (0,51) width 374: "margin or border. The right edge of this yellow box should" text run at (0,68) width 374: "be horizontally aligned with the left edge of the yellow box" text run at (0,85) width 79: "undernearth." RenderBlock (anonymous) at (4,228) size 747x102 RenderImage {IMG} at (373,0) size 16x15 RenderText {#text} at (388,1) size 5x17 text run at (388,1) width 5: " " RenderBR {BR} at (392,15) size 1x0 RenderBlock {HR} at (4,338) size 747x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (377,348) size 374x102 [bgcolor=#FFFF00] RenderText {#text} at (0,0) size 374x102 text run at (0,0) width 374: "This paragraph is floated to the right (using a STYLE" text run at (0,17) width 374: "attribute) and the orange square image should appear to the" text run at (0,34) width 374: "left of the paragraph. This paragraph has a yellow" text run at (0,51) width 374: "background and no padding, margin or border. The left" text run at (0,68) width 374: "edge of this yellow box should be horizonally aligned with" text run at (0,85) width 247: "the right edge of the yellow box above." RenderBlock (anonymous) at (4,348) size 747x102 RenderImage {IMG} at (0,0) size 15x15 RenderText {#text} at (15,1) size 4x17 text run at (15,1) width 4: " " RenderBR {BR} at (19,15) size 0x0 RenderBlock {HR} at (4,458) size 747x2 [border: (1px inset #000000)] RenderBlock {P} at (4,468) size 747x68 RenderBlock (floating) {SPAN} at (0,0) size 48x36 [bgcolor=#C0C0C0] RenderText {#text} at (0,0) size 21x36 text run at (0,0) width 21: "T" RenderText {#text} at (48,0) size 747x68 text run at (48,0) width 699: "he first letter (a \"T\") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as" text run at (48,17) width 514: "well as bold, with a content width of 1.5em and a background-color of silver. " text run at (561,17) width 186: "The top of the big letter \"T\"" text run at (48,34) width 699: "should be vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-" text run at (0,51) width 33: "cap\"." RenderBlock (anonymous) at (4,536) size 747x17 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (4,561) size 747x2 [border: (1px inset #000000)] RenderBlock (floating) {P} at (405,581) size 336x186 [bgcolor=#FFFF00] [border: (3px solid #FF0000)] RenderText {#text} at (8,8) size 320x170 text run at (8,8) width 320: "This paragraph should be floated to the right, sort" text run at (8,25) width 320: "of like a 'sidebar' in a magazine article. Its width is" text run at (8,42) width 320: "20em so the box should not be reformatted when" text run at (8,59) width 320: "the size of the viewport is changed (e.g. when the" text run at (8,76) width 320: "window is resized). The background color of the" text run at (8,93) width 320: "element is yellow, and there should be a 3px solid" text run at (8,110) width 320: "red border outside a 5px wide padding. Also, the" text run at (8,127) width 320: "element has a 10px wide margin around it where" text run at (8,144) width 320: "the blue background of the paragraph in the" text run at (8,161) width 217: "normal flow should shine through." RenderBlock {P} at (4,571) size 747x204 [bgcolor=#66CCFF] RenderText {#text} at (0,0) size 391x204 text run at (0,0) width 391: "This paragraph is not floating. If there is enough room, the" text run at (0,17) width 391: "textual content of the paragraph should appear on the left side" text run at (0,34) width 261: "of the yellow \"sidebar\" on the right. " text run at (260,34) width 131: "The content of this" text run at (0,51) width 328: "element should flow around the floated element. " text run at (328,51) width 63: "However," text run at (0,68) width 391: "the floated element may or may not be obscured by the blue" text run at (0,85) width 391: "background of this element, as the specification does not say" text run at (0,102) width 186: "which is drawn \"on top.\" " text run at (185,102) width 206: "Even if the floated element is" text run at (0,119) width 391: "obscured, it still forces the content of this element to flow" text run at (0,136) width 66: "around it. " text run at (65,136) width 326: "If the floated element is not obscured, then the blue" text run at (0,153) width 391: "rectangle of this paragraph should extend 10px above and to" text run at (0,170) width 391: "the right of the sidebar's red border, due to the margin styles" text run at (0,187) width 166: "set for the floated element." RenderBlock (anonymous) at (4,775) size 747x17 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (4,800) size 747x2 [border: (1px inset #000000)] RenderBlock {DIV} at (4,810) size 747x25 [bgcolor=#66CCFF] [border: (4px solid #FF0000)] RenderBlock (floating) {DIV} at (403,14) size 330x214 [bgcolor=#FFFF00] RenderBlock {P} at (5,5) size 320x204 RenderText {#text} at (0,0) size 320x204 text run at (0,0) width 320: "This paragraph is placed inside a DIV element" text run at (0,17) width 320: "which is floated to the right. The width of the DIV" text run at (0,34) width 320: "element is 20em. The background is yellow and" text run at (0,51) width 320: "there is a 5px padding, a 10px margin and no" text run at (0,68) width 320: "border. Since it is floated, the yellow box should" text run at (0,85) width 320: "be rendered on top of the background and borders" text run at (0,102) width 320: "of adjacent non-floated elements. To the left of this" text run at (0,119) width 320: "yellow box there should be a short paragraph with" text run at (0,136) width 320: "a blue background and a red border. The yellow" text run at (0,153) width 320: "box should be rendered on top of the bottom red" text run at (0,170) width 320: "border. I.e., the bottom red border will appear" text run at (0,187) width 318: "broken where it's overlaid by the yellow rectangle." RenderBlock {P} at (4,4) size 739x17 RenderText {#text} at (0,0) size 268x17 text run at (0,0) width 268: "See description in the box on the right side" RenderBlock (anonymous) at (4,835) size 747x213 RenderBR {BR} at (0,0) size 0x17 RenderBlock {HR} at (4,1056) size 747x2 [border: (1px inset #000000)] RenderBlock (floating) {DIV} at (4,1066) size 187x68 [bgcolor=#66CCFF] RenderBlock {P} at (0,0) size 187x68 RenderText {#text} at (0,0) size 187x68 text run at (0,0) width 187: "This paragraph is inside a" text run at (0,17) width 187: "DIV which is floated left. Its" text run at (0,34) width 187: "background is blue and the" text run at (0,51) width 87: "width is 25%." RenderBlock (floating) {DIV} at (564,1066) size 187x68 [bgcolor=#FFFF00] RenderBlock {P} at (0,0) size 187x68 RenderText {#text} at (0,0) size 187x68 text run at (0,0) width 187: "This paragraph is inside a" text run at (0,17) width 187: "DIV which is floated right." text run at (0,34) width 21: "Its " text run at (20,34) width 167: "background is yellow and" text run at (0,51) width 110: "the width is 25%." RenderBlock {P} at (4,1066) size 747x34 RenderText {#text} at (186,0) size 375x34 text run at (186,0) width 375: "This paragraph should appear between a blue box (on the" text run at (186,17) width 30: "left) " text run at (215,17) width 200: "and a yellow box (on the right)." RenderBlock (anonymous) at (4,1100) size 747x34 RenderBR {BR} at (186,0) size 1x17 RenderBlock {HR} at (4,1142) size 747x2 [border: (1px inset #000000)] RenderBlock (floating) {DIV} at (4,1152) size 561x119 [bgcolor=#66CCFF] RenderBlock (floating) {DIV} at (410,0) size 141x34 [bgcolor=#FFFF00] RenderBlock {P} at (0,0) size 141x34 RenderText {#text} at (0,0) size 141x34 text run at (0,0) width 141: "See description in the" text run at (0,17) width 124: "box on the left side." RenderBlock {P} at (0,0) size 561x119 RenderText {#text} at (0,0) size 561x119 text run at (0,0) width 411: "This paragraph is inside a DIV which is floated left. The" text run at (0,17) width 411: "background of the DIV element is blue and its width is 75%." text run at (0,34) width 33: "This " text run at (32,34) width 369: "text should all be inside the blue rectangle. The blue DIV " text run at (401,34) width 160: "element has another DIV" text run at (0,51) width 218: "element as a child. It has a yellow " text run at (217,51) width 344: "background color and is floated to the right. Since it is" text run at (0,68) width 12: "a " text run at (11,68) width 409: "child of the blue DIV, the yellow DIV should appear inside the " text run at (419,68) width 142: "blue rectangle. Due to" text run at (0,85) width 253: "it being floated to the right and having " text run at (252,85) width 309: "a 10px right margin, the yellow rectange should" text run at (0,102) width 112: "have a 10px blue " text run at (112,102) width 138: "stripe on its right side." RenderBlock (anonymous) at (4,1152) size 747x119 RenderBR {BR} at (560,0) size 1x17 RenderBlock {HR} at (4,1279) size 747x2 [border: (1px inset #000000)]