feat(embed,viewer): UI-01 complete carousel, loader config and accessibility

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-21 18:55:15 +08:00
parent 1f67b7c818
commit ddf26a177f
22 changed files with 2274 additions and 326 deletions
@@ -0,0 +1,206 @@
+import { createServer, type Server } from 'node:http';
+import { expect, test, type Page } from '@playwright/test';
+import {
+  cleanupSeededAlbums,
+  createEmbedSlot,
+  flushOutbox,
+  flushSync,
+  makePublicToken,
+  seedAlbum,
+  seedPhoto,
+  updateEmbedSlot,
+} from './helpers';
+
+// UI-01 Task 6 跨源宿主 Playwright：宿主页与 viewer/iframe 真正不同源
+// （宿主 127.0.0.1:3999 ← 自建 node:http 静态页；loader/iframe/ov 均 5175/8081）。
+// 覆盖：跨源渲染、postMessage 双向白名单（非登记 iframe 来源的伪造消息被忽略）、
+// ghost 槽 destroy 无残留、同侧多槽纵排（8px 间距堆叠）、敌意宿主全局 CSS 下
+// 仍可用（loader 仅 inline style 零污染的逆向断言）、窄视口默认收起。
+// 加速取数不依赖 __embedPollMs（跨源不可写）：本文件用例均为首屏行为，无需轮询。
+
+const HOST_PORT = 3999;
+const HOST_ORIGIN = `http://127.0.0.1:${HOST_PORT}`;
+const VIEWER_ORIGIN = 'http://127.0.0.1:5175';
+const MINUTE = 60_000;
+
+interface SeededFeed {
+  slotToken: string;
+  slotId: string;
+}
+
+async function seedFeed(alias: string): Promise<SeededFeed> {
+  const album = await seedAlbum({
+    alias,
+    defaultLocale: 'zh-CN',
+    translations: [{ locale: 'zh-CN', title: `${alias} 中文相册` }],
+  });
+  await seedPhoto(album.id, `${alias}-p1`, { publishedAt: new Date(Date.now() - 2 * MINUTE) });
+  await seedPhoto(album.id, `${alias}-p2`, { publishedAt: new Date(Date.now() - MINUTE) });
+  await flushSync(album.id);
+  const slot = await createEmbedSlot(`viewer-e2e-xorigin-${alias}`);
+  await updateEmbedSlot(slot.id, { albumId: album.id });
+  await flushOutbox();
+  return { slotToken: slot.token, slotId: slot.id };
+}
+
+/** 跨源宿主夹具页：inline HTML 由测试写入 currentHtml（每个用例自定义变体）。 */
+function hostHtml(options: { slots: string[]; hostileCss?: boolean }): string {
+  const tags = options.slots
+    .map((slot) => `<script src="${VIEWER_ORIGIN}/embed/v1/loader.js" data-slot="${slot}" defer></script>`)
+    .join('\n    ');
+  const hostile = options.hostileCss
+    ? `* { margin: 0 !important; padding: 0 !important; box-sizing: content-box !important; }
+    iframe { border: 10px solid red !important; background: #ff0 !important; }`
+    : '';
+  return `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>cross-origin host fixture</title>
+    ${hostile ? `<style>\n    ${hostile}\n    </style>` : ''}
+  </head>
+  <body style="min-height: 2000px">
+    <h1>Host page (cross-origin, port ${HOST_PORT})</h1>
+    ${tags}
+  </body>
+</html>`;
+}
+
+let currentHtml = '';
+const server: Server = createServer((_req, res) => {
+  res.setHeader('content-type', 'text/html; charset=utf-8');
+  res.end(currentHtml);
+});
+
+async function openHost(page: Page, html: string): Promise<void> {
+  currentHtml = html;
+  await page.goto(HOST_ORIGIN);
+}
+
+/** wrapper（iframe 父 div）inline 样式属性值。 */
+function wrapperStyle(page: Page, prop: string): Promise<string> {
+  return page.locator('iframe').evaluate(
+    (frame, p) => ((frame.parentElement as HTMLElement).style as unknown as Record<string, string>)[p],
+    prop,
+  );
+}
+
+test.describe.serial('embed loader on a cross-origin host (UI-01 Task 6)', () => {
+  test.beforeAll(async () => {
+    await new Promise<void>((resolve, reject) => {
+      server.once('error', reject);
+      server.listen(HOST_PORT, '127.0.0.1', () => resolve());
+    });
+  });
+
+  test.afterAll(async () => {
+    await new Promise<void>((resolve) => server.close(() => resolve()));
+    await cleanupSeededAlbums();
+  });
+
+  test('renders the widget from a cross-origin host page', async ({ page }) => {
+    const feed = await seedFeed('xmain');
+    await openHost(page, hostHtml({ slots: [feed.slotToken] }));
+
+    // iframe 以 title 定位（跨源 frameLocator 仍可穿透断言 DOM）。
+    const frame = page.frameLocator('iframe[title="PhotoLive photos"]');
+    await expect(frame.locator('.embed-title')).toHaveText('xmain 中文相册');
+    await expect(frame.locator('.embed-photo.active img')).toBeVisible();
+
+    // loader 几何：fixed 贴右下（默认 offset 16/24），不依赖宿主样式。
+    await expect.poll(() => wrapperStyle(page, 'position')).toBe('fixed');
+    await expect.poll(() => wrapperStyle(page, 'right')).toBe('16px');
+    await expect.poll(() => wrapperStyle(page, 'bottom')).toBe('24px');
+  });
+
+  test('postMessages not originating from the registered iframe are ignored', async ({ page }) => {
+    const feed = await seedFeed('xmsg');
+    await openHost(page, hostHtml({ slots: [feed.slotToken] }));
+    const frame = page.frameLocator('iframe[title="PhotoLive photos"]');
+    await expect(frame.locator('.embed-title')).toHaveText('xmsg 中文相册');
+
+    // 宿主页脚本伪造 collapse/destroy（source=宿主 window ≠ 登记 iframe）：白名单
+    // 拒收——不收起、不销毁、不出现把手。
+    await page.evaluate(() => {
+      window.postMessage({ photoliveEmbed: true, type: 'collapse' }, '*');
+      window.postMessage({ photoliveEmbed: true, type: 'destroy' }, '*');
+      window.postMessage({ photoliveEmbed: true, type: 'config', configVersion: 99, settings: {} }, '*');
+    });
+    await page.waitForTimeout(800);
+
+    expect(await page.locator('iframe').count()).toBe(1);
+    expect(await page.locator('div[role="button"]').count()).toBe(0);
+    expect(await wrapperStyle(page, 'height')).not.toBe('0px');
+    await expect(frame.locator('.embed-title')).toHaveText('xmsg 中文相册');
+  });
+
+  test('ghost slot destroys the wrapper, handle and session key cross-origin', async ({ page }) => {
+    const ghost = makePublicToken();
+    await openHost(page, hostHtml({ slots: [ghost] }));
+
+    await expect
+      .poll(() => page.locator('iframe').count(), { timeout: 15_000 })
+      .toBe(0);
+    await expect(page.locator('div[role="button"]')).toHaveCount(0);
+    expect(await page.evaluate((slot) => sessionStorage.getItem(`pl-embed-collapsed:${slot}`), ghost)).toBeNull();
+  });
+
+  test('multiple slots on the same side stack vertically with an 8px gap', async ({ page }) => {
+    const feedA = await seedFeed('xstacka');
+    const feedB = await seedFeed('xstackb');
+    await openHost(page, hostHtml({ slots: [feedA.slotToken, feedB.slotToken] }));
+
+    // 两个 iframe 各自渲染（src 定位到各自槽）。
+    await expect(
+      page.frameLocator(`iframe[src*="${feedA.slotToken}"]`).locator('.embed-title'),
+    ).toHaveText('xstacka 中文相册');
+    await expect(
+      page.frameLocator(`iframe[src*="${feedB.slotToken}"]`).locator('.embed-title'),
+    ).toHaveText('xstackb 中文相册');
+
+    // 纵排：首个槽 bottom=offsetBottom(24)；后续槽 bottom = 24 + 首槽高 + 8。
+    // 轮询至两个 wrapper 高度均已由 resize 消息落定且堆叠算式成立再读值复核。
+    const readBoxes = () =>
+      page.evaluate(() =>
+        Array.from(document.querySelectorAll('iframe')).map((f) => {
+          const s = (f.parentElement as HTMLElement).style;
+          return { bottom: parseInt(s.bottom, 10), height: parseInt(s.height, 10) };
+        }),
+      );
+    await expect
+      .poll(async () => {
+        const boxes = await readBoxes();
+        return boxes.length === 2 && boxes[1].bottom === 24 + boxes[0].height + 8;
+      }, { timeout: 15_000 })
+      .toBe(true);
+    const boxes = await readBoxes();
+    expect(boxes[0].bottom).toBe(24);
+    expect(boxes[0].height).toBeGreaterThan(0);
+    expect(boxes[1].bottom).toBe(24 + boxes[0].height + 8);
+  });
+
+  test('widget survives hostile host-global CSS (inline styles only)', async ({ page }) => {
+    const feed = await seedFeed('xcss');
+    await openHost(page, hostHtml({ slots: [feed.slotToken], hostileCss: true }));
+
+    // 敌意全局 reset（!*important* 覆盖、iframe 边框/底色强改）下：组件仍渲染、
+    // 仍 fixed 定位在默认几何（loader 全 inline style，不依赖宿主 CSS 约定）。
+    const frame = page.frameLocator('iframe[title="PhotoLive photos"]');
+    await expect(frame.locator('.embed-title')).toHaveText('xcss 中文相册');
+    await expect(frame.locator('.embed-photo.active img')).toBeVisible();
+    await expect.poll(() => wrapperStyle(page, 'position')).toBe('fixed');
+    await expect.poll(() => wrapperStyle(page, 'right')).toBe('16px');
+    await expect.poll(() => wrapperStyle(page, 'bottom')).toBe('24px');
+  });
+
+  test('narrow viewport starts collapsed with the handle on a cross-origin host', async ({ page }) => {
+    const feed = await seedFeed('xnarrow');
+    await page.setViewportSize({ width: 375, height: 667 });
+    await openHost(page, hostHtml({ slots: [feed.slotToken] }));
+
+    await expect(page.locator('div[role="button"]')).toBeVisible();
+    await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
+    await expect.poll(() => wrapperStyle(page, 'width')).toBe('280px');
+  });
+});
@@ -10,14 +10,15 @@ import {
  updateEmbedSlot,
 } from './helpers';

