test: scroll on mobile viewport with accelerated compositing

Reference: #31551
microsoft · Aug 3, 2024 · 2cb1fc3 · 2cb1fc3
1 parent d0c840f
commit 2cb1fc3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/tests/assets/input/scrollable-accelerated.html b/tests/assets/input/scrollable-accelerated.html
@@ -0,0 +1,30 @@
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
+<style>
+
+.transformed {
+ width: 60px;
+ height: 60px;
+ transform: perspective(500px) translate3d(500px, 0, 0px);
+ background-color: pink;
+}
+
+.top {
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 50px;
+ background-color: lightblue;
+}
+
+</style>
+</head>
+<body>
+ <div class="top">Header</div>
+ <div style="height: 3000px; background-color: antiquewhite;">
+ </div>
+ <button>Click me</button>
+ <div class="transformed"></div>
+</body>
diff --git a/tests/library/browsercontext-viewport-mobile.spec.ts b/tests/library/browsercontext-viewport-mobile.spec.ts
@@ -190,6 +190,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({