fix(core): a timeline set that hides a timed clip hides it in preview and render

packages/core/src/runtime/init.timelineHidesClip.test.ts

@@ -0,0 +1,93 @@
+import { afterEach, describe, expect, it } from "vitest";
+import gsap from "gsap";
+import { initSandboxRuntimeModular } from "./init";
+import type { RuntimeTimelineLike } from "./types";
+
+// Importing gsap installs it on window; a test opts in by setting window.gsap itself.
+delete window.gsap;
+
+function mountClipHiddenByTimeline() {
+  document.body.innerHTML =
+    `<div id="root" data-composition-id="main" data-root="true" data-start="0" data-duration="5" data-width="640" data-height="360">` +
+    `<div id="clip" class="clip" data-start="0" data-duration="5"></div>` +
+    `<div id="late" class="clip" data-start="1" data-duration="4"></div>` +
+    `</div>`;
+  const tl = gsap.timeline({ paused: true });
+  tl.set("#clip", { visibility: "hidden" }, 2.67);
+  tl.set("#late", { visibility: "hidden" }, 2.67);
+  window.__timelines = { main: tl as unknown as RuntimeTimelineLike };
+  const parent = window.parent;
+  Object.defineProperty(window, "parent", { configurable: true, value: {} });
+  try {
+    initSandboxRuntimeModular();
+  } finally {
+    Object.defineProperty(window, "parent", { configurable: true, value: parent });
+  }
+  return { clip: document.getElementById("clip")!, late: document.getElementById("late")! };
+}
+
+describe("a timeline set that hides a timed clip", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  const paths = {
+    preview: (t: number) => window.__player?.seek(t),
+    render: (t: number) => window.__player?.renderSeek(t),
+  };
+
+  for (const [name, seek] of Object.entries(paths)) {
+    const visibilityAt = (times: number[]) => {
+      const { clip, late } = mountClipHiddenByTimeline();
+      return times.map((t) => {
+        seek(t);
+        return `${clip.style.visibility}/${late.style.visibility}`;
+      });
+    };
+
+    it(`hides the clip from its position on the ${name} path`, () => {
+      expect(visibilityAt([0.5, 1.5, 2.6, 2.7, 4, 2.6, 1.5])).toEqual([
+        "visible/hidden",
+        "visible/visible",
+        "visible/visible",
+        "hidden/hidden",
+        "hidden/hidden",
+        "visible/visible",
+        "visible/visible",
+      ]);
+    });
+
+    it(`hides the clip on a first seek past its position on the ${name} path`, () => {
+      expect(visibilityAt([3]).map((seen) => seen.split("/")[0])).toEqual(["hidden"]);
+    });
+  }
+
+  for (const [name, seek] of Object.entries(paths)) {
+    it(`hides the timed children of a scene a script hides on the ${name} path`, () => {
+      document.body.innerHTML =
+        `<div data-composition-id="main" data-root="true" data-start="0" data-duration="5" data-width="640" data-height="360">` +
+        `<div id="scene" class="clip" data-start="0" data-duration="5">` +
+        `<div id="kid" class="clip" data-start="0" data-duration="5"></div><div id="plain"></div></div></div>`;
+      const tl = gsap.timeline({ paused: true });
+      tl.set("#scene", { visibility: "hidden" }, 2.67);
+      window.__timelines = { main: tl as unknown as RuntimeTimelineLike };
+      const parent = window.parent;
+      Object.defineProperty(window, "parent", { configurable: true, value: {} });
+      try {
+        initSandboxRuntimeModular();
+      } finally {
+        Object.defineProperty(window, "parent", { configurable: true, value: parent });
+      }
+      const computed = () =>
+        ["scene", "kid", "plain"].map(
+          (id) => getComputedStyle(document.getElementById(id)!).visibility[0],
+        );
+      const seen: string[] = [];
+      for (const t of [1, 3, 3.5, 1]) {
+        seek(t);
+        seen.push(computed().join(""));
+      }
+      expect(seen).toEqual(["vvv", "hhh", "hhh", "vvv"]);
+    });
+  }
+});

packages/core/src/runtime/init.ts

