Merge pull request #16794 from Snuffleupagus/CSS-round

Use the `round` CSS function in the `setLayerDimensions` helper function
This commit is contained in:
Tim van der Meij 2023-08-06 13:22:07 +02:00 committed by GitHub
commit de1f31aae8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 8 deletions

View File

@ -967,6 +967,8 @@ function getCurrentTransformInverse(ctx) {
return [a, b, c, d, e, f]; return [a, b, c, d, e, f];
} }
const useRound = globalThis.CSS?.supports?.("width: round(1.5px, 1px)");
/** /**
* @param {HTMLDivElement} div * @param {HTMLDivElement} div
* @param {PageViewport} viewport * @param {PageViewport} viewport
@ -983,14 +985,10 @@ function setLayerDimensions(
const { pageWidth, pageHeight } = viewport.rawDims; const { pageWidth, pageHeight } = viewport.rawDims;
const { style } = div; const { style } = div;
// TODO: Investigate if it could be interesting to use the css round const w = `var(--scale-factor) * ${pageWidth}px`,
// function (https://developer.mozilla.org/en-US/docs/Web/CSS/round): h = `var(--scale-factor) * ${pageHeight}px`;
// const widthStr = const widthStr = useRound ? `round(${w}, 1px)` : `calc(${w})`,
// `round(down, var(--scale-factor) * ${pageWidth}px, 1px)`; heightStr = useRound ? `round(${h}, 1px)` : `calc(${h})`;
// 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)`;
if (!mustFlip || viewport.rotation % 180 === 0) { if (!mustFlip || viewport.rotation % 180 === 0) {
style.width = widthStr; style.width = widthStr;

View File

@ -945,6 +945,8 @@ async function startBrowser(browserName, startUrl = "") {
"gfx.offscreencanvas.enabled": true, "gfx.offscreencanvas.enabled": true,
// Disable gpu acceleration // Disable gpu acceleration
"gfx.canvas.accelerated": false, "gfx.canvas.accelerated": false,
// Enable the `round` CSS function.
"layout.css.round.enabled": true,
}; };
} }