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

fix(chromium): fix device-related media queries (#1299)

Browse source 
References #1291
This commit is contained in:
Andrey Lushnikov 2020-03-09 15:53:31 -07:00 committed by GitHub
parent a61d0660a1
commit e650628e3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/chromium/crPage.ts
View file

@ -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' },
}),

35
test/emulation.spec.js
View file

@ -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');