/home/mrjunejune/zenbu: mrjunejune/test/theme_and_webp_test.js annotate

annotate mrjunejune/test/theme_and_webp_test.js @ 259:667156fcd3e3

Add dev-only cyberpunk JRPG page

author	MrJuneJune <me@mrjunejune.com>
date	Wed, 05 Aug 2026 09:19:41 -0700
parents	60a876c4587a
children	1f9877b637e9

rev	line source
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1 const assert = require('node:assert/strict');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	2 const fs = require('node:fs');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	3 const net = require('node:net');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	4 const path = require('node:path');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	5 const { spawn } = require('node:child_process');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	6
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	7 const RUNFILES = process.env.JS_BINARY__RUNFILES;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 const WORKSPACE = process.env.JS_BINARY__WORKSPACE;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	9 let port;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	10 let baseUrl;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	11 const playwrightPath = path.join(
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	12 RUNFILES,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	13 WORKSPACE,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 'hg-web/e2e/node_modules/playwright-core',
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	15 );
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	16 const { chromium } = require(playwrightPath);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	17
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	18 function stopProcess(child) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 if (!child \|\| child.exitCode !== null) return Promise.resolve();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	20 child.kill('SIGTERM');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	21 return new Promise(resolve => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	22 const timer = setTimeout(() => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	23 if (child.exitCode === null) child.kill('SIGKILL');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	24 }, 3000);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	25 child.once('exit', () => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	26 clearTimeout(timer);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	27 resolve();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	28 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	29 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	30 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	31
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	32 async function waitForServer(child, logs) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	33 const deadline = Date.now() + 15000;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	34 while (Date.now() < deadline) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	35 if (child.exitCode !== null) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	36 throw new Error(`Server exited with ${child.exitCode}\n${logs.join('')}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 try {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 const response = await fetch(baseUrl);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	40 if (response.ok) return;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	41 } catch {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	42 // Keep waiting for startup.
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	43 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	44 await new Promise(resolve => setTimeout(resolve, 100));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	46 throw new Error(`Server startup timed out\n${logs.join('')}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	47 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	48
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	49 function listFiles(root) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 const files = [];
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 for (const entry of fs.readdirSync(root, { withFileTypes: true })) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	52 const absolute = path.join(root, entry.name);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	53 if (entry.isDirectory()) files.push(...listFiles(absolute));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	54 else files.push(absolute);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	55 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	56 return files;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	57 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	58
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	59 function primitiveOwnershipViolations(source) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	60 const violations = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	61 const stack = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	62 const voidElements = new Set([
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	63 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	64 'meta', 'param', 'source', 'track', 'wbr',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	65 ]);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	66 const ownerMap = {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	67 button: new Set(['zen-button']),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	68 select: new Set(['zen-field', 'zen-native-select', 'zen-select']),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	69 textarea: new Set(['zen-field', 'zen-textarea']),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	70 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	71
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	72 for (const token of source.matchAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	73 /<!--[\s\S]?-->\|<\/?([a-zA-Z][\w-])\b([^>]*)>/g,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	74 )) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	75 if (!token[1]) continue;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	76 const name = token[1].toLowerCase();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	77 if (token[0].startsWith('</')) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	78 while (stack.length) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	79 if (stack.pop() === name) break;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	80 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	81 continue;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	82 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	83
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	84 let owners = ownerMap[name];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	85 if (name === 'input') {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	86 const type = /\btype\s=\s["']?([^"'\s>]+)/i.exec(token[2])?.[1]
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	87 ?.toLowerCase() \|\| 'text';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	88 if (type === 'checkbox') {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	89 owners = new Set(['zen-checkbox', 'zen-field', 'zen-switch']);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	90 } else if (type === 'radio') {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	91 owners = new Set(['zen-field', 'zen-radio-group']);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	92 } else if (type === 'range') {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	93 owners = new Set(['zen-field', 'zen-slider']);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	94 } else if (type === 'date') {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	95 owners = new Set(['zen-calendar', 'zen-date-picker', 'zen-field']);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	96 } else {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	97 owners = new Set([
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	98 'zen-combobox',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	99 'zen-command',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	100 'zen-field',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	101 'zen-input',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	102 'zen-input-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	103 'zen-input-otp',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	104 ]);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	105 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	106 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	107 if (owners) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	108 const matchingOwners = stack.filter(ancestor => owners.has(ancestor));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	109 if (matchingOwners.length !== 1) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	110 violations.push({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	111 control: name,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	112 owners: matchingOwners,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	113 source: token[0],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	114 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	115 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	116 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	117
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	118 if (!voidElements.has(name) && !token[0].endsWith('/>')) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	119 stack.push(name);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	120 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	121 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	122 return violations;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	123 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	124
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 async function sampleTheme(browser, theme) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	126 const context = await browser.newContext({ colorScheme: 'dark' });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 await context.addInitScript(value => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	128 localStorage.setItem('theme-preference', value);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	129 }, theme);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	130 const page = await context.newPage();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	131 const errors = [];
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	132 page.on('pageerror', error => errors.push(`pageerror: ${error.message}`));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 page.on('console', message => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	134 if (message.type() === 'error') errors.push(`console: ${message.text()}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	136 page.on('requestfailed', request => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	137 errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText \|\| ''}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	138 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 page.on('response', response => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	140 if (response.status() >= 400) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	141 errors.push(`response: ${response.status()} ${response.url()}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	142 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	143 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	144
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	145 await page.goto(baseUrl, { waitUntil: 'networkidle' });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	146 await page.waitForFunction(() => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	147 const canvas = document.querySelector('#background');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	148 if (!canvas) return false;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	149 const data = canvas.getContext('2d').getImageData(
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	150 0,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	151 0,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	152 canvas.width,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	153 canvas.height,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	154 ).data;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 for (let index = 3; index < data.length; index += 4) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	156 if (data[index] >= 20) return true;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	157 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	158 return false;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	160
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	161 const sample = await page.evaluate(() => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	162 const canvas = document.querySelector('#background');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	163 const data = canvas.getContext('2d').getImageData(
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	164 0,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	165 0,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	166 canvas.width,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	167 canvas.height,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	168 ).data;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	169 let count = 0;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 let luminance = 0;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	171 for (let index = 0; index < data.length; index += 4) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 if (data[index + 3] < 20) continue;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	173 count++;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	174 luminance +=
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	175 data[index] * 0.2126 +
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	176 data[index + 1] * 0.7152 +
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	177 data[index + 2] * 0.0722;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	178 }
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	179 const channels = value => value.match(/\d+(?:\.\d+)?/g)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	180 .slice(0, 3)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	181 .map(Number);
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	182 const colorLuminance = value => {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	183 const converted = channels(value).map(channel => {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	184 const normalized = channel / 255;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	185 return normalized <= 0.04045
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	186 ? normalized / 12.92
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	187 : ((normalized + 0.055) / 1.055) ** 2.4;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	188 });
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	189 return converted[0] * 0.2126 +
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	190 converted[1] * 0.7152 +
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	191 converted[2] * 0.0722;
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	192 };
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	193 const bodyStyle = getComputedStyle(document.body);
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	194 const themeButtonStyle = getComputedStyle(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	195 document.querySelector('#themeToggle'),
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	196 );
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	197 const foreground = colorLuminance(bodyStyle.color);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	198 const contrastProbe = document.createElement('span');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	199 contrastProbe.style.background = 'var(--zen-color-surface)';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	200 document.body.append(contrastProbe);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	201 const background = colorLuminance(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	202 getComputedStyle(contrastProbe).backgroundColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	203 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	204 contrastProbe.remove();
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	205 return {
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	206 backgroundRepeat: bodyStyle.backgroundRepeat,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	207 backgroundSize: bodyStyle.backgroundSize,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	208 bodyCoversViewport: document.body.getBoundingClientRect().height >=
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	209 innerHeight,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	210 componentReady: Boolean(customElements.get('zen-button')),
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	211 count,
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	212 fontFamily: getComputedStyle(document.body).fontFamily,
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	213 headerPaws: document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	214 'header [data-zen-link-decoration]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	215 ).length,
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	216 luminance: count ? luminance / count : 0,
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	217 textContrast: (Math.max(foreground, background) + 0.05) /
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	218 (Math.min(foreground, background) + 0.05),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	219 rootTheme: document.documentElement.dataset.zenTheme \|\| 'auto',
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	220 enhancedLinks: document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	221 'zen-link[effect="paw"] > a > zen-icon[name="paw"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	222 ).length,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	223 links: document.querySelectorAll('a').length,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	224 pawLinks: [...document.querySelectorAll('a')].filter(link =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	225 !link.closest('zen-button') &&
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	226 link.dataset.zenLinkEffect !== 'none'
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	227 ).length,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	228 mainBackground: getComputedStyle(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	229 document.querySelector('main'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	230 ).backgroundColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	231 themeButtonBackground: themeButtonStyle.backgroundColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	232 themeButtonBorder: themeButtonStyle.borderTopWidth,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	233 themeButtonShadow: themeButtonStyle.boxShadow,
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	234 themeLabel: document.querySelector('#themeName')?.textContent,
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	235 };
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	236 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	237
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	238 if (errors.length) throw new Error(`${theme}\n${errors.join('\n')}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	239 await context.close();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	240 return sample;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	241 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	242
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	243 async function testThemeCycle(browser) {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	244 const context = await browser.newContext({ colorScheme: 'light' });
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	245 const page = await context.newPage();
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	246 await page.goto(baseUrl, { waitUntil: 'networkidle' });
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	247 const expected = ['paper', 'ink', 'playful', 'auto'];
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	248 for (const theme of expected) {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	249 await page.locator('#themeToggle').click();
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	250 assert.equal(
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	251 await page.evaluate(() =>
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	252 document.documentElement.dataset.zenTheme \|\| 'auto'
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	253 ),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	254 theme,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	255 );
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	256 assert.equal(
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	257 await page.evaluate(() => localStorage.getItem('theme-preference')),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	258 theme,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	259 );
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	260 }
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	261 await context.close();
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	262 }
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	263
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	264 async function testPlainField(browser) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	265 const page = await browser.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	266 await page.goto(`${baseUrl}/tools/markdown_to_html`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	267 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	268 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	269 await page.waitForFunction(() => customElements.get('zen-field'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	270 const state = await page.locator('zen-field[appearance="plain"]').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	271 field => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	272 const label = field.querySelector('label');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	273 const textarea = field.querySelector('textarea');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	274 const probe = document.createElement('span');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	275 probe.style.border = '1px solid var(--accent)';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	276 document.body.append(probe);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	277 const accent = getComputedStyle(probe).borderColor;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	278 probe.remove();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	279 textarea.focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	280 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	281 borderColor: getComputedStyle(textarea).borderColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	282 display: getComputedStyle(field).display,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	283 labelFor: label.htmlFor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	284 accent,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	285 textareaId: textarea.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	286 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	287 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	288 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	289 assert.deepEqual(state, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	290 accent: state.borderColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	291 borderColor: state.borderColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	292 display: 'contents',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	293 labelFor: 'input',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	294 textareaId: 'input',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	295 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	296 await page.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	297 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	298
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	299 async function testButtonScale(browser) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	300 const page = await browser.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	301 for (const route of [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	302 '/talk',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	303 '/notes/login',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	304 '/tools/hls_player',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	305 '/tools/latex_editor',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	306 '/tools/markdown_to_html',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	307 '/tools/file_converter',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	308 '/offline.html',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	309 ]) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	310 await page.goto(`${baseUrl}${route}`, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	311 await page.waitForFunction(() => customElements.get('zen-button'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	312 const controls = await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	313 'zen-button[size] > :is(button, a):not(#themeToggle)',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	314 ).evaluateAll(elements => elements.map(control => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	315 const host = control.parentElement;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	316 const style = getComputedStyle(control);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	317 const hostStyle = getComputedStyle(host);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	318 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	319 height: control.getBoundingClientRect().height,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	320 minimum: Number.parseFloat(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	321 hostStyle.getPropertyValue('--zenbu-control-height'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	322 ) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	323 paddingBlock: style.paddingBlockStart,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	324 paddingVariable: Number.parseFloat(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	325 hostStyle.getPropertyValue('--zenbu-control-padding-block'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	326 ) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	327 size: host.getAttribute('size'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	328 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	329 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	330 assert.ok(controls.length > 0, route);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	331 for (const control of controls) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	332 assert.match(control.size, /^(?:xs\|sm\|md\|lg\|xl)$/);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	333 assert.ok(control.height >= control.minimum - 1, JSON.stringify(control));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	334 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	335 Math.abs(Number.parseFloat(control.paddingBlock) -
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	336 control.paddingVariable) < 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	337 JSON.stringify(control),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	338 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	339 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	340 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	341 await page.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	342 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	343
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	344 async function testDynamicButtonOwnership(browser) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	345 const page = await browser.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	346 await page.goto(baseUrl, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	347 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	348 window.dispatchEvent(new Event('beforeinstallprompt', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	349 cancelable: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	350 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	351 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	352 const state = await page.locator('#pwa-install-btn').evaluate(button => ({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	353 ownerCount: button.closest('zen-button') ? 1 : 0,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	354 appearance: button.closest('zen-button')?.getAttribute('appearance'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	355 size: button.closest('zen-button')?.getAttribute('size'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	356 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	357 assert.deepEqual(state, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	358 appearance: 'plain',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	359 ownerCount: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	360 size: 'md',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	361 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	362 await page.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	363 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	364
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	365 async function testResumePrint(browser) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	366 const page = await browser.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	367 await page.emulateMedia({ media: 'print' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	368 await page.goto(`${baseUrl}/resume`, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	369 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	370 await page.locator('.info > a[href="/public/resume.pdf"]').isVisible(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	371 false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	372 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	373 await page.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	374 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	375
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	376 async function testJrpgPage(browser) {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	377 const context = await browser.newContext({
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	378 colorScheme: 'light',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	379 viewport: { width: 1280, height: 900 },
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	380 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	381 const page = await context.newPage();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	382 const errors = [];
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	383 page.on('pageerror', error => errors.push(`pageerror: ${error.message}`));
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	384 page.on('console', message => {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	385 if (message.type() === 'error') errors.push(`console: ${message.text()}`);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	386 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	387 page.on('requestfailed', request => {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	388 errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText \|\| ''}`);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	389 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	390 page.on('response', response => {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	391 if (response.status() >= 400) {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	392 errors.push(`response: ${response.status()} ${response.url()}`);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	393 }
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	394 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	395
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	396 await page.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	397 await page.waitForFunction(() =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	398 customElements.get('mjj-jrpg-composer') &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	399 customElements.get('mjj-jrpg-menu') &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	400 customElements.get('mjj-jrpg-chat') &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	401 customElements.get('mjj-jrpg-preview')
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	402 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	403 await page.evaluate(() => document.fonts.ready);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	404 const desktop = await page.evaluate(() => {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	405 const scene = document.querySelector('.jrpg-scene').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	406 const utility = document.querySelector('.jrpg-utility').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	407 const composer = document.querySelector('mjj-jrpg-composer')
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	408 .getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	409 const menu = document.querySelector('mjj-jrpg-menu').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	410 const character = document.querySelector('[data-character]');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	411 const shell = document.querySelector('.jrpg-shell').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	412 const main = document.querySelector('.jrpg-main').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	413 const colorProbe = document.createElement('span');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	414 colorProbe.style.background = 'var(--zenbu-sys-color-surface-page)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	415 colorProbe.style.color =
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	416 'var(--zenbu-sys-color-action-primary-background)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	417 colorProbe.style.borderColor = 'var(--zenbu-sys-color-focus-outer)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	418 const surfaceProbe = document.createElement('span');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	419 surfaceProbe.style.background =
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	420 'var(--zenbu-sys-color-surface-default)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	421 surfaceProbe.style.color = 'var(--zenbu-sys-color-text-primary)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	422 surfaceProbe.style.borderColor = 'var(--zenbu-sys-color-border-strong)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	423 const sunkenProbe = document.createElement('span');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	424 sunkenProbe.style.background =
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	425 'var(--zenbu-sys-color-surface-sunken)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	426 const panelProbe = document.createElement('span');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	427 panelProbe.style.background = 'var(--mjj-jrpg-panel-strong)';
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	428 document.body.append(colorProbe, surfaceProbe, sunkenProbe, panelProbe);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	429 const probeStyle = getComputedStyle(colorProbe);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	430 const surfaceProbeStyle = getComputedStyle(surfaceProbe);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	431 const sunkenProbeStyle = getComputedStyle(sunkenProbe);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	432 const panelProbeStyle = getComputedStyle(panelProbe);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	433 const computedFonts = [
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	434 document.body,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	435 document.querySelector('.jrpg-brand h1'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	436 document.querySelector('.jrpg-message p'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	437 document.querySelector('#jrpg-message'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	438 document.querySelector('.jrpg-composer button'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	439 ].map(element => getComputedStyle(element).fontFamily);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	440 const nonPixelText = [document.body, ...document.body.querySelectorAll('*')]
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	441 .filter(element => [...element.childNodes].some(node =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	442 node.nodeType === Node.TEXT_NODE && node.textContent.trim()
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	443 ))
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	444 .filter(element =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	445 getComputedStyle(element).fontFamily !== '"Pixel Mplus"'
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	446 )
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	447 .map(element => element.localName);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	448 const pageStyle = getComputedStyle(document.body);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	449 const submitStyle = getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	450 document.querySelector('.jrpg-composer button'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	451 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	452 const colors = {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	453 canvas: probeStyle.backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	454 conversation: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	455 document.querySelector('mjj-jrpg-chat'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	456 ).backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	457 conversationBorder: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	458 document.querySelector('mjj-jrpg-chat'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	459 ).borderTopColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	460 conversationPanel: panelProbeStyle.backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	461 conversationText: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	462 document.querySelector('.jrpg-message p'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	463 ).color,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	464 focus: probeStyle.borderColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	465 frame: surfaceProbeStyle.borderColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	466 menu: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	467 document.querySelector('mjj-jrpg-menu'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	468 ).backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	469 page: pageStyle.backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	470 primary: probeStyle.color,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	471 primaryText: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	472 document.querySelector('.jrpg-preview-panel h2'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	473 ).color,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	474 sunken: sunkenProbeStyle.backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	475 surface: surfaceProbeStyle.backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	476 submit: submitStyle.backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	477 text: surfaceProbeStyle.color,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	478 utility: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	479 document.querySelector('.jrpg-utility'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	480 ).backgroundColor,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	481 };
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	482 colorProbe.remove();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	483 surfaceProbe.remove();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	484 sunkenProbe.remove();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	485 panelProbe.remove();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	486 return {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	487 art: getComputedStyle(document.querySelector('.jrpg-scene')).backgroundImage,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	488 characterLoaded: character.complete && character.naturalWidth > 0,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	489 colors,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	490 composerBelowScene: composer.top >= scene.bottom,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	491 fillsViewport: shell.left === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	492 shell.top === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	493 Math.abs(shell.right - innerWidth) < 1 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	494 Math.abs(shell.bottom - innerHeight) < 1 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	495 main.left === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	496 main.top === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	497 Math.abs(main.right - innerWidth) < 1 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	498 Math.abs(main.bottom - innerHeight) < 1,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	499 fonts: computedFonts,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	500 fontLoaded: [...document.fonts].some(font =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	501 font.family.replaceAll('"', '') === 'Pixel Mplus' &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	502 font.status === 'loaded'
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	503 ),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	504 menuRightOfComposer: menu.left >= composer.right,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	505 noOverflow: document.documentElement.scrollWidth <= innerWidth,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	506 nonPixelText,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	507 theme: document.documentElement.dataset.zenTheme,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	508 utilityRightOfScene: utility.left >= scene.right,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	509 };
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	510 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	511 assert.match(desktop.art, /bar-ink\.webp/);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	512 assert.equal(desktop.characterLoaded, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	513 assert.equal(desktop.colors.page, desktop.colors.canvas);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	514 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	515 desktop.colors.conversation,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	516 desktop.colors.conversationPanel,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	517 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	518 assert.equal(desktop.colors.conversationBorder, desktop.colors.frame);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	519 assert.equal(desktop.colors.conversationText, desktop.colors.text);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	520 assert.equal(desktop.colors.menu, desktop.colors.sunken);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	521 assert.equal(desktop.colors.primaryText, desktop.colors.primary);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	522 assert.equal(desktop.colors.submit, desktop.colors.primary);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	523 assert.equal(desktop.colors.utility, desktop.colors.surface);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	524 assert.equal(desktop.composerBelowScene, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	525 assert.equal(desktop.fillsViewport, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	526 assert.ok(desktop.fonts.every(font => font === '"Pixel Mplus"'));
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	527 assert.equal(desktop.fontLoaded, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	528 assert.equal(desktop.menuRightOfComposer, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	529 assert.equal(desktop.noOverflow, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	530 assert.deepEqual(desktop.nonPixelText, []);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	531 assert.equal(desktop.theme, 'cyberpunk');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	532 assert.equal(desktop.utilityRightOfScene, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	533 await page.locator('.jrpg-brand a').focus();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	534 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	535 await page.locator('.jrpg-brand a').evaluate(element =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	536 getComputedStyle(element).outlineColor
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	537 ),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	538 desktop.colors.focus,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	539 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	540 await page.locator('.jrpg-composer button').focus();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	541 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	542 await page.locator('.jrpg-composer button').evaluate(element =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	543 getComputedStyle(element).outlineColor
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	544 ),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	545 desktop.colors.focus,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	546 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	547 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	548 await page.locator('meta[name="theme-color"]').first().getAttribute('content'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	549 desktop.colors.canvas,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	550 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	551
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	552 await page.getByRole('button', { name: 'Tools', exact: true }).click();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	553 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	554 await page.locator('[data-preview-title]').textContent(),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	555 'Tools',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	556 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	557 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	558 await page.locator('[data-preview-link]').getAttribute('href'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	559 '/tools',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	560 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	561 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	562 await page.getByRole('button', { name: 'Tools', exact: true })
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	563 .getAttribute('aria-pressed'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	564 'true',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	565 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	566
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	567 await page.getByRole('button', { name: /Inspect/ }).click();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	568 await page.locator('.jrpg-preview-dialog dialog[open]').waitFor();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	569 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	570 await page.locator('[data-dialog-title]').textContent(),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	571 'Tools',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	572 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	573 await page.getByRole('button', {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	574 name: 'Close destination details',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	575 }).click();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	576
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	577 await page.locator('#jrpg-message').fill('Where should I begin?');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	578 await page.locator('#jrpg-message').press('Enter');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	579 await page.locator('.jrpg-message[data-speaker="June"]').last().waitFor();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	580 await page.getByRole('button', { name: 'Blogs', exact: true }).click();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	581 assert.equal(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	582 await page.locator('.jrpg-message[data-speaker="June"] p').last()
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	583 .textContent(),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	584 'Where should I begin?',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	585 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	586 await page.waitForFunction(() =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	587 document.querySelector('mjj-jrpg-character')?.getAttribute('state') ===
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	588 'default' &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	589 document.querySelectorAll('.jrpg-message[data-speaker="Epi"]').length > 1
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	590 );
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	591 assert.equal(await page.locator('#jrpg-message').isEnabled(), true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	592
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	593 await page.waitForFunction(() => navigator.serviceWorker?.controller);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	594 await page.reload({ waitUntil: 'networkidle' });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	595 await page.evaluate(() => document.fonts.ready);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	596 const controlledReload = await page.evaluate(() => {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	597 const shell = document.querySelector('.jrpg-shell').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	598 return {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	599 art: getComputedStyle(document.querySelector('.jrpg-scene'))
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	600 .backgroundImage,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	601 fillsViewport: shell.left === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	602 shell.top === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	603 Math.abs(shell.right - innerWidth) < 1 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	604 Math.abs(shell.bottom - innerHeight) < 1,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	605 fontLoaded: document.fonts.check('16px "Pixel Mplus"'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	606 fontFamily: getComputedStyle(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	607 document.querySelector('.jrpg-brand h1'),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	608 ).fontFamily,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	609 theme: document.documentElement.dataset.zenTheme,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	610 };
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	611 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	612 assert.match(controlledReload.art, /bar-ink\.webp/);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	613 assert.equal(controlledReload.fillsViewport, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	614 assert.equal(controlledReload.fontLoaded, true);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	615 assert.equal(controlledReload.fontFamily, '"Pixel Mplus"');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	616 assert.equal(controlledReload.theme, 'cyberpunk');
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	617 assert.deepEqual(errors, []);
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	618 await context.close();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	619
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	620 const mobileContext = await browser.newContext({
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	621 colorScheme: 'light',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	622 viewport: { width: 360, height: 640 },
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	623 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	624 const mobilePage = await mobileContext.newPage();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	625 await mobilePage.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	626 const mobile = await mobilePage.evaluate(() => {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	627 const scene = document.querySelector('.jrpg-scene').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	628 const utility = document.querySelector('.jrpg-utility').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	629 const shell = document.querySelector('.jrpg-shell').getBoundingClientRect();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	630 const menuButtons = [...document.querySelectorAll(
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	631 'mjj-jrpg-menu button[data-preview]',
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	632 )];
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	633 return {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	634 buttonsFit: menuButtons.every(button =>
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	635 button.getBoundingClientRect().right <= innerWidth
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	636 ),
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	637 fillsWidth: shell.left === 0 &&
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	638 Math.abs(shell.right - innerWidth) < 1,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	639 initialScroll: scrollY,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	640 noOverflow: document.documentElement.scrollWidth <= innerWidth,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	641 utilityBelowScene: utility.top >= scene.bottom,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	642 };
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	643 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	644 assert.deepEqual(mobile, {
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	645 buttonsFit: true,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	646 fillsWidth: true,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	647 initialScroll: 0,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	648 noOverflow: true,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	649 utilityBelowScene: true,
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	650 });
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	651 await mobileContext.close();
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	652 }
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	653
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	654 async function testHlsPlayer(browser, siteRoot) {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	655 const page = await browser.newPage();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	656 const errors = [];
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	657 const mediaRequests = [];
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	658 let testingExpectedFailure = false;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	659 let testingExpectedReload = false;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	660 page.on('pageerror', error => errors.push(`pageerror: ${error.message}`));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	661 page.on('console', message => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	662 if (message.type() !== 'error') return;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	663 if (testingExpectedFailure &&
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	664 message.text().startsWith('Failed to load resource:')) return;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	665 errors.push(`console: ${message.text()}`);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	666 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	667 page.on('requestfailed', request => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	668 if (testingExpectedReload &&
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	669 request.failure()?.errorText === 'net::ERR_ABORTED') return;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	670 errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText \|\| ''}`);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	671 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	672 page.on('request', request => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	673 if (/\.(?:m3u8\|m4s\|mp4)(?:\?\|$)/.test(request.url())) {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	674 mediaRequests.push(request.url());
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	675 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	676 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	677
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	678 const playlistResponse = await fetch(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	679 `${baseUrl}/public/hls-sample/master.m3u8`,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	680 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	681 assert.equal(playlistResponse.status, 200);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	682 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	683 playlistResponse.headers.get('content-type') \|\| '',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	684 /^application\/vnd\.apple\.mpegurl/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	685 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	686 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	687 await playlistResponse.text(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	688 /#EXT-X-STREAM-INF:.*CODECS="vp09\.00\.10\.08,opus"/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	689 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	690
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	691 const variantResponse = await fetch(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	692 `${baseUrl}/public/hls-sample/vp9-stream.m3u8`,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	693 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	694 assert.equal(variantResponse.status, 200);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	695 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	696 await variantResponse.text(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	697 /#EXT-X-MAP:URI="vp9-init\.mp4"/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	698 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	699
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	700 const segmentResponse = await fetch(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	701 `${baseUrl}/public/hls-sample/vp9-segment000.m4s`,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	702 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	703 assert.equal(segmentResponse.status, 200);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	704 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	705 segmentResponse.headers.get('content-type') \|\| '',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	706 /^video\/iso\.segment/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	707 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	708 const transportStreamResponse = await fetch(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	709 `${baseUrl}/public/hls-sample/h264-ts-segment000.ts`,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	710 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	711 assert.equal(transportStreamResponse.status, 200);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	712 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	713 transportStreamResponse.headers.get('content-type') \|\| '',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	714 /^video\/mp2t/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	715 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	716 assert.ok((await transportStreamResponse.arrayBuffer()).byteLength > 0);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	717
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	718 await page.goto(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	719 `${baseUrl}/tools/hls_player?url=${encodeURIComponent('/public/hls-sample/master.m3u8')}`,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	720 {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	721 waitUntil: 'networkidle',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	722 },
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	723 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	724 await page.getByRole('button', { name: 'Sample', exact: true }).waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	725 assert.equal(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	726 await page.locator('#hlsUrl').evaluate(input => input.defaultValue),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	727 '/public/hls-sample/h264-ts-stream.m3u8',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	728 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	729 await page.waitForFunction(() => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	730 const status = document.querySelector('#hlsStatus');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	731 return status?.dataset.state === 'ready' \|\|
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	732 status?.dataset.state === 'error';
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	733 }, null, { timeout: 15000 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	734 const terminalState = await page.locator('#hlsStatus').getAttribute('data-state');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	735 if (terminalState !== 'ready') {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	736 throw new Error(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	737 `HLS player failed: ${await page.locator('#hlsStatus').textContent()}\n${errors.join('\n')}`,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	738 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	739 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	740 assert.match(await page.locator('#hlsStatus').textContent(), /Stream ready/);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	741 assert.equal(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	742 await page.locator('[data-detail="mode"]').textContent(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	743 'hls.js',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	744 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	745 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	746 await page.locator('[data-detail="segments"]').textContent(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	747 /Managed by hls\.js\|adaptive levels/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	748 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	749 await page.waitForFunction(() => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	750 const video = document.querySelector('#hlsVideo');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	751 return video.readyState >= HTMLMediaElement.HAVE_METADATA &&
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	752 Number.isFinite(video.duration) &&
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	753 video.duration >= 14;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	754 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	755 const firstFrame = await page.locator('#hlsVideo').evaluate(video => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	756 const canvas = document.createElement('canvas');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	757 canvas.width = video.videoWidth;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	758 canvas.height = video.videoHeight;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	759 const context = canvas.getContext('2d');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	760 context.drawImage(video, 0, 0);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	761 const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	762 let total = 0;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	763 for (let index = 0; index < pixels.length; index += 4) {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	764 total += pixels[index] + pixels[index + 1] + pixels[index + 2];
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	765 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	766 return total / (canvas.width * canvas.height * 3);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	767 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	768 assert.ok(firstFrame > 10, `Initial HLS frame is black: ${firstFrame}`);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	769 await page.locator('#hlsVideo').evaluate(video => video.play());
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	770 await page.waitForFunction(() => document.querySelector('#hlsVideo').currentTime > 0.2);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	771 await page.locator('#hlsVideo').evaluate(video => video.pause());
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	772 assert.ok(mediaRequests.some(url => url.endsWith('/hls-sample/master.m3u8')));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	773 assert.ok(mediaRequests.some(url => url.endsWith('-stream.m3u8')));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	774 assert.ok(mediaRequests.some(url => url.endsWith('-init.mp4')));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	775 assert.ok(mediaRequests.some(url => /-segment\d+\.m4s$/.test(url)));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	776
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	777 await page.evaluate(() => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	778 window.hlsPlayer.hls.trigger(window.Hls.Events.ERROR, {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	779 fatal: true,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	780 type: window.Hls.ErrorTypes.MEDIA_ERROR,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	781 details: 'testRuntimeFailure',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	782 error: new Error('runtime segment failed'),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	783 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	784 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	785 await page.locator('#hlsStatus[data-state="error"]').waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	786 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	787 await page.locator('#hlsStatus').textContent(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	788 /runtime segment failed/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	789 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	790 await page.locator('#hlsUrl').fill('/public/hls-sample/master.m3u8');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	791 await page.getByRole('button', { name: 'Load', exact: true }).click();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	792 await page.locator('#hlsStatus[data-state="ready"]').waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	793
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	794 let delayedSegment = true;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	795 await page.route('**/hls-sample/vp9-segment000.m4s', async route => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	796 if (delayedSegment) {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	797 delayedSegment = false;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	798 await new Promise(resolve => setTimeout(resolve, 250));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	799 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	800 await route.continue();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	801 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	802 testingExpectedReload = true;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	803 await page.locator('#hlsUrl').fill('/public/hls-sample/master.m3u8');
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	804 await page.getByRole('button', { name: 'Load', exact: true }).click();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	805 await page.waitForTimeout(25);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	806 await page.getByRole('button', { name: 'Load', exact: true }).click();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	807 await page.locator('#hlsStatus[data-state="ready"]').waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	808 testingExpectedReload = false;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	809 assert.match(await page.locator('#hlsStatus').textContent(), /Stream ready/);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	810
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	811 await page.evaluate(() => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	812 window.__hlsObjectUrls = { created: [], revoked: [] };
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	813 const createObjectURL = URL.createObjectURL.bind(URL);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	814 const revokeObjectURL = URL.revokeObjectURL.bind(URL);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	815 URL.createObjectURL = value => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	816 const url = createObjectURL(value);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	817 window.__hlsObjectUrls.created.push(url);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	818 return url;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	819 };
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	820 URL.revokeObjectURL = url => {
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	821 window.__hlsObjectUrls.revoked.push(url);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	822 revokeObjectURL(url);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	823 };
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	824 });
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	825 const localFiles = listFiles(path.join(siteRoot, 'public/hls-sample'));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	826 await page.locator('#hlsFiles').setInputFiles(localFiles);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	827 await page.waitForFunction(() =>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	828 document.querySelector('#hlsUrl')?.value.startsWith('Local: ')
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	829 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	830 await page.locator('#hlsStatus[data-state="ready"]').waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	831 assert.match(await page.locator('#hlsUrl').inputValue(), /^Local: /);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	832 assert.equal(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	833 await page.locator('[data-detail="mode"]').textContent(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	834 'hls.js',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	835 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	836 await page.locator('#hlsVideo').evaluate(video => video.play());
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	837 await page.waitForFunction(() => document.querySelector('#hlsVideo').currentTime > 0.3);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	838 await page.locator('#hlsVideo').evaluate(video => video.pause());
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	839 const incompleteLocalFiles = localFiles.filter(file =>
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	840 file.endsWith('master.m3u8') \|\|
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	841 file.endsWith('vp9-stream.m3u8')
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	842 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	843 await page.locator('#hlsFiles').setInputFiles(incompleteLocalFiles);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	844 await page.locator('#hlsStatus[data-state="error"]').waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	845 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	846 await page.locator('#hlsStatus').textContent(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	847 /Local HLS file is missing/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	848 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	849 const objectUrlCounts = await page.evaluate(() => ({
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	850 created: window.__hlsObjectUrls.created.length,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	851 revoked: window.__hlsObjectUrls.revoked.length,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	852 }));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	853 assert.ok(objectUrlCounts.created > 10, JSON.stringify(objectUrlCounts));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	854 assert.ok(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	855 objectUrlCounts.revoked >= objectUrlCounts.created,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	856 JSON.stringify(objectUrlCounts),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	857 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	858
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	859 await page.route('**/invalid.m3u8', route => route.fulfill({
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	860 status: 404,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	861 body: 'not found',
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	862 }));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	863 testingExpectedFailure = true;
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	864 await page.locator('#hlsUrl').fill(`${baseUrl}/invalid.m3u8`);
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	865 await page.getByRole('button', { name: 'Load', exact: true }).click();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	866 await page.locator('#hlsStatus[data-state="error"]').waitFor();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	867 assert.match(
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	868 await page.locator('#hlsStatus').textContent(),
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	869 /404\|manifestLoadError\|Playlist request failed/,
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	870 );
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	871
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	872 if (errors.length) throw new Error(errors.join('\n'));
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	873 await page.close();
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	874 }
543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	875
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	876 function findFreePort() {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	877 return new Promise((resolve, reject) => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	878 const socket = net.createServer();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	879 socket.once('error', reject);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	880 socket.listen(0, '127.0.0.1', () => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	881 const address = socket.address();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	882 socket.close(error => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	883 if (error) reject(error);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	884 else resolve(String(address.port));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	885 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	886 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	887 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	888 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	889
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	890 (async () => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	891 assert.ok(RUNFILES);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	892 assert.ok(WORKSPACE);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	893 const runfilesWorkspace = path.join(RUNFILES, WORKSPACE);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	894 const serverBinary = path.join(
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	895 runfilesWorkspace,
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	896 'mrjunejune/mrjunejune_server_debug',
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	897 );
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	898 const siteRoot = path.join(runfilesWorkspace, 'mrjunejune/src');
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	899 const chromiumPath = path.resolve(process.env.CHROMIUM_PATH);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	900 const serverLogs = [];
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	901 let server;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	902 let browser;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	903
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	904 try {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	905 port = await findFreePort();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	906 baseUrl = `http://127.0.0.1:${port}`;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	907 const pngFiles = listFiles(siteRoot).filter(file => file.endsWith('.png'));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	908 assert.deepEqual(pngFiles, [], `PNG files leaked into runfiles: ${pngFiles}`);
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	909 for (const file of listFiles(siteRoot).filter(file =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	910 file.endsWith('.html')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	911 )) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	912 const source = fs.readFileSync(file, 'utf8');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	913 for (const primitive of source.matchAll(/<zen-button\b([^>]*)>/g)) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	914 assert.match(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	915 primitive[1],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	916 /\bsize=["'](?:xs\|sm\|md\|lg\|xl)["']/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	917 `${path.relative(siteRoot, file)} has an unsized zen-button`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	918 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	919 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	920 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	921 primitiveOwnershipViolations(source),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	922 [],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	923 `${path.relative(siteRoot, file)} violates primitive ownership`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	924 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	925 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	926 for (const file of listFiles(siteRoot).filter(file =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	927 /\.(?:css\|html\|js)$/.test(file) &&
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	928 !file.includes(`${path.sep}public${path.sep}design-system${path.sep}`)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	929 )) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	930 const source = fs.readFileSync(file, 'utf8');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	931 assert.doesNotMatch(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	932 source,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	933 /var\(\s*--zen-/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	934 `${path.relative(siteRoot, file)} consumes a deprecated token`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	935 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	936 }
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	937
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	938 server = spawn(serverBinary, [], {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	939 cwd: runfilesWorkspace,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	940 env: { ...process.env, MRJUNEJUNE_PORT: port },
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	941 stdio: ['ignore', 'pipe', 'pipe'],
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	942 });
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	943 server.stdout.on('data', chunk => serverLogs.push(chunk.toString()));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	944 server.stderr.on('data', chunk => serverLogs.push(chunk.toString()));
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	945 await waitForServer(server, serverLogs);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	946
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	947 const home = await (await fetch(baseUrl)).text();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	948 const dogGame = await (
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	949 await fetch(`${baseUrl}/public/dog-game.js`)
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	950 ).text();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	951 const manifest = await (
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	952 await fetch(`${baseUrl}/public/manifest.json`)
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	953 ).text();
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	954 const serviceWorker = await (
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	955 await fetch(`${baseUrl}/sw.js`)
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	956 ).text();
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	957 for (const source of [home, dogGame, manifest]) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	958 assert.doesNotMatch(source, /\.png(?:["')]\|$)/i);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	959 }
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	960 assert.match(serviceWorker, /v9-dev-page-split/);
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	961 assert.match(
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	962 await (
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	963 await fetch(`${baseUrl}/public/pwa-register.js`)
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	964 ).text(),
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	965 /register\('\/sw\.js', \{ scope: '\/' \}\)/,
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	966 );
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	967 assert.ok(serviceWorker.includes("startsWith('/tools/hls_player')"));
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	968 assert.ok(serviceWorker.includes("url.hostname === 'localhost'"));
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	969 assert.ok(serviceWorker.includes("url.hostname === '127.0.0.1'"));
667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	970 assert.ok(!serviceWorker.includes("startsWith('/jrpg')"));
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	971
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	972 for (const asset of [
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	973 'sprite_shiba0.webp',
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	974 'dog-treat.webp',
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	975 'start-large.webp',
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	976 'icon-192.webp',
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	977 'vscode.webp',
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	978 ]) {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	979 const response = await fetch(`${baseUrl}/public/${asset}`);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	980 assert.equal(response.status, 200, asset);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	981 assert.ok((await response.arrayBuffer()).byteLength > 0, asset);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	982 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	983
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	984 browser = await chromium.launch({
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	985 executablePath: chromiumPath,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	986 headless: true,
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	987 args: ['--no-sandbox'],
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	988 });
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	989 const paper = await sampleTheme(browser, 'paper');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	990 const ink = await sampleTheme(browser, 'ink');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	991 const playful = await sampleTheme(browser, 'playful');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	992 const automatic = await sampleTheme(browser, 'auto');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	993 assert.equal(paper.rootTheme, 'paper');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	994 assert.equal(ink.rootTheme, 'ink');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	995 assert.equal(playful.rootTheme, 'playful');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	996 assert.equal(automatic.rootTheme, 'auto');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	997 assert.equal(paper.themeLabel, 'Paper');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	998 assert.equal(ink.themeLabel, 'Ink');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	999 assert.equal(playful.themeLabel, 'Playful');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1000 assert.equal(automatic.themeLabel, 'Auto');
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1001 for (const sample of [paper, ink, playful, automatic]) {
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1002 assert.ok(sample.count > 0);
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1003 assert.equal(sample.backgroundRepeat, 'no-repeat');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1004 assert.equal(sample.backgroundSize, 'cover');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1005 assert.equal(sample.bodyCoversViewport, true);
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1006 assert.equal(sample.componentReady, true);
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1007 assert.ok(sample.links > 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1008 assert.equal(sample.enhancedLinks, sample.pawLinks);
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1009 assert.match(sample.fontFamily, /More/);
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1010 assert.equal(sample.headerPaws, 0);
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1011 assert.ok(sample.textContrast >= 4.5, JSON.stringify(sample));
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1012 assert.equal(sample.mainBackground, 'rgba(0, 0, 0, 0)');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1013 assert.equal(sample.themeButtonBackground, 'rgba(0, 0, 0, 0)');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1014 assert.equal(sample.themeButtonBorder, '0px');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1015 assert.equal(sample.themeButtonShadow, 'none');
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1016 }
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1017 assert.ok(paper.luminance < 175, JSON.stringify(paper));
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1018 assert.ok(playful.luminance < 175, JSON.stringify(playful));
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1019 assert.ok(ink.luminance > 200, JSON.stringify(ink));
30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 242 diff changeset	1020 await testThemeCycle(browser);
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1021 await testPlainField(browser);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1022 await testButtonScale(browser);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1023 await testDynamicButtonOwnership(browser);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	1024 await testResumePrint(browser);
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	1025 await testJrpgPage(browser);
242 543df0fe7168 [tools] Add full HLS player support MrJuneJune <me@mrjunejune.com> parents: 241 diff changeset	1026 await testHlsPlayer(browser, siteRoot);
241 9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1027 } finally {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1028 if (browser) await browser.close();
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1029 await stopProcess(server);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1030 }
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1031 })().catch(error => {
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1032 console.error(error.stack \|\| error);
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1033 process.exitCode = 1;
9c2eec61a152 [assets] Generate site images as WebP with Bazel MrJuneJune <me@mrjunejune.com> parents: diff changeset	1034 });