Teknium
56cc2bd814
Optional skill: scroll-as-timeline landing pages on a deterministic CSS/JS engine, with interview → page grammar → signature move workflow and screenshot-based scroll verification. Engine and scripts vendored verbatim; asset generation re-anchored on image_generate with the upstream kie.ai flow kept as an optional path.
274 lines
13 KiB
JavaScript
274 lines
13 KiB
JavaScript
#!/usr/bin/env node
|
|
/**
|
|
* Worldflight rig assertions. Not a contact sheet: these are the mechanical
|
|
* claims the mode makes, checked one at a time.
|
|
*
|
|
* node lab/worldflight-assert.mjs --url http://localhost:4520
|
|
*/
|
|
import fs from "node:fs";
|
|
import path from "node:path";
|
|
import { createRequire } from "node:module";
|
|
const { chromium } = createRequire(path.join(process.cwd(), "package.json"))("playwright-core");
|
|
|
|
const argv = process.argv.slice(2);
|
|
const arg = (n, d) => { const i = argv.indexOf(n); return i > -1 && argv[i + 1] ? argv[i + 1] : d; };
|
|
const URL = arg("--url", "http://localhost:4520");
|
|
|
|
const CHROME = [
|
|
process.env.SCROLLCRAFT_CHROME,
|
|
// Windows
|
|
"C:/Program Files/Google/Chrome/Application/chrome.exe",
|
|
"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
|
|
"C:/Program Files/Microsoft/Edge/Application/msedge.exe",
|
|
// macOS
|
|
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
|
|
"/Applications/Chromium.app/Contents/MacOS/Chromium",
|
|
"/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
|
|
// Linux
|
|
"/usr/bin/google-chrome",
|
|
"/usr/bin/google-chrome-stable",
|
|
"/usr/bin/chromium",
|
|
"/usr/bin/chromium-browser",
|
|
"/snap/bin/chromium",
|
|
].find((p) => p && fs.existsSync(p));
|
|
|
|
let pass = 0, fail = 0;
|
|
const ok = (name, cond, note = "") => {
|
|
if (cond) { pass++; console.log(` PASS ${name}${note ? " " + note : ""}`); }
|
|
else { fail++; console.log(` FAIL ${name}${note ? " " + note : ""}`); }
|
|
};
|
|
|
|
const browser = await chromium.launch({ executablePath: CHROME, headless: true });
|
|
|
|
// ============================================================ desktop ======
|
|
{
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
|
|
const errs = [];
|
|
page.on("console", (m) => { if (m.type() === "error") errs.push(m.text()); });
|
|
page.on("pageerror", (e) => errs.push(String(e)));
|
|
await page.goto(URL, { waitUntil: "domcontentloaded" });
|
|
await page.waitForSelector("html.sc-ready", { timeout: 15000 });
|
|
await page.evaluate(() => document.fonts.ready);
|
|
await page.waitForTimeout(900);
|
|
|
|
const geom = await page.evaluate(() => {
|
|
const segs = [...document.querySelectorAll("[data-sc-segment]")];
|
|
const total = segs.reduce((s, el) => s + (parseFloat(el.dataset.scW) || 1.3), 0);
|
|
const spacer = document.querySelector("[data-sc-spacer]");
|
|
const stage = document.querySelector("[data-sc-world]");
|
|
return {
|
|
vh: innerHeight, total,
|
|
weights: segs.map((el) => parseFloat(el.dataset.scW) || 1.3),
|
|
spacerH: spacer.getBoundingClientRect().height,
|
|
wantH: Math.round((total + 1) * innerHeight),
|
|
docH: document.body.scrollHeight,
|
|
stagePos: getComputedStyle(stage).position,
|
|
stageRect: (({ top, left, width, height }) => ({ top, left, width, height }))(stage.getBoundingClientRect()),
|
|
copyPos: getComputedStyle(document.querySelector("[data-sc-world-copy]")).position,
|
|
seam: parseFloat(document.querySelector('[data-sc-mode="worldflight"]').dataset.scSeam),
|
|
};
|
|
});
|
|
console.log(`\nDESKTOP vh=${geom.vh} weights=[${geom.weights}] total=${geom.total}vh`);
|
|
|
|
ok("spacer height = (sum weights + 1) x vh",
|
|
Math.abs(geom.spacerH - geom.wantH) <= 1, `got ${Math.round(geom.spacerH)}px want ${geom.wantH}px`);
|
|
ok("document scroll height is the spacer",
|
|
Math.abs(geom.docH - geom.wantH) <= 2, `doc ${geom.docH}px`);
|
|
ok("stage is position:fixed and fills the viewport",
|
|
geom.stagePos === "fixed" && geom.stageRect.height === geom.vh && geom.stageRect.top === 0);
|
|
ok("copy layer is position:fixed", geom.copyPos === "fixed");
|
|
|
|
// Nothing in flow but the spacer: at any scroll position, the only static or
|
|
// relative element that extends past the fold is the spacer and its ancestors.
|
|
const flow = await page.evaluate(() => {
|
|
const bad = [];
|
|
document.querySelectorAll("body *").forEach((el) => {
|
|
const cs = getComputedStyle(el);
|
|
if (cs.position === "fixed" || cs.position === "absolute") return;
|
|
if (el.hasAttribute("data-sc-spacer") || el.hasAttribute("data-sc-mode")) return;
|
|
const r = el.getBoundingClientRect();
|
|
if (r.height > 4 && r.bottom > innerHeight + 4) {
|
|
bad.push(el.tagName + "." + (el.className || "").toString().slice(0, 30));
|
|
}
|
|
});
|
|
return bad;
|
|
});
|
|
ok("nothing in document flow but the spacer", flow.length === 0, flow.join(", "));
|
|
|
|
// ---- lerp convergence, inside one leg ----------------------------------
|
|
const seg0 = geom.weights[0];
|
|
const A = Math.round(0.10 * seg0 * geom.vh);
|
|
const B = Math.round(0.85 * seg0 * geom.vh);
|
|
await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), A);
|
|
await page.waitForTimeout(1400);
|
|
|
|
const trace = await page.evaluate(({ y }) => new Promise((res) => {
|
|
const v = document.querySelectorAll("[data-sc-segment] video")[0];
|
|
const clip = window.__sc.clips.find((c) => c.el === v);
|
|
const s = [];
|
|
scrollTo({ top: y, behavior: "instant" });
|
|
let n = 0;
|
|
(function f() {
|
|
s.push(+v.currentTime.toFixed(4));
|
|
if (++n < 70) requestAnimationFrame(f);
|
|
else res({ s, target: clip.target * (v.duration || 1), dur: v.duration, lerp: clip.lerp });
|
|
})();
|
|
}), { y: B });
|
|
|
|
const seq = trace.s;
|
|
const start = seq[0], end = seq[seq.length - 1];
|
|
const distinct = [...new Set(seq)];
|
|
const monotone = seq.every((v, i) => i === 0 || v >= seq[i - 1] - 1e-6);
|
|
const overshoot = Math.max(...seq) - trace.target;
|
|
console.log(` playhead ${start.toFixed(3)}s -> ${end.toFixed(3)}s target ${trace.target.toFixed(3)}s lerp ${trace.lerp} ${distinct.length} distinct values`);
|
|
ok("playhead is lerped, not written 1:1", distinct.length >= 4, `${distinct.length} distinct steps across 70 frames`);
|
|
ok("playhead is strictly monotone toward its target", monotone);
|
|
ok("playhead does not overshoot", overshoot <= 0.02, `max excess ${overshoot.toFixed(4)}s`);
|
|
ok("playhead converges on the target", Math.abs(end - trace.target) < 0.05,
|
|
`residual ${Math.abs(end - trace.target).toFixed(4)}s`);
|
|
ok("lerp rate is the 0.18 default", Math.abs(trace.lerp - 0.18) < 1e-9);
|
|
|
|
// ---- deadband: no seek thrash while the page is still -------------------
|
|
await page.waitForTimeout(900);
|
|
const seeks = await page.evaluate(() => new Promise((res) => {
|
|
let n = 0;
|
|
const vs = [...document.querySelectorAll("video")];
|
|
const h = () => n++;
|
|
vs.forEach((v) => v.addEventListener("seeked", h));
|
|
setTimeout(() => { vs.forEach((v) => v.removeEventListener("seeked", h)); res(n); }, 1000);
|
|
}));
|
|
ok("deadband holds: no seeks over 1s of stillness", seeks === 0, `${seeks} seeked events`);
|
|
|
|
// ---- crossfade band ----------------------------------------------------
|
|
const boundary = seg0 * geom.vh;
|
|
const half = (geom.seam / 2) * geom.vh;
|
|
const band = [];
|
|
for (let i = 0; i < 5; i++) {
|
|
const y = Math.round(boundary - half + (2 * half) * (i / 4));
|
|
await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
|
|
await page.waitForTimeout(120);
|
|
band.push(await page.evaluate(() => {
|
|
const segs = [...document.querySelectorAll("[data-sc-segment]")];
|
|
return segs.map((s) => +(parseFloat(getComputedStyle(s).opacity) || 0).toFixed(4));
|
|
}));
|
|
}
|
|
const incoming = band.map((b) => b[1]);
|
|
const outgoing = band.map((b) => b[0]);
|
|
console.log(` seam band incoming=[${incoming}] outgoing=[${outgoing}]`);
|
|
ok("incoming leg opacity is strictly monotone across the seam",
|
|
incoming.every((v, i) => i === 0 || v > incoming[i - 1]));
|
|
ok("incoming leg starts at 0 and ends at 1", incoming[0] <= 0.02 && incoming[4] >= 0.98);
|
|
// The outgoing leg must hold at full strength for the whole dissolve and only
|
|
// release once the incoming one covers it completely. A crossfade where BOTH
|
|
// sides are partly transparent shows the page ground through the middle of
|
|
// the seam, which is the flash this mode exists to remove.
|
|
ok("outgoing leg holds full opacity while the incoming one is still arriving",
|
|
incoming.every((v, i) => v >= 0.999 || outgoing[i] >= 0.999), `[${outgoing}]`);
|
|
ok("outgoing leg only releases once it is fully covered",
|
|
outgoing[4] === 0 && incoming[4] >= 0.999);
|
|
|
|
// ---- copy transform cap ------------------------------------------------
|
|
const maxT = [];
|
|
for (let i = 0; i <= 12; i++) {
|
|
const y = Math.round((geom.docH - geom.vh) * (i / 12));
|
|
await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
|
|
await page.waitForTimeout(60);
|
|
maxT.push(await page.evaluate(() => {
|
|
let m = 0;
|
|
document.querySelectorAll("[data-sc-copy]").forEach((el) => {
|
|
const t = new DOMMatrixReadOnly(getComputedStyle(el).transform);
|
|
m = Math.max(m, Math.abs(t.m42), Math.abs(t.m41));
|
|
});
|
|
return +m.toFixed(2);
|
|
}));
|
|
}
|
|
const worstT = Math.max(...maxT);
|
|
ok("copy never translates past 4vh", worstT <= geom.vh * 0.04 + 1,
|
|
`worst ${worstT}px, cap ${(geom.vh * 0.04).toFixed(0)}px`);
|
|
|
|
// ---- every leg reaches full opacity, every clip leaves its poster -------
|
|
const reach = {};
|
|
for (let i = 0; i <= 24; i++) {
|
|
const y = Math.round((geom.docH - geom.vh) * (i / 24));
|
|
await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
|
|
await page.waitForTimeout(260);
|
|
const s = await page.evaluate(() => [...document.querySelectorAll("[data-sc-segment]")].map((el, i) => ({
|
|
i, op: parseFloat(getComputedStyle(el).opacity) || 0,
|
|
painted: el.classList.contains("sc-has-clip"),
|
|
})));
|
|
s.forEach((x) => {
|
|
reach[x.i] = reach[x.i] || { op: 0, painted: false };
|
|
reach[x.i].op = Math.max(reach[x.i].op, x.op);
|
|
reach[x.i].painted = reach[x.i].painted || x.painted;
|
|
});
|
|
}
|
|
ok("every leg reaches full opacity",
|
|
Object.values(reach).every((r) => r.op >= 0.99),
|
|
Object.entries(reach).map(([i, r]) => `${i}:${r.op.toFixed(2)}`).join(" "));
|
|
ok("every leg paints a real frame (no clip stuck on poster)",
|
|
Object.values(reach).every((r) => r.painted),
|
|
Object.entries(reach).map(([i, r]) => `${i}:${r.painted ? "clip" : "POSTER"}`).join(" "));
|
|
|
|
ok("no console errors", errs.length === 0, errs.slice(0, 3).join(" | "));
|
|
await page.close();
|
|
}
|
|
|
|
// ==================================================== reduced motion =======
|
|
{
|
|
const page = await browser.newPage({
|
|
viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1, reducedMotion: "reduce",
|
|
});
|
|
const media = [];
|
|
page.on("request", (r) => { if (/\.(mp4|webm)(\?|$)/.test(r.url())) media.push(r.url()); });
|
|
await page.goto(URL, { waitUntil: "domcontentloaded" });
|
|
await page.waitForSelector("html.sc-ready", { timeout: 15000 });
|
|
await page.waitForTimeout(800);
|
|
console.log("\nREDUCED MOTION");
|
|
|
|
const rmSeen = { legs: {}, copy: {} };
|
|
for (let i = 0; i <= 20; i++) {
|
|
const h = await page.evaluate(() => document.body.scrollHeight - innerHeight);
|
|
await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), Math.round(h * (i / 20)));
|
|
await page.waitForTimeout(90);
|
|
const s = await page.evaluate(() => ({
|
|
legs: [...document.querySelectorAll("[data-sc-segment]")].map((el) => ({
|
|
op: parseFloat(getComputedStyle(el).opacity) || 0,
|
|
poster: (() => { const p = el.querySelector(".sc-world__poster"); return p ? getComputedStyle(p).transform : "none"; })(),
|
|
})),
|
|
copy: [...document.querySelectorAll("[data-sc-copy]")].map((el) => ({
|
|
t: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 24),
|
|
op: parseFloat(getComputedStyle(el).opacity) || 0,
|
|
tf: getComputedStyle(el).transform,
|
|
})),
|
|
}));
|
|
s.legs.forEach((l, k) => {
|
|
rmSeen.legs[k] = rmSeen.legs[k] || { op: 0, tf: new Set() };
|
|
rmSeen.legs[k].op = Math.max(rmSeen.legs[k].op, l.op);
|
|
rmSeen.legs[k].tf.add(l.poster);
|
|
});
|
|
s.copy.forEach((c) => {
|
|
rmSeen.copy[c.t] = rmSeen.copy[c.t] || { op: 0, tf: new Set() };
|
|
rmSeen.copy[c.t].op = Math.max(rmSeen.copy[c.t].op, c.op);
|
|
rmSeen.copy[c.t].tf.add(c.tf);
|
|
});
|
|
}
|
|
await page.waitForTimeout(500);
|
|
|
|
ok("no clip is ever fetched", media.length === 0, media.join(", "));
|
|
ok("every leg's poster still reaches full opacity",
|
|
Object.values(rmSeen.legs).every((l) => l.op >= 0.99),
|
|
Object.entries(rmSeen.legs).map(([i, l]) => `${i}:${l.op.toFixed(2)}`).join(" "));
|
|
ok("no poster transform",
|
|
Object.values(rmSeen.legs).every((l) => [...l.tf].every((t) => t === "none")));
|
|
ok("every copy block still reaches full opacity",
|
|
Object.values(rmSeen.copy).every((c) => c.op >= 0.99),
|
|
Object.entries(rmSeen.copy).map(([t, c]) => `${c.op.toFixed(2)} "${t}"`).join(" | "));
|
|
ok("no copy transform",
|
|
Object.values(rmSeen.copy).every((c) => [...c.tf].every((t) => t === "none")));
|
|
await page.close();
|
|
}
|
|
|
|
await browser.close();
|
|
console.log(`\n${pass} passed, ${fail} failed`);
|
|
process.exit(fail ? 1 : 0);
|