<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[150383] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/150383">150383</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2013-05-20 14:38:37 -0700 (Mon, 20 May 2013)</dd>
</dl>

<h3>Log Message</h3>
<pre>[CSSRegions] Fix offsetLeft / offsetTop for elements inside named flow
https://bugs.webkit.org/show_bug.cgi?id=115899

Patch by Radu Stavila &lt;stavila@adobe.com&gt; on 2013-05-20
Reviewed by David Hyatt.

Source/WebCore:

Elements in named flows that have the body as their offsetParent, need to compute their
offsetLeft and offsetTop values relative to the body.

Tests: fast/regions/offsetLeft-offsetTop-in-multiple-regions.html
       fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html
       fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html
       fast/regions/offsetLeft-offsetTop-in-region-float.html
       fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html

* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::adjustedPositionRelativeToOffsetParent):
* rendering/RenderFlowThread.cpp:
(WebCore):
(WebCore::RenderFlowThread::adjustedPositionRelativeToOffsetParent):
* rendering/RenderFlowThread.h:

LayoutTests:

Added tests for the implementation of offsetLeft and offsetTop for objects inside named flows
for which the offsetParent is the body.

* fast/regions/offsetLeft-offsetTop-in-multiple-regions-expected.txt: Added.
* fast/regions/offsetLeft-offsetTop-in-multiple-regions.html: Added.
* fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed-expected.txt: Added.
* fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html: Added.
* fast/regions/offsetLeft-offsetTop-in-region-float-expected.txt: Added.
* fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl-expected.txt: Added.
* fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html: Added.
* fast/regions/offsetLeft-offsetTop-in-region-float.html: Added.
* fast/regions/offsetLeft-offsetTop-inlines-region-in-element-expected.txt: Added.
* fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxModelObjectcpp">trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderFlowThreadcpp">trunk/Source/WebCore/rendering/RenderFlowThread.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderFlowThreadh">trunk/Source/WebCore/rendering/RenderFlowThread.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinmultipleregionsexpectedtxt">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinmultipleregionshtml">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionabsolutestickyfixedexpectedtxt">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionabsolutestickyfixedhtml">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloatexpectedtxt">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloatvertrlexpectedtxt">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloatvertrlhtml">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloathtml">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinlinesregioninelementexpectedtxt">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastregionsoffsetLeftoffsetTopinlinesregioninelementhtml">trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (150382 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2013-05-20 21:17:59 UTC (rev 150382)
+++ trunk/LayoutTests/ChangeLog        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2013-05-20  Radu Stavila  &lt;stavila@adobe.com&gt;
+
+        [CSSRegions] Fix offsetLeft / offsetTop for elements inside named flow
+        https://bugs.webkit.org/show_bug.cgi?id=115899
+
+        Reviewed by David Hyatt.
+
+        Added tests for the implementation of offsetLeft and offsetTop for objects inside named flows
+        for which the offsetParent is the body.
+
+        * fast/regions/offsetLeft-offsetTop-in-multiple-regions-expected.txt: Added.
+        * fast/regions/offsetLeft-offsetTop-in-multiple-regions.html: Added.
+        * fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed-expected.txt: Added.
+        * fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html: Added.
+        * fast/regions/offsetLeft-offsetTop-in-region-float-expected.txt: Added.
+        * fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl-expected.txt: Added.
+        * fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html: Added.
+        * fast/regions/offsetLeft-offsetTop-in-region-float.html: Added.
+        * fast/regions/offsetLeft-offsetTop-inlines-region-in-element-expected.txt: Added.
+        * fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html: Added.
+
</ins><span class="cx"> 2013-05-20  Brent Fulgham  &lt;bfulgham@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Windows] Unreviewed TestExpectation cleanup. Reordered lines
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinmultipleregionsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions-expected.txt (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions-expected.txt        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+Test offsetLeft and offsetTop in a named flow.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+PASS divText1.offsetParent is document.body
+PASS divText1.offsetLeft is 100
+PASS divText1.offsetTop is 450
+PASS divText2_1.offsetParent is document.body
+PASS divText2_1.offsetLeft is 500
+PASS divText2_1.offsetTop is 150
+PASS divText2_2.offsetParent is document.body
+PASS divText2_2.offsetLeft is 450
+PASS divText2_2.offsetTop is 350
+PASS divText2_3.offsetParent is document.body
+PASS divText2_3.offsetLeft is 600
+PASS divText2_3.offsetTop is 500
+PASS span.offsetParent is document.body
+PASS span.offsetLeft is 600
+PASS span.offsetTop is 610
+PASS image.offsetParent is document.body
+PASS image.offsetLeft is 700
+PASS image.offsetTop is 630
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinmultipleregionshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions.html (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-multiple-regions.html        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,312 @@
</span><ins>+&lt;html&gt;
+&lt;head&gt;
+        &lt;style type=&quot;text/css&quot;&gt;
+                /* Make sure the console and the description don't interfere with the rest of the layout. */
+                #description {
+                        position: absolute;
+                        top: 0px;
+                }
+
+                #console {
+                        position: absolute;
+                        top: 100px;
+                }
+
+                #divMain1 {
+                        border: 2px solid blue;
+                        width: 300px;
+                        height: 226px;
+                        -webkit-flow-into: flow1;
+                }
+
+                #divMain2 {
+                        border: 2px solid blue;
+                        width: 211px;
+                        height: 470px;
+                        padding-left: 5px;
+                        margin: 5px;
+                        margin-left: 5%;
+                        left: 40px;
+                        -webkit-flow-into: flow2;
+                }
+
+                .divText {
+                        border: 1px solid green;
+                        color: green;
+                        font-size: 14px;
+                }
+
+                #divText1 {
+                        width: 200px;
+                        position: relative;
+                        left: 30px;
+                        top: 10px;
+                }
+
+                #divText2_1 {
+                        border-color: #009999;
+                        color: #009999;
+                        margin: 10px;
+                        width: 180px;
+                        height: 140px;
+                }
+
+                #divText2_2 {
+                        width: 203px;
+                        height: 270px;
+                }
+
+                #divText2_3 {
+                        margin: 4px;
+                        width: 192px;
+                        height: 105px;
+                        position: relative;
+                        top: 30px;
+                        color: #777700;
+                        border-color: #777700;
+                }
+
+                #span {
+                        position: relative;
+                        top: 31px;
+                        color: black;
+                        font-size: 12px;
+                        margin-left: 4px;
+                        border: 2px solid black;
+                }
+
+                #image {
+                        border: 1px dashed red;
+                        width: 15px;
+                        position: relative;
+                        top: 35px;
+                        margin-left: 104px;
+                }
+
+                #imageText {
+                        font-size: 12px;
+                        color: red;
+                        position: absolute;
+                        top: 452px;
+                        left: 145px;
+                }
+
+                #dummy1 {
+                        width: 100px;
+                        height: 25px;
+                        border: 1px solid black;
+                        margin: 5px;
+                        margin-left: 20px;
+                }
+
+                .region1 {
+                        -webkit-flow-from: flow1;
+                        border: 1px solid red;
+                        position: relative;
+                        left: 59px;
+                        top: 429px;
+                        width: 304px;
+                        height: 230px;
+                }
+
+                .region2 {
+                        -webkit-flow-from: flow2;
+                        border: 1px solid red;
+                }
+
+                #first_region2 {
+                        position: relative;
+                        left: 449px;
+                        top: -140px;
+                        width: 500px;
+                        height: 160px;
+                }
+
+                #second_region2 {
+                        position: relative;
+                        left: 418px;
+                        top: -94px;
+                        width: 330px;
+                        height: 150px;
+                }
+
+                #third_region2 {
+                        position: relative;
+                        left: 565px;
+                        top: -66px;
+                        width: 282px;
+                        height: 195px;
+                }
+
+                .grid {
+                        position: absolute;
+                        top: 700px;
+                        width: 100px;
+                        height: 100px;
+                        border-right: 1px solid blue;
+                        text-align: right;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                .vgrid {
+                        position: absolute;
+                        left: 900px;
+                        width: 100px;
+                        height: 100px;
+                        border-bottom: 1px solid blue;
+                        text-align: bottom;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                #grid1 {
+                        left: 0px;
+                }
+                #grid2 {
+                        left: 100px;
+                }
+                #grid3 {
+                        left: 200px;
+                }
+                #grid4 {
+                        left: 300px;
+                }
+                #grid5 {
+                        left: 400px;
+                }
+                #grid6 {
+                        left: 500px;
+                }
+                #grid7 {
+                        left: 600px;
+                }
+
+                #vgrid1 {
+                        top: 0px;
+                }
+                #vgrid2 {
+                        top: 100px;
+                }
+                #vgrid3 {
+                        top: 200px;
+                }
+                #vgrid4 {
+                        top: 300px;
+                }
+                #vgrid5 {
+                        top: 400px;
+                }
+                #vgrid6 {
+                        top: 500px;
+                }
+                #vgrid7 {
+                        top: 600px;
+                }
+                #vgrid8 {
+                        top: 700px;
+                        border: none;
+                }
+        &lt;/style&gt;
+
+        &lt;script src=&quot;../js/resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+
+        &lt;script type=&quot;text/javascript&quot;&gt;
+                function writeOffsetInfo(selector) {
+                        var divItems = document.querySelectorAll(selector);
+                                
+                        for (var i=0; i&lt;divItems.length; i++) {
+                                var divItem = divItems[i];
+                                var existingHTML = divItem.innerHTML;
+                                var newHTML = existingHTML.replace(&quot;#offTop#&quot;, divItem.offsetTop);
+                                newHTML = newHTML.replace(&quot;#offLeft#&quot;, divItem.offsetLeft);
+                                if (divItem.offsetParent)
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, divItem.offsetParent.tagName + &quot;(&quot; + divItem.offsetParent.id + &quot;)&quot;);
+                                else
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, &quot;null&quot;);
+                                divItem.innerHTML = newHTML;
+                        }
+                }
+                function myOnLoad() {
+                        writeOffsetInfo(&quot;.divText&quot;);
+                        writeOffsetInfo(&quot;#divText2_3&quot;);
+                }
+        &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body id=&quot;body&quot; onload = &quot;myOnLoad();&quot;&gt;
+        &lt;div id=&quot;divMain1&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText1&quot;&gt;This is &lt;b&gt;divText1&lt;/b&gt; (flowed into a single region, relative):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id=&quot;divMain2&quot;&gt;
+                &lt;div class=&quot;dummy&quot; id=&quot;dummy1&quot;&gt;dummy&lt;/div&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText2_1&quot;&gt;&lt;span class=&quot;offsetInfo&quot;&gt;This is &lt;b&gt;divText2_1&lt;/b&gt; (flowed into the 1st region, static):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText2_2&quot;&gt;This is &lt;b&gt;divText2_2&lt;/b&gt; (flowed into the 2nd region, static):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;
+                        &lt;div class=&quot;divText&quot; id=&quot;divText2_3&quot;&gt;This is &lt;b&gt;divText2_3&lt;/b&gt; (flowed into the 2nd region, &lt;i&gt;pushed to next region by relative top&lt;/i&gt;):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+                        &lt;span id=&quot;span&quot;&gt;This is span (flowed into the 3rd region)&lt;/span&gt;
+                        &lt;img id=&quot;image&quot; src=&quot;resources/transparent.png&quot;&gt;&lt;/input&gt;
+                        &lt;span id=&quot;imageText&quot;&gt;This is image&lt;/span&gt;
+                &lt;/div&gt;                
+        &lt;/div&gt;
+
+        &lt;div class=&quot;region1&quot;&gt;&lt;/div&gt;
+
+        &lt;div class=&quot;region2&quot; id=&quot;first_region2&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region2&quot; id=&quot;second_region2&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region2&quot; id=&quot;third_region2&quot;&gt;&lt;/div&gt;
+
+        &lt;div id=&quot;grid1&quot; class=&quot;grid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;grid2&quot; class=&quot;grid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;grid3&quot; class=&quot;grid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;grid4&quot; class=&quot;grid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;grid5&quot; class=&quot;grid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;grid6&quot; class=&quot;grid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;grid7&quot; class=&quot;grid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;div id=&quot;vgrid1&quot; class=&quot;vgrid&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;vgrid2&quot; class=&quot;vgrid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;vgrid3&quot; class=&quot;vgrid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;vgrid4&quot; class=&quot;vgrid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;vgrid5&quot; class=&quot;vgrid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;vgrid6&quot; class=&quot;vgrid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;vgrid7&quot; class=&quot;vgrid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;vgrid8&quot; class=&quot;vgrid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;script&gt;
+                description(&quot;Test offsetLeft and offsetTop in a named flow.&quot;)
+
+                shouldBe(&quot;divText1.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText1.offsetLeft&quot;, &quot;100&quot;);
+                shouldBe(&quot;divText1.offsetTop&quot;, &quot;450&quot;);
+
+                shouldBe(&quot;divText2_1.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText2_1.offsetLeft&quot;, &quot;500&quot;);
+                shouldBe(&quot;divText2_1.offsetTop&quot;, &quot;150&quot;);
+
+                shouldBe(&quot;divText2_2.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText2_2.offsetLeft&quot;, &quot;450&quot;);
+                shouldBe(&quot;divText2_2.offsetTop&quot;, &quot;350&quot;);
+
+                shouldBe(&quot;divText2_3.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText2_3.offsetLeft&quot;, &quot;600&quot;);
+                shouldBe(&quot;divText2_3.offsetTop&quot;, &quot;500&quot;);
+
+                shouldBe(&quot;span.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;span.offsetLeft&quot;, &quot;600&quot;);
+                shouldBe(&quot;span.offsetTop&quot;, &quot;610&quot;);
+
+                shouldBe(&quot;image.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;image.offsetLeft&quot;, &quot;700&quot;);
+                shouldBe(&quot;image.offsetTop&quot;, &quot;630&quot;);
+
+                if (window.testRunner) {
+                        var allGraphicElements = document.querySelectorAll(&quot;.region1, .region2, .divText, .grid, .vgrid, .dummy, #span&quot;);
+                        for (var i=0; i&lt;allGraphicElements.length; i++)
+                                allGraphicElements[i].style.display = &quot;none&quot;;
+                }
+                
+        &lt;/script&gt;
+        &lt;script src=&quot;../js/resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionabsolutestickyfixedexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed-expected.txt (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed-expected.txt        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,20 @@
</span><ins>+Test offsetLeft and offsetTop in a named flow with absolute, sticky and fixed positioning.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+PASS divText1.offsetParent is divMain1
+PASS divText1.offsetLeft is 10
+PASS divText1.offsetTop is 10
+PASS divText2.offsetParent is document.body
+PASS divText2.offsetLeft is 100
+PASS divText2.offsetTop is 500
+PASS divText3.offsetParent is document.body
+PASS divText3.offsetLeft is 600
+PASS divText3.offsetTop is 400
+PASS divText4.offsetParent is null
+PASS divText4.offsetLeft is 50
+PASS divText4.offsetTop is 20
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionabsolutestickyfixedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,305 @@
</span><ins>+&lt;html&gt;
+&lt;head&gt;
+        &lt;style type=&quot;text/css&quot;&gt;
+                /* Make sure the console and the description don't interfere with the rest of the layout. */
+                #description {
+                        position: absolute;
+                        top: 0px;
+                }
+
+                #console {
+                        position: absolute;
+                        top: 100px;
+                }
+
+                #divMain1 {
+                        border: 2px solid blue;
+                        height: 105px;
+                        margin: 10px;
+                        position: relative;
+                        -webkit-flow-into: flow1;
+                }
+
+                #divMain2 {
+                        border: 2px solid blue;
+                        height: 120px;
+                        margin: 10px;
+                        -webkit-flow-into: flow2;
+                }
+
+                #divMain3 {
+                        border: 2px solid blue;
+                        width: 211px;
+                        height: 146px;
+                        padding-left: 5px;
+                        margin: 5px;
+                        margin-left: 5%;
+                        left: 40px;
+                        -webkit-flow-into: flow3;
+                }
+
+                #divMain4 {
+                        border: 2px solid blue;
+                        width: 90%;
+                        height: 120px;
+                        padding-left: 5px;
+                        padding-top: 5px;
+                        margin: 3.5%;
+                        -webkit-flow-into: flow4;
+                }
+
+                .divText {
+                        border: 1px solid green;
+                        color: green;
+                        font-size: 14px;
+                }
+
+                #divText1 {
+                        width: 250px;
+                        position: absolute;
+                        left: 10px;
+                        top: 10px;
+                }
+
+                #divText2 {
+                        width: 200px;
+                        position: absolute;
+                        left: 20px;
+                        top: 20px;
+                }
+
+                #divText3 {
+                        border-color: #009999;
+                        color: #009999;
+                        margin: 10px;
+                        width: 180px;
+                        height: 90px;
+                        position: -webkit-sticky;
+                        top: 50px;
+                }
+
+                #divText4 {
+                        border-color: #009999;
+                        color: #009999;
+                        width: 180px;
+                        height: 100px;
+                        position: fixed;
+                        left: 50px;
+                        top: 20px;
+                }
+
+                #dummy {
+                        width: 100px;
+                        height: 25px;
+                        border: 1px solid black;
+                        margin: 5px;
+                        margin-left: 20px;
+                }
+
+                #region1 {
+                        -webkit-flow-from: flow1;
+                        border: 1px solid red;
+                        position: relative;
+                        left: 59px;
+                        top: 335px;
+                        width: 304px;
+                        height: 125px;
+                }
+
+                #region2 {
+                        -webkit-flow-from: flow2;
+                        border: 1px solid red;
+                        position: relative;
+                        left: 71px;
+                        top: 344px;
+                        width: 304px;
+                        height: 140px;
+                }
+
+                #region3 {
+                        -webkit-flow-from: flow3;
+                        border: 1px solid red;
+                        position: relative;
+                        margin-top: 20px;
+                        left: 562px;
+                        top: 53px;
+                        width: 250px;
+                        height: 160px;
+                        overflow: hidden;
+                }
+
+                #region4 {
+                        -webkit-flow-from: flow4;
+                        border: 1px solid red;
+                        position: relative;
+                        margin-top: 20px;
+                        left: 450px;
+                        top: 53px;
+                        width: 250px;
+                        height: 140px;
+                }
+
+                .grid {
+                        position: absolute;
+                        top: 750px;
+                        width: 100px;
+                        height: 100px;
+                        border-right: 1px solid blue;
+                        text-align: right;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                .vgrid {
+                        position: absolute;
+                        left: 900px;
+                        width: 100px;
+                        height: 100px;
+                        border-bottom: 1px solid blue;
+                        text-align: bottom;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                #grid1 {
+                        left: 0px;
+                }
+                #grid2 {
+                        left: 100px;
+                }
+                #grid3 {
+                        left: 200px;
+                }
+                #grid4 {
+                        left: 300px;
+                }
+                #grid5 {
+                        left: 400px;
+                }
+                #grid6 {
+                        left: 500px;
+                }
+                #grid7 {
+                        left: 600px;
+                }
+
+                #vgrid1 {
+                        top: 0px;
+                }
+                #vgrid2 {
+                        top: 100px;
+                }
+                #vgrid3 {
+                        top: 200px;
+                }
+                #vgrid4 {
+                        top: 300px;
+                }
+                #vgrid5 {
+                        top: 400px;
+                }
+                #vgrid6 {
+                        top: 500px;
+                }
+                #vgrid7 {
+                        top: 600px;
+                }
+                #vgrid8 {
+                        top: 700px;
+                        border: none;
+                }
+        &lt;/style&gt;
+
+        &lt;script src=&quot;../js/resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+
+        &lt;script type=&quot;text/javascript&quot;&gt;
+                function writeOffsetInfo(selector) {
+                        var divItems = document.querySelectorAll(selector);
+                                
+                        for (var i=0; i&lt;divItems.length; i++) {
+                                var divItem = divItems[i];
+                                var existingHTML = divItem.innerHTML;
+                                var newHTML = existingHTML.replace(&quot;#offTop#&quot;, divItem.offsetTop);
+                                newHTML = newHTML.replace(&quot;#offLeft#&quot;, divItem.offsetLeft);
+                                if (divItem.offsetParent)
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, divItem.offsetParent.tagName + &quot;(&quot; + divItem.offsetParent.id + &quot;)&quot;);
+                                else
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, &quot;null&quot;);
+                                divItem.innerHTML = newHTML;
+                        }
+                }
+                function myOnLoad() {
+                        writeOffsetInfo(&quot;.divText&quot;);
+                }
+        &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body id=&quot;body&quot; onload = &quot;myOnLoad();&quot;&gt;
+        &lt;div id=&quot;divMain1&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText1&quot;&gt;This is &lt;b&gt;divText1&lt;/b&gt; (absolute):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id=&quot;divMain2&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText2&quot;&gt;This is &lt;b&gt;divText2&lt;/b&gt; (absolute):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id=&quot;divMain3&quot;&gt;
+                &lt;div class=&quot;dummy&quot; id=&quot;dummy&quot;&gt;dummy&lt;/div&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText3&quot;&gt;&lt;span class=&quot;offsetInfo&quot;&gt;This is &lt;b&gt;divText3&lt;/b&gt; (sticky):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id=&quot;divMain4&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText4&quot;&gt;This is &lt;b&gt;divText4&lt;/b&gt; (fixed):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class=&quot;region&quot; id=&quot;region1&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region&quot; id=&quot;region2&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region&quot; id=&quot;region3&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region&quot; id=&quot;region4&quot;&gt;&lt;/div&gt;
+
+        &lt;div id=&quot;grid1&quot; class=&quot;grid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;grid2&quot; class=&quot;grid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;grid3&quot; class=&quot;grid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;grid4&quot; class=&quot;grid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;grid5&quot; class=&quot;grid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;grid6&quot; class=&quot;grid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;grid7&quot; class=&quot;grid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;div id=&quot;vgrid1&quot; class=&quot;vgrid&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;vgrid2&quot; class=&quot;vgrid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;vgrid3&quot; class=&quot;vgrid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;vgrid4&quot; class=&quot;vgrid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;vgrid5&quot; class=&quot;vgrid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;vgrid6&quot; class=&quot;vgrid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;vgrid7&quot; class=&quot;vgrid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;vgrid8&quot; class=&quot;vgrid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;script&gt;
+                description(&quot;Test offsetLeft and offsetTop in a named flow with absolute, sticky and fixed positioning.&quot;)
+
+                shouldBe(&quot;divText1.offsetParent&quot;, &quot;divMain1&quot;);
+                shouldBe(&quot;divText1.offsetLeft&quot;, &quot;10&quot;);
+                shouldBe(&quot;divText1.offsetTop&quot;, &quot;10&quot;);
+
+                shouldBe(&quot;divText2.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText2.offsetLeft&quot;, &quot;100&quot;);
+                shouldBe(&quot;divText2.offsetTop&quot;, &quot;500&quot;);
+
+                shouldBe(&quot;divText3.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText3.offsetLeft&quot;, &quot;600&quot;);
+                shouldBe(&quot;divText3.offsetTop&quot;, &quot;400&quot;);
+
+                shouldBeNull(&quot;divText4.offsetParent&quot;);
+                shouldBe(&quot;divText4.offsetLeft&quot;, &quot;50&quot;);
+                shouldBe(&quot;divText4.offsetTop&quot;, &quot;20&quot;);
+
+                if (window.testRunner) {
+                        var allGraphicElements = document.querySelectorAll(&quot;.region, .divText, .grid, .vgrid, #dummy&quot;);
+                        for (var i=0; i&lt;allGraphicElements.length; i++)
+                                allGraphicElements[i].style.display = &quot;none&quot;;
+                }
+                
+        &lt;/script&gt;
+        &lt;script src=&quot;../js/resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloatexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-expected.txt (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-expected.txt        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,14 @@
</span><ins>+Test offsetLeft and offsetTop in a named flow with floats.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+PASS divText1.offsetParent is document.body
+PASS divText1.offsetLeft is 200
+PASS divText1.offsetTop is 300
+PASS divText2.offsetParent is document.body
+PASS divText2.offsetLeft is 300
+PASS divText2.offsetTop is 500
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloatvertrlexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl-expected.txt (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl-expected.txt        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,14 @@
</span><ins>+Test offsetLeft and offsetTop in a named flow with floats in vertical-rl mode.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+PASS divText1.offsetParent is document.body
+PASS divText1.offsetLeft is 700
+PASS divText1.offsetTop is 200
+PASS divText2.offsetParent is document.body
+PASS divText2.offsetLeft is 400
+PASS divText2.offsetTop is 200
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloatvertrlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,216 @@
</span><ins>+&lt;html style=&quot;-webkit-writing-mode: vertical-rl;&quot;&gt;
+&lt;head&gt;
+        &lt;style type=&quot;text/css&quot;&gt;
+                /* Make sure the console and the description don't interfere with the rest of the layout. */
+                #description {
+                        position: absolute;
+                        left: 0px;
+                }
+
+                #console {
+                        position: absolute;
+                        left: 100px;
+                }
+
+                #divMain1 {
+                        -webkit-flow-into: flow1;
+                        border: 2px solid blue;
+                        width: 160px;
+                        margin: 10px;
+                        padding: 5px;
+                }
+
+                #divMain2 {
+                        border: 2px solid blue;
+                        width: 135px;
+                        margin: 5px;
+                        -webkit-flow-into: flow2;
+                }
+
+                .divText {
+                        border: 1px solid green;
+                        color: green;
+                        font-size: 14px;
+                }
+
+                #divText1 {
+                        height: 250px;
+                        margin: 10px;
+                        padding-left: 5px;
+                        float: right;
+                }
+
+                #divText2 {
+                        height: 200px;
+                        float: left;
+                        margin: 10px;
+                }
+
+                #region1 {
+                        -webkit-flow-from: flow1;
+                        border: 1px solid red;
+                        position: absolute;
+                        top: 78px;
+                        left: 611px;
+                        height: 400px;
+                        width: 190px;
+                }
+
+                #region2 {
+                        -webkit-flow-from: flow2;
+                        border: 1px solid red;
+                        position: absolute;
+                        left: 336px;
+                        top: 182px;
+                        width: 150px;
+                        height: 400px;
+                }
+
+                .grid {
+                        position: absolute;
+                        top: 650px;
+                        width: 100px;
+                        height: 100px;
+                        border-right: 1px solid blue;
+                        text-align: right;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                .vgrid {
+                        position: absolute;
+                        left: 900px;
+                        width: 100px;
+                        height: 100px;
+                        border-bottom: 1px solid blue;
+                        text-align: bottom;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                #grid1 {
+                        left: 0px;
+                }
+                #grid2 {
+                        left: 100px;
+                }
+                #grid3 {
+                        left: 200px;
+                }
+                #grid4 {
+                        left: 300px;
+                }
+                #grid5 {
+                        left: 400px;
+                }
+                #grid6 {
+                        left: 500px;
+                }
+                #grid7 {
+                        left: 600px;
+                }
+
+                #vgrid1 {
+                        top: 0px;
+                }
+                #vgrid2 {
+                        top: 100px;
+                }
+                #vgrid3 {
+                        top: 200px;
+                }
+                #vgrid4 {
+                        top: 300px;
+                }
+                #vgrid5 {
+                        top: 400px;
+                }
+                #vgrid6 {
+                        top: 500px;
+                }
+                #vgrid7 {
+                        top: 600px;
+                }
+                #vgrid8 {
+                        top: 700px;
+                        border: none;
+                }
+        &lt;/style&gt;
+
+        &lt;script src=&quot;../js/resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+
+        &lt;script type=&quot;text/javascript&quot;&gt;
+                function writeOffsetInfo(selector) {
+                        var divItems = document.querySelectorAll(selector);
+                                
+                        for (var i=0; i&lt;divItems.length; i++) {
+                                var divItem = divItems[i];
+                                var existingHTML = divItem.innerHTML;
+                                var newHTML = existingHTML.replace(&quot;#offTop#&quot;, divItem.offsetTop);
+                                newHTML = newHTML.replace(&quot;#offLeft#&quot;, divItem.offsetLeft);
+                                if (divItem.offsetParent)
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, divItem.offsetParent.tagName + &quot;(&quot; + divItem.offsetParent.id + &quot;)&quot;);
+                                else
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, &quot;null&quot;);
+                                divItem.innerHTML = newHTML;
+                        }
+                }
+                function myOnLoad() {
+                        writeOffsetInfo(&quot;.divText&quot;);
+                }
+        &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body id=&quot;body&quot; onload = &quot;myOnLoad();&quot;&gt;
+        
+        &lt;div id=&quot;divMain1&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText1&quot;&gt;This is &lt;b&gt;divText1&lt;/b&gt; (float right):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+                &lt;span class=&quot;mySpan&quot; style=&quot;color: blue;&quot;&gt;This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.&lt;/span&gt;
+        &lt;/div&gt;
+        
+        &lt;div id=&quot;divMain2&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText2&quot;&gt;This is &lt;b&gt;divText2&lt;/b&gt; (float left):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+                &lt;span class=&quot;mySpan&quot; style=&quot;color: blue;&quot;&gt;This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.&lt;/span&gt;
+        &lt;/div&gt;
+
+        &lt;div class=&quot;region&quot; id=&quot;region1&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region&quot; id=&quot;region2&quot;&gt;&lt;/div&gt;
+        
+        &lt;div id=&quot;grid1&quot; class=&quot;grid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;grid2&quot; class=&quot;grid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;grid3&quot; class=&quot;grid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;grid4&quot; class=&quot;grid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;grid5&quot; class=&quot;grid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;grid6&quot; class=&quot;grid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;grid7&quot; class=&quot;grid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;div id=&quot;vgrid1&quot; class=&quot;vgrid&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;vgrid2&quot; class=&quot;vgrid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;vgrid3&quot; class=&quot;vgrid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;vgrid4&quot; class=&quot;vgrid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;vgrid5&quot; class=&quot;vgrid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;vgrid6&quot; class=&quot;vgrid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;vgrid7&quot; class=&quot;vgrid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;vgrid8&quot; class=&quot;vgrid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;script&gt;
+                description(&quot;Test offsetLeft and offsetTop in a named flow with floats in vertical-rl mode.&quot;)
+
+                shouldBe(&quot;divText1.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText1.offsetLeft&quot;, &quot;700&quot;);
+                shouldBe(&quot;divText1.offsetTop&quot;, &quot;200&quot;);
+
+                shouldBe(&quot;divText2.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText2.offsetLeft&quot;, &quot;400&quot;);
+                shouldBe(&quot;divText2.offsetTop&quot;, &quot;200&quot;);
+
+                if (window.testRunner) {
+                        var allGraphicElements = document.querySelectorAll(&quot;.region, .divText, .grid, .vgrid, .mySpan&quot;);
+                        for (var i=0; i&lt;allGraphicElements.length; i++)
+                                allGraphicElements[i].style.display = &quot;none&quot;;
+                }
+                
+        &lt;/script&gt;
+        &lt;script src=&quot;../js/resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinregionfloathtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float.html (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-in-region-float.html        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,216 @@
</span><ins>+&lt;html&gt;
+&lt;head&gt;
+        &lt;style type=&quot;text/css&quot;&gt;
+                /* Make sure the console and the description don't interfere with the rest of the layout. */
+                #description {
+                        position: absolute;
+                        top: 0px;
+                }
+
+                #console {
+                        position: absolute;
+                        top: 100px;
+                }
+
+                #divMain1 {
+                        -webkit-flow-into: flow1;
+                        border: 2px solid blue;
+                        height: 150px;
+                        margin: 10px;
+                        padding: 5px;
+                }
+
+                #divMain2 {
+                        border: 2px solid blue;
+                        height: 135px;
+                        margin: 5px;
+                        -webkit-flow-into: flow2;
+                }
+
+                .divText {
+                        border: 1px solid green;
+                        color: green;
+                        font-size: 14px;
+                }
+
+                #divText1 {
+                        width: 250px;
+                        margin: 10px;
+                        padding-left: 5px;
+                        float: right;
+                }
+
+                #divText2 {
+                        width: 200px;
+                        float: left;
+                        margin: 10px;
+                }
+
+                #region1 {
+                        -webkit-flow-from: flow1;
+                        border: 1px solid red;
+                        position: relative;
+                        left: 75px;
+                        top: 264px;
+                        width: 400px;
+                        height: 180px;
+                }
+
+                #region2 {
+                        -webkit-flow-from: flow2;
+                        border: 1px solid red;
+                        position: relative;
+                        left: 274px;
+                        top: 292px;
+                        width: 400px;
+                        height: 150px;
+                }
+
+                .grid {
+                        position: absolute;
+                        top: 750px;
+                        width: 100px;
+                        height: 100px;
+                        border-right: 1px solid blue;
+                        text-align: right;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                .vgrid {
+                        position: absolute;
+                        left: 900px;
+                        width: 100px;
+                        height: 100px;
+                        border-bottom: 1px solid blue;
+                        text-align: bottom;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                #grid1 {
+                        left: 0px;
+                }
+                #grid2 {
+                        left: 100px;
+                }
+                #grid3 {
+                        left: 200px;
+                }
+                #grid4 {
+                        left: 300px;
+                }
+                #grid5 {
+                        left: 400px;
+                }
+                #grid6 {
+                        left: 500px;
+                }
+                #grid7 {
+                        left: 600px;
+                }
+
+                #vgrid1 {
+                        top: 0px;
+                }
+                #vgrid2 {
+                        top: 100px;
+                }
+                #vgrid3 {
+                        top: 200px;
+                }
+                #vgrid4 {
+                        top: 300px;
+                }
+                #vgrid5 {
+                        top: 400px;
+                }
+                #vgrid6 {
+                        top: 500px;
+                }
+                #vgrid7 {
+                        top: 600px;
+                }
+                #vgrid8 {
+                        top: 700px;
+                        border: none;
+                }
+        &lt;/style&gt;
+
+        &lt;script src=&quot;../js/resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+
+        &lt;script type=&quot;text/javascript&quot;&gt;
+                function writeOffsetInfo(selector) {
+                        var divItems = document.querySelectorAll(selector);
+                                
+                        for (var i=0; i&lt;divItems.length; i++) {
+                                var divItem = divItems[i];
+                                var existingHTML = divItem.innerHTML;
+                                var newHTML = existingHTML.replace(&quot;#offTop#&quot;, divItem.offsetTop);
+                                newHTML = newHTML.replace(&quot;#offLeft#&quot;, divItem.offsetLeft);
+                                if (divItem.offsetParent)
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, divItem.offsetParent.tagName + &quot;(&quot; + divItem.offsetParent.id + &quot;)&quot;);
+                                else
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, &quot;null&quot;);
+                                divItem.innerHTML = newHTML;
+                        }
+                }
+                function myOnLoad() {
+                        writeOffsetInfo(&quot;.divText&quot;);
+                }
+        &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body id=&quot;body&quot; onload = &quot;myOnLoad();&quot;&gt;
+        
+        &lt;div id=&quot;divMain1&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText1&quot;&gt;This is &lt;b&gt;divText1&lt;/b&gt; (float right):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+                &lt;span class=&quot;mySpan&quot; style=&quot;color: blue;&quot;&gt;This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.&lt;/span&gt;
+        &lt;/div&gt;
+        
+        &lt;div id=&quot;divMain2&quot;&gt;
+                &lt;div class=&quot;divText&quot; id=&quot;divText2&quot;&gt;This is &lt;b&gt;divText2&lt;/b&gt; (float left):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/div&gt;
+                &lt;span class=&quot;mySpan&quot; style=&quot;color: blue;&quot;&gt;This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.&lt;/span&gt;
+        &lt;/div&gt;
+
+        &lt;div class=&quot;region&quot; id=&quot;region1&quot;&gt;&lt;/div&gt;
+        &lt;div class=&quot;region&quot; id=&quot;region2&quot;&gt;&lt;/div&gt;
+        
+        &lt;div id=&quot;grid1&quot; class=&quot;grid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;grid2&quot; class=&quot;grid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;grid3&quot; class=&quot;grid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;grid4&quot; class=&quot;grid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;grid5&quot; class=&quot;grid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;grid6&quot; class=&quot;grid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;grid7&quot; class=&quot;grid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;div id=&quot;vgrid1&quot; class=&quot;vgrid&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;vgrid2&quot; class=&quot;vgrid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;vgrid3&quot; class=&quot;vgrid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;vgrid4&quot; class=&quot;vgrid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;vgrid5&quot; class=&quot;vgrid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;vgrid6&quot; class=&quot;vgrid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;vgrid7&quot; class=&quot;vgrid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;vgrid8&quot; class=&quot;vgrid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;script&gt;
+                description(&quot;Test offsetLeft and offsetTop in a named flow with floats.&quot;)
+
+                shouldBe(&quot;divText1.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText1.offsetLeft&quot;, &quot;200&quot;);
+                shouldBe(&quot;divText1.offsetTop&quot;, &quot;300&quot;);
+
+                shouldBe(&quot;divText2.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText2.offsetLeft&quot;, &quot;300&quot;);
+                shouldBe(&quot;divText2.offsetTop&quot;, &quot;500&quot;);
+
+                if (window.testRunner) {
+                        var allGraphicElements = document.querySelectorAll(&quot;.region, .divText, .grid, .vgrid, .mySpan&quot;);
+                        for (var i=0; i&lt;allGraphicElements.length; i++)
+                                allGraphicElements[i].style.display = &quot;none&quot;;
+                }
+                
+        &lt;/script&gt;
+        &lt;script src=&quot;../js/resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinlinesregioninelementexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element-expected.txt (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element-expected.txt        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+Test offsetLeft and offsetTop for blocks and inlines in a named flow when the region's offsetParent is NOT the body.
+This test also covers borders.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+PASS divText.offsetParent is document.body
+PASS divText.offsetLeft is 300
+PASS divText.offsetTop is 350
+PASS regionParent.offsetLeft is 200
+PASS region.offsetParent is regionParent
+PASS region.offsetLeft is 30
+PASS region.offsetTop is 20
+PASS inlineElement.offsetParent is document.body
+PASS inlineElement.offsetLeft is 300
+PASS inlineElement.offsetTop is 550
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsoffsetLeftoffsetTopinlinesregioninelementhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html (0 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -0,0 +1,216 @@
</span><ins>+&lt;html&gt;
+&lt;head&gt;
+        &lt;style type=&quot;text/css&quot;&gt;
+                /* Make sure the console and the description don't interfere with the rest of the layout. */
+                #description {
+                        position: absolute;
+                        top: 0px;
+                }
+
+                body {
+                        border: 10px dotted gray;
+                        padding: 10px;
+                }
+
+                #console {
+                        position: absolute;
+                        top: 110px;
+                }
+
+                #regionParent {
+                        border: 1px solid blue;
+                        border-left: 10px dotted blue;
+                        border-top: 10px dotted blue;
+                        width: 600px;
+                        height: 370px;
+                        position: relative;
+                        left: 147px;
+                        top: 242px;
+                        margin-left: 25px;
+                }
+
+                .region1 {
+                        -webkit-flow-from: flow1;
+                        border: 10px dotted red;
+                        margin: 20px;
+                        margin-left: 30px;
+                        width: 404px;
+                        height: 320px;
+                }
+
+                #divMain {
+                        margin: 5px;
+                        border: 5px solid blue;
+                        height: 305px;
+                        -webkit-flow-into: flow1;
+                }
+
+                #divText {
+                        border: 1px solid green;
+                        color: green;
+                        font-size: 14px;
+                        width: 300px;
+                        height: 180px;
+                        position: relative;
+                        left: 40px;
+                        top: 12px;
+                }
+
+                .grid {
+                        position: absolute;
+                        top: 680px;
+                        width: 100px;
+                        height: 100px;
+                        border-right: 1px solid blue;
+                        text-align: right;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                .vgrid {
+                        position: absolute;
+                        left: 900px;
+                        width: 100px;
+                        height: 100px;
+                        border-bottom: 1px solid blue;
+                        text-align: bottom;
+                        font-size: 14px;
+                        color: blue;
+                }
+
+                #grid1 {
+                        left: 0px;
+                }
+                #grid2 {
+                        left: 100px;
+                }
+                #grid3 {
+                        left: 200px;
+                }
+                #grid4 {
+                        left: 300px;
+                }
+                #grid5 {
+                        left: 400px;
+                }
+                #grid6 {
+                        left: 500px;
+                }
+                #grid7 {
+                        left: 600px;
+                }
+
+                #vgrid1 {
+                        top: 0px;
+                }
+                #vgrid2 {
+                        top: 100px;
+                }
+                #vgrid3 {
+                        top: 200px;
+                }
+                #vgrid4 {
+                        top: 300px;
+                }
+                #vgrid5 {
+                        top: 400px;
+                }
+                #vgrid6 {
+                        top: 500px;
+                }
+                #vgrid7 {
+                        top: 600px;
+                }
+                #vgrid8 {
+                        top: 700px;
+                        border: none;
+                }
+        &lt;/style&gt;
+
+        &lt;script src=&quot;../js/resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+
+        &lt;script type=&quot;text/javascript&quot;&gt;
+                function writeOffsetInfo(selector) {
+                        var divItems = document.querySelectorAll(selector);
+                                
+                        for (var i=0; i&lt;divItems.length; i++) {
+                                var divItem = divItems[i];
+                                var existingHTML = divItem.innerHTML;
+                                var newHTML = existingHTML.replace(&quot;#offTop#&quot;, divItem.offsetTop);
+                                newHTML = newHTML.replace(&quot;#offLeft#&quot;, divItem.offsetLeft);
+                                if (divItem.offsetParent)
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, divItem.offsetParent.tagName + &quot;(&quot; + divItem.offsetParent.id + &quot;)&quot;);
+                                else
+                                        newHTML = newHTML.replace(&quot;#offParent#&quot;, &quot;null&quot;);
+                                divItem.innerHTML = newHTML;
+                        }
+                }
+                function myOnLoad() {
+                        writeOffsetInfo(&quot;#divText&quot;);
+                        writeOffsetInfo(&quot;.inlineElements&quot;);
+
+                        var regInfo = document.getElementById(&quot;regionInfo&quot;);
+                        var parent = document.getElementById(&quot;region&quot;).offsetParent;
+                        if (parent)
+                                regInfo.innerHTML = regInfo.innerHTML.replace(&quot;#offParent#&quot;, parent.id);
+                        else regInfo.innerHTML = regInfo.innerHTML.replace(&quot;#offParent#&quot;, &quot;null&quot;);
+                }
+        &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body id=&quot;body&quot; onload = &quot;myOnLoad();&quot;&gt;
+        &lt;div id=&quot;divMain&quot;&gt;&lt;span id=&quot;regionInfo&quot; style=&quot;color: #CC0000&quot;&gt;Region's offsetParent: #offParent#&lt;/span&gt;
+                &lt;div id=&quot;divText&quot;&gt;This is &lt;b&gt;divText&lt;/b&gt; (flowed into a single region, relative):&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;br/&gt;
+                        &lt;span class=&quot;inlineElements&quot; style=&quot;color: #000099;&quot;&gt;Inline element in divText:&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;span class=&quot;inlineElements&quot; id=&quot;inlineElement&quot; style=&quot;color: #000099; position: relative; top: 30px; left: 40px;&quot;&gt;Inline element in divMain:&lt;br/&gt;- offsetParent is &lt;b&gt;#offParent#&lt;/b&gt;&lt;br/&gt;- offsetLeft is &lt;b&gt;#offLeft#&lt;/b&gt;&lt;br/&gt;- offsetTop is &lt;b&gt;#offTop#&lt;/b&gt;&lt;/span&gt;
+        &lt;/div&gt;
+
+        &lt;div id=&quot;regionParent&quot;&gt;&lt;span style=&quot;float: right; margin: 10px; color: blue;&quot;&gt;This is regionParent&lt;/span&gt;
+                &lt;div class=&quot;region1&quot; id=&quot;region&quot;&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id=&quot;grid1&quot; class=&quot;grid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;grid2&quot; class=&quot;grid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;grid3&quot; class=&quot;grid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;grid4&quot; class=&quot;grid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;grid5&quot; class=&quot;grid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;grid6&quot; class=&quot;grid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;grid7&quot; class=&quot;grid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;div id=&quot;vgrid1&quot; class=&quot;vgrid&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;vgrid2&quot; class=&quot;vgrid&quot;&gt;100px&lt;/div&gt;
+        &lt;div id=&quot;vgrid3&quot; class=&quot;vgrid&quot;&gt;200px&lt;/div&gt;
+        &lt;div id=&quot;vgrid4&quot; class=&quot;vgrid&quot;&gt;300px&lt;/div&gt;
+        &lt;div id=&quot;vgrid5&quot; class=&quot;vgrid&quot;&gt;400px&lt;/div&gt;
+        &lt;div id=&quot;vgrid6&quot; class=&quot;vgrid&quot;&gt;500px&lt;/div&gt;
+        &lt;div id=&quot;vgrid7&quot; class=&quot;vgrid&quot;&gt;600px&lt;/div&gt;
+        &lt;div id=&quot;vgrid8&quot; class=&quot;vgrid&quot;&gt;700px&lt;/div&gt;
+
+        &lt;script&gt;
+                description(&quot;Test offsetLeft and offsetTop for blocks and inlines in a named flow when the region's offsetParent is NOT the body.&lt;br/&gt;This test also covers borders.&quot;)
+
+                shouldBe(&quot;divText.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;divText.offsetLeft&quot;, &quot;300&quot;);
+                shouldBe(&quot;divText.offsetTop&quot;, &quot;350&quot;);
+
+                shouldBe(&quot;regionParent.offsetLeft&quot;, &quot;200&quot;);
+
+                shouldBe(&quot;region.offsetParent&quot;, &quot;regionParent&quot;);
+                shouldBe(&quot;region.offsetLeft&quot;, &quot;30&quot;);
+                shouldBe(&quot;region.offsetTop&quot;, &quot;20&quot;);
+
+                shouldBe(&quot;inlineElement.offsetParent&quot;, &quot;document.body&quot;);
+                shouldBe(&quot;inlineElement.offsetLeft&quot;, &quot;300&quot;);
+                shouldBe(&quot;inlineElement.offsetTop&quot;, &quot;550&quot;);
+
+                if (window.testRunner) {
+                        var allGraphicElements = document.querySelectorAll(&quot;.region1, #divMain, #divText, .grid, .vgrid, #regionParent, .inlineElements, #regionInfo&quot;);
+                        for (var i=0; i&lt;allGraphicElements.length; i++)
+                                allGraphicElements[i].style.display = &quot;none&quot;;
+                }
+                
+        &lt;/script&gt;
+        &lt;script src=&quot;../js/resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (150382 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2013-05-20 21:17:59 UTC (rev 150382)
+++ trunk/Source/WebCore/ChangeLog        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -1,3 +1,26 @@
</span><ins>+2013-05-20  Radu Stavila  &lt;stavila@adobe.com&gt;
+
+        [CSSRegions] Fix offsetLeft / offsetTop for elements inside named flow
+        https://bugs.webkit.org/show_bug.cgi?id=115899
+
+        Reviewed by David Hyatt.
+
+        Elements in named flows that have the body as their offsetParent, need to compute their
+        offsetLeft and offsetTop values relative to the body.
+
+        Tests: fast/regions/offsetLeft-offsetTop-in-multiple-regions.html
+               fast/regions/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.html
+               fast/regions/offsetLeft-offsetTop-in-region-float-vert-rl.html
+               fast/regions/offsetLeft-offsetTop-in-region-float.html
+               fast/regions/offsetLeft-offsetTop-inlines-region-in-element.html
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::adjustedPositionRelativeToOffsetParent):
+        * rendering/RenderFlowThread.cpp:
+        (WebCore):
+        (WebCore::RenderFlowThread::adjustedPositionRelativeToOffsetParent):
+        * rendering/RenderFlowThread.h:
+
</ins><span class="cx"> 2013-05-20  Zoltan Horvath  &lt;zoltan@webkit.org&gt;
</span><span class="cx"> 
</span><span class="cx">         [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxModelObjectcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (150382 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp        2013-05-20 21:17:59 UTC (rev 150382)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -35,6 +35,8 @@
</span><span class="cx"> #include &quot;RenderBlock.h&quot;
</span><span class="cx"> #include &quot;RenderInline.h&quot;
</span><span class="cx"> #include &quot;RenderLayer.h&quot;
</span><ins>+#include &quot;RenderNamedFlowThread.h&quot;
+#include &quot;RenderRegion.h&quot;
</ins><span class="cx"> #include &quot;RenderView.h&quot;
</span><span class="cx"> #include &quot;ScrollingConstraints.h&quot;
</span><span class="cx"> #include &quot;Settings.h&quot;
</span><span class="lines">@@ -491,27 +493,31 @@
</span><span class="cx">     if (const RenderBoxModelObject* offsetParent = this-&gt;offsetParent()) {
</span><span class="cx">         if (offsetParent-&gt;isBox() &amp;&amp; !offsetParent-&gt;isBody())
</span><span class="cx">             referencePoint.move(-toRenderBox(offsetParent)-&gt;borderLeft(), -toRenderBox(offsetParent)-&gt;borderTop());
</span><del>-        if (!isOutOfFlowPositioned()) {
</del><ins>+        if (!isOutOfFlowPositioned() || flowThreadContainingBlock()) {
</ins><span class="cx">             if (isRelPositioned())
</span><span class="cx">                 referencePoint.move(relativePositionOffset());
</span><span class="cx">             else if (isStickyPositioned())
</span><span class="cx">                 referencePoint.move(stickyPositionOffset());
</span><span class="cx">             
</span><del>-            // FIXME: The offset position for elements inside named flow threads is not correctly computed when the offsetParent is body
-            // See https://bugs.webkit.org/show_bug.cgi?id=115899
-            
</del><span class="cx">             // CSS regions specification says that region flows should return the body element as their offsetParent.
</span><span class="cx">             // Since we will bypass the body’s renderer anyway, just end the loop if we encounter a region flow (named flow thread).
</span><span class="cx">             // See http://dev.w3.org/csswg/css-regions/#cssomview-offset-attributes
</span><del>-            const RenderObject* curr = parent();
</del><ins>+            RenderObject* curr = parent();
</ins><span class="cx">             while (curr != offsetParent &amp;&amp; !curr-&gt;isRenderNamedFlowThread()) {
</span><span class="cx">                 // FIXME: What are we supposed to do inside SVG content?
</span><del>-                if (curr-&gt;isBox() &amp;&amp; !curr-&gt;isTableRow())
-                    referencePoint.moveBy(toRenderBox(curr)-&gt;topLeftLocation());
-                referencePoint.move(curr-&gt;parent()-&gt;offsetForColumns(referencePoint));
</del><ins>+                if (!isOutOfFlowPositioned()) {
+                    if (curr-&gt;isBox() &amp;&amp; !curr-&gt;isTableRow())
+                        referencePoint.moveBy(toRenderBox(curr)-&gt;topLeftLocation());
+                    referencePoint.move(curr-&gt;parent()-&gt;offsetForColumns(referencePoint));
+                }
</ins><span class="cx">                 curr = curr-&gt;parent();
</span><span class="cx">             }
</span><del>-            if (offsetParent-&gt;isBox() &amp;&amp; offsetParent-&gt;isBody() &amp;&amp; !offsetParent-&gt;isPositioned())
</del><ins>+            
+            // Compute the offset position for elements inside named flow threads for which the offsetParent was the body.
+            // See https://bugs.webkit.org/show_bug.cgi?id=115899
+            if (curr-&gt;isRenderNamedFlowThread())
+                referencePoint = toRenderNamedFlowThread(curr)-&gt;adjustedPositionRelativeToOffsetParent(*this, referencePoint);
+            else if (offsetParent-&gt;isBox() &amp;&amp; offsetParent-&gt;isBody() &amp;&amp; !offsetParent-&gt;isPositioned())
</ins><span class="cx">                 referencePoint.moveBy(toRenderBox(offsetParent)-&gt;topLeftLocation());
</span><span class="cx">         }
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderFlowThreadcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlowThread.cpp (150382 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderFlowThread.cpp        2013-05-20 21:17:59 UTC (rev 150382)
+++ trunk/Source/WebCore/rendering/RenderFlowThread.cpp        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -38,6 +38,7 @@
</span><span class="cx"> #include &quot;PODIntervalTree.h&quot;
</span><span class="cx"> #include &quot;PaintInfo.h&quot;
</span><span class="cx"> #include &quot;RenderBoxRegionInfo.h&quot;
</span><ins>+#include &quot;RenderInline.h&quot;
</ins><span class="cx"> #include &quot;RenderLayer.h&quot;
</span><span class="cx"> #include &quot;RenderRegion.h&quot;
</span><span class="cx"> #include &quot;RenderView.h&quot;
</span><span class="lines">@@ -389,6 +390,87 @@
</span><span class="cx"> 
</span><span class="cx">     return adapter.result();
</span><span class="cx"> }
</span><ins>+    
+LayoutPoint RenderFlowThread::adjustedPositionRelativeToOffsetParent(const RenderBoxModelObject&amp; boxModelObject, const LayoutPoint&amp; startPoint)
+{
+    LayoutPoint referencePoint = startPoint;
+    
+    // FIXME: This needs to be adapted for different writing modes inside the flow thread.
+    RenderRegion* startRegion = regionAtBlockOffset(referencePoint.y());
+    if (startRegion) {
+        // Take into account the offset coordinates of the region.
+        RenderBoxModelObject* currObject = startRegion;
+        RenderBoxModelObject* currOffsetParent;
+        while ((currOffsetParent = currObject-&gt;offsetParent())) {
+            referencePoint.move(currObject-&gt;offsetLeft(), currObject-&gt;offsetTop());
+            
+            // Since we're looking for the offset relative to the body, we must also
+            // take into consideration the borders of the region's offsetParent.
+            if (currOffsetParent-&gt;isBox() &amp;&amp; !currOffsetParent-&gt;isBody())
+                referencePoint.move(toRenderBox(currOffsetParent)-&gt;borderLeft(), toRenderBox(currOffsetParent)-&gt;borderTop());
+            
+            currObject = currOffsetParent;
+        }
+        
+        // We need to check if any of this box's containing blocks start in a different region
+        // and if so, drop the object's top position (which was computed relative to its containing block
+        // and is no longer valid) and recompute it using the region in which it flows as reference.
+        bool wasComputedRelativeToOtherRegion = false;
+        const RenderBlock* objContainingBlock = boxModelObject.containingBlock();
+        while (objContainingBlock &amp;&amp; !objContainingBlock-&gt;isRenderNamedFlowThread()) {
+            // Check if this object is in a different region.
+            RenderRegion* parentStartRegion = 0;
+            RenderRegion* parentEndRegion = 0;
+            getRegionRangeForBox(objContainingBlock, parentStartRegion, parentEndRegion);
+            if (parentStartRegion &amp;&amp; parentStartRegion != startRegion) {
+                wasComputedRelativeToOtherRegion = true;
+                break;
+            }
+            objContainingBlock = objContainingBlock-&gt;containingBlock();
+        }
+        
+        if (wasComputedRelativeToOtherRegion) {
+            if (boxModelObject.isBox()) {
+                // Use borderBoxRectInRegion to account for variations such as percentage margins.
+                LayoutRect borderBoxRect = toRenderBox(&amp;boxModelObject)-&gt;borderBoxRectInRegion(startRegion, 0, RenderBox::DoNotCacheRenderBoxRegionInfo);
+                referencePoint.move(borderBoxRect.location().x(), 0);
+            }
+            
+            // Get the logical top coordinate of the current object.
+            LayoutUnit top = 0;
+            if (boxModelObject.isRenderBlock())
+                top = toRenderBlock(&amp;boxModelObject)-&gt;offsetFromLogicalTopOfFirstPage();
+            else {
+                if (boxModelObject.containingBlock())
+                    top = boxModelObject.containingBlock()-&gt;offsetFromLogicalTopOfFirstPage();
+                
+                if (boxModelObject.isBox())
+                    top += toRenderBox(&amp;boxModelObject)-&gt;topLeftLocation().y();
+                else if (boxModelObject.isRenderInline())
+                    top -= toRenderInline(&amp;boxModelObject)-&gt;borderTop();
+            }
+            
+            // Get the logical top of the region this object starts in
+            // and compute the object's top, relative to the region's top.
+            LayoutUnit regionLogicalTop = startRegion-&gt;pageLogicalTopForOffset(top);
+            LayoutUnit topRelativeToRegion = top - regionLogicalTop;
+            referencePoint.setY(startRegion-&gt;offsetTop() + topRelativeToRegion);
+            
+            // Since the top has been overriden, check if the
+            // relative/sticky positioning must be reconsidered.
+            if (boxModelObject.isRelPositioned())
+                referencePoint.move(0, boxModelObject.relativePositionOffset().height());
+            else if (boxModelObject.isStickyPositioned())
+                referencePoint.move(0, boxModelObject.stickyPositionOffset().height());
+        }
+        
+        // Since we're looking for the offset relative to the body, we must also
+        // take into consideration the borders of the region.
+        referencePoint.move(startRegion-&gt;borderLeft(), startRegion-&gt;borderTop());
+    }
+    
+    return referencePoint;
+}
</ins><span class="cx"> 
</span><span class="cx"> LayoutUnit RenderFlowThread::pageLogicalTopForOffset(LayoutUnit offset)
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderFlowThreadh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlowThread.h (150382 => 150383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderFlowThread.h        2013-05-20 21:17:59 UTC (rev 150382)
+++ trunk/Source/WebCore/rendering/RenderFlowThread.h        2013-05-20 21:38:37 UTC (rev 150383)
</span><span class="lines">@@ -95,6 +95,8 @@
</span><span class="cx">     void styleDidChange(StyleDifference, const RenderStyle* oldStyle);
</span><span class="cx"> 
</span><span class="cx">     void repaintRectangleInRegions(const LayoutRect&amp;, bool immediate) const;
</span><ins>+    
+    LayoutPoint adjustedPositionRelativeToOffsetParent(const RenderBoxModelObject&amp;, const LayoutPoint&amp;);
</ins><span class="cx"> 
</span><span class="cx">     LayoutUnit pageLogicalTopForOffset(LayoutUnit);
</span><span class="cx">     LayoutUnit pageLogicalWidthForOffset(LayoutUnit);
</span></span></pre>
</div>
</div>

</body>
</html>