@editframe/elements 0.21.0-beta.0 → 0.23.6-beta.0

package/src/elements/EFCaptions.browsertest.ts

@@ -12,11 +12,10 @@ beforeEach(() => {
 describe("EFCaptions", () => {
   describe("when rendering", () => {
     beforeEach(() => {
-      // @ts-ignore
+      // @ts-expect-error
       window.FRAMEGEN_BRIDGE = true;
     });
     afterEach(() => {
-      // @ts-ignore
       delete window.FRAMEGEN_BRIDGE;
     });
     test("captionsPath uses http:// protocol", () => {
@@ -84,7 +83,7 @@ describe("EFCaptions", () => {
       captions.captionsSrc = "test-captions-simple.json";
       document.body.appendChild(captions);
 
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
 
@@ -123,7 +122,7 @@ describe("EFCaptions", () => {
       captions.captionsScript = scriptId;
       document.body.appendChild(captions);
 
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
@@ -160,7 +159,7 @@ describe("EFCaptions", () => {
       captions.captionsData = testData;
       document.body.appendChild(captions);
 
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
       await captions.unifiedCaptionsDataTask.taskComplete;
 
       expect(captions.unifiedCaptionsDataTask.value).toEqual(testData);
@@ -205,7 +204,7 @@ describe("EFCaptions", () => {
       captions.captionsData = directData;
       document.body.appendChild(captions);
 
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
       await captions.unifiedCaptionsDataTask.taskComplete;
 
       // Should use direct property data, not script or file
@@ -227,7 +226,7 @@ describe("EFCaptions", () => {
       captions.captionsSrc = "nonexistent-file.json";
       document.body.appendChild(captions);
 
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
       await captions.unifiedCaptionsDataTask.taskComplete;
 
       // @ts-expect-error accessing private property for testing
@@ -256,7 +255,7 @@ describe("EFCaptions", () => {
       captions.captionsScript = scriptId;
       document.body.appendChild(captions);
 
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
@@ -290,6 +289,8 @@ describe("EFCaptions", () => {
       // Test at t=0 (first segment)
       timegroup.currentTimeMs = 0;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await segmentContainer.updateComplete;
       expect(segmentContainer.segmentText).toBe("First test segment");
       expect(segmentContainer.segmentStartMs).toBe(0);
       expect(segmentContainer.segmentEndMs).toBe(3000);
@@ -297,6 +298,8 @@ describe("EFCaptions", () => {
       // Test at t=4000ms (second segment)
       timegroup.currentTimeMs = 4000;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await segmentContainer.updateComplete;
       expect(segmentContainer.segmentText).toBe("Second test segment");
       expect(segmentContainer.segmentStartMs).toBe(3000);
       expect(segmentContainer.segmentEndMs).toBe(6000);
@@ -304,6 +307,8 @@ describe("EFCaptions", () => {
       // Test at t=7500ms (third segment)
       timegroup.currentTimeMs = 7500;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await segmentContainer.updateComplete;
 
       expect(segmentContainer.segmentText).toBe("Third test segment");
       expect(segmentContainer.segmentStartMs).toBe(6000);
@@ -334,6 +339,8 @@ describe("EFCaptions", () => {
       // Test at t=0.3s (should be "First")
       timegroup.currentTimeMs = 300;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
       expect(wordContainer.wordText).toBe("First");
       expect(wordContainer.wordStartMs).toBe(0);
       expect(wordContainer.wordEndMs).toBe(600);
@@ -341,6 +348,8 @@ describe("EFCaptions", () => {
       // Test at t=0.9s (should be " test")
       timegroup.currentTimeMs = 900;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
       expect(wordContainer.wordText).toBe(" test");
       expect(wordContainer.wordStartMs).toBe(600);
       expect(wordContainer.wordEndMs).toBe(1200);
@@ -348,6 +357,8 @@ describe("EFCaptions", () => {
       // Test at t=1.8s (should be " segment")
       timegroup.currentTimeMs = 1800;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
       expect(wordContainer.wordText).toBe(" segment");
       expect(wordContainer.wordStartMs).toBe(1200);
       expect(wordContainer.wordEndMs).toBe(3000);
@@ -378,6 +389,7 @@ describe("EFCaptions", () => {
       captions.appendChild(afterContainer);
       timegroup.appendChild(captions);
       document.body.appendChild(timegroup);
+      await timegroup.waitForMediaDurations();
 
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
@@ -386,6 +398,8 @@ describe("EFCaptions", () => {
       // Test at t=1.0s (active word: "longer", context should be available)
       timegroup.currentTimeMs = 1000;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await activeContainer.updateComplete;
 
       expect(activeContainer.wordText).toBe(" longer");
       expect(beforeContainer.segmentText).toBe("This is a");
@@ -451,8 +465,8 @@ describe("EFCaptions", () => {
     });
   });
 
-  describe("display modes", () => {
-    test("segment mode shows segment text", async () => {
+  describe("child element types", () => {
+    test("segment containers show segment text", async () => {
       const id = v4();
       const timegroup = document.createElement("ef-timegroup");
       const target = document.createElement("ef-video");
@@ -462,7 +476,6 @@ describe("EFCaptions", () => {
 
       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");
@@ -476,10 +489,11 @@ describe("EFCaptions", () => {
 
       timegroup.currentTimeMs = 1500;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
       expect(segmentContainer.segmentText).toBe("First test segment");
     });
 
-    test("word mode shows active word", async () => {
+    test("word containers show active word", async () => {
       const id = v4();
       const timegroup = document.createElement("ef-timegroup");
       const target = document.createElement("ef-video");
@@ -489,7 +503,6 @@ describe("EFCaptions", () => {
 
       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");
@@ -497,16 +510,19 @@ describe("EFCaptions", () => {
       timegroup.appendChild(captions);
       document.body.appendChild(timegroup);
 
+      await timegroup.waitForMediaDurations();
+
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
       await captionsTask.taskComplete;
 
       timegroup.currentTimeMs = 900;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
       expect(wordContainer.wordText).toBe(" test");
     });
 
-    test("context mode shows before/active/after words", async () => {
+    test("context containers show before/active/after words", async () => {
       const id = v4();
       const timegroup = document.createElement("ef-timegroup");
       const target = document.createElement("ef-video");
@@ -516,7 +532,6 @@ describe("EFCaptions", () => {
 
       const captions = document.createElement("ef-captions");
       captions.setAttribute("target", id);
-      captions.displayMode = "context";
       captions.captionsSrc = "test-captions-complex.json";
 
       const beforeContainer = document.createElement(
@@ -532,6 +547,7 @@ describe("EFCaptions", () => {
       captions.appendChild(afterContainer);
       timegroup.appendChild(captions);
       document.body.appendChild(timegroup);
+      await timegroup.waitForMediaDurations();
 
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
@@ -540,6 +556,7 @@ describe("EFCaptions", () => {
       // Test middle of first segment
       timegroup.currentTimeMs = 2400; // during "multiple"
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
 
       expect(activeContainer.wordText).toBe(" multiple");
       expect(beforeContainer.segmentText).toBeTruthy();
@@ -577,6 +594,7 @@ describe("EFCaptions", () => {
       // Test first word "First" (0-0.6s)
       timegroup.currentTimeMs = 300;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
 
       expect(wordContainer.startTimeMs).toBe(0);
       expect(wordContainer.durationMs).toBe(600);
@@ -584,6 +602,7 @@ describe("EFCaptions", () => {
       // Test second word " test" (0.6-1.2s)
       timegroup.currentTimeMs = 900;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
 
       expect(wordContainer.startTimeMs).toBe(600);
       expect(wordContainer.durationMs).toBe(600);
@@ -613,6 +632,7 @@ describe("EFCaptions", () => {
       // Test first segment (0-3s)
       timegroup.currentTimeMs = 1500;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
 
       expect(segmentContainer.startTimeMs).toBe(0);
       expect(segmentContainer.durationMs).toBe(3000);
@@ -620,6 +640,7 @@ describe("EFCaptions", () => {
       // Test second segment (3-6s)
       timegroup.currentTimeMs = 4500;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
 
       expect(segmentContainer.startTimeMs).toBe(3000);
       expect(segmentContainer.durationMs).toBe(3000);
@@ -650,6 +671,7 @@ describe("EFCaptions", () => {
       captions.appendChild(afterContainer);
       timegroup.appendChild(captions);
       document.body.appendChild(timegroup);
+      await timegroup.waitForMediaDurations();
 
       // @ts-expect-error accessing private property for testing
       const captionsTask = captions.customCaptionsDataTask;
@@ -658,6 +680,7 @@ describe("EFCaptions", () => {
       // Test during "longer" word (0.8-1.3s) in first segment (0-4s)
       timegroup.currentTimeMs = 1000;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
 
       // Active word timing
       expect(activeContainer.startTimeMs).toBe(800);
@@ -705,6 +728,7 @@ describe("EFCaptions", () => {
       for (const step of timingSteps) {
         timegroup.currentTimeMs = step.time;
         await timegroup.seekTask.taskComplete;
+        await captions.frameTask.taskComplete;
 
         expect(wordContainer.startTimeMs).toBe(step.expectedStart);
         expect(wordContainer.durationMs).toBe(step.expectedDuration);
@@ -850,23 +874,23 @@ describe("EFCaptions", () => {
       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 captions.updateComplete;
-      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 captions.updateComplete;
+      await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
       console.log(`At 2599ms: wordText="${wordContainer.wordText}"`);
       expect(wordContainer.wordText).toBe(" timing");
+
+      // Test at exact boundary 2.6s - should show " test" (the starting word)
+      timegroup.currentTimeMs = 2600;
+      await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
+
+      console.log(`At 2600ms: wordText="${wordContainer.wordText}"`);
+      expect(wordContainer.wordText).toBe(" test");
     });
 
     test("handles demo captions data boundary correctly", async () => {
@@ -892,26 +916,28 @@ describe("EFCaptions", () => {
       const captionsTask = captions.customCaptionsDataTask;
       await captionsTask.taskComplete;
 
-      // Test at exact boundary 2.6s from user's example
-      timegroup.currentTimeMs = 2600;
+      // Test just before boundary
+      timegroup.currentTimeMs = 2590;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
       console.log(
-        `Demo case - At 2600ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+        `Demo case - At 2590ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
       );
-      expect(wordContainer.wordText).toBe(" demo!");
-      expect(wordContainer.hidden).toBe(false);
+      expect(wordContainer.wordText).toBe(" captions");
 
-      // Test just before boundary
-      timegroup.currentTimeMs = 2590;
+      // Test at exact boundary 2.6s from user's example
+      timegroup.currentTimeMs = 2600;
       await timegroup.seekTask.taskComplete;
+      await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
       console.log(
-        `Demo case - At 2590ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+        `Demo case - At 2600ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
       );
-      expect(wordContainer.wordText).toBe(" captions");
+      expect(wordContainer.wordText).toBe(" demo!");
+      expect(wordContainer.hidden).toBe(false);
     });
 
     test("standalone captions sync with timegroup (demo structure)", async () => {
@@ -960,7 +986,8 @@ describe("EFCaptions", () => {
       // Test the problematic timing
       rootTimegroup.currentTimeMs = 2600;
       await rootTimegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
 
       console.log(
         `After seek: rootTimegroup.currentTimeMs=${rootTimegroup.currentTimeMs}, captions.ownCurrentTimeMs=${captions.ownCurrentTimeMs}`,
@@ -1012,7 +1039,10 @@ describe("EFCaptions", () => {
       // Test during " custom" word (1.2-1.8s) - should have before/after context
       timegroup.currentTimeMs = 1500;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await activeContainer.updateComplete;
+      await beforeContainer.updateComplete;
+      await afterContainer.updateComplete;
 
       console.log("Context test - At 1500ms:");
       console.log(`  activeWord: "${activeContainer.wordText}"`);
@@ -1083,7 +1113,7 @@ describe("EFCaptions", () => {
       // Test during " custom" word (1.2-1.8s) - within first segment (0-4s)
       timegroup.currentTimeMs = 1500;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       console.log("Demo debug - At 1500ms:");
       console.log(
@@ -1102,7 +1132,7 @@ describe("EFCaptions", () => {
       // Try different timing in second segment
       timegroup.currentTimeMs = 5000; // During "demonstrates" in second segment
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       console.log("Demo debug - At 5000ms (second segment):");
       console.log(`  activeWord: "${activeContainer.wordText}"`);
@@ -1158,7 +1188,10 @@ describe("EFCaptions", () => {
       // Test during " test" word (2.5-3.5s)
       timegroup.currentTimeMs = 3000;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await activeContainer.updateComplete;
+      await beforeContainer.updateComplete;
+      await afterContainer.updateComplete;
 
       console.log("Timing sync test - At 3000ms:");
       console.log(
@@ -1278,7 +1311,13 @@ describe("EFCaptions", () => {
       for (const test of testWords) {
         timegroup.currentTimeMs = test.time;
         await timegroup.seekTask.taskComplete;
-        await captions.updateComplete;
+        await captions.frameTask.taskComplete;
+        await activeContainer.updateComplete;
+        await beforeContainer.updateComplete;
+        await afterContainer.updateComplete;
+
+        // Wait for browser to paint before measuring
+        await new Promise((resolve) => requestAnimationFrame(resolve));
 
         const measurement = measureElements();
         measurements.push({
@@ -1304,19 +1343,35 @@ describe("EFCaptions", () => {
       }
 
       // 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
+      //       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);
+
+      // Check if the overall container width stays consistent (the real measure of stability)
+      const firstContainerWidth = measurements[0]?.measurements.captions.width;
+      const allContainerWidthsConsistent = measurements.every(
+        (m) =>
+          Math.abs(m.measurements.captions.width - firstContainerWidth) < 0.1,
       );
 
-      if (!allTotalsConsistent) {
-        console.log("Width inconsistency detected:");
+      if (!allContainerWidthsConsistent) {
+        console.log("Container width inconsistency detected:");
         measurements.forEach((m) => {
-          console.log(`  ${m.word}: ${m.measurements.totalContentWidth}px`);
+          console.log(`  ${m.word}: ${m.measurements.captions.width}px`);
         });
       }
 
-      expect(allTotalsConsistent).toBe(true);
+      expect(allContainerWidthsConsistent).toBe(true);
     });
 
     test("measures font weight differences causing layout shifts", async () => {
@@ -1368,7 +1423,8 @@ describe("EFCaptions", () => {
       // Test with consistent font weight
       timegroup.currentTimeMs = 300;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await activeContainer.updateComplete;
 
       const welcomeRect = activeContainer.getBoundingClientRect();
       console.log(
@@ -1377,7 +1433,8 @@ describe("EFCaptions", () => {
 
       timegroup.currentTimeMs = 750;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await activeContainer.updateComplete;
 
       const toRect = activeContainer.getBoundingClientRect();
       console.log(`" to" with consistent bold: width=${toRect.width}px`);
@@ -1390,7 +1447,10 @@ describe("EFCaptions", () => {
 
       timegroup.currentTimeMs = 1050;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await activeContainer.updateComplete;
+      await beforeContainer.updateComplete;
+      await afterContainer.updateComplete;
 
       const totalWidth2 =
         beforeContainer.getBoundingClientRect().width +
@@ -1448,7 +1508,7 @@ describe("EFCaptions", () => {
       // Measure widths with natural component behavior
       timegroup.currentTimeMs = 500;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       const naturalRect1 = captions.getBoundingClientRect();
       console.log(
@@ -1457,7 +1517,7 @@ describe("EFCaptions", () => {
 
       timegroup.currentTimeMs = 1500;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       const naturalRect2 = captions.getBoundingClientRect();
       console.log(`Natural captions width at " flow": ${naturalRect2.width}px`);
@@ -1516,7 +1576,7 @@ describe("EFCaptions", () => {
       for (const test of positionTests) {
         timegroup.currentTimeMs = test.time;
         await timegroup.seekTask.taskComplete;
-        await captions.updateComplete;
+        await captions.frameTask.taskComplete;
 
         const beforeRect = beforeContainer.getBoundingClientRect();
         const activeRect = activeContainer.getBoundingClientRect();
@@ -1602,7 +1662,8 @@ describe("EFCaptions", () => {
 
         timegroup.currentTimeMs = test.time;
         await timegroup.seekTask.taskComplete;
-        await captions.updateComplete;
+        await captions.frameTask.taskComplete;
+        await activeContainer.updateComplete;
 
         // Check that element is visible and has animation properties
         const computedStyle = getComputedStyle(activeContainer);
@@ -1627,7 +1688,7 @@ describe("EFCaptions", () => {
       // Test that element is hidden when outside time range
       timegroup.currentTimeMs = 3500; // After all words
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
 
       console.log("\nAfter time range (3500ms):");
       console.log(`  Element hidden: ${activeContainer.hidden}`);
@@ -1728,6 +1789,7 @@ describe("EFCaptions", () => {
       // Set timeline to be in second timegroup (7s = 2s into second captions)
       sequence.currentTimeMs = 7000;
       await sequence.seekTask.taskComplete;
+      await captions2.frameTask.taskComplete;
 
       console.log(
         `Timeline at 7000ms - Second captions word: "${word2.wordText}", hidden: ${word2.hidden}`,
@@ -1770,7 +1832,8 @@ describe("EFCaptions", () => {
       // Test at 2.5s - should show " text" word normally
       timegroup.currentTimeMs = 2500;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
 
       expect(wordContainer.wordText).toBe(" text");
       expect(wordContainer.hidden).toBe(false);
@@ -1778,7 +1841,10 @@ describe("EFCaptions", () => {
       // Test at 4s - after all words finished but segment still active
       timegroup.currentTimeMs = 4000;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
+      await beforeContainer.updateComplete;
+      await segmentContainer.updateComplete;
 
       console.log(
         `  Active word: "${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
@@ -1849,7 +1915,11 @@ describe("EFCaptions", () => {
       // Test at 1s - in segment but before first word starts
       timegroup.currentTimeMs = 1000;
       await timegroup.seekTask.taskComplete;
-      await captions.updateComplete;
+      await captions.frameTask.taskComplete;
+      await wordContainer.updateComplete;
+      await beforeContainer.updateComplete;
+      await afterContainer.updateComplete;
+      await segmentContainer.updateComplete;
 
       console.log(
         `  Active word: "${wordContainer.wordText}", hidden=${wordContainer.hidden}`,