Respect maxCanvasPixels when computing camvas dimensions

Ensure that we never round the canvas dimensions above `maxCanvasPixels`
by rounding them to the preceeding multiple of the display ratio rather
than the succeeding one.

test/integration/viewer_spec.mjs

@@ -273,12 +273,13 @@ describe("PDF viewer", () => {
               .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);
+            expect(canvasSize)
+              .withContext(`In ${browserName}, <= MAX_CANVAS_PIXELS`)
+              .toBeLessThanOrEqual(MAX_CANVAS_PIXELS);
+
+            expect(canvasSize)
+              .withContext(`In ${browserName}, > MAX_CANVAS_PIXELS * 0.99`)
+              .toBeGreaterThan(MAX_CANVAS_PIXELS * 0.99);
           })
         );
       });

web/pdf_page_view.js

@@ -36,7 +36,7 @@ import {
   DEFAULT_SCALE,
   OutputScale,
   RenderingStates,
-  roundToDivide,
+  floorToDivide,
   TextLayerMode,
 } from "./ui_utils.js";
 import { AnnotationEditorLayerBuilder } from "./annotation_editor_layer_builder.js";
@@ -1025,11 +1025,11 @@ class PDFPageView {
     const sfx = approximateFraction(outputScale.sx);
     const sfy = approximateFraction(outputScale.sy);
 
-    canvas.width = roundToDivide(width * outputScale.sx, sfx[0]);
-    canvas.height = roundToDivide(height * outputScale.sy, sfy[0]);
+    canvas.width = floorToDivide(width * outputScale.sx, sfx[0]);
+    canvas.height = floorToDivide(height * outputScale.sy, sfy[0]);
     const { style } = canvas;
-    style.width = roundToDivide(width, sfx[1]) + "px";
-    style.height = roundToDivide(height, sfy[1]) + "px";
+    style.width = floorToDivide(width, sfx[1]) + "px";
+    style.height = floorToDivide(height, sfy[1]) + "px";
 
     // Add the viewport so it's known what it was originally drawn with.
     this.#viewportMap.set(canvas, viewport);

web/ui_utils.js

@@ -258,10 +258,11 @@ function binarySearchFirstItem(items, condition, start = 0) {
  *  Approximates float number as a fraction using Farey sequence (max order
  *  of 8).
  *  @param {number} x - Positive float number.
+ *  @param {boolean} forceLower - If true, returns a franction that is always lower than x.
  *  @returns {Array} Estimated fraction: the first array item is a numerator,
- *                   the second one is a denominator.
+ *                   the second one is a denominator. They are both natural numbers.
  */
-function approximateFraction(x) {
+function approximateFraction(x, forceLower) {
   // Fast paths for int numbers or their inversions.
   if (Math.floor(x) === x) {
     return [x, 1];
@@ -297,18 +298,25 @@ function approximateFraction(x) {
     }
   }
   let result;
-  // Select closest of the neighbours to x.
-  if (x_ - a / b < c / d - x_) {
-    result = x_ === x ? [a, b] : [b, a];
+  if (forceLower) {
+    result = x_ === x ? [a, b] : [d, c];
   } else {
-    result = x_ === x ? [c, d] : [d, c];
+    // Select closest of the neighbours to x.
+    if (x_ - a / b < c / d - x_) {
+      result = x_ === x ? [a, b] : [b, a];
+    } else {
+      result = x_ === x ? [c, d] : [d, c];
+    }
   }
   return result;
 }
 
-function roundToDivide(x, div) {
-  const r = x % div;
-  return r === 0 ? x : Math.round(x - r + div);
+/**
+ * @param {number} x A positive number to round to a multiple of `div`
+ * @param {number} div A natural number
+ */
+function floorToDivide(x, div) {
+  return x - x % div;
 }
 
 /**
@@ -881,7 +889,7 @@ export {
   ProgressBar,
   removeNullCharacters,
   RenderingStates,
-  roundToDivide,
+  floorToDivide,
   SCROLLBAR_PADDING,
   scrollIntoView,
   ScrollMode,