-// P4b Task 4 嵌入轮播组件 Playwright（真实后端：cn 8080 + ov 8081 + viewer dev
+// UI-01 Task 6 嵌入轮播组件 Playwright（真实后端：cn 8080 + ov 8081 + viewer dev
 // 5175 由 playwright.config webServer 拉起或复用）。宿主夹具页
 // /__test__/embed-host.html（viewer publicDir 静态资产，仅测试用）引入真实
 // loader.js（/embed/v1/loader.js）→ iframe 载 /embed/{slot} → 走 ov 公开端点。
 // 展示位种子经 cn admin API 真实路径（seedAdmin + POST/PATCH），slot.updated
 // 事件以 flushOutbox 排空（不随相册 bootstrap 走，见 helpers 注）。
 // 断言锚点：loader 侧 wrapper（iframe 父 div，inline style）/ 把手（div[role=button]）；
-// iframe 内 viewer 侧 CSS 类名。CSP：夹具页不设（宿主真实 CSP 要求见
+// iframe 内 viewer 侧 CSS 类名（.embed-carousel/.embed-stage/.embed-indicator 等，
+// 见 src/pages/embed/*）。CSP：夹具页不设（宿主真实 CSP 要求见
 // packages/embed-loader/README-embed.md，此仅文档化）。

 const MINUTE = 60_000;
@@ -52,12 +53,19 @@ async function seedFeed(alias: string): Promise<SeededFeed> {
  return { slotToken: slot.token, slotId: slot.id, albumToken: album.publicToken, photoIds };
 }

-/** loader wrapper（iframe 父 div）inline height（px 字串；''=未置）。 */
-function wrapperHeight(page: Page): Promise<string> {
-  return page.locator('iframe').evaluate((frame) => (frame.parentElement as HTMLElement).style.height);
+/** loader wrapper（iframe 父 div）inline 样式属性值（''=未置）。 */
+function wrapperStyle(page: Page, prop: string): Promise<string> {
+  return page.locator('iframe').evaluate(
+    (frame, p) => ((frame.parentElement as HTMLElement).style as unknown as Record<string, string>)[p],
+    prop,
+  );
 }

-test.describe.serial('embed carousel widget (P4b Task 4)', () => {
+async function activeSrc(page: Page): Promise<string | null> {
+  return page.frameLocator('iframe').locator('.embed-photo.active img').getAttribute('src');
+}
+
+test.describe.serial('embed carousel widget (UI-01 Task 6)', () => {
  test.afterAll(async () => {
    await cleanupSeededAlbums();
  });
@@ -68,18 +76,14 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
    const frame = page.frameLocator('iframe');

-    // lang=auto → 相册 defaultLocale（zh-CN）标题。
+    // lang=auto → 相册 defaultLocale（zh-CN）标题；页码「当前序号 / 队列数」。
    await expect(frame.locator('.embed-title')).toHaveText('main 中文相册');
-    // 轮播照片就位（3 张，thumb 为真实签名 URL）。
-    await expect(frame.locator('.embed-photo img').first()).toBeVisible();
-    await expect(frame.locator('.embed-photo')).toHaveCount(3);
-    await expect(frame.locator('.embed-dot')).toHaveCount(3);
+    await expect(frame.locator('.embed-photo.active img')).toBeVisible();
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');

    // intervalMs 切换：当前展示照片变化（首个为 publishedAt 最新 p3）。
-    const firstSrc = await frame.locator('.embed-photo.active img').getAttribute('src');
-    await expect
-      .poll(async () => frame.locator('.embed-photo.active img').getAttribute('src'), { timeout: 10_000 })
-      .not.toBe(firstSrc);
+    const firstSrc = await activeSrc(page);
+    await expect.poll(() => activeSrc(page), { timeout: 10_000 }).not.toBe(firstSrc);

    // 点击照片 → 新标签打开 viewer 单图深链（noopener；lang 跟随 resolvedLocale）。
    const popupPromise = page.context().waitForEvent('page');
@@ -99,7 +103,7 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&lang=en`);
    const frame = page.frameLocator('iframe');
    await expect(frame.locator('.embed-title')).toHaveText('langen EN Album');
-    await expect(frame.locator('.embed-photo').first()).toBeVisible();
+    await expect(frame.locator('.embed-photo.active img')).toBeVisible();

    // 点击 → 新标签深链携带 lang=en（resolvedLocale）。
    const popupPromise = page.context().waitForEvent('page');
@@ -119,7 +123,7 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {

    // iframe 内 × → postMessage collapse → loader wrapper 高度 0 + 把手出现 + 会话记忆。
    await frame.locator('.embed-close').click();
-    await expect.poll(() => wrapperHeight(page)).toBe('0px');
+    await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
    await expect(page.locator('div[role="button"]')).toBeVisible();
    await expect
      .poll(() => page.evaluate((slot) => sessionStorage.getItem(`pl-embed-collapsed:${slot}`), feed.slotToken))
@@ -127,13 +131,13 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {

    // 刷新仍收起（会话内不反复弹出，需求 9）。
    await page.reload();
-    await expect.poll(() => wrapperHeight(page)).toBe('0px');
+    await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
    await expect(page.locator('div[role="button"]')).toBeVisible();

    // 把手点击 → loader 展开回记忆高度，并向 iframe 发 expand（恢复轮询）。
    await page.locator('div[role="button"]').click();
    await expect
-      .poll(async () => (await wrapperHeight(page)) !== '0px')
+      .poll(async () => (await wrapperStyle(page, 'height')) !== '0px')
      .toBe(true);
    await expect(frame.locator('.embed-title')).toHaveText('collapse 中文相册');
  });
@@ -146,16 +150,13 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {

    // <480px：强制 collapsedDefault + sm（280px 宽，计划评审缺口：移动端可用）。
    await expect(page.locator('div[role="button"]')).toBeVisible();
-    await expect.poll(() => wrapperHeight(page)).toBe('0px');
-    const width = await page
-      .locator('iframe')
-      .evaluate((frame) => (frame.parentElement as HTMLElement).style.width);
-    expect(width).toBe('280px');
+    await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
+    await expect.poll(() => wrapperStyle(page, 'width')).toBe('280px');

    // 把手展开可用（移动端不因默认收起而不可达）。
    await page.locator('div[role="button"]').click();
    await expect
-      .poll(async () => (await wrapperHeight(page)) !== '0px')
+      .poll(async () => (await wrapperStyle(page, 'height')) !== '0px')
      .toBe(true);
  });

@@ -173,14 +174,15 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
    // ?poll=2000 → 夹具页向 iframe 注入 __embedPollMs（同源；轮询 2s）。
    await page.goto(`/__test__/embed-host.html?slot=${slot.token}&poll=2000`);
    const frame = page.frameLocator('iframe');
-    await expect(frame.locator('.embed-photo')).toHaveCount(1);
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 01');

-    // 新照片发布（真实管线同步 ov，ETag 必变 → 200 增量）→ 追加队尾（A11 数据路径）。
+    // 新照片发布（真实管线同步 ov，ETag 必变 → 200 增量）→ 追加队尾（A11 数据路径）；
+    // 页码分母即时反映队列长度（≠ 相册照片总数语义由组件单测覆盖）。
    await seedPhoto(album.id, 'poll-p2', { publishedAt: new Date() });
    await flushSync(album.id);
    await expect
-      .poll(() => frame.locator('.embed-photo').count(), { timeout: 20_000 })
-      .toBe(2);
+      .poll(async () => (await frame.locator('.embed-indicator').textContent()) ?? '', { timeout: 20_000 })
+      .toMatch(/02$/);
  });

  test('rebinding to another album resets the feed (configVersion bump, A22)', async ({ page }) => {
@@ -204,18 +206,18 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
    await page.goto(`/__test__/embed-host.html?slot=${slot.token}&poll=2000`);
    const frame = page.frameLocator('iframe');
    await expect(frame.locator('.embed-title')).toHaveText('换绑前相册');
-    await expect(frame.locator('.embed-photo')).toHaveCount(2);
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 02');

    // 换绑：configVersion+1 → 轮询发现版本升 → 全量重置（新相册标题 + 新照片集，
    // 旧相册照片不残留——A22「旧响应不串图」）。
    await updateEmbedSlot(slot.id, { albumId: albumB.id });
    await flushOutbox();
    await expect
-      .poll(async () => frame.locator('.embed-title').textContent(), { timeout: 20_000 })
+      .poll(async () => (await frame.locator('.embed-title').textContent()) ?? '', { timeout: 20_000 })
      .toBe('换绑后相册');
    await expect
-      .poll(() => frame.locator('.embed-photo').count(), { timeout: 20_000 })
-      .toBe(1);
+      .poll(async () => (await frame.locator('.embed-indicator').textContent()) ?? '', { timeout: 20_000 })
+      .toBe('01 / 01');
  });

  test('album without photos shows the coming-soon card', async ({ page }) => {
@@ -230,17 +232,151 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {

    await page.goto(`/__test__/embed-host.html?slot=${slot.token}`);
    const frame = page.frameLocator('iframe');
-    await expect(frame.locator('.embed-title')).toHaveText('空相册展示位');
    await expect(frame.locator('.embed-empty')).toHaveText('照片即将上线');
+    await expect(frame.locator('.embed-heading')).toHaveText('活动照片');
  });

-  test('ghost slot collapses silently with no error UI inside the iframe', async ({ page }) => {
-    await page.goto(`/__test__/embed-host.html?slot=${makePublicToken()}`);
+  test('ghost slot is destroyed with no residue and no error UI (404 anti-probe)', async ({ page }) => {
+    const ghost = makePublicToken();
+    await page.goto(`/__test__/embed-host.html?slot=${ghost}`);

-    // 404（不存在/停用/未绑定同码防探测）→ postMessage collapse：wrapper 高度 0 +
-    // 把手出现；iframe 内无错误 UI（root 隐藏，不弹错误）。
-    await expect.poll(() => wrapperHeight(page), { timeout: 15_000 }).toBe('0px');
-    await expect(page.locator('div[role="button"]')).toBeVisible();
-    await expect(page.frameLocator('iframe').locator('.embed-root')).toHaveCount(0);
+    // 404（不存在/停用/未绑定同码防探测）→ postMessage destroy：宿主移除 wrapper
+    // 与把手（不留无效按钮）、清会话键；iframe 内无错误 UI。
+    await expect
+      .poll(() => page.locator('iframe').count(), { timeout: 15_000 })
+      .toBe(0);
+    await expect(page.locator('div[role="button"]')).toHaveCount(0);
+    expect(await page.evaluate((slot) => sessionStorage.getItem(`pl-embed-collapsed:${slot}`), ghost)).toBeNull();
+  });
+
+  // ── 暂停条件全集（§5.2：自动暂停离开即恢复；手动暂停不自动恢复）──
+
+  test('footer pause button stops rotation; play resumes it', async ({ page }) => {
+    const feed = await seedFeed('pause');
+    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
+    const frame = page.frameLocator('iframe');
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+    const srcBefore = await activeSrc(page);
+
+    await frame.getByRole('button', { name: '暂停轮播' }).click();
+    await page.waitForTimeout(4600);
+    await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
+
+    await frame.getByRole('button', { name: '播放轮播' }).click();
+    // 点击把键盘焦点留在按钮上——焦点暂停（§5.2）仍在生效属预期；点击宿主页
+    // 移出焦点后自动恢复轮换。
+    await page.mouse.click(5, 5);
+    await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
+  });
+
+  test('pointer hover pauses rotation and leaving resumes it', async ({ page }) => {
+    const feed = await seedFeed('hover');
+    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
+    const frame = page.frameLocator('iframe');
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+    const srcBefore = await activeSrc(page);
+
+    await frame.locator('.embed-carousel').hover();
+    await page.waitForTimeout(4600);
+    await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
+
+    await page.mouse.move(0, 0);
+    await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
+  });
+
+  test('keyboard focus inside the component pauses rotation', async ({ page }) => {
+    const feed = await seedFeed('focus');
+    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
+    const frame = page.frameLocator('iframe');
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+    const srcBefore = await activeSrc(page);
+
+    await frame.locator('.embed-photo-open').focus();
+    await page.waitForTimeout(4600);
+    await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
+
+    await frame.locator('.embed-photo-open').blur();
+    await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
+  });
+
+  test('hidden page pauses rotation and returning resumes it', async ({ page }) => {
+    const feed = await seedFeed('hidden');
+    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
+    const frame = page.frameLocator('iframe');
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+    const srcBefore = await activeSrc(page);
+
+    // jsdom 式覆写在真实 Chromium 同样可用：defineProperty 覆写 document.hidden
+    // 后派发 visibilitychange（iframe 内 useEmbedFeed + EmbedCarousel 双订阅）。
+    const child = page.frames().find((f) => f.url().includes('/embed/'));
+    expect(child).toBeDefined();
+    await child!.evaluate(() => {
+      Object.defineProperty(document, 'hidden', { configurable: true, get: () => true });
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+    await page.waitForTimeout(4600);
+    await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
+
+    await child!.evaluate(() => {
+      Object.defineProperty(document, 'hidden', { configurable: true, get: () => false });
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+    await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
+  });
+
+  // ── reduced motion（§5.2：默认暂停 + 手动切换；无过渡）──
+
+  test('prefers-reduced-motion defaults to paused with manual prev/next', async ({ page }) => {
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    const feed = await seedFeed('motion');
+    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
+    const frame = page.frameLocator('iframe');
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+
+    // 默认暂停：不自动切换（按钮态为「播放」）；手动上一张/下一张可用。
+    await expect(frame.getByRole('button', { name: '播放轮播' })).toBeVisible();
+    await page.waitForTimeout(4600);
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+
+    await frame.getByRole('button', { name: '下一张' }).click();
+    await expect(frame.locator('.embed-indicator')).toHaveText('02 / 03');
+    await frame.getByRole('button', { name: '上一张' }).click();
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+  });
+
+  // ── 后台设置动态生效（§5.4：configVersion 升值 → config 消息 → loader 二次
+  //    校验后应用非显式字段；iframe 内 imageFit 经响应 settings 生效）──
+
+  test('admin settings changes apply live via the config message', async ({ page }) => {
+    const feed = await seedFeed('cfg');
+    await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&poll=2000`);
+    const frame = page.frameLocator('iframe');
+    await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
+    await expect.poll(() => wrapperStyle(page, 'right')).toBe('16px');
+
+    await updateEmbedSlot(feed.slotId, {
+      settings: {
+        position: 'right',
+        size: 'md',
+        intervalMs: 5000,
+        lang: 'auto',
+        collapsedDefault: false,
+        imageFit: 'cover',
+        offsetX: 60,
+        offsetBottom: 90,
+        zIndex: 2000,
+      },
+    });
+    await flushOutbox();
+
+    // loader 侧：wrapper 偏移/层级随 config 消息更新（无 data-* 显式覆盖时）。
+    await expect.poll(() => wrapperStyle(page, 'right'), { timeout: 20_000 }).toBe('60px');
+    await expect.poll(() => wrapperStyle(page, 'bottom')).toBe('90px');
+    await expect.poll(() => wrapperStyle(page, 'zIndex')).toBe('2000');
+
+    // iframe 侧：imageFit=cover 应用到当前展示图（inline object-fit）。
+    await expect
+      .poll(() => frame.locator('.embed-photo.active img').evaluate((el) => el.style.objectFit))
+      .toBe('cover');
  });
 });