LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt - Issue 304353011: Auto-rebaseline for r174992

Unified Diff: LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt

Issue 304353011: Auto-rebaseline for r174992 (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 6 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.png ('k') | LayoutTests/platform/win/editing/selection/3690703-2-expected.png » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt

diff --git a/LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt b/LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt

index cccd5ce414b5953071ae7de4cf4b5f7dd3792d92..c18456b082c85c2c14edf852569efad337c985d1 100644

--- a/LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt

+++ b/LayoutTests/platform/win/css1/box_properties/float_on_text_elements-expected.txt

@@ -1,348 +1,360 @@

-layer at (0,0) size 785x2846

+layer at (0,0) size 785x2786

RenderView at (0,0) size 785x600

-layer at (0,0) size 785x2846

- RenderBlock {HTML} at (0,0) size 785x2846

- RenderBody {BODY} at (8,8) size 769x2830 [bgcolor=#CCCCCC]

- RenderBlock (floating) {P} at (0,0) size 384.50x40 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 384x39

- text run at (0,0) width 384: "This paragraph is of class \"one\". It has a width of 50% and is"

- text run at (0,20) width 105: "floated to the left."

- RenderBlock {P} at (0,0) size 769x80

- RenderText {#text} at (384,0) size 769x79

- text run at (384,0) width 385: "This paragraph should start on the right side of a yellow box"

- text run at (384,20) width 385: "which contains the previous paragraph. Since the text of this"

- text run at (0,40) width 769: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding,"

- text run at (0,60) width 709: "border or margins on this and the previous element, so the text of the two elements should be very close to each other."

- RenderBlock (anonymous) at (0,80) size 769x20

- RenderBR {BR} at (0,0) size 0x19

- RenderBlock {HR} at (0,108) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (0,118) size 769x80 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 769x79

- 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 element"

- text run at (0,20) width 769: "allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a orange"

- text run at (0,40) width 769: "square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this paragraph for"

- text run at (0,60) width 123: "diagnostic purposes."

- RenderBlock (anonymous) at (0,118) size 769x100

- RenderImage {IMG} at (0,80) size 15x15

- RenderText {#text} at (15,80) size 4x19

- text run at (15,80) width 4: " "

- RenderBR {BR} at (19,95) size 0x0

- RenderBlock {HR} at (0,226) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (0,236) size 384.50x100 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 384x99

- text run at (0,0) width 384: "This paragraph is floated to the left and the orange square image"

- text run at (0,20) width 384: "should appear to the right of the paragraph. This paragraph has"

- text run at (0,40) width 384: "a yellow background and no padding, margin or border. The"

- text run at (0,60) width 384: "right edge of this yellow box should be horizontally aligned with"

- text run at (0,80) width 260: "the left edge of the yellow box undernearth."

- RenderBlock (anonymous) at (0,236) size 769x100

+layer at (0,0) size 785x2786

+ RenderBlock {HTML} at (0,0) size 785x2786

+ RenderBody {BODY} at (8,8) size 769x2770 [bgcolor=#CCCCCC]

+ RenderBlock (floating) {P} at (0,0) size 384.50x36 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 384x35

+ text run at (0,0) width 384: "This paragraph is of class \"one\". It has a width of 50% and"

+ text run at (0,18) width 129: "is floated to the left."

+ RenderBlock {P} at (0,0) size 769x90

+ RenderText {#text} at (384,0) size 769x89

+ text run at (384,0) width 385: "This paragraph should start on the right side of a yellow"

+ text run at (384,18) width 385: "box which contains the previous paragraph. Since the text"

+ 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 is"

+ text run at (0,54) width 769: "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,72) width 71: "each other."

+ RenderBlock (anonymous) at (0,90) size 769x18

+ RenderBR {BR} at (0,0) size 0x17

+ RenderBlock {HR} at (0,116) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (0,126) size 769x72 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 769x71

+ 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,18) width 769: "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,36) width 769: "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,54) width 265: "to this paragraph for diagnostic purposes."

+ RenderBlock (anonymous) at (0,126) size 769x91

+ RenderImage {IMG} at (0,72) size 15x15

+ RenderText {#text} at (15,73) size 4x17

+ text run at (15,73) width 4: " "

+ RenderBR {BR} at (19,87) size 0x0

+ RenderBlock {HR} at (0,225) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (0,235) size 384.50x108 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 384x107

+ text run at (0,0) width 384: "This paragraph is floated to the left and the orange square"

+ text run at (0,18) width 384: "image should appear to the right of the paragraph. This"

+ text run at (0,36) width 384: "paragraph has a yellow background and no padding, margin"

+ text run at (0,54) width 384: "or border. The right edge of this yellow box should be"

+ text run at (0,72) width 384: "horizontally aligned with the left edge of the yellow box"

+ text run at (0,90) width 81: "undernearth."

+ RenderBlock (anonymous) at (0,235) size 769x108

RenderImage {IMG} at (384.50,0) size 15x15

- RenderText {#text} at (399,0) size 5x19

- text run at (399,0) width 5: " "

+ 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,344) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (384.50,354) size 384.50x120 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 384x119

- text run at (0,0) width 384: "This paragraph is floated to the right (using a STYLE attribute)"

- text run at (0,20) width 384: "and the orange square image should appear to the left of the"

- text run at (0,40) width 384: "paragraph. This paragraph has a yellow background and no"

- text run at (0,60) width 384: "padding, margin or border. The left edge of this yellow box"

- text run at (0,80) width 384: "should be horizonally aligned with the right edge of the yellow"

- text run at (0,100) width 68: "box above."

- RenderBlock (anonymous) at (0,354) size 769x120

+ RenderBlock {HR} at (0,351) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (384.50,361) size 384.50x108 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 384x107

+ text run at (0,0) width 384: "This paragraph is floated to the right (using a STYLE"

+ text run at (0,18) width 384: "attribute) and the orange square image should appear to the"

+ text run at (0,36) width 384: "left of the paragraph. This paragraph has a yellow"

+ text run at (0,54) width 384: "background and no padding, margin or border. The left"

+ text run at (0,72) width 384: "edge of this yellow box should be horizonally aligned with"

+ text run at (0,90) width 251: "the right edge of the yellow box above."

+ RenderBlock (anonymous) at (0,361) size 769x108

RenderImage {IMG} at (0,0) size 15x15

- RenderText {#text} at (15,0) size 4x19

- text run at (15,0) width 4: " "

+ 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,482) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock {P} at (0,492) size 769x60

+ RenderBlock {HR} at (0,477) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock {P} at (0,487) size 769x72

RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]

- RenderText {#text} at (0,0) size 21x36

- text run at (0,0) width 21: "T"

- RenderText {#text} at (48,0) size 769x59

- 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 well as"

- text run at (48,20) width 431: "bold, with a content width of 1.5em and a background-color of silver. "

- text run at (479,20) width 290: "The top of the big letter \"T\" should be vertically"

- text run at (0,40) width 559: "aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."

- RenderBlock (anonymous) at (0,552) size 769x20

- RenderBR {BR} at (0,0) size 0x19

- RenderBlock {HR} at (0,580) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (423,600) size 336x216 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]

- RenderText {#text} at (8,8) size 320x199

- text run at (8,8) width 320: "This paragraph should be floated to the right, sort of"

- text run at (8,28) width 320: "like a 'sidebar' in a magazine article. Its width is"

- text run at (8,48) width 320: "20em so the box should not be reformatted when the"

- text run at (8,68) width 320: "size of the viewport is changed (e.g. when the"

- text run at (8,88) width 320: "window is resized). The background color of the"

- text run at (8,108) width 320: "element is yellow, and there should be a 3px solid"

- text run at (8,128) width 320: "red border outside a 5px wide padding. Also, the"

- text run at (8,148) width 320: "element has a 10px wide margin around it where the"

- text run at (8,168) width 320: "blue background of the paragraph in the normal flow"

- text run at (8,188) width 126: "should shine through."

- RenderBlock {P} at (0,590) size 769x220 [bgcolor=#66CCFF]

- RenderText {#text} at (0,0) size 413x219

- text run at (0,0) width 413: "This paragraph is not floating. If there is enough room, the textual"

- text run at (0,20) width 413: "content of the paragraph should appear on the left side of the yellow"

- text run at (0,40) width 133: "\"sidebar\" on the right. "

- text run at (133,40) width 280: "The content of this element should flow around"

- text run at (0,60) width 126: "the floated element. "

- text run at (126,60) width 287: "However, the floated element may or may not"

- text run at (0,80) width 413: "be obscured by the blue background of this element, as the"

- text run at (0,100) width 342: "specification does not say which is drawn \"on top.\" "

- text run at (342,100) width 71: "Even if the"

- text run at (0,120) width 413: "floated element is obscured, it still forces the content of this element"

- text run at (0,140) width 107: "to flow around it. "

- text run at (107,140) width 306: "If the floated element is not obscured, then the blue"

- text run at (0,160) width 413: "rectangle of this paragraph should extend 10px above and to the"

- text run at (0,180) width 413: "right of the sidebar's red border, due to the margin styles set for the"

- text run at (0,200) width 95: "floated element."

- RenderBlock (anonymous) at (0,810) size 769x20

- RenderBR {BR} at (0,0) size 0x19

- RenderBlock {HR} at (0,838) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock {DIV} at (0,848) size 769x28 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]

- RenderBlock (floating) {DIV} at (425,14) size 330x250 [bgcolor=#FFFF00]

- RenderBlock {P} at (5,5) size 320x240

- RenderText {#text} at (0,0) size 320x239

- text run at (0,0) width 320: "This paragraph is placed inside a DIV element which"

- text run at (0,20) width 320: "is floated to the right. The width of the DIV element"

- text run at (0,40) width 320: "is 20em. The background is yellow and there is a"

- text run at (0,60) width 320: "5px padding, a 10px margin and no border. Since it"

- text run at (0,80) width 320: "is floated, the yellow box should be rendered on top"

- text run at (0,100) width 320: "of the background and borders of adjacent non-"

- text run at (0,120) width 320: "floated elements. To the left of this yellow box there"

- text run at (0,140) width 320: "should be a short paragraph with a blue background"

- text run at (0,160) width 320: "and a red border. The yellow box should be"

- text run at (0,180) width 320: "rendered on top of the bottom red border. I.e., the"

- text run at (0,200) width 320: "bottom red border will appear broken where it's"

- text run at (0,220) width 194: "overlaid by the yellow rectangle."

- RenderBlock {P} at (4,4) size 761x20

- RenderText {#text} at (0,0) size 255x19

- text run at (0,0) width 255: "See description in the box on the right side"

- RenderBlock (anonymous) at (0,876) size 769x246

- RenderBR {BR} at (0,0) size 0x19

- RenderBlock {HR} at (0,1130) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {DIV} at (0,1140) size 192.25x80 [bgcolor=#66CCFF]

- RenderBlock {P} at (0,0) size 192.25x80

- RenderText {#text} at (0,0) size 192x79

- text run at (0,0) width 192: "This paragraph is inside a DIV"

- text run at (0,20) width 192: "which is floated left. Its"

- text run at (0,40) width 192: "background is blue and the"

- text run at (0,60) width 83: "width is 25%."

- RenderBlock (floating) {DIV} at (576.75,1140) size 192.25x80 [bgcolor=#FFFF00]

- RenderBlock {P} at (0,0) size 192.25x80

- RenderText {#text} at (0,0) size 192x79

- text run at (0,0) width 192: "This paragraph is inside a DIV"

- text run at (0,20) width 192: "which is floated right. Its"

- text run at (0,40) width 192: "background is yellow and the"

- text run at (0,60) width 83: "width is 25%."

- RenderBlock {P} at (0,1140) size 769x40

- RenderText {#text} at (192,0) size 384x39

- text run at (192,0) width 384: "This paragraph should appear between a blue box (on the left)"

- text run at (192,20) width 189: "and a yellow box (on the right)."

- RenderBlock (anonymous) at (0,1180) size 769x40

- RenderBR {BR} at (192,0) size 1x19

- RenderBlock {HR} at (0,1228) size 769x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {DIV} at (0,1238) size 576.75x120 [bgcolor=#66CCFF]

- RenderBlock (floating) {DIV} at (422.56,0) size 144.19x40 [bgcolor=#FFFF00]

- RenderBlock {P} at (0,0) size 144.19x40

- RenderText {#text} at (0,0) size 144x39

+ RenderText {#text} at (0,0) size 22x36

+ text run at (0,0) width 22: "T"

+ RenderText {#text} at (48,0) size 769x71

+ 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,18) width 530: "well as bold, with a content width of 1.5em and a background-color of silver. "

+ text run at (577,18) width 192: "The top of the big letter \"T\""

+ 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-"

+ text run at (0,54) width 33: "cap\"."

+ RenderBlock (anonymous) at (0,559) size 769x18

+ RenderBR {BR} at (0,0) size 0x17

+ RenderBlock {HR} at (0,585) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (423,605) size 336x214 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]

+ RenderText {#text} at (8,8) size 320x197

+ text run at (8,8) width 320: "This paragraph should be floated to the right, sort"

+ text run at (8,26) width 320: "of like a 'sidebar' in a magazine article. Its width"

+ text run at (8,44) width 320: "is 20em so the box should not be reformatted"

+ text run at (8,62) width 320: "when the size of the viewport is changed (e.g."

+ text run at (8,80) width 320: "when the window is resized). The background"

+ text run at (8,98) width 320: "color of the element is yellow, and there should"

+ text run at (8,116) width 320: "be a 3px solid red border outside a 5px wide"

+ text run at (8,134) width 320: "padding. Also, the element has a 10px wide"

+ text run at (8,152) width 320: "margin around it where the blue background of"

+ text run at (8,170) width 320: "the paragraph in the normal flow should shine"

+ text run at (8,188) width 54: "through."

+ RenderBlock {P} at (0,595) size 769x216 [bgcolor=#66CCFF]

+ RenderText {#text} at (0,0) size 413x215

+ text run at (0,0) width 413: "This paragraph is not floating. If there is enough room, the"

+ text run at (0,18) width 413: "textual content of the paragraph should appear on the left side of"

+ text run at (0,36) width 230: "the yellow \"sidebar\" on the right. "

+ text run at (229,36) width 184: "The content of this element"

+ text run at (0,54) width 274: "should flow around the floated element. "

+ text run at (273,54) width 140: "However, the floated"

+ text run at (0,72) width 413: "element may or may not be obscured by the blue background of"

+ text run at (0,90) width 413: "this element, as the specification does not say which is drawn"

+ text run at (0,108) width 64: "\"on top.\" "

+ text run at (63,108) width 350: "Even if the floated element is obscured, it still forces"

+ text run at (0,126) width 322: "the content of this element to flow around it. "

+ text run at (321,126) width 92: "If the floated"

+ text run at (0,144) width 413: "element is not obscured, then the blue rectangle of this"

+ text run at (0,162) width 413: "paragraph should extend 10px above and to the right of the"

+ text run at (0,180) width 413: "sidebar's red border, due to the margin styles set for the floated"

+ text run at (0,198) width 55: "element."

+ RenderBlock (anonymous) at (0,811) size 769x18

+ RenderBR {BR} at (0,0) size 0x17

+ RenderBlock {HR} at (0,837) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock {DIV} at (0,847) size 769x26 [bgcolor=#66CCFF] [border: (4px solid #FF0000)]

+ RenderBlock (floating) {DIV} at (425,14) size 330x244 [bgcolor=#FFFF00]

+ RenderBlock {P} at (5,5) size 320x234

+ RenderText {#text} at (0,0) size 320x233

+ text run at (0,0) width 320: "This paragraph is placed inside a DIV element"

+ text run at (0,18) width 320: "which is floated to the right. The width of the"

+ text run at (0,36) width 320: "DIV element is 20em. The background is yellow"

+ text run at (0,54) width 320: "and there is a 5px padding, a 10px margin and no"

+ text run at (0,72) width 320: "border. Since it is floated, the yellow box should"

+ text run at (0,90) width 320: "be rendered on top of the background and borders"

+ text run at (0,108) width 320: "of adjacent non-floated elements. To the left of"

+ text run at (0,126) width 320: "this yellow box there should be a short paragraph"

+ text run at (0,144) width 320: "with a blue background and a red border. The"

+ text run at (0,162) width 320: "yellow box should be rendered on top of the"

+ text run at (0,180) width 320: "bottom red border. I.e., the bottom red border will"

+ text run at (0,198) width 320: "appear broken where it's overlaid by the yellow"

+ text run at (0,216) width 63: "rectangle."

+ RenderBlock {P} at (4,4) size 761x18

+ RenderText {#text} at (0,0) size 274x17

+ text run at (0,0) width 274: "See description in the box on the right side"

+ RenderBlock (anonymous) at (0,873) size 769x242

+ RenderBR {BR} at (0,0) size 0x17

+ RenderBlock {HR} at (0,1123) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {DIV} at (0,1133) size 192.25x72 [bgcolor=#66CCFF]

+ RenderBlock {P} at (0,0) size 192.25x72

+ RenderText {#text} at (0,0) size 192x71

+ text run at (0,0) width 192: "This paragraph is inside a"

+ text run at (0,18) width 192: "DIV which is floated left. Its"

+ text run at (0,36) width 192: "background is blue and the"

+ text run at (0,54) width 89: "width is 25%."

+ RenderBlock (floating) {DIV} at (576.75,1133) size 192.25x72 [bgcolor=#FFFF00]

+ RenderBlock {P} at (0,0) size 192.25x72

+ RenderText {#text} at (0,0) size 192x71

+ text run at (0,0) width 192: "This paragraph is inside a"

+ text run at (0,18) width 192: "DIV which is floated right."

+ text run at (0,36) width 21: "Its "

+ text run at (21,36) width 171: "background is yellow and"

+ text run at (0,54) width 112: "the width is 25%."

+ RenderBlock {P} at (0,1133) size 769x36

+ RenderText {#text} at (192,0) size 384x35

+ text run at (192,0) width 384: "This paragraph should appear between a blue box (on the"

+ text run at (192,18) width 31: "left) "

+ text run at (222,18) width 204: "and a yellow box (on the right)."

+ RenderBlock (anonymous) at (0,1169) size 769x36

+ RenderBR {BR} at (192,0) size 1x17

+ RenderBlock {HR} at (0,1213) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {DIV} at (0,1223) size 576.75x126 [bgcolor=#66CCFF]

+ RenderBlock (floating) {DIV} at (422.56,0) size 144.19x36 [bgcolor=#FFFF00]

+ RenderBlock {P} at (0,0) size 144.19x36

+ RenderText {#text} at (0,0) size 144x35

text run at (0,0) width 144: "See description in the"

- text run at (0,20) width 118: "box on the left side."

- RenderBlock {P} at (0,0) size 576.75x120

- RenderText {#text} at (0,0) size 576x119

- text run at (0,0) width 350: "This paragraph is inside a DIV which is floated left. The "

- text run at (350,0) width 72: "background"

- text run at (0,20) width 320: "of the DIV element is blue and its width is 75%. This "

- text run at (320,20) width 102: "text should all be"

- text run at (0,40) width 248: "inside the blue rectangle. The blue DIV "

- text run at (248,40) width 328: "element has another DIV element as a child. It has a"

- text run at (0,60) width 45: "yellow "

- text run at (45,60) width 367: "background color and is floated to the right. Since it is a "

- text run at (412,60) width 164: "child of the blue DIV, the"

- text run at (0,80) width 236: "yellow DIV should appear inside the "

- text run at (236,80) width 340: "blue rectangle. Due to it being floated to the right and"

- text run at (0,100) width 42: "having "

- text run at (42,100) width 394: "a 10px right margin, the yellow rectange should have a 10px blue "

- text run at (436,100) width 131: "stripe on its right side."

- RenderBlock (anonymous) at (0,1238) size 769x120

- RenderBR {BR} at (576,0) size 1x19

- RenderBlock {HR} at (0,1366) size 769x2 [border: (1px inset #EEEEEE)]

- RenderTable {TABLE} at (0,1376) size 769x1454 [border: (1px outset #808080)]

- RenderTableSection {TBODY} at (1,1) size 767x1452

- RenderTableRow {TR} at (0,0) size 767x28

- RenderTableCell {TD} at (0,0) size 767x28 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2]

- RenderInline {STRONG} at (0,0) size 159x19

- RenderText {#text} at (4,4) size 159x19

- text run at (4,4) width 159: "TABLE Testing Section"

- RenderTableRow {TR} at (0,28) size 767x1424

- RenderTableCell {TD} at (0,726) size 12x28 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]

- RenderText {#text} at (4,4) size 4x19

+ text run at (0,18) width 127: "box on the left side."

+ RenderBlock {P} at (0,0) size 576.75x126

+ RenderText {#text} at (0,0) size 576x125

+ text run at (0,0) width 422: "This paragraph is inside a DIV which is floated left. The"

+ text run at (0,18) width 422: "background of the DIV element is blue and its width is 75%. This"

+ text run at (0,36) width 406: "text should all be inside the blue rectangle. The blue DIV "

+ text run at (405,36) width 171: "element has another DIV"

+ text run at (0,54) width 224: "element as a child. It has a yellow "

+ text run at (223,54) width 353: "background color and is floated to the right. Since it is"

+ text run at (0,72) width 12: "a "

+ text run at (11,72) width 410: "child of the blue DIV, the yellow DIV should appear inside the "

+ text run at (420,72) width 156: "blue rectangle. Due to it"

+ text run at (0,90) width 253: "being floated to the right and having "

+ text run at (252,90) width 324: "a 10px right margin, the yellow rectange should"

+ text run at (0,108) width 113: "have a 10px blue "

+ text run at (112,108) width 144: "stripe on its right side."

+ RenderBlock (anonymous) at (0,1223) size 769x126

+ RenderBR {BR} at (576,0) size 1x17

+ RenderBlock {HR} at (0,1357) size 769x2 [border: (1px inset #EEEEEE)]

+ RenderTable {TABLE} at (0,1367) size 769x1403 [border: (1px outset #808080)]

+ RenderTableSection {TBODY} at (1,1) size 767x1401

+ RenderTableRow {TR} at (0,0) size 767x26

+ RenderTableCell {TD} at (0,0) size 767x26 [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,26) size 767x1375

+ RenderTableCell {TD} at (0,700) size 12x26 [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,28) size 755x1424 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]

- RenderBlock (floating) {P} at (4,4) size 373.50x40 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 373x39

- text run at (0,0) width 373: "This paragraph is of class \"one\". It has a width of 50% and is"

- text run at (0,20) width 105: "floated to the left."

- RenderBlock {P} at (4,4) size 747x80

- RenderText {#text} at (373,0) size 747x79

- text run at (373,0) width 374: "This paragraph should start on the right side of a yellow box"

- text run at (373,20) width 374: "which contains the previous paragraph. Since the text of this"

- text run at (0,40) width 747: "element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding,"

- text run at (0,60) width 709: "border or margins on this and the previous element, so the text of the two elements should be very close to each other."

- RenderBlock (anonymous) at (4,84) size 747x20

- RenderBR {BR} at (0,0) size 0x19

- RenderBlock {HR} at (4,112) size 747x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (4,122) size 747x80 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 747x79

- 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,20) width 747: "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,40) width 747: "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,60) width 209: "paragraph for diagnostic purposes."

- RenderBlock (anonymous) at (4,122) size 747x100

- RenderImage {IMG} at (0,80) size 15x15

- RenderText {#text} at (15,80) size 4x19

- text run at (15,80) width 4: " "

- RenderBR {BR} at (19,95) size 0x0

- RenderBlock {HR} at (4,230) size 747x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (4,240) size 373.50x120 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 373x119

+ RenderTableCell {TD} at (12,26) size 755x1375 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]

+ RenderBlock (floating) {P} at (4,4) size 373.50x36 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 373x35

+ text run at (0,0) width 373: "This paragraph is of class \"one\". It has a width of 50%"

+ text run at (0,18) width 156: "and is floated to the left."

+ RenderBlock {P} at (4,4) size 747x90

+ RenderText {#text} at (373,0) size 747x89

+ text run at (373,0) width 374: "This paragraph should start on the right side of a yellow"

+ text run at (373,18) width 374: "box which contains the previous paragraph. Since the text"

+ 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"

+ text run at (0,54) width 747: "is no padding, border or margins on this and the previous element, so the text of the two elements should be very"

+ text run at (0,72) width 124: "close to each other."

+ RenderBlock (anonymous) at (4,94) size 747x18

+ RenderBR {BR} at (0,0) size 0x17

+ RenderBlock {HR} at (4,120) size 747x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (4,130) size 747x72 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 747x71

+ 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"

+ 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 content on"

+ text run at (0,36) width 747: "the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has"

+ text run at (0,54) width 342: "been added to this paragraph for diagnostic purposes."

+ RenderBlock (anonymous) at (4,130) size 747x91

+ RenderImage {IMG} at (0,72) size 15x15

+ RenderText {#text} at (15,73) size 4x17

+ text run at (15,73) width 4: " "

+ RenderBR {BR} at (19,87) size 0x0

+ RenderBlock {HR} at (4,229) size 747x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (4,239) size 373.50x108 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 373x107

text run at (0,0) width 373: "This paragraph is floated to the left and the orange square"

- text run at (0,20) width 373: "image should appear to the right of the paragraph. This"

- text run at (0,40) width 373: "paragraph has a yellow background and no padding, margin"

- text run at (0,60) width 373: "or border. The right edge of this yellow box should be"

- text run at (0,80) width 373: "horizontally aligned with the left edge of the yellow box"

- text run at (0,100) width 75: "undernearth."

- RenderBlock (anonymous) at (4,240) size 747x120

+ text run at (0,18) width 373: "image should appear to the right of the paragraph. This"

+ text run at (0,36) width 373: "paragraph has a yellow background and no padding,"

+ text run at (0,54) width 373: "margin or border. The right edge of this yellow box"

+ text run at (0,72) width 373: "should be horizontally aligned with the left edge of the"

+ text run at (0,90) width 156: "yellow box undernearth."

+ RenderBlock (anonymous) at (4,239) size 747x108

RenderImage {IMG} at (373.50,0) size 15x15

- RenderText {#text} at (388,0) size 5x19

- text run at (388,0) width 5: " "

+ 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,368) size 747x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (377.50,378) size 373.50x120 [bgcolor=#FFFF00]

- RenderText {#text} at (0,0) size 373x119

+ RenderBlock {HR} at (4,355) size 747x2 [border: (1px inset #EEEEEE)]

+ RenderBlock (floating) {P} at (377.50,365) size 373.50x108 [bgcolor=#FFFF00]

+ RenderText {#text} at (0,0) size 373x107

text run at (0,0) width 373: "This paragraph is floated to the right (using a STYLE"

- text run at (0,20) width 373: "attribute) and the orange square image should appear to the"

- text run at (0,40) width 373: "left of the paragraph. This paragraph has a yellow background"

- text run at (0,60) width 373: "and no padding, margin or border. The left edge of this yellow"

- text run at (0,80) width 373: "box should be horizonally aligned with the right edge of the"

- text run at (0,100) width 111: "yellow box above."

- RenderBlock (anonymous) at (4,378) size 747x120

+ text run at (0,18) width 373: "attribute) and the orange square image should appear to"

+ text run at (0,36) width 373: "the left of the paragraph. This paragraph has a yellow"

+ text run at (0,54) width 373: "background and no padding, margin or border. The left"

+ text run at (0,72) width 373: "edge of this yellow box should be horizonally aligned"

+ text run at (0,90) width 284: "with the right edge of the yellow box above."

+ RenderBlock (anonymous) at (4,365) size 747x108

RenderImage {IMG} at (0,0) size 15x15

- RenderText {#text} at (15,0) size 4x19

- text run at (15,0) width 4: " "

+ 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,506) size 747x2 [border: (1px inset #EEEEEE)]

- RenderBlock {P} at (4,516) size 747x60

+ RenderBlock {HR} at (4,481) size 747x2 [border: (1px inset #EEEEEE)]

+ RenderBlock {P} at (4,491) size 747x72

RenderBlock (floating) {SPAN} at (0,0) size 48x37 [bgcolor=#C0C0C0]

- RenderText {#text} at (0,0) size 21x36

- text run at (0,0) width 21: "T"

- RenderText {#text} at (48,0) size 747x59

- 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 well"

- text run at (48,20) width 460: "as bold, with a content width of 1.5em and a background-color of silver. "

- text run at (508,20) width 239: "The top of the big letter \"T\" should be"

- text run at (0,40) width 616: "vertically aligned with the top of the first line of this paragraph. This is commonly known as \"drop-cap\"."

- RenderBlock (anonymous) at (4,576) size 747x20

- RenderBR {BR} at (0,0) size 0x19

- RenderBlock {HR} at (4,604) size 747x2 [border: (1px inset #EEEEEE)]

- RenderBlock (floating) {P} at (405,624) size 336x216 [bgcolor=#FFFF00] [border: (3px solid #FF0000)]