@@ -3079,6 +3079,21 @@ export function initSandboxRuntimeModular(): void {
     dueAtLoopStart(el, visibleAt);
 
   const visibilityDecided = new WeakMap<Element, boolean>();
+  // The pass hides with `!important`; a script's write replaces the declaration and drops it. So a
+  // plain inline hidden on a clip in its window is the script's, except on a clip authored that way.
+  const clipsSeen = new WeakSet<Element>();
+  const authoredInlineHidden = new WeakSet<Element>();
+  const hiddenByScript = (el: StylableElement): boolean =>
+    el.style.visibility === "hidden" &&
+    el.style.getPropertyPriority("visibility") !== "important" &&
+    !authoredInlineHidden.has(el);
+  const hiddenUnderScript = new WeakMap<Element, boolean>();
+  const underScriptHiddenClip = (el: Element, rootComp: Element | null): boolean => {
+    for (let up = el.parentElement; up && up !== rootComp; up = up.parentElement) {
+      if (up.hasAttribute("data-start") && isStylableElement(up) && hiddenByScript(up)) return true;
+    }
+    return false;
+  };
   // Every time at which an element's visibility, upcoming or preload decision can flip: its own window
   // edges, the look-ahead and release edges around them, and the window edges of each timed ancestor.
   const decisionEdges = new Map<Element, number[] | null>();
@@ -3135,6 +3150,8 @@ export function initSandboxRuntimeModular(): void {
         (node as HTMLElement).style.visibility !== (decided ? "visible" : "hidden")
       )
         return false;
+      if (underScriptHiddenClip(node, rootComp) !== (hiddenUnderScript.get(node) ?? false))
+        return false;
       let edges = decisionEdges.get(node);
       if (edges === undefined) {
         edges = decisionEdgesOf(node, rootComp, windowOf);
@@ -3197,12 +3214,24 @@ export function initSandboxRuntimeModular(): void {
       // Descendants must not override a hidden ancestor clip. CSS visibility can
       // otherwise leak child pixels through inactive scenes because a descendant
       // with visibility:visible escapes an ancestor's visibility:hidden.
+      const underScript = underScriptHiddenClip(rawNode, rootComp);
+      hiddenUnderScript.set(rawNode, underScript);
       const isVisibleNow =
         visibleAt(rawNode, currentTime) &&
-        clipChainVisibleAt(rawNode.parentElement, currentTime, visibleAt, rootComp);
+        clipChainVisibleAt(rawNode.parentElement, currentTime, visibleAt, rootComp) &&
+        !underScript;
       visibilityDecided.set(rawNode, isVisibleNow);
       const isRuntimeStamped = isDiscoveryStamped(rawNode);
-      if (!isRuntimeStamped) rawNode.style.visibility = isVisibleNow ? "visible" : "hidden";
+      if (!clipsSeen.has(rawNode)) {
+        clipsSeen.add(rawNode);
+        if (rawNode.style.visibility === "hidden") authoredInlineHidden.add(rawNode);
+      }
+      if (!isRuntimeStamped && !(isVisibleNow && hiddenByScript(rawNode)))
+        rawNode.style.setProperty(
+          "visibility",
+          isVisibleNow ? "visible" : "hidden",
+          isVisibleNow ? "" : "important",
+        );
       rawNode.toggleAttribute(CLIP_HIDDEN_ATTR, !isRuntimeStamped && !isVisibleNow);
       if (!isRuntimeStamped && !isVisibleNow && !clipsStyledVisible.has(rawNode))
         clipsNeverStyledVisible.add(rawNode);
@@ -3248,6 +3277,18 @@ export function initSandboxRuntimeModular(): void {
     hiddenAudioDirty = false;
   };
 
+  // The timeline writes after the pass on a preview seek, so clips under a clip it just hid or showed
+  // are decided again.
+  const decideClipsUnderScriptHidden = (currentTime: number) => {
+    const rootComp = resolveRootCompositionElement();
+    const stale = queryForTransport("[data-start]").filter(
+      (el) =>
+        visibilityDecided.has(el) &&
+        underScriptHiddenClip(el, rootComp) !== (hiddenUnderScript.get(el) ?? false),
+    );
+    if (stale.length > 0) syncTimedElementVisibility(currentTime, stale);
+  };
+
   // Scope 2 of 3 (see `withTimingResolver`). One resolver for the whole
   // visibility pass: every node costs 2 x (1 + ancestor depth) resolves, and
   // ancestor chains are shared between siblings. Its `el.load()` calls reach only clips timed by an
@@ -4571,6 +4612,7 @@ export function initSandboxRuntimeModular(): void {
     const tl = state.capturedTimeline;
     pauseTimelineIfPossible(tl);
     const pageAnimations = seekTimelineAndAdapters(state.currentTime);
+    if (!keepPlaying) decideClipsUnderScriptHidden(state.currentTime);
     runAdapters("pause", 0, pageAnimations);
     if (keepPlaying) {
       transport.play();

packages/core/src/runtime/timedClipHide.ts

@@ -39,7 +39,7 @@ export function showHiddenClips(only: (el: HTMLElement) => boolean = () => true)
 export function showClips(hidden: Array<Element & ElementCSSInlineStyle>): () => void {
   const putMarksBack = hidden.map((el) => revealClip(el));
   return () => {
-    for (const el of hidden) el.style.visibility = "hidden";
+    for (const el of hidden) el.style.setProperty("visibility", "hidden", "important");
     for (const putMarkBack of putMarksBack) putMarkBack();
   };
 }