frontend/e2e/design-detail.test.ts
Rama master · réplica de lectura del repositorio original.
/* 设计决定：关注详情、作品详情、播放器与侧栏。读 `getComputedStyle` 断言用户定过的外观；共用的桩与浏览器生命周期在 `design-fixture.ts`。 */
import assert from 'node:assert/strict';
import { describe, it } from 'node:test';
import type { Browser, Page } from 'playwright-core';
import { DETAIL, openFollowFeed } from './follow-fixture.ts';
import { settle, visit, VIEWPORTS, type Viewport, type Visit } from './harness.ts';
import { muteVideos, openImmerse, pickClips, pinQueue, settledClip } from './immerse-fixture.ts';
import { ITEM, openItemPage } from './item-fixture.ts';
import { DESKTOP, MOBILE, tokenColor, installDesignBrowser } from './design-fixture.ts';
describe('设计决定：关注详情、作品详情、播放器与侧栏', () => {
let browser: Browser;
installDesignBrowser((next) => { browser = next; });
it('关注详情翻页圆钮固定两侧 11px；桌面 48px、手机 44px，导航条位于画面下方', { timeout: 90_000 }, async () => {
const read = (page: Page) => page.evaluate(() => {
const frame = document.querySelector<HTMLElement>('#stage [data-follow-detail-media="image"]')!;
const next = frame.querySelector('[data-follow-image-arrow="next"]')!, style = getComputedStyle(next);
const outer = frame.getBoundingClientRect(), box = next.getBoundingClientRect();
const indicator = frame.querySelector('[data-media-indicator]')!.getBoundingClientRect();
return {
size: [box.width, box.height], background: style.backgroundColor, blur: style.backdropFilter,
inset: outer.right - box.right, indicatorBottom: outer.bottom - indicator.bottom,
framed: frame.hasAttribute('data-framed'),
ratio: getComputedStyle(frame.querySelector('[data-follow-detail-poster]')!).aspectRatio,
};
});
const settlePoster = async (page: Page) => {
await page.waitForFunction(() => {
const image = document.querySelector<HTMLImageElement>('#stage [data-follow-detail-poster]');
return image?.complete && image.naturalWidth > 0;
});
// 图像解码与布局就绪后读取几何。
await page.evaluate(() => new Promise<void>(resolve => {
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
}));
};
const wide = await openFollowFeed(browser, `/posts/${DETAIL.gallery}`, DESKTOP,
{ ready: '#stage [data-follow-image-arrow="next"]' });
try {
await settlePoster(wide.page);
const shown = await read(wide.page);
assert.deepEqual(shown.size, [48, 48]);
assert.equal(shown.background, 'rgba(0, 0, 0, 0.6)');
assert.equal(shown.blur, 'blur(16px)');
assert.ok(Math.abs(shown.inset - 11) <= 1, `箭头内距：${JSON.stringify(shown)}`);
assert.ok(Math.abs(shown.indicatorBottom - 8) <= .5, `导航条底部留白 ${shown.indicatorBottom}px`);
// 画框比例跟整组图走：换图时详情不忽高忽低。
assert.equal(shown.framed, true);
assert.match(shown.ratio, /^0\.75\b/);
assert.deepEqual(wide.problems, []);
} finally {
await wide.close();
}
const narrow = await openFollowFeed(browser, `/posts/${DETAIL.gallery}`, MOBILE,
{ ready: '#stage [data-follow-image-arrow="next"]' });
try {
await settlePoster(narrow.page);
const shown = await read(narrow.page);
assert.deepEqual(shown.size, [44, 44]);
assert.ok(Math.abs(shown.inset - 11) <= 1, `窄屏箭头内距：${JSON.stringify(shown)}`);
assert.ok(Math.abs(shown.indicatorBottom - 8) <= .5, `窄屏导航条底部留白 ${shown.indicatorBottom}px`);
assert.deepEqual(narrow.problems, []);
} finally {
await narrow.close();
}
});
it('关注详情：无预览媒体占 16:9；标签保留来源分类并复用详情标签外观', { timeout: 60_000 }, async () => {
const opened = await openFollowFeed(browser, `/posts/${DETAIL.bare}`, DESKTOP,
{ ready: '#stage [data-follow-detail-tags]' });
try {
const page = opened.page;
const shown = await page.evaluate(() => ({
placeholder: getComputedStyle(document.querySelector('#stage [data-follow-detail-placeholder]')!).aspectRatio,
tags: Object.fromEntries([...document.querySelectorAll<HTMLElement>('#stage [data-follow-detail-tags] [data-follow-tag]')].map((tag) =>
[tag.dataset.followTag, getComputedStyle(tag).getPropertyValue('--tag-color').trim()])),
}));
assert.equal(shown.placeholder, '16 / 9');
const chip = await page.locator('#stage [data-detail-tag]').first().evaluate(node => {
const style = getComputedStyle(node), probe = document.createElement('span');
probe.style.backgroundColor = 'color-mix(in srgb,var(--tag-color) 10%,var(--surface))'; node.append(probe);
const expected = getComputedStyle(probe).backgroundColor; probe.remove();
return { fill: style.backgroundColor, expected, height: node.getBoundingClientRect().height };
});
assert.equal(chip.fill, chip.expected);
assert.ok(chip.height >= 20 && chip.height <= 32);
const muted = await tokenColor(page, '#stage [data-follow-detail]', '--muted');
const unknown = await page.evaluate(() => {
const tag = document.querySelector<HTMLElement>('#stage [data-follow-detail-tags] [data-follow-tag="odd"]')!;
const probe = document.createElement('div');
probe.style.backgroundColor = 'var(--tag-color)';
tag.append(probe);
const value = getComputedStyle(probe).backgroundColor;
probe.remove();
return value;
});
assert.deepEqual({ ...shown.tags, odd: unknown }, {
ow: '#d675d6', tracer: '#68c76f', kou: '#e36c6c', solo: '#55a7ff', animated: '#f5a24a', odd: muted,
});
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('关注详情标题：来源外链标与标题第一行同心，标题折行时仍贴第一行', { timeout: 60_000 }, async () => {
const opened = await openFollowFeed(browser, `/posts/${DETAIL.gallery}`, DESKTOP,
{ ready: '#stage [data-follow-origin]' });
try {
const page = opened.page;
const measure = () => page.evaluate(() => {
const name = document.querySelector('#stage [data-follow-detail-name]')!;
const mark = document.querySelector('#stage [data-follow-origin] svg')!.getBoundingClientRect();
return { line: name.getBoundingClientRect().top + parseFloat(getComputedStyle(name).lineHeight) / 2,
mark: (mark.top + mark.bottom) / 2 };
});
const single = await measure();
assert.ok(Math.abs(single.mark - single.line) <= 0.5, `外链标与标题第一行不同心：${JSON.stringify(single)}`);
await page.evaluate(() => { document.querySelector('#stage [data-follow-detail-name]')!.textContent = '很长的标题'.repeat(12) });
const wrapped = await measure();
assert.ok(Math.abs(wrapped.mark - wrapped.line) <= 0.5, `标题折行后外链标离开了第一行：${JSON.stringify(wrapped)}`);
} finally {
await opened.close();
}
});
/* 作品详情（`item-detail` 岛）。桩数据见 `item-fixture.ts`：普通那一条评了 3 星、两位出演、
一个厂牌一个系列，都带实体 id。桩里的片源没有正片，播放器那一条 VIDEOJS 错误不算。 */
const withoutPlayer = (problems: string[]) => problems.filter((line) => !line.includes('VIDEOJS'));
it('作品详情标题与评分：来源徽标站在标题第一行开头；整排星一种琥珀、评没评只看填不填，悬停预演到指针那一颗', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const title = await page.evaluate(() => {
const text = document.querySelector('#stage [data-detail-title]')!;
const badge = text.querySelector('[class~="srcbig"]')!;
const style = getComputedStyle(badge);
const glyph = badge.querySelector('svg, img')!.getBoundingClientRect();
const line = text.getBoundingClientRect().top + parseFloat(getComputedStyle(text).lineHeight) / 2;
return {
clamp: getComputedStyle(text).webkitLineClamp,
first: text.firstElementChild === badge,
badge: { display: style.display, width: style.width, height: style.height, gap: style.marginRight },
centered: Math.abs((glyph.top + glyph.bottom) / 2 - line) <= 0.5,
tools: document.querySelector('#stage [data-title-tools]')!.getBoundingClientRect().top
>= text.getBoundingClientRect().bottom - 0.5,
};
});
assert.deepEqual(title, {
clamp: '2', first: true, badge: { display: 'inline-grid', width: '17px', height: '28px', gap: '8px' },
centered: true, tools: true,
}, '徽标是行内块、与第一行同心、随文字一起被两行折叠裁住；那排键自成一行排在标题下面');
const stars = page.locator('#stage [data-rate]');
const read = () => stars.evaluateAll((nodes) => nodes.map((node) => ({
color: getComputedStyle(node).color, filled: getComputedStyle(node.querySelector('svg')!).fill !== 'none',
})));
const amber = await tokenColor(page, '#stage [data-item-detail]', '--rating');
await page.mouse.move(0, 0);
const rest = await read();
assert.deepEqual(rest.map((star) => star.color), Array(5).fill(amber), '换色那一档在浅色主题下凑不出两级都成立的灰');
assert.deepEqual(rest.map((star) => star.filled), [true, true, true, false, false]);
await stars.nth(1).hover();
const preview = await read();
assert.deepEqual(preview.map((star) => star.color), Array(5).fill(amber));
assert.deepEqual(preview.map((star) => star.filled), [true, true, false, false, false]);
const edges = await page.evaluate(() => {
const box = (selector: string) => document.querySelector(`#stage ${selector}`)!.getBoundingClientRect();
return { stars: box('[data-rating-stars]').left, title: box('[data-detail-title]').left };
});
assert.equal(edges.stars, edges.title - 4, '26px 命中区里的星形靠右约 4px 起笔，这一排往左让回来');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('作品详情身份区：各组按内容宽并排换行，名字在头像下居中、行框容得下下伸部；系列是整行宽的图标链接，不是标签胶囊', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const shown = await page.evaluate(() => {
const stage = document.querySelector('#stage')!;
const primary = stage.querySelector('[data-identity-primary]')!;
const width = primary.getBoundingClientRect().width;
const name = getComputedStyle(stage.querySelector('[data-id-group="performer"] [data-id-name]')!);
const series = stage.querySelector('[data-series-link]')!;
const link = getComputedStyle(series);
return {
primary: [getComputedStyle(primary).display, getComputedStyle(primary).flexWrap],
narrower: [...primary.querySelectorAll('[data-id-group]')].every((group) => group.getBoundingClientRect().width < width),
name: { ratio: parseFloat(name.lineHeight) / parseFloat(name.fontSize), overflow: name.textOverflow, align: name.textAlign },
cursor: getComputedStyle(stage.querySelector('[data-id-group="performer"] [data-id-cell]')!).cursor,
face: getComputedStyle(stage.querySelector('[data-id-group="performer"] [data-id-face]')!).backgroundColor,
series: {
display: link.display, wrap: link.overflowWrap, border: link.borderTopWidth,
full: Math.abs(series.getBoundingClientRect().width - series.parentElement!.getBoundingClientRect().width) < 0.5,
},
};
});
assert.deepEqual(shown.primary, ['flex', 'wrap']);
assert.equal(shown.narrower, true, '组按内容宽，共演作品不会一组占满一行');
assert.ok(shown.name.ratio >= 1.5, `名字行高 ${shown.name.ratio} 倍字号，拉丁字母的下伸部会被省略号那层 overflow 裁掉`);
assert.deepEqual([shown.name.overflow, shown.name.align], ['ellipsis', 'center']);
assert.equal(shown.cursor, 'pointer');
assert.notEqual(shown.face, 'rgba(0, 0, 0, 0)', '没图的头像画首字盘');
assert.deepEqual(shown.series, { display: 'flex', wrap: 'anywhere', border: '0px', full: true });
await page.locator('#stage [data-series-link]').hover();
const hovered = await page.locator('#stage [data-series-link]').evaluate((node) =>
[getComputedStyle(node).color, getComputedStyle(node).textDecorationLine]);
assert.deepEqual(hovered, [await tokenColor(page, '#stage [data-item-detail]', '--tungsten'), 'none']);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
for (const viewport of VIEWPORTS) {
it(`作品详情头像按有尺寸的圆框取景并显示（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, viewport);
try {
const page = opened.page;
const base = await page.evaluate(() => fetch('/api/item?id=14').then((response) => response.json()));
const payload = { ...base, performers: ['取景艺人', '无图艺人'],
entity_refs: { ...base.entity_refs, performer: [
{ id: 3, name: '取景艺人', has_image: true, image_version: 'face-version',
avatar_focus: { box: { cx: 0.58, cy: 0.49, faceW: 344, imgW: 1000, imgH: 1000 } } },
{ id: 4, name: '无图艺人', has_image: false },
] } };
await page.route((url) => url.pathname === '/api/item', (route) => route.fulfill({ json: payload }));
await page.route('**/entity-image**', (route) => route.fulfill({ contentType: 'image/svg+xml',
body: '<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><rect width="1000" height="1000" fill="#ddd"/></svg>' }));
await page.goto(new URL('/assets/14', page.url()).href, { waitUntil: 'load' });
const face = page.locator('#stage [data-entity-name="取景艺人"] [data-id-face]');
await face.scrollIntoViewIfNeeded();
await page.waitForFunction(() => {
const image = document.querySelector<HTMLImageElement>('#stage [data-id-cell="performer"] img');
return image?.complete && image.naturalWidth > 0;
});
const geometry = await face.evaluate((ring) => {
const image = ring.querySelector('img')!, frame = ring.getBoundingClientRect(), pixels = image.getBoundingClientRect();
return { visible: getComputedStyle(image).visibility, framed: image.hasAttribute('data-face-framed'),
direct: image.parentElement === ring, zoomed: pixels.width > frame.width,
covers: pixels.left <= frame.left + 0.5 && pixels.right >= frame.right - 0.5
&& pixels.top <= frame.top + 0.5 && pixels.bottom >= frame.bottom - 0.5 };
});
assert.deepEqual(geometry, { visible: 'visible', framed: true, direct: true, zoomed: true, covers: true });
assert.equal(await page.locator('#stage [data-entity-name="无图艺人"] img').count(), 0);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally { await opened.close(); }
});
}
it('作品详情身份区：没实体 id 的格子不给手形，厂牌标识铺满方框', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
// 先经桩取到原样的那一条；`route.fetch()` 会绕过桩直接打到服务器。
const base = await page.evaluate(() => fetch('/api/item?id=14').then((response) => response.json()));
const payload = {
...base, performers: ['无名氏'], performer_total: 1, performer_entities: [{ id: 0, has_image: false }], has_studio_logo: true,
entity_refs: { ...base.entity_refs,
performer: [{ id: 0, name: '无名氏', has_image: false, avatar_focus: null }],
studio: [{ id: 50, name: 'Peach Studio', has_image: false, has_logo: true }] },
};
await page.route((url) => url.pathname === '/api/item', (route) => route.fulfill({ json: payload }));
await page.goto(new URL('/assets/14', page.url()).href, { waitUntil: 'load' });
await page.locator('#stage [data-id-cell="studio"] img').waitFor({ timeout: 15_000 });
await settle(page);
const shown = await page.evaluate(() => {
const cell = (kind: string) => document.querySelector(`#stage [data-id-cell="${kind}"]`)!;
const face = cell('studio').querySelector('[data-id-face]')!.getBoundingClientRect();
const img = cell('studio').querySelector('img')!;
const box = img.getBoundingClientRect();
return {
performer: [cell('performer').tagName, getComputedStyle(cell('performer')).cursor],
studio: getComputedStyle(cell('studio')).cursor,
fit: getComputedStyle(img).objectFit,
filled: [box.left - face.left, box.top - face.top, box.width - face.width, box.height - face.height]
.every((delta) => Math.abs(delta) < 0.5),
};
});
assert.deepEqual(shown, { performer: ['SPAN', 'default'], studio: 'pointer', fit: 'cover', filled: true },
'标识文件自带边距，页面再补 inset 或换成 contain 就多围出一圈框');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('作品详情标签多时先露 20 个，展开键报出剩下几个，展开后能收回', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const base = await page.evaluate(() => fetch('/api/item?id=14').then((response) => response.json()));
const tags = Array.from({ length: 30 }, (_, index) => ({ k: `折叠标签${String(index).padStart(2, '0')}`, cat: 'scene' }));
await page.route((url) => url.pathname === '/api/item', (route) => route.fulfill({ json: { ...base, tags } }));
await page.goto(new URL('/assets/14', page.url()).href, { waitUntil: 'load' });
const more = page.locator('#stage [data-tags-more]');
await more.waitFor({ timeout: 15_000 });
const chips = page.locator('#stage [data-detail-tags] [data-detail-tag]');
assert.deepEqual([await chips.count(), (await more.innerText()).trim()], [20, '还有 10 个']);
await more.click();
assert.deepEqual([await chips.count(), (await more.innerText()).trim()], [30, '收起']);
await more.click();
assert.equal(await chips.count(), 20);
assert.equal(await page.locator('#stage [data-detail-tags] [data-tag-plus]').isVisible(), true, '收起时加号照样在');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('作品详情标签与反馈键：标签和卡片同一张脸，筛选那半边悬停抬填充；反馈条每一枚悬停都换色', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const face = await page.evaluate(() => {
const tag = document.querySelector('#stage [data-detail-tag]')!;
const probe = document.createElement('div');
probe.style.cssText = 'border:1px solid var(--line);border-radius:var(--tag-radius);background:var(--tag-fill);color:var(--ink-2)';
tag.parentElement!.append(probe);
const want = getComputedStyle(probe);
const expected = { radius: want.borderTopLeftRadius, line: want.borderTopColor, fill: want.backgroundColor, ink: want.color };
probe.remove();
const style = getComputedStyle(tag);
return { expected, actual: { radius: style.borderTopLeftRadius, line: style.borderTopColor,
fill: style.backgroundColor, ink: getComputedStyle(tag.querySelector('[data-tag]')!).color } };
});
assert.deepEqual(face.actual, face.expected, '圆角、线、填充与字色都走卡片那颗 `.tg` 的同一组 token');
const filter = page.locator('#stage [data-detail-tag] [data-tag]').first();
await filter.hover();
assert.equal(await filter.evaluate((node) => getComputedStyle(node).backgroundColor),
await tokenColor(page, '#stage [data-item-detail]', '--hover'));
const buttons = ['[data-fb="like"]', '[data-fb="reason"]', '[data-stage-action="dislike"]', '[data-stage-action="seen"]', '[data-stage-action="later"]', '[data-fb="playlist"]',
'[data-fb="quality"]', '[data-fb="dispose"]'];
const unchanged: string[] = [];
for (const selector of buttons) {
const button = page.locator(`#stage [data-stage-actions] ${selector}`);
const color = () => button.evaluate((node) => {
node.getAnimations({ subtree: true }).forEach((animation) => animation.finish());
return getComputedStyle(node).color;
});
await page.mouse.move(0, 0);
const rest = await color();
await button.hover();
if (await color() === rest) unchanged.push(selector);
}
assert.deepEqual(unchanged, [], '漏写配色的那一枚全程停在 --muted，看着像不能点');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('作品详情喜爱理由框与「接着看」：输入框聚焦画 BoardUI 那枚 2px 内环；接着看和侧栏同底、顶上一条细线', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#stage [data-media-card]').first().waitFor({ timeout: 15_000 });
await page.locator('#preferenceToggle').click();
const field = page.locator('#stage [data-item-preference] textarea');
await field.focus();
const ring = await field.evaluate((node) => {
node.getAnimations().forEach((animation) => animation.finish());
return getComputedStyle(node).boxShadow;
});
const active = await tokenColor(page, '#stage [data-item-detail]', '--color-border-button-active');
assert.equal(ring, `${active} 0px 0px 0px 2px inset`);
const related = await page.evaluate(() => {
const block = document.querySelector('#stage [data-item-related]')!;
const style = getComputedStyle(block);
const row = getComputedStyle(block.querySelector('[data-related-row]')!);
return {
fill: style.backgroundColor, side: getComputedStyle(document.querySelector('#stage [data-item-side]')!).backgroundColor,
line: [style.borderTopWidth, style.borderTopStyle, style.borderTopColor],
heading: getComputedStyle(block.querySelector('h3')!).fontWeight,
row: [row.display, row.overflowX, row.scrollbarWidth],
};
});
assert.equal(related.fill, related.side, '同一格详情的两块，底色同源，不然整幅宽度上留一道色差');
assert.deepEqual(related.line, ['1px', 'solid', await tokenColor(page, '#stage', '--line-soft')]);
assert.equal(related.heading, '600');
assert.deepEqual(related.row, ['flex', 'auto', 'none'], '那一排横滚，不露系统滚动条');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('作品详情队列与说明块：版次徽章和标题同一行、不斜体；脱盘说明块铺满播放器格', { timeout: 60_000 }, async () => {
const editions = await openItemPage(browser, `/assets/${ITEM.edition}?editions=${ITEM.edition}`, DESKTOP,
{ ready: '#stage [data-queue-edition]' });
try {
const shown = await editions.page.evaluate(() => {
const badge = document.querySelector('#stage [data-queue-edition]')!;
const head = badge.parentElement!;
const name = head.querySelector('b')!.getBoundingClientRect();
const box = badge.getBoundingClientRect();
return {
head: [getComputedStyle(head).display, getComputedStyle(head).flexDirection],
badge: [getComputedStyle(badge).fontStyle, getComputedStyle(badge).flexShrink, getComputedStyle(badge).maxWidth],
sameRow: box.top < name.bottom && box.bottom > name.top,
heading: getComputedStyle(document.querySelector('#stage [data-mix-queue-head] h2')!).fontWeight,
};
});
assert.deepEqual(shown, { head: ['flex', 'row'], badge: ['normal', '1', '50%'], sameRow: true, heading: '600' },
'`<i>` 默认斜体，徽章不是强调语气；长版次字样最多占一半宽，番号不被挤没');
/* 队列头的按钮是关闭一类的操作，走控件圆角，不是圆形标签。 */
const head = await editions.page.evaluate(() => {
const button = document.querySelector('#stage [data-mix-queue-head] button')!;
return [getComputedStyle(button).borderTopLeftRadius, getComputedStyle(button).getPropertyValue('--control-radius').trim()];
});
assert.equal(head[0], head[1]);
assert.deepEqual(withoutPlayer(editions.problems), []);
} finally {
await editions.close();
}
const offline = await openItemPage(browser, `/assets/${ITEM.offline}`, DESKTOP, { ready: '#stage #offlineGate' });
try {
const fit = await offline.page.evaluate(() => {
const gate = document.querySelector('#stage #offlineGate')!;
const cell = gate.parentElement!;
const a = gate.getBoundingClientRect(), b = cell.getBoundingClientRect();
return {
filled: [a.left - b.left, a.top - b.top, a.width - b.width, a.height - b.height].every((delta) => Math.abs(delta) < 0.5),
radius: [getComputedStyle(gate).borderTopLeftRadius, getComputedStyle(cell).borderTopLeftRadius],
};
});
assert.equal(fit.filled, true, '说明块铺满播放器格，不上下留黑');
assert.equal(fit.radius[0], fit.radius[1], '圆角跟着格走');
assert.notEqual(fit.radius[0], '0px');
assert.deepEqual(offline.problems, []);
} finally {
await offline.close();
}
});
it('作品详情标签选择器用全站下拉面板那一对开合动效，减少动态效果时当场开合', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const picker = page.locator('#stage [data-tag-picker]');
/* 关闭动效只有 150ms，点完再读计算样式会在负载高时读到已收起；改记选择器上真正开播过的动效。 */
await page.evaluate(() => {
const played: string[] = [];
(window as unknown as { pickerMotion: string[] }).pickerMotion = played;
document.addEventListener('animationstart', (event) => {
if ((event.target as Element).matches('[data-tag-picker]')) played.push(event.animationName);
}, true);
});
const played = () => page.evaluate(() => (window as unknown as { pickerMotion: string[] }).pickerMotion.splice(0));
const cycle = async () => {
await page.locator('#tagPlus').click();
await page.locator('#tagPickSearch').waitFor();
if (await page.evaluate(() => !matchMedia('(prefers-reduced-motion: reduce)').matches)) {
await page.waitForFunction(() => (window as unknown as { pickerMotion: string[] }).pickerMotion.includes('board-menu-in'));
}
await page.locator('#stage [data-rating-value]').click();
await picker.waitFor({ state: 'hidden' });
return played();
};
assert.deepEqual(await cycle(), [], '减少动态效果时当场开合，不播动效');
await page.emulateMedia({ reducedMotion: 'no-preference' });
assert.deepEqual(await cycle(), ['board-menu-in', 'board-menu-out']);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
/* 舞台与播放器的外观：数值照 YouTube 桌面版 delhi-modern 的播放器与 ytd-miniplayer 实测定下。
桩里的片源放不出来，Video.js 停在错误态，控件照样挂着，读的是计算值。 */
const PLAYER_BAR = '#stage .video-js .vjs-control-bar';
const PLAYER_BLACK = 'rgba(0, 0, 0, 0.6)';
const styleOf = (page: Page, selector: string, properties: string[], pseudo = '') => page.evaluate(
([target, names, element]) => {
const node = document.querySelector(target);
if (!node) return null;
const style = getComputedStyle(node, element || null);
return Object.fromEntries(names.map((name) => [name, style.getPropertyValue(name)]));
}, [selector, properties, pseudo] as const);
const tokenOf = (page: Page, selector: string, token: string) => page.evaluate(([target, name]) =>
getComputedStyle(document.querySelector(target)!).getPropertyValue(name).trim(), [selector, token] as const);
it('详情浮窗：遮罩同一档 --scrim、不带模糊，进出场同设置弹层；关闭键是压在画面上的 40px 黑圆；媒体格只圆左上角，剧场模式圆上面两角、排成单列', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP, { settings: { theme: 'light' } });
try {
const page = opened.page;
const scrim = await tokenColor(page, 'body', '--scrim');
assert.equal(scrim, 'rgba(0, 0, 0, 0.7)');
await page.emulateMedia({ reducedMotion: 'no-preference' });
assert.deepEqual(await styleOf(page, '#stage', ['background-color', 'backdrop-filter', 'animation-name'], '::backdrop'),
{ 'background-color': scrim, 'backdrop-filter': 'none', 'animation-name': 'settings-backdrop-in' });
assert.equal((await styleOf(page, '#stage', ['animation-name']))!['animation-name'], 'board-dialog-in');
/* 亮色主题下白底白晕看不出悬停，用户以 YouTube 为参照：播放器上的键在亮色下也是黑底。 */
assert.deepEqual(await styleOf(page, '#closeStage', ['width', 'height', 'border-top-left-radius', 'background-color', 'color']),
{ width: '40px', height: '40px', 'border-top-left-radius': '50%', 'background-color': PLAYER_BLACK, color: 'rgb(255, 255, 255)' });
const corners = () => styleOf(page, '#stage [data-stage-media]',
['border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius']);
const wide = (await corners())!;
assert.notEqual(wide['border-top-left-radius'], '0px', '媒体格左上角没圆');
assert.deepEqual([wide['border-top-right-radius'], wide['border-bottom-left-radius']], ['0px', '0px'],
'媒体格右边贴着侧栏、下面接着「接着看」，只圆左上角');
/* `overflow-y:auto` 会把 overflow-x 算成 auto，内容宽出 1px 就冒横向滚动条；侧栏撑满所在那一行，不露半截底色。 */
assert.deepEqual(await styleOf(page, '#stage [data-stage-side-content]', ['overflow-x', 'overflow-y']),
{ 'overflow-x': 'hidden', 'overflow-y': 'auto' });
assert.equal((await styleOf(page, '#stage [data-stage-side]', ['align-self']))!['align-self'], 'stretch');
await page.locator('#stage [data-player-theater]').dispatchEvent('click');
await page.locator('#stage[data-theater]').waitFor();
const theater = (await corners())!;
assert.deepEqual([theater['border-top-right-radius'], theater['border-bottom-left-radius']],
[wide['border-top-left-radius'], '0px'], '剧场模式下媒体格圆上面两角');
const columns = (await styleOf(page, '#stage [data-stage-grid]', ['grid-template-columns']))!['grid-template-columns']!;
assert.equal(columns.split(' ').length, 1, `剧场模式没排成单列：${columns}`);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('手机上详情浮窗离屏幕边 8px，滚的是里面那一层，视频格吸在它顶上', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, MOBILE);
try {
const page = opened.page;
await page.locator(PLAYER_BAR).waitFor({ state: 'attached' });
const box = (await page.locator('#stage').boundingBox())!;
assert.deepEqual([box.x, box.y, box.width], [8, 8, MOBILE.width - 16]);
assert.equal((await styleOf(page, '#stage > [data-stage-scroll]', ['overflow-y']))!['overflow-y'], 'auto');
assert.deepEqual(await styleOf(page, '#stage [data-stage-media]', ['position', 'top']), { position: 'sticky', top: '0px' });
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('手机上界面按钮与标签长按不选字、点按不等双击判定；标题、番号这类馆藏数据照常能选中复制', { timeout: 90_000 }, async () => {
/* 每个样本取 [touch-action, user-select]；没找到记成 null。 */
const touchOf = (page: Page, selectors: string[]) => page.evaluate((list) => list.map((selector) => {
const node = document.querySelector(selector);
return node ? [getComputedStyle(node).touchAction, getComputedStyle(node).userSelect] : null;
}), selectors);
const controls = ['#closeStage', '#likeBtn', '#stage [data-stage-action]', '#stage [data-title-fold]', '#tagPlus',
'#stage [data-detail-tag] [data-tag]'];
const stage = await openItemPage(browser, `/assets/${ITEM.plain}`, MOBILE);
try {
await stage.page.locator('#stage [data-detail-tag] [data-tag]').first().waitFor({ state: 'attached' });
assert.deepEqual(await touchOf(stage.page, controls), controls.map(() => ['manipulation', 'none']),
`控件顺序：${controls.join('、')}`);
const [title] = await touchOf(stage.page, ['#stage [data-detail-title]']);
assert.notEqual(title?.[1], 'none', '详情标题是内容，不能跟着控件一起关掉选字');
assert.deepEqual(withoutPlayer(stage.problems), []);
} finally {
await stage.close();
}
const home = await openItemPage(browser, '/', MOBILE, { ready: '#grid [data-media-card] [data-media-title]' });
try {
const [card] = await touchOf(home.page, ['#grid [data-media-card] [data-media-title]']);
assert.equal(card?.[0], 'manipulation', '作品卡标题是按钮，点按不该等双击判定');
assert.notEqual(card?.[1], 'none', '作品卡标题装着番号，长按要能选中复制');
assert.deepEqual(home.problems, []);
} finally {
await home.close();
}
});
it('播放器控件：40px 黑圆播放键、同一档黑的右侧胶囊与提示、钨丝色进度、页面字体；统计键与加载速度角标压在左上；报错是一张盖在统计上面的卡', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator(PLAYER_BAR).waitFor({ state: 'attached' });
assert.deepEqual(await styleOf(page, `${PLAYER_BAR} > .vjs-play-control`, ['width', 'height', 'border-top-left-radius', 'background-color']),
{ width: '40px', height: '40px', 'border-top-left-radius': '50%', 'background-color': PLAYER_BLACK });
assert.equal((await styleOf(page, '#stage .vjs-peach-right-controls', ['background-color']))!['background-color'], PLAYER_BLACK);
/* 错误态下控件条收起、量不到盒子，读它离播放器四边的计算值。 */
assert.deepEqual(await styleOf(page, PLAYER_BAR, ['left', 'right', 'bottom', 'height']),
{ left: '12px', right: '12px', bottom: '8px', height: '59px' });
/* 彩条 6px，抓取区 18px，多出来的 12px 全在条上方：往下扩会盖住按钮那一排的顶边。 */
assert.deepEqual(await styleOf(page, '#stage .vjs-progress-control', ['height', 'top']), { height: '18px', top: '-12px' });
assert.equal((await styleOf(page, '#stage .vjs-progress-holder > media-slider-track', ['height']))!.height, '6px', '彩条本身不变粗');
assert.equal((await styleOf(page, '#stage .vjs-play-progress', ['background-color']))!['background-color'],
await tokenColor(page, '#stage', '--tungsten'));
assert.equal((await styleOf(page, '#stage .video-js', ['font-family']))!['font-family'],
(await styleOf(page, 'body', ['font-family']))!['font-family'], '播放器里的字用页面字体，不是 Video.js 的 Arial');
assert.deepEqual(await styleOf(page, '#stage [data-player-theater] > .vjs-peach-tooltip',
['background-color', 'color', 'padding-top', 'padding-left', 'backdrop-filter', 'white-space']),
{ 'background-color': PLAYER_BLACK, color: 'rgb(255, 255, 255)', 'padding-top': '5px', 'padding-left': '9px',
'backdrop-filter': 'blur(16px)', 'white-space': 'nowrap' });
assert.deepEqual(await styleOf(page, '#stage #playerStatsBtn', ['width', 'height', 'border-top-left-radius', 'background-color']),
{ width: '40px', height: '40px', 'border-top-left-radius': '50%', 'background-color': PLAYER_BLACK });
assert.deepEqual(await styleOf(page, '#stage [data-player-toolbar]', ['left', 'top', 'flex-wrap']),
{ left: '11px', top: '11px', 'flex-wrap': 'wrap' });
/* 音量胶囊和右边那枚同一排，毛玻璃同一档：只有一边磨砂，展开后它就比邻居更透。 */
assert.equal((await styleOf(page, `${PLAYER_BAR} > .vjs-volume-panel`, ['backdrop-filter']))!['backdrop-filter'], 'blur(16px)');
assert.deepEqual(await styleOf(page, '#stage #playerNet', ['height', 'white-space']),
{ height: '40px', 'white-space': 'nowrap' }, '速率断成两行会顶破 40px 的胶囊');
/* sprite 里的仪表盘是描边图形，容器不声明就按 SVG 默认填成黑块，压在黑底上等于没有图标。
演示库的片子放不出来、角标没有速率可写，量的是临时塞进去的一枚 svg。 */
const gauge = await page.evaluate(() => {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
document.querySelector('#stage #playerNet')!.append(svg);
const style = getComputedStyle(svg);
const shown = { fill: style.fill, stroke: style.stroke };
svg.remove();
return shown;
});
assert.deepEqual(gauge, { fill: 'none', stroke: 'rgb(255, 255, 255)' });
await page.locator('#stage .video-js.vjs-error').waitFor({ timeout: 10_000 });
const error = (await styleOf(page, '#stage .vjs-error-display .vjs-modal-dialog-content', ['background-color', 'z-index']))!;
const stats = (await styleOf(page, '#stage #playerStats', ['z-index']))!;
assert.equal(error['background-color'], 'rgba(2, 4, 8, 0.86)');
assert.ok(Number(error['z-index']) > Number(stats['z-index']), `报错卡压在统计面板底下：${error['z-index']} / ${stats['z-index']}`);
const card = (await page.locator('#stage .vjs-error-display .vjs-modal-dialog-content').boundingBox())!;
const frame = (await page.locator('#stage .video-js').boundingBox())!;
assert.ok(Math.abs(card.x + card.width / 2 - (frame.x + frame.width / 2)) < 1
&& Math.abs(card.y + card.height / 2 - (frame.y + frame.height / 2)) < 1, '报错卡居中在画面里，躲开左上角的速率角标');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('播放器的设置面板与右键菜单：同一档黑、浮层圆角、48px 的行；右键菜单悬停抬一层白', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#stage #playerStatsBtn').waitFor();
const menu = '#stage .vjs-peach-settings-menu';
/* 关闭态不能是 display:none：它没有可过渡的中间态，面板只会瞬间消失。 */
assert.deepEqual(await styleOf(page, menu, ['display', 'opacity', 'visibility']),
{ display: 'block', opacity: '0', visibility: 'hidden' });
await page.locator('#stage .vjs-peach-settings-toggle').dispatchEvent('click');
const floating = await tokenOf(page, menu, '--floating-radius');
const settings = (await styleOf(page, menu, ['background-color', 'border-top-left-radius', 'width', 'backdrop-filter']))!;
assert.equal(settings['background-color'], PLAYER_BLACK);
assert.equal(settings['backdrop-filter'], 'blur(16px)', '设置面板的毛玻璃没生效');
assert.equal(settings['border-top-left-radius'], floating);
assert.ok(parseFloat(settings.width!) <= 274, `设置面板宽 ${settings.width}`);
assert.equal((await styleOf(page, `${menu} .vjs-peach-menu-row`, ['min-height']))!['min-height'], '48px');
await page.locator('#stage .vjs-peach-settings-toggle').dispatchEvent('click');
await page.locator('#stage .video-js').click({ button: 'right' });
await page.locator('#playerMenu:popover-open').waitFor();
assert.deepEqual(await styleOf(page, '#playerMenu', ['padding-top', 'background-color', 'border-top-left-radius', 'backdrop-filter']),
{ 'padding-top': '8px', 'background-color': PLAYER_BLACK, 'border-top-left-radius': await tokenOf(page, '#playerMenu', '--floating-radius'),
'backdrop-filter': 'blur(16px)' });
const row = (await styleOf(page, '#playerMenu [data-player-menu]', ['min-height', 'grid-template-columns']))!;
assert.equal(row['min-height'], '48px');
const tracks = row['grid-template-columns']!.split(' ');
assert.deepEqual([tracks[0], tracks.at(-1)], ['56px', '32px'], `右键菜单行的列：${row['grid-template-columns']}`);
await page.locator('#playerMenu [data-player-menu]').first().hover();
assert.equal((await styleOf(page, '#playerMenu [data-player-menu]', ['background-color']))!['background-color'],
'rgba(255, 255, 255, 0.1)');
await page.keyboard.press('Escape');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('统计图 20px 高，缓冲那条按健康度换色；小窗照 ytd-miniplayer：固定在右下角 16px、宽 400px、层级在弹层之下，快退快进键 36px', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#stage #playerStatsBtn').click();
const plot = '#stage [data-player-stats-plot="buffer"]';
assert.equal((await styleOf(page, plot, ['height']))!.height, '20px');
const colors = await page.evaluate((selector) => ['low', 'mid'].map((state) => {
const bar = document.createElement('i');
bar.dataset.bar = state;
document.querySelector(selector)!.append(bar);
const color = getComputedStyle(bar).backgroundColor;
bar.remove();
return color;
}), plot);
assert.deepEqual(colors, ['rgb(225, 105, 98)', 'rgb(239, 181, 95)']);
await page.locator('#closeStage').focus();
await page.keyboard.press('i');
await page.locator('#miniplayer:not([hidden]) .video-js').waitFor({ timeout: 10_000 });
assert.deepEqual(await styleOf(page, '#miniplayer', ['position', 'z-index']), { position: 'fixed', 'z-index': '900' });
const box = (await page.locator('#miniplayer').boundingBox())!;
assert.deepEqual([box.width, box.x + box.width, box.y + box.height], [400, DESKTOP.width - 16, DESKTOP.height - 16]);
assert.deepEqual(await styleOf(page, '#miniplayerBack', ['width', 'height']), { width: '36px', height: '36px' });
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
/** 一组元素的外框，取到小数点后一位。 */
const rectsOf = (page: Page, selectors: Record<string, string>) => page.evaluate((entries) => Object.fromEntries(
Object.entries(entries).map(([name, selector]) => {
const box = document.querySelector(selector)!.getBoundingClientRect();
const round = (value: number) => Math.round(value * 10) / 10;
return [name, { left: round(box.left), top: round(box.top), right: round(box.right), bottom: round(box.bottom), width: round(box.width), height: round(box.height) }];
})), selectors);
const IMMERSE = {
root: '[data-immerse]', stage: '[data-immerse-stage]', actions: '[data-immerse-actions]', ui: '[data-immerse-ui]',
bar: '[data-immerse-bar]', close: '[data-immerse-close]',
};
it('沉浸模式桌面照 Shorts 三段：9:16 舞台居中、动作列贴舞台右侧 12px、作者标题在左下；横片换成 16:9，动作列收进框里；浅色主题下仍是深色层', { timeout: 90_000 }, async () => {
const opened = await visit(browser, '/', DESKTOP);
try {
const { page } = opened;
const { wide, tall } = await pickClips(page);
await pinQueue(page, [tall, wide]);
await muteVideos(page);
await openImmerse(page, tall.id);
const portrait = await rectsOf(page, IMMERSE);
assert.deepEqual(portrait.stage, { left: 415, top: 0, right: 865, bottom: 800, width: 450, height: 800 });
assert.deepEqual([portrait.actions.left, portrait.actions.width, portrait.actions.bottom], [877, 72, 792]);
assert.deepEqual([portrait.ui.left, portrait.ui.bottom], [20, 780]);
assert.deepEqual(portrait.bar, { left: 0, top: 780, right: 1280, bottom: 800, width: 1280, height: 20 });
assert.deepEqual([portrait.close.top, portrait.close.right, portrait.close.width], [15, 1265, 42]);
const faces = await page.evaluate(() => {
const read = (selector: string, names: string[]) => {
const style = getComputedStyle(document.querySelector(selector)!);
return Object.fromEntries(names.map((name) => [name, style.getPropertyValue(name)]));
};
return {
root: read('[data-immerse]', ['background-color']),
track: read('[data-immerse-track]', ['border-radius', 'background-color']),
floating: (() => {
const probe = document.createElement('div');
probe.style.borderRadius = 'var(--floating-radius)';
document.querySelector('[data-immerse]')!.append(probe);
const value = getComputedStyle(probe).borderRadius;
probe.remove();
return value;
})(),
circle: read('[data-immerse-circle]', ['width', 'height', 'border-radius', 'background-color', 'color']),
glyph: read('[data-immerse-circle] svg', ['width', 'height', 'fill', 'stroke']),
author: read('[data-immerse-author]>a', ['color', 'font-weight']),
title: read('[data-immerse-title]', ['font-size', 'font-weight', 'text-overflow', 'white-space', 'pointer-events']),
caption: read('[data-immerse-ui]', ['pointer-events']),
progress: read('[data-immerse-bar] i', ['height']),
};
});
const { floating, ...face } = faces;
assert.notEqual(floating, '0px');
assert.deepEqual(face, {
root: { 'background-color': 'rgb(15, 15, 15)' },
track: { 'border-radius': floating, 'background-color': 'rgb(0, 0, 0)' },
circle: { width: '48px', height: '48px', 'border-radius': '50%', 'background-color': 'rgba(255, 255, 255, 0.1)', color: 'rgb(241, 241, 241)' },
glyph: { width: '24px', height: '24px', fill: 'none', stroke: 'rgb(241, 241, 241)' },
author: { color: 'rgb(241, 241, 241)', 'font-weight': '600' },
title: { 'font-size': '20px', 'font-weight': '600', 'text-overflow': 'ellipsis', 'white-space': 'nowrap', 'pointer-events': 'auto' },
caption: { 'pointer-events': 'none' },
progress: { height: '4px' },
});
// 进度：4px 的线贴着 20px 热区的底，走钨丝蓝；指针靠近才变粗。
assert.equal(await page.evaluate(() => getComputedStyle(document.querySelector('[data-immerse-bar] i')!).backgroundColor),
await tokenColor(page, '[data-immerse]', '--tungsten'));
await page.hover('[data-immerse-bar]');
await page.waitForFunction(() => getComputedStyle(document.querySelector('[data-immerse-bar] i')!).height === '9px');
// 动作键以底色反馈，悬停与按住保持尺寸；选中使用浅底深字。
await page.route('**/api/feedback', (route) => route.fulfill({ json: { feedback: 'seen', o_count: 0 } }));
const seen = '[data-immerse-actions] button[aria-label="标为看过"]';
const resting = await page.locator(seen).boundingBox();
const background = await page.locator(seen).evaluate(node => getComputedStyle(node).backgroundColor);
await page.hover(seen);
await page.waitForFunction(([selector, color]) => getComputedStyle(document.querySelector(selector!)!).backgroundColor !== color, [seen, background]);
assert.deepEqual(await page.locator(seen).boundingBox(), resting);
assert.equal(await page.locator(seen).evaluate(node => getComputedStyle(node).scale), 'none');
await page.mouse.down();
assert.deepEqual(await page.locator(seen).boundingBox(), resting);
assert.equal(await page.locator(seen).evaluate(node => getComputedStyle(node).scale), 'none');
await page.mouse.up();
await page.locator(`${seen}[aria-pressed="true"]`).waitFor({ timeout: 5_000 });
await page.mouse.move(0, 0);
assert.deepEqual(await page.evaluate((selector) => {
const style = getComputedStyle(document.querySelector(selector)!);
return [style.backgroundColor, style.color];
}, seen), ['rgb(241, 241, 241)', 'rgb(15, 15, 15)']);
await page.keyboard.press('ArrowDown');
await page.waitForFunction((id) => location.search === `?id=${id}`, wide.id);
await settledClip(page);
const landscape = await rectsOf(page, IMMERSE);
assert.deepEqual(landscape.stage, { left: 230.4, top: 169.6, right: 1049.6, bottom: 630.4, width: 819.2, height: 460.8 });
assert.deepEqual([landscape.actions.right, landscape.actions.bottom], [1037.6, 612.4]);
assert.equal(landscape.ui.width, 404.8);
await page.evaluate(() => { document.documentElement.dataset.theme = 'light' });
assert.deepEqual(await page.evaluate(() => [
getComputedStyle(document.querySelector('[data-immerse]')!).backgroundColor,
getComputedStyle(document.querySelector('[data-immerse-author]>a')!).color,
]), ['rgb(15, 15, 15)', 'rgb(241, 241, 241)']);
assert.deepEqual(opened.problems.filter((line) => !line.includes('VIDEOJS')), []);
} finally {
await opened.close();
}
});
it('沉浸模式手机铺满视口：舞台不留圆角，动作列贴右、作者标题贴左下，作者那行的时长与序号收起', { timeout: 60_000 }, async () => {
const opened = await visit(browser, '/', MOBILE);
try {
const { page } = opened;
const { wide, tall } = await pickClips(page);
await pinQueue(page, [tall, wide]);
await muteVideos(page);
await openImmerse(page, tall.id);
const rects = await rectsOf(page, { ...IMMERSE, avatar: '[data-immerse-avatar]' });
assert.deepEqual(rects.stage, { left: 0, top: 0, right: 390, bottom: 844, width: 390, height: 844 });
assert.deepEqual([rects.actions.right, rects.actions.bottom, rects.actions.width], [382, 752, 56]);
assert.deepEqual([rects.ui.left, rects.ui.right, rects.ui.bottom], [14, 308, 816]);
assert.deepEqual([rects.avatar.width, rects.avatar.height], [36, 36]);
assert.deepEqual([rects.close.top, rects.close.right], [10, 380]);
assert.deepEqual(await page.evaluate(() => ({
radius: getComputedStyle(document.querySelector('[data-immerse-track]')!).borderRadius,
meta: getComputedStyle(document.querySelector('[data-immerse-author]>span')!).display,
title: getComputedStyle(document.querySelector('[data-immerse-title]')!).fontSize,
})), { radius: '0px', meta: 'none', title: '14px' });
assert.deepEqual(opened.problems.filter((line) => !line.includes('VIDEOJS')), []);
} finally {
await opened.close();
}
});
/* ── 侧栏岛（`frontend/src/react/sidebar/sidebar.css`） ── */
/** 打开首页等侧栏的分组画出来。聚合照演示库真取，只保证时长那一组在（演示库的短片可能凑不出总时长）。 */
async function openSidebar(viewport: Viewport): Promise<Visit> {
const opened = await visit(browser, '/', viewport);
await opened.page.route((url) => url.pathname === '/api/facets', async (route) => {
const real = await (await route.fetch()).json() as { stats?: Record<string, unknown> };
await route.fulfill({ json: { ...real, stats: { ...real.stats, duration: real.stats?.duration || 540 } } });
});
await opened.page.reload({ waitUntil: 'load' });
await opened.page.locator('#drawer [data-sidebar-group="时长"]').waitFor({ state: 'attached', timeout: 15_000 });
await settle(opened.page);
return opened;
}
it('侧栏当前项自己不铺底，由挂在抽屉上的那块玻璃标出；悬停时玻璃跟过去，离开这一列回到当前项', { timeout: 60_000 }, async () => {
const opened = await openSidebar(DESKTOP);
try {
const { page } = opened;
const read = (key: string) => page.evaluate((target) => {
const glide = document.querySelector<HTMLElement>('[data-sidebar-glide]')!;
const button = document.querySelector<HTMLElement>(`#drawer [data-sidebar-nav] [data-nav="${target}"]`)!;
const box = (node: Element) => {
const rect = node.getBoundingClientRect();
return [rect.left, rect.top, rect.width, rect.height].map(Math.round);
};
const style = getComputedStyle(button);
return {
glide: box(glide), button: box(button), parent: glide.parentElement?.id,
layer: getComputedStyle(glide).zIndex, radius: getComputedStyle(glide).borderRadius,
fill: [style.backgroundColor, style.backgroundImage, style.boxShadow], color: style.color,
};
}, key);
const current = await read('');
assert.equal(current.parent, 'drawer', '玻璃没有挂在抽屉上，纵滚时会被滚动层切掉');
assert.deepEqual([current.layer, current.radius], ['-1', '10px'], '玻璃要压在字底下、圆角照按钮的 10px');
assert.deepEqual(current.glide, current.button, '玻璃没有垫在当前项下面');
assert.deepEqual(current.fill, ['rgba(0, 0, 0, 0)', 'none', 'none'], '当前项自己铺了底，静止时就是两层底叠着');
assert.equal(current.color, await tokenColor(page, '#drawer', '--glass-text'), '当前项的字色不是玻璃上的字色');
const idle = await read('studios');
assert.equal(idle.color, await tokenColor(page, '#drawer', '--color-text-secondary'), '未选中项的字色不是次要文字色');
await page.locator('#drawer [data-sidebar-nav] [data-nav="studios"]').hover();
const hovered = await read('studios');
assert.deepEqual(hovered.glide, hovered.button, '悬停时玻璃没有跟到指着的那一项');
assert.deepEqual(hovered.fill, ['rgba(0, 0, 0, 0)', 'none', 'none'], '悬停的那一项自己铺了底');
await page.mouse.move(900, 420);
const back = await read('');
assert.deepEqual(back.glide, back.button, '指针离开这一列之后玻璃没有回到当前项');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('侧栏标题行：切换器 32px 圆标识、收起键 20px 高，与导航首项相隔 12px；分组箭头展开时转 90°；收起后只剩 60px 宽的图标列', { timeout: 60_000 }, async () => {
const opened = await openSidebar(DESKTOP);
try {
const { page } = opened;
const head = await page.evaluate(() => {
const drawer = document.querySelector('#drawer')!;
const rect = (selector: string) => drawer.querySelector(selector)!.getBoundingClientRect();
const mark = drawer.querySelector('#brandHome .mark')!;
const rotation = (group: Element) => {
const matrix = new DOMMatrix(getComputedStyle(group.querySelector(':scope > [data-sidebar-toggle] svg')!).transform);
return Math.round(Math.atan2(matrix.b, matrix.a) * 180 / Math.PI);
};
const groups = [...drawer.querySelectorAll<HTMLDetailsElement>('[data-sidebar-group]')];
return {
gap: Math.round(rect('[data-sidebar-nav]').top - rect('[data-sidebar-head]').bottom),
mark: [Math.round(rect('#brandHome .mark').width), Math.round(rect('#brandHome .mark').height), getComputedStyle(mark).borderRadius],
toggle: Math.round(rect('#filterBtn').height),
open: groups.filter((group) => group.open).map(rotation),
closed: groups.filter((group) => !group.open).map(rotation),
};
});
assert.equal(head.gap, 12, '切换器与导航首项挨得太近，两块底色读起来像压在一起');
assert.deepEqual(head.mark, [32, 32, '50%'], '切换器的标识不是 32px 的圆');
assert.equal(head.toggle, 20, '收起键不是 20px 高');
assert.ok(head.open.length && head.closed.length, `首页的分组没有一开一合可比：${JSON.stringify(head)}`);
assert.ok(head.open.every((angle) => angle === 90), `展开的分组箭头没有转到 90°：${head.open}`);
assert.ok(head.closed.every((angle) => angle === 0), `收着的分组箭头没有回到 0°：${head.closed}`);
await page.locator('#filterBtn').click();
await page.waitForFunction(() => Math.round(document.querySelector('#drawer')!.getBoundingClientRect().width) === 60,
undefined, { timeout: 5_000 });
const rail = await page.evaluate(() => {
const drawer = document.querySelector('#drawer')!;
const toggle = drawer.querySelector('#filterBtn')!.getBoundingClientRect();
return {
toggle: [Math.round(toggle.width), Math.round(toggle.height)],
groups: [...new Set([...drawer.querySelectorAll('[data-sidebar-group]')].map((group) => getComputedStyle(group).display))],
labels: [...new Set([...drawer.querySelectorAll('[data-sidebar-nav] button span')].map((span) => getComputedStyle(span).maxWidth))],
};
});
assert.deepEqual(rail, { toggle: [36, 20], groups: ['none'], labels: ['0px'] }, '收起的窄栏不是一列图标');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('时长拉条：已选段是 accent 渐变，两端读数常显、推到端点也不越出轨道，刚动过的那枚压在上面', { timeout: 60_000 }, async () => {
const opened = await openSidebar(DESKTOP);
try {
const { page } = opened;
await page.locator('#drawer [data-sidebar-group="时长"] > [data-sidebar-toggle]').click();
await page.locator('#drawer [data-sidebar-group="时长"] [data-sidebar-collapse]:not([inert])').waitFor({ timeout: 5_000 });
const read = () => page.evaluate(() => {
const range = document.querySelector('#durationRange')!;
const bounds = range.getBoundingClientRect();
return {
fill: getComputedStyle(range.querySelector('[data-sidebar-range-fill]')!).backgroundImage,
tips: [...range.querySelectorAll<HTMLElement>('[data-sidebar-range-tip]')].map((tip) => {
const box = tip.getBoundingClientRect();
return {
end: tip.dataset.rangeEnd, text: tip.textContent, layer: getComputedStyle(tip).zIndex,
visible: getComputedStyle(tip).visibility === 'visible' && box.width > 0,
inside: box.left >= bounds.left - 1 && box.right <= bounds.right + 1,
};
}),
};
});
const resting = await read();
const accent = await tokenColor(page, '#drawer', '--color-accent-400');
assert.ok(resting.fill.startsWith('linear-gradient(90deg') && resting.fill.includes(accent),
`已选段不是从 accent-400 起的横向渐变：${resting.fill}`);
assert.deepEqual(resting.tips, [
{ end: 'min', text: '0 分钟', layer: '1', visible: true, inside: true },
{ end: 'max', text: '不限', layer: '2', visible: true, inside: true },
], '两端读数要常显、贴着轨道两端不越界，没动过时右端那枚在上');
await page.locator('#durMin').focus();
await page.keyboard.press('ArrowRight');
await page.waitForFunction(() => document.querySelector('[data-sidebar-range-tip][data-range-end="min"]')?.hasAttribute('data-range-active'),
undefined, { timeout: 5_000 });
const moved = await read();
assert.deepEqual(moved.tips.map((tip) => [tip.end, tip.layer, tip.inside]), [['min', '2', true], ['max', '1', true]],
'刚动过的那一端没有压到上面');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('手机侧栏：抽屉开着时遮罩外壳隐形、暗色画在 ::before 上，层级低于抽屉；收起时遮罩退出渲染树', { timeout: 60_000 }, async () => {
const opened = await openSidebar(MOBILE);
try {
const { page } = opened;
const scrim = () => page.evaluate(() => {
const node = document.querySelector('#scrim')!, drawer = document.querySelector('#drawer')!;
const before = getComputedStyle(node, '::before');
return {
display: getComputedStyle(node).display, visibility: getComputedStyle(node).visibility,
dim: [before.visibility, before.backgroundColor],
layers: [Number(getComputedStyle(node).zIndex), Number(getComputedStyle(drawer).zIndex)],
fill: getComputedStyle(drawer).getPropertyValue('--glass-fill'),
};
});
assert.equal((await scrim()).display, 'none', '抽屉收着时遮罩还在渲染树里，iOS 的 Safari 会拿它给状态栏取色');
await page.locator('#filterBtn').tap();
await page.waitForFunction(() => document.querySelector('#drawer')?.classList.contains('open'));
const shown = await scrim();
assert.deepEqual([shown.display, shown.visibility], ['block', 'hidden'], '遮罩外壳没有隐形，iOS 的 Safari 会拿它给状态栏取色');
assert.equal(shown.dim[0], 'visible', '遮罩的暗色没有画在 ::before 上');
assert.notEqual(shown.dim[1], 'rgba(0, 0, 0, 0)', '遮罩的 ::before 是透明的，压不暗身后的页面');
assert.ok(shown.layers[0] < shown.layers[1], `遮罩压在抽屉上面，抽屉里就点不动了：${shown.layers}`);
assert.ok(shown.fill.replace(/\s/g, '').includes('86%'), `窄屏抽屉的填充没有加厚到 86%：${shown.fill}`);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
});