Merge pull request #16794 from Snuffleupagus/CSS-round

Use the `round` CSS function in the `setLayerDimensions` helper function
mozilla · Aug 6, 2023 · de1f31a · de1f31a
2 parents b67c609 + e414dfc
commit de1f31a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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,
     };
   }