1103 lines
38 KiB
TypeScript
1103 lines
38 KiB
TypeScript
/**
|
|
* Cover-card layout guardrail — the estimator, checked against Chromium.
|
|
*
|
|
* The emitter plans optional PBL content without laying it out. This suite is
|
|
* the browser proof that every planned card fits at the two supported compact
|
|
* frame sizes, keeps core counts/CTA content, and preserves bidi boundaries.
|
|
*
|
|
* Run with `COVER_LAYOUT_BROWSER=1`; missing Chromium is then a hard failure.
|
|
*/
|
|
import { afterAll, beforeAll, describe, expect, it } from 'vitest';
|
|
import { readFileSync } from 'node:fs';
|
|
import { join } from 'node:path';
|
|
import { chromium, type Browser, type Page, type Request } from '@playwright/test';
|
|
import { compileVideoTimeline, emitHyperframes, prepareQuizQuestionList } from '@/lib/video-export';
|
|
import type { CompilerScene, QuizLayoutProbe, VideoExportCta } from '@/lib/video-export';
|
|
import { PBL_PANEL_DESIGN_BOX } from '@/lib/video-export/emit-hyperframes';
|
|
import {
|
|
getVideoExportCoverLabels,
|
|
resolveVideoExportCta,
|
|
} from '@/lib/video-export-app/cover-config';
|
|
import {
|
|
createQuizQuestionListMeasurementSurface,
|
|
measureQuizQuestionList,
|
|
} from '@/lib/video-export-app/quiz-layout';
|
|
import type { Locale } from '@/lib/i18n';
|
|
import { NO_ASSETS, NO_PROBE, speech } from './helpers';
|
|
import {
|
|
QUIZ_SCROLL_LAYOUT_720P,
|
|
QUIZ_SCROLL_QUESTIONS,
|
|
QUIZ_SCROLL_TITLE,
|
|
quizScrollScene,
|
|
} from './quiz-scroll-fixture';
|
|
|
|
const REQUIRED = process.env.COVER_LAYOUT_BROWSER === '1';
|
|
|
|
const FRAMES = {
|
|
'720p': { width: 1280, height: 720 },
|
|
'480p': { width: 854, height: 480 },
|
|
} as const;
|
|
|
|
const QUIZ_LIST_FRAMES = {
|
|
'720p': { width: 1280, height: 720 },
|
|
'1080p': { width: 1920, height: 1080 },
|
|
'4k': { width: 3840, height: 2160 },
|
|
} as const;
|
|
|
|
interface CoverContent {
|
|
title: string;
|
|
description: string;
|
|
gains: string[];
|
|
}
|
|
|
|
const CONTENT = {
|
|
compactFive: {
|
|
title: 'Compact deterministic project',
|
|
description: '',
|
|
gains: ['Model data', 'Implement output', 'Verify layout', 'Explain tradeoffs', 'Ship safely'],
|
|
},
|
|
cjk: {
|
|
title: '构建一个确定性、离线可验证且支持超长中文标题排版的课程渲染导出流水线',
|
|
description:
|
|
'本项目要求你从设计数据出发，完成建模、实现与验证三个阶段，并在真实的 720p 与 480p 导出中确认排版不会撑破画面，同时保证字幕与封面共存。',
|
|
gains: [
|
|
'把设计期数据与运行时状态彻底分离，确保导出结果可复现',
|
|
'验证 HTML 转义、时间边界与超长英文单词换行的实际表现',
|
|
'在无网络条件下生成可复现的视频产物并通过 lint 校验',
|
|
'为受限分辨率定义信息优先级，避免面板被静默裁切',
|
|
'记录完整有效选项，让后续导出可以逐项核对',
|
|
],
|
|
},
|
|
repeatedM: {
|
|
title: 'mmmm '.repeat(18),
|
|
description: 'mmmm '.repeat(56),
|
|
gains: Array.from({ length: 5 }, () => 'mmmm'.repeat(18)),
|
|
},
|
|
repeatedW: {
|
|
title: 'wwww '.repeat(18),
|
|
description: 'wwww '.repeat(56),
|
|
gains: Array.from({ length: 5 }, () => 'wwww'.repeat(18)),
|
|
},
|
|
uppercaseW: {
|
|
title: 'W'.repeat(40),
|
|
description: 'WWWW '.repeat(48),
|
|
gains: Array.from({ length: 5 }, () => 'W'.repeat(36)),
|
|
},
|
|
uppercaseM: {
|
|
title: 'M'.repeat(40),
|
|
description: 'MMMM '.repeat(48),
|
|
gains: Array.from({ length: 5 }, () => 'M'.repeat(36)),
|
|
},
|
|
digits: {
|
|
title: '0123456789'.repeat(4),
|
|
description: '',
|
|
gains: [],
|
|
},
|
|
emoji: {
|
|
title: '🚀'.repeat(17),
|
|
description: '🚀'.repeat(86),
|
|
gains: Array.from({ length: 5 }, () => '🚀'.repeat(31)),
|
|
},
|
|
english: {
|
|
title: 'Build a deterministic offline learning-video export',
|
|
description:
|
|
'Move from authored design data through implementation and browser verification without relying on learner runtime state.',
|
|
gains: Array.from(
|
|
{ length: 5 },
|
|
(_, index) => `Verify deterministic learner-facing output ${index + 1}`,
|
|
),
|
|
},
|
|
arabic: {
|
|
title: 'مرحبا بك في مشروع التصدير الحتمي للفيديو التعليمي المفتوح المصدر',
|
|
description:
|
|
'يتطلب هذا المشروع منك الانتقال من بيانات التصميم إلى النمذجة والتنفيذ والتحقق، والتأكد من أن التخطيط لا يتجاوز حدود الإطار عند التصدير.',
|
|
gains: Array.from(
|
|
{ length: 5 },
|
|
() => 'افصل بيانات التصميم عن حالة التشغيل لضمان إمكانية إعادة إنتاج المخرجات',
|
|
),
|
|
},
|
|
} satisfies Record<string, CoverContent>;
|
|
|
|
const DEFAULT_CTA = resolveVideoExportCta(undefined)!;
|
|
const WWW_CTA = resolveVideoExportCta('https://www.example.test/learn/')!;
|
|
const MAX_WIDTH_CTA = resolveVideoExportCta(`a.co/${'W'.repeat(91)}`)!;
|
|
const MAX_UNICODE_CTA_RAW = `a.co/${'学'.repeat(91)}`;
|
|
const MAX_UNICODE_CTA = resolveVideoExportCta(MAX_UNICODE_CTA_RAW)!;
|
|
|
|
interface CoverOptions {
|
|
kind: 'quiz' | 'pbl';
|
|
locale: Locale;
|
|
cta: VideoExportCta;
|
|
burnInSubtitles?: boolean;
|
|
}
|
|
|
|
function coverHtml(
|
|
content: CoverContent,
|
|
frame: { width: number; height: number },
|
|
options: CoverOptions,
|
|
): string {
|
|
const scene =
|
|
options.kind === 'quiz'
|
|
? {
|
|
id: 'quiz',
|
|
stageId: 'stage',
|
|
title: content.title,
|
|
order: 0,
|
|
type: 'quiz',
|
|
content: {
|
|
type: 'quiz',
|
|
questions: [
|
|
{ id: 'q1', type: 'single', question: 'Hidden', points: 3, answer: ['Hidden'] },
|
|
{ id: 'q2', type: 'short_answer', question: 'Hidden', points: 2 },
|
|
],
|
|
},
|
|
actions: options.burnInSubtitles
|
|
? [speech('narration', 'A two-line subtitle must remain clear of the cover panel.')]
|
|
: [],
|
|
}
|
|
: {
|
|
id: 'pbl',
|
|
stageId: 'stage',
|
|
title: 'PBL',
|
|
order: 0,
|
|
type: 'pbl',
|
|
content: {
|
|
type: 'pbl',
|
|
projectV2: {
|
|
...content,
|
|
roles: [
|
|
{
|
|
id: 'instructor',
|
|
type: 'instructor',
|
|
name: 'Export Coach 导出教练',
|
|
description: '帮助你逐步推理确定性渲染、排查边界并完成发布前验证。',
|
|
},
|
|
],
|
|
milestones: [
|
|
{ id: 'design', microtasks: [{ id: 'model' }, { id: 'test' }] },
|
|
{ id: 'verify', microtasks: [{ id: 'render' }] },
|
|
],
|
|
scenario: {
|
|
characters: [{ id: 'reviewer', name: 'Release Reviewer 发布评审员' }],
|
|
},
|
|
},
|
|
},
|
|
actions: options.burnInSubtitles
|
|
? [
|
|
speech(
|
|
'narration',
|
|
'字幕与封面同时出现时，面板必须停在字幕带上方，而不是被它盖住。',
|
|
),
|
|
]
|
|
: [],
|
|
};
|
|
|
|
const ir = compileVideoTimeline(
|
|
{ stage: { id: 'stage', name: 'cover-layout' }, scenes: [scene as CompilerScene] },
|
|
{ timing: NO_PROBE, assets: NO_ASSETS },
|
|
);
|
|
|
|
return emitHyperframes(ir, {
|
|
...frame,
|
|
locale: options.locale,
|
|
labels: getVideoExportCoverLabels(options.locale),
|
|
cta: options.cta,
|
|
burnInSubtitles: options.burnInSubtitles === true,
|
|
}).files.find((file) => file.path === 'index.html')!.content;
|
|
}
|
|
|
|
const LONG_QUIZ_QUESTIONS = QUIZ_SCROLL_QUESTIONS;
|
|
|
|
function quizListHtml(
|
|
frame: { width: number; height: number },
|
|
questions: readonly unknown[],
|
|
measurement: { contentHeightPx: number; viewportHeightPx: number },
|
|
): {
|
|
html: string;
|
|
scrollDistancePx: number;
|
|
timing: {
|
|
transitionStartMs: number;
|
|
transitionEndMs: number;
|
|
topHoldEndMs: number;
|
|
scrollEndMs: number;
|
|
bottomHoldEndMs: number;
|
|
};
|
|
} {
|
|
const source = {
|
|
id: 'quiz-list',
|
|
stageId: 'stage',
|
|
title: QUIZ_SCROLL_TITLE,
|
|
order: 0,
|
|
type: 'quiz',
|
|
content: { type: 'quiz', questions },
|
|
actions: [speech('quiz-list-narration', 'Question-list narration')],
|
|
} as CompilerScene;
|
|
const probe: QuizLayoutProbe = {
|
|
measureQuestionList: () => ({ ...measurement, frameHeightPx: frame.height }),
|
|
};
|
|
const ir = compileVideoTimeline(
|
|
{ stage: { id: 'stage', name: 'quiz-list-layout' }, scenes: [source] },
|
|
{ timing: NO_PROBE, assets: NO_ASSETS, quizLayout: probe },
|
|
);
|
|
const visual = ir.scenes[0].visuals.find((item) => item.kind === 'quiz-question-list');
|
|
if (!visual || visual.kind !== 'quiz-question-list') throw new Error('Quiz list not planned');
|
|
return {
|
|
html: emitHyperframes(ir, {
|
|
...frame,
|
|
locale: 'en-US',
|
|
labels: getVideoExportCoverLabels('en-US'),
|
|
}).files.find((file) => file.path === 'index.html')!.content,
|
|
scrollDistancePx: visual.scrollDistancePx,
|
|
timing: {
|
|
transitionStartMs: visual.startMs,
|
|
transitionEndMs: visual.startMs + visual.transitionDurationMs,
|
|
topHoldEndMs: visual.startMs + visual.transitionDurationMs + visual.topHoldDurationMs,
|
|
scrollEndMs:
|
|
visual.startMs +
|
|
visual.transitionDurationMs +
|
|
visual.topHoldDurationMs +
|
|
visual.scrollDurationMs,
|
|
bottomHoldEndMs: visual.startMs + visual.durationMs,
|
|
},
|
|
};
|
|
}
|
|
|
|
const GSAP = readFileSync(join(process.cwd(), 'public/vendor/gsap.min.js'), 'utf8');
|
|
const HARNESS_URL = 'http://cover-layout.test/index.html';
|
|
|
|
interface Measurement {
|
|
overflow: number;
|
|
panelTop: number;
|
|
panelBottom: number;
|
|
stageHeight: number;
|
|
captionTop: number | null;
|
|
statTiles: Array<{ count: string; label: string }>;
|
|
ctaDirection: string | null;
|
|
ctaLineTexts: string[];
|
|
ctaLineHorizontalOverflows: number[];
|
|
ctaLineVerticalOverflows: number[];
|
|
destinationFragmentHorizontalOverflows: number[];
|
|
interactiveCtaCount: number;
|
|
gainCount: number;
|
|
peopleCount: number;
|
|
descriptionCount: number;
|
|
titleDirection: string;
|
|
chromeDirection: string;
|
|
panelWidth: number;
|
|
panelPaddingY: number;
|
|
panelContentWidth: number;
|
|
}
|
|
|
|
async function loadEmittedHtml(page: Page, html: string): Promise<void> {
|
|
const pageErrors: string[] = [];
|
|
const gsapRequests: string[] = [];
|
|
const recordPageError = (error: Error) => pageErrors.push(error.message);
|
|
const recordRequest = (request: Request) => {
|
|
if (request.url().endsWith('/assets/vendor/gsap.min.js')) gsapRequests.push(request.url());
|
|
};
|
|
page.on('pageerror', recordPageError);
|
|
page.on('request', recordRequest);
|
|
|
|
try {
|
|
// `setContent` keeps the current document URL. Establish a controlled HTTP
|
|
// base first so the production-relative vendored GSAP path is actually
|
|
// requested and executed, just as it is from an unpacked export ZIP.
|
|
await page.goto(HARNESS_URL, { waitUntil: 'load' });
|
|
await page.setContent(html, { waitUntil: 'load' });
|
|
await page.evaluate(async () => {
|
|
await document.fonts.ready;
|
|
});
|
|
const runtime = await page.evaluate(() => {
|
|
const globals = window as typeof window & {
|
|
gsap?: unknown;
|
|
__timelines?: Record<string, { duration?: unknown }>;
|
|
};
|
|
return {
|
|
gsap: typeof globals.gsap,
|
|
timelineKeys: Object.keys(globals.__timelines ?? {}),
|
|
openmaicTimeline: typeof globals.__timelines?.openmaic?.duration === 'function',
|
|
};
|
|
});
|
|
|
|
expect(pageErrors).toEqual([]);
|
|
expect(gsapRequests).toEqual(['http://cover-layout.test/assets/vendor/gsap.min.js']);
|
|
expect(runtime).toEqual({
|
|
gsap: 'object',
|
|
timelineKeys: ['openmaic'],
|
|
openmaicTimeline: true,
|
|
});
|
|
} finally {
|
|
page.off('pageerror', recordPageError);
|
|
page.off('request', recordRequest);
|
|
}
|
|
}
|
|
|
|
async function measure(
|
|
page: Page,
|
|
html: string,
|
|
frame: { width: number; height: number },
|
|
): Promise<Measurement> {
|
|
await page.setViewportSize(frame);
|
|
await loadEmittedHtml(page, html);
|
|
|
|
return page.evaluate(() => {
|
|
const stage = document.querySelector<HTMLElement>('[data-composition-id]')!;
|
|
const panel = document.querySelector<HTMLElement>('.cover-panel')!;
|
|
const title = document.querySelector<HTMLElement>('.cover-title')!;
|
|
const chrome = document.querySelector<HTMLElement>('.cover-eyebrow')!;
|
|
const destination = document.querySelector<HTMLElement>('.cover-cta bdi');
|
|
const cue = document.querySelector<HTMLElement>('#subtitle-cue-0');
|
|
if (cue) cue.style.display = '-webkit-box';
|
|
const stageBox = stage.getBoundingClientRect();
|
|
const panelBox = panel.getBoundingClientRect();
|
|
const panelStyle = getComputedStyle(panel);
|
|
const ctaLines = Array.from(document.querySelectorAll<HTMLElement>('.cover-cta-line'));
|
|
const destinationLine = destination?.closest<HTMLElement>('.cover-cta-line') ?? null;
|
|
const destinationLineBox = destinationLine?.getBoundingClientRect() ?? null;
|
|
|
|
let captionTop: number | null = null;
|
|
if (cue) {
|
|
const cueStyle = getComputedStyle(cue);
|
|
const reserved =
|
|
parseFloat(cueStyle.maxHeight) +
|
|
parseFloat(cueStyle.paddingTop) +
|
|
parseFloat(cueStyle.paddingBottom);
|
|
captionTop = cue.getBoundingClientRect().bottom - stageBox.top - reserved;
|
|
}
|
|
|
|
return {
|
|
overflow: panel.scrollHeight - panel.clientHeight,
|
|
panelTop: panelBox.top - stageBox.top,
|
|
panelBottom: panelBox.bottom - stageBox.top,
|
|
stageHeight: stageBox.height,
|
|
captionTop,
|
|
statTiles: Array.from(document.querySelectorAll<HTMLElement>('.cover-stat')).map((tile) => ({
|
|
count: tile.querySelector('strong')?.textContent ?? '',
|
|
label: tile.querySelector('span')?.textContent ?? '',
|
|
})),
|
|
ctaDirection: destination ? getComputedStyle(destination).direction : null,
|
|
ctaLineTexts: ctaLines.map((line) => (line.textContent ?? '').replace(/\s+/g, ' ').trim()),
|
|
ctaLineHorizontalOverflows: ctaLines.map((line) =>
|
|
Math.max(0, line.scrollWidth - line.clientWidth),
|
|
),
|
|
ctaLineVerticalOverflows: ctaLines.map((line) =>
|
|
Math.max(0, line.scrollHeight - line.clientHeight),
|
|
),
|
|
destinationFragmentHorizontalOverflows:
|
|
destination && destinationLineBox
|
|
? Array.from(destination.getClientRects()).map((fragment) =>
|
|
Math.max(
|
|
0,
|
|
destinationLineBox.left - fragment.left,
|
|
fragment.right - destinationLineBox.right,
|
|
),
|
|
)
|
|
: [],
|
|
interactiveCtaCount: document.querySelectorAll('.cover-cta a, .cover-cta button').length,
|
|
gainCount: document.querySelectorAll('.cover-gain-text').length,
|
|
peopleCount: document.querySelectorAll('.cover-person').length,
|
|
descriptionCount: document.querySelectorAll('.cover-description').length,
|
|
titleDirection: getComputedStyle(title).direction,
|
|
chromeDirection: getComputedStyle(chrome).direction,
|
|
panelWidth: panelBox.width,
|
|
panelPaddingY: parseFloat(panelStyle.paddingTop),
|
|
panelContentWidth:
|
|
panelBox.width -
|
|
2 * parseFloat(panelStyle.borderLeftWidth) -
|
|
2 * parseFloat(panelStyle.paddingLeft),
|
|
};
|
|
});
|
|
}
|
|
|
|
interface Scenario {
|
|
name: string;
|
|
kind: 'quiz' | 'pbl';
|
|
frame: keyof typeof FRAMES;
|
|
locale: Locale;
|
|
content: CoverContent;
|
|
cta: VideoExportCta;
|
|
titleDirection: 'ltr' | 'rtl';
|
|
chromeDirection: 'ltr' | 'rtl';
|
|
burnInSubtitles?: boolean;
|
|
expectedGainCount?: number;
|
|
expectedDestination?: string;
|
|
}
|
|
|
|
const SCENARIOS: Scenario[] = [
|
|
{
|
|
name: 'Quiz default CTA',
|
|
kind: 'quiz',
|
|
frame: '720p',
|
|
locale: 'en-US',
|
|
content: CONTENT.english,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: 'Quiz Arabic authored text in English UI with www override',
|
|
kind: 'quiz',
|
|
frame: '480p',
|
|
locale: 'en-US',
|
|
content: CONTENT.arabic,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'rtl',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: 'Quiz English authored text in real Arabic UI',
|
|
kind: 'quiz',
|
|
frame: '720p',
|
|
locale: 'ar-SA',
|
|
content: CONTENT.english,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'rtl',
|
|
},
|
|
{
|
|
name: 'Quiz real Arabic at compact resolution',
|
|
kind: 'quiz',
|
|
frame: '480p',
|
|
locale: 'ar-SA',
|
|
content: CONTENT.arabic,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'rtl',
|
|
chromeDirection: 'rtl',
|
|
},
|
|
...(['720p', '480p'] as const).map(
|
|
(frame): Scenario => ({
|
|
name: `Quiz burn-in subtitles at ${frame}`,
|
|
kind: 'quiz',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.english,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
burnInSubtitles: true,
|
|
}),
|
|
),
|
|
{
|
|
name: 'PBL retains five gains',
|
|
kind: 'pbl',
|
|
frame: '720p',
|
|
locale: 'en-US',
|
|
content: CONTENT.compactFive,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
expectedGainCount: 5,
|
|
},
|
|
...(['720p', '480p'] as const).flatMap((frame): Scenario[] => [
|
|
{
|
|
name: `Quiz accepted 96-character wide ASCII CTA at ${frame}`,
|
|
kind: 'quiz',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.english,
|
|
cta: MAX_WIDTH_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `Quiz maximum Unicode CTA in real Arabic UI at ${frame}`,
|
|
kind: 'quiz',
|
|
frame,
|
|
locale: 'ar-SA',
|
|
content: CONTENT.arabic,
|
|
cta: MAX_UNICODE_CTA,
|
|
expectedDestination: MAX_UNICODE_CTA_RAW,
|
|
titleDirection: 'rtl',
|
|
chromeDirection: 'rtl',
|
|
},
|
|
{
|
|
name: `PBL accepted 96-character wide ASCII CTA at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.english,
|
|
cta: MAX_WIDTH_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL maximum Unicode CTA in real Arabic UI at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'ar-SA',
|
|
content: CONTENT.arabic,
|
|
cta: MAX_UNICODE_CTA,
|
|
expectedDestination: MAX_UNICODE_CTA_RAW,
|
|
titleDirection: 'rtl',
|
|
chromeDirection: 'rtl',
|
|
},
|
|
{
|
|
name: `PBL CJK at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'zh-CN',
|
|
content: CONTENT.cjk,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL repeated mmmm at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.repeatedM,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL repeated wwww at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.repeatedW,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL uppercase W at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.uppercaseW,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL uppercase M at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.uppercaseM,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL digits at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.digits,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL emoji at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.emoji,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL Arabic authored text in English UI at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'en-US',
|
|
content: CONTENT.arabic,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'rtl',
|
|
chromeDirection: 'ltr',
|
|
},
|
|
{
|
|
name: `PBL English authored text in real Arabic UI at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'ar-SA',
|
|
content: CONTENT.english,
|
|
cta: DEFAULT_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'rtl',
|
|
},
|
|
{
|
|
name: `PBL burn-in subtitles at ${frame}`,
|
|
kind: 'pbl',
|
|
frame,
|
|
locale: 'zh-CN',
|
|
content: CONTENT.cjk,
|
|
cta: WWW_CTA,
|
|
titleDirection: 'ltr',
|
|
chromeDirection: 'ltr',
|
|
burnInSubtitles: true,
|
|
},
|
|
]),
|
|
];
|
|
|
|
describe('Quiz/PBL cover cards in a real browser', () => {
|
|
let browser: Browser | undefined;
|
|
let page: Page | undefined;
|
|
|
|
beforeAll(async () => {
|
|
try {
|
|
browser = await chromium.launch();
|
|
page = await browser.newPage();
|
|
await page.route(HARNESS_URL, (route) =>
|
|
route.fulfill({
|
|
body: '<!doctype html><html><body></body></html>',
|
|
contentType: 'text/html',
|
|
}),
|
|
);
|
|
await page.route('**/gsap.min.js', (route) =>
|
|
route.fulfill({ body: GSAP, contentType: 'text/javascript' }),
|
|
);
|
|
await page.route('**/*.woff2', (route) => {
|
|
const filename = new URL(route.request().url()).pathname.split('/').at(-1)!;
|
|
route.fulfill({
|
|
body: readFileSync(join(process.cwd(), 'public/vendor/video-export/fonts', filename)),
|
|
contentType: 'font/woff2',
|
|
});
|
|
});
|
|
} catch (error) {
|
|
if (REQUIRED) throw error;
|
|
}
|
|
}, 60_000);
|
|
|
|
afterAll(async () => {
|
|
await browser?.close();
|
|
});
|
|
|
|
const check = (name: string, run: (page: Page) => Promise<void>) =>
|
|
it(name, async (ctx) => {
|
|
if (!page) return ctx.skip();
|
|
await run(page);
|
|
});
|
|
|
|
check('scopes Arabic direction below the document and composition roots', async (page) => {
|
|
const html = coverHtml(CONTENT.arabic, FRAMES['720p'], {
|
|
kind: 'pbl',
|
|
locale: 'ar-SA',
|
|
cta: WWW_CTA,
|
|
});
|
|
await loadEmittedHtml(page, html);
|
|
|
|
expect(
|
|
await page.evaluate(() => ({
|
|
html: document.documentElement.getAttribute('dir'),
|
|
body: document.body.getAttribute('dir'),
|
|
composition: document
|
|
.querySelector<HTMLElement>('[data-composition-id]')!
|
|
.getAttribute('dir'),
|
|
frame: document.querySelector<HTMLElement>('.cover-card')!.getAttribute('dir'),
|
|
panel: document.querySelector<HTMLElement>('.cover-panel')!.getAttribute('dir'),
|
|
title: document.querySelector<HTMLElement>('.cover-title')!.getAttribute('dir'),
|
|
destination: document.querySelector<HTMLElement>('.cover-cta bdi')!.getAttribute('dir'),
|
|
chromeDirection: getComputedStyle(document.querySelector<HTMLElement>('.cover-eyebrow')!)
|
|
.direction,
|
|
})),
|
|
).toEqual({
|
|
html: null,
|
|
body: null,
|
|
composition: null,
|
|
frame: null,
|
|
panel: 'rtl',
|
|
title: 'auto',
|
|
destination: 'ltr',
|
|
chromeDirection: 'rtl',
|
|
});
|
|
});
|
|
|
|
for (const scenario of SCENARIOS) {
|
|
check(`fits ${scenario.name}`, async (page) => {
|
|
const frame = FRAMES[scenario.frame];
|
|
const result = await measure(page, coverHtml(scenario.content, frame, scenario), frame);
|
|
const labels = getVideoExportCoverLabels(scenario.locale);
|
|
const expectedStats =
|
|
scenario.kind === 'quiz'
|
|
? [
|
|
{ count: '2', label: labels.questions },
|
|
{ count: '5', label: labels.points },
|
|
]
|
|
: [
|
|
{ count: '2', label: labels.stages },
|
|
{ count: '3', label: labels.tasks },
|
|
];
|
|
const expectedPrompt = scenario.kind === 'quiz' ? labels.quizCtaPrompt : labels.pblCtaPrompt;
|
|
const expectedDestination = scenario.expectedDestination ?? scenario.cta.destination;
|
|
|
|
expect(
|
|
result.overflow,
|
|
JSON.stringify({
|
|
scenario: scenario.name,
|
|
destination: scenario.cta.destination,
|
|
result,
|
|
}),
|
|
).toBeLessThanOrEqual(0);
|
|
expect(result.panelTop).toBeGreaterThanOrEqual(0);
|
|
expect(result.panelBottom).toBeLessThanOrEqual(result.stageHeight);
|
|
expect(result.statTiles).toEqual(expectedStats);
|
|
expect(result.ctaLineTexts).toEqual([
|
|
expectedPrompt,
|
|
`${labels.ctaVisit} ${expectedDestination}`,
|
|
]);
|
|
expect(result.ctaDirection).toBe('ltr');
|
|
expect(result.ctaLineHorizontalOverflows).toEqual([0, 0]);
|
|
expect(result.ctaLineVerticalOverflows).toEqual([0, 0]);
|
|
expect(result.destinationFragmentHorizontalOverflows.length).toBeGreaterThan(0);
|
|
expect(
|
|
result.destinationFragmentHorizontalOverflows.every((overflow) => overflow === 0),
|
|
).toBe(true);
|
|
expect(result.interactiveCtaCount).toBe(0);
|
|
expect(result.titleDirection).toBe(scenario.titleDirection);
|
|
expect(result.chromeDirection).toBe(scenario.chromeDirection);
|
|
if (scenario.expectedGainCount !== undefined) {
|
|
expect(result.gainCount).toBe(scenario.expectedGainCount);
|
|
}
|
|
if (scenario.burnInSubtitles) {
|
|
expect(result.captionTop).not.toBeNull();
|
|
expect(result.panelBottom).toBeLessThanOrEqual(result.captionTop!);
|
|
}
|
|
});
|
|
}
|
|
|
|
check('uses the same PBL design box in the planner and Chromium', async (page) => {
|
|
const frame = FRAMES['720p'];
|
|
const result = await measure(
|
|
page,
|
|
coverHtml(CONTENT.compactFive, frame, {
|
|
kind: 'pbl',
|
|
locale: 'en-US',
|
|
cta: DEFAULT_CTA,
|
|
}),
|
|
frame,
|
|
);
|
|
|
|
expect(result.panelWidth).toBeCloseTo(PBL_PANEL_DESIGN_BOX.width, 1);
|
|
expect(result.panelPaddingY).toBeCloseTo(PBL_PANEL_DESIGN_BOX.paddingY, 1);
|
|
expect(result.panelContentWidth).toBeCloseTo(PBL_PANEL_DESIGN_BOX.contentWidth, 1);
|
|
});
|
|
|
|
check('retains a people row at its conservative height threshold', async (page) => {
|
|
const frame = { width: 1280, height: 486 };
|
|
const locale = 'en-US';
|
|
const labels = getVideoExportCoverLabels(locale);
|
|
const result = await measure(
|
|
page,
|
|
coverHtml({ title: 'People threshold', description: '', gains: [] }, frame, {
|
|
kind: 'pbl',
|
|
locale,
|
|
cta: DEFAULT_CTA,
|
|
}),
|
|
frame,
|
|
);
|
|
|
|
expect(result.peopleCount).toBe(2);
|
|
expect(result.gainCount).toBe(0);
|
|
expect(result.descriptionCount).toBe(0);
|
|
expect(result.overflow).toBeLessThanOrEqual(0);
|
|
expect(result.panelBottom).toBeLessThanOrEqual(result.stageHeight);
|
|
expect(result.statTiles).toEqual([
|
|
{ count: '2', label: labels.stages },
|
|
{ count: '3', label: labels.tasks },
|
|
]);
|
|
expect(result.ctaLineTexts).toEqual([
|
|
labels.pblCtaPrompt,
|
|
`${labels.ctaVisit} ${DEFAULT_CTA.destination}`,
|
|
]);
|
|
});
|
|
|
|
for (const [name, frame] of Object.entries(QUIZ_LIST_FRAMES)) {
|
|
check(
|
|
`measures and reaches the real Quiz list bottom consistently at ${name}`,
|
|
async (page) => {
|
|
const initial = quizListHtml(frame, LONG_QUIZ_QUESTIONS, {
|
|
contentHeightPx: frame.height * 2,
|
|
viewportHeightPx: frame.height / 2,
|
|
});
|
|
await page.setViewportSize(frame);
|
|
await loadEmittedHtml(page, initial.html);
|
|
|
|
const reads = await page.evaluate(async () => {
|
|
const values: Array<{ contentHeightPx: number; viewportHeightPx: number }> = [];
|
|
for (let index = 0; index < 3; index += 1) {
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
const content = document.querySelector<HTMLElement>('.quiz-list-content')!;
|
|
const viewport = document.querySelector<HTMLElement>('.quiz-list-viewport')!;
|
|
values.push({
|
|
contentHeightPx: Math.ceil(content.scrollHeight),
|
|
viewportHeightPx: Math.ceil(viewport.clientHeight),
|
|
});
|
|
}
|
|
return values;
|
|
});
|
|
expect(reads[1]).toEqual(reads[0]);
|
|
expect(reads[2]).toEqual(reads[0]);
|
|
expect(reads[0].contentHeightPx).toBeGreaterThan(reads[0].viewportHeightPx);
|
|
|
|
const resolved = quizListHtml(frame, LONG_QUIZ_QUESTIONS, reads[0]);
|
|
await loadEmittedHtml(page, resolved.html);
|
|
const geometry = await page.evaluate((distance) => {
|
|
const viewport = document.querySelector<HTMLElement>('.quiz-list-viewport')!;
|
|
const content = document.querySelector<HTMLElement>('.quiz-list-content')!;
|
|
const first = document.querySelector<HTMLElement>('.quiz-list-question')!;
|
|
const cards = document.querySelectorAll<HTMLElement>('.quiz-list-question');
|
|
const last = cards[cards.length - 1]!;
|
|
const viewportBox = viewport.getBoundingClientRect();
|
|
const firstTop = first.getBoundingClientRect().top;
|
|
const fontReady = document.fonts.check('16px KaTeX_Math');
|
|
const math = document.querySelector<HTMLElement>('.katex .mathnormal');
|
|
content.style.transform = `translateY(-${distance}px)`;
|
|
const lastBottom = last.getBoundingClientRect().bottom;
|
|
return {
|
|
firstOffsetPx: firstTop - viewportBox.top,
|
|
lastOffsetPx: lastBottom - viewportBox.bottom,
|
|
fontReady,
|
|
mathFontFamily: math ? getComputedStyle(math).fontFamily : '',
|
|
externalFontUrls: Array.from(document.styleSheets)
|
|
.flatMap((sheet) => {
|
|
try {
|
|
return Array.from(sheet.cssRules, (rule) => rule.cssText);
|
|
} catch {
|
|
return [];
|
|
}
|
|
})
|
|
.filter((rule) => /url\(["']?https?:\/\//.test(rule)),
|
|
};
|
|
}, resolved.scrollDistancePx);
|
|
|
|
expect(geometry.firstOffsetPx).toBeCloseTo(0, 0);
|
|
expect(Math.abs(geometry.lastOffsetPx)).toBeLessThanOrEqual(1);
|
|
expect(geometry.fontReady).toBe(true);
|
|
expect(geometry.mathFontFamily).toContain('KaTeX_Math');
|
|
expect(geometry.externalFontUrls).toEqual([]);
|
|
},
|
|
);
|
|
}
|
|
|
|
for (const blockedStep of ['fonts', 'animation-frame'] as const) {
|
|
check(`bounds Quiz measurement when ${blockedStep} never settles`, async (page) => {
|
|
const frame = QUIZ_LIST_FRAMES['720p'];
|
|
const fixture = quizScrollScene();
|
|
const surface = createQuizQuestionListMeasurementSurface({
|
|
content: {
|
|
title: fixture.title,
|
|
questions: prepareQuizQuestionList(fixture),
|
|
},
|
|
width: frame.width,
|
|
height: frame.height,
|
|
locale: 'en-US',
|
|
labels: getVideoExportCoverLabels('en-US'),
|
|
});
|
|
await page.setViewportSize(frame);
|
|
await page.goto(HARNESS_URL, { waitUntil: 'load' });
|
|
|
|
const result = await page.evaluate(
|
|
async ({ source, input, blocked }) => {
|
|
const measure = (0, eval)(`(${source})`) as (
|
|
value: typeof input,
|
|
timeoutMs?: number,
|
|
) => Promise<unknown>;
|
|
const originalRaf = window.requestAnimationFrame;
|
|
if (blocked === 'fonts') {
|
|
Object.defineProperty(document, 'fonts', {
|
|
configurable: true,
|
|
value: { ready: new Promise<void>(() => {}) },
|
|
});
|
|
} else {
|
|
window.requestAnimationFrame = () => 0;
|
|
}
|
|
|
|
const outcome = await Promise.race([
|
|
measure(input, 40).then((value) => ({ settled: true, value })),
|
|
new Promise<{ settled: false; value: null }>((resolve) =>
|
|
setTimeout(() => resolve({ settled: false, value: null }), 250),
|
|
),
|
|
]);
|
|
const remainingHosts = document.querySelectorAll('#quiz-layout-measurement').length;
|
|
|
|
window.requestAnimationFrame = originalRaf;
|
|
if (blocked === 'fonts') {
|
|
delete (document as unknown as { fonts?: FontFaceSet }).fonts;
|
|
}
|
|
document.querySelector('#quiz-layout-measurement')?.remove();
|
|
return { ...outcome, remainingHosts };
|
|
},
|
|
{ source: measureQuizQuestionList.toString(), input: surface, blocked: blockedStep },
|
|
);
|
|
|
|
expect(result).toEqual({ settled: true, value: null, remainingHosts: 0 });
|
|
const degraded = compileVideoTimeline(
|
|
{ stage: { id: 'stage', name: 'deadline fallback' }, scenes: [fixture] },
|
|
{
|
|
timing: NO_PROBE,
|
|
assets: NO_ASSETS,
|
|
quizLayout: { measureQuestionList: () => result.value as null },
|
|
},
|
|
);
|
|
expect(degraded.scenes[0].visuals).not.toContainEqual(
|
|
expect.objectContaining({ kind: 'quiz-question-list' }),
|
|
);
|
|
expect(degraded.diagnostics).toContainEqual(
|
|
expect.objectContaining({ code: 'quiz-layout-unavailable', sceneId: fixture.id }),
|
|
);
|
|
});
|
|
}
|
|
|
|
check('runs the production Quiz measurer and emitted timeline end to end', async (page) => {
|
|
const frame = QUIZ_LIST_FRAMES['720p'];
|
|
const initial = quizListHtml(frame, LONG_QUIZ_QUESTIONS, {
|
|
contentHeightPx: frame.height * 2,
|
|
viewportHeightPx: frame.height / 2,
|
|
});
|
|
await page.setViewportSize(frame);
|
|
await loadEmittedHtml(page, initial.html);
|
|
|
|
const fixture = quizScrollScene();
|
|
const surface = createQuizQuestionListMeasurementSurface({
|
|
content: {
|
|
title: fixture.title,
|
|
questions: prepareQuizQuestionList(fixture),
|
|
},
|
|
width: frame.width,
|
|
height: frame.height,
|
|
locale: 'en-US',
|
|
labels: getVideoExportCoverLabels('en-US'),
|
|
});
|
|
const measureSource = measureQuizQuestionList.toString();
|
|
const measured = await page.evaluate(
|
|
async ({ source, input }) => {
|
|
try {
|
|
const measure = (0, eval)(`(${source})`) as (value: typeof input) => Promise<{
|
|
contentHeightPx: number;
|
|
viewportHeightPx: number;
|
|
frameHeightPx: number;
|
|
} | null>;
|
|
return {
|
|
value: await measure(input),
|
|
error: null,
|
|
remainingHosts: document.querySelectorAll('#quiz-layout-measurement').length,
|
|
};
|
|
} catch (error) {
|
|
return {
|
|
value: null,
|
|
error: error instanceof Error ? error.message : String(error),
|
|
remainingHosts: document.querySelectorAll('#quiz-layout-measurement').length,
|
|
};
|
|
}
|
|
},
|
|
{ source: measureSource, input: surface },
|
|
);
|
|
|
|
expect(measured.error).toBeNull();
|
|
expect(measured.remainingHosts).toBe(0);
|
|
expect(measured.value).toEqual(QUIZ_SCROLL_LAYOUT_720P);
|
|
expect(surface.css).not.toMatch(/url\(["']?https?:\/\//);
|
|
expect(
|
|
await page.evaluate(() => document.fonts.check('16px "OpenMAIC Noto Sans SC"', '中文')),
|
|
).toBe(true);
|
|
const cjkCoverage = await page.evaluate(async () => {
|
|
await Promise.all([
|
|
document.fonts.load('40px "OpenMAIC Noto Sans SC"', '漢字あア'),
|
|
document.fonts.load('40px "OpenMAIC Noto Sans KR"', '한글'),
|
|
]);
|
|
const signature = (text: string, font: string): number => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 256;
|
|
canvas.height = 64;
|
|
const context = canvas.getContext('2d')!;
|
|
context.font = `40px ${font}`;
|
|
context.fillText(text, 0, 44);
|
|
let hash = 2_166_136_261;
|
|
for (const value of context.getImageData(0, 0, 256, 64).data) {
|
|
hash ^= value;
|
|
hash = Math.imul(hash, 16_777_619);
|
|
}
|
|
return hash >>> 0;
|
|
};
|
|
const covered = (text: string, family: string): boolean =>
|
|
signature(text, `"${family}", monospace`) !== signature(text, 'monospace');
|
|
return {
|
|
han: covered('漢字', 'OpenMAIC Noto Sans SC'),
|
|
kana: covered('あア', 'OpenMAIC Noto Sans SC'),
|
|
hangul: covered('한글', 'OpenMAIC Noto Sans KR'),
|
|
};
|
|
});
|
|
expect(cjkCoverage).toEqual({ han: true, kana: true, hangul: true });
|
|
|
|
const resolved = quizListHtml(frame, LONG_QUIZ_QUESTIONS, measured.value!);
|
|
await loadEmittedHtml(page, resolved.html);
|
|
const checkpoints = await page.evaluate((timing) => {
|
|
const timeline = (
|
|
window as typeof window & {
|
|
__timelines: Record<string, { time(value: number, suppressEvents?: boolean): unknown }>;
|
|
}
|
|
).__timelines.openmaic;
|
|
const cover = document.querySelector<HTMLElement>('#scene-1-visual-1')!;
|
|
const list = document.querySelector<HTMLElement>('#scene-1-visual-2')!;
|
|
const content = document.querySelector<HTMLElement>('.quiz-list-content')!;
|
|
const viewport = document.querySelector<HTMLElement>('.quiz-list-viewport')!;
|
|
const first = document.querySelector<HTMLElement>('.quiz-list-question')!;
|
|
const cards = document.querySelectorAll<HTMLElement>('.quiz-list-question');
|
|
const last = cards[cards.length - 1]!;
|
|
const read = (timeMs: number) => {
|
|
timeline.time(timeMs / 1000, false);
|
|
const viewportBox = viewport.getBoundingClientRect();
|
|
return {
|
|
coverOpacity: Number(getComputedStyle(cover).opacity),
|
|
listOpacity: Number(getComputedStyle(list).opacity),
|
|
firstOffsetPx: first.getBoundingClientRect().top - viewportBox.top,
|
|
lastOffsetPx: last.getBoundingClientRect().bottom - viewportBox.bottom,
|
|
transform: getComputedStyle(content).transform,
|
|
};
|
|
};
|
|
return {
|
|
transitionMid: read((timing.transitionStartMs + timing.transitionEndMs) / 2),
|
|
topHoldEnd: read(timing.topHoldEndMs),
|
|
scrollQuarter: read(timing.topHoldEndMs + (timing.scrollEndMs - timing.topHoldEndMs) / 4),
|
|
scrollEnd: read(timing.scrollEndMs),
|
|
bottomHoldEnd: read(timing.bottomHoldEndMs),
|
|
};
|
|
}, resolved.timing);
|
|
|
|
expect(checkpoints.transitionMid.coverOpacity).toBeCloseTo(0.5, 1);
|
|
expect(checkpoints.transitionMid.listOpacity).toBeCloseTo(0.5, 1);
|
|
expect(checkpoints.topHoldEnd.firstOffsetPx).toBeCloseTo(0, 0);
|
|
expect(checkpoints.scrollQuarter.firstOffsetPx).toBeCloseTo(-resolved.scrollDistancePx / 4, 0);
|
|
expect(Math.abs(checkpoints.scrollEnd.lastOffsetPx)).toBeLessThanOrEqual(1);
|
|
expect(checkpoints.bottomHoldEnd.lastOffsetPx).toBeCloseTo(
|
|
checkpoints.scrollEnd.lastOffsetPx,
|
|
1,
|
|
);
|
|
expect(checkpoints.bottomHoldEnd.transform).toBe(checkpoints.scrollEnd.transform);
|
|
});
|
|
|
|
check('keeps a short Quiz list stationary when it fits', async (page) => {
|
|
const frame = QUIZ_LIST_FRAMES['720p'];
|
|
const shortQuestions = [
|
|
{
|
|
id: 'short',
|
|
type: 'short_answer',
|
|
question: 'Explain $x=2$.',
|
|
},
|
|
];
|
|
const first = quizListHtml(frame, shortQuestions, {
|
|
contentHeightPx: 100,
|
|
viewportHeightPx: 100,
|
|
});
|
|
await page.setViewportSize(frame);
|
|
await loadEmittedHtml(page, first.html);
|
|
const measured = await page.evaluate(() => {
|
|
const content = document.querySelector<HTMLElement>('.quiz-list-content')!;
|
|
const viewport = document.querySelector<HTMLElement>('.quiz-list-viewport')!;
|
|
return {
|
|
contentHeightPx: Math.ceil(content.scrollHeight),
|
|
viewportHeightPx: Math.ceil(viewport.clientHeight),
|
|
};
|
|
});
|
|
const resolved = quizListHtml(frame, shortQuestions, measured);
|
|
expect(resolved.scrollDistancePx).toBe(0);
|
|
expect(resolved.html).not.toMatch(/tl\.to\('#scene-1-visual-2-content'/);
|
|
});
|
|
});
|