chrome-e2e-sdk 0.0.0-stage → 1.0.0

package/dist/test/HtmlReport.js

@@ -0,0 +1,653 @@
+import { stat } from 'node:fs/promises';
+import { isAbsolute, relative, resolve, sep } from 'node:path';
+/**
+ * How much diagnostic data to inline before deferring to summary.json.
+ * A report is for reading at a glance; the full payloads stay in the JSON.
+ */
+const CONSOLE_LIMIT = 30;
+const NETWORK_LIMIT = 20;
+/** Longest URL rendered in full before it is clipped for display. */
+const URL_DISPLAY_LIMIT = 160;
+/** Passed assertions rendered per test; the rest are pointed at in the JSON. */
+const CHECK_LIMIT = 30;
+/**
+ * Screenshots above this size are linked by path rather than embedded, so a
+ * handful of full-page captures cannot turn the report into a 40 MB file.
+ */
+const INLINE_SCREENSHOT_LIMIT = 1024 * 1024;
+/**
+ * Renders the summary as a single self-contained HTML file.
+ *
+ * No build step and no CDN: the stylesheet and the small filter script are
+ * inlined, and the page works offline, which is what a CI artifact needs.
+ */
+export async function renderHtmlReport(summary, options) {
+    const t = STRINGS[options.locale === 'en' ? 'en' : 'zh-CN'];
+    const embedded = new Map();
+    const rows = [];
+    for (const result of summary.results) {
+        const screenshot = result.screenshotPath
+            ? await describeScreenshot(result.screenshotPath, options.htmlPath, embedded, result.title, t)
+            : null;
+        rows.push({
+            title: result.title,
+            status: result.status,
+            durationMs: result.durationMs,
+            attempts: result.attempts,
+            failedAt: result.failedAt,
+            error: result.error,
+            skipReason: result.skipReason,
+            pageUrl: result.pageUrl,
+            expectedUrl: result.expectedUrl,
+            pageTitle: result.pageTitle,
+            loadState: typeof result.errorDetails?.['readyState'] === 'string'
+                ? result.errorDetails['readyState']
+                : undefined,
+            screenshot,
+            screenshotError: result.screenshotError,
+            console: pickConsole(result.consoleMessages),
+            network: pickNetwork(result.networkRequests),
+            checks: pickChecks(result.checks)
+        });
+    }
+    const html = `<!doctype html>
+<html lang="${t.lang}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(t.title)}</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<main>
+  <header class="head">
+    <h1>${escapeHtml(t.title)}</h1>
+    <p class="sub">${escapeHtml(formatTimestamp(summary))}</p>
+  </header>
+
+  <section class="cards" role="list">
+    ${card(t.total, summary.total, 'total')}
+    ${card(t.passed, summary.passed, 'passed')}
+    ${card(t.failed, summary.failed, 'failed')}
+    ${card(t.skipped, summary.skipped, 'skipped')}
+  </section>
+
+  ${summary.durationMs > 0 ? `<p class="duration">${escapeHtml(t.finishedIn)} ${formatDuration(summary.durationMs)}</p>` : ''}
+
+  <nav class="filters" aria-label="${escapeAttribute(t.filterLabel)}">
+    <button type="button" class="filter is-active" data-filter="all">${escapeHtml(t.all)} <span>${summary.total}</span></button>
+    <button type="button" class="filter" data-filter="failed">${escapeHtml(t.failed)} <span>${summary.failed}</span></button>
+    <button type="button" class="filter" data-filter="passed">${escapeHtml(t.passed)} <span>${summary.passed}</span></button>
+    <button type="button" class="filter" data-filter="skipped">${escapeHtml(t.skipped)} <span>${summary.skipped}</span></button>
+  </nav>
+
+  ${rows.length === 0 ? `<p class="empty">${escapeHtml(t.noTests)}</p>` : ''}
+
+  <ul class="tests">
+    ${rows.map((row, index) => renderTest(row, index, options.jsonPath, t)).join('\n')}
+  </ul>
+</main>
+<script>${SCRIPT}</script>
+</body>
+</html>
+`;
+    return { html, embedded };
+}
+const ZH = {
+    lang: 'zh-CN',
+    title: '测试报告',
+    total: '总数',
+    passed: '通过',
+    failed: '失败',
+    skipped: '跳过',
+    all: '全部',
+    finishedIn: '总耗时',
+    error: '错误',
+    checks: '已通过的检查',
+    checkTarget: '对象',
+    basicInfo: '基本信息',
+    status: '状态',
+    statuses: { passed: '通过', failed: '失败', skipped: '跳过' },
+    duration: '耗时',
+    attemptsLabel: '尝试次数',
+    failedTime: '失败时间',
+    skipReason: '跳过原因',
+    skipReasons: { explicit: '用例被标记为 skip', focused: '存在 test.only，本用例未参与运行' },
+    page: '页面',
+    titleLabel: '标题',
+    url: '地址',
+    expectedUrl: '目标地址',
+    loadState: '加载状态',
+    screenshot: '失败截图',
+    notCaptured: '未能截取：',
+    fileMissing: '文件在磁盘上不存在。',
+    largeLinked: '文件较大，且位于报告目录之外，因此使用绝对路径引用。',
+    console: '控制台',
+    network: '网络',
+    attempts: (n) => `${n} 次尝试`,
+    showingFirst: (shown, total) => `仅显示前 ${shown} 条，共 ${total} 条。`,
+    fullDataIn: '完整数据见 JSON 汇总。',
+    fullDataInFile: (path) => `完整数据见 ${path}。`,
+    noTests: '本次没有执行任何用例。',
+    filterLabel: '筛选用例',
+    consoleLevels: { log: '日志', info: '信息', debug: '调试', warn: '警告', warning: '警告', error: '错误' },
+    statusLabels: { failed: '失败', pending: '等待' }
+};
+const EN = {
+    lang: 'en',
+    title: 'Test report',
+    total: 'Total',
+    passed: 'Passed',
+    failed: 'Failed',
+    skipped: 'Skipped',
+    all: 'All',
+    finishedIn: 'Finished in',
+    error: 'Error',
+    checks: 'Checks that passed',
+    checkTarget: 'Target',
+    basicInfo: 'Summary',
+    status: 'Status',
+    statuses: { passed: 'Passed', failed: 'Failed', skipped: 'Skipped' },
+    duration: 'Duration',
+    attemptsLabel: 'Attempts',
+    failedTime: 'Failed at',
+    skipReason: 'Skip reason',
+    skipReasons: { explicit: 'Marked with skip', focused: 'Excluded by a focused test.only' },
+    page: 'Page',
+    titleLabel: 'Title',
+    url: 'URL',
+    expectedUrl: 'Expected URL',
+    loadState: 'Load state',
+    screenshot: 'Screenshot',
+    notCaptured: 'Not captured: ',
+    fileMissing: 'File not found on disk.',
+    largeLinked: 'Large file, linked by absolute path because it is outside the report directory.',
+    console: 'Console',
+    network: 'Network',
+    attempts: (n) => `${n} attempts`,
+    showingFirst: (shown, total) => `Showing the first ${shown} of ${total}.`,
+    fullDataIn: 'Full data in the JSON summary.',
+    fullDataInFile: (path) => `Full data in ${path}.`,
+    noTests: 'No tests were run.',
+    filterLabel: 'Filter tests',
+    consoleLevels: { log: 'log', info: 'info', debug: 'debug', warn: 'warn', warning: 'warning', error: 'error' },
+    statusLabels: { failed: 'failed', pending: 'pending' }
+};
+const STRINGS = {
+    'zh-CN': ZH,
+    en: EN
+};
+function renderTest(row, index, jsonPath, t) {
+    const details = [];
+    // Always present, so every row is openable whatever its status. A skipped
+    // test has no page behind it, and a green one is exactly the case a reader
+    // wants to inspect: did it really go where it claims?
+    const basics = [
+        `<div><dt>${escapeHtml(t.status)}</dt><dd>${escapeHtml(t.statuses[row.status])}</dd></div>`,
+        `<div><dt>${escapeHtml(t.duration)}</dt><dd>${formatDuration(row.durationMs)}</dd></div>`
+    ];
+    if (row.attempts !== undefined) {
+        basics.push(`<div><dt>${escapeHtml(t.attemptsLabel)}</dt><dd>${row.attempts}</dd></div>`);
+    }
+    if (row.failedAt) {
+        basics.push(`<div><dt>${escapeHtml(t.failedTime)}</dt><dd><time datetime="${escapeAttribute(row.failedAt)}">${escapeHtml(formatClock(row.failedAt))}</time></dd></div>`);
+    }
+    if (row.skipReason) {
+        basics.push(`<div><dt>${escapeHtml(t.skipReason)}</dt><dd>${escapeHtml(t.skipReasons[row.skipReason])}</dd></div>`);
+    }
+    details.push(`<h4>${escapeHtml(t.basicInfo)}</h4><dl class="kv">${basics.join('')}</dl>`);
+    if (row.error) {
+        details.push(`<h4>${escapeHtml(t.error)}</h4><pre class="err">${escapeHtml(row.error)}</pre>`);
+    }
+    if (row.pageUrl || row.pageTitle || row.expectedUrl || row.loadState) {
+        const parts = [];
+        if (row.pageTitle)
+            parts.push(`<div><dt>${escapeHtml(t.titleLabel)}</dt><dd>${escapeHtml(row.pageTitle)}</dd></div>`);
+        if (row.pageUrl)
+            parts.push(`<div><dt>${escapeHtml(t.url)}</dt>${urlCell(row.pageUrl)}</div>`);
+        // Shown only when it differs from pageUrl. A test that died mid-navigation
+        // otherwise reads as if it never left the previous page, which sends the
+        // reader looking at the wrong thing entirely.
+        if (row.expectedUrl && row.expectedUrl !== row.pageUrl) {
+            parts.push(`<div><dt>${escapeHtml(t.expectedUrl)}</dt>${urlCell(row.expectedUrl)}</div>`);
+        }
+        if (row.loadState) {
+            parts.push(`<div><dt>${escapeHtml(t.loadState)}</dt><dd>${escapeHtml(row.loadState)}</dd></div>`);
+        }
+        details.push(`<h4>${escapeHtml(t.page)}</h4><dl class="kv">${parts.join('')}</dl>`);
+    }
+    if (row.screenshot) {
+        const note = row.screenshot.note ? `<p class="note">${escapeHtml(row.screenshot.note)}</p>` : '';
+        details.push(`<h4>${escapeHtml(t.screenshot)}</h4>${note}<a href="${escapeAttribute(row.screenshot.src)}" target="_blank" rel="noreferrer"><img class="shot" src="${escapeAttribute(row.screenshot.src)}" alt="${escapeAttribute(t.screenshot)}" loading="lazy"></a>`);
+    }
+    else if (row.screenshotError) {
+        details.push(`<h4>${escapeHtml(t.screenshot)}</h4><p class="note">${escapeHtml(t.notCaptured)}${escapeHtml(row.screenshotError)}</p>`);
+    }
+    // After the error, so a red row leads with what went wrong. This is the only
+    // section a green row has beyond the basics, which is the point: a passing
+    // test should be able to show what it actually verified.
+    if (row.checks.rows.length > 0) {
+        details.push(renderChecks(row.checks, jsonPath, t));
+    }
+    if (row.console.rows.length > 0) {
+        details.push(renderConsole(row.console, jsonPath, t));
+    }
+    if (row.network.rows.length > 0) {
+        details.push(renderNetwork(row.network, jsonPath, t));
+    }
+    const [suite = row.title, ...rest] = row.title.split(' > ');
+    const canExpand = details.length > 0;
+    return `<li class="test" data-status="${row.status}" data-index="${index}">
+  <button type="button" class="row"${canExpand ? ' aria-expanded="false"' : ' disabled'}>
+    <span class="dot ${row.status}" aria-hidden="true"></span>
+    <span class="name"><span class="suite">${escapeHtml(suite)}</span>${rest.map((part) => `<span class="part">${escapeHtml(part)}</span>`).join('')}</span>
+    <span class="meta">${row.attempts && row.attempts > 1 ? `<span class="tag">${escapeHtml(t.attempts(row.attempts))}</span>` : ''}${row.failedAt ? `<time datetime="${escapeAttribute(row.failedAt)}">${escapeHtml(formatClock(row.failedAt))}</time>` : ''}<span class="dur">${formatDuration(row.durationMs)}</span></span>
+  </button>
+  ${canExpand ? `<div class="detail" hidden>${details.join('')}</div>` : ''}
+</li>`;
+}
+/**
+ * Renders a URL, shortened when it is long.
+ *
+ * A data: URL carrying a whole HTML document runs to thousands of characters
+ * and buries everything around it. The full value stays in the title attribute
+ * and in summary.json; only the on-screen text is clipped.
+ */
+function urlCell(url) {
+    const clipped = url.length > URL_DISPLAY_LIMIT ? `${url.slice(0, URL_DISPLAY_LIMIT)}…` : url;
+    return `<dd class="wrap" title="${escapeAttribute(url)}">${escapeHtml(clipped)}</dd>`;
+}
+function renderChecks(checks, jsonPath, t) {
+    const items = checks.rows
+        .map((row) => {
+        const expectation = `${row.negated ? 'not ' : ''}${row.expectation}`;
+        const target = row.target
+            ? `<span class="target">${escapeHtml(t.checkTarget)}: ${escapeHtml(row.target)}</span>`
+            : '';
+        return `<li><span class="method">${escapeHtml(row.method)}</span><span class="txt">${escapeHtml(expectation)}</span>${target}</li>`;
+    })
+        .join('');
+    return `<h4>${escapeHtml(t.checks)} <span class="count">${checks.total}</span></h4><ul class="log checks">${items}</ul>${truncationNote(checks.total, jsonPath, t, CHECK_LIMIT)}`;
+}
+function renderConsole(console, jsonPath, t) {
+    const items = console.rows
+        .map((row) => {
+        const level = row.type === 'error' ? 'error' : row.type === 'warn' || row.type === 'warning' ? 'warn' : '';
+        const label = t.consoleLevels[row.type] ?? row.type;
+        return `<li class="${level ? `is-${level}` : ''}"><span class="kind">${escapeHtml(label)}</span><span class="txt">${escapeHtml(row.text)}</span></li>`;
+    })
+        .join('');
+    return `<h4>${escapeHtml(t.console)} <span class="count">${console.total}</span></h4><ul class="log">${items}</ul>${truncationNote(console.total, jsonPath, t, CONSOLE_LIMIT)}`;
+}
+function renderNetwork(network, jsonPath, t) {
+    const items = network.rows
+        .map((row) => {
+        const status = row.status !== undefined
+            ? `<span class="code ${statusClass(row.status)}">${row.status}</span>`
+            : row.failure
+                ? `<span class="code err">${escapeHtml(t.statusLabels.failed)}</span>`
+                : `<span class="code pend">${escapeHtml(t.statusLabels.pending)}</span>`;
+        const failure = row.failure ? `<span class="fail">${escapeHtml(row.failure)}</span>` : '';
+        return `<li>${status}<span class="verb">${escapeHtml(row.method)}</span><span class="txt">${escapeHtml(row.url)}</span>${failure}</li>`;
+    })
+        .join('');
+    return `<h4>${escapeHtml(t.network)} <span class="count">${network.total}</span></h4><ul class="log net">${items}</ul>${truncationNote(network.total, jsonPath, t, NETWORK_LIMIT)}`;
+}
+function truncationNote(total, jsonPath, t, limit) {
+    if (total <= limit)
+        return '';
+    const where = jsonPath ? t.fullDataInFile(`<code>${escapeHtml(jsonPath)}</code>`) : escapeHtml(t.fullDataIn);
+    return `<p class="note">${escapeHtml(t.showingFirst(limit, total))} ${where}</p>`;
+}
+function card(label, value, kind) {
+    return `<div class="card ${kind}" role="listitem"><span class="n">${value}</span><span class="l">${escapeHtml(label)}</span></div>`;
+}
+/**
+ * Referencing a screenshot by a relative path keeps the report small, but only
+ * works while the report and the screenshots sit under a shared root. When they
+ * do not, the absolute path is used so the link still resolves.
+ */
+async function describeScreenshot(absolutePath, htmlPath, embedded, key, t) {
+    const resolved = resolve(absolutePath);
+    const size = await stat(resolved).then((s) => s.size).catch(() => undefined);
+    if (size !== undefined && size <= INLINE_SCREENSHOT_LIMIT) {
+        const { readFile } = await import('node:fs/promises');
+        const bytes = await readFile(resolved);
+        const uri = `data:image/png;base64,${bytes.toString('base64')}`;
+        embedded.set(key, uri);
+        return { src: uri };
+    }
+    const fromHtml = relative(dirnameOf(htmlPath), resolved);
+    const usable = fromHtml && !fromHtml.startsWith('..') && !isAbsolute(fromHtml);
+    return {
+        src: usable ? fromHtml.split(sep).join('/') : resolved.split(sep).join('/'),
+        note: size === undefined ? t.fileMissing : usable ? undefined : t.largeLinked
+    };
+}
+function dirnameOf(filePath) {
+    const index = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf(sep));
+    return index <= 0 ? '.' : filePath.slice(0, index);
+}
+function pickChecks(checks) {
+    const all = Array.isArray(checks) ? checks : [];
+    const rows = all.slice(0, CHECK_LIMIT).flatMap((check) => {
+        if (typeof check !== 'object' || check === null)
+            return [];
+        return typeof check.method === 'string' && typeof check.expectation === 'string'
+            ? [{
+                    method: check.method,
+                    expectation: check.expectation,
+                    target: typeof check.target === 'string' ? check.target : undefined,
+                    negated: check.negated === true
+                }]
+            : [];
+    });
+    return { rows, total: all.length };
+}
+function pickConsole(messages) {
+    const all = Array.isArray(messages) ? messages : [];
+    const rows = all.slice(0, CONSOLE_LIMIT).flatMap((message) => {
+        if (typeof message !== 'object' || message === null)
+            return [];
+        const record = message;
+        return typeof record['type'] === 'string' && typeof record['text'] === 'string'
+            ? [{ type: record['type'], text: record['text'], id: typeof record['id'] === 'number' ? record['id'] : undefined }]
+            : [];
+    });
+    return { rows, total: all.length };
+}
+function pickNetwork(requests) {
+    const all = Array.isArray(requests) ? requests : [];
+    const rows = all.slice(0, NETWORK_LIMIT).flatMap((request) => {
+        if (typeof request !== 'object' || request === null)
+            return [];
+        const record = request;
+        if (typeof record['url'] !== 'string')
+            return [];
+        const response = record['response'];
+        const status = typeof record['status'] === 'number'
+            ? record['status']
+            : typeof response === 'object' && response !== null && typeof response['status'] === 'number'
+                ? (response['status'])
+                : undefined;
+        return [
+            {
+                method: typeof record['method'] === 'string' ? record['method'] : 'GET',
+                url: record['url'],
+                status,
+                resourceType: typeof record['resourceType'] === 'string' ? record['resourceType'] : undefined,
+                failure: typeof record['failure'] === 'string' ? record['failure'] : undefined
+            }
+        ];
+    });
+    return { rows, total: all.length };
+}
+function statusClass(status) {
+    if (status >= 500)
+        return 'err';
+    if (status >= 400)
+        return 'warn';
+    if (status >= 200 && status < 300)
+        return 'ok';
+    return 'pend';
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(2)}s`;
+    return `${Math.floor(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
+}
+function formatTimestamp(summary) {
+    const failed = summary.results.find((result) => result.failedAt);
+    return failed?.failedAt ? new Date(failed.failedAt).toLocaleString() : new Date().toLocaleString();
+}
+function formatClock(iso) {
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? iso : date.toLocaleTimeString();
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function escapeAttribute(value) {
+    return escapeHtml(value).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+const STYLES = `
+:root {
+  color-scheme: light dark;
+  --bg: #fbfbfd;
+  --surface: #ffffff;
+  --border: #e6e6ec;
+  --text: #16161a;
+  --muted: #6b6b76;
+  --accent: #3b5bdb;
+  --ok: #2f9e44;
+  --warn: #e8a33d;
+  --err: #e03131;
+  --shadow: 0 1px 2px rgba(16, 16, 24, .04), 0 8px 24px rgba(16, 16, 24, .04);
+  --radius: 12px;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d0d10;
+    --surface: #16161a;
+    --border: #26262d;
+    --text: #ededf0;
+    --muted: #9a9aa6;
+    --accent: #7d94f5;
+    --ok: #51cf66;
+    --warn: #ffc078;
+    --err: #ff6b6b;
+    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  padding: 40px 20px 80px;
+  background: var(--bg);
+  color: var(--text);
+  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+main { max-width: 940px; margin: 0 auto; }
+.head { margin-bottom: 28px; }
+h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.01em; }
+.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
+.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+  box-shadow: var(--shadow);
+}
+.card .n { display: block; font-size: 28px; font-weight: 640; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+.card .l { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
+.card.passed .n { color: var(--ok); }
+.card.failed .n { color: var(--err); }
+.card.skipped .n { color: var(--muted); }
+.duration { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
+.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
+.filter {
+  font: inherit;
+  font-size: 13px;
+  color: var(--muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.filter span { font-variant-numeric: tabular-nums; opacity: .65; margin-left: 4px; }
+.filter:hover { color: var(--text); border-color: var(--muted); }
+.filter.is-active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.test {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.test[hidden] { display: none; }
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 16px;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.row:disabled { cursor: default; }
+.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
+.dot.passed { background: var(--ok); }
+.dot.failed { background: var(--err); }
+.dot.skipped { background: var(--muted); }
+.name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
+.suite { color: var(--muted); font-size: 13px; }
+.part::before { content: "›"; margin-right: 6px; color: var(--muted); }
+.meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.tag { border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
+.detail { padding: 4px 16px 18px 16px; border-top: 1px solid var(--border); }
+.detail h4 {
+  margin: 18px 0 8px;
+  font-size: 11px;
+  font-weight: 620;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.detail h4:first-child { margin-top: 14px; }
+.count { background: var(--border); color: var(--muted); border-radius: 999px; padding: 0 6px; font-size: 10px; letter-spacing: 0; }
+pre.err {
+  margin: 0;
+  padding: 12px 14px;
+  background: color-mix(in srgb, var(--err) 8%, var(--bg));
+  border: 1px solid color-mix(in srgb, var(--err) 25%, var(--border));
+  border-radius: 8px;
+  color: var(--text);
+  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.kv { margin: 0; display: flex; flex-direction: column; gap: 4px; }
+.kv > div { display: flex; gap: 10px; font-size: 13px; }
+.kv dt { color: var(--muted); min-width: 48px; }
+.kv dd { margin: 0; }
+.wrap { word-break: break-all; }
+.shot { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
+.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.log li {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: 6px;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.log li:nth-child(odd) { background: color-mix(in srgb, var(--text) 3%, transparent); }
+.log .txt { flex: 1; min-width: 0; word-break: break-word; }
+.log .kind, .log .code, .log .verb {
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 5px;
+  font-size: 11px;
+  background: var(--border);
+  color: var(--muted);
+}
+.log li.is-error .kind { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
+.log li.is-warn .kind { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
+.log .code.ok { color: var(--ok); }
+.log .code.warn { color: var(--warn); }
+.log .code.err { color: var(--err); }
+/* Reuses the .log row layout; only the pass-specific parts are added. */
+.checks .method { color: var(--ok); }
+.checks .target { flex: none; color: var(--muted); font-size: 11px; }
+.log .fail { color: var(--err); font-size: 11px; }
+.note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
+.note code { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.empty { color: var(--muted); }
+@media (max-width: 640px) {
+  body { padding: 24px 14px 60px; }
+  .cards { grid-template-columns: repeat(2, 1fr); }
+  .meta time { display: none; }
+}
+@media print {
+  body { padding: 0; background: #fff; }
+  .filters { display: none; }
+  .test { break-inside: avoid; box-shadow: none; }
+  .detail[hidden] { display: block; }
+}
+`;
+const SCRIPT = `
+// Status filter and row expansion. Kept inline so the report needs no assets
+// and works offline from a CI artifact.
+(function () {
+  var buttons = Array.prototype.slice.call(document.querySelectorAll('.filter'))
+  var tests = Array.prototype.slice.call(document.querySelectorAll('.test'))
+
+  function apply(filter) {
+    tests.forEach(function (test) {
+      test.hidden = filter !== 'all' && test.dataset.status !== filter
+    })
+    buttons.forEach(function (button) {
+      var active = button.dataset.filter === filter
+      button.classList.toggle('is-active', active)
+      button.setAttribute('aria-pressed', String(active))
+    })
+    if (history.replaceState) {
+      history.replaceState(null, '', filter === 'all' ? location.pathname + location.search : '#' + filter)
+    }
+  }
+
+  function setExpanded(test, open) {
+    var row = test.querySelector('.row')
+    var detail = test.querySelector('.detail')
+    if (!row || !detail) return
+    row.setAttribute('aria-expanded', String(open))
+    detail.hidden = !open
+  }
+
+  buttons.forEach(function (button) {
+    button.addEventListener('click', function () {
+      apply(button.dataset.filter)
+    })
+  })
+
+  tests.forEach(function (test) {
+    var row = test.querySelector('.row')
+    if (!row) return
+    row.addEventListener('click', function () {
+      setExpanded(test, row.getAttribute('aria-expanded') !== 'true')
+    })
+  })
+
+  // Deep links: #failed filters to failures, #expand-all opens every detail.
+  // Both make a report shareable in a way a screenshot cannot be.
+  var wanted = location.hash.slice(1)
+  if (['all', 'passed', 'failed', 'skipped'].indexOf(wanted) !== -1) {
+    apply(wanted)
+  } else if (wanted === 'expand-all') {
+    tests.forEach(function (test) {
+      setExpanded(test, true)
+    })
+  }
+})()
+`;
+//# sourceMappingURL=HtmlReport.js.map