test: scroll on mobile viewport with accelerated compositing

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

Hide file tree

Showing 2 changed files with 42 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,18 @@ 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 }) => {
+    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({