fix(input): ensure input works as expected with page scale (#962)

This commit is contained in:
Dmitry Gozman 2020-02-12 16:13:21 -08:00 committed by GitHub
parent ee9748ba2f
commit 1d84f38e5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 2 deletions

View File

@ -10,7 +10,7 @@
"playwright": {
"chromium_revision": "740847",
"firefox_revision": "1028",
"webkit_revision": "1145"
"webkit_revision": "1146"
},
"scripts": {
"ctest": "cross-env BROWSER=chromium node test/test.js",

View File

@ -10,11 +10,15 @@
window.result = 'Was not clicked';
window.offsetX = undefined;
window.offsetY = undefined;
window.pageX = undefined;
window.pageY = undefined;
window.shiftKey = undefined;
document.querySelector('button').addEventListener('click', e => {
result = 'Clicked';
offsetX = e.offsetX;
offsetY = e.offsetY;
pageX = e.pageX;
pageY = e.pageY;
shiftKey = e.shiftKey;
}, false);
</script>

View File

@ -357,6 +357,26 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
expect(await page.evaluate(() => offsetX)).toBe(WEBKIT ? 1900 + 8 : 1900);
expect(await page.evaluate(() => offsetY)).toBe(WEBKIT ? 1910 + 8 : 1910);
});
it('should click the button with relative point with page scale', async({newPage, server}) => {
const page = await newPage({ viewport: { width: 400, height: 400, isMobile: true} });
await page.goto(server.PREFIX + '/input/button.html');
await page.$eval('button', button => {
button.style.borderWidth = '8px';
document.body.style.margin = '0';
});
await page.click('button', { relativePoint: { x: 20, y: 10 } });
expect(await page.evaluate(() => result)).toBe('Clicked');
let expected = { x: 28, y: 18 }; // 20;10 + 8px of border in each direction
if (WEBKIT) {
// WebKit rounds up during css -> dip -> css conversion.
expected = { x: 29, y: 19 };
} else if (CHROMIUM) {
// Chromium rounds down during css -> dip -> css conversion.
expected = { x: 27, y: 18 };
}
expect(await page.evaluate(() => pageX)).toBe(expected.x);
expect(await page.evaluate(() => pageY)).toBe(expected.y);
});
it('should update modifiers correctly', async({page, server}) => {
await page.goto(server.PREFIX + '/input/button.html');

View File

@ -68,7 +68,7 @@ module.exports.describe = function({testRunner, expect, FFOX, CHROMIUM, WEBKIT})
}, element);
expect(pwBoundingBox).toEqual(webBoundingBox);
});
it.skip(WEBKIT)('should work with page scale', async({newPage, server}) => {
it('should work with page scale', async({newPage, server}) => {
const page = await newPage({ viewport: { width: 400, height: 400, isMobile: true} });
await page.goto(server.PREFIX + '/input/button.html');
const button = await page.$('button');