Firefox 用フォールバック PNG を 120×90 に拡大しテストフレークを解消

Firefox でのみ発生していた画像プレビューのテストフレークを、サイズと形式を修正した PNG に置き換えることで根本的に解消しました。これにより、プレビュー画像が正しく表示され、クリックイベントが期待通りに伝搬します。

背景

Firefox は不正な画像データを "Image corrupt or truncated" と判定し <img> の onerror を発火させます。その結果、テスト中にプレビュー画像がファイルアイコンに戻り、Deferred‑preview のスワップが失敗してフレークが発生していました。さらに、元の 1×1 ピクセル PNG は表示サイズが極端に小さく、<figure> の min-inline-size (10ch) を下回るため、Firefox が figure intercepts pointer events と報告し、クリック系テストが失敗していました。これらはすべて test/browser/helpers/active_storage_mock.js のフォールバック PNG が原因でした。

技術的な変更

active_storage_mock.js で使用されていた定数 TRANSPARENT_PNG を FALLBACK_PNG にリネームし、サイズを 120×90 ピクセルの有効な PNG データへ置き換えました。コード上の主な変更点は次のとおりです。

@@ -1,9 +1,13 @@
-// 1×1 transparent PNG used as a fallback when the fixture file doesn't exist on disk.
-const TRANSPARENT_PNG = Buffer.from(
-  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12P4z8BQDwAEgAF/QualzQAAAABJRU5ErkJggg==",
+// Fallback preview image. Must be byte-valid — Firefox rejects malformed data and
+// fires <img> onerror, reverting the preview swap to the file icon (a flake). Must
+// also be wider than the figure's min-inline-size (10ch); a sub-figure image leaves
+// the figure chrome on top of the click point, so Firefox reports the figure as
+// intercepting pointer events when tests click the preview img.
+const FALLBACK_PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAA6ElEQVR4nO3RwQkAIBDAMMe+Ed1KxxBqHvkXumb2oWu9DsBgDMbgTxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcZ3CcwXEGxxkcdwGOw47/2hYVfQAAAABJRU5ErkJggg==",
   "base64"
 )

ルーティングロジックでも TRANSPARENT_PNG の参照を FALLBACK_PNG に置き換え、fallback が利用されるケースを明示しました。

@@
-      // Serve the fixture file if it exists, otherwise return a 1×1 transparent PNG.
+      // Serve the fixture file if it exists, otherwise the small FALLBACK_PNG.
@@
-        await route.fulfill({ status: 200, contentType: "image/png", body: TRANSPARENT_PNG })
+        await route.fulfill({ status: 200, contentType: "image/png", body: FALLBACK_PNG })

この変更により、Firefox でも PNG が正しくデコードされ、プレビュー画像が 120×90 ピクセルで表示されるため、<figure> の幅を完全に覆い、ポインターイベントの遮断が解消されます。

設計判断

フォールバック画像のサイズを 120×90 に変更した根拠は、Firefox の onerror を防止しつつ、レイアウトシフトを最小限に抑える点にあります。画像を大きくしすぎるとテスト全体で余計なレイアウト変化が発生する恐れがあるため、必要最小限の幅（figure の min-inline-size を上回る）と高さを確保する設計としました。さらに、既存のテストロジックや他ブラウザでの挙動を変更しないよう、同一の PNG データをすべてのブラウザで利用しています。これは新たなテストコードや条件分岐を導入せず、モックのデータだけで問題を解決するという 最小侵入性 の方針に沿った判断です。

まとめ

この PR は、Firefox 専用の画像プレビューテストフレークを、サイズと形式を修正したフォールバック PNG（120×90）に置き換えるだけで根本的に解消しました。結果として、全ブラウザで安定したテスト実行と、クリック対象領域の一貫性が確保され、既存コードへの影響も最小限に抑えられました。