[Image] | (DX) | Add delay to flakey Graphie image regression test

.changeset/fifty-stingrays-provide.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Image] | (DX) | Add delay to flakey Graphie image regression test

packages/perseus/src/util/graphie.ts

@@ -1012,7 +1012,15 @@ export class Graphie {
             this.#labelElements.add(span);
 
             $span.processMath = function (math, force) {
-                processMath(span, math, force, function () {
+                processMath(span, math, force, async function () {
+                    // Wait for fonts to load before measuring the span's
+                    // dimensions. KaTeX web fonts are loaded lazily (on first
+                    // math render), so they may still be downloading when this
+                    // callback fires. Measuring scrollHeight before the fonts
+                    // settle produces incorrect label margins because the
+                    // browser falls back to a different font with different
+                    // metrics, causing non-deterministic ~2-3px label shifts.
+                    await document.fonts.ready;
                     const width = span.scrollWidth;
                     const height = span.scrollHeight;
                     setLabelMargins(span, [width, height]);

packages/perseus/src/widgets/image/__docs__/image-interactions-regression.stories.tsx

@@ -148,6 +148,14 @@ export const ZoomClickedWithGraphieImage: Story = {
             name: "Make image bigger.",
         });
         await userEvent.click(zoomTrigger);
+        // After clicking zoom, the modal's new Graphie instance calls
+        // setLabelMargins inside an async callback that awaits
+        // document.fonts.ready (see graphie.ts). We also await it here so
+        // that the play function does not return — and Chromatic does not
+        // take its screenshot — until that callback has completed.
+        // Promise continuation ordering guarantees the callback's
+        // document.fonts.ready continuation runs before this one.
+        await document.fonts.ready;
     },
 };