From db41e161803e189dcd24c4eaf5e0eb169e8e964a Mon Sep 17 00:00:00 2001 From: Yury Semikhatsky Date: Fri, 2 Aug 2024 17:53:54 -0700 Subject: [PATCH 1/3] test: scroll on mobile viewport with accelerated compositing Reference: https://github.com/microsoft/playwright/issues/31551 --- .../assets/input/scrollable-accelerated.html | 30 +++++++++++++++++++ .../browsercontext-viewport-mobile.spec.ts | 13 ++++++++ 2 files changed, 43 insertions(+) create mode 100644 tests/assets/input/scrollable-accelerated.html diff --git a/tests/assets/input/scrollable-accelerated.html b/tests/assets/input/scrollable-accelerated.html new file mode 100644 index 0000000000000..5f19d148a9607 --- /dev/null +++ b/tests/assets/input/scrollable-accelerated.html @@ -0,0 +1,30 @@ + + + + + +
Header
+
+
+ +
+ diff --git a/tests/library/browsercontext-viewport-mobile.spec.ts b/tests/library/browsercontext-viewport-mobile.spec.ts index 2e0f90ceb09ca..04f65e3952e53 100644 --- a/tests/library/browsercontext-viewport-mobile.spec.ts +++ b/tests/library/browsercontext-viewport-mobile.spec.ts @@ -188,6 +188,19 @@ it.describe('mobile viewport', () => { await context.close(); }); + it('should scroll when accelerating compositing needed', { + annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31551' } + }, async ({ playwright, browser, server, browserName, isLinux, headless }) => { + it.fixme(browserName === 'webkit' && isLinux && headless, 'Fails on WPE apparently due to accelerated compositing + fixed layout'); + const iPhone = playwright.devices['iPhone 12']; + const context = await browser.newContext({ ...iPhone }); + const page = await context.newPage(); + await page.goto(server.PREFIX + '/input/scrollable-accelerated.html'); + await page.getByRole('button').click(); + expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(1000); + await context.close(); + }); + it('view scale should reset after navigation', async ({ browser, browserName }) => { it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/26876' }); const context = await browser.newContext({ From ece7143b8faaae2bcff68331b6256d3085ea2456 Mon Sep 17 00:00:00 2001 From: Yury Semikhatsky Date: Thu, 3 Oct 2024 17:29:31 -0700 Subject: [PATCH 2/3] Change to background-attachment: fixed --- tests/assets/input/background-fixed.html | 16 ++++++++++ .../assets/input/scrollable-accelerated.html | 30 ------------------- .../browsercontext-viewport-mobile.spec.ts | 4 +-- 3 files changed, 18 insertions(+), 32 deletions(-) create mode 100644 tests/assets/input/background-fixed.html delete mode 100644 tests/assets/input/scrollable-accelerated.html diff --git a/tests/assets/input/background-fixed.html b/tests/assets/input/background-fixed.html new file mode 100644 index 0000000000000..5093939a5baaa --- /dev/null +++ b/tests/assets/input/background-fixed.html @@ -0,0 +1,16 @@ + + + + + +
tall
+ + diff --git a/tests/assets/input/scrollable-accelerated.html b/tests/assets/input/scrollable-accelerated.html deleted file mode 100644 index 5f19d148a9607..0000000000000 --- a/tests/assets/input/scrollable-accelerated.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - -
Header
-
-
- -
- diff --git a/tests/library/browsercontext-viewport-mobile.spec.ts b/tests/library/browsercontext-viewport-mobile.spec.ts index 04f65e3952e53..ba1c18d5b0c72 100644 --- a/tests/library/browsercontext-viewport-mobile.spec.ts +++ b/tests/library/browsercontext-viewport-mobile.spec.ts @@ -188,14 +188,14 @@ it.describe('mobile viewport', () => { await context.close(); }); - it('should scroll when accelerating compositing needed', { + it('should scroll mobile page with background-attachment: fixed', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31551' } }, async ({ playwright, browser, server, browserName, isLinux, headless }) => { it.fixme(browserName === 'webkit' && isLinux && headless, 'Fails on WPE apparently due to accelerated compositing + fixed layout'); const iPhone = playwright.devices['iPhone 12']; const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); - await page.goto(server.PREFIX + '/input/scrollable-accelerated.html'); + await page.goto(server.PREFIX + '/input/background-fixed.html'); await page.getByRole('button').click(); expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(1000); await context.close(); From 5cf3c57f64a1eb9a1e874a8b9958be2b5a8e1b85 Mon Sep 17 00:00:00 2001 From: Yury Semikhatsky Date: Thu, 3 Oct 2024 17:32:14 -0700 Subject: [PATCH 3/3] Add another issue ref --- tests/library/browsercontext-viewport-mobile.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/tests/library/browsercontext-viewport-mobile.spec.ts b/tests/library/browsercontext-viewport-mobile.spec.ts index ba1c18d5b0c72..ed774e383a568 100644 --- a/tests/library/browsercontext-viewport-mobile.spec.ts +++ b/tests/library/browsercontext-viewport-mobile.spec.ts @@ -189,7 +189,10 @@ it.describe('mobile viewport', () => { }); it('should scroll mobile page with background-attachment: fixed', { - annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31551' } + annotation: [ + { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31551' }, + { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23573' }, + ] }, async ({ playwright, browser, server, browserName, isLinux, headless }) => { it.fixme(browserName === 'webkit' && isLinux && headless, 'Fails on WPE apparently due to accelerated compositing + fixed layout'); const iPhone = playwright.devices['iPhone 12'];