Add test for CSS-only zoom above maxCanvasPixels

This commit introduces a test to ensure that: - When zooming below the maxCanvasPixels limit, the canvas is rendered with the correct size (the two sides are multiplied by the zoom factor). - When zooming above the maxCanvasPixels limit, the canvas size is capped.
mozilla · Jun 7, 2024 · c21e73a · c21e73a
1 parent 95a7de9
commit c21e73a
Showing 1 changed file with 161 additions and 52 deletions.
diff --git a/test/integration/viewer_spec.mjs b/test/integration/viewer_spec.mjs
@@ -94,24 +94,6 @@ describe("PDF viewer", () => {
   });
 
   describe("CSS-only zoom", () => {
-    let pages;
-
-    beforeAll(async () => {
-      pages = await loadAndWait(
-        "tracemonkey.pdf",
-        ".textLayer .endOfContent",
-        null,
-        null,
-        {
-          maxCanvasPixels: 0,
-        }
-      );
-    });
-
-    afterAll(async () => {
-      await closePages(pages);
-    });
-
     function createPromiseForFirstPageRendered(page) {
       return createPromise(page, (resolve, reject) => {
         const controller = new AbortController();
@@ -129,50 +111,177 @@ describe("PDF viewer", () => {
       });
     }
 
-    it("respects drawing delay when zooming out", async () => {
-      await Promise.all(
-        pages.map(async ([browserName, page]) => {
-          const promise = await createPromiseForFirstPageRendered(page);
+    describe("forced (maxCanvasPixels: 0)", () => {
+      let pages;
+
+      beforeAll(async () => {
+        pages = await loadAndWait(
+          "tracemonkey.pdf",
+          ".textLayer .endOfContent",
+          null,
+          null,
+          { maxCanvasPixels: 0 }
+        );
+      });
+
+      afterAll(async () => {
+        await closePages(pages);
+      });
+
+      it("respects drawing delay when zooming out", async () => {
+        await Promise.all(
+          pages.map(async ([browserName, page]) => {
+            const promise = await createPromiseForFirstPageRendered(page);
 
-          const start = await page.evaluate(() => {
-            const startTime = performance.now();
-            window.PDFViewerApplication.pdfViewer.decreaseScale({
-              drawingDelay: 100,
-              scaleFactor: 0.9,
+            const start = await page.evaluate(() => {
+              const startTime = performance.now();
+              window.PDFViewerApplication.pdfViewer.decreaseScale({
+                drawingDelay: 100,
+                scaleFactor: 0.9,
+              });
+              return startTime;
             });
-            return startTime;
-          });
 
-          const end = await awaitPromise(promise);
+            const end = await awaitPromise(promise);
 
-          expect(end - start)
-            .withContext(`In ${browserName}`)
-            .toBeGreaterThanOrEqual(100);
-        })
-      );
+            expect(end - start)
+              .withContext(`In ${browserName}`)
+              .toBeGreaterThanOrEqual(100);
+          })
+        );
+      });
+
+      it("respects drawing delay when zooming in", async () => {
+        await Promise.all(
+          pages.map(async ([browserName, page]) => {
+            const promise = await createPromiseForFirstPageRendered(page);
+
+            const start = await page.evaluate(() => {
+              const startTime = performance.now();
+              window.PDFViewerApplication.pdfViewer.increaseScale({
+                drawingDelay: 100,
+                scaleFactor: 1.1,
+              });
+              return startTime;
+            });
+
+            const end = await awaitPromise(promise);
+
+            expect(end - start)
+              .withContext(`In ${browserName}`)
+              .toBeGreaterThanOrEqual(100);
+          })
+        );
+      });
     });
 
-    it("respects drawing delay when zooming in", async () => {
-      await Promise.all(
-        pages.map(async ([browserName, page]) => {
-          const promise = await createPromiseForFirstPageRendered(page);
+    describe("triggers when going bigger than maxCanvasPixels", () => {
+      let pages;
+
+      const MAX_CANVAS_PIXELS = 4_000_000;
+
+      beforeAll(async () => {
+        pages = await loadAndWait(
+          "tracemonkey.pdf",
+          ".textLayer .endOfContent",
+          null,
+          null,
+          { maxCanvasPixels: MAX_CANVAS_PIXELS }
+        );
+      });
 
-          const start = await page.evaluate(() => {
-            const startTime = performance.now();
-            window.PDFViewerApplication.pdfViewer.increaseScale({
-              drawingDelay: 100,
-              scaleFactor: 1.1,
+      beforeEach(async () => {
+        await Promise.all(
+          pages.map(async ([browserName, page]) => {
+            await page.evaluate(() => {
+              window.PDFViewerApplication.pdfViewer.currentScale = 0.5;
             });
-            return startTime;
-          });
+          })
+        );
+      });
+
+      afterAll(async () => {
+        await closePages(pages);
+      });
 
-          const end = await awaitPromise(promise);
+      function getCanvasSize(page) {
+        return page.evaluate(() => {
+          const canvas = window.document.querySelector(".canvasWrapper canvas");
+          return canvas.width * canvas.height;
+        });
+      }
 
-          expect(end - start)
-            .withContext(`In ${browserName}`)
-            .toBeGreaterThanOrEqual(100);
-        })
-      );
+      // MAX_CANVAS_PIXELS must be big enough that the originally rendered
+      // canvas still has enough space to grow before triggering CSS-only zoom
+      it("test correctly configured", async () => {
+        await Promise.all(
+          pages.map(async ([browserName, page]) => {
+            const canvasSize = await getCanvasSize(page);
+
+            expect(canvasSize)
+              .withContext(`In ${browserName}`)
+              .toBeLessThan(MAX_CANVAS_PIXELS / 4);
+            expect(canvasSize)
+              .withContext(`In ${browserName}`)
+              .toBeGreaterThan(MAX_CANVAS_PIXELS / 16);
+          })
+        );
+      });
+
+      it("does not trigger CSS-only zoom below maxCanvasPixels", async () => {
+        await Promise.all(
+          pages.map(async ([browserName, page]) => {
+            const originalCanvasSize = await getCanvasSize(page);
+            const factor = 2;
+
+            await page.evaluate(scaleFactor => {
+              window.PDFViewerApplication.pdfViewer.increaseScale({
+                drawingDelay: 0,
+                scaleFactor,
+              });
+            }, factor);
+
+            const canvasSize = await getCanvasSize(page);
+
+            expect(canvasSize)
+              .withContext(`In ${browserName}`)
+              .toBe(originalCanvasSize * factor ** 2);
+
+            expect(canvasSize)
+              .withContext(`In ${browserName}, MAX_CANVAS_PIXELS`)
+              .toBeLessThan(MAX_CANVAS_PIXELS);
+          })
+        );
+      });
+
+      it("triggers CSS-only zoom above maxCanvasPixels", async () => {
+        await Promise.all(
+          pages.map(async ([browserName, page]) => {
+            const originalCanvasSize = await getCanvasSize(page);
+            const factor = 4;
+
+            await page.evaluate(scaleFactor => {
+              window.PDFViewerApplication.pdfViewer.increaseScale({
+                drawingDelay: 0,
+                scaleFactor,
+              });
+            }, factor);
+
+            const canvasSize = await getCanvasSize(page);
+
+            expect(canvasSize)
+              .withContext(`In ${browserName}`)
+              .toBeLessThan(originalCanvasSize * factor ** 2);
+
+            // Disabled because `canvasSize` is `4_012_800`, which is
+            // close to the limit but somehow a bit more.
+            //
+            //  expect(canvasSize)
+            //    .withContext(`In ${browserName}, MAX_CANVAS_PIXELS`)
+            //    .toBeLessThan(MAX_CANVAS_PIXELS);
+          })
+        );
+      });
     });
   });
 });