fix: restore trunk growth and tangent text release

site/tests/browser/landing.spec.ts

@@ -63,16 +63,46 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({
   await page.clock.runFor(1150);
   await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
   const arcLength = await page.locator('#welcome-orbit').evaluate((path) => (path as SVGPathElement).getTotalLength());
+  const circlePath = await page.locator('#welcome-orbit').getAttribute('d');
   await page.screenshot({ path: testInfo.outputPath('03-orbit.png') });
   await page.mouse.wheel(0, 180);
   await page.keyboard.press('ArrowDown');
   await page.mouse.click(20, 20);
-  await page.clock.runFor(1430);
-  await expect(page.locator(stage)).toHaveAttribute('data-phase', 'unfold');
-  const unfoldingLength = await page.locator('#welcome-orbit').evaluate((path) => (path as SVGPathElement).getTotalLength());
-  expect(Math.abs(unfoldingLength - arcLength)).toBeLessThan(2);
+  await page.clock.runFor(1080); // Scene 4: early trunk growth, before docking.
+  await expect(page.locator(stage)).toHaveAttribute('data-phase', 'extend');
+  expect(await page.locator('#welcome-orbit').getAttribute('d')).toMatch(new RegExp(`^${circlePath} H`));
+  const tangent = await page.locator('#welcome-orbit').evaluate((element, length) => {
+    const path = element as SVGPathElement;
+    const first = path.getPointAtLength(length + 40);
+    const second = path.getPointAtLength(length + 80);
+    return { dx: second.x - first.x, dy: second.y - first.y, y: first.y };
+  }, arcLength);
+  expect(tangent.dx).toBeCloseTo(40, 1);
+  expect(tangent.dy).toBeCloseTo(0, 1);
+  expect(tangent.y).toBeCloseTo(-180, 1);
+  const earlyLength = await page.locator('.trunk-line').evaluate((path) => (path as SVGPathElement).getTotalLength());
+  expect(earlyLength).toBeGreaterThan(10);
   await page.screenshot({ path: testInfo.outputPath('04-unfold.png') });
-  await page.clock.runFor(1550);
+  await page.clock.runFor(950); // Let the horizontal line finish extending.
+  await expect(page.locator(stage)).toHaveAttribute('data-phase', 'extend');
+  const extendedLength = await page.locator('.trunk-line').evaluate((path) => (path as SVGPathElement).getTotalLength());
+  expect(extendedLength).toBeGreaterThan(earlyLength * 1.4);
+  expect(extendedLength).toBeGreaterThan(page.viewportSize()!.width * .18);
+  await expect(page.locator('.trunk-line')).toHaveCSS('stroke-width', '10px');
+  const extendedRoot = await root.boundingBox();
+  expect(extendedRoot!.height).toBeCloseTo(initial!.height, 0);
+  expect(extendedRoot!.y).toBeCloseTo(initial!.y, 0);
+  await expect(page.locator('.demo-node:not(.root-mark)').first()).toHaveCSS('opacity', '0');
+  await page.screenshot({ path: testInfo.outputPath('04-trunk.png') });
+  await page.clock.runFor(1700); // SVG/box-drawing handoff, with neither removed.
+  const handoff = await page.evaluate(() => {
+    const path = document.querySelector<SVGPathElement>('.trunk-line')!;
+    const tip = path.getPointAtLength(path.getTotalLength()).matrixTransform(path.getScreenCTM()!);
+    const target = document.querySelector('.root-wire')!.getBoundingClientRect();
+    return Math.hypot(tip.x - (target.right - target.width / 6), tip.y - (target.top + target.height / 2));
+  });
+  expect(handoff).toBeLessThan(1);
+  await page.clock.runFor(550);
   await expect(page.locator(stage)).toHaveAttribute('data-phase', 'tree');
   await page.screenshot({ path: testInfo.outputPath('05-tree.png') });
   await page.clock.runFor(600);
@@ -128,7 +158,7 @@ test('skipping an active glitch restores exact text and frames', async ({ page }
   await page.keyboard.press('a');
   await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
   await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '0');
-  await page.clock.runFor(4800);
+  await page.clock.runFor(6100);
   await expect(page.locator('.call-panel')).toHaveAttribute('data-glitching');
   await page.keyboard.press('Escape');
   await complete(page);