[api-major] Apply the userUnit using CSS, to fix the text/annotation layers (bug 1947248)

Rather than modifying the "raw" dimensions of the page, we'll instead apply the `userUnit` as an *additional* scale-factor via CSS.

*Please note:* It's not clear to me if this solution is fully correct either, or if there's other problems with it, but it at least *appears* to work.

---

With these changes, the following CSS variables are now assumed to be available/set as necessary: `--total-scale-factor`, `--scale-factor`, `--user-unit`, `--scale-round-x`, and `--scale-round-y`.

test/driver.js

@@ -215,6 +215,18 @@ class Rasterize {
     return { svg, foreignObject, style, div };
   }
 
+  static createRootCSS(viewport) {
+    const { scale, userUnit } = viewport;
+    return [
+      ":root {",
+      "  --scale-round-x: 1px; --scale-round-y: 1px;",
+      `  --scale-factor: ${scale};`,
+      `  --user-unit: ${userUnit};`,
+      `  --total-scale-factor: ${scale * userUnit};`,
+      "}",
+    ].join("\n");
+  }
+
   static async annotationLayer(
     ctx,
     viewport,
@@ -232,9 +244,7 @@ class Rasterize {
       div.className = "annotationLayer";
 
       const [common, overrides] = await this.annotationStylePromise;
-      style.textContent =
-        `${common}\n${overrides}\n` +
-        `:root { --scale-factor: ${viewport.scale} }`;
+      style.textContent = `${common}\n${overrides}\n${this.createRootCSS(viewport)}`;
 
       const annotationViewport = viewport.clone({ dontFlip: true });
       const annotationImageMap = await convertCanvasesToImages(
@@ -293,9 +303,7 @@ class Rasterize {
       svg.setAttribute("font-size", 1);
 
       const [common, overrides] = await this.textStylePromise;
-      style.textContent =
-        `${common}\n${overrides}\n` +
-        `:root { --scale-factor: ${viewport.scale} }`;
+      style.textContent = `${common}\n${overrides}\n${this.createRootCSS(viewport)}`;
 
       // Rendering text layer as HTML.
       const textLayer = new TextLayer({
@@ -322,9 +330,7 @@ class Rasterize {
       svg.setAttribute("font-size", 1);
 
       const [common, overrides] = await this.drawLayerStylePromise;
-      style.textContent =
-        `${common}\n${overrides}` +
-        `:root { --scale-factor: ${viewport.scale} }`;
+      style.textContent = `${common}\n${overrides}\n${this.createRootCSS(viewport)}`;
 
       // Rendering text layer as HTML.
       const textLayer = new TextLayer({
@@ -346,9 +352,9 @@ class Rasterize {
         let x = parseFloat(left) / 100;
         let y = parseFloat(top) / 100;
         if (isNaN(x)) {
-          posRegex ||= /^calc\(var\(--scale-factor\)\*(.*)px\)$/;
+          posRegex ||= /^calc\(var\(--total-scale-factor\)\s*\*(.*)px\)$/;
           // The element is tagged so we've to extract the position from the
-          // string, e.g. `calc(var(--scale-factor)*66.32px)`.
+          // string, e.g. `calc(var(--total-scale-factor)*66.32px)`.
           let match = left.match(posRegex);
           if (match) {
             x = parseFloat(match[1]) / pageWidth;

test/pdfs/.gitignore

@@ -559,6 +559,8 @@
 !poppler-85140-0.pdf
 !issue15012.pdf
 !issue19176.pdf
+!bug1947248_text.pdf
+!bug1947248_forms.pdf
 !issue15150.pdf
 !poppler-395-0-fuzzed.pdf
 !issue14165.pdf

test/test_manifest.json

@@ -2749,6 +2749,21 @@
     "rounds": 1,
     "type": "eq"
   },
+  {
+    "id": "bug1947248-text",
+    "file": "pdfs/bug1947248_text.pdf",
+    "md5": "491f1df75b77d2762ff96ce51f5e019b",
+    "rounds": 1,
+    "type": "text"
+  },
+  {
+    "id": "bug1947248-forms",
+    "file": "pdfs/bug1947248_forms.pdf",
+    "md5": "456c974d7d4351719f36ef10e603d29c",
+    "rounds": 1,
+    "type": "eq",
+    "forms": true
+  },
   {
     "id": "issue4801",
     "file": "pdfs/issue4801.pdf",