fix(cli): sign SVG stroke-dash motion in the shared motion classifier

A "draw the line in" SVG entrance animates stroke-dasharray /
stroke-dashoffset on a shape whose geometry never changes, so the
box+opacity channels read it as a frozen timeline and `hyperframes check`
false-positives sweep_static on a visibly animating composition.

- Append strokeDashChannel to ELEMENT_CHANNELS: hashes the computed dash
  pattern and offset for SVG geometry elements with a painted stroke;
  `none` / all-zero patterns, unpainted (none, transparent, zero-width,
  stroke-opacity 0) strokes and non-SVG elements contribute "".
- Widen isVisibleElement for stroked geometry with one degenerate bbox
  axis: Chromium's getBoundingClientRect for SVG shapes excludes the
  stroke, so a straight horizontal or vertical connector reports 0 height
  or 0 width and was dropped by the box gate — the most common shape for
  this animation. motion-sample's `visible` bit for such connectors is
  corrected as a consequence.
- Treat <defs>, <clipPath> and <symbol> as never-painted subtrees in the
  hidden-subtree walk (display is not inherited, so descendants are hidden
  only through the ancestor walk) rather than relying on one engine's
  empty-box behaviour for their descendants.

Tests: happy-dom pins for the degenerate-bbox connector (moves / frozen),
a display:none ancestor, <defs>/<clipPath> content and a stroke-opacity:0
decoy; real-Chromium pins for the connector draw-in and the ignored cases.

Co-Authored-By: Miguel Ángel <miguel.sierra@heygen.com>

Author: miga-heygen

docs/packages/cli.mdx

@@ -717,7 +717,8 @@ HTML. Without a sidecar, nothing changes.
 
 `keepsMoving` uses the same motion classifier as the frozen-sweep guard: box
 geometry, opacity, text and generated content, form-control state, painted CSS
-counters, clip-path, variable-font axes, and the pixels of visible
+counters, clip-path, variable-font axes, SVG stroke dashing
+(`stroke-dasharray` / `stroke-dashoffset`), and the pixels of visible
 canvas/video/img elements all count as motion — so a playing same-origin (or
 CORS-readable) background video keeps a scope live on its own. Elements under
 `data-layout-ignore` inside the scope never count; the opt-out does not apply to

packages/cli/src/commands/motion-signature.browser.chromium.test.ts

@@ -355,6 +355,46 @@ describe.skipIf(!RUNS_CHROMIUM)("motion-signature.browser in Chromium", () => {
     expect(after.liveness).not.toBe(before.liveness);
   });
 
