From e414dfcff7a6555246399339a122cf42c2916289 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald 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, }; }