diff --git a/packages/sdk/src/adapters/iframe.sync.test.ts b/packages/sdk/src/adapters/iframe.sync.test.ts index 3ab14d400..7b80e2105 100644 --- a/packages/sdk/src/adapters/iframe.sync.test.ts +++ b/packages/sdk/src/adapters/iframe.sync.test.ts @@ -196,4 +196,41 @@ window.__timelines = { t: tl }; ) as HTMLElement; expect(liveTitle.style.getPropertyValue("color")).not.toBe("#f00"); }); + + it("mirrors setVariableValue onto the live root's CSS custom property", async () => { + const html = ` + + +
+

Hello World

+
+ +`; + const iframe = mountIframe(html); + const comp = await openComposition(html); + const adapter = createIframePreviewAdapter(iframe); + adapter.attachSync(comp); + + comp.setVariableValue("accent", "#0f0"); + + const liveRoot = iframe.contentDocument!.querySelector( + '[data-hf-id="hf-stage"]', + ) as HTMLElement; + expect(liveRoot.style.getPropertyValue("--accent")).toBe("#0f0"); + }); + + it("mirrors setTiming onto the live element's data-start/data-end attributes", async () => { + const iframe = mountIframe(BASE_HTML); + const comp = await openComposition(BASE_HTML); + const adapter = createIframePreviewAdapter(iframe); + adapter.attachSync(comp); + + comp.setTiming("hf-title", { start: 1, duration: 2 }); + + const liveTitle = iframe.contentDocument!.querySelector( + '[data-hf-id="hf-title"]', + ) as HTMLElement; + expect(liveTitle.getAttribute("data-start")).toBe("1"); + expect(liveTitle.getAttribute("data-end")).toBe("3"); + }); });