From 14cfae79727fef5be01c08cead253a29cc36b045 Mon Sep 17 00:00:00 2001 From: pba-cra Date: Wed, 27 Jul 2022 10:26:36 +0800 Subject: [PATCH 1/4] fix(applyLayoutTransform): fix calculate matrix not include scrollLef --- integration_tests/specs/dom/nodes/element.ts | 42 ++++++++++++++++++++ webf/lib/src/css/positioned.dart | 2 +- webf/lib/src/rendering/box_model.dart | 2 + 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/integration_tests/specs/dom/nodes/element.ts b/integration_tests/specs/dom/nodes/element.ts index 5c8d80eb61..2c152258fc 100644 --- a/integration_tests/specs/dom/nodes/element.ts +++ b/integration_tests/specs/dom/nodes/element.ts @@ -43,6 +43,48 @@ describe('DOM Element API', () => { expect(div.hasAttribute('foo')).toBeFalse(); }); + it('should work', () => { + 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); + + + const boundingClientRect = div.getBoundingClientRect(); + expect(JSON.parse(JSON.stringify(boundingClientRect))).toEqual({ + x: 20.0, + y: 20.0, + width: 200.0, + height: 200.0, + top: 20.0, + left: 20.0, + right: 220.0, + bottom: 220.0, + } as any); + + div.setAttribute('foo', 'bar'); + expect(div.getAttribute('foo')).toBe('bar'); + expect(div.hasAttribute('foo')).toBeTrue(); + + div.removeAttribute('foo'); + expect(div.hasAttribute('foo')).toBeFalse(); + }); + 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 b2f2835567..4758f6a2ba 100644 --- a/webf/lib/src/css/positioned.dart +++ b/webf/lib/src/css/positioned.dart @@ -34,7 +34,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 0253842e86..246e2c3ba0 100644 --- a/webf/lib/src/rendering/box_model.dart +++ b/webf/lib/src/rendering/box_model.dart @@ -1092,6 +1092,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); From 87f90ec12b82cb7b9bc5b1b462c8d10431138584 Mon Sep 17 00:00:00 2001 From: pba-cra Date: Wed, 27 Jul 2022 10:30:51 +0800 Subject: [PATCH 2/4] test(getBoundingClientRect): change test case for applyLayoutTransform --- integration_tests/specs/dom/nodes/element.ts | 73 +++++++++----------- 1 file changed, 32 insertions(+), 41 deletions(-) diff --git a/integration_tests/specs/dom/nodes/element.ts b/integration_tests/specs/dom/nodes/element.ts index 2c152258fc..30136b7d75 100644 --- a/integration_tests/specs/dom/nodes/element.ts +++ b/integration_tests/specs/dom/nodes/element.ts @@ -43,47 +43,38 @@ describe('DOM Element API', () => { expect(div.hasAttribute('foo')).toBeFalse(); }); - it('should work', () => { - 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); - - - const boundingClientRect = div.getBoundingClientRect(); - expect(JSON.parse(JSON.stringify(boundingClientRect))).toEqual({ - x: 20.0, - y: 20.0, - width: 200.0, - height: 200.0, - top: 20.0, - left: 20.0, - right: 220.0, - bottom: 220.0, - } as any); - - div.setAttribute('foo', 'bar'); - expect(div.getAttribute('foo')).toBe('bar'); - expect(div.hasAttribute('foo')).toBeTrue(); - - div.removeAttribute('foo'); - expect(div.hasAttribute('foo')).toBeFalse(); - }); + it('should work', () => { + 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: 180, width: 30, x: 30, y: 180 + } as any); + + }); it('children should only contain elements', () => { let container = document.createElement('div'); From 9d70b796af617203801b571e1170f09fd5e871ef Mon Sep 17 00:00:00 2001 From: pba-cra Date: Thu, 28 Jul 2022 09:35:59 +0800 Subject: [PATCH 3/4] test(element): update element test name --- integration_tests/specs/dom/nodes/element.ts | 64 ++++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/integration_tests/specs/dom/nodes/element.ts b/integration_tests/specs/dom/nodes/element.ts index 30136b7d75..bb7d021b23 100644 --- a/integration_tests/specs/dom/nodes/element.ts +++ b/integration_tests/specs/dom/nodes/element.ts @@ -43,38 +43,38 @@ describe('DOM Element API', () => { expect(div.hasAttribute('foo')).toBeFalse(); }); - it('should work', () => { - 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: 180, width: 30, x: 30, y: 180 - } as any); - - }); + 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: 180, width: 30, x: 30, y: 180 + } as any); + + }); it('children should only contain elements', () => { let container = document.createElement('div'); From b4f1ab3add27157ebbbe5ac2b1a65e392eff0c80 Mon Sep 17 00:00:00 2001 From: pba-cra Date: Mon, 15 Aug 2022 09:33:46 +0800 Subject: [PATCH 4/4] test(error): change test result error --- integration_tests/specs/dom/nodes/element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration_tests/specs/dom/nodes/element.ts b/integration_tests/specs/dom/nodes/element.ts index bb7d021b23..538d2e46f8 100644 --- a/integration_tests/specs/dom/nodes/element.ts +++ b/integration_tests/specs/dom/nodes/element.ts @@ -71,7 +71,7 @@ describe('DOM Element API', () => { div.scrollBy(0, 10); expect(JSON.parse(JSON.stringify(childDiv.getBoundingClientRect()))).toEqual({ - bottom: 200, height: 30, left: 30, right: 60, top: 180, width: 30, x: 30, y: 180 + bottom: 200, height: 30, left: 30, right: 60, top: 170, width: 30, x: 30, y: 170 } as any); });