Samraaj BathandClaude Fable 5
6e4921884c
Capture: - Hover/focus states are driven with CDP CSS.forcePseudoState instead of moving the real cursor - transparent full-viewport overlay layers were swallowing every pointer hover, silently capturing zero hover states on hover-rich sites - text-wrap (balance/pretty) captured and emitted (Tailwind text-balance/ text-pretty, arbitrary fallback) - Videos re-run <source> selection per viewport before frame-0 normalization: resize-without-reload kept aspect-gated variants stuck on the load-time choice, poisoning mobile ground-truth screenshots - svg roots capture their computed paint; fill="none" with a computed paint (the fill-current pattern) recovers the real color instead of rendering blank Tokens & naming: - Full CSS-Color-4 parsing (oklab/oklch/lab/lch/hsl) so modern colors cluster and earn semantic roles; visually-equal literals share one token; decoration/gradient/shadow colors consult the palette before minting opaque tokens (ridge: 45 opaque tokens -> 15, anthropic: 12 -> 7) - Expanded role vocabulary (background/foreground/primary/accent/border/ surface/muted) with deterministic tiebreaks and a chroma guard - Section names mine CMS section ids and js-* hooks with hashy-suffix stripping (split_callout_JtTWTt -> split-callout-section) 364 tests pass (42 new), typecheck clean; determinism verified by double-regen byte-comparison on two reference runs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
61 lines
3.1 KiB
TypeScript
61 lines
3.1 KiB
TypeScript
import { describe, it } from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import { resolveSvgRootFill, isRealPaint } from "../src/generate/app.js";
|
|
|
|
describe("isRealPaint", () => {
|
|
it("treats none / empty / transparent as non-paint", () => {
|
|
for (const v of [undefined, null, "", " ", "none", "NONE", "transparent", "rgba(0, 0, 0, 0)", "rgba(0,0,0,0)"]) {
|
|
assert.equal(isRealPaint(v), false, `${String(v)} should not paint`);
|
|
}
|
|
});
|
|
it("treats a color / currentColor as a real paint", () => {
|
|
for (const v of ["rgb(255, 255, 255)", "#000", "currentColor", "red", "rgb(0, 0, 0)"]) {
|
|
assert.equal(isRealPaint(v), true, `${v} should paint`);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("resolveSvgRootFill", () => {
|
|
it("keeps a raw fill that is itself a real paint", () => {
|
|
assert.deepEqual(resolveSvgRootFill("#123456", { fill: "rgb(255,255,255)", color: "rgb(0,0,0)" }), { mode: "keep" });
|
|
assert.deepEqual(resolveSvgRootFill("red", null), { mode: "keep" });
|
|
});
|
|
|
|
it("falls back when no raw fill is declared (existing currentColor default)", () => {
|
|
assert.deepEqual(resolveSvgRootFill(undefined, { fill: "rgb(255,255,255)", color: "rgb(255,255,255)" }), { mode: "fallback" });
|
|
assert.deepEqual(resolveSvgRootFill(null, null), { mode: "fallback" });
|
|
});
|
|
|
|
it("recovers currentColor when fill=none but computed fill tracks the element color (wordmark case)", () => {
|
|
// The a16z logo case: fill="none" attribute, but CSS `fill: currentColor` with white color.
|
|
const r = resolveSvgRootFill("none", { fill: "rgb(255, 255, 255)", color: "rgb(255, 255, 255)" });
|
|
assert.equal(r.mode, "emit");
|
|
assert.equal(r.value, "currentColor");
|
|
assert.equal(r.emitColor, "rgb(255, 255, 255)");
|
|
});
|
|
|
|
it("emits the literal computed fill when it differs from the element color", () => {
|
|
const r = resolveSvgRootFill("none", { fill: "rgb(255, 0, 0)", color: "rgb(0, 0, 0)" });
|
|
assert.equal(r.mode, "emit");
|
|
assert.equal(r.value, "rgb(255, 0, 0)");
|
|
assert.equal(r.emitColor, undefined);
|
|
});
|
|
|
|
it("leaves a genuinely unfilled svg as none (computed fill also none)", () => {
|
|
assert.deepEqual(resolveSvgRootFill("none", { fill: "none", color: "rgb(0,0,0)" }), { mode: "keep" });
|
|
assert.deepEqual(resolveSvgRootFill("none", { fill: "rgba(0, 0, 0, 0)", color: "rgb(0,0,0)" }), { mode: "keep" });
|
|
// No computed paint captured at all → cannot prove it paints → stays none.
|
|
assert.deepEqual(resolveSvgRootFill("none", null), { mode: "keep" });
|
|
assert.deepEqual(resolveSvgRootFill("none", undefined), { mode: "keep" });
|
|
});
|
|
|
|
it("does not emit color when the recovered fill is currentColor but color is not a real paint", () => {
|
|
// fill == color but color is transparent → cannot be a meaningful currentColor recovery;
|
|
// the equality branch is guarded on isRealPaint(color), so it emits the literal fill instead.
|
|
const r = resolveSvgRootFill("none", { fill: "rgb(0, 128, 0)", color: "transparent" });
|
|
assert.equal(r.mode, "emit");
|
|
assert.equal(r.value, "rgb(0, 128, 0)");
|
|
assert.equal(r.emitColor, undefined);
|
|
});
|
|
});
|