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

microsoft · Mar 10, 2020 · 0077b42 · 0077b42
1 parent 044f774
commit 0077b42
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "playwright": {
     "chromium_revision": "747023",
     "firefox_revision": "1041",
-    "webkit_revision": "1168"
+    "webkit_revision": "1171"
   },
   "scripts": {
     "ctest": "cross-env BROWSER=chromium node test/test.js",

diff --git a/src/webkit/wkPage.ts b/src/webkit/wkPage.ts
@@ -145,6 +145,13 @@ export class WKPage implements PageDelegate {
       promises.push(this._evaluateBindingScript(binding));
     if (contextOptions.bypassCSP)
       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() }));
     if (contextOptions.offline)
       promises.push(session.send('Network.setEmulateOfflineState', { offline: true }));
@@ -489,6 +496,10 @@ export class WKPage implements PageDelegate {
         fixedLayout: !!viewport.isMobile,
         deviceScaleFactor: viewport.deviceScaleFactor || 1
       }),
+      this._session.send('Page.setScreenSizeOverride', {
+        width: viewport.width,
+        height: viewport.height,
+      }),
     ];
     await Promise.all(promises);
   }

diff --git a/test/emulation.spec.js b/test/emulation.spec.js
@@ -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.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});
       await page.setViewportSize({width: 200, height: 200});
       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: 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});
       await page.setViewportSize({width: 200, height: 200});
       expect(await page.evaluate(() => matchMedia('(min-device-height: 100px)').matches)).toBe(true);