levkin.ca/scripts/test-stack-cover.mjs
ilia 7b54b47443 Fix stack cover: shared sticky line, z-index, show body only on stack.
All folders stick at --stack-reveal; higher layers paint over lower ones.
Bodies hidden until panel aligns on the stack line (no vertical list).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-20 23:23:59 -04:00

51 lines
2.2 KiB
JavaScript

import { chromium } from 'playwright';
const BASE = process.env.BASE_URL || 'http://localhost:5173';
const REVEAL = 48 + 44 * 6 + 32; // approx px
async function testCover(page, path, bodySel, getTitle) {
await page.goto(BASE + path, { waitUntil: 'networkidle' });
const results = [];
for (const y of [0, 600, 1200, 1800]) {
await page.evaluate((sy) => window.scrollTo(0, sy), y);
await page.waitForTimeout(250);
const r = await page.evaluate(({ bodySel, reveal }) => {
const bodies = [...document.querySelectorAll(bodySel)];
const stacked = bodies.filter((b) => {
const br = b.getBoundingClientRect();
return Math.abs(br.top - reveal) < 30 && br.height > 100;
});
const top = stacked.sort((a, b) => {
const az = parseInt(getComputedStyle(a.closest('.folder, .layer, .frame, .unit') || a).zIndex) || 0;
const bz = parseInt(getComputedStyle(b.closest('.folder, .layer, .frame, .unit') || b).zIndex) || 0;
return bz - az;
})[0];
const el = document.elementFromPoint(innerWidth / 2, reveal + 120);
const hit = el?.closest('.folder, .layer, .frame, .unit');
const layer = hit?.closest('[data-layer]')?.dataset?.layer ?? hit?.className?.match(/f(\d)|layer-(\d)|u(\d)/)?.[1];
return {
scrollY: scrollY,
stackedCount: stacked.length,
topZ: top ? getComputedStyle(top.closest('.folder, .layer, .frame, .unit')).zIndex : null,
hitLayer: layer,
hitText: hit?.querySelector('h1, h2, strong')?.textContent?.slice(0, 40),
};
}, { bodySel, reveal: REVEAL });
results.push(r);
}
return results;
}
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
const folder = await testCover(page, '/stack-folder/', '.folder .body', (b) => b.querySelector('h1,h2')?.textContent);
console.log('folder', JSON.stringify(folder, null, 2));
await page.screenshot({ path: '/tmp/levkin-cover-folder-1200.png' });
await page.evaluate(() => window.scrollTo(0, 1200));
await page.waitForTimeout(300);
await page.screenshot({ path: '/tmp/levkin-cover-folder-1200b.png' });
await browser.close();