From cfd40ae9e2c80f338044496ca52376b103f03b34 Mon Sep 17 00:00:00 2001 From: Corentin Gautier Date: Mon, 12 Dec 2022 10:07:33 +0100 Subject: [PATCH 1/2] Avoid paint on popovers --- .../url-popover/test/__snapshots__/index.js.snap | 6 +++--- packages/components/CHANGELOG.md | 2 ++ packages/components/src/popover/index.tsx | 11 +++++++++-- packages/components/src/popover/style.scss | 1 + .../dot-tip/test/__snapshots__/index.js.snap | 2 +- 5 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap index 12c09f2c7c98ab..c7ecbc209a2417 100644 --- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index d595c23ae274a9..790b840e6a648b 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -7,6 +7,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900; .components-popover { z-index: z-index(".components-popover"); + will-change: transform; &.is-expanded { position: fixed; diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap index 876bae4b690887..a453da0254b487 100644 --- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap +++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ exports[`DotTip should render correctly 1`] = ` aria-label="Editor tips" class="components-popover nux-dot-tip is-positioned" role="dialog" - style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0; left: 0px; top: 0px;" + style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;" tabindex="-1" >
Date: Mon, 12 Dec 2022 11:47:51 +0100 Subject: [PATCH 2/2] fix e2e test --- .../e2e/specs/editor/blocks/paragraph.spec.js | 122 ++++++++++++++---- 1 file changed, 94 insertions(+), 28 deletions(-) diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js index c713379569b90c..19c386cce457d9 100644 --- a/test/e2e/specs/editor/blocks/paragraph.spec.js +++ b/test/e2e/specs/editor/blocks/paragraph.spec.js @@ -195,8 +195,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -207,8 +211,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -219,8 +227,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -231,8 +243,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -309,8 +325,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } { @@ -321,8 +341,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } { @@ -333,8 +357,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } { @@ -345,8 +373,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } } ); @@ -387,8 +419,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -399,8 +435,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -411,8 +451,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( firstBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + firstBlockBox + ) + ) + .toBeTruthy(); } { @@ -423,8 +467,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } { @@ -435,8 +483,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } { @@ -447,8 +499,12 @@ test.describe( 'Paragraph', () => { ); await expect( draggingUtils.dropZone ).toBeVisible(); await expect - .poll( () => draggingUtils.dropZone.boundingBox() ) - .toEqual( secondBlockBox ); + .poll( () => + draggingUtils.confirmValidDropZonePosition( + secondBlockBox + ) + ) + .toBeTruthy(); } } ); } ); @@ -508,4 +564,14 @@ class DraggingUtils { await this.page.mouse.move( 0, 0 ); await this.page.mouse.down(); } + + async confirmValidDropZonePosition( element ) { + // Check that both x and y axis of the dropzone + // have a less than 1 difference with a given target element + const box = await this.dropZone.boundingBox(); + return ( + Math.abs( element.x - box.x ) < 1 && + Math.abs( element.y - box.y ) < 1 + ); + } }