Merge pull request #17893 from timvandermeij/find-integration-test

Fix the "must highlight text in the right position" integration test

Author: timvandermeij

test/integration/find_spec.mjs

@@ -39,35 +39,48 @@ describe("find bar", () => {
     it("must highlight text in the right position", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
+          // Highlight all occurrences of the letter A (case insensitive).
           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.
+
+          // The PDF file contains the text 'AB BA' in a monospace font on a
+          // single line. Check if the two occurrences of A are highlighted.
           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();
+
+          // Normalize the highlight's height. The font data in the PDF sets the
+          // size of the glyphs (and therefore the size of the highlights), but
+          // the viewer applies extra padding to them. For the comparison we
+          // therefore use the unpadded, glyph-sized parent element's height.
+          const parentSpan = (await highlights[0].$$("xpath/.."))[0];
+          const parentBox = await parentSpan.boundingBox();
           const firstA = await highlights[0].boundingBox();
           const secondA = await highlights[1].boundingBox();
-          // Subtract the page offset from the text bounding boxes;
-          firstA.x -= pageBox.x;
-          firstA.y -= pageBox.y;
-          secondA.x -= pageBox.x;
-          secondA.y -= pageBox.y;
-          // They should be on the same line.
+          firstA.height = parentBox.height;
+          secondA.height = parentBox.height;
+
+          // Check if the vertical position of the highlights is correct. Both
+          // should be on a single line.
           expect(firstA.y).withContext(`In ${browserName}`).toEqual(secondA.y);
+
+          // Check if the height of the two highlights is correct. Both should
+          // match the font size.
           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);
+          fuzzyMatch(firstA.height, fontSize, browserName);
+          fuzzyMatch(secondA.height, fontSize, browserName);
+
+          // Check if the horizontal position of the highlights is correct. The
+          // second occurrence should be four glyph widths (three letters and
+          // one space) away from the first occurrence.
+          const pageDiv = await page.$(".page canvas");
+          const pageBox = await pageDiv.boundingBox();
+          const expectedFirstAX = 30; // From the PDF.
+          const glyphWidth = 15.98; // From the PDF.
+          fuzzyMatch(firstA.x, pageBox.x + expectedFirstAX, browserName);
+          fuzzyMatch(secondA.x, firstA.x + glyphWidth * 4, browserName);
         })
       );
     });