skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Test: give the oklch neon fixture flag and pass columns (#592)

Browse Source 
The neon-text path is browser-only, so the matrix lives in the Puppeteer suite rather than the static fixture runner.

AI-assisted (Cursor agent).

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-08-22 05:33:17 +05:00
co-authored by Cursor
parent 1b7da15b56
commit 8347d77f54
2 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/detect-antipatterns-browser.test.mjs
+9 -4
View File
@@ -221,12 +221,17 @@ describe('detectUrl — browser-only fixtures', () => {
assert.equal(contrast.length, 3, `expected exactly the 3 flag-column cases, got ${contrast.length}:\n${snippets}`);
});
it('ai-color-palette: oklch neon text on a dark ground is flagged', async () => {
it('ai-color-palette: oklch neon text flags the should-flag column only', async () => {
const f = await detectUrl(`${baseUrl}/fixtures/antipatterns/oklch-neon-text.html`, { visualContrast: false });
assert.ok(
f.some(r => r.antipattern === 'ai-color-palette' && /Cyan neon text on dark background/i.test(r.snippet || '')),
`expected cyan neon-text finding from oklch color, got: ${JSON.stringify(f.map(r => r.snippet))}`,
const neon = f.filter(r =>
r.antipattern === 'ai-color-palette' && /neon text on dark background/i.test(r.snippet || '')
);
assert.equal(
neon.length,
1,
`expected exactly 1 oklch neon-text finding, got ${neon.length}: ${JSON.stringify(f.map(r => r.snippet))}`,
);
assert.match(neon[0].snippet || '', /Cyan neon text on dark background/i);
});
it('shadowed form.id: a <form> with <input name="id"> does not crash the scan (issue #407)', async () => {
tests/fixtures/antipatterns/oklch-neon-text.html
Vendored
+51 -3
View File
@@ -7,23 +7,71 @@
<style>
:root {
--neon: oklch(0.85 0.2 195);
--muted: oklch(0.85 0.04 195);
--paper: oklch(0.9 0 0);
--ground: #050505;
--light: #f5f5f5;
}
body {
margin: 0;
padding: 32px;
background: #050505;
background: var(--ground);
font-family: system-ui, sans-serif;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
max-width: 980px;
margin: 0 auto;
}
.column {
display: grid;
gap: 14px;
}
.column > h2 {
margin: 0 0 2px;
color: var(--paper);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
p {
margin: 0;
color: var(--neon);
font-size: 18px;
}
.neon-cyan { color: var(--neon); }
.muted-cyan { color: var(--muted); }
.oklch-paper { color: var(--paper); }
.light-shell {
background: var(--light);
padding: 12px;
}
</style>
</head>
<body>
<p>Cyan neon token</p>
<main class="grid">
<section class="column" data-col="flag">
<h2>Should flag</h2>
<p class="neon-cyan">Cyan neon token</p>
</section>
<section class="column" data-col="pass">
<h2>Should pass</h2>
<p class="oklch-paper">Achromatic oklch on dark should pass</p>
<p class="muted-cyan">Muted cyan oklch on dark should pass</p>
<div class="light-shell">
<p class="neon-cyan">Cyan oklch on light ground should pass</p>
</div>
</section>
</main>
</body>
</html>