fix: replace shallow landing fixture with a practical guide

site/tests/browser/fonts.spec.ts

@@ -28,6 +28,12 @@ test('self-hosted Lyth Mono and EB Garamond load with the configured base', asyn
   expect(fonts.stack).toContain('Lyth Mono');
   expect(fonts.prefix).toBe(''); // SSR uses the same glyph paths, not HTML wires.
   expect(external).toEqual([]);
+  await page.keyboard.press('Escape');
+  await expect(page.locator('[data-landing-stage]')).toHaveAttribute('data-phase', 'complete');
+  await page.getByRole('button', { name: '本文を読む' }).click();
+  await expect(page.locator('[data-result]')).toContainText('Unicode正規化');
+  expect(await page.locator('[data-result]').evaluate((element) => getComputedStyle(element).fontFamily)).toContain('EB Garamond');
+  await page.locator('.call-panel').screenshot({ path: testInfo.outputPath('eb-garamond-guide.png') });
   await page.goto('./book/1-concept/');
   expect(await page.locator('.prose').evaluate((element) => getComputedStyle(element).fontFamily)).toContain('EB Garamond');
   await page.screenshot({ path: testInfo.outputPath('eb-garamond-book.png') });
@@ -35,17 +41,21 @@ test('self-hosted Lyth Mono and EB Garamond load with the configured base', asyn
 
 test.describe('static font and tree rendering', () => {
   test.use({ javaScriptEnabled: false, deviceScaleFactor: 4 });
-  test('glyph joins paint continuously across SVG cell boundaries', async ({ page }) => {
+  test('glyph joins paint continuously across SVG cell boundaries', async ({ page }, testInfo) => {
     await page.goto('./');
     await page.evaluate(() => document.fonts.ready);
+    // Sample all four joins without clipping the final branch in the scrollable tree.
+    await page.setViewportSize({ width: page.viewportSize()!.width, height: 2000 });
+    await page.locator('.tree-viewport').evaluate((el) => { (el as HTMLElement).style.height = 'auto'; });
     const joins = await page.locator('.demo-node[aria-level="2"]').evaluateAll((nodes) => nodes.map((node) => {
       const svg = node.parentElement!.querySelector<SVGSVGElement>('.branch-vector')!;
       const p = new DOMPoint(Number(svg.dataset.cellWidth) / 2, 12).matrixTransform(svg.getScreenCTM()!);
       return { x: p.x, y: p.y };
     }));
-    for (const join of joins) {
+    expect(joins).toHaveLength(4);
+    for (const [index, join] of joins.entries()) {
       const clip = { x: Math.floor(join.x), y: Math.floor(join.y) - 1, width: 14, height: 3 };
-      const png = (await page.screenshot({ clip })).toString('base64');
+      const png = (await page.screenshot({ clip, path: testInfo.outputPath(`glyph-join-${index}.png`) })).toString('base64');
       const columns = await page.evaluate(async (png) => {
         const image = new Image(); image.src = 'data:image/png;base64,' + png;
         await image.decode();
@@ -73,7 +83,10 @@ test.describe('static font and tree rendering', () => {
     await expect(page.locator('.trunk-line')).toBeVisible();
     await expect(page.locator('.trunk-line')).toHaveCSS('stroke', 'none');
     await expect(page.locator('.branch-prefix').first()).toHaveAttribute('data-prefix', '├── ');
-    await expect(page.locator('.branch-prefix').first().locator('path')).toHaveCount(2);
+    await expect(page.locator('.branch-prefix').first().locator('path')).toHaveCount(0);
+    await expect(page.locator('.branch-prefix').first().locator('use')).toHaveCount(4);
+    await expect(page.locator('.branch-prefix').first().locator('.branch-spine use')).toHaveAttribute('href', '#tree-glyph-9500');
+    await expect(page.locator('.tree-glyphs defs path')).toHaveCount(5);
     await expect(page.getByRole('link', { name: 'Book', exact: true })).toBeVisible();
     expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
     await page.screenshot({ path: testInfo.outputPath('lyth-mono-static.png') });
@@ -86,6 +99,6 @@ test('failed font downloads do not strand the animation or interactive demo', as
   await expect(page.locator('[data-landing-stage]')).toHaveAttribute('data-phase', 'armed');
   await page.keyboard.press('Escape');
   await expect(page.locator('[data-landing-stage]')).toHaveAttribute('data-phase', 'complete');
-  await page.getByRole('button', { name: 'Call', exact: false }).click();
-  await expect(page.locator('[data-result]')).toContainText('Give every capability a place.');
+  await page.getByRole('button', { name: '本文を読む' }).click();
+  await expect(page.locator('[data-result]')).toContainText('Unicode正規化');
 });