+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.
--- /dev/null
+6ac60f6eddd7b1d2f93fc82d203f6824
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+a585b145c536673119cf13d22c4ad5a9
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+fd93854dd73095d2b07fae5ae856cbb3
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+8b14fc297c79e7e47796fcad4b4e983f
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+3ca372caa31469a72d04de9d49ca4be8
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+50dc06d207e06f45d98a1c507db84eff
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+1da7a3dd969e02849127d968d29a7333
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+3a9abb9acf106d14105933d06ddda20d
\ No newline at end of file
--- /dev/null
+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)]
+ RenderText {#text} at (280,0) size 94x18
+ text run at (280,0) width 94 RTL override: "con a pariatur. "
+ RenderText {#text} at (220,0) size 60x18
+ text run at (220,0) width 60 RTL override: "duis aute "
+layer at (218,42) size 174x18
+ RenderBlock (positioned) {DIV} at (20,1) size 174x18
--- /dev/null
+<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, to the left <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>
+2006-06-04 Sam Weinig <sam.weinig@gmail.com>
+
+ 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:
+
2006-06-04 Anders Carlsson <acarlsson@apple.com>
Reviewed by Darin.
m_staticY = staticY;
}
+int RenderBox::containingBlockWidthForPositioned(const RenderObject* containingBlock) const
+{
+ if (containingBlock->isInline()) {
+ ASSERT(containingBlock->isRelPositioned());
+
+ const RenderFlow* flow = static_cast<const RenderFlow*>(containingBlock);
+ InlineFlowBox* first = flow->firstLineBox();
+ InlineFlowBox* last = flow->lastLineBox();
+
+ // If the containing block is empty, return a width of 0.
+ if (!first || !last)
+ return 0;
+
+ int fromLeft;
+ int fromRight;
+ if (containingBlock->style()->direction() == LTR) {
+ fromLeft = first->xPos() + first->borderLeft();
+ fromRight = last->xPos() + last->width() - last->borderRight();
+ } else {
+ fromRight = first->xPos() + first->width() - first->borderRight();
+ fromLeft = last->xPos() + last->borderLeft();
+ }
+
+ return max(0, (fromRight - fromLeft));
+ }
+
+ if (usesLineWidth() && isRenderBlock())
+ return static_cast<const RenderBlock*>(containingBlock)->lineWidth(m_y) + containingBlock->paddingLeft() + containingBlock->paddingRight();
+ return containingBlock->width() - containingBlock->borderLeft() - containingBlock->borderRight();
+}
+
+int RenderBox::containingBlockHeightForPositioned(const RenderObject* containingBlock) const
+{
+ // Even in strict mode (where we don't grow the root to fill the viewport) other browsers
+ // position as though the root fills the viewport.
+ if (containingBlock->isRoot())
+ return containingBlock->availableHeight();
+ return containingBlock->height() - containingBlock->borderTop() - containingBlock->borderBottom();
+}
+
void RenderBox::calcAbsoluteHorizontal()
{
if (isReplaced()) {
// We don't use containingBlock(), since we may be positioned by an enclosing
// relative positioned inline.
const RenderObject* containerBlock = container();
-
- // FIXME: This is incorrect for cases where the container block is a relatively
- // positioned inline.
- const int containerWidth = containingBlockWidth() + containerBlock->paddingLeft() + containerBlock->paddingRight();
+
+ const int containerWidth = containingBlockWidthForPositioned(containerBlock);
// To match WinIE, in quirks mode use the parent's 'direction' property
// instead of the the container block's.
}
// Use computed values to calculate the horizontal position.
+
+ // FIXME: This hack is needed to calculate the xPos for a 'rtl' relatively
+ // positioned, inline containing block because right now, it is using the xPos
+ // of the first line box when really it should use the last line box. When
+ // this is fixed elsewhere, this block should be removed.
+ if (containerBlock->isInline() && containerBlock->style()->direction() == RTL) {
+ const RenderFlow* flow = static_cast<const RenderFlow*>(containerBlock);
+ InlineFlowBox* firstLine = flow->firstLineBox();
+ InlineFlowBox* lastLine = flow->lastLineBox();
+ if (firstLine && lastLine && firstLine != lastLine) {
+ xPos = leftValue + marginLeftValue + lastLine->borderLeft() + (lastLine->xPos() - firstLine->xPos());
+ return;
+ }
+ }
+
xPos = leftValue + marginLeftValue + containerBlock->borderLeft();
}
// We don't use containingBlock(), since we may be positioned by an enclosing relpositioned inline.
const RenderObject* containerBlock = container();
- // Even in strict mode (where we don't grow the root to fill the viewport) other browsers
- // position as though the root fills the viewport.
- const int containerHeight = containerBlock->isRoot() ? containerBlock->availableHeight() : (containerBlock->height() - containerBlock->borderTop() - containerBlock->borderBottom());
+ const int containerHeight = containingBlockHeightForPositioned(containerBlock);
const int bordersPlusPadding = borderTop() + borderBottom() + paddingTop() + paddingBottom();
const Length marginTop = style()->marginTop();
// (block-style-comments in this function correspond to text from the spec and
// the numbers correspond to numbers in spec)
- // We don't use containingBlock(), since we may be positioned by an enclosing relpositioned inline.
+ // We don't use containingBlock(), since we may be positioned by an enclosing
+ // relative positioned inline.
const RenderObject* containerBlock = container();
- // FIXME: This is incorrect for cases where the container block is a relatively
- // positioned inline.
- const int containerWidth = containingBlockWidth() + containerBlock->paddingLeft() + containerBlock->paddingRight();
+ const int containerWidth = containingBlockWidthForPositioned(containerBlock);
// To match WinIE, in quirks mode use the parent's 'direction' property
// instead of the the container block's.
if (totalWidth > containerWidth && (containerDirection == RTL))
leftValue = containerWidth - (totalWidth - leftValue);
-
// Use computed values to calculate the horizontal position.
+
+ // FIXME: This hack is needed to calculate the xPos for a 'rtl' relatively
+ // positioned, inline containing block because right now, it is using the xPos
+ // of the first line box when really it should use the last line box. When
+ // this is fixed elsewhere, this block should be removed.
+ if (containerBlock->isInline() && containerBlock->style()->direction() == RTL) {
+ const RenderFlow* flow = static_cast<const RenderFlow*>(containerBlock);
+ InlineFlowBox* firstLine = flow->firstLineBox();
+ InlineFlowBox* lastLine = flow->lastLineBox();
+ if (firstLine && lastLine && firstLine != lastLine) {
+ m_x = leftValue + m_marginLeft + lastLine->borderLeft() + (lastLine->xPos() - firstLine->xPos());
+ return;
+ }
+ }
+
m_x = leftValue + m_marginLeft + containerBlock->borderLeft();
}
// We don't use containingBlock(), since we may be positioned by an enclosing relpositioned inline.
const RenderObject* containerBlock = container();
- // Even in strict mode (where we don't grow the root to fill the viewport)
- // other browsers position as though the root fills the viewport.
- const int containerHeight = containerBlock->isRoot() ? containerBlock->availableHeight() : (containerBlock->height() - containerBlock->borderTop() - containerBlock->borderBottom());
+ const int containerHeight = containingBlockHeightForPositioned(containerBlock);
// Variables to solve.
Length top = style()->top();
void paintBackground(GraphicsContext*, const Color&, const BackgroundLayer*, int clipy, int cliph, int _tx, int _ty, int w, int h);
void outlineBox(GraphicsContext*, int _tx, int _ty, const char *color = "red");
+ int containingBlockWidthForPositioned(const RenderObject* containingBlock) const;
+ int containingBlockHeightForPositioned(const RenderObject* containingBlock) const;
+
void calcAbsoluteHorizontal();
void calcAbsoluteVertical();
void calcAbsoluteHorizontalValues(Length width, const RenderObject* cb, TextDirection containerDirection,
git://git.webkit.org / WebKit-https.git / commitdiff