+  // Blink reports a 290x0 box for this path (object bounding box, no stroke),
+  // so this also pins that a stroked straight connector counts as visible.
+  it("sees a stroke-dashoffset draw-in on a straight connector", async () => {
+    await load(
+      composition(
+        "#wire { stroke: #000; stroke-width: 4; fill: none; stroke-dasharray: 290; stroke-dashoffset: 290; }",
+        '<svg width="640" height="360"><path id="wire" d="M 10 10 L 300 10"/></svg>',
+      ),
+    );
+    const before = await sample();
+    await mutate('document.getElementById("wire").style.strokeDashoffset = "145"');
+    const after = await sample();
+
+    expect(after.sweep).not.toBe(before.sweep);
+    expect(after.liveness).not.toBe(before.liveness);
+  });
+
+  // Blink already reports an empty box inside <defs> / <clipPath>; this pins
+  // that the platform and the classifier agree, not the container rule alone.
+  it("ignores stroke-dash motion under display:none and inside <defs> / <clipPath>", async () => {
+    await load(
+      composition(
+        "path { stroke: #000; stroke-width: 4; fill: none; stroke-dasharray: 290; stroke-dashoffset: 290; } #offstage { display: none; }",
+        `<svg width="640" height="360">
+          <g id="offstage"><path id="hidden" d="M 10 10 L 300 10"/></g>
+          <defs><path id="template" d="M 10 20 L 300 20"/></defs>
+          <clipPath id="reveal"><path id="clip" d="M 10 30 L 300 30"/></clipPath>
+          <rect id="anchor" x="10" y="100" width="200" height="50" fill="#f00"/>
+        </svg>`,
+      ),
+    );
+    const before = await sample();
+    await mutate(
+      'for (const id of ["hidden", "template", "clip"]) document.getElementById(id).style.strokeDashoffset = "0"',
+    );
+    const after = await sample();
+
+    expect(after).toEqual(before);
+  });
+
   it("sees textarea value and checkbox indeterminate changes", async () => {
     await load(
       composition(

packages/cli/src/commands/motion-signature.browser.js

@@ -19,16 +19,16 @@
 // bucketing, while the sweep guard wants exact (0.01) rounding because it asks
 // whether the seek moved anything at all.
 //
-// Adding a channel (e.g. SVG stroke-dasharray/dashoffset): append one reader
+// Adding a channel (e.g. SVG fill-opacity): append one reader
 // `(element, ctx) => string` to BOX_CHANNELS (reads the element's own box,
-// including a control's widget type and checked state) or CONTENT_CHANNELS (reads what the
-// element's contents paint — text, pseudo content, control values, media
-// pixels — which `content-visibility: hidden` skips). `ctx`
-// carries the element's computed style, its ::before/::after styles, its
-// inherited opacity, and the quantize flag. A reader returns a string that is
-// equal between two samples iff that channel did not visibly change; return ""
-// for elements the channel does not apply to so ordinary compositions gain no
-// payload.
+// including a control's widget type and checked state, or an SVG shape's
+// stroke) or CONTENT_CHANNELS (reads what the element's contents paint — text,
+// pseudo content, control values, media pixels — which
+// `content-visibility: hidden` skips). `ctx` carries the element's computed
+// style, its ::before/::after styles, its inherited opacity, and the quantize
+// flag. A reader returns a string that is equal between two samples iff that
+// channel did not visibly change; return "" for elements the channel does not
+// apply to so ordinary compositions gain no payload.
 //
 // Signatures are a single opaque string per sample (not a structured array):
 // Node only ever needs equality, never per-element diffing. Textual channels
@@ -37,6 +37,17 @@
 (function () {
   const IGNORE_TAGS = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT", "META", "LINK"]);
   const MEDIA_TAGS = new Set(["CANVAS", "VIDEO", "IMG"]);
+  // SVG containers whose direct content is never painted: <defs> and
+  // <clipPath> only lend geometry to a referencing element, and <symbol>
+  // renders only as <use> instances, whose shadow trees querySelectorAll
+  // cannot reach. Blink happens to report an empty box for their descendants,
+  // but a never-painted subtree should be excluded by rule, not by one
+  // engine's bbox behaviour. SVG tag names are case-preserved (`clipPath`),
+  // hence the lower-cased match.
+  const UNPAINTED_SVG_CONTAINERS = new Set(["defs", "clippath", "symbol"]);
+  // A computed stroke that paints nothing: `none`, or a fully transparent
+  // colour (`transparent` computes to rgba(0, 0, 0, 0)).
+  const TRANSPARENT_COLOR = /^(?:transparent|rgba\([^)]*,\s*0(?:\.0+)?\))$/;
   const FNV_OFFSET_BASIS = 2166136261;
   const FNV_PRIME = 16777619;
   const LIVENESS_POSITION_BUCKET_PX = 2;
@@ -109,17 +120,65 @@
     );
   }
 
+  // Whether `element` starts an unrendered subtree: nothing under it paints
+  // and nothing under it can feed a painted counter(). `display` is not
+  // inherited — a child of a display:none parent still computes display:block,
+  // and a shape inside <defs> computes as painted — so compositionSignature
+  // propagates this to descendants itself. The platform decides where it can
+  // (checkVisibility: display:none and skipped contents); the fallback is
+  // display:none. display:contents has no box of its own but its
+  // pseudo-elements and children render, so it stays an owner — except as
+  // the child of a host that skips its contents, where its pseudo-elements
+  // paint nothing either. The platform check cannot tell that from an
+  // ordinary display:contents host (both have no box), so the parent's
+  // skipsContents verdict (`parentSkipsContents`) decides; a display:contents
+  // child of an off-screen `auto` host is not caught (see
+  // compositionSignature). Without the platform check a skipped host is
+  // itself unrendered, so the caller never reaches this with a true
+  // `parentSkipsContents`. An unpainted SVG container
+  // (UNPAINTED_SVG_CONTAINERS) is excluded by rule: its shapes have layout
+  // boxes, so checkVisibility cannot know they never reach the screen.
+  function startsUnrenderedSubtree(element, style, platformDecides, parentSkipsContents) {
+    if (UNPAINTED_SVG_CONTAINERS.has(element.tagName.toLowerCase())) return true;
+    if (style.display === "contents") return parentSkipsContents;
+    return platformDecides
+      ? !element.checkVisibility(RENDERED_BOX_OPTIONS)
+      : style.display === "none";
+  }
+
+  function paintsStroke(style) {
+    const stroke = cssValue(style.stroke);
+    return (
+      stroke !== "" &&
+      !TRANSPARENT_COLOR.test(stroke) &&
+      Number.parseFloat(style.strokeWidth) > 0 &&
+      Number.parseFloat(style.strokeOpacity) > 0
+    );
+  }
+
+  // An SVG geometry element (path/circle/ellipse/rect/line/polyline/polygon)
+  // with a painted stroke. Chromium's getBoundingClientRect for SVG shapes is
+  // the object bounding box WITHOUT the stroke, so a straight horizontal or
+  // vertical connector reports 0 height or 0 width regardless of stroke-width
+  // even though it is plainly on screen.
+  function isStrokedShape(element, style) {
+    return element instanceof SVGGeometryElement && paintsStroke(style);
+  }
+
   // Visibility floor: checkVisibility (as layout-audit.browser.js
   // isVisibleElement's opacity-floor path; its default path skips it and so
   // cannot see skipped contents), then display/visibility, then inherited
-  // opacity, then a non-empty box. Kept local rather than shared because
-  // layout-audit is also installed and tested on its own; this module owns the
-  // decision for both motion samplers. The author opt-out (data-layout-ignore /
-  // data-layout-check=ignore) is NOT applied here: motion-sample reports this
-  // bit for explicitly asserted selectors, and an assertion naming an element
-  // outranks a layout-audit opt-out. compositionSignature applies the opt-out
-  // itself (see there). clip-path is not probed either; it is a channel, so a
-  // clip-path wipe over a static box counts as motion directly.
+  // opacity, then a non-empty box — widened by one case: a stroked SVG shape
+  // whose geometry bbox is degenerate along one axis (see isStrokedShape) is
+  // on screen even though that floor rejects it. Kept local rather than shared
+  // because layout-audit is also installed and tested on its own; this module
+  // owns the decision for both motion samplers. The author opt-out
+  // (data-layout-ignore / data-layout-check=ignore) is NOT applied here:
+  // motion-sample reports this bit for explicitly asserted selectors, and an
+  // assertion naming an element outranks a layout-audit opt-out.
+  // compositionSignature applies the opt-out itself (see there). clip-path is
+  // not probed either; it is a channel, so a clip-path wipe over a static box
+  // counts as motion directly.
   // fallow-ignore-next-line complexity
   function isVisibleElement(element, style, opacity) {
     if (IGNORE_TAGS.has(element.tagName)) return false;
@@ -129,10 +188,13 @@
     ) {
       return false;
     }
-    if (isHiddenStyle(style || getComputedStyle(element))) return false;
+    const computed = style || getComputedStyle(element);
+    if (isHiddenStyle(computed)) return false;
     if ((opacity === undefined ? opacityChain(element) : opacity) < 0.2) return false;
     const rect = element.getBoundingClientRect();
-    return rect.width > 0.5 && rect.height > 0.5;
+    if (rect.width > 0.5 && rect.height > 0.5) return true;
+    // A stroked shape paints along its one non-degenerate axis.
+    return isStrokedShape(element, computed) && (rect.width > 0.5 || rect.height > 0.5);
   }
 
   function foldField(hash, value) {
@@ -190,6 +252,25 @@
     return clip ? hashFields([clip]) : "";
   }
 
+  // `none` and an all-zero list (`0`, `0px 0px`) both render a solid stroke,
+  // on which the offset has no visible effect.
+  function dashPattern(style) {
+    const dashes = cssValue(style.strokeDasharray);
+    if (!dashes) return "";
+    return dashes.split(/[\s,]+/).some((dash) => Number.parseFloat(dash) > 0) ? dashes : "";
+  }
+
+  // A "draw the line in" SVG entrance animates stroke-dasharray /
+  // stroke-dashoffset on a shape whose geometry never changes: no box, no
+  // opacity, only how much of the stroke is currently dash-visible. Without a
+  // dash pattern the offset has no visible effect, and without a painted
+  // stroke neither does, so ordinary shapes stay "".
+  function strokeDashChannel(element, ctx) {
+    if (!isStrokedShape(element, ctx.style)) return "";
+    const dashes = dashPattern(ctx.style);
+    return dashes ? hashFields([dashes, ctx.style.strokeDashoffset || ""]) : "";
+  }
+
   // Direct text nodes only: descendants are signed separately, and a hidden
   // descendant's text mutation must not masquerade as visible motion.
   function textChannel(element) {
@@ -271,14 +352,15 @@
   }
 
   // The element's own box still paints when its contents are skipped
-  // (content-visibility: hidden) — including a checkbox's check glyph; its
-  // text, pseudo boxes, control value, and replaced content (a canvas/video/img's
-  // pixels) do not.
+  // (content-visibility: hidden) — including a checkbox's check glyph and an
+  // SVG shape's stroke; its text, pseudo boxes, control value, and replaced
+  // content (a canvas/video/img's pixels) do not.
   const BOX_CHANNELS = [
     boxChannel,
     opacityChannel,
     fontAxesChannel,
     clipPathChannel,
+    strokeDashChannel,
     controlWidgetChannel,
   ];
   const CONTENT_CHANNELS = [
@@ -390,28 +472,22 @@
     const quantize = !!(options && options.quantize);
     const parts = [];
     const boxOwners = [];
-    // Unrendered elements (display:none subtrees, skipped contents) paint
-    // nothing and cannot feed a painted counter(). The platform decides where it
-    // can; the fallback is display:none and content-visibility:hidden hosts,
-    // propagated to descendants. display:contents has no box of its own but its
-    // pseudo-elements and children render, so it stays an owner — except as
-    // the child of a host that skips its contents, where its pseudo-elements
-    // paint nothing either. The platform check cannot tell that from an
-    // ordinary display:contents host (both have no box), so the parent's
-    // skipsContents verdict decides; a display:contents child of an off-screen
-    // `auto` host is not caught (see below).
+    // Unrendered subtrees (see startsUnrenderedSubtree; without the platform
+    // check, content-visibility:hidden hosts too) paint nothing and cannot feed
+    // a painted counter(); membership is propagated to descendants here, and
+    // hosts that skip their contents are remembered so a display:contents
+    // child of one is pruned as well.
     const unrenderedBelow = new Set();
     const skippedHosts = new Set();
     for (const element of [root, ...root.querySelectorAll("*")]) {
       if (IGNORE_TAGS.has(element.tagName)) continue;
       const style = getComputedStyle(element);
       const parent = element.parentElement;
       const platformDecides = typeof element.checkVisibility === "function";
-      const noBox = platformDecides
-        ? !element.checkVisibility(RENDERED_BOX_OPTIONS)
-        : style.display === "none";
-      const boxlessOwner = style.display === "contents" && !skippedHosts.has(parent);
-      if (unrenderedBelow.has(parent) || (noBox && !boxlessOwner)) {
+      if (
+        unrenderedBelow.has(parent) ||
+        startsUnrenderedSubtree(element, style, platformDecides, skippedHosts.has(parent))
+      ) {
         unrenderedBelow.add(element);
         continue;
       }