feedback1 final: the loadout screen's background layer draws again (pointed out in PR #14)

css/screens/loadout.css: `.lo > * { position: relative }` (one class, a later rule) overrode `.lo__bg { position:
absolute }`, so the mint glow / grid layer was a 0-px flex item and never rendered. `.lo > :where(:not(.lo__bg))`
keeps the one-class specificity for every other layer and never matches the background.

Checked in headless Chrome at 1920x1080 and 844x390 (touch): the layer now covers the overlay (0 px tall before),
every other box of the screen is unchanged, no console errors. Tests: test/ui/loadout.test.js (the cascade; fails on
the old rule), opt-in test/ui/loadout.e2e.test.js (the layer's box and stacking at both sizes). DESIGN §21.25 credits
PR #14 and PR #10 (crossOrigin on the two new Image() loads); CHANGELOG 0.1.1 lines for both.
This commit is contained in:
sganggs committed 2026-10-03 19:17:27 +08:00
1 parent 2dba6da598
commit e7d957b27c
5 files changed
+42 -2

No files matched your search

+13
View File
@@ -300,6 +300,19 @@ test('untimed phases show no countdown: the "无倒计时" placeholder of Countd
assert.ok(/'无倒计时'/.test(fn) || /return null/.test(fn), 'Countdown marks (or skips) the untimed state');
});
test('the background layer (.lo__bg: mint glow + grid) keeps position: absolute — no later rule of the same specificity overrides it (PR #14)', () => {
const css = readFileSync(path.join(ROOT, 'public/css/screens/loadout.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '');
assert.match(css, /\.lo__bg\s*\{[^}]*position:\s*absolute;/);
// `.lo > *` (one class, after .lo__bg) used to set position: relative on it, a 0-px flex item that never drew
assert.ok(!/\.lo\s*>\s*\*\s*\{[^}]*position/.test(css), 'no universal child rule setting position');
assert.match(css, /\.lo > :where\(:not\(\.lo__bg\)\) \{ position: relative; \}/, 'the other layers still stack above it, at one class of specificity');
const after = css.slice(css.indexOf('.lo__bg'));
for (const m of after.matchAll(/([^{}]+)\{([^}]*)\}/g)) {
if (!/\.lo__bg\b/.test(m[1]) || /:not\(\.lo__bg\)/.test(m[1])) continue;
for (const v of m[2].matchAll(/position:\s*([a-z-]+)/g)) assert.equal(v[1], 'absolute', `${m[1].trim()} changes the layer's position`);
}
});
// ---- review fixes (adversarial review of the loadout workstream) -------------------------------------------------------
/** A net whose replies are released by hand (the socket is ordered: replies come back in request order). */