domotion-svg 0.2.2 → 0.3.2

package/src/tree-ops/frame-merge.ts

@@ -152,11 +152,24 @@ function parseAttrs(s: string): Record<string, string> {
  * including `id`, those two defs would collapse into one and `<use href="#g198"/>`
  * references would break — see frame-merge.test.ts "preserves distinct ids
  * for paths with identical d".
+ *
+ * Resource references (`clip-path`, `mask`, `filter`) are included because
+ * they point at frame-scoped defs whose IDs are unique per frame. Two
+ * wrappers with different clip-path ids are NOT the same logical element
+ * even if every other attribute matches — merging them would (a) drop one
+ * frame's clip-path entirely, and (b) push that frame's unique content
+ * into the merge bucket of a different frame, which then sorts as one
+ * earlier-firstFrame group and lets later-frame siblings (e.g. solid
+ * background rects) emit *after* the content they should sit underneath.
+ * See frame-merge.test.ts "keeps per-frame body bg ordered before content".
  */
 export function structuralFingerprint(n: ParsedNode): string {
   if (n.kind === "text") return `T:${n.text}`;
   const a = n.attrs ?? {};
-  const keyAttrs = ["id", "transform", "href", "x", "y", "d", "width", "height", "fill", "role", "class"];
+  const keyAttrs = [
+    "id", "transform", "href", "x", "y", "d", "width", "height",
+    "fill", "role", "class", "clip-path", "mask", "filter",
+  ];
   const pairs = keyAttrs.filter((k) => a[k] != null).map((k) => `${k}=${a[k]}`);
   return `${n.tag}|${pairs.join(",")}`;
 }
@@ -312,7 +325,7 @@ function mergeNode(
   const parts: string[] = [];
   for (const g of groups) {
     const visibleFrames = g.occurrences.map((o, i) => (o != null ? i : -1)).filter((i) => i >= 0);
-    const contents = g.occurrences.filter((o) => o != null) as ParsedNode[];
+    const contents = g.occurrences.filter((o): o is ParsedNode => o != null);
 
     // Fast path: this element is byte-identical across all its occurrences.
     const raws = new Set(contents.map((c) => c.raw));
@@ -428,9 +441,14 @@ function buildTimelineKeyframes(name: string, visibleFrames: number[], timing: F
   if (rangeStart != null && prev != null) ranges.push([rangeStart, prev]);
 
   // Build keyframe stops. Use step-end so opacity switches instantly.
-  // DM-599: emit `display: none/inline` alongside opacity so the browser
-  // can skip painting elements that aren't currently in their visible-frames
-  // window. Both properties snap together under step-end timing.
+  // DM-599: emit a paint-skip toggle alongside opacity so the browser can
+  // skip painting elements that aren't currently in their visible-frames
+  // window. DM-641: this was `display: none/inline`, which broke for any
+  // element whose 0% keyframe is `display: none` — Chromium parks the
+  // animation when the element drops out of the render tree and never
+  // ticks the keyframe that would bring it back. Switching to
+  // `visibility` keeps the element rendered (still no paint) so the
+  // animation continues across cycles.
   const stops: Array<[number, number]> = []; // (pct, opacity)
   stops.push([0, 0]);
   for (const [lo, hi] of ranges) {
@@ -446,7 +464,7 @@ function buildTimelineKeyframes(name: string, visibleFrames: number[], timing: F
   stops.push([100, 0]);
 
   const lines = stops.map(([p, o]) =>
-    `      ${p.toFixed(3)}% { opacity: ${o}; display: ${o === 1 ? "inline" : "none"}; }`,
+    `      ${p.toFixed(3)}% { opacity: ${o}; visibility: ${o === 1 ? "visible" : "hidden"}; }`,
   );
   return `    @keyframes ${name} {\n${lines.join("\n")}\n    }\n    .${name} { animation: ${name} var(--scene-dur) infinite; animation-timing-function: step-end; }`;
 }

package/src/tree-ops/tree-diff.ts

@@ -215,7 +215,9 @@ export function entriesOfKind(diff: TreeDiff, ...kinds: DiffEntryKind[]): DiffEn
  * per-element keyframes.
  */
 export function dominantTranslate(diff: TreeDiff): { dx: number; dy: number; fraction: number } | null {
-  const movers = diff.entries.filter((e) => e.kind === "translated") as Array<DiffEntry & { dx: number; dy: number }>;
+  const movers = diff.entries.filter((e): e is DiffEntry & { dx: number; dy: number } =>
+    e.kind === "translated" && typeof e.dx === "number" && typeof e.dy === "number",
+  );
   if (movers.length === 0) return null;
   // Bucket by rounded (dx, dy) and pick the largest bucket.
   const buckets = new Map<string, { dx: number; dy: number; n: number }>();

package/src/tree-ops/viewbox-culling.test.ts

@@ -187,8 +187,9 @@ describe("cullElementsOutsideViewBox — tree walk", () => {
     expect(tree.children![1].cullClass).toBe("cull-0");
     // One coalesced keyframes block, not two.
     expect((css.match(/@keyframes cull-\d+/g) ?? []).length).toBe(1);
-    expect(css).toContain("display: inline");
-    expect(css).toContain("display: none");
+    // DM-641: keyframes now toggle visibility instead of display.
+    expect(css).toContain("visibility: visible");
+    expect(css).toContain("visibility: hidden");
   });
 
   it("element fully outside viewBox under an animation that never reaches it: alwaysHidden", () => {
@@ -210,6 +211,42 @@ describe("cullElementsOutsideViewBox — tree walk", () => {
     expect(css).toBe("");
   });
 
+  it("DM-650: parent bbox outside viewBox, child bbox inside — parent kept, child kept, all visible", () => {
+    // Reproduces NYT-mobile-scroll: at scrollY=844 the body element has
+    // height: 100vh (height=844) and rect.top=-844, so its bbox sits
+    // exactly above the viewport (b.y + b.h = 0). Children are at their
+    // own viewport-relative coordinates and ARE in-viewport. Before the
+    // fix, the bottom-up walk culled the body and skipped recursion,
+    // hiding the whole subtree → seg renders white.
+    const tree: CapturedElement = el({
+      x: 0, y: -844, width: 390, height: 844, tag: "body",
+      children: [
+        el({ x: 0, y: 100, width: 390, height: 200, tag: "div", text: "headline" }),
+        el({ x: 0, y: 400, width: 390, height: 100, tag: "p", text: "body copy" }),
+      ],
+    });
+    cullElementsOutsideViewBox(tree, 390, 844, undefined, 0, 1000);
+    expect(tree.displayNone).toBeFalsy();
+    expect(tree.children![0].displayNone).toBeFalsy();
+    expect(tree.children![1].displayNone).toBeFalsy();
+  });
+
+  it("DM-650: parent bbox outside, every child also outside — parent AND children all hidden", () => {
+    // Same shape as above but with children also outside viewBox. Now it
+    // IS safe to mark the parent displayNone (and every descendant too).
+    const tree: CapturedElement = el({
+      x: 0, y: -844, width: 390, height: 844, tag: "body",
+      children: [
+        el({ x: 0, y: -800, width: 390, height: 100, tag: "div" }),     // above viewBox
+        el({ x: 0, y: -700, width: 390, height: 200, tag: "p" }),       // above viewBox
+      ],
+    });
+    cullElementsOutsideViewBox(tree, 390, 844, undefined, 0, 1000);
+    expect(tree.displayNone).toBe(true);
+    expect(tree.children![0].displayNone).toBe(true);
+    expect(tree.children![1].displayNone).toBe(true);
+  });
+
   it("respects child's own animId over inherited animation", () => {
     // Parent has a scroll animation; child has its OWN slide-in animation.
     // Child's culling should use its OWN animation, not the parent's.
@@ -248,9 +285,8 @@ describe("cullElementsOutsideViewBox — keyframes structure", () => {
     const { css } = cullElementsOutsideViewBox(tree, VW, VH, [anim], 0, 1000);
     expect(css).toContain("animation-timing-function: step-end");
     expect(css).toContain("var(--scene-dur)");
-    // 0% bookend with display:none.
-    expect(css).toMatch(/0% \{ display: none/);
-    // 100% bookend with display:none.
-    expect(css).toMatch(/100% \{ display: none/);
+    // 0% / 100% bookends with visibility:hidden (DM-641 — was display:none).
+    expect(css).toMatch(/0% \{ visibility: hidden/);
+    expect(css).toMatch(/100% \{ visibility: hidden/);
   });
 });

package/src/tree-ops/viewbox-culling.ts

@@ -262,12 +262,25 @@ export function cullElementsOutsideViewBox(
   const windowToClass = new Map<string, string>();
   const cssBlocks: string[] = [];
 
-  const walk = (el: CapturedElement, inheritedCtx: AnimationFrameContext | null): void => {
+  // Walk bottom-up: recurse FIRST, then decide the element's own cull. A
+  // parent can only safely inherit `displayNone` if every descendant is
+  // also fully hidden — children of an `overflow: visible` parent paint
+  // outside the parent's bbox and stay in-viewport even when the parent's
+  // bbox is entirely above/below the viewBox (DM-650: NYT body is
+  // height: 100vh, so at scrollY > 0 the body bbox sits exactly above
+  // the viewport but its descendants are in-viewport). Returns true if
+  // any element in the subtree (including `el` itself) is visible.
+  const walk = (el: CapturedElement, inheritedCtx: AnimationFrameContext | null): boolean => {
     const { ctx, decision } = decideForElement(el, viewportW, viewportH, inheritedCtx, animsById);
-    if (decision.alwaysHidden) {
+    let anyDescendantVisible = false;
+    if (el.children != null) {
+      for (const child of el.children) {
+        if (walk(child, ctx)) anyDescendantVisible = true;
+      }
+    }
+    if (decision.alwaysHidden && !anyDescendantVisible) {
       el.displayNone = true;
-      // Children inherit displayNone implicitly; don't recurse.
-      return;
+      return false;
     }
     if (decision.visStartPct != null && decision.visEndPct != null) {
       const key = `${r3(decision.visStartPct)},${r3(decision.visEndPct)}`;
@@ -277,14 +290,9 @@ export function cullElementsOutsideViewBox(
         windowToClass.set(key, className);
         cssBlocks.push(buildCullKeyframes(className, decision.visStartPct, decision.visEndPct));
       }
-      // Merge with any existing cullClass (shouldn't happen — each pass
-      // assigns at most one — but be defensive).
       el.cullClass = el.cullClass == null || el.cullClass === "" ? className : `${el.cullClass} ${className}`;
     }
-    // Recurse into children with the (possibly newly inherited) animation context.
-    if (el.children != null) {
-      for (const child of el.children) walk(child, ctx);
-    }
+    return true;
   };
   for (const root of roots) walk(root, null);
 
@@ -292,22 +300,28 @@ export function cullElementsOutsideViewBox(
 }
 
 /**
- * Step-end `@keyframes` block + class rule that toggles `display: inline`
- * during [visStart, visEnd] and `display: none` outside. The 0.001 % gap
+ * Step-end `@keyframes` block + class rule that toggles `visibility: visible`
+ * during [visStart, visEnd] and `visibility: hidden` outside. The 0.001 % gap
  * pattern keeps the discrete snap point inside a sliver-thin keyframe pair
  * regardless of how the animation timing function is configured on the
  * element.
+ *
+ * DM-641: toggling `display` here breaks the same way `fv-${i}` did — when
+ * a culled element starts the cycle at `display: none` the animation engine
+ * never starts ticking and the element stays hidden forever. Using
+ * `visibility` keeps the element in the render tree (still skips painting)
+ * so the animation runs every cycle.
  */
 function buildCullKeyframes(name: string, visStartPct: number, visEndPct: number): string {
   const startMinus = Math.max(0, visStartPct - 0.001).toFixed(3);
   const endPlus = Math.min(100, visEndPct + 0.001).toFixed(3);
   return `    @keyframes ${name} {
-      0% { display: none; }
-      ${startMinus}% { display: none; }
-      ${visStartPct.toFixed(3)}% { display: inline; }
-      ${visEndPct.toFixed(3)}% { display: inline; }
-      ${endPlus}% { display: none; }
-      100% { display: none; }
+      0% { visibility: hidden; }
+      ${startMinus}% { visibility: hidden; }
+      ${visStartPct.toFixed(3)}% { visibility: visible; }
+      ${visEndPct.toFixed(3)}% { visibility: visible; }
+      ${endPlus}% { visibility: hidden; }
+      100% { visibility: hidden; }
     }
     .${name} { animation: ${name} var(--scene-dur) infinite; animation-timing-function: step-end; }`;
 }