Fix mobile chip-strip overlap, reveal-replay stagger, scroll-linked text-fill
Three clone-fidelity fixes from manual review of the acceptance screenshots. Fix 1 — mobile nav chip-strip overlap (generate/css.ts). A horizontally scrollable flex strip (overflow-x:auto flex <ul>) of nowrap chips collapsed because the base viewport reported min-width:0px on the chips (a mobile-only strip that is 0-wide at desktop), so the generator emitted `min-w-0`, letting the chips shrink below their content instead of overflowing — the nowrap text then collided. Suppress `min-w-0` for a nowrap flex item whose flex parent scrolls horizontally; scoped away from legitimate min-w-0 truncation (whose parent does not scroll-x). Verified on a fresh ooni.com clone: 0 chip overlaps at 375, scrollWidth 776 > clientWidth 375. Fix 2 — reveal-replay stagger leaves tiles unpainted (generate/motion.ts). DittoMotion re-hid each revealed element and replayed its entrance on scroll-into-view preserving the captured delay/duration, so a fast scroll / full-page screenshot caught most grid tiles mid-entrance. Cap the replayed delay (<=300ms) and duration (<=600ms), settle each tile per-element a bounded time after it enters view, and make the global failsafe settle (not re-animate) so nothing stays hidden. Validator settle path (__dittoMotionStop) unchanged. Verified: cropin cotton renders 12/12 crop tiles in a normal full-page pass; motion gate reveals 24/24. Fix 3 — scroll-linked text-fill frozen at end state (capture/stabilize.ts, capture/capture.ts, generate/css.ts). A view-timeline text-fill (animation-duration resolves to `auto`) was baked filled: the clone has no scroll timeline, so emitting the animation made it jump to its end keyframe via fill-mode:both. Capture-side, cancel scroll/view-timeline animations before each snapshot so the DOM records the at-rest state; generation-side, suppress the animation-* props when animation-duration is `auto` (we render the at-rest state, never replay a scroll-linked animation). Teach the motion gate to exclude these from the static-CSS expectation so the gate stays honest. Verified on a fresh ooni clone: the "world's no.1 pizza ovens" em is white/gray (rgb 240,240, 240), not filled yellow, at rest; motion gate still passes. Tests: +7 fixtures (css scroll-strip + scroll-timeline, reveal-replay caps, motion-gate scroll-timeline exclusion); 123/123 compiler tests green, full test suite green, typecheck clean. No gate regression on the fresh ooni run vs the 20260704-024247 baseline (all gate pass/fail unchanged; perceptual within 0.0004; motion restored to pass). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5
parent
f3d433c024
commit
afab12ff14
@@ -9,7 +9,7 @@ import { missingHarnessDeps } from "../src/validate/render.js";
|
||||
|
||||
// Minimal IRNode factory — collectExpectedCss only reads id, computedByVp[vp].animation*,
|
||||
// and children, so we build just those fields and cast.
|
||||
function node(id: string, anim: { animationName?: string; animationIterationCount?: string } | null, children: IRNode[] = []): IRNode {
|
||||
function node(id: string, anim: { animationName?: string; animationIterationCount?: string; animationDuration?: string } | null, children: IRNode[] = []): IRNode {
|
||||
return {
|
||||
id,
|
||||
tag: "div",
|
||||
@@ -44,6 +44,20 @@ describe("motion gate — CSS entrance / reveal-replay accounting", () => {
|
||||
assert.deepEqual(fade.names, ["fadeInUp"]);
|
||||
});
|
||||
|
||||
it("collectExpectedCss EXCLUDES a scroll/view-timeline animation (animation-duration:auto)", () => {
|
||||
// Fix 3: the ooni text-fill em (animation-timeline:view → computed animation-duration:auto)
|
||||
// is intentionally NOT emitted (we render the at-rest state, not a scroll replay). It must be
|
||||
// excluded from the static-CSS expectation, not counted as an owed-but-missing animation.
|
||||
const tree = ir(
|
||||
node("n0", null, [
|
||||
node("n358", { animationName: "fillAnimation", animationDuration: "auto", animationIterationCount: "1" }),
|
||||
node("n4", { animationName: "spin", animationDuration: "1s", animationIterationCount: "infinite" }),
|
||||
]),
|
||||
);
|
||||
const got = collectExpectedCss(tree);
|
||||
assert.deepEqual(got.map((e) => e.cid), ["n4"], "scroll-timeline node n358 must be excluded");
|
||||
});
|
||||
|
||||
it("cssReplayedByReveal excludes a captured entrance the clone replays via a reveal", () => {
|
||||
// The cropin regression: n464's fadeInUp is driven by a DittoMotion reveal, so the static
|
||||
// animation-name is deliberately NOT emitted — it must NOT fail emitted=false.
|
||||
|
||||
Reference in New Issue
Block a user