fix: offsetTop and offsetLeft should relative to body element if no positioned parent found

integration_tests/specs/dom/nodes/offset.ts

@@ -47,4 +47,93 @@ describe('Offset api', () => {
 
     await snapshot();
   });
+
+  it('offsetTop and offsetLeft works when positioned parent found', async () => {
+    let item1;
+    let div1 = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          height: '100px',
+          backgroundColor: 'coral',
+        },
+      });
+    let div2 = createElement(
+      'div',
+      {
+        style: {
+          position: 'relative',
+          width: '100px',
+          height: '100px',
+          marginLeft: '100px',
+          backgroundColor: 'green',
+        },
+      },
+      [
+        (item1 = createElement('div', {
+          style: {
+            width: '50px',
+            height: '50px',
+            backgroundColor: 'yellow',
+          }
+        })),
+      ]
+    );
+
+    BODY.appendChild(div1);
+    BODY.appendChild(div2);
+
+    expect(item1.offsetTop).toBe(0);
+    expect(item1.offsetLeft).toBe(0);
+  });
+
+  it('offsetTop and offsetLeft works when positioned parent not found', async () => {
+    let item1;
+    let div1 = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          height: '100px',
+          backgroundColor: 'coral',
+        },
+      });
+    let div2 = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          height: '100px',
+          marginLeft: '100px',
+          backgroundColor: 'green',
+        },
+      },
+      [
+        (item1 = createElement('div', {
+          style: {
+            width: '50px',
+            height: '50px',
+            backgroundColor: 'yellow',
+          }
+        })),
+        (createElement('div', {
+          style: {
+            width: '50px',
+            height: '1000px',
+            backgroundColor: 'red',
+          }
+        })),
+      ]
+    );
+
+    BODY.appendChild(div1);
+    BODY.appendChild(div2);
+
+    document.documentElement.scrollTo(0, 80);
+
+    expect(item1.offsetTop).toBe(100);
+    expect(item1.offsetLeft).toBe(100);
+  });
+
 });

kraken/lib/src/devtools/modules/page.dart

@@ -250,8 +250,8 @@ class InspectPageModule extends UIInspectorModule {
             1,
             document.viewport.viewportSize.width,
             document.viewport.viewportSize.height,
-            root.getOffsetX(),
-            root.getOffsetY(),
+            root.offsetLeft,
+            root.offsetTop,
             timestamp: timeStamp.inMilliseconds,
           ),
           _lastSentSessionID!));

kraken/lib/src/dom/element.dart

@@ -1400,6 +1400,9 @@ class Element extends Node
     style.removeProperty(property, true);
   }
 
+  // The Element.getBoundingClientRect() method returns a DOMRect object providing information
+  // about the size of an element and its position relative to the viewport.
+  // https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect
   BoundingClientRect get boundingClientRect {
     BoundingClientRect boundingClientRect = BoundingClientRect(0, 0, 0, 0, 0, 0, 0, 0);
     if (isRendererAttached) {
@@ -1411,7 +1414,7 @@ class Element extends Node
       }
 
       if (sizedBox.hasSize) {
-        Offset offset = getOffset(sizedBox);
+        Offset offset = getOffset(sizedBox, ancestor: ownerDocument.documentElement);
         Size size = sizedBox.size;
         boundingClientRect = BoundingClientRect(
           offset.dx,
@@ -1428,33 +1431,67 @@ class Element extends Node
     return boundingClientRect;
   }
 
-  double getOffsetX() {
+  // The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner
+  // of the current element is offset to the left within the HTMLElement.offsetParent node.
+  // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetleft
+  double get offsetLeft {
     double offset = 0;
     RenderBoxModel selfRenderBoxModel = renderBoxModel!;
     if (selfRenderBoxModel.attached) {
-      Offset relative = getOffset(selfRenderBoxModel);
+      Offset relative = getOffset(selfRenderBoxModel, ancestor: offsetParent);
       offset += relative.dx;
     }
     return offset;
   }
 
-  double getOffsetY() {
+  // The HTMLElement.offsetTop read-only property returns the distance of the outer border
+  // of the current element relative to the inner border of the top of the offsetParent node.
+  // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
+  double get offsetTop {
     double offset = 0;
     RenderBoxModel selfRenderBoxModel = renderBoxModel!;
     if (selfRenderBoxModel.attached) {
-      Offset relative = getOffset(selfRenderBoxModel);
+      Offset relative = getOffset(selfRenderBoxModel, ancestor: offsetParent);
       offset += relative.dy;
     }
     return offset;
   }
 
-  Offset getOffset(RenderBox renderBox) {
+  // The HTMLElement.offsetParent read-only property returns a reference to the element
+  // which is the closest (nearest in the containment hierarchy) positioned ancestor element.
+  //  https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetparent
+  Element? get offsetParent {
+    // Returns null in the following cases.
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+    if (renderStyle.display == CSSDisplay.none
+      || renderStyle.position == CSSPositionType.fixed
+      || this is BodyElement
+      || this == ownerDocument.documentElement) {
+      return null;
+    }
+
+    Element? parent = parentElement;
+
+    while (parent != null) {
+      bool isNonStatic = parent.renderStyle.position != CSSPositionType.static;
+      if (parent is BodyElement || isNonStatic) {
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  // Get the offset of current element relative to specified ancestor element.
+  Offset getOffset(RenderBox renderBox, { Element? ancestor }) {
     // Need to flush layout to get correct size.
     ownerDocument.documentElement!.renderBoxModel!.owner!.flushLayout();
 
-    Element? element = _findContainingBlock(this, ownerDocument.documentElement!);
-    element ??= ownerDocument.documentElement!;
-    return renderBox.localToGlobal(Offset.zero, ancestor: element.renderBoxModel);
+    // Returns (0, 0) when ancestor is null.
+    if (ancestor == null) {
+      return Offset(0, 0);
+    }
+    return renderBox.localToGlobal(Offset.zero, ancestor: ancestor.renderBoxModel);
   }
 
   void _ensureEventResponderBound() {

kraken/lib/src/dom/element_view.dart

@@ -69,9 +69,9 @@ mixin ElementViewMixin on ElementBase {
     ViewModuleProperty kind = ViewModuleProperty.values[property];
     switch(kind) {
       case ViewModuleProperty.offsetTop:
-        return element.getOffsetY();
+        return element.offsetTop;
       case ViewModuleProperty.offsetLeft:
-        return element.getOffsetX();
+        return element.offsetLeft;
       case ViewModuleProperty.offsetWidth:
         return elementRenderBoxModel.hasSize ? elementRenderBoxModel.size.width : 0;
       case ViewModuleProperty.offsetHeight: