feat(webkit): emulate device size (#1318)

This commit is contained in:
Pavel Feldman 2020-03-10 13:16:33 -07:00 committed by GitHub
parent 044f774458
commit 0077b428fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 3 deletions

View file

@ -10,7 +10,7 @@
"playwright": { "playwright": {
"chromium_revision": "747023", "chromium_revision": "747023",
"firefox_revision": "1041", "firefox_revision": "1041",
"webkit_revision": "1168" "webkit_revision": "1171"
}, },
"scripts": { "scripts": {
"ctest": "cross-env BROWSER=chromium node test/test.js", "ctest": "cross-env BROWSER=chromium node test/test.js",

View file

@ -145,6 +145,13 @@ export class WKPage implements PageDelegate {
promises.push(this._evaluateBindingScript(binding)); promises.push(this._evaluateBindingScript(binding));
if (contextOptions.bypassCSP) if (contextOptions.bypassCSP)
promises.push(session.send('Page.setBypassCSP', { enabled: true })); promises.push(session.send('Page.setBypassCSP', { enabled: true }));
if (this._page._state.viewportSize) {
promises.push(session.send('Page.setScreenSizeOverride', {
width: this._page._state.viewportSize.width,
height: this._page._state.viewportSize.height,
}));
}
promises.push(session.send('Network.setExtraHTTPHeaders', { headers: this._calculateExtraHTTPHeaders() })); promises.push(session.send('Network.setExtraHTTPHeaders', { headers: this._calculateExtraHTTPHeaders() }));
if (contextOptions.offline) if (contextOptions.offline)
promises.push(session.send('Network.setEmulateOfflineState', { offline: true })); promises.push(session.send('Network.setEmulateOfflineState', { offline: true }));
@ -489,6 +496,10 @@ export class WKPage implements PageDelegate {
fixedLayout: !!viewport.isMobile, fixedLayout: !!viewport.isMobile,
deviceScaleFactor: viewport.deviceScaleFactor || 1 deviceScaleFactor: viewport.deviceScaleFactor || 1
}), }),
this._session.send('Page.setScreenSizeOverride', {
width: viewport.width,
height: viewport.height,
}),
]; ];
await Promise.all(promises); await Promise.all(promises);
} }

View file

@ -38,7 +38,7 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF
expect(await page.evaluate(() => window.innerWidth)).toBe(123); expect(await page.evaluate(() => window.innerWidth)).toBe(123);
expect(await page.evaluate(() => window.innerHeight)).toBe(456); expect(await page.evaluate(() => window.innerHeight)).toBe(456);
}); });
it.fail(WEBKIT || FFOX)('should emulate device-width media queries', async({page, server}) => { it.fail(FFOX)('should emulate device-width media queries', async({page, server}) => {
expect(page.viewportSize()).toEqual({width: 1280, height: 720}); expect(page.viewportSize()).toEqual({width: 1280, height: 720});
await page.setViewportSize({width: 200, height: 200}); await page.setViewportSize({width: 200, height: 200});
expect(await page.evaluate(() => matchMedia('(min-device-width: 100px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(min-device-width: 100px)').matches)).toBe(true);
@ -55,7 +55,7 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF
expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(false);
expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(true);
}); });
it.fail(WEBKIT || FFOX)('should emulate device-height media queries', async({page, server}) => { it.fail(FFOX)('should emulate device-height media queries', async({page, server}) => {
expect(page.viewportSize()).toEqual({width: 1280, height: 720}); expect(page.viewportSize()).toEqual({width: 1280, height: 720});
await page.setViewportSize({width: 200, height: 200}); await page.setViewportSize({width: 200, height: 200});
expect(await page.evaluate(() => matchMedia('(min-device-height: 100px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(min-device-height: 100px)').matches)).toBe(true);