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,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>chunk-boundary: Three.js</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.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;
+      }
+      canvas {
+        display: block;
+        width: 320px;
+        height: 180px;
+      }
+    </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>
+
+    <script>
+      // Minimal Three.js scene driven by window.__hfThreeTime. The runtime
+      // sets this per frame; the render loop reads it and derives all
+      // rotation/position from time-in-seconds so output is fully
+      // determined by the seek position.
+      const canvas = document.createElement("canvas");
+      canvas.width = 320;
+      canvas.height = 180;
+      document.getElementById("main-comp").appendChild(canvas);
+
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x0f172a);
+      const camera = new THREE.PerspectiveCamera(45, 320 / 180, 0.1, 50);
+      camera.position.set(0, 0, 4);
+      const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+      renderer.setSize(320, 180, false);
+
+      const geo = new THREE.BoxGeometry(1, 1, 1);
+      const mat = new THREE.MeshStandardMaterial({ color: 0xa855f7 });
+      const cube = new THREE.Mesh(geo, mat);
+      scene.add(cube);
+
+      scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+      const light = new THREE.DirectionalLight(0xffffff, 0.7);
+      light.position.set(2, 2, 3);
+      scene.add(light);
+
+      window.__hfThreeTime = 0;
+      function renderFrame() {
+        const t = window.__hfThreeTime || 0;
+        cube.rotation.x = t * Math.PI;
+        cube.rotation.y = t * Math.PI * 0.5;
+        renderer.render(scene, camera);
+      }
+      // Listen for the runtime's `hf-seek` event in case the engine pushes
+      // a seek before our render loop polls __hfThreeTime.
+      window.addEventListener("hf-seek", (e) => {
+        if (e && e.detail && typeof e.detail.time === "number") {
+          window.__hfThreeTime = e.detail.time;
+        }
+        renderFrame();
+      });
+      renderFrame();
+
+      const dur = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main-comp"] = dur;
+      dur.to({}, { duration: 2, onUpdate: renderFrame }, 0);
+    </script>
+  </body>
+</html>