diff --git a/docs/channels.md b/docs/channels.md
index f87cd3cc..2158e5cd 100644
--- a/docs/channels.md
+++ b/docs/channels.md
@@ -284,5 +284,14 @@ and 320px tall without upscaling. Missing/invalid dimensions use a stable 360:32
that shrinks with the available width; the image is contained without cropping or
upscaling. Unknown-size images may therefore have empty space in the frame. Loading,
failure, or retry does not resize it or force an above-bottom reader to the newest row.
+Valid message-carried `imeta blurhash` is decoded locally into a 32×32 canvas in
+that same frame when it intersects the viewport. No thumbnail is fetched. The
+preview is removed entirely (including behind transparency) only after the lazy
+original decodes; failure retains the preview. Missing/invalid hashes or canvas
+failures keep the existing background. Syntax validation bounds hashes to 166
+base83 characters / 9×9 components; folding does no pixel work. Preview work is
+per-mounted-image and uncached, visibility-gated even in nonvirtualized threads.
+Without IntersectionObserver, only the ordinary placeholder/original is used.
+This favors bounded visible work over instant offscreen previews on scrolling.
`tests/browser/image-scroll.spec.mjs` covers delayed/failed loads, actual remounts,
bottom following, reading anchors and narrow layout in Chromium and WebKit.
diff --git a/package.json b/package.json
index ec19fb25..2532f3c1 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
"@tauri-apps/api": "^2.11.1",
"@xterm/addon-fit": "0.10.0",
"@xterm/xterm": "5.5.0",
+ "blurhash": "2.0.5",
"dockview-react": "8.2.0",
"emoji-mart": "5.6.0",
"flexlayout-react": "0.10.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bad39e68..55a44e61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
'@xterm/xterm':
specifier: 5.5.0
version: 5.5.0
+ blurhash:
+ specifier: 2.0.5
+ version: 2.0.5
dockview-react:
specifier: 8.2.0
version: 8.2.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -333,6 +336,7 @@ packages:
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@rolldown/binding-linux-ppc64-gnu@1.2.7':
resolution: {integrity: sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==}
@@ -822,6 +826,9 @@ packages:
bail@2.0.2:
resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+ blurhash@2.0.5:
+ resolution: {integrity: sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==}
+
ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -2092,6 +2099,8 @@ snapshots:
bail@2.0.2: {}
+ blurhash@2.0.5: {}
+
ccount@2.0.1: {}
chai@6.2.2: {}
diff --git a/src/features/messages/AttachmentImage.tsx b/src/features/messages/AttachmentImage.tsx
new file mode 100644
index 00000000..118ae1e1
--- /dev/null
+++ b/src/features/messages/AttachmentImage.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from "react";
+import type { Attachment } from "../relay/contracts";
+import { validatedBlurhash } from "../relay/blurhash";
+import { BLURHASH_SIZE, paintBlurhash } from "./blurhash";
+import styles from "./Messages.module.css";
+
+export function AttachmentImage({
+ attachment,
+ url,
+ source,
+ onOpenLink,
+}: {
+ attachment: Attachment;
+ url: string;
+ source: string;
+ onOpenLink(url: string): boolean;
+}) {
+ return (
+ {
+ if (
+ !event.metaKey &&
+ !event.ctrlKey &&
+ !event.shiftKey &&
+ onOpenLink(url)
+ )
+ event.preventDefault();
+ }}
+ >
+ {/* Retargeting retires both the DOM pixels and all pending callbacks before
+ the new source can paint. Session switches also remount the workspace. */}
+
+
+ );
+}
+
+function ImagePixels({
+ source,
+ blurhash,
+}: {
+ source: string;
+ blurhash: string | undefined;
+}) {
+ const image = useRef(null);
+ const canvas = useRef(null);
+ const [ready, setReady] = useState(false);
+ const hash = validatedBlurhash(blurhash);
+ useEffect(() => {
+ const original = image.current;
+ if (!original) return;
+ let active = true;
+ let decoded = false;
+ let painted = false;
+ let decoding = false;
+ let observer: IntersectionObserver | undefined;
+ const loaded = async () => {
+ if (!active || decoding || decoded || !original.naturalWidth) return;
+ decoding = true;
+ try {
+ await original.decode();
+ if (!active) return;
+ decoded = true;
+ observer?.disconnect();
+ setReady(true);
+ } catch {
+ // Keep the blur preview on original failure, including decode rejection.
+ } finally {
+ decoding = false;
+ }
+ };
+ original.addEventListener("load", loaded);
+ if (original.complete) void loaded();
+ const preview = canvas.current;
+ if (hash && preview && typeof IntersectionObserver !== "undefined") {
+ // Original requests keep native loading="lazy". Only preview CPU work is
+ // visibility-gated, including nonvirtualized thread rows. No new scheduler.
+ observer = new IntersectionObserver((entries) => {
+ if (
+ !active ||
+ decoded ||
+ painted ||
+ !entries.some((entry) => entry.isIntersecting)
+ )
+ return;
+ observer?.disconnect();
+ painted = true;
+ paintBlurhash(preview, hash);
+ });
+ observer.observe(preview);
+ }
+ // Without IntersectionObserver, retain the old placeholder rather than
+ // eagerly decode every mounted thread attachment.
+ return () => {
+ active = false;
+ original.removeEventListener("load", loaded);
+ observer?.disconnect();
+ };
+ }, [hash]);
+ return (
+ <>
+ {hash && !ready && (
+
+ )}
+ 
+
+ );
+}
diff --git a/src/features/messages/MessageRow.test.tsx b/src/features/messages/MessageRow.test.tsx
index 19808995..3894998d 100644
--- a/src/features/messages/MessageRow.test.tsx
+++ b/src/features/messages/MessageRow.test.tsx
@@ -260,3 +260,30 @@ it.each([
expect(html).toContain('loading="lazy"');
},
);
+
+it("does not bypass the session media resolver to paint an inaccessible attachment", () => {
+ const media = vi.fn(() => undefined);
+ const html = renderToStaticMarkup(
+ false}
+ day={false}
+ retry={undefined}
+ />,
+ );
+ expect(media).toHaveBeenCalledWith("https://image.test/original.png");
+ expect(html).toContain("Image attachment");
+ expect(html).not.toContain("
) : (
- {
- if (
- !event.metaKey &&
- !event.ctrlKey &&
- !event.shiftKey &&
- onOpenLink(url)
- )
- event.preventDefault();
- }}
- >
-
-
+ attachment={attachment}
+ url={url}
+ source={source}
+ onOpenLink={onOpenLink}
+ />
);
})}
{row.reactions.length > 0 && (
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 87aed490..87a1faeb 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -188,12 +188,15 @@
border-radius: 10px;
background: var(--surface-hover);
}
+.attachmentImage canvas,
.attachmentImage img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
+}
+.attachmentImage img {
object-fit: scale-down;
}
.composer {
diff --git a/src/features/messages/blurhash.test.ts b/src/features/messages/blurhash.test.ts
new file mode 100644
index 00000000..3b3c75cc
--- /dev/null
+++ b/src/features/messages/blurhash.test.ts
@@ -0,0 +1,54 @@
+import { afterEach, expect, it, vi } from "vitest";
+import { decode } from "blurhash";
+import { BLURHASH_SIZE, paintBlurhash } from "./blurhash";
+vi.mock("blurhash", async (original) => ({
+ ...(await original()),
+ decode: vi.fn((await original()).decode),
+}));
+afterEach(() => vi.mocked(decode).mockClear());
+const hash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+function canvas() {
+ const data = new Uint8ClampedArray(BLURHASH_SIZE ** 2 * 4);
+ const context = {
+ createImageData: vi.fn(() => ({ data })),
+ putImageData: vi.fn(),
+ };
+ const element = { getContext: vi.fn(() => context) };
+ return { element: element as unknown as HTMLCanvasElement, context, data };
+}
+it("uses the canonical decoder with a fixed tiny raster, with no source dimensions", () => {
+ const { element, context, data } = canvas();
+ paintBlurhash(element, hash);
+ expect(decode).toHaveBeenCalledExactlyOnceWith(hash, 32, 32);
+ expect(context.putImageData).toHaveBeenCalledOnce();
+ expect(data.some((value) => value > 0)).toBe(true);
+});
+it("rejects invalid/oversized input before any canvas or decoder work", () => {
+ const { element } = canvas();
+ for (const value of [
+ "invalid",
+ "0".repeat(10000),
+ "~000000000000000000000000000000000000000",
+ ])
+ paintBlurhash(element, value);
+ expect(element.getContext).not.toHaveBeenCalled();
+ expect(decode).not.toHaveBeenCalled();
+});
+it("contains decoder, unavailable canvas and raster write failures", () => {
+ const { element, context } = canvas();
+ vi.mocked(decode).mockImplementationOnce(() => {
+ throw new Error("decode");
+ });
+ expect(() => paintBlurhash(element, hash)).not.toThrow();
+ expect(context.putImageData).not.toHaveBeenCalled();
+ context.putImageData.mockImplementationOnce(() => {
+ throw new Error("canvas");
+ });
+ expect(() => paintBlurhash(element, hash)).not.toThrow();
+ expect(() =>
+ paintBlurhash(
+ { getContext: () => null } as unknown as HTMLCanvasElement,
+ hash,
+ ),
+ ).not.toThrow();
+});
diff --git a/src/features/messages/blurhash.ts b/src/features/messages/blurhash.ts
new file mode 100644
index 00000000..d9a487c9
--- /dev/null
+++ b/src/features/messages/blurhash.ts
@@ -0,0 +1,19 @@
+import { decode } from "blurhash";
+import { validatedBlurhash } from "../relay/blurhash";
+
+export const BLURHASH_SIZE = 32;
+
+/** Local, bounded raster only; no URL, source-sized canvas or retained cache. */
+export function paintBlurhash(canvas: HTMLCanvasElement, hash: string): void {
+ if (!validatedBlurhash(hash)) return;
+ try {
+ const context = canvas.getContext("2d");
+ if (!context) return;
+ const image = context.createImageData(BLURHASH_SIZE, BLURHASH_SIZE);
+ image.data.set(decode(hash, BLURHASH_SIZE, BLURHASH_SIZE));
+ context.putImageData(image, 0, 0);
+ } catch {
+ // Bad metadata, unavailable canvas or decoder failure keeps the frame's
+ // existing background. Original loading must never depend on the preview.
+ }
+}
diff --git a/src/features/relay/blurhash.ts b/src/features/relay/blurhash.ts
new file mode 100644
index 00000000..004d6e6b
--- /dev/null
+++ b/src/features/relay/blurhash.ts
@@ -0,0 +1,15 @@
+// Signed imeta is still untrusted. Validate syntax without doing pixel work in
+// message folding: at most 9x9 components (166 base83 characters).
+const BASE83 =
+ "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+export function validatedBlurhash(value: unknown): string | undefined {
+ if (typeof value !== "string" || value.length < 6 || value.length > 166)
+ return undefined;
+ for (const character of value) {
+ if (!BASE83.includes(character)) return undefined;
+ }
+ const size = BASE83.indexOf(value.charAt(0));
+ if (size > 80) return undefined;
+ const components = ((size % 9) + 1) * (Math.floor(size / 9) + 1);
+ return value.length === 4 + 2 * components ? value : undefined;
+}
diff --git a/src/features/relay/contracts.ts b/src/features/relay/contracts.ts
index 33d6c332..d7900c75 100644
--- a/src/features/relay/contracts.ts
+++ b/src/features/relay/contracts.ts
@@ -24,6 +24,8 @@ export type Attachment = Readonly<{
url: string;
video: boolean;
dimensions?: Readonly<{ width: number; height: number }>;
+ /** Validated message-carried BlurHash; decoded locally only for presentation. */
+ blurhash?: string;
}>;
/** Relay-authored membership activity, not a membership grant or user message. */
export type MembershipChange = Readonly<{
diff --git a/src/features/relay/fold.test.ts b/src/features/relay/fold.test.ts
index d220c13c..fe77b4bd 100644
--- a/src/features/relay/fold.test.ts
+++ b/src/features/relay/fold.test.ts
@@ -334,3 +334,38 @@ it.each([
{ url: "https://x.test/legacy.png", video: false },
]);
});
+
+it.each([
+ "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+ "000000", // 1x1
+ `|000${"00".repeat(81)}`, // maximum 9x9
+ undefined,
+ "",
+ "short",
+ "LEHV6nWB2yk8pyo0adR*.7kCMdn!", // invalid alphabet
+ "LEHV6nWB2yk8pyo0adR*.7kCMdn", // truncated
+ `~000${"00".repeat(18)}`, // illegal size flag, despite matching length
+ "0".repeat(10000),
+])("preserves only bounded valid attachment blurhash: %s", (hash) => {
+ const valid =
+ hash === "LEHV6nWB2yk8pyo0adR*.7kCMdnj" ||
+ hash === "000000" ||
+ hash?.startsWith("|");
+ const event = message(keypair(), "channel", "", 1, [
+ [
+ "imeta",
+ "url https://x.test/original.png",
+ "m image/png",
+ "thumb https://x.test/thumbnail.png",
+ ...(hash === undefined ? [] : [`blurhash ${hash}`]),
+ ],
+ ]);
+ expect(parseAttachments(event, ["https://x.test/legacy.png"])).toEqual([
+ {
+ url: "https://x.test/original.png",
+ video: false,
+ ...(valid ? { blurhash: hash } : {}),
+ },
+ { url: "https://x.test/legacy.png", video: false },
+ ]);
+});
diff --git a/src/features/relay/fold.ts b/src/features/relay/fold.ts
index 58fed26e..b404f69d 100644
--- a/src/features/relay/fold.ts
+++ b/src/features/relay/fold.ts
@@ -1,3 +1,4 @@
+import { validatedBlurhash } from "./blurhash";
import { threadReference } from "./thread-reference";
import { emojiTags } from "./emoji";
import { objectBody } from "./body";
@@ -31,8 +32,10 @@ export function parseAttachments(
const dim = /^(\d{1,6})x(\d{1,6})$/.exec(fields.dim ?? "");
const width = Number(dim?.[1]),
height = Number(dim?.[2]);
+ const blurhash = validatedBlurhash(fields.blurhash);
result.push({
url,
+ ...(blurhash ? { blurhash } : {}),
video: fields.m?.startsWith("video/") ?? false,
...(width > 0 && height > 0 ? { dimensions: { width, height } } : {}),
});
diff --git a/tests/browser/image-scroll.spec.mjs b/tests/browser/image-scroll.spec.mjs
index b3e1c754..a0b56491 100644
--- a/tests/browser/image-scroll.spec.mjs
+++ b/tests/browser/image-scroll.spec.mjs
@@ -39,9 +39,7 @@ async function navigate(page, direction) {
).toBe(true);
}
-test("delayed and failed images preserve bottom and reading anchors across remounts", async ({
- page,
-}) => {
+async function fixtureServer() {
const server = await createServer({
root: fileURLToPath(new URL("../../", import.meta.url)),
configFile: false,
@@ -50,6 +48,13 @@ test("delayed and failed images preserve bottom and reading anchors across remou
logLevel: "error",
server: { host: "127.0.0.1", port: 0, strictPort: false },
});
+ return server;
+}
+
+test("delayed and failed images preserve bottom and reading anchors across remounts", async ({
+ page,
+}, testInfo) => {
+ const server = await fixtureServer();
const pending = new Set();
const requests = new Map();
let held = true;
@@ -105,6 +110,7 @@ test("delayed and failed images preserve bottom and reading anchors across remou
await expect.poll(() => pending.size).toBeGreaterThan(0);
await settle(page);
expect(await gap()).toBeLessThan(4);
+ await expect(feed.locator("canvas").last()).toBeVisible();
const before = await feed.evaluate((el) => el.scrollHeight);
await release();
await loaded();
@@ -145,6 +151,15 @@ test("delayed and failed images preserve bottom and reading anchors across remou
[...requests.values()].some((count) => count > 1),
"images actually remounted and reloaded",
).toBe(true);
+ expect(
+ [...requests.keys()].every((url) =>
+ /^https:\/\/image.test\/\d+\.svg$/.test(url),
+ ),
+ ).toBe(true);
+ await testInfo.attach("original-only-request-ledger", {
+ body: JSON.stringify([...requests], null, 2),
+ contentType: "application/json",
+ });
// Responsive reservation stays bounded, including missing-metadata fallback.
await page.setViewportSize({ width: 420, height: 950 });
await settle(page);
@@ -208,3 +223,281 @@ test("image navigation handles partial gestures and rejects blocked input", asyn
page.mouse.wheel = wheel;
}
});
+
+// Control decode completion rather than just HTTP completion: an original must
+// not cover the preview until decoded, and retired promises must do nothing.
+async function holdDecodes(page, holdVisibility = false) {
+ await page.addInitScript(
+ ({ holdVisibility }) => {
+ const realDecode = HTMLImageElement.prototype.decode;
+ const pending = new Map();
+ const paints = [];
+ const realPaint = CanvasRenderingContext2D.prototype.putImageData;
+ CanvasRenderingContext2D.prototype.putImageData = function (...args) {
+ paints.push({ width: args[0].width, height: args[0].height });
+ return realPaint.apply(this, args);
+ };
+ HTMLImageElement.prototype.decode = async function () {
+ await realDecode.call(this);
+ if (!this.src.startsWith("https://image.test/")) return;
+ const key = this.src;
+ await new Promise((resolve, reject) => {
+ const list = pending.get(key) ?? [];
+ list.push({ resolve, reject });
+ pending.set(key, list);
+ });
+ };
+ const observers = [];
+ if (holdVisibility) {
+ window.IntersectionObserver = class {
+ constructor(callback) {
+ this.callback = callback;
+ observers.push(this);
+ }
+ observe(target) {
+ this.target = target;
+ }
+ disconnect() {}
+ };
+ }
+ window.imageTest = {
+ paints,
+ waiting: (name) => pending.has(`https://image.test/${name}.svg`),
+ release(name) {
+ const key = `https://image.test/${name}.svg`;
+ for (const item of pending.get(key) ?? []) item.resolve();
+ pending.delete(key);
+ },
+ reject(name) {
+ const key = `https://image.test/${name}.svg`;
+ for (const item of pending.get(key) ?? [])
+ item.reject(new Error("held decode rejected"));
+ pending.delete(key);
+ },
+ intersect() {
+ for (const observer of observers)
+ observer.callback([
+ { isIntersecting: true, target: observer.target },
+ ]);
+ },
+ };
+ },
+ { holdVisibility },
+ );
+}
+
+const frame = (page) =>
+ page.getByRole("link", { name: "Open image attachment" });
+const shown = (page) =>
+ expect(frame(page).locator("img")).toHaveCSS("visibility", "visible");
+const waiting = (page, name) =>
+ expect
+ .poll(() => page.evaluate((name) => window.imageTest.waiting(name), name))
+ .toBe(true);
+const releaseDecode = (page, name) =>
+ page.evaluate((name) => window.imageTest.release(name), name);
+
+async function routeOriginals(page, requests) {
+ await page.route("https://image.test/**", async (route) => {
+ requests.push(route.request().url());
+ await route.fulfill(
+ route.request().url().endsWith("/failed.svg")
+ ? { status: 404, body: "missing" }
+ : {
+ contentType: "image/svg+xml",
+ body: '',
+ },
+ );
+ });
+}
+
+test("blurhash visibility, decode swap, failure and retired source lifetimes", async ({
+ page,
+}, testInfo) => {
+ const server = await fixtureServer();
+ const requests = [];
+ await holdDecodes(page);
+ await routeOriginals(page, requests);
+ await server.listen();
+ try {
+ await page.goto(
+ `http://127.0.0.1:${server.httpServer.address().port}/tests/fixtures/attachment-image.html`,
+ );
+ // Mounted but offscreen (as in a long thread) must not spend pixel work.
+ await page.waitForTimeout(150);
+ expect(await page.evaluate(() => window.imageTest.paints)).toEqual([]);
+ await page.getByRole("button", { name: "Reveal", exact: true }).click();
+ await expect
+ .poll(() => page.evaluate(() => window.imageTest.paints.length))
+ .toBe(1);
+ const bounds = await frame(page).boundingBox();
+ await waiting(page, "first");
+ await expect(frame(page).locator("img")).toHaveCSS("visibility", "hidden");
+ expect(
+ await frame(page)
+ .locator("canvas")
+ .evaluate((canvas) =>
+ [...canvas.getContext("2d").getImageData(0, 0, 1, 1).data].some(
+ (x) => x > 0,
+ ),
+ ),
+ ).toBe(true);
+ await page.screenshot({ path: testInfo.outputPath("held-blurhash.png") });
+ await releaseDecode(page, "first");
+ await shown(page);
+ // Transparent/small original must expose only the frame, never old colors.
+ await expect(frame(page).locator("canvas")).toHaveCount(0);
+ await expect(frame(page).locator("img")).toHaveCSS(
+ "object-fit",
+ "scale-down",
+ );
+ expect(await frame(page).boundingBox()).toEqual(bounds);
+ await page.screenshot({
+ path: testInfo.outputPath("transparent-original.png"),
+ });
+ await page.getByRole("button", { name: "Retarget", exact: true }).click();
+ await waiting(page, "next");
+ await expect(frame(page).locator("img")).toHaveCSS("visibility", "hidden");
+ await expect(frame(page).locator("canvas")).toHaveCount(1);
+ await page
+ .getByRole("button", { name: "Fail original", exact: true })
+ .click();
+ await expect
+ .poll(() =>
+ frame(page)
+ .locator("img")
+ .evaluate((img) => img.complete),
+ )
+ .toBe(true);
+ await releaseDecode(page, "next"); // late callback for a retired source
+ await expect(frame(page).locator("img")).toHaveCSS("visibility", "hidden");
+ await expect(frame(page).locator("canvas")).toHaveCount(1);
+ expect(await frame(page).boundingBox()).toEqual(bounds);
+ await page.getByRole("button", { name: "Retarget", exact: true }).click();
+ await waiting(page, "next");
+ await page
+ .getByRole("button", { name: "Toggle mount", exact: true })
+ .click();
+ await releaseDecode(page, "next"); // late callback after unmount
+ await expect(frame(page)).toHaveCount(0);
+ await page
+ .getByRole("button", { name: "Toggle mount", exact: true })
+ .click();
+ await waiting(page, "next");
+ await expect(frame(page).locator("img")).toHaveCSS("visibility", "hidden");
+ await releaseDecode(page, "next");
+ await shown(page);
+ expect(
+ await page.evaluate(() =>
+ window.imageTest.paints.every((p) => p.width === 32 && p.height === 32),
+ ),
+ ).toBe(true);
+ expect(
+ requests.every((url) =>
+ /^https:\/\/image.test\/(first|next|failed)\.svg$/.test(url),
+ ),
+ ).toBe(true);
+ await testInfo.attach("original-only-request-ledger", {
+ body: JSON.stringify(requests, null, 2),
+ contentType: "application/json",
+ });
+ } finally {
+ await page.unrouteAll({ behavior: "wait" });
+ await server.close();
+ }
+});
+
+test("original ready first cannot regress on late visibility; missing and invalid hashes still load", async ({
+ page,
+}) => {
+ const server = await fixtureServer();
+ await holdDecodes(page, true);
+ await routeOriginals(page, []);
+ await server.listen();
+ try {
+ await page.goto(
+ `http://127.0.0.1:${server.httpServer.address().port}/tests/fixtures/attachment-image.html`,
+ );
+ await page.getByRole("button", { name: "Reveal", exact: true }).click();
+ await waiting(page, "first");
+ await releaseDecode(page, "first");
+ await shown(page);
+ await page.evaluate(() => window.imageTest.intersect());
+ expect(await page.evaluate(() => window.imageTest.paints)).toEqual([]);
+ await expect(frame(page).locator("canvas")).toHaveCount(0);
+ for (const name of ["No hash", "Invalid hash"]) {
+ await page.getByRole("button", { name, exact: true }).click();
+ await waiting(page, "first");
+ await expect(frame(page).locator("canvas")).toHaveCount(0);
+ await releaseDecode(page, "first");
+ await shown(page);
+ }
+ } finally {
+ await page.unrouteAll({ behavior: "wait" });
+ await server.close();
+ }
+});
+
+test("original decode rejection retains blur and the next source still recovers", async ({
+ page,
+}) => {
+ const server = await fixtureServer();
+ await holdDecodes(page);
+ await routeOriginals(page, []);
+ await server.listen();
+ try {
+ await page.goto(
+ `http://127.0.0.1:${server.httpServer.address().port}/tests/fixtures/attachment-image.html`,
+ );
+ await page.getByRole("button", { name: "Reveal", exact: true }).click();
+ await expect
+ .poll(() => page.evaluate(() => window.imageTest.paints.length))
+ .toBe(1);
+ await waiting(page, "first");
+ await page.evaluate(() => window.imageTest.reject("first"));
+ await expect(frame(page).locator("img")).toHaveCSS("visibility", "hidden");
+ await expect(frame(page).locator("canvas")).toHaveCount(1);
+ await page.getByRole("button", { name: "Retarget", exact: true }).click();
+ await waiting(page, "next");
+ await releaseDecode(page, "next");
+ await shown(page);
+ await expect(frame(page).locator("canvas")).toHaveCount(0);
+ } finally {
+ await page.unrouteAll({ behavior: "wait" });
+ await server.close();
+ }
+});
+
+for (const unavailable of ["canvas", "visibility"]) {
+ test(`unavailable ${unavailable} keeps the placeholder and original loading`, async ({
+ page,
+ }) => {
+ const server = await fixtureServer();
+ await holdDecodes(page);
+ await page.addInitScript((unavailable) => {
+ if (unavailable === "canvas")
+ HTMLCanvasElement.prototype.getContext = () => null;
+ else window.IntersectionObserver = undefined;
+ }, unavailable);
+ await routeOriginals(page, []);
+ await server.listen();
+ try {
+ await page.goto(
+ `http://127.0.0.1:${server.httpServer.address().port}/tests/fixtures/attachment-image.html`,
+ );
+ await page.getByRole("button", { name: "Reveal", exact: true }).click();
+ await waiting(page, "first");
+ expect(await page.evaluate(() => window.imageTest.paints)).toEqual([]);
+ await expect(frame(page).locator("img")).toHaveCSS(
+ "visibility",
+ "hidden",
+ );
+ await releaseDecode(page, "first");
+ await shown(page);
+ await expect(frame(page).locator("canvas")).toHaveCount(0);
+ } finally {
+ await page.unrouteAll({ behavior: "wait" });
+ await server.close();
+ }
+ });
+}
diff --git a/tests/fixtures/attachment-image.html b/tests/fixtures/attachment-image.html
new file mode 100644
index 00000000..ecfd2dc9
--- /dev/null
+++ b/tests/fixtures/attachment-image.html
@@ -0,0 +1 @@
+Attachment image lifecycle
diff --git a/tests/fixtures/attachment-image.tsx b/tests/fixtures/attachment-image.tsx
new file mode 100644
index 00000000..9ad96adf
--- /dev/null
+++ b/tests/fixtures/attachment-image.tsx
@@ -0,0 +1,58 @@
+// Local-only diagnostic controls; production component in development StrictMode.
+import { StrictMode, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { AttachmentImage } from "../../src/features/messages/AttachmentImage";
+import "../../src/shared/styles/globals.css";
+
+function Fixture() {
+ const [source, setSource] = useState("first");
+ const [visible, setVisible] = useState(false);
+ const [mounted, setMounted] = useState(true);
+ const [hash, setHash] = useState(
+ "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+ );
+ const url = `https://image.test/${source}.svg`;
+ return (
+ <>
+
+
+
+
+
+
+
+ {mounted && (
+
false}
+ />
+ )}
+