diff --git a/compiler/src/generate/css.ts b/compiler/src/generate/css.ts index 0ae8a84..6cf25c7 100644 --- a/compiler/src/generate/css.ts +++ b/compiler/src/generate/css.ts @@ -1540,6 +1540,18 @@ function contentSizedFlexRow(container: IRNode, viewports: number[]): Set 0) return null; } + // The sizing probe is ground truth: if it proved `width:auto` does NOT reproduce an item's width at + // any painted viewport (`wAuto:false`), that item is load-bearing and cannot be dropped. Because this + // rule is all-or-nothing per line (dropping a subset shifts siblings via justify-content), one such + // item vetoes the whole line. This catches a wrapping-text item — e.g. a paragraph in a + // `justify-content:flex-end` row paints at its balanced-wrap width (below max-content), but + // `width:auto` on the block child fills the line to max-content — which the geometric slack test + // alone (no shrink fired) would wrongly convert to auto. + for (const it of items) { + for (const vp of viewports) { + if (it.sizingByVp?.[vp]?.wAuto === false) return null; + } + } // At every width: the visible items + gaps + margins must not overflow the container (slack ≥ 0). for (const vp of viewports) { const pcs = container.computedByVp[vp]; const pb = container.bboxByVp[vp]; @@ -1923,6 +1935,12 @@ function contentSizedFlexItemAuto(node: IRNode, parentNode: IRNode | undefined, const cs = node.computedByVp[vp]; const pcs = parentNode.computedByVp[vp]; const nb = node.bboxByVp[vp]; const pb = parentNode.bboxByVp[vp]; if (!cs || !pcs || !nb || !pb || !node.visibleByVp[vp] || (cs.display || "") === "none") continue; + // The sizing probe is ground truth: if it proved `width:auto` does NOT reproduce the captured + // width at any painted viewport (`wAuto:false`), the geometric "never shrank ⇒ at content size" + // read below is wrong — e.g. a wrapping paragraph in a `justify-content:flex-end` row paints at + // its balanced-wrap width (below max-content), but `width:auto` on the block child fills the line + // to max-content and left-aligns it. Honor the probe over the heuristic. + if (node.sizingByVp?.[vp]?.wAuto === false) return false; if (!/^(flex|inline-flex)$/.test(pcs.display || "")) return false; const dir = pcs.flexDirection || "row"; if (dir !== "row" && dir !== "row-reverse") return false; // width = main axis only for rows @@ -2218,11 +2236,22 @@ function confersDefiniteHeight(node: IRNode, parentNode: IRNode | undefined, got * change. transform-origin follows transform (skipped when no transform varies). */ const ANIM_OWNED = new Set(["opacity", "transform"]); const EMPTY_SET = new Set(); -function animOwnedProps(node: IRNode, baseVp: number): Set { - const cs = node.computedByVp[baseVp]; - if (!cs || (cs.animationName || "none") === "none") return EMPTY_SET; - if (!/infinite/.test(cs.animationIterationCount || "1")) return EMPTY_SET; - return ANIM_OWNED; +/** True when an INFINITE CSS animation is active on the node at this viewport (so it perpetually + * drives opacity/transform — the captured value is a frozen animation phase, not design). */ +function hasInfiniteAnim(cs: StyleMap | undefined): boolean { + if (!cs || (cs.animationName || "none") === "none") return false; + return /infinite/.test(cs.animationIterationCount || "1"); +} +/** Properties an infinite animation owns (so their per-viewport captured values are frozen phase + * noise to suppress). Sampled across ALL emitted viewports, not just the base: a CSS marquee that + * runs only below a breakpoint (Webflow's `max-lg` logo/text tracks) is `animation:none` at the + * base (desktop) width but still freezes a random `translateX` at the mobile/tablet bands — banding + * those bakes a mid-scroll offset that shifts content offscreen at rest. When the animation owns the + * transform at ANY width, the frozen per-band deltas are dropped everywhere and the base value holds + * (the runtime `@keyframes` starts at translateX(0), so the strip renders aligned until it animates). */ +function animOwnedProps(node: IRNode, viewports: number[]): Set { + for (const vp of viewports) if (hasInfiniteAnim(node.computedByVp[vp])) return ANIM_OWNED; + return EMPTY_SET; } @@ -3292,7 +3321,10 @@ export function collectNodeRules(ir: IR, assetMap: Map, includeN dropInsets.delete("bottom"); dropInsets.delete("left"); } - const animOwned = animOwnedProps(node, baseVp); // opacity/transform driven by an infinite animation + // opacity/transform driven by an infinite animation at the base OR any emitted band (a marquee + // gated to a breakpoint owns the transform only where it runs, but freezes a mid-scroll offset + // at the OTHER bands — suppress those frozen deltas at every width). + const animOwned = animOwnedProps(node, [baseVp, ...bands.map((b) => b.vp)]); const baseDecls = finalizeDecls(declsForViewport(node, parentNode?.computedByVp[baseVp], baseVp, assetMap, centeredBase, colorVar, ir.doc.perViewport[baseVp]?.scrollHeight, widthPlan, gridColsByVp?.get(baseVp), gridRowsByVp?.get(baseVp), flowH, dropInsets, leftPct, heightFill, geometry, dropGridRows, dropViewportMaxWidth, nowrapText, keepIdentityTransform), tokenResolver); const nr: NodeRule = { base: baseDecls, bands: [] }; diff --git a/compiler/src/normalize/ir.ts b/compiler/src/normalize/ir.ts index 7b5b485..a85cd25 100644 --- a/compiler/src/normalize/ir.ts +++ b/compiler/src/normalize/ir.ts @@ -226,6 +226,35 @@ export function canonicalizeTransforms(computedByVp: Record): } } +/** True when an INFINITE CSS animation is active at this viewport. Such an animation perpetually + * drives its animated properties (opacity/transform), so the captured value is a frozen phase of + * the loop, not authored design. */ +function hasInfiniteAnimation(cs: StyleMap | undefined): boolean { + if (!cs || (cs.animationName || "none") === "none") return false; + return /infinite/.test(cs.animationIterationCount || "1"); +} + +/** + * Neutralize the transform of a node that carries an INFINITE animation at ANY captured viewport. + * The capture shutter froze the marquee/spinner mid-loop, and — critically — a CSS animation gated + * to a breakpoint (Webflow's `max-lg` logo/big-text tracks) reads `animation:none` at the widths + * where it does NOT run, yet the browser still reports the last frozen `translateX` there. Banding + * those frozen values bakes a mid-scroll offset that shifts content offscreen-left AT REST (rows + * starting mid-glyph). The runtime `@keyframes` owns the transform and starts at translateX(0), so + * the faithful at-rest value is `none` at every width; generation's `animOwnedProps` then keeps the + * base holding while the animation drives it live. Only fires when a genuine infinite animation is + * present at some viewport — a statically-offset design element (no animation) is untouched. + * Deterministic, in place; only touches the `transform` slot. + */ +export function neutralizeAnimatedTransforms(computedByVp: Record): void { + const vps = Object.keys(computedByVp).map(Number); + if (!vps.some((vp) => hasInfiniteAnimation(computedByVp[vp]))) return; + for (const vp of vps) { + const cs = computedByVp[vp]; + if (cs && cs.transform && cs.transform !== "none") cs.transform = "none"; + } +} + /** Full identity signature (tag + id + class). */ function sigFull(n: RawNode): string { return `${n.tag}#${n.attrs?.id ?? ""}.${(n.attrs?.class ?? "").trim()}`; @@ -370,6 +399,10 @@ export function buildIR(sourceDir: string, viewports: number[], opts?: { motion? // the generator's per-band delta treats them uniformly and a scroll/composite-noise transform // at one width can't leak across bands. canonicalizeTransforms(computedByVp); + // Drop transforms frozen mid-loop by an infinite animation (marquees/spinners) at every viewport — + // including the breakpoints where the animation is gated off but the browser still reports the last + // frozen offset. Prevents a baked mid-scroll translateX from clipping content offscreen at rest. + neutralizeAnimatedTransforms(computedByVp); const node: IRNode = { id: nextId(), diff --git a/compiler/test/css.test.ts b/compiler/test/css.test.ts index ae43449..63c4448 100644 --- a/compiler/test/css.test.ts +++ b/compiler/test/css.test.ts @@ -617,3 +617,82 @@ describe("collectNodeRules lottie mount height pin", () => { assert.ok(!/227px/.test(all), `without the mount flag the varying height should flow, got: ${all}`); }); }); + +// Defect E — a content-sized flex ROW's items are dropped to `width:auto` only when NO shrink fired +// (positive slack ⇒ items at content size). But a WRAPPING text leaf paints at its balanced-wrap +// width, which is BELOW its max-content: `width:auto` on the block child fills the line to +// max-content and left-aligns it, so the narrow right-pushed paragraph blows out to full-width. The +// sizing probe already read `wAuto:false` (auto does NOT reproduce the width); it must veto the +// whole line (the rule is all-or-nothing — dropping a subset shifts siblings via justify-content). +describe("generateCss content-sized flex row (probe veto for wrapping text)", () => { + // One

child, sole item of a `flex; justify-content:flex-end` row, `flex:0 1 auto`, that paints + // narrower than the container at every width (wraps below max-content) with positive slack. + function missionRow(pSizing: RawSizing) { + const p = xNode("n1", "p", { + 375: { cs: { display: "block", flexGrow: "0", flexShrink: "1", flexBasis: "auto", width: "276px" }, bbox: { x: 69, y: 0, width: 276, height: 80 }, sizing: pSizing }, + 768: { cs: { display: "block", flexGrow: "0", flexShrink: "1", flexBasis: "auto", width: "529.922px" }, bbox: { x: 176, y: 0, width: 529.92, height: 60 }, sizing: pSizing }, + 1280: { cs: { display: "block", flexGrow: "0", flexShrink: "1", flexBasis: "auto", width: "774.141px" }, bbox: { x: 455, y: 0, width: 774.14, height: 40 }, sizing: pSizing }, + }, [{ text: "Our UX staffing and recruiting teams place the best talent from around the world." }]); + return xNode("n0", "body", { + 375: { cs: { display: "flex", flexDirection: "row", justifyContent: "flex-end" }, bbox: { x: 0, y: 0, width: 375, height: 80 } }, + 768: { cs: { display: "flex", flexDirection: "row", justifyContent: "flex-end" }, bbox: { x: 0, y: 0, width: 706.56, height: 60 } }, + 1280: { cs: { display: "flex", flexDirection: "row", justifyContent: "flex-end" }, bbox: { x: 0, y: 0, width: 1228.81, height: 40 } }, + }, [p]); + } + + it("keeps a width on a wrapping paragraph the probe proved is not auto-reproducible", () => { + // Probe ground truth: width:auto does NOT reproduce (wAuto:false) — the painted width is the + // balanced-wrap width, below max-content (wMax). + const notAuto = (): RawSizing => ({ wAuto: false, wFill: false, hAuto: true, hFill: false, wMin: 95.88, wMax: 706.56 }); + const css = generateCss(xIr(missionRow(notAuto())), new Map()); + const all = allRulesX(css, "n1"); + // It must NOT be emitted as content-auto (which drops width entirely and fills the line). The + // width plan falls to a real width — a fluid percentage or baked px — so the narrow column survives. + assert.ok(/width:/.test(all), `wrapping paragraph must keep a width, not collapse to auto, got: ${all}`); + assert.ok(!/width:auto/.test(all), `probe said wAuto:false — must not emit width:auto, got: ${all}`); + }); + + it("still drops width:auto on a genuinely content-sized row item the probe confirms", () => { + // Probe agrees width:auto reproduces (wAuto:true) — a toolbar/menu item whose width is its + // content. The content-sized-flex-row law should still fire and emit auto (no baked px band). + const isAuto = (): RawSizing => ({ wAuto: true, wFill: false, hAuto: true, hFill: false, wMin: 95.88, wMax: 706.56 }); + const css = generateCss(xIr(missionRow(isAuto())), new Map()); + const all = allRulesX(css, "n1"); + assert.ok(!/width:\d/.test(all), `content-sized item must drop its baked px width, got: ${all}`); + }); +}); + +// Defect C (generate side) — a CSS marquee (infinite `@keyframes` animation) gated to a breakpoint +// (Webflow's `max-lg` logo/text tracks) is `animation:none` at the base but runs at the narrow band. +// The per-band transform delta at the animated width is a FROZEN mid-scroll phase; it must be +// suppressed so the base holds and the runtime keyframes drive the transform (from translateX(0)). +// (The upstream normalize pass zeroes the base residue — see neutralizeAnimatedTransforms; here the +// base is already `none`, and this test covers the band-delta suppression.) +describe("generateCss breakpoint-gated marquee transform band suppression (Defect C)", () => { + function logoStrip() { + const strip = xNode("n1", "div", { + 375: { cs: { display: "grid", animationName: "track", animationIterationCount: "infinite", animationDuration: "35s", transform: "matrix(1, 0, 0, 1, -284.025, 0)" }, bbox: { x: 0, y: 0, width: 345, height: 100 } }, + 768: { cs: { display: "grid", animationName: "track", animationIterationCount: "infinite", animationDuration: "35s", transform: "matrix(1, 0, 0, 1, -280.982, 0)" }, bbox: { x: 0, y: 0, width: 706, height: 100 } }, + 1280: { cs: { display: "grid", animationName: "none", animationIterationCount: "1", transform: "none" }, bbox: { x: 0, y: 0, width: 1228, height: 145 } }, + }); + return xNode("n0", "body", { 375: { bbox: { x: 0, y: 0, width: 375, height: 100 } }, 768: { bbox: { x: 0, y: 0, width: 768, height: 100 } }, 1280: { bbox: { x: 0, y: 0, width: 1280, height: 145 } } }, [strip]); + } + + it("does not bake the frozen mid-scroll translateX at the animated band", () => { + const css = generateCss(xIr(logoStrip()), new Map()); + const all = allRulesX(css, "n1"); + assert.ok(!/matrix\(1, ?0, ?0, ?1, ?-\d/.test(all), `frozen marquee translateX must not be emitted at any band, got: ${all}`); + }); + + it("keeps a per-band transform of a NON-animated element", () => { + // A non-animated element whose transform genuinely varies per band keeps it (no animation owns it). + const el = xNode("n1", "div", { + 375: { cs: { transform: "matrix(1, 0, 0, 1, -40, 0)" }, bbox: { x: -40, y: 0, width: 345, height: 100 } }, + 768: { cs: { transform: "none" }, bbox: { x: 0, y: 0, width: 706, height: 100 } }, + 1280: { cs: { transform: "none" }, bbox: { x: 0, y: 0, width: 1228, height: 100 } }, + }); + const root = xNode("n0", "body", { 375: { bbox: { x: 0, y: 0, width: 375, height: 100 } }, 768: { bbox: { x: 0, y: 0, width: 768, height: 100 } }, 1280: { bbox: { x: 0, y: 0, width: 1280, height: 100 } } }, [el]); + const css = generateCss(xIr(root), new Map()); + assert.ok(/matrix\(1, ?0, ?0, ?1, ?-40/.test(allRulesX(css, "n1")), `a non-animated per-band offset must be kept, got: ${allRulesX(css, "n1")}`); + }); +}); diff --git a/compiler/test/irPrune.test.ts b/compiler/test/irPrune.test.ts index 167d7f1..22a8942 100644 --- a/compiler/test/irPrune.test.ts +++ b/compiler/test/irPrune.test.ts @@ -4,7 +4,7 @@ import { mkdtempSync, mkdirSync, writeFileSync } from "node:fs"; import { tmpdir } from "node:os"; import { join } from "node:path"; import type { RawNode, RawChild } from "../src/capture/walker.js"; -import { buildIR, isTextChild, type IRNode } from "../src/normalize/ir.js"; +import { buildIR, isTextChild, neutralizeAnimatedTransforms, type IRNode } from "../src/normalize/ir.js"; const VPS = [375, 1280]; @@ -116,3 +116,41 @@ describe("IR drops font-metric probe nodes (fix 4)", () => { assert.equal(findByTag(root, "div"), null); }); }); + +// Defect C (normalize side) — an infinite CSS animation gated to a breakpoint (a Webflow `max-lg` +// marquee) is `animation:none` at the widths it does not run, but the browser still reports the last +// FROZEN translateX there. `neutralizeAnimatedTransforms` zeroes the transform at EVERY viewport +// once a genuine infinite animation is present at some width, so no frozen mid-scroll offset (the +// base residue or the animated phases) is banded and clips the strip offscreen at rest. +describe("neutralizeAnimatedTransforms (Defect C)", () => { + it("zeroes the transform at every viewport when an infinite animation runs at some width", () => { + const byVp = { + 375: { animationName: "track", animationIterationCount: "infinite", transform: "matrix(1, 0, 0, 1, -284.025, 0)" } as any, + 768: { animationName: "track", animationIterationCount: "infinite", transform: "matrix(1, 0, 0, 1, -280.982, 0)" } as any, + 1280: { animationName: "none", animationIterationCount: "1", transform: "matrix(1, 0, 0, 1, -9.94731, 0)" } as any, + }; + neutralizeAnimatedTransforms(byVp as any); + assert.equal(byVp[375].transform, "none"); + assert.equal(byVp[768].transform, "none"); + assert.equal(byVp[1280].transform, "none", "the non-animated base residue is neutralized too"); + }); + + it("leaves a static transform untouched when NO viewport carries an infinite animation", () => { + const byVp = { + 375: { animationName: "none", animationIterationCount: "1", transform: "matrix(1, 0, 0, 1, -40, 0)" } as any, + 1280: { animationName: "none", animationIterationCount: "1", transform: "matrix(1, 0, 0, 1, -40, 0)" } as any, + }; + neutralizeAnimatedTransforms(byVp as any); + assert.equal(byVp[375].transform, "matrix(1, 0, 0, 1, -40, 0)", "a deliberate static offset is preserved"); + assert.equal(byVp[1280].transform, "matrix(1, 0, 0, 1, -40, 0)"); + }); + + it("does not fire for a FINITE animation (a one-shot entrance, not a perpetual marquee)", () => { + const byVp = { + 375: { animationName: "slideIn", animationIterationCount: "1", transform: "matrix(1, 0, 0, 1, -100, 0)" } as any, + 1280: { animationName: "slideIn", animationIterationCount: "1", transform: "matrix(1, 0, 0, 1, -100, 0)" } as any, + }; + neutralizeAnimatedTransforms(byVp as any); + assert.equal(byVp[375].transform, "matrix(1, 0, 0, 1, -100, 0)", "finite animations own a settled end state, not a perpetual phase"); + }); +});