Commit fb5e6eec authored by ddkilzer's avatar ddkilzer

LayoutTests:

        Reviewed by hyatt.

        - tests for http://bugzilla.opendarwin.org/show_bug.cgi?id=9213
          Absolutely positioned objects with relatively positioned inline 
          containing blocks are rendered incorrectly

        * fast/block/positioning/absolute-in-inline-ltr-2.html: Added.
        * fast/block/positioning/absolute-in-inline-ltr-3.html: Added.
        * fast/block/positioning/absolute-in-inline-ltr.html: Added.
        * fast/block/positioning/absolute-in-inline-rtl-2.html: Added.
        * fast/block/positioning/absolute-in-inline-rtl-3.html: Added.
        * fast/block/positioning/absolute-in-inline-rtl.html: Added.
        * fast/block/positioning/absolute-in-inline-short-ltr.html: Added.
        * fast/block/positioning/absolute-in-inline-short-rtl.html: Added.

WebCore:

        Reviewed by hyatt.

        - fix for http://bugzilla.opendarwin.org/show_bug.cgi?id=9213
          Absolutely positioned objects with relatively positioned inline 
          containing blocks are rendered incorrectly

        * rendering/RenderBox.cpp:
        (WebCore::RenderBox::containingBlockWidthForPositioned):
        (WebCore::RenderBox::containingBlockHeightForPositioned):
        (WebCore::RenderBox::calcAbsoluteHorizontal):
        (WebCore::RenderBox::calcAbsoluteHorizontalValues):
        (WebCore::RenderBox::calcAbsoluteVertical):
        (WebCore::RenderBox::calcAbsoluteHorizontalReplaced):
        (WebCore::RenderBox::calcAbsoluteVerticalReplaced):
        * rendering/RenderBox.h:



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@14727 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 8890bb00
2006-06-04 Sam Weinig <sam.weinig@gmail.com>
Reviewed by hyatt.
- tests for http://bugzilla.opendarwin.org/show_bug.cgi?id=9213
Absolutely positioned objects with relatively positioned inline
containing blocks are rendered incorrectly
* fast/block/positioning/absolute-in-inline-ltr-2.html: Added.
* fast/block/positioning/absolute-in-inline-ltr-3.html: Added.
* fast/block/positioning/absolute-in-inline-ltr.html: Added.
* fast/block/positioning/absolute-in-inline-rtl-2.html: Added.
* fast/block/positioning/absolute-in-inline-rtl-3.html: Added.
* fast/block/positioning/absolute-in-inline-rtl.html: Added.
* fast/block/positioning/absolute-in-inline-short-ltr.html: Added.
* fast/block/positioning/absolute-in-inline-short-rtl.html: Added.
2006-06-04 Anders Carlsson <acarlsson@apple.com>
Reviewed by Darin.
6ac60f6eddd7b1d2f93fc82d203f6824
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x36
RenderText {#text} at (0,0) size 664x18
text run at (0,0) width 664: "The black outline box should be a 50px by 50px square with its bottom right corner anchored to the right "
RenderInline {SPAN} at (0,0) size 43x18 [color=#FFA500]
RenderText {#text} at (664,0) size 43x18
text run at (664,0) width 43: "orange"
RenderText {#text} at (707,0) size 772x36
text run at (707,0) width 65: " border on"
text run at (0,18) width 83: "the third line."
RenderBlock {P} at (0,52) size 600x72
RenderText {#text} at (0,0) size 186x18
text run at (0,0) width 186: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (504,36) size 593x36
text run at (504,36) width 89: "duis aute irure"
text run at (0,54) width 249: "dolor in reprehenderit in voluptate velit."
layer at (8,60) size 597x56
RenderInline (relative positioned) {SPAN} at (0,0) size 597x56 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #FFA500) (1px solid #808080) (20px solid #0000FF)]
RenderText {#text} at (226,0) size 557x36
text run at (226,0) width 331: "con a pariatur. Excepteur sint occaecat cupidatat non"
text run at (0,18) width 366: "proident, sunt in culp qui officia deserunt mollit animequs "
RenderText {#text} at (366,18) size 597x36
text run at (366,18) width 231: "ILOREM ipsum dol sDuis aute irure"
text run at (0,36) width 464: "dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat "
layer at (432,64) size 50x50
RenderBlock (positioned) {DIV} at (228,5) size 50x50
<html>
<head>
<style>
#outside {
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid blue;
border-right: 20px solid orange;
}
#test {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should be a 50px by 50px square with its bottom right corner anchored to the right <span style="color: orange;">orange</span> border on the third line.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
<div id="test"></div>
ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
</span>
duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</body>
</html>
a585b145c536673119cf13d22c4ad5a9
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x36
RenderText {#text} at (0,0) size 622x18
text run at (0,0) width 622: "The black outline box should be a 50px by 50px square with its top left corner anchored to the left "
RenderInline {SPAN} at (0,0) size 27x18 [color=#0000FF]
RenderText {#text} at (622,0) size 27x18
text run at (622,0) width 27: "blue"
RenderText {#text} at (649,0) size 765x36
text run at (649,0) width 116: " border on the first"
text run at (0,18) width 27: "line."
RenderBlock {P} at (0,52) size 600x72
RenderText {#text} at (0,0) size 186x18
text run at (0,0) width 186: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (504,36) size 593x36
text run at (504,36) width 89: "duis aute irure"
text run at (0,54) width 249: "dolor in reprehenderit in voluptate velit."
layer at (8,60) size 597x56
RenderInline (relative positioned) {SPAN} at (0,0) size 597x56 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #FFA500) (1px solid #808080) (20px solid #0000FF)]
RenderText {#text} at (226,0) size 557x36
text run at (226,0) width 331: "con a pariatur. Excepteur sint occaecat cupidatat non"
text run at (0,18) width 366: "proident, sunt in culp qui officia deserunt mollit animequs "
RenderText {#text} at (366,18) size 597x36
text run at (366,18) width 231: "ILOREM ipsum dol sDuis aute irure"
text run at (0,36) width 464: "dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat "
layer at (224,60) size 50x50
RenderBlock (positioned) {DIV} at (20,1) size 50x50
<html>
<head>
<style>
#outside {
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid blue;
border-right: 20px solid orange;
}
#test {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should be a 50px by 50px square with its top left corner anchored to the left <span style="color: blue;">blue</span> border on the first line.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
<div id="test"></div>
ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
</span>
duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</body>
</html>
fd93854dd73095d2b07fae5ae856cbb3
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 314x18
text run at (0,0) width 314: "The black outline box should stretch from the left "
RenderInline {SPAN} at (0,0) size 27x18 [color=#0000FF]
RenderText {#text} at (314,0) size 27x18
text run at (314,0) width 27: "blue"
RenderText {#text} at (341,0) size 223x18
text run at (341,0) width 223: " border on the first line, to the right "
RenderInline {SPAN} at (0,0) size 43x18 [color=#FFA500]
RenderText {#text} at (564,0) size 43x18
text run at (564,0) width 43: "orange"
RenderText {#text} at (607,0) size 152x18
text run at (607,0) width 152: " border on the third line."
RenderBlock {P} at (0,34) size 600x72
RenderText {#text} at (0,0) size 186x18
text run at (0,0) width 186: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (504,36) size 593x36
text run at (504,36) width 89: "duis aute irure"
text run at (0,54) width 249: "dolor in reprehenderit in voluptate velit."
layer at (8,42) size 597x56
RenderInline (relative positioned) {SPAN} at (0,0) size 597x56 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #FFA500) (1px solid #808080) (20px solid #0000FF)]
RenderText {#text} at (226,0) size 557x36
text run at (226,0) width 331: "con a pariatur. Excepteur sint occaecat cupidatat non"
text run at (0,18) width 366: "proident, sunt in culp qui officia deserunt mollit animequs "
RenderText {#text} at (366,18) size 597x36
text run at (366,18) width 231: "ILOREM ipsum dol sDuis aute irure"
text run at (0,36) width 464: "dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat "
layer at (224,42) size 258x54
RenderBlock (positioned) {DIV} at (20,1) size 258x54
<html>
<head>
<style>
#outside {
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid blue;
border-right: 20px solid orange;
}
#test {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should stretch from the left <span style="color: blue;">blue</span> border on the first line, to the right <span style="color: orange;">orange</span> border on the third line.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
<div id="test"></div>
ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
</span>
duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</body>
</html>
8b14fc297c79e7e47796fcad4b4e983f
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x36
RenderText {#text} at (0,0) size 646x18
text run at (0,0) width 646: "The black outline box should be a 50px by 50px square with its bottom left corner anchored to the left "
RenderInline {SPAN} at (0,0) size 43x18 [color=#FFA500]
RenderText {#text} at (646,0) size 43x18
text run at (646,0) width 43: "orange"
RenderText {#text} at (689,0) size 777x36
text run at (689,0) width 88: " border on the"
text run at (0,18) width 60: "third line."
RenderBlock {P} at (0,52) size 600x72
RenderText {#text} at (414,0) size 186x18
text run at (414,0) width 186 RTL override: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (7,36) size 593x36
text run at (7,36) width 89 RTL override: "duis aute irure"
text run at (351,54) width 249 RTL override: "dolor in reprehenderit in voluptate velit."
layer at (8,60) size 597x56
RenderInline (relative positioned) {SPAN} at (0,0) size 597x56 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #0000FF) (1px solid #808080) (20px solid #FFA500)]
RenderText {#text} at (43,0) size 557x36
text run at (43,0) width 331 RTL override: "con a pariatur. Excepteur sint occaecat cupidatat non"
text run at (234,18) width 366 RTL override: "proident, sunt in culp qui officia deserunt mollit animequs "
RenderText {#text} at (3,18) size 597x36
text run at (3,18) width 231 RTL override: "ILOREM ipsum dol sDuis aute irure"
text run at (136,36) width 464 RTL override: "dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat "
layer at (134,64) size 50x50
RenderBlock (positioned) {DIV} at (83,5) size 50x50
<html>
<head>
<style>
#outside {
direction: rtl;
unicode-bidi: bidi-override;
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid orange;
border-right: 20px solid blue;
}
#test {
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should be a 50px by 50px square with its bottom left corner anchored to the left <span style="color: orange;">orange</span> border on the third line.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
<div id="test"></div>
ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
</span>
duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</body>
</html>
3ca372caa31469a72d04de9d49ca4be8
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x36
RenderText {#text} at (0,0) size 640x18
text run at (0,0) width 640: "The black outline box should be a 50px by 50px square with its top right corner anchored to the right "
RenderInline {SPAN} at (0,0) size 27x18 [color=#0000FF]
RenderText {#text} at (640,0) size 27x18
text run at (640,0) width 27: "blue"
RenderText {#text} at (667,0) size 783x36
text run at (667,0) width 116: " border on the first"
text run at (0,18) width 27: "line."
RenderBlock {P} at (0,52) size 600x72
RenderText {#text} at (414,0) size 186x18
text run at (414,0) width 186 RTL override: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (7,36) size 593x36
text run at (7,36) width 89 RTL override: "duis aute irure"
text run at (351,54) width 249 RTL override: "dolor in reprehenderit in voluptate velit."
layer at (8,60) size 597x56
RenderInline (relative positioned) {SPAN} at (0,0) size 597x56 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #0000FF) (1px solid #808080) (20px solid #FFA500)]
RenderText {#text} at (43,0) size 557x36
text run at (43,0) width 331 RTL override: "con a pariatur. Excepteur sint occaecat cupidatat non"
text run at (234,18) width 366 RTL override: "proident, sunt in culp qui officia deserunt mollit animequs "
RenderText {#text} at (3,18) size 597x36
text run at (3,18) width 231 RTL override: "ILOREM ipsum dol sDuis aute irure"
text run at (136,36) width 464 RTL override: "dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat "
layer at (342,60) size 50x50
RenderBlock (positioned) {DIV} at (291,1) size 50x50
<html>
<head>
<style>
#outside {
direction: rtl;
unicode-bidi: bidi-override;
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid orange;
border-right: 20px solid blue;
}
#test {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should be a 50px by 50px square with its top right corner anchored to the right <span style="color: blue;">blue</span> border on the first line.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
<div id="test"></div>
ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
</span>
duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</body>
</html>
50dc06d207e06f45d98a1c507db84eff
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 323x18
text run at (0,0) width 323: "The black outline box should stretch from the right "
RenderInline {SPAN} at (0,0) size 27x18 [color=#0000FF]
RenderText {#text} at (323,0) size 27x18
text run at (323,0) width 27: "blue"
RenderText {#text} at (350,0) size 214x18
text run at (350,0) width 214: " border on the first line, to the left "
RenderInline {SPAN} at (0,0) size 43x18 [color=#FFA500]
RenderText {#text} at (564,0) size 43x18
text run at (564,0) width 43: "orange"
RenderText {#text} at (607,0) size 152x18
text run at (607,0) width 152: " border on the third line."
RenderBlock {P} at (0,34) size 600x72
RenderText {#text} at (414,0) size 186x18
text run at (414,0) width 186 RTL override: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (7,36) size 593x36
text run at (7,36) width 89 RTL override: "duis aute irure"
text run at (351,54) width 249 RTL override: "dolor in reprehenderit in voluptate velit."
layer at (8,42) size 597x56
RenderInline (relative positioned) {SPAN} at (0,0) size 597x56 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #0000FF) (1px solid #808080) (20px solid #FFA500)]
RenderText {#text} at (43,0) size 557x36
text run at (43,0) width 331 RTL override: "con a pariatur. Excepteur sint occaecat cupidatat non"
text run at (234,18) width 366 RTL override: "proident, sunt in culp qui officia deserunt mollit animequs "
RenderText {#text} at (3,18) size 597x36
text run at (3,18) width 231 RTL override: "ILOREM ipsum dol sDuis aute irure"
text run at (136,36) width 464 RTL override: "dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat "
layer at (134,42) size 258x54
RenderBlock (positioned) {DIV} at (83,1) size 258x54
<html>
<head>
<style>
#outside {
direction: rtl;
unicode-bidi: bidi-override;
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid orange;
border-right: 20px solid blue;
}
#test {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should stretch from the right <span style="color: blue;">blue</span> border on the first line, to the left <span style="color: orange;">orange</span> border on the third line.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
<div id="test"></div>
ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
</span>
duis aute irure dolor in reprehenderit in voluptate velit.
</p>
</body>
</html>
1da7a3dd969e02849127d968d29a7333
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 314x18
text run at (0,0) width 314: "The black outline box should stretch from the left "
RenderInline {SPAN} at (0,0) size 27x18 [color=#0000FF]
RenderText {#text} at (314,0) size 27x18
text run at (314,0) width 27: "blue"
RenderText {#text} at (341,0) size 125x18
text run at (341,0) width 125: " border, to the right "
RenderInline {SPAN} at (0,0) size 43x18 [color=#FFA500]
RenderText {#text} at (466,0) size 43x18
text run at (466,0) width 43: "orange"
RenderText {#text} at (509,0) size 49x18
text run at (509,0) width 49: " border."
RenderBlock {P} at (0,34) size 600x18
RenderText {#text} at (0,0) size 186x18
text run at (0,0) width 186: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (420,0) size 173x18
text run at (420,0) width 173: "irure dolor in reprehenderit."
layer at (8,42) size 214x20
RenderInline (relative positioned) {SPAN} at (0,0) size 214x20 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #FFA500) (1px solid #808080) (20px solid #0000FF)]
RenderText {#text} at (226,0) size 94x18
text run at (226,0) width 94: "con a pariatur. "
RenderText {#text} at (320,0) size 60x18
text run at (320,0) width 60: "duis aute "
layer at (224,42) size 174x18
RenderBlock (positioned) {DIV} at (20,1) size 174x18
<html>
<head>
<style>
#outside {
outline: 1px dashed red;
width: 600px;
}
#containingBlock {
display: inline;
position: relative;
background-color: green;
margin: 10px;
padding: 0 10px;
border: 1px solid grey;
border-left: 20px solid blue;
border-right: 20px solid orange;
}
#test {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 5px solid black;
}
</style>
</head>
<body>
<p>The black outline box should stretch from the left <span style="color: blue;">blue</span> border, to the right <span style="color: orange;">orange</span> border.</p>
<p id="outside">
ILorem ipsum dolor sit amet,
<span id="containingBlock">
con a pariatur.
<div id="test"></div>
duis aute
</span>
irure dolor in reprehenderit.
</p>
</body>
</html>
3a9abb9acf106d14105933d06ddda20d
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x576
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 323x18
text run at (0,0) width 323: "The black outline box should stretch from the right "
RenderInline {SPAN} at (0,0) size 27x18 [color=#0000FF]
RenderText {#text} at (323,0) size 27x18
text run at (323,0) width 27: "blue"
RenderText {#text} at (350,0) size 116x18
text run at (350,0) width 116: " border, to the left "
RenderInline {SPAN} at (0,0) size 43x18 [color=#FFA500]
RenderText {#text} at (466,0) size 43x18
text run at (466,0) width 43: "orange"
RenderText {#text} at (509,0) size 49x18
text run at (509,0) width 49: " border."
RenderBlock {P} at (0,34) size 600x18
RenderText {#text} at (414,0) size 186x18
text run at (414,0) width 186 RTL override: "ILorem ipsum dolor sit amet, "
RenderText {#text} at (7,0) size 173x18
text run at (7,0) width 173 RTL override: "irure dolor in reprehenderit."
layer at (8,42) size 214x20
RenderInline (relative positioned) {SPAN} at (0,0) size 214x20 [bgcolor=#008000] [border: (1px solid #808080) (20px solid #0000FF) (1px solid #808080) (20px solid #FFA500)]