test(producer): add chunk-boundary fixtures per first-party adapter

2026-09-11 14:50:02 +00:00 · 2026-05-15 02:46:44 +00:00
parent 7bd4be13c1
commit 0b31465b2e
7 changed files with 683 additions and 0 deletions
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>chunk-boundary: Lottie</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 320px;
+        height: 180px;
+        background: #0f172a;
+        overflow: hidden;
+      }
+      #main-comp {
+        position: relative;
+        width: 320px;
+        height: 180px;
+      }
+      #lottie-host {
+        position: absolute;
+        inset: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="main-comp"
+      data-composition-id="main-comp"
+      data-width="320"
+      data-height="180"
+      data-start="0"
+      data-duration="2"
+    >
+      <div id="lottie-host"></div>
+    </div>
+
+    <script>
+      // Minimal Lottie JSON: 60-frame composition (30fps × 2s) with a
+      // single rectangle layer animating its position from x=20 to x=280
+      // linearly. The chunk-boundary test asserts N=1 == N=4 byte-identical
+      // — any Lottie sub-frame interpolation drift across seams trips it.
+      const lottieJson = {
+        v: "5.7.0",
+        fr: 30,
+        ip: 0,
+        op: 60,
+        w: 320,
+        h: 180,
+        nm: "boundary",
+        ddd: 0,
+        assets: [],
+        layers: [
+          {
+            ddd: 0,
+            ind: 1,
+            ty: 4,
+            nm: "rect",
+            sr: 1,
+            ks: {
+              o: { a: 0, k: 100 },
+              p: {
+                a: 1,
+                k: [
+                  {
+                    i: { x: [1], y: [1] },
+                    o: { x: [0], y: [0] },
+                    t: 0,
+                    s: [20, 90],
+                  },
+                  { t: 60, s: [280, 90] },
+                ],
+              },
+              r: {
+                a: 1,
+                k: [
+                  {
+                    i: { x: [1], y: [1] },
+                    o: { x: [0], y: [0] },
+                    t: 0,
+                    s: [0],
+                  },
+                  { t: 60, s: [360] },
+                ],
+              },
+              s: { a: 0, k: [100, 100, 100] },
+              a: { a: 0, k: [0, 0, 0] },
+            },
+            shapes: [
+              {
+                ty: "rc",
+                p: { a: 0, k: [0, 0] },
+                s: { a: 0, k: [40, 40] },
+                r: { a: 0, k: 6 },
+              },
+              {
+                ty: "fl",
+                c: { a: 0, k: [0.337, 0.408, 0.941, 1] },
+                o: { a: 0, k: 100 },
+              },
+            ],
+            ip: 0,
+            op: 60,
+            st: 0,
+            bm: 0,
+          },
+        ],
+      };
+
+      const anim = lottie.loadAnimation({
+        container: document.getElementById("lottie-host"),
+        renderer: "svg",
+        loop: false,
+        autoplay: false,
+        animationData: lottieJson,
+      });
+      window.__hfLottie = window.__hfLottie || [];
+      window.__hfLottie.push(anim);
+
+      const dur = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main-comp"] = dur;
+      dur.to({}, { duration: 2 }, 0);
+    </script>
+  </body>
+</html>