diff --git a/integration_tests/specs/dom/nodes/element.ts b/integration_tests/specs/dom/nodes/element.ts index 5c8d80eb61..538d2e46f8 100644 --- a/integration_tests/specs/dom/nodes/element.ts +++ b/integration_tests/specs/dom/nodes/element.ts @@ -43,6 +43,39 @@ describe('DOM Element API', () => { expect(div.hasAttribute('foo')).toBeFalse(); }); + it('should work with scroll', () => { + const div = document.createElement('div'); + + div.style.width = div.style.height = '200px'; + div.style.padding = '10px'; + div.style.margin = '20px'; + div.style.backgroundColor = 'grey'; + div.style.overflow = 'scroll'; + document.body.appendChild(div); + + const scrollDiv = document.createElement('div'); + scrollDiv.style.width = '100px'; + scrollDiv.style.height = '1000px'; + div.appendChild(scrollDiv) + + const childDiv = document.createElement('div'); + childDiv.style.width = childDiv.style.height = '30px'; + childDiv.style.marginTop = '150px'; + childDiv.style.backgroundColor = 'yellow'; + scrollDiv.appendChild(childDiv); + + expect(JSON.parse(JSON.stringify(childDiv.getBoundingClientRect()))).toEqual({ + bottom: 210, height: 30, left: 30, right: 60, top: 180, width: 30, x: 30, y: 180 + } as any); + + div.scrollBy(0, 10); + + expect(JSON.parse(JSON.stringify(childDiv.getBoundingClientRect()))).toEqual({ + bottom: 200, height: 30, left: 30, right: 60, top: 170, width: 30, x: 30, y: 170 + } as any); + + }); + it('children should only contain elements', () => { let container = document.createElement('div'); let a = document.createElement('div'); diff --git a/webf/lib/src/css/positioned.dart b/webf/lib/src/css/positioned.dart index f90196b84d..0d0182a903 100644 --- a/webf/lib/src/css/positioned.dart +++ b/webf/lib/src/css/positioned.dart @@ -35,7 +35,7 @@ Offset _getPlaceholderToParentOffset(RenderPositionPlaceholder? placeholder, Ren Offset positionHolderScrollOffset = _getRenderPositionHolderScrollOffset(placeholder, parent) ?? Offset.zero; // Offset of positioned element should exclude scroll offset to its containing block. Offset toParentOffset = placeholder.getOffsetToAncestor(Offset.zero, parent, excludeScrollOffset: true); - Offset placeholderOffset = positionHolderScrollOffset + toParentOffset; + Offset placeholderOffset = -positionHolderScrollOffset + toParentOffset; return placeholderOffset; } diff --git a/webf/lib/src/rendering/box_model.dart b/webf/lib/src/rendering/box_model.dart index 243bbd9a3e..6337ca45f4 100644 --- a/webf/lib/src/rendering/box_model.dart +++ b/webf/lib/src/rendering/box_model.dart @@ -1059,6 +1059,8 @@ class RenderBoxModel extends RenderBox final BoxParentData childParentData = child.parentData! as BoxParentData; Offset offset = childParentData.offset; if (excludeScrollOffset) { + offset += Offset(scrollLeft, scrollTop); + } else { offset -= Offset(scrollLeft, scrollTop); } transform.translate(offset.dx, offset.dy);