test: add tests for device pixel ratio (#11690)

2024-06-14 14:02:48 +00:00 · 2024-01-16 08:55:25 +01:00 · 2024-01-16 08:55:25 +01:00 · 8b71db7fa7
commit 8b71db7fa7
parent 67feac95c9
9 changed files with 81 additions and 0 deletions
--- a/test/assets/picture.html
+++ b/test/assets/picture.html
@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<img
+  srcset="logo-1x.png, logo-2x.png 2x, logo-3x.png 3x"
+  src="logo-1x.png"
+  height="320"
+  width="320" />
--- a/test/assets/resolution.html
+++ b/test/assets/resolution.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+  p {
+    color: transparent;
+  }
+  @media (resolution: 1dppx) {
+    p {
+      font-size: 1px;
+    }
+  }
+  @media (resolution: 2dppx) {
+    p {
+      font-size: 2px;
+    }
+  }
+  @media (resolution: 3dppx) {
+    p {
+      font-size: 3px;
+    }
+  }
+  </style>
+  <p>Test</p>
+  
--- a/test/golden-chrome/device-pixel-ratio1.png
+++ b/test/golden-chrome/device-pixel-ratio1.png
--- a/test/golden-chrome/device-pixel-ratio2.png
+++ b/test/golden-chrome/device-pixel-ratio2.png
--- a/test/golden-chrome/device-pixel-ratio3.png
+++ b/test/golden-chrome/device-pixel-ratio3.png
--- a/test/golden-firefox/device-pixel-ratio1.png
+++ b/test/golden-firefox/device-pixel-ratio1.png
--- a/test/golden-firefox/device-pixel-ratio2.png
+++ b/test/golden-firefox/device-pixel-ratio2.png
--- a/test/golden-firefox/device-pixel-ratio3.png
+++ b/test/golden-firefox/device-pixel-ratio3.png
--- a/test/src/emulation.spec.ts
+++ b/test/src/emulation.spec.ts
@ -133,6 +133,58 @@ describe('Emulation', () => {
        })
      ).toBe('portrait-primary');
    });
+    it('should update media queries when resoltion changes', async () => {
+      const {page, server} = await getTestState();
+
+      async function getFontSize() {
+        return await page.evaluate(() => {
+          return parseInt(
+            window.getComputedStyle(document.querySelector('p')!).fontSize,
+            10
+          );
+        });
+      }
+
+      for (const dpr of [1, 2, 3]) {
+        await page.setViewport({
+          width: 800,
+          height: 600,
+          deviceScaleFactor: dpr,
+        });
+
+        await page.goto(server.PREFIX + '/resolution.html');
+
+        await expect(getFontSize()).resolves.toEqual(dpr);
+
+        const screenshot = await page.screenshot({
+          fullPage: false,
+        });
+        expect(screenshot).toBeGolden(`device-pixel-ratio${dpr}.png`);
+      }
+    });
+    it('should load correct pictures when emulation dpr', async () => {
+      const {page, server} = await getTestState();
+
+      async function getCurrentSrc() {
+        return await page.evaluate(() => {
+          return document.querySelector('img')!.currentSrc;
+        });
+      }
+
+      for (const dpr of [1, 2, 3]) {
+        await page.setViewport({
+          width: 800,
+          height: 600,
+          deviceScaleFactor: dpr,
+        });
+
+        await page.goto(server.PREFIX + '/picture.html');
+
+        await expect(getCurrentSrc()).resolves.toMatch(
+          new RegExp(`logo-${dpr}x.png`)
+        );
+      }
+    });
  });

  describe('Page.emulate', function () {