Files
ditto.site/compiler/test/gates.test.ts
T
Samraaj BathandClaude Fable 5 5b60ded62d Grid plan equality guard, named-token px validation, breakpoint-ordered source variants, hidden-text diagnostic
- A grid-cols-N recipe plan may only override the authored template when
  computed tracks are near-equal - asymmetric sidebar templates
  (260px 1fr) keep their authored geometry
- Source-intent named tokens (max-w-md etc.) re-emit only when their
  Tailwind-4 value matches the captured computed px; mismatches (older
  token scales) emit the captured value instead
- Per-axis source-variant selection keeps the highest-min-width active
  variant instead of last-in-class-order, matching real Tailwind cascade
  (lg:grid-cols-3 no longer loses to a later md:grid-cols-2 at desktop) -
  latent since the initial commit
- New non-blocking textHiddenInClone metric in the dom gate: counts
  capture-visible text that renders hidden in the clone, so silent
  disappearances surface in reports

435 tests pass (10 new), typecheck clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-04 06:11:14 -07:00

135 lines
6.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { describe, it } from "node:test";
import assert from "node:assert/strict";
import { letterSpacingEquivalent, normHref, countVisibleInCaptureHiddenInClone } from "../src/validate/gates.js";
import type { IR, IRNode } from "../src/normalize/ir.js";
import type { PageSnapshot } from "../src/capture/walker.js";
// FIX 5 — the link gate must not fail a javascript: source href against the clone's sanitized value.
// Generation emits an inert `#` for a `javascript:*` href (React blocks the literal), so normHref
// collapses every javascript: href — on either side — to `#`, letting the two sides match.
describe("normHref collapses javascript: hrefs to # (FIX 5)", () => {
const origin = "https://example.test";
it("normalizes a javascript: source href to #", () => {
assert.equal(normHref("Javascript:{}", origin), "#");
assert.equal(normHref("javascript:void(0)", origin), "#");
});
it("makes a javascript: source match the emitted # value", () => {
assert.equal(normHref("javascript:{}", origin), normHref("#", origin), "source and clone agree");
});
it("still distinguishes a real fragment from a full URL", () => {
assert.equal(normHref("#top", origin), "#top");
assert.equal(normHref("https://example.test/x/", origin), "https://example.test/x");
});
});
// Chromium serializes a computed `letter-spacing: 0` back as the keyword `normal`. The emitter, after
// snapping a sub-0.1px authored tracking to 0, ships `letter-spacing: 0px` — which the CLONE then
// reports as `normal` too, but a source that authored an explicit near-zero px can land on either
// spelling. Gate 4 must treat `normal` and `0px` as equal, or every such node fails on spelling alone.
describe("gate4 letterSpacing normal ↔ 0px normalization", () => {
it("treats `normal` and `0px` as equivalent", () => {
assert.ok(letterSpacingEquivalent("normal", "0px"));
assert.ok(letterSpacingEquivalent("0px", "normal"));
});
it("treats `normal` and `normal` as equivalent", () => {
assert.ok(letterSpacingEquivalent("normal", "normal"));
});
it("treats a sub-2px authored tracking vs `normal` as equivalent (within ±2px)", () => {
// source computed `-0.08px`, clone serialized `normal` — a 0.08px delta, well within tolerance.
assert.ok(letterSpacingEquivalent("-0.08px", "normal"));
assert.ok(letterSpacingEquivalent("normal", "-0.0375px"));
});
it("still equates two close real px values (0.24px vs 0.2px)", () => {
assert.ok(letterSpacingEquivalent("-0.24px", "-0.2px"));
});
it("still FAILS a genuine tracking difference beyond ±2px", () => {
assert.ok(!letterSpacingEquivalent("4px", "normal"));
assert.ok(!letterSpacingEquivalent("normal", "-3px"));
assert.ok(!letterSpacingEquivalent("6px", "2px"));
});
it("passes when the source did not constrain the property (undefined)", () => {
assert.ok(letterSpacingEquivalent(undefined, "0px"));
});
});
// A capture-visible text node that the clone renders hidden (off-screen-shifted / banded /
// width-frozen subtree) is the emil-banner / maxbo-feed regression class. The diagnostic counts
// DISTINCT source cids whose gen counterpart exists but reports visible:false. Non-blocking; it
// only has to be a faithful, deterministic count.
describe("countVisibleInCaptureHiddenInClone diagnostic", () => {
// Minimal IR text leaf: `text` at every listed vp, visible per `vis`.
const leaf = (id: string, text: string, vis: Record<number, boolean>): IRNode => {
const vps = Object.keys(vis).map(Number);
const rec = <T,>(v: T): Record<number, T> => Object.fromEntries(vps.map((vp) => [vp, v]));
return {
id, tag: "a", attrs: {},
visibleByVp: vis,
bboxByVp: rec({ x: 0, y: 0, width: 100, height: 16 }),
computedByVp: rec({} as Record<string, string>),
children: [{ text }],
} as unknown as IRNode;
};
const makeIR = (leaves: IRNode[]): IR => ({
doc: {} as IR["doc"],
root: { id: "n0", tag: "body", attrs: {}, visibleByVp: {}, bboxByVp: {}, computedByVp: {}, children: leaves } as unknown as IRNode,
});
// Minimal clone snapshot: one node per (cid, visible) with matching direct text.
const snap = (nodes: Array<{ cid: string; text: string; visible: boolean }>): PageSnapshot => ({
root: {
tag: "body", attrs: { "data-cid": "n0" }, computed: {}, bbox: { x: 0, y: 0, width: 100, height: 100 }, visible: true,
children: nodes.map((n) => ({
tag: "a", attrs: { "data-cid": n.cid }, computed: {}, bbox: { x: 0, y: 0, width: 100, height: 16 },
visible: n.visible, children: [{ text: n.text }],
})),
},
} as unknown as PageSnapshot);
it("counts a source-visible text node the clone renders hidden", () => {
const ir = makeIR([leaf("n4", "Enrollment open!", { 375: true })]);
const gen = { 375: snap([{ cid: "n4", text: "Enrollment open!", visible: false }]) };
assert.equal(countVisibleInCaptureHiddenInClone(ir, gen, [375]), 1);
});
it("does NOT count a node visible in both source and clone", () => {
const ir = makeIR([leaf("n4", "Enrollment open!", { 375: true })]);
const gen = { 375: snap([{ cid: "n4", text: "Enrollment open!", visible: true }]) };
assert.equal(countVisibleInCaptureHiddenInClone(ir, gen, [375]), 0);
});
it("does NOT count a node the SOURCE itself hid (faithful hide)", () => {
// maxbo n192 @375: source already off-screen (visible:false) — the clone hiding it is correct.
const ir = makeIR([leaf("n192", "Avatar: Fire and Ash", { 375: false, 768: true })]);
const gen = {
375: snap([{ cid: "n192", text: "Avatar: Fire and Ash", visible: false }]),
768: snap([{ cid: "n192", text: "Avatar: Fire and Ash", visible: true }]),
};
assert.equal(countVisibleInCaptureHiddenInClone(ir, gen, [375, 768]), 0);
});
it("counts a node once even when hidden at several viewports (distinct cids)", () => {
const ir = makeIR([leaf("n4", "Enrollment open!", { 375: true, 768: true })]);
const gen = {
375: snap([{ cid: "n4", text: "Enrollment open!", visible: false }]),
768: snap([{ cid: "n4", text: "Enrollment open!", visible: false }]),
};
assert.equal(countVisibleInCaptureHiddenInClone(ir, gen, [375, 768]), 1);
});
it("ignores whitespace-only text nodes", () => {
const ir = makeIR([leaf("n5", " ", { 375: true })]);
const gen = { 375: snap([{ cid: "n5", text: " ", visible: false }]) };
assert.equal(countVisibleInCaptureHiddenInClone(ir, gen, [375]), 0);
});
it("does not count when the clone has no node for the cid (a different miss)", () => {
const ir = makeIR([leaf("n4", "Enrollment open!", { 375: true })]);
const gen = { 375: snap([]) };
assert.equal(countVisibleInCaptureHiddenInClone(ir, gen, [375]), 0);
});
});