diff --git a/tests/assets/input/scrollable-accelerated.html b/tests/assets/input/scrollable-accelerated.html
new file mode 100644
index 0000000000..5f19d148a9
--- /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 2e0f90ceb0..04f65e3952 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({