feat(firefox): emulate device size (#1565)

microsoft · Mar 27, 2020 · 72ae3a9 · 72ae3a9
1 parent 3535a82
commit 72ae3a9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "main": "index.js",
   "playwright": {
     "chromium_revision": "751710",
-    "firefox_revision": "1061",
+    "firefox_revision": "1062",
     "webkit_revision": "1182"
   },
   "scripts": {

diff --git a/test/emulation.spec.js b/test/emulation.spec.js
@@ -38,33 +38,37 @@ 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);
     });
-    it.fail(FFOX)('should emulate device-width media queries', async({page, server}) => {
+    it('should emulate device width', async({page, server}) => {
       expect(page.viewportSize()).toEqual({width: 1280, height: 720});
       await page.setViewportSize({width: 200, height: 200});
+      expect(await page.evaluate(() => window.screen.width)).toBe(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(() => window.screen.width)).toBe(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(FFOX)('should emulate device-height media queries', async({page, server}) => {
+    it('should emulate device height', async({page, server}) => {
       expect(page.viewportSize()).toEqual({width: 1280, height: 720});
       await page.setViewportSize({width: 200, height: 200});
+      expect(await page.evaluate(() => window.screen.height)).toBe(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(() => window.screen.height)).toBe(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);