Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Change to background-attachment: fixed

Browse source
This commit is contained in:
Yury Semikhatsky 2024-10-03 17:29:31 -07:00
parent db41e16180
commit ece7143b8f
3 changed files with 18 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
tests/assets/input/background-fixed.html Normal file
View file

@ -0,0 +1,16 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<style>
body {
background: #fff url("/pptr.png") no-repeat center 30px;
background-attachment: fixed;
margin-top: 36px;
}
</style>
</head>
<body>
<div style="height: 3000px; background-color: antiquewhite;">tall</div>
<button>Click me</button>
</body>

30
tests/assets/input/scrollable-accelerated.html
View file

@ -1,30 +0,0 @@
<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>

4
tests/library/browsercontext-viewport-mobile.spec.ts
View file

@ -188,14 +188,14 @@ it.describe('mobile viewport', () => {
await context.close(); 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' } annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31551' }
}, async ({ playwright, browser, server, browserName, isLinux, headless }) => { }, async ({ playwright, browser, server, browserName, isLinux, headless }) => {
it.fixme(browserName === 'webkit' && isLinux && headless, 'Fails on WPE apparently due to accelerated compositing + fixed layout'); it.fixme(browserName === 'webkit' && isLinux && headless, 'Fails on WPE apparently due to accelerated compositing + fixed layout');
const iPhone = playwright.devices['iPhone 12']; const iPhone = playwright.devices['iPhone 12'];
const context = await browser.newContext({ ...iPhone }); const context = await browser.newContext({ ...iPhone });
const page = await context.newPage(); 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(); await page.getByRole('button').click();
expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(1000); expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(1000);
await context.close(); await context.close();