From eecba37d3ea6b56bb26860b6a0cdf761c7391d59 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 18 Jan 2026 12:19:32 +0000
Subject: [PATCH] Add reproducer for SimilarContentCard thumbnail bug

---
 .../README.md                                 | 23 ++++++++++
 .../reproduce_issue.js                        | 45 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 examples/reproducers/1-similar-content-card-thumbnail/README.md
 create mode 100644 examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js

diff --git a/examples/reproducers/1-similar-content-card-thumbnail/README.md b/examples/reproducers/1-similar-content-card-thumbnail/README.md
new file mode 100644
index 00000000..62324564
--- /dev/null
+++ b/examples/reproducers/1-similar-content-card-thumbnail/README.md
@@ -0,0 +1,23 @@
+# SimilarContentCard Thumbnail Blur Bug Reproducer
+
+This reproducer demonstrates a bug where `SimilarContentCard` clears the backdrop image (CSS variable `--similar-card-thumb-url`) when the thumbnail is blurred, causing a regression in `SimilarContentCard.test.mjs`.
+
+## Issue
+
+The `SimilarContentCard` component explicitly clears the backdrop image when `shouldBlur` is true to prevent sharp background showing through the blurred image. However, the unit tests expect the backdrop to be set to the fallback image even when blurred.
+
+## How to run
+
+From the repository root:
+
+```bash
+node --import ./tests/test-helpers/setup-localstorage.mjs examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js
+```
+
+## Expected Output
+
+The script should fail with an assertion error indicating that the CSS variable is empty instead of the expected URL.
+
+```
+CSS variable should be set to fallback src. Expected url("https://cdn.example.com/fallback.jpg"), got ''
+```
diff --git a/examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js b/examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js
new file mode 100644
index 00000000..6720ee84
--- /dev/null
+++ b/examples/reproducers/1-similar-content-card-thumbnail/reproduce_issue.js
@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import { SimilarContentCard } from "../../../js/ui/components/SimilarContentCard.js";
+import { createUiDom } from "../../../tests/ui/helpers/jsdom-test-helpers.mjs";
+
+console.log("Reproducing issue: Uncached thumbnails should use fallback and retain blur state");
+
+const { document, window, cleanup } = createUiDom();
+try {
+  const fallbackSrc = "https://cdn.example.com/fallback.jpg";
+  const remoteThumb = "https://cdn.example.com/remote.jpg";
+  const cache = new Map();
+
+  const card = new SimilarContentCard({
+    document,
+    video: {
+      id: "video-456",
+      title: "Test Video",
+      thumbnail: remoteThumb,
+      moderation: { blurThumbnail: true },
+    },
+    thumbnailCache: cache,
+    fallbackThumbnailSrc: fallbackSrc,
+  });
+
+  const root = card.getRoot();
+  const img = root.querySelector("img[data-video-thumbnail]");
+  assert(img, "Thumbnail image should exist");
+
+  const cssVar = window.getComputedStyle(root).getPropertyValue("--similar-card-thumb-url").trim();
+  console.log(`CSS Variable: '${cssVar}'`);
+
+  assert.equal(
+    cssVar,
+    `url("${fallbackSrc}")`,
+    `CSS variable should be set to fallback src. Expected url("${fallbackSrc}"), got '${cssVar}'`
+  );
+
+  console.log("Test PASSED (Unexpectedly?)");
+} catch (error) {
+  console.error("Test FAILED (As expected for a reproducer):");
+  console.error(error.message);
+  process.exit(1);
+} finally {
+  cleanup();
+}