From e414dfcff7a6555246399339a122cf42c2916289 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Fri, 4 Aug 2023 14:33:06 +0200
Subject: [PATCH] Use the `round` CSS function in the `setLayerDimensions`
 helper function

This has now been enabled unconditionally in Firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1814589

For the `page`-containers in the viewer, this patch should restore the behaviour prior to PR 15770; see e.g. https://github.com/mozilla/pdf.js/pull/15770/files#diff-c48e3561004f5db8f11d5ebab2fd661591222ba911cb4173fbced15f026bac6bL182-L183
Note that these changes this will lead to a tiny bit of movement in some `text` and `annotations` reference tests.

Please find additional information at https://developer.mozilla.org/en-US/docs/Web/CSS/round
---
 src/display/display_utils.js | 14 ++++++--------
 test/test.mjs                |  2 ++
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/display/display_utils.js b/src/display/display_utils.js
index 84b61c536..25c0ef816 100644
--- a/src/display/display_utils.js
+++ b/src/display/display_utils.js
@@ -967,6 +967,8 @@ function getCurrentTransformInverse(ctx) {
   return [a, b, c, d, e, f];
 }
 
+const useRound = globalThis.CSS?.supports?.("width: round(1.5px, 1px)");
+
 /**
  * @param {HTMLDivElement} div
  * @param {PageViewport} viewport
@@ -983,14 +985,10 @@ function setLayerDimensions(
     const { pageWidth, pageHeight } = viewport.rawDims;
     const { style } = div;
 
-    // TODO: Investigate if it could be interesting to use the css round
-    // function (https://developer.mozilla.org/en-US/docs/Web/CSS/round):
-    // const widthStr =
-    //   `round(down, var(--scale-factor) * ${pageWidth}px, 1px)`;
-    // const heightStr =
-    //   `round(down, var(--scale-factor) * ${pageHeight}px, 1px)`;
-    const widthStr = `calc(var(--scale-factor) * ${pageWidth}px)`;
-    const heightStr = `calc(var(--scale-factor) * ${pageHeight}px)`;
+    const w = `var(--scale-factor) * ${pageWidth}px`,
+      h = `var(--scale-factor) * ${pageHeight}px`;
+    const widthStr = useRound ? `round(${w}, 1px)` : `calc(${w})`,
+      heightStr = useRound ? `round(${h}, 1px)` : `calc(${h})`;
 
     if (!mustFlip || viewport.rotation % 180 === 0) {
       style.width = widthStr;
diff --git a/test/test.mjs b/test/test.mjs
index 7d8825c8d..8df0d51d6 100644
--- a/test/test.mjs
+++ b/test/test.mjs
@@ -945,6 +945,8 @@ async function startBrowser(browserName, startUrl = "") {
       "gfx.offscreencanvas.enabled": true,
       // Disable gpu acceleration
       "gfx.canvas.accelerated": false,
+      // Enable the `round` CSS function.
+      "layout.css.round.enabled": true,
     };
   }