Fix position of highlighted all text.

Adds a new integration test to ensure we don't
regress this again.

test/integration-boot.js

@@ -28,6 +28,7 @@ async function runTests(results) {
       "scripting_spec.js",
       "annotation_spec.js",
       "accessibility_spec.js",
+      "find_spec.js",
     ],
   });
 

test/integration/find_spec.js

@@ -0,0 +1,75 @@
+/* Copyright 2021 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const { closePages, loadAndWait } = require("./test_utils.js");
+
+function fuzzyMatch(a, b, browserName, pixelFuzz = 3) {
+  expect(a)
+    .withContext(`In ${browserName}`)
+    .toBeLessThan(b + pixelFuzz);
+  expect(a)
+    .withContext(`In ${browserName}`)
+    .toBeGreaterThan(b - pixelFuzz);
+}
+
+describe("find bar", () => {
+  describe("highlight all", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("find_all.pdf#zoom=100", ".textLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must highlight text in the right position", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#viewFind");
+          await page.waitForSelector("#viewFind", { hidden: false });
+          await page.type("#findInput", "a");
+          await page.click("#findHighlightAll");
+          await page.waitForSelector(".textLayer .highlight");
+          // The PDF has the text "AB BA" in a monospace font.
+          // Make sure we have the right number of highlighted divs.
+          const highlights = await page.$$(".textLayer .highlight");
+          expect(highlights.length).withContext(`In ${browserName}`).toEqual(2);
+          const glyphWidth = 15.98; // From the PDF.
+          const pageDiv = await page.$(".page canvas");
+          const pageBox = await pageDiv.boundingBox();
+          const firstA = await highlights[0].boundingBox();
+          const secondA = await highlights[1].boundingBox();
+          // Subtract the page offset from the text bounding boxes;
+          firstA.x = firstA.x - pageBox.x;
+          firstA.y = firstA.y - pageBox.y;
+          secondA.x = secondA.x - pageBox.x;
+          secondA.y = secondA.y - pageBox.y;
+          // They should be on the same line.
+          expect(firstA.y).withContext(`In ${browserName}`).toEqual(secondA.y);
+          const fontSize = 26.66; // From the PDF.
+          // The highlighted text has more padding.
+          fuzzyMatch(firstA.height, fontSize + 5, browserName);
+          fuzzyMatch(secondA.height, fontSize + 5, browserName);
+          const expectedFirstAX = 28;
+          fuzzyMatch(firstA.x, expectedFirstAX, browserName);
+          // The second 'A' should be 4 glyphs widths from the first.
+          fuzzyMatch(secondA.x, expectedFirstAX + glyphWidth * 4, browserName);
+        })
+      );
+    });
+  });
+});

test/pdfs/.gitignore

@@ -246,6 +246,7 @@
 !S2.pdf
 !glyph_accent.pdf
 !personwithdog.pdf
+!find_all.pdf
 !helloworld-bad.pdf
 !zerowidthline.pdf
 !js-colors.pdf

test/test_manifest.json

@@ -5071,6 +5071,11 @@
        "rounds": 1,
        "type": "eq"
     },
+    {  "id": "find_all",
+       "file": "pdfs/find_all.pdf",
+       "md5": "c49319a64379c4a8de3a1efc23aa8e5b",
+       "type": "other"
+    },
     { "id": "issue9940",
       "file": "pdfs/issue9940.pdf",
       "md5": "6ffef210c4b6cfe423e20430d8af168a",

web/text_layer_builder.css

@@ -33,6 +33,7 @@
 }
 
 .textLayer .highlight {
+  position: relative;
   margin: -1px;
   padding: 1px;
   background-color: rgba(180, 0, 170, 1);