@editframe/elements 0.19.4-beta.0 → 0.20.0-beta.0

package/src/elements/EFCaptions.browsertest.ts

@@ -1,9 +1,14 @@
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import "../gui/EFPreview.js";
 import "./EFCaptions.js";
+import "./EFTimegroup.js";
 import "./EFVideo.js";
 import { v4 } from "uuid";
 
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
 describe("EFCaptions", () => {
   describe("when rendering", () => {
     beforeEach(() => {
@@ -65,4 +70,1819 @@ describe("EFCaptions", () => {
       );
     });
   });
+
+  describe("custom captions data loading", () => {
+    test("loads captions from external JSON file (captions-src)", async () => {
+      const id = v4();
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      document.body.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+      document.body.appendChild(captions);
+
+      await captions.updateComplete;
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+
+      await captionsTask.taskComplete;
+
+      expect(captionsTask.value).toBeTruthy();
+      expect(captionsTask.value?.segments).toHaveLength(3);
+      expect(captionsTask.value?.word_segments).toHaveLength(9);
+      expect(captionsTask.value?.segments[0]?.text).toBe("First test segment");
+    });
+
+    test("loads captions from script element (captions-script)", async () => {
+      const id = v4();
+      const scriptId = v4();
+
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      document.body.appendChild(target);
+
+      // Create script element with captions data
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = JSON.stringify({
+        segments: [{ start: 0, end: 2, text: "Script-based captions" }],
+        word_segments: [
+          { text: "Script-based", start: 0, end: 1 },
+          { text: " captions", start: 1, end: 2 },
+        ],
+      });
+      document.body.appendChild(script);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsScript = scriptId;
+      document.body.appendChild(captions);
+
+      await captions.updateComplete;
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      expect(captionsTask.value).toEqual({
+        segments: [{ start: 0, end: 2, text: "Script-based captions" }],
+        word_segments: [
+          { text: "Script-based", start: 0, end: 1 },
+          { text: " captions", start: 1, end: 2 },
+        ],
+      });
+    });
+
+    test("uses direct captionsData property", async () => {
+      const id = v4();
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      document.body.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+
+      const testData = {
+        segments: [{ start: 0, end: 2, text: "Direct property caption" }],
+        word_segments: [
+          { text: "Direct", start: 0, end: 0.6 },
+          { text: " property", start: 0.6, end: 1.3 },
+          { text: " caption", start: 1.3, end: 2 },
+        ],
+      };
+
+      captions.captionsData = testData;
+      document.body.appendChild(captions);
+
+      await captions.updateComplete;
+      await captions.unifiedCaptionsDataTask.taskComplete;
+
+      expect(captions.unifiedCaptionsDataTask.value).toEqual(testData);
+    });
+
+    test("prioritizes captionsData > captions-script > captions-src", async () => {
+      const id = v4();
+      const scriptId = v4();
+
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      document.body.appendChild(target);
+
+      // Create script element
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = JSON.stringify({
+        segments: [{ start: 0, end: 2, text: "Script caption" }],
+        word_segments: [
+          { text: "Script", start: 0, end: 1 },
+          { text: " caption", start: 1, end: 2 },
+        ],
+      });
+      document.body.appendChild(script);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+      captions.captionsScript = scriptId;
+
+      const directData = {
+        segments: [{ start: 0, end: 2, text: "Direct property wins" }],
+        word_segments: [
+          { text: "Direct", start: 0, end: 1 },
+          { text: " property", start: 1, end: 1.5 },
+          { text: " wins", start: 1.5, end: 2 },
+        ],
+      };
+
+      captions.captionsData = directData;
+      document.body.appendChild(captions);
+
+      await captions.updateComplete;
+      await captions.unifiedCaptionsDataTask.taskComplete;
+
+      // Should use direct property data, not script or file
+      expect(captions.unifiedCaptionsDataTask.value).toEqual(directData);
+      expect(captions.unifiedCaptionsDataTask.value?.segments[0]?.text).toBe(
+        "Direct property wins",
+      );
+    });
+
+    test("handles fetch errors gracefully", async () => {
+      const id = v4();
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      document.body.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "nonexistent-file.json";
+      document.body.appendChild(captions);
+
+      await captions.updateComplete;
+      await captions.unifiedCaptionsDataTask.taskComplete;
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+
+      expect(captionsTask.value ?? null).toBeNull();
+    });
+
+    test("handles invalid JSON in script gracefully", async () => {
+      const id = v4();
+      const scriptId = v4();
+
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      document.body.appendChild(target);
+
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = "invalid json {";
+      document.body.appendChild(script);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsScript = scriptId;
+      document.body.appendChild(captions);
+
+      await captions.updateComplete;
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      expect(captionsTask.value).toBeNull();
+    });
+  });
+
+  describe("text visibility and timing", () => {
+    test("displays correct segment text at different time points", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+
+      // Create segment container
+      const segmentContainer = document.createElement("ef-captions-segment");
+      captions.appendChild(segmentContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      await captions.unifiedCaptionsDataTask.taskComplete;
+
+      // Test at t=0 (first segment)
+      timegroup.currentTimeMs = 0;
+      await timegroup.seekTask.taskComplete;
+      expect(segmentContainer.segmentText).toBe("First test segment");
+      expect(segmentContainer.segmentStartMs).toBe(0);
+      expect(segmentContainer.segmentEndMs).toBe(3000);
+
+      // Test at t=4000ms (second segment)
+      timegroup.currentTimeMs = 4000;
+      await timegroup.seekTask.taskComplete;
+      expect(segmentContainer.segmentText).toBe("Second test segment");
+      expect(segmentContainer.segmentStartMs).toBe(3000);
+      expect(segmentContainer.segmentEndMs).toBe(6000);
+
+      // Test at t=7500ms (third segment)
+      timegroup.currentTimeMs = 7500;
+      await timegroup.seekTask.taskComplete;
+
+      expect(segmentContainer.segmentText).toBe("Third test segment");
+      expect(segmentContainer.segmentStartMs).toBe(6000);
+      expect(segmentContainer.segmentEndMs).toBe(9000);
+    });
+
+    test("displays correct word text and timing", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test at t=0.3s (should be "First")
+      timegroup.currentTimeMs = 300;
+      await timegroup.seekTask.taskComplete;
+      expect(wordContainer.wordText).toBe("First");
+      expect(wordContainer.wordStartMs).toBe(0);
+      expect(wordContainer.wordEndMs).toBe(600);
+
+      // Test at t=0.9s (should be " test")
+      timegroup.currentTimeMs = 900;
+      await timegroup.seekTask.taskComplete;
+      expect(wordContainer.wordText).toBe(" test");
+      expect(wordContainer.wordStartMs).toBe(600);
+      expect(wordContainer.wordEndMs).toBe(1200);
+
+      // Test at t=1.8s (should be " segment")
+      timegroup.currentTimeMs = 1800;
+      await timegroup.seekTask.taskComplete;
+      expect(wordContainer.wordText).toBe(" segment");
+      expect(wordContainer.wordStartMs).toBe(1200);
+      expect(wordContainer.wordEndMs).toBe(3000);
+    });
+
+    test("displays context words correctly", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-complex.json";
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test at t=1.0s (active word: "longer", context should be available)
+      timegroup.currentTimeMs = 1000;
+      await timegroup.seekTask.taskComplete;
+
+      expect(activeContainer.wordText).toBe(" longer");
+      expect(beforeContainer.segmentText).toBe("This is a");
+      expect(afterContainer.segmentText).toBe(
+        "segment with multiple words for testing context",
+      );
+
+      // Verify timing properties - all context containers sync with active word
+      expect(beforeContainer.segmentStartMs).toBe(800); // active word start
+      expect(beforeContainer.segmentEndMs).toBe(1300); // active word end
+      expect(afterContainer.segmentStartMs).toBe(800); // active word start
+      expect(afterContainer.segmentEndMs).toBe(1300); // active word end
+    });
+
+    test("handles stop words correctly", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+
+      // Add data with stop words
+      captions.captionsData = {
+        segments: [{ start: 0, end: 2, text: "Hello, world!" }],
+        word_segments: [
+          { text: "Hello", start: 0, end: 0.5 },
+          { text: ",", start: 0.5, end: 0.6 },
+          { text: " world", start: 0.6, end: 1.2 },
+          { text: "!", start: 1.2, end: 1.5 },
+        ],
+      };
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test punctuation is hidden
+      timegroup.currentTimeMs = 550; // comma time
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+      expect(wordContainer.hidden).toBe(true);
+
+      timegroup.currentTimeMs = 1350; // exclamation time
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+      expect(wordContainer.hidden).toBe(true);
+
+      // Test regular word is visible
+      timegroup.currentTimeMs = 250; // "Hello" time
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+      expect(wordContainer.hidden).toBe(false);
+      expect(wordContainer.wordText).toBe("Hello");
+    });
+  });
+
+  describe("display modes", () => {
+    test("segment mode shows segment text", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.displayMode = "segment";
+      captions.captionsSrc = "test-captions-simple.json";
+
+      const segmentContainer = document.createElement("ef-captions-segment");
+      captions.appendChild(segmentContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      timegroup.currentTimeMs = 1500;
+      await timegroup.seekTask.taskComplete;
+      expect(segmentContainer.segmentText).toBe("First test segment");
+    });
+
+    test("word mode shows active word", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.displayMode = "word";
+      captions.captionsSrc = "test-captions-simple.json";
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      timegroup.currentTimeMs = 900;
+      await timegroup.seekTask.taskComplete;
+      expect(wordContainer.wordText).toBe(" test");
+    });
+
+    test("context mode shows before/active/after words", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.displayMode = "context";
+      captions.captionsSrc = "test-captions-complex.json";
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test middle of first segment
+      timegroup.currentTimeMs = 2400; // during "multiple"
+      await timegroup.seekTask.taskComplete;
+
+      expect(activeContainer.wordText).toBe(" multiple");
+      expect(beforeContainer.segmentText).toBeTruthy();
+      expect(afterContainer.segmentText).toBeTruthy();
+
+      // Verify all three components have content
+      expect(beforeContainer.segmentText.length).toBeGreaterThan(0);
+      expect(activeContainer.wordText.length).toBeGreaterThan(0);
+      expect(afterContainer.segmentText.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("animation properties validation", () => {
+    test("word containers have correct startTimeMs and durationMs", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test first word "First" (0-0.6s)
+      timegroup.currentTimeMs = 300;
+      await timegroup.seekTask.taskComplete;
+
+      expect(wordContainer.startTimeMs).toBe(0);
+      expect(wordContainer.durationMs).toBe(600);
+
+      // Test second word " test" (0.6-1.2s)
+      timegroup.currentTimeMs = 900;
+      await timegroup.seekTask.taskComplete;
+
+      expect(wordContainer.startTimeMs).toBe(600);
+      expect(wordContainer.durationMs).toBe(600);
+    });
+
+    test("segment containers have correct startTimeMs and durationMs", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+
+      const segmentContainer = document.createElement("ef-captions-segment");
+      captions.appendChild(segmentContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test first segment (0-3s)
+      timegroup.currentTimeMs = 1500;
+      await timegroup.seekTask.taskComplete;
+
+      expect(segmentContainer.startTimeMs).toBe(0);
+      expect(segmentContainer.durationMs).toBe(3000);
+
+      // Test second segment (3-6s)
+      timegroup.currentTimeMs = 4500;
+      await timegroup.seekTask.taskComplete;
+
+      expect(segmentContainer.startTimeMs).toBe(3000);
+      expect(segmentContainer.durationMs).toBe(3000);
+    });
+
+    test("context containers have correct timing boundaries", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-complex.json";
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test during "longer" word (0.8-1.3s) in first segment (0-4s)
+      timegroup.currentTimeMs = 1000;
+      await timegroup.seekTask.taskComplete;
+
+      // Active word timing
+      expect(activeContainer.startTimeMs).toBe(800);
+      expect(activeContainer.durationMs).toBe(500);
+
+      // Before and after context: synchronized with active word timing
+      expect(beforeContainer.startTimeMs).toBe(800);
+      expect(beforeContainer.durationMs).toBe(500); // 1300 - 800
+
+      // After context: same timing as active word
+      expect(afterContainer.startTimeMs).toBe(800);
+      expect(afterContainer.durationMs).toBe(500); // 1300 - 800
+    });
+
+    test("timing properties update correctly as time progresses", async () => {
+      const id = v4();
+      const timegroup = document.createElement("ef-timegroup");
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.src = "bars-n-tone.mp4";
+      timegroup.appendChild(target);
+
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      captions.captionsSrc = "test-captions-simple.json";
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Track timing changes across different words
+      const timingSteps = [
+        { time: 300, expectedStart: 0, expectedDuration: 600 }, // "First"
+        { time: 900, expectedStart: 600, expectedDuration: 600 }, // " test"
+        { time: 2100, expectedStart: 1200, expectedDuration: 1800 }, // " segment"
+        { time: 3500, expectedStart: 3000, expectedDuration: 800 }, // "Second"
+        { time: 4100, expectedStart: 3800, expectedDuration: 600 }, // " test"
+      ];
+
+      for (const step of timingSteps) {
+        timegroup.currentTimeMs = step.time;
+        await timegroup.seekTask.taskComplete;
+
+        expect(wordContainer.startTimeMs).toBe(step.expectedStart);
+        expect(wordContainer.durationMs).toBe(step.expectedDuration);
+      }
+    });
+  });
+
+  describe("captions duration integration (EFMedia pattern)", () => {
+    test("calculates intrinsicDurationMs from captions data", async () => {
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          { start: 0, end: 2, text: "First segment" },
+          { start: 2, end: 5, text: "Second segment" },
+        ],
+        word_segments: [
+          { text: "First", start: 0, end: 1 },
+          { text: " segment", start: 1, end: 2 },
+          { text: "Second", start: 2, end: 3.5 },
+          { text: " segment", start: 3.5, end: 5 },
+        ],
+      };
+
+      document.body.appendChild(captions);
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Duration should be calculated from captions data (5 seconds = 5000ms)
+      expect(captions.intrinsicDurationMs).toBe(5000);
+      expect(captions.durationMs).toBe(5000);
+      expect(captions.hasOwnDuration).toBe(true);
+    });
+
+    test("handles empty captions data gracefully", async () => {
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [],
+        word_segments: [],
+      };
+
+      document.body.appendChild(captions);
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      expect(captions.intrinsicDurationMs).toBe(0);
+      expect(captions.durationMs).toBe(0);
+      expect(captions.hasOwnDuration).toBe(true);
+    });
+
+    test("reports no own duration when no custom captions data", () => {
+      const captions = document.createElement("ef-captions");
+
+      expect(captions.hasCustomCaptionsData).toBe(false);
+      expect(captions.hasOwnDuration).toBe(false);
+      expect(captions.intrinsicDurationMs).toBeUndefined();
+    });
+
+    test("sequence timegroup includes captions duration", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+
+      // Add captions with 3s duration
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [{ start: 0, end: 3, text: "Caption test" }],
+        word_segments: [
+          { text: "Caption", start: 0, end: 1.5 },
+          { text: " test", start: 1.5, end: 3 },
+        ],
+      };
+      timegroup.appendChild(captions);
+
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Captions should have proper duration properties
+      expect(captions.hasOwnDuration).toBe(true);
+      expect(captions.intrinsicDurationMs).toBe(3000);
+      expect(captions.durationMs).toBe(3000);
+
+      // Sequence timegroup should include captions duration
+      expect(timegroup.durationMs).toBe(3000);
+    });
+
+    test("contain timegroup uses max duration including captions", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "contain";
+
+      // Add captions with 4s duration
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          { start: 0, end: 2, text: "First part" },
+          { start: 2, end: 4, text: "Second part" },
+        ],
+        word_segments: [
+          { text: "First", start: 0, end: 1 },
+          { text: " part", start: 1, end: 2 },
+          { text: "Second", start: 2, end: 3 },
+          { text: " part", start: 3, end: 4 },
+        ],
+      };
+      timegroup.appendChild(captions);
+
+      document.body.appendChild(timegroup);
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Captions should have proper duration properties
+      expect(captions.hasOwnDuration).toBe(true);
+      expect(captions.intrinsicDurationMs).toBe(4000);
+      expect(captions.durationMs).toBe(4000);
+
+      // Contain timegroup should use captions duration
+      expect(timegroup.durationMs).toBe(4000);
+    });
+
+    test("handles exact boundary timing correctly", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [{ start: 0, end: 4, text: "Boundary timing test" }],
+        word_segments: [
+          { text: "Boundary", start: 0, end: 1.5 },
+          { text: " timing", start: 1.5, end: 2.6 },
+          { text: " test", start: 2.6, end: 4 },
+        ],
+      };
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test at exact boundary 2.6s - should show " test" (the starting word)
+      timegroup.currentTimeMs = 2600;
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+
+      console.log(`At 2600ms: wordText="${wordContainer.wordText}"`);
+      expect(wordContainer.wordText).toBe(" test");
+
+      // Test just before boundary 2.599s - should show " timing"
+      timegroup.currentTimeMs = 2599;
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+
+      console.log(`At 2599ms: wordText="${wordContainer.wordText}"`);
+      expect(wordContainer.wordText).toBe(" timing");
+    });
+
+    test("handles demo captions data boundary correctly", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          { start: 0, end: 4, text: "Welcome to the custom captions demo!" },
+        ],
+        word_segments: [
+          { text: " captions", start: 1.8, end: 2.6 },
+          { text: " demo!", start: 2.6, end: 4 },
+        ],
+      };
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test at exact boundary 2.6s from user's example
+      timegroup.currentTimeMs = 2600;
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+
+      console.log(
+        `Demo case - At 2600ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+      );
+      expect(wordContainer.wordText).toBe(" demo!");
+      expect(wordContainer.hidden).toBe(false);
+
+      // Test just before boundary
+      timegroup.currentTimeMs = 2590;
+      await timegroup.seekTask.taskComplete;
+      await wordContainer.updateComplete;
+
+      console.log(
+        `Demo case - At 2590ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+      );
+      expect(wordContainer.wordText).toBe(" captions");
+    });
+
+    test("standalone captions sync with timegroup (demo structure)", async () => {
+      // Mimic exact demo structure: sequence > contain > captions
+      const rootTimegroup = document.createElement("ef-timegroup");
+      rootTimegroup.mode = "sequence";
+
+      const containTimegroup = document.createElement("ef-timegroup");
+      containTimegroup.mode = "contain";
+      rootTimegroup.appendChild(containTimegroup);
+
+      // Create script element like in demo
+      const scriptId = "test-demo-script";
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = JSON.stringify({
+        segments: [
+          { start: 0, end: 4, text: "Welcome to the custom captions demo!" },
+        ],
+        word_segments: [
+          { text: " captions", start: 1.8, end: 2.6 },
+          { text: " demo!", start: 2.6, end: 4 },
+        ],
+      });
+      document.body.appendChild(script);
+
+      // Standalone captions (no target) like in updated demo
+      const captions = document.createElement("ef-captions");
+      captions.captionsScript = scriptId;
+
+      const wordContainer = document.createElement("ef-captions-active-word");
+      captions.appendChild(wordContainer);
+      containTimegroup.appendChild(captions);
+      document.body.appendChild(rootTimegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Debug timeline sync
+      console.log(
+        `Initial: rootTimegroup.currentTimeMs=${rootTimegroup.currentTimeMs}, captions.ownCurrentTimeMs=${captions.ownCurrentTimeMs}`,
+      );
+
+      // Test the problematic timing
+      rootTimegroup.currentTimeMs = 2600;
+      await rootTimegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log(
+        `After seek: rootTimegroup.currentTimeMs=${rootTimegroup.currentTimeMs}, captions.ownCurrentTimeMs=${captions.ownCurrentTimeMs}`,
+      );
+      console.log(
+        `Standalone demo - At 2600ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+      );
+
+      expect(wordContainer.wordText).toBe(" demo!");
+      expect(wordContainer.hidden).toBe(false);
+    });
+
+    test("context words (before/after) work correctly", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          { start: 0, end: 4, text: "Welcome to the custom captions demo!" },
+        ],
+        word_segments: [
+          { text: "Welcome", start: 0, end: 0.6 },
+          { text: " to", start: 0.6, end: 0.9 },
+          { text: " the", start: 0.9, end: 1.2 },
+          { text: " custom", start: 1.2, end: 1.8 },
+          { text: " captions", start: 1.8, end: 2.6 },
+          { text: " demo!", start: 2.6, end: 4 },
+        ],
+      };
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test during " custom" word (1.2-1.8s) - should have before/after context
+      timegroup.currentTimeMs = 1500;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log("Context test - At 1500ms:");
+      console.log(`  activeWord: "${activeContainer.wordText}"`);
+      console.log(`  beforeWords: "${beforeContainer.segmentText}"`);
+      console.log(`  afterWords: "${afterContainer.segmentText}"`);
+      console.log(
+        `  beforeHidden: ${beforeContainer.hidden}, afterHidden: ${afterContainer.hidden}`,
+      );
+
+      expect(activeContainer.wordText).toBe(" custom");
+      expect(beforeContainer.segmentText).toBeTruthy();
+      expect(afterContainer.segmentText).toBeTruthy();
+      expect(beforeContainer.segmentText.length).toBeGreaterThan(0);
+      expect(afterContainer.segmentText.length).toBeGreaterThan(0);
+    });
+
+    test("debug context words with demo data structure", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      // Create script element with EXACT demo data
+      const scriptId = "demo-debug-script";
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = `{
+        "segments": [
+          { "start": 0, "end": 4, "text": "Welcome to the custom captions demo!" },
+          { "start": 4, "end": 8, "text": "This demonstrates word-by-word highlighting." },
+          { "start": 8, "end": 12, "text": "You can provide your own timing data." }
+        ],
+        "word_segments": [
+          {"text": "Welcome", "start": 0, "end": 0.6},
+          {"text": " to", "start": 0.6, "end": 0.9},
+          {"text": " the", "start": 0.9, "end": 1.2},
+          {"text": " custom", "start": 1.2, "end": 1.8},
+          {"text": " captions", "start": 1.8, "end": 2.6},
+          {"text": " demo!", "start": 2.6, "end": 4},
+          
+          {"text": "This", "start": 4, "end": 4.3},
+          {"text": " demonstrates", "start": 4.3, "end": 5.3},
+          {"text": " word-by-word", "start": 5.3, "end": 6.3},
+          {"text": " highlighting.", "start": 6.3, "end": 8}
+        ]
+      }`;
+      document.body.appendChild(script);
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsScript = scriptId;
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test during " custom" word (1.2-1.8s) - within first segment (0-4s)
+      timegroup.currentTimeMs = 1500;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log("Demo debug - At 1500ms:");
+      console.log(
+        `  Current segment found: ${!!captions.segmentContainers.length}`,
+      );
+      console.log(
+        `  Current word found: ${activeContainer.wordText ? "yes" : "no"}`,
+      );
+      console.log(`  activeWord: "${activeContainer.wordText}"`);
+      console.log(`  beforeWords: "${beforeContainer.segmentText}"`);
+      console.log(`  afterWords: "${afterContainer.segmentText}"`);
+      console.log(
+        `  beforeHidden: ${beforeContainer.hidden}, afterHidden: ${afterContainer.hidden}`,
+      );
+
+      // Try different timing in second segment
+      timegroup.currentTimeMs = 5000; // During "demonstrates" in second segment
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log("Demo debug - At 5000ms (second segment):");
+      console.log(`  activeWord: "${activeContainer.wordText}"`);
+      console.log(`  beforeWords: "${beforeContainer.segmentText}"`);
+      console.log(`  afterWords: "${afterContainer.segmentText}"`);
+      console.log(
+        `  beforeHidden: ${beforeContainer.hidden}, afterHidden: ${afterContainer.hidden}`,
+      );
+    });
+
+    test("context containers have synchronized timing with active word", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          {
+            start: 0,
+            end: 8,
+            text: "This is a test segment with multiple words",
+          },
+        ],
+        word_segments: [
+          { text: "This", start: 0, end: 1 },
+          { text: " is", start: 1, end: 2 },
+          { text: " a", start: 2, end: 2.5 },
+          { text: " test", start: 2.5, end: 3.5 },
+          { text: " segment", start: 3.5, end: 4.5 },
+          { text: " with", start: 4.5, end: 5 },
+          { text: " multiple", start: 5, end: 6 },
+          { text: " words", start: 6, end: 8 },
+        ],
+      };
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test during " test" word (2.5-3.5s)
+      timegroup.currentTimeMs = 3000;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log("Timing sync test - At 3000ms:");
+      console.log(
+        `  Before: ${beforeContainer.segmentStartMs}-${beforeContainer.segmentEndMs}`,
+      );
+      console.log(
+        `  Active: ${activeContainer.wordStartMs}-${activeContainer.wordEndMs}`,
+      );
+      console.log(
+        `  After:  ${afterContainer.segmentStartMs}-${afterContainer.segmentEndMs}`,
+      );
+
+      // All three should have the same timing as the active word
+      expect(beforeContainer.segmentStartMs).toBe(activeContainer.wordStartMs);
+      expect(beforeContainer.segmentEndMs).toBe(activeContainer.wordEndMs);
+      expect(afterContainer.segmentStartMs).toBe(activeContainer.wordStartMs);
+      expect(afterContainer.segmentEndMs).toBe(activeContainer.wordEndMs);
+
+      // And they should all have the expected active word timing
+      expect(activeContainer.wordStartMs).toBe(2500);
+      expect(activeContainer.wordEndMs).toBe(3500);
+    });
+
+    test("measures actual DOM widths for layout stability", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      // Create exact demo structure
+      const scriptId = "width-test-script";
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = JSON.stringify({
+        segments: [
+          { start: 0, end: 4, text: "Welcome to the custom captions demo!" },
+        ],
+        word_segments: [
+          { text: "Welcome", start: 0, end: 0.6 },
+          { text: " to", start: 0.6, end: 0.9 },
+          { text: " the", start: 0.9, end: 1.2 },
+          { text: " custom", start: 1.2, end: 1.8 },
+        ],
+      });
+      document.body.appendChild(script);
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsScript = scriptId;
+      captions.style.cssText =
+        "display: block !important; text-align: center; background: green; padding: 16px;";
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      beforeContainer.className = "text-green-200";
+
+      const activeContainer = document.createElement("ef-captions-active-word");
+      activeContainer.className =
+        "bg-lime-400 text-green-900 rounded font-bold";
+
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+      afterContainer.className = "text-green-200";
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Measure at different word timings and check for width/position changes
+      const measurements: Array<{
+        time: number;
+        word: string;
+        measurements: any;
+      }> = [];
+
+      const measureElements = () => {
+        const captionsRect = captions.getBoundingClientRect();
+        const beforeRect = beforeContainer.getBoundingClientRect();
+        const activeRect = activeContainer.getBoundingClientRect();
+        const afterRect = afterContainer.getBoundingClientRect();
+
+        return {
+          captions: { width: captionsRect.width, x: captionsRect.x },
+          before: {
+            width: beforeRect.width,
+            x: beforeRect.x,
+            text: beforeContainer.segmentText,
+          },
+          active: {
+            width: activeRect.width,
+            x: activeRect.x,
+            text: activeContainer.wordText,
+          },
+          after: {
+            width: afterRect.width,
+            x: afterRect.x,
+            text: afterContainer.segmentText,
+          },
+          totalContentWidth:
+            beforeRect.width + activeRect.width + afterRect.width,
+        };
+      };
+
+      // Test each word and measure layout
+      const testWords = [
+        { time: 300, expectedWord: "Welcome" },
+        { time: 750, expectedWord: " to" },
+        { time: 1050, expectedWord: " the" },
+        { time: 1500, expectedWord: " custom" },
+      ];
+
+      for (const test of testWords) {
+        timegroup.currentTimeMs = test.time;
+        await timegroup.seekTask.taskComplete;
+        await captions.updateComplete;
+
+        const measurement = measureElements();
+        measurements.push({
+          time: test.time,
+          word: test.expectedWord,
+          measurements: measurement,
+        });
+
+        console.log(`At ${test.time}ms (${test.expectedWord}):`);
+        console.log(
+          `  Active word: "${measurement.active.text}" width=${measurement.active.width}px x=${measurement.active.x}`,
+        );
+        console.log(
+          `  Before: "${measurement.before.text}" width=${measurement.before.width}px`,
+        );
+        console.log(
+          `  After: "${measurement.after.text}" width=${measurement.after.width}px`,
+        );
+        console.log(
+          `  Total content: ${measurement.totalContentWidth}px, Container: ${measurement.captions.width}px`,
+        );
+        console.log("");
+      }
+
+      // Check if total width stays consistent
+      const firstTotal = measurements[0]?.measurements.totalContentWidth;
+      const allTotalsConsistent = measurements.every(
+        (m) => Math.abs(m.measurements.totalContentWidth - firstTotal) < 2, // Allow 1-2px tolerance
+      );
+
+      if (!allTotalsConsistent) {
+        console.log("Width inconsistency detected:");
+        measurements.forEach((m) => {
+          console.log(`  ${m.word}: ${m.measurements.totalContentWidth}px`);
+        });
+      }
+
+      expect(allTotalsConsistent).toBe(true);
+    });
+
+    test("measures font weight differences causing layout shifts", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const scriptId = "font-test-script";
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = JSON.stringify({
+        segments: [{ start: 0, end: 4, text: "Welcome to the custom" }],
+        word_segments: [
+          { text: "Welcome", start: 0, end: 0.6 },
+          { text: " to", start: 0.6, end: 0.9 },
+          { text: " the", start: 0.9, end: 1.2 },
+          { text: " custom", start: 1.2, end: 1.8 },
+        ],
+      });
+      document.body.appendChild(script);
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsScript = scriptId;
+      captions.style.cssText =
+        "display: block !important; text-align: center; background: green; padding: 16px; font-weight: bold;";
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      beforeContainer.className = "text-green-200";
+
+      const activeContainer = document.createElement("ef-captions-active-word");
+      activeContainer.className = "bg-lime-400 text-green-900 rounded";
+
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+      afterContainer.className = "text-green-200";
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test with consistent font weight
+      timegroup.currentTimeMs = 300;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      const welcomeRect = activeContainer.getBoundingClientRect();
+      console.log(
+        `"Welcome" with consistent bold: width=${welcomeRect.width}px`,
+      );
+
+      timegroup.currentTimeMs = 750;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      const toRect = activeContainer.getBoundingClientRect();
+      console.log(`" to" with consistent bold: width=${toRect.width}px`);
+
+      // Check if the text positioning stays stable with consistent font weight
+      const totalWidth1 =
+        beforeContainer.getBoundingClientRect().width +
+        activeContainer.getBoundingClientRect().width +
+        afterContainer.getBoundingClientRect().width;
+
+      timegroup.currentTimeMs = 1050;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      const totalWidth2 =
+        beforeContainer.getBoundingClientRect().width +
+        activeContainer.getBoundingClientRect().width +
+        afterContainer.getBoundingClientRect().width;
+
+      console.log(
+        `Total width consistency: ${totalWidth1}px vs ${totalWidth2}px (diff: ${Math.abs(totalWidth1 - totalWidth2)}px)`,
+      );
+
+      expect(Math.abs(totalWidth1 - totalWidth2)).toBeLessThan(1);
+    });
+
+    test("captions work naturally without CSS overrides", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const scriptId = "natural-test-script";
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.type = "application/json";
+      script.textContent = JSON.stringify({
+        segments: [{ start: 0, end: 4, text: "Natural flow test" }],
+        word_segments: [
+          { text: "Natural", start: 0, end: 1 },
+          { text: " flow", start: 1, end: 2 },
+          { text: " test", start: 2, end: 4 },
+        ],
+      });
+      document.body.appendChild(script);
+
+      // Test with NO CSS overrides - should just work naturally
+      const captions = document.createElement("ef-captions");
+      captions.captionsScript = scriptId;
+      captions.className = "font-bold text-center p-4"; // Simple, natural styling
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      activeContainer.className = "bg-yellow-400 text-black rounded"; // Only background change
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Measure widths with natural component behavior
+      timegroup.currentTimeMs = 500;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      const naturalRect1 = captions.getBoundingClientRect();
+      console.log(
+        `Natural captions width at "Natural": ${naturalRect1.width}px`,
+      );
+
+      timegroup.currentTimeMs = 1500;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      const naturalRect2 = captions.getBoundingClientRect();
+      console.log(`Natural captions width at " flow": ${naturalRect2.width}px`);
+
+      const widthDiff = Math.abs(naturalRect2.width - naturalRect1.width);
+      console.log(`Width difference: ${widthDiff}px`);
+
+      // Should have minimal width difference with natural component behavior
+      expect(widthDiff).toBeLessThan(2); // Allow small rounding tolerance
+    });
+
+    test("transform scaling keeps surrounding text positions stable", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [{ start: 0, end: 4, text: "Before active after text" }],
+        word_segments: [
+          { text: "Before", start: 0, end: 1 },
+          { text: " active", start: 1, end: 2 },
+          { text: " after", start: 2, end: 3 },
+          { text: " text", start: 3, end: 4 },
+        ],
+      };
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const activeContainer = document.createElement("ef-captions-active-word");
+      activeContainer.style.cssText =
+        "background: yellow; color: black; transform: scale(1.2); transform-origin: center; transition: transform 200ms;";
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(activeContainer);
+      captions.appendChild(afterContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test different words and ensure before/after text positions don't jump
+      const positionTests = [
+        { time: 500, word: "Before" },
+        { time: 1500, word: " active" },
+        { time: 2500, word: " after" },
+      ];
+
+      let previousBeforeX: number | null = null;
+      let previousAfterX: number | null = null;
+
+      for (const test of positionTests) {
+        timegroup.currentTimeMs = test.time;
+        await timegroup.seekTask.taskComplete;
+        await captions.updateComplete;
+
+        const beforeRect = beforeContainer.getBoundingClientRect();
+        const activeRect = activeContainer.getBoundingClientRect();
+        const afterRect = afterContainer.getBoundingClientRect();
+
+        console.log(`At ${test.time}ms (active word: "${test.word}"):`);
+        console.log(`  Before text X: ${beforeRect.x.toFixed(1)}px`);
+        console.log(`  Active text X: ${activeRect.x.toFixed(1)}px (scaled)`);
+        console.log(`  After text X: ${afterRect.x.toFixed(1)}px`);
+
+        if (previousBeforeX !== null && beforeContainer.textContent) {
+          const beforeXDiff = Math.abs(beforeRect.x - previousBeforeX);
+          console.log(`  Before X movement: ${beforeXDiff.toFixed(1)}px`);
+          expect(beforeXDiff).toBeLessThan(2); // Should be very stable
+        }
+
+        if (previousAfterX !== null && afterContainer.textContent) {
+          const afterXDiff = Math.abs(afterRect.x - previousAfterX);
+          console.log(`  After X movement: ${afterXDiff.toFixed(1)}px`);
+          expect(afterXDiff).toBeLessThan(2); // Should be very stable
+        }
+
+        previousBeforeX = beforeRect.x;
+        previousAfterX = afterRect.x;
+        console.log("");
+      }
+    });
+
+    test("CSS animations trigger with timegroup timing", async () => {
+      const timegroup = document.createElement("ef-timegroup");
+
+      // Add bounce animation keyframes to test environment
+      const style = document.createElement("style");
+      style.textContent = `
+        @keyframes bounceIn {
+          0% { transform: scale(calc(0.6 + var(--ef-word-seed, 0.5) * 0.3)) 
+                          rotate(calc(-10deg + var(--ef-word-seed, 0.5) * 20deg)) 
+                          skewX(calc(-15deg + var(--ef-word-seed, 0.5) * 30deg)); }
+          50% { transform: scale(calc(1.05 + var(--ef-word-seed, 0.5) * 0.2)) 
+                           rotate(calc(-3deg + var(--ef-word-seed, 0.5) * 6deg)) 
+                           skewX(calc(-5deg + var(--ef-word-seed, 0.5) * 10deg)); }
+          100% { transform: scale(1) rotate(0deg) skewX(0deg); }
+        }
+        .bounce-in { animation: 0.3s ease-out 0s 1 normal none running bounceIn; }
+        .bounce-scale-125 { 
+          animation: 0.3s ease-out 0s 1 normal none running bounceIn; 
+          transform: scale(1.25); 
+        }
+      `;
+      document.head.appendChild(style);
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [{ start: 0, end: 3, text: "Bounce test animation" }],
+        word_segments: [
+          { text: "Bounce", start: 0, end: 1 },
+          { text: " test", start: 1, end: 2 },
+          { text: " animation", start: 2, end: 3 },
+        ],
+      };
+
+      const activeContainer = document.createElement("ef-captions-active-word");
+      activeContainer.className = "bounce-scale-125";
+      captions.appendChild(activeContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test animation properties when different words become active
+      const animationTests = [
+        { time: 500, word: "Bounce" },
+        { time: 1500, word: " test" },
+        { time: 2500, word: " animation" },
+      ];
+
+      for (const test of animationTests) {
+        console.log(
+          `\nTesting animation at ${test.time}ms (word: "${test.word}"):`,
+        );
+
+        timegroup.currentTimeMs = test.time;
+        await timegroup.seekTask.taskComplete;
+        await captions.updateComplete;
+
+        // Check that element is visible and has animation properties
+        const computedStyle = getComputedStyle(activeContainer);
+        const animationName = computedStyle.animationName;
+        const animationDuration = computedStyle.animationDuration;
+        const animationTimingFunction = computedStyle.animationTimingFunction;
+
+        console.log(`  Element text: "${activeContainer.textContent}"`);
+        console.log(`  Animation name: ${animationName}`);
+        console.log(`  Animation duration: ${animationDuration}`);
+        console.log(`  Animation timing: ${animationTimingFunction}`);
+        console.log(`  Element visible: ${!activeContainer.hidden}`);
+
+        // Element should be visible when in its time range
+        expect(activeContainer.hidden).toBe(false);
+
+        // Should have the bounce animation applied correctly
+        expect(animationName).toBe("bounceIn");
+        expect(animationDuration).toBe("0.3s");
+      }
+
+      // Test that element is hidden when outside time range
+      timegroup.currentTimeMs = 3500; // After all words
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log("\nAfter time range (3500ms):");
+      console.log(`  Element hidden: ${activeContainer.hidden}`);
+      console.log(`  Element text: "${activeContainer.textContent}"`);
+
+      // Should be hidden when no word is active
+      expect(activeContainer.hidden).toBe(true);
+
+      document.head.removeChild(style); // Clean up
+    });
+  });
+
+  describe("sequence timing integration", () => {
+    test("sequence duration updates when captions data is set via captionsData property", async () => {
+      // Test the exact scenario: sequence > contain > captions, contain > captions
+      const sequence = document.createElement("ef-timegroup");
+      sequence.mode = "sequence";
+
+      const container1 = document.createElement("ef-timegroup");
+      container1.mode = "contain";
+      const captions1 = document.createElement("ef-captions");
+      const word1 = document.createElement("ef-captions-active-word");
+      captions1.appendChild(word1);
+      container1.appendChild(captions1);
+
+      const container2 = document.createElement("ef-timegroup");
+      container2.mode = "contain";
+      const captions2 = document.createElement("ef-captions");
+      const word2 = document.createElement("ef-captions-active-word");
+      captions2.appendChild(word2);
+      container2.appendChild(captions2);
+
+      sequence.appendChild(container1);
+      sequence.appendChild(container2);
+      document.body.appendChild(sequence);
+
+      // Initially, sequence should have no duration
+      await sequence.updateComplete;
+      expect(sequence.durationMs).toBe(0);
+
+      // Set captions data for both elements
+      captions1.captionsData = {
+        segments: [{ start: 0, end: 5, text: "First" }],
+        word_segments: [{ text: "First", start: 0, end: 5 }],
+      };
+
+      captions2.captionsData = {
+        segments: [{ start: 0, end: 3, text: "Second" }],
+        word_segments: [{ text: "Second", start: 0, end: 3 }],
+      };
+
+      // Wait for updates to propagate
+      await captions1.updateComplete;
+      await captions2.updateComplete;
+      await sequence.updateComplete;
+
+      // Sequence should now have combined duration (5s + 3s = 8s)
+      expect(sequence.durationMs).toBe(8000);
+
+      try {
+        document.body.removeChild(sequence);
+      } catch (_e) {
+        // Cleanup may fail in test environment, ignore
+      }
+    });
+
+    test("second captions timegroup is visible when timeline is positioned in second segment", async () => {
+      // Create exact demo structure: sequence > contain > captions, contain > captions
+      const sequence = document.createElement("ef-timegroup");
+      sequence.mode = "sequence";
+
+      const container1 = document.createElement("ef-timegroup");
+      container1.mode = "contain";
+      const captions1 = document.createElement("ef-captions");
+      captions1.captionsData = {
+        segments: [{ start: 0, end: 5, text: "First" }],
+        word_segments: [{ text: "First", start: 0, end: 5 }],
+      };
+      const word1 = document.createElement("ef-captions-active-word");
+      captions1.appendChild(word1);
+      container1.appendChild(captions1);
+
+      const container2 = document.createElement("ef-timegroup");
+      container2.mode = "contain";
+      const captions2 = document.createElement("ef-captions");
+      captions2.captionsData = {
+        segments: [{ start: 0, end: 3, text: "Second" }],
+        word_segments: [{ text: "Second", start: 0, end: 3 }],
+      };
+      const word2 = document.createElement("ef-captions-active-word");
+      captions2.appendChild(word2);
+      container2.appendChild(captions2);
+
+      sequence.appendChild(container1);
+      sequence.appendChild(container2);
+      document.body.appendChild(sequence);
+
+      // Set timeline to be in second timegroup (7s = 2s into second captions)
+      sequence.currentTimeMs = 7000;
+      await sequence.seekTask.taskComplete;
+
+      console.log(
+        `Timeline at 7000ms - Second captions word: "${word2.wordText}", hidden: ${word2.hidden}`,
+      );
+
+      // The second captions must be visible
+      expect(word2.wordText).toBe("Second");
+      expect(word2.hidden).toBe(false);
+    });
+
+    test("shows completed words in before container when segment extends beyond words", async () => {
+      // Test case where segment duration extends beyond last word
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          { start: 0, end: 5, text: "Complete segment text" }, // 5 second segment
+        ],
+        word_segments: [
+          { text: "Complete", start: 0, end: 1 },
+          { text: " segment", start: 1, end: 2 },
+          { text: " text", start: 2, end: 3 },
+          // Words end at 3s but segment continues until 5s
+        ],
+      };
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const wordContainer = document.createElement("ef-captions-active-word");
+      const segmentContainer = document.createElement("ef-captions-segment");
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(wordContainer);
+      captions.appendChild(segmentContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // Test at 2.5s - should show " text" word normally
+      timegroup.currentTimeMs = 2500;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      expect(wordContainer.wordText).toBe(" text");
+      expect(wordContainer.hidden).toBe(false);
+
+      // Test at 4s - after all words finished but segment still active
+      timegroup.currentTimeMs = 4000;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log(
+        `  Active word: "${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+      );
+      console.log(
+        `  Before container: "${beforeContainer.segmentText}", hidden=${beforeContainer.hidden}`,
+      );
+      console.log(
+        `  Segment: "${segmentContainer.segmentText}", hidden=${segmentContainer.hidden}`,
+      );
+
+      // Word container should be empty/hidden since no active word
+      expect(wordContainer.wordText).toBe("");
+      expect(wordContainer.hidden).toBe(true);
+
+      // Before container should show all completed words to maintain visual continuity
+      expect(beforeContainer.segmentText).toBe("Complete segment text");
+      expect(beforeContainer.hidden).toBe(false);
+
+      // Segment should still be active
+      expect(segmentContainer.segmentText).toBe("Complete segment text");
+      expect(segmentContainer.hidden).toBe(false);
+
+      try {
+        document.body.removeChild(timegroup);
+      } catch (_e) {
+        // Cleanup may fail in test environment, ignore
+      }
+    });
+
+    test("shows all words in after container when in segment but before first word", async () => {
+      // Test case where we're in a segment but before the first word starts
+      const timegroup = document.createElement("ef-timegroup");
+
+      const captions = document.createElement("ef-captions");
+      captions.captionsData = {
+        segments: [
+          { start: 0, end: 10, text: "Complete test segment" }, // 10 second segment
+        ],
+        word_segments: [
+          { text: "Complete", start: 2, end: 4 }, // First word starts at 2s
+          { text: " test", start: 5, end: 7 },
+          { text: " segment", start: 8, end: 9 },
+          // Gap from 0-2s before first word
+        ],
+      };
+
+      const beforeContainer = document.createElement(
+        "ef-captions-before-active-word",
+      );
+      const wordContainer = document.createElement("ef-captions-active-word");
+      const afterContainer = document.createElement(
+        "ef-captions-after-active-word",
+      );
+      const segmentContainer = document.createElement("ef-captions-segment");
+
+      captions.appendChild(beforeContainer);
+      captions.appendChild(wordContainer);
+      captions.appendChild(afterContainer);
+      captions.appendChild(segmentContainer);
+      timegroup.appendChild(captions);
+      document.body.appendChild(timegroup);
+
+      // @ts-expect-error accessing private property for testing
+      const captionsTask = captions.customCaptionsDataTask;
+      await captionsTask.taskComplete;
+
+      // Test at 1s - in segment but before first word starts
+      timegroup.currentTimeMs = 1000;
+      await timegroup.seekTask.taskComplete;
+      await captions.updateComplete;
+
+      console.log(
+        `  Active word: "${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+      );
+      console.log(
+        `  Before container: "${beforeContainer.segmentText}", hidden=${beforeContainer.hidden}`,
+      );
+      console.log(
+        `  After container: "${afterContainer.segmentText}", hidden=${afterContainer.hidden}`,
+      );
+      console.log(
+        `  Segment: "${segmentContainer.segmentText}", hidden=${segmentContainer.hidden}`,
+      );
+
+      // Active word should be empty since no word is active yet
+      expect(wordContainer.wordText).toBe("");
+      expect(wordContainer.hidden).toBe(true);
+
+      // Before container should be empty (nothing has happened yet)
+      expect(beforeContainer.segmentText).toBe("");
+      expect(beforeContainer.hidden).toBe(true);
+
+      // After container should show all upcoming words
+      expect(afterContainer.segmentText).toBe("Complete test segment");
+      expect(afterContainer.hidden).toBe(false);
+
+      // Segment should be active
+      expect(segmentContainer.segmentText).toBe("Complete test segment");
+      expect(segmentContainer.hidden).toBe(false);
+
+      try {
+        document.body.removeChild(timegroup);
+      } catch (_e) {
+        // Cleanup may fail in test environment, ignore
+      }
+    });
+  });
 });