forked from 27hrs/dsh-long-skin
269 lines
18 KiB
JavaScript
269 lines
18 KiB
JavaScript
import assert from "node:assert/strict";
|
|
import { constants } from "node:fs";
|
|
import { access, readFile } from "node:fs/promises";
|
|
import { fileURLToPath } from "node:url";
|
|
import { inflateSync } from "node:zlib";
|
|
import { build } from "esbuild";
|
|
import { chromium } from "playwright-core";
|
|
|
|
// Self-contained host contracts; native Desktop acceptance remains manual.
|
|
const projectRoot = fileURLToPath(new URL("../", import.meta.url));
|
|
const packageId = "@leon___/dsh-client-liang-intensity-skin";
|
|
const viewport = { width: 1100, height: 700 };
|
|
const css = await readFile(new URL("../src/client/skin.css", import.meta.url), "utf8");
|
|
const compiled = await build({ absWorkingDir: projectRoot, entryPoints: ["src/client/appearance.ts"],
|
|
bundle: true, write: false, format: "iife", globalName: "LiangAppearance", platform: "browser", target: "es2022" });
|
|
|
|
async function chromeExecutable() {
|
|
const explicit = process.env.CHROME_PATH;
|
|
const candidates = explicit ? [explicit] : [
|
|
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
|
|
"/Applications/Chromium.app/Contents/MacOS/Chromium",
|
|
"/usr/bin/google-chrome", "/usr/bin/google-chrome-stable", "/usr/bin/chromium",
|
|
"/usr/bin/chromium-browser", "/opt/google/chrome/chrome",
|
|
];
|
|
for (const candidate of candidates) {
|
|
try { await access(candidate, constants.X_OK); return candidate; }
|
|
catch { /* Use an existing local browser, never download one. */ }
|
|
}
|
|
throw new Error(`Chrome was not found. Set CHROME_PATH to an installed Chrome/Chromium executable. Checked: ${candidates.join(", ")}`);
|
|
}
|
|
|
|
const portrait = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="rgb(32,208,96)"/></svg>')}`;
|
|
function fixture({ desktop = false, top = 0, windows = false, mode = "compatibility" } = {}) {
|
|
return `<!doctype html><html lang="zh-CN" ${desktop ? `data-platform="${windows ? "win32" : "darwin"}"` : ""} ${windows ? 'data-windows-titlebar=""' : ""}>
|
|
<head><meta charset="utf-8"><style>
|
|
* { box-sizing: border-box; transition: none !important; animation: none !important; }
|
|
html, body { margin: 0; min-height: 100vh; }
|
|
body { --dsw-alias-bg-base: rgb(240,244,248); --dsw-specific-sidebar-fill: rgb(11,29,49);
|
|
--liang-page: rgb(240,244,248); --liang-bg-base: rgb(0 0 0 / 25%); --liang-portrait-opacity: 1;
|
|
--liang-sidebar: rgb(11,29,49); --liang-ink: rgb(20,25,30); --liang-secondary: rgb(55,60,65);
|
|
--liang-border: rgb(100,110,120); --liang-layer-1: white; --dsh-desktop-frame-height: ${top}px;
|
|
background: rgb(240,244,248); }
|
|
#root { position: ${desktop ? "fixed" : "static"}; ${desktop ? `inset: ${top}px 0 0;` : ""}
|
|
height: ${desktop ? `calc(100vh - ${top}px)` : "100vh"}; z-index: auto; background: var(--dsw-alias-bg-base); }
|
|
.fixture_frame { display: flex; height: 100%; ${windows ? "background: var(--dsw-specific-sidebar-fill);" : ""} }
|
|
.fixture_sidebarCol { flex: 0 0 200px; background: var(--dsw-specific-sidebar-fill); }
|
|
.fixture_centerCol { flex: 1; background: var(--dsw-alias-bg-base); }
|
|
#caption { position: fixed; inset: 0 0 auto; height: ${top}px; background: rgb(90,40,80); }
|
|
#portal { position: fixed; right: 30px; top: 85px; width: 150px; height: 50px; border: 0;
|
|
background: rgb(140,60,180); color: white; }
|
|
#appearance-host { position: absolute; top: ${top + 155}px; left: 225px; width: 620px; }
|
|
.fixture_group { margin-bottom: 8px; } .fixture_group > div { display: flex; gap: 4px; }
|
|
.native-choice { padding: 16px; flex: 1; }
|
|
</style><style id="liang-styles">${css}</style></head>
|
|
<body ${desktop ? `data-dsh-desktop-mode="${mode}"` : ""}>
|
|
<div class="liang-skin-backdrop" data-media="sequence" aria-hidden="true"><img class="liang-skin-sequence-frame" alt="" src="${portrait}"></div>
|
|
<div id="root"><div class="fixture_frame"><aside class="fixture_sidebarCol"></aside><main class="fixture_centerCol"></main></div></div>
|
|
<div id="caption"></div><div id="appearance-host"></div><button id="portal" type="button">Native portal</button>
|
|
</body></html>`;
|
|
}
|
|
|
|
async function prepare(context, options = {}) {
|
|
const page = await context.newPage();
|
|
if (options.viewport) await page.setViewportSize(options.viewport);
|
|
const errors = [];
|
|
page.on("pageerror", error => errors.push(error.message));
|
|
await page.setContent(fixture(options));
|
|
await page.addScriptTag({ content: compiled.outputFiles[0].text });
|
|
await page.evaluate(({ packageId, enabled }) => {
|
|
let snapshot = { enabled };
|
|
const listeners = new Set();
|
|
const calls = [];
|
|
let releaseChoice, holdNextChoice = false, failNextChoice = false;
|
|
let dispose = () => {};
|
|
const publish = patch => {
|
|
snapshot = { ...snapshot, ...patch };
|
|
if (snapshot.enabled) document.body.dataset.liangSkin = "on";
|
|
else delete document.body.dataset.liangSkin;
|
|
for (const listener of listeners) listener();
|
|
};
|
|
const scope = {
|
|
getSnapshot: () => snapshot,
|
|
subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener); },
|
|
};
|
|
const presenter = {
|
|
async choose(value) {
|
|
calls.push(["choose", value]);
|
|
if (holdNextChoice) { holdNextChoice = false; await new Promise(resolve => { releaseChoice = resolve; }); }
|
|
if (failNextChoice) { failNextChoice = false; throw new Error("fixture choice rejected"); }
|
|
publish({ enabled: value });
|
|
},
|
|
};
|
|
const markup = hash => `<section class="fixture_group ${hash}_group extra-group"><div class="layout-row ${hash}_cubeRow extra-row" id="native-row">${["light", "dark", "system"].map(theme => `<button type="button" class="native-choice extra-button ${hash}_themeCube" data-theme="${theme}">${theme}</button>`).join("")}</div></section>`;
|
|
const connectNative = () => {
|
|
for (const button of document.querySelectorAll("#native-row > button[data-theme]")) {
|
|
button.addEventListener("click", () => { window.fixture.nativeClicks++; window.fixture.nativeTheme = button.dataset.theme; });
|
|
}
|
|
};
|
|
window.fixture = {
|
|
calls, nativeClicks: 0, nativeTheme: null, portalClicks: 0,
|
|
snapshot: () => ({ ...snapshot }), listenerCount: () => listeners.size,
|
|
install(hash = "_8HJdBW") {
|
|
document.querySelector("#appearance-host").innerHTML =
|
|
'<section class="fixture_group other_group"><div class="other_cubeRow" id="unrelated"><button>one</button><button>two</button><button>three</button></div></section>' +
|
|
'<section class="fixture_group nested_group"><div class="nested_cubeRow" id="nested-unrelated"><span><button class="nested_themeCube">one</button><button class="nested_themeCube">two</button><button class="nested_themeCube">three</button></span></div></section>' + markup(hash);
|
|
connectNative();
|
|
dispose = window.LiangAppearance.installLiangAppearanceButton(scope, presenter, packageId);
|
|
},
|
|
rebuild(hash = "_newHash42") {
|
|
document.querySelector("#native-row").parentElement.outerHTML = markup(hash); connectNative();
|
|
},
|
|
removeRow() { document.querySelector("#native-row").parentElement.remove(); },
|
|
restoreRow(hash = "_restored") {
|
|
document.querySelector("#appearance-host").insertAdjacentHTML("beforeend", markup(hash)); connectNative();
|
|
},
|
|
dispose() { dispose(); }, setEnabled(value) { publish({ enabled: value }); },
|
|
holdChoice() { holdNextChoice = true; }, releaseChoice() { releaseChoice?.(); },
|
|
rejectChoice() { failNextChoice = true; },
|
|
};
|
|
document.querySelector("#portal").addEventListener("click", () => window.fixture.portalClicks++);
|
|
publish({});
|
|
}, { packageId, enabled: options.enabled ?? true });
|
|
await page.locator(".liang-skin-sequence-frame").evaluate(image => image.decode());
|
|
return { page, errors };
|
|
}
|
|
|
|
// For the first pixel of a 1x1 PNG, every PNG filter's predictors are zero.
|
|
// Real rendered pixels catch opaque host layers that computed z-index misses.
|
|
async function pixelAt(page, x, y) {
|
|
const png = await page.screenshot({ clip: { x, y, width: 1, height: 1 }, animations: "disabled" });
|
|
assert.equal(png.readUInt32BE(16), 1); assert.equal(png.readUInt32BE(20), 1);
|
|
assert.equal(png[24], 8, "Expected an 8-bit screenshot");
|
|
assert.ok(png[25] === 2 || png[25] === 6, "Expected an RGB/RGBA screenshot");
|
|
const chunks = [];
|
|
for (let offset = 8; offset < png.length;) {
|
|
const length = png.readUInt32BE(offset);
|
|
if (png.toString("ascii", offset + 4, offset + 8) === "IDAT") chunks.push(png.subarray(offset + 8, offset + 8 + length));
|
|
offset += length + 12;
|
|
}
|
|
return [...inflateSync(Buffer.concat(chunks)).subarray(1, 4)];
|
|
}
|
|
function closeColor(actual, expected, label) {
|
|
assert.ok(actual.every((channel, i) => Math.abs(channel - expected[i]) <= 1), `${label}: expected ${expected}, received ${actual}`);
|
|
}
|
|
|
|
async function assertLayout(page, options, enabled = true) {
|
|
const size = page.viewportSize();
|
|
const result = await page.evaluate(() => {
|
|
const root = document.querySelector("#root"), backdrop = document.querySelector(".liang-skin-backdrop");
|
|
const box = element => { const rect = element.getBoundingClientRect(); return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }; };
|
|
return { root: box(root), rootPosition: getComputedStyle(root).position, rootZ: getComputedStyle(root).zIndex,
|
|
backdrop: box(backdrop), portrait: box(backdrop.querySelector("img")), backdropZ: getComputedStyle(backdrop).zIndex, isolation: getComputedStyle(document.body).isolation,
|
|
bgBase: getComputedStyle(document.body).getPropertyValue("--dsw-alias-bg-base").trim(),
|
|
frameColor: getComputedStyle(document.querySelector(".fixture_frame")).backgroundColor };
|
|
});
|
|
assert.equal(result.rootPosition, options.desktop ? "fixed" : "static", "The host owns root positioning");
|
|
assert.equal(result.rootZ, "auto", "The skin must not raise the root above native portals");
|
|
const bounds = { x: 0, y: options.top ?? 0, width: size.width, height: size.height - (options.top ?? 0) };
|
|
assert.deepEqual(result.root, bounds);
|
|
if (enabled) {
|
|
assert.equal(result.isolation, "isolate"); assert.equal(result.backdropZ, "-1");
|
|
assert.equal(result.bgBase, "transparent", "Base surfaces must not apply a second portrait mask");
|
|
assert.deepEqual(result.backdrop, bounds);
|
|
assert.equal(result.portrait.height, bounds.height, "Portrait follows the background container height");
|
|
closeColor(await pixelAt(page, size.width - 30, 430), [24, 156, 72], "Portrait visible with exactly one 25% mask");
|
|
if (options.windows) assert.equal(result.frameColor, "rgba(0, 0, 0, 0)", "Only the Windows outer frame becomes transparent");
|
|
} else {
|
|
assert.equal(result.isolation, "auto", "Skin-off restores native stacking");
|
|
assert.equal(result.bgBase, "rgb(240,244,248)");
|
|
closeColor(await pixelAt(page, size.width - 30, 430), [240, 244, 248], "Skin-off native background");
|
|
if (options.windows) assert.equal(result.frameColor, "rgb(11, 29, 49)");
|
|
}
|
|
closeColor(await pixelAt(page, 100, 430), [11, 29, 49], "Sidebar keeps its fill");
|
|
if ((options.top ?? 0) > 0) closeColor(await pixelAt(page, 500, 5), [90, 40, 80], "Native titlebar remains painted");
|
|
await page.locator("#portal").click();
|
|
assert.equal(await page.evaluate(() => window.fixture.portalClicks), enabled ? 1 : 2, "Native body portal remains clickable");
|
|
}
|
|
|
|
async function appearanceChecks(page, hash) {
|
|
await page.evaluate(hash => window.fixture.install(hash), hash);
|
|
const custom = page.locator("#native-row > .liang-appearance-choice");
|
|
await custom.waitFor();
|
|
assert.equal(await page.locator(".liang-appearance-choice").count(), 1);
|
|
assert.equal(await page.locator("#unrelated .liang-appearance-choice, #nested-unrelated .liang-appearance-choice").count(), 0);
|
|
assert.equal(await custom.getAttribute("data-plugin"), packageId);
|
|
assert.equal(await custom.getAttribute("aria-pressed"), "true");
|
|
assert.equal(await page.locator(".liang-appearance-binding, input[role=switch]").count(), 0,
|
|
"The imperative appearance extension must not draw its own binding switch");
|
|
for (const theme of ["light", "dark", "system"]) {
|
|
await page.locator(`[data-theme="${theme}"]`).click();
|
|
await page.waitForFunction(() => !window.fixture.snapshot().enabled);
|
|
assert.equal(await page.locator(".liang-appearance-binding").count(), 0);
|
|
assert.equal(await custom.getAttribute("aria-pressed"), "false");
|
|
assert.equal(await page.evaluate(() => window.fixture.nativeTheme), theme);
|
|
await custom.click(); await page.waitForFunction(() => window.fixture.snapshot().enabled);
|
|
}
|
|
assert.equal(await page.evaluate(() => window.fixture.nativeClicks), 3, "Native theme handlers still run");
|
|
await page.evaluate(() => {
|
|
window.oldNative = document.querySelector('[data-theme="light"]');
|
|
window.oldCustom = document.querySelector(".liang-appearance-choice");
|
|
window.fixture.rebuild();
|
|
});
|
|
await page.locator("#native-row._newHash42_cubeRow > .liang-appearance-choice").waitFor();
|
|
assert.equal(await page.locator(".liang-appearance-choice").count(), 1, "DOM reconstruction produces one control");
|
|
const beforeStaleClicks = await page.evaluate(() => window.fixture.calls.length);
|
|
await page.evaluate(() => { window.oldNative.click(); window.oldCustom.click(); });
|
|
assert.equal(await page.evaluate(() => window.fixture.calls.length), beforeStaleClicks, "Replaced nodes lose plugin listeners");
|
|
await page.locator('[data-theme="dark"]').click(); await page.waitForFunction(() => !window.fixture.snapshot().enabled);
|
|
await custom.click(); await page.waitForFunction(() => window.fixture.snapshot().enabled);
|
|
await page.evaluate(() => window.fixture.removeRow());
|
|
await page.waitForFunction(() => document.querySelector(".liang-appearance-choice") === null);
|
|
await page.evaluate(() => window.fixture.restoreRow()); await custom.waitFor();
|
|
await page.evaluate(() => window.fixture.rejectChoice()); await page.locator('[data-theme="light"]').click();
|
|
await page.waitForFunction(() => !document.querySelector(".liang-appearance-choice").disabled);
|
|
assert.equal(await custom.getAttribute("aria-pressed"), "true", "Rejected preference preserves skin state");
|
|
await page.evaluate(() => window.fixture.holdChoice()); await page.locator('[data-theme="light"]').click();
|
|
assert.equal(await custom.isDisabled(), true, "Outstanding choices disable injected controls");
|
|
await page.evaluate(() => {
|
|
window.oldCustom = document.querySelector(".liang-appearance-choice");
|
|
window.fixture.dispose(); window.fixture.dispose(); window.fixture.releaseChoice();
|
|
});
|
|
await page.waitForFunction(() => !window.fixture.snapshot().enabled);
|
|
assert.equal(await page.locator(".liang-appearance-choice, .liang-appearance-binding").count(), 0, "Late choice cannot resurrect disposed controls");
|
|
assert.equal(await page.evaluate(() => window.fixture.listenerCount()), 0);
|
|
const beforeDisposedClicks = await page.evaluate(() => window.fixture.calls.length);
|
|
await page.evaluate(() => {
|
|
window.oldCustom.click(); document.querySelector('[data-theme="dark"]').click();
|
|
document.querySelector("#appearance-host").append(document.createElement("span"));
|
|
});
|
|
await page.evaluate(() => new Promise(resolve => requestAnimationFrame(resolve)));
|
|
assert.equal(await page.evaluate(() => window.fixture.calls.length), beforeDisposedClicks);
|
|
assert.equal(await page.locator(".liang-appearance-choice, .liang-appearance-binding").count(), 0);
|
|
}
|
|
|
|
const browser = await chromium.launch({ executablePath: await chromeExecutable(), headless: true });
|
|
try {
|
|
const context = await browser.newContext({ viewport, reducedMotion: "reduce", deviceScaleFactor: 1 });
|
|
await context.route("**/*", route => route.abort()); // No network needed by the fixture.
|
|
const cases = [
|
|
{ name: "Web static root" }, { name: "Desktop fixed top 0", desktop: true, top: 0 },
|
|
{ name: "Windows fixed top 36", desktop: true, windows: true, top: 36 },
|
|
{ name: "Windows extended top 40", desktop: true, windows: true, top: 40, mode: "extended" },
|
|
{ name: "macOS extended top 36", desktop: true, top: 36, mode: "extended" },
|
|
{ name: "macOS fixed top 40", desktop: true, top: 40 },
|
|
{ name: "Compact Desktop", desktop: true, windows: true, top: 36, viewport: { width: 800, height: 600 } },
|
|
{ name: "Large Web", viewport: { width: 1800, height: 1300 } },
|
|
];
|
|
for (const options of cases) {
|
|
const { page, errors } = await prepare(context, options);
|
|
await assertLayout(page, options); await page.evaluate(() => window.fixture.setEnabled(false));
|
|
await assertLayout(page, options, false); assert.deepEqual(errors, [], `${options.name}: browser errors`);
|
|
await page.close(); console.log(`PASS ${options.name}: backdrop, host geometry, native portal, skin off`);
|
|
}
|
|
for (const hash of ["_8HJdBW", "_currentHash89"]) {
|
|
const { page, errors } = await prepare(context); await appearanceChecks(page, hash);
|
|
assert.deepEqual(errors, [], `${hash}: browser errors`); await page.close();
|
|
console.log(`PASS appearance ${hash}: multi-class discovery, choices, DOM rebuild, disposal race`);
|
|
}
|
|
const first = await prepare(context), second = await prepare(context, { desktop: true, windows: true, top: 40 });
|
|
await first.page.evaluate(() => window.fixture.install()); await second.page.evaluate(() => window.fixture.install("_otherWindow"));
|
|
await first.page.locator('[data-theme="light"]').click(); await first.page.waitForFunction(() => !window.fixture.snapshot().enabled);
|
|
assert.equal(await second.page.evaluate(() => window.fixture.snapshot().enabled), true);
|
|
closeColor(await pixelAt(first.page, 1070, 430), [240, 244, 248], "First window skin off");
|
|
closeColor(await pixelAt(second.page, 1070, 430), [24, 156, 72], "Second window remains visible");
|
|
assert.deepEqual([...first.errors, ...second.errors], []); await context.close();
|
|
console.log("PASS independent windows: host geometry and appearance state stay isolated");
|
|
console.log("Client compatibility browser checks passed (11 scenarios). Native Desktop validation remains manual.");
|
|
} finally { await browser.close(); }
|