diff --git a/src/chromium/crPage.ts b/src/chromium/crPage.ts index bf7b1ba9a3..e9885ede93 100644 --- a/src/chromium/crPage.ts +++ b/src/chromium/crPage.ts @@ -360,6 +360,8 @@ export class CRPage implements PageDelegate { mobile: !!viewport.isMobile, width: viewport.width, height: viewport.height, + screenWidth: viewport.width, + screenHeight: viewport.height, deviceScaleFactor: viewport.deviceScaleFactor || 1, screenOrientation: isLandscape ? { angle: 90, type: 'landscapePrimary' } : { angle: 0, type: 'portraitPrimary' }, }), diff --git a/test/emulation.spec.js b/test/emulation.spec.js index 8cb49389be..b67ea2175e 100644 --- a/test/emulation.spec.js +++ b/test/emulation.spec.js @@ -38,10 +38,39 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF expect(await page.evaluate(() => window.innerWidth)).toBe(123); expect(await page.evaluate(() => window.innerHeight)).toBe(456); }); - xit('should emulate *-device-width media queries', async({page, server}) => { + it.fail(WEBKIT || FFOX)('should emulate device-width media queries', async({page, server}) => { expect(page.viewportSize()).toEqual({width: 1280, height: 720}); - await page.setViewportSize({width: 1800, height: 456}); - expect(await page.evaluate(() => matchMedia('(min-device-width: 1800px)').matches)).toBe(true); + 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: 300px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-width: 100px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-width: 300px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(true); + await page.setViewportSize({width: 500, height: 500}); + expect(await page.evaluate(() => matchMedia('(min-device-width: 400px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(min-device-width: 600px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-width: 400px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-width: 600px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(true); + }); + it.fail(WEBKIT || FFOX)('should emulate device-height media queries', async({page, server}) => { + expect(page.viewportSize()).toEqual({width: 1280, height: 720}); + 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: 300px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-height: 100px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-height: 300px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(device-height: 500px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(device-height: 200px)').matches)).toBe(true); + await page.setViewportSize({width: 500, height: 500}); + expect(await page.evaluate(() => matchMedia('(min-device-height: 400px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(min-device-height: 600px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-height: 400px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-height: 600px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(device-height: 200px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(device-height: 500px)').matches)).toBe(true); }); it('should not have touch by default', async({page, server}) => { await page.goto(server.PREFIX + '/mobile.html');