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

References #1291
microsoft · Mar 9, 2020 · e650628 · e650628
1 parent a61d066
commit e650628
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git 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
@@ -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');