feat: window props

QwikDev · Oct 21, 2021 · ccbb8ad · ccbb8ad · vercel · Oct 21, 2021
1 parent 93cc07c
commit ccbb8ad
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/lib/web-worker/worker-environment.ts b/src/lib/web-worker/worker-environment.ts
@@ -130,7 +130,8 @@ export const createEnvironment = ({
     const windowFunctionWhiteList =
       'addEventListener,removeEventListener,dispatchEvent,postMessage'.split(',');
 
-    const windowPropertyWhiteList = 'onmessage,onload,onerror'.split(',');
+    const windowPropertyWhiteList =
+      'devicePixelRatio,innerHeight,innerWidth,onmessage,onload,onerror'.split(',');
 
     const initWindowInstance = (win: any) => {
       win[WinIdKey] = $winId$;

diff --git a/tests/platform/window/index.html b/tests/platform/window/index.html
@@ -149,8 +149,10 @@ <h1>Window</h1>
           (function () {
             const b = document.getElementById('testBtoa');
             const a = document.getElementById('testAtob');
-            b.textContent = window.btoa('88');
-            a.textContent = atob(b.textContent);
+            const v1 = window.btoa('88');
+            const v2 = atob(v1);
+            b.textContent = v1;
+            a.textContent = v2;
           })();
         </script>
       </li>
@@ -375,6 +377,38 @@ <h1>Window</h1>
         </script>
       </li>
 
+      <li>
+        <strong>innerWidth/Height</strong>
+        <code>
+          <span id="testInnerWidthHeight"></span>
+        </code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testInnerWidthHeight');
+            if (typeof window.innerWidth === 'number' && typeof window.innerWidth === 'number') {
+              elm.textContent = window.innerWidth + 'x' + window.innerHeight;
+            }
+            elm.className = 'testInnerWidthHeight';
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>devicePixelRatio</strong>
+        <code>
+          <span id="testDevicePixelRatio"></span>
+        </code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testDevicePixelRatio');
+            if (typeof window.devicePixelRatio === 'number') {
+              elm.textContent = window.devicePixelRatio;
+            }
+            elm.className = 'testDevicePixelRatio';
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');

diff --git a/tests/platform/window/window.spec.ts b/tests/platform/window/window.spec.ts
@@ -79,4 +79,10 @@ test('window', async ({ page }) => {
 
   const testFrameElement = page.locator('#testFrameElement');
   await expect(testFrameElement).toHaveText('null');
+
+  const testInnerWidthHeight = page.locator('#testInnerWidthHeight');
+  await expect(testInnerWidthHeight).not.toHaveText('');
+
+  const testDevicePixelRatio = page.locator('#testDevicePixelRatio');
+  await expect(testDevicePixelRatio).not.toHaveText('');
 });