Field notes for the night shift
Specific authored content.
ok
',
- ].join('\n');
-
- expect(detectText(source, 'hero.astro').filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
- });
-
- test('ignores preprocessor line comments in component style blocks', () => {
- const source = [
- '',
- ].join('\n');
-
- for (const filePath of ['hero.astro', 'hero.vue', 'hero.svelte']) {
- expect(detectText(source, filePath).filter(r => r.antipattern === 'overused-font')).toHaveLength(0);
- }
- });
-
- test('still detects live font-family after a style-block line comment', () => {
- const source = [
- '',
- ].join('\n');
-
- const findings = detectText(source, 'hero.vue').filter(r => r.antipattern === 'overused-font');
- expect(findings).toHaveLength(1);
- expect(findings[0].line).toBe(3);
- });
-
- test('ignores frontmatter comments after a regex literal that contains quotes', () => {
- const source = [
- '---',
- 'const re = /["\']/;',
- '// ok
',
- ].join('\n');
-
- expect(detectText(source, 'hero.astro').filter(r => r.antipattern === 'broken-image')).toHaveLength(0);
- });
-
- test('keeps live font-family after a protocol-relative URL in SCSS', () => {
- const sources = [
- '.hero { background: url( //cdn.example.com/i.png); font-family: Inter; }',
- '.hero { background: url(#{$prefix}//cdn.example.com/i.png); font-family: Inter; }',
- ];
-
- for (const source of sources) {
- expect(detectText(source, 'hero.scss').filter(r => r.antipattern === 'overused-font')).toHaveLength(1);
- }
- expect(detectText(
- '.hero { background: url(@{prefix}//cdn.example.com/i.png); font-family: Inter; }',
- 'hero.less',
- ).filter(r => r.antipattern === 'overused-font')).toHaveLength(1);
- });
-});
-
-describe('detectText — CSS borders', () => {
- test('detects border-left shorthand', () => {
- const f = detectText('.card { border-left: 4px solid #3b82f6; }', 'test.css');
- expect(f.some(r => r.antipattern === 'side-tab')).toBe(true);
- });
-
- test('detects border-left shorthand in Sass', () => {
- const f = detectText(".card\n border-left: 4px solid #3b82f6", 'test.sass');
- expect(f.some(r => r.antipattern === 'side-tab')).toBe(true);
- });
-
- test('ignores neutral border', () => {
- const f = detectText('.card { border-left: 4px solid #e5e7eb; }', 'test.css');
- expect(f.filter(r => r.antipattern === 'side-tab')).toHaveLength(0);
- });
-
- test('skips blockquote', () => {
- const f = detectText('', 'test.html'); - expect(f.filter(r => r.antipattern === 'side-tab')).toHaveLength(0); - }); -}); - -describe('detectText — overused fonts', () => { - test('detects Inter', () => { - const f = detectText("body { font-family: 'Inter', sans-serif; }", 'test.css'); - expect(f.some(r => r.antipattern === 'overused-font')).toBe(true); - }); - - test('detects Fraunces (current AI-default monoculture)', () => { - const f = detectText("h1 { font-family: 'Fraunces', Georgia, serif; }", 'test.css'); - expect(f.some(r => r.antipattern === 'overused-font')).toBe(true); - }); - - test('detects Geist (Vercel-default monoculture)', () => { - const f = detectText("body { font-family: 'Geist', sans-serif; }", 'test.css'); - expect(f.some(r => r.antipattern === 'overused-font')).toBe(true); - }); - - test('does not flag distinctive fonts', () => { - const f = detectText("body { font-family: 'Karla', sans-serif; }", 'test.css'); - expect(f.filter(r => r.antipattern === 'overused-font')).toHaveLength(0); - }); - - test('detects overused Google Fonts css2 family after first family param', () => { - const page = pageWithGoogleFonts('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300&family=Inter:wght@400;500;600&display=swap'); - const f = detectText(page, 'index.html'); - expect(f.some(r => r.antipattern === 'overused-font' && /Inter/i.test(r.snippet))).toBe(true); - }); - - test('does not flag single-font for combined Google Fonts css2 families', () => { - const page = pageWithGoogleFonts('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300&family=Jost:wght@300;400;500&display=swap'); - const f = detectText(page, 'index.html'); - expect(f.filter(r => r.antipattern === 'single-font')).toHaveLength(0); - }); - - test('keeps legacy Google Fonts css pipe-separated families multi-font', () => { - const page = pageWithGoogleFonts('https://fonts.googleapis.com/css?family=Cormorant+Garamond|Jost&display=swap'); - const f = detectText(page, 'index.html'); - expect(f.filter(r => r.antipattern === 'single-font')).toHaveLength(0); - }); - - test('page typography parses repeated Google Fonts css2 family params', () => { - const f = pageTypographyForGoogleFonts('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300&family=Inter:wght@400;500;600&display=swap'); - expect(f.some(r => r.id === 'overused-font' && /inter/i.test(r.snippet))).toBe(true); - expect(f.filter(r => r.id === 'single-font')).toHaveLength(0); - }); -}); - -describe('detectHtml — overused fonts system stack', () => { - test('Inter before a system stack still flags overused-font', async () => { - const page = `Hello
world
`; - await withStaticFixture({ 'index.html': page }, async ({ file }) => { - const f = await detectHtml(file); - expect(f.some(r => r.antipattern === 'overused-font' && /inter/i.test(r.snippet))).toBe(true); - }); - }); - - test('checkPageTypography regex path skips Roboto in system stack', () => { - const html = `Hello
world
`; - const doc = { - styleSheets: [], - documentElement: { outerHTML: html }, - querySelectorAll() { return []; }, - }; - const win = { getComputedStyle() { return { fontSize: '16px' }; } }; - const f = checkPageTypography(doc, win); - expect(f.filter(r => r.id === 'overused-font')).toHaveLength(0); - }); -}); - -describe('detectText — flat type hierarchy', () => { - test('flags sizes too close together', () => { - const page = ''; - const f = detectText(page, 'test.html'); - expect(f.some(r => r.antipattern === 'flat-type-hierarchy')).toBe(true); - }); - - test('passes good hierarchy', () => { - const page = ''; - const f = detectText(page, 'test.html'); - expect(f.filter(r => r.antipattern === 'flat-type-hierarchy')).toHaveLength(0); - }); -}); - -// Static HTML/CSS fixture tests moved to detect-antipatterns-fixtures.test.mjs (run via node --test) - -// --------------------------------------------------------------------------- -// Full page vs partial detection -// --------------------------------------------------------------------------- - -describe('isFullPage', () => { - test('detects DOCTYPE', () => expect(isFullPage('')).toBe(true)); - test('detects ', () => expect(isFullPage('')).toBe(true)); - test('detects ', () => expect(isFullPage('')).toBe(true)); - test('rejects component/partial', () => expect(isFullPage('content')).toBe(false)); - test('rejects JSX', () => expect(isFullPage('export default function Card() { returnhi}')).toBe(false)); -}); - -describe('partials skip page-level checks', () => { - test('regex: partial with flat hierarchy is not flagged', () => { - const partial = 'text\ntext\ntext'; - const f = detectText(partial, 'card.tsx'); - expect(f.filter(r => r.antipattern === 'flat-type-hierarchy')).toHaveLength(0); - }); - - test('regex: partial with single overused font is not flagged for single-font', () => { - const partial = `text\n`.repeat(25); - const f = detectText(partial, 'card.tsx'); - expect(f.filter(r => r.antipattern === 'single-font')).toHaveLength(0); - }); - - test('regex: partial still flags border anti-patterns', () => { - const partial = 'card'; - const f = detectText(partial, 'card.tsx'); - expect(f.some(r => r.antipattern === 'side-tab')).toBe(true); - }); - - test('regex: full page with flat hierarchy IS flagged', () => { - const page = '\n' + - 'h1
\nh2
\n' + - 'p
\ns\n' + - 'sm\n'; - const f = detectText(page, 'index.html'); - expect(f.some(r => r.antipattern === 'flat-type-hierarchy')).toBe(true); - }); -}); - -describe('detectText — numeric content', () => { - test('does not infer section scaffolding from raw numeric sequences', () => { - const page = '' + - '' + - ''; - const f = detectText(page, 'test.html'); - expect(f.some(r => r.antipattern === 'numbered-section-markers')).toBe(false); - }); - - test('does not infer section scaffolding from JS source with embedded numbers', () => { - const source = ` - const shell = '
- 01 — Glassline — 03:11
' + - '- 02 — Tidal Memory — 04:08
' + - '- 03 — Pale Signal — 05:02
Preview '; - const palette = 'oklch(86% 0.07 84 / 0.08)'; - const shadow = '0 0 0 1px oklch(0% 0 0 / 0.04), 0 4px 16px oklch(0% 0 0 / 0.05), 0 1px 3px oklch(0% 0 0 / 0.06)'; - const size = '11.5px'; - const eye = ''; - const shader = 'float band = bandAt(uv.y - y, 0.05, 0.32);'; - const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; - `; - const f = detectText(source, 'live-browser.js'); - expect(f.filter(r => r.antipattern === 'numbered-section-markers')).toHaveLength(0); - }); -}); - -// --------------------------------------------------------------------------- -// Layout anti-patterns -// --------------------------------------------------------------------------- - -describe('detectHtml — layout', () => { - test('detects monotonous spacing via regex', () => { - // A page where every padding/margin is 16px - const html = '' + - ''.repeat(5) + - ''; - const f = detectText(html, 'test.html'); - expect(f.some(r => r.antipattern === 'monotonous-spacing')).toBe(true); - }); - -}); - -// --------------------------------------------------------------------------- -// Text overflow screen-reader-only handling -// --------------------------------------------------------------------------- - -describe('checkElementTextOverflowDOM', () => { - function baseTextStyle(overrides = {}) { - return { - position: 'static', - width: '160px', - height: '20px', - overflow: 'visible', - overflowX: 'visible', - overflowY: 'visible', - clipPath: 'none', - clip: 'auto', - ...overrides, - }; - } - - function mockTextElement({ - className = 'flag-overflow', - style = baseTextStyle(), - clientWidth = 24, - clientHeight = 20, - scrollWidth = 80, - rectWidth = clientWidth, - rectHeight = clientHeight, - } = {}) { - return { - tagName: 'DIV', - className, - childNodes: [{ nodeType: 3, textContent: 'A long accessible label that overflows its box' }], - parentElement: null, - clientWidth, - clientHeight, - scrollWidth, - __style: style, - getAttribute(name) { - return name === 'class' ? className : null; - }, - getBoundingClientRect() { - return { width: rectWidth, height: rectHeight }; - }, - }; - } - - function withMockComputedStyle(callback) { - const original = globalThis.getComputedStyle; - globalThis.getComputedStyle = (el) => el.__style; - try { - return callback(); - } finally { - if (original === undefined) delete globalThis.getComputedStyle; - else globalThis.getComputedStyle = original; - } - } - - test('classifies clip-path sr-only text as visually hidden', () => { - expect(isScreenReaderOnlyTextStyle(baseTextStyle({ - position: 'absolute', - width: '1px', - height: '1px', - overflow: 'hidden', - overflowX: 'hidden', - overflowY: 'hidden', - clipPath: 'inset(50%)', - }), { width: 1, height: 1 })).toBe(true); - }); - - test('classifies legacy clip rect sr-only text as visually hidden', () => { - expect(isScreenReaderOnlyTextStyle(baseTextStyle({ - position: 'absolute', - width: '1px', - height: '1px', - overflow: 'hidden', - overflowX: 'hidden', - overflowY: 'hidden', - clip: 'rect(0, 0, 0, 0)', - }), { width: 1, height: 1 })).toBe(true); - }); - - test('classifies tiny absolute overflow-hidden text as visually hidden without clip', () => { - expect(isScreenReaderOnlyTextStyle(baseTextStyle({ - position: 'absolute', - width: '1px', - height: '1px', - overflow: 'hidden', - overflowX: 'hidden', - overflowY: 'hidden', - }), { width: 1, height: 1 })).toBe(true); - }); - - test('classifies fully clipped text as visually hidden without tiny sizing', () => { - expect(isScreenReaderOnlyTextStyle(baseTextStyle({ - position: 'absolute', - width: '160px', - height: '20px', - overflow: 'visible', - clipPath: 'inset(50%)', - }), { width: 160, height: 20 })).toBe(true); - }); - - test('flags visible overflowing text', () => { - const findings = withMockComputedStyle(() => checkElementTextOverflowDOM(mockTextElement())); - - expect(findings).toHaveLength(1); - expect(findings[0].id).toBe('text-overflow'); - expect(findings[0].snippet).toContain('.flag-overflow'); - }); - - test('skips overflowing sr-only text', () => { - const srOnly = mockTextElement({ - className: 'pass-sr-only-clip-path', - style: baseTextStyle({ - position: 'absolute', - width: '1px', - height: '1px', - overflow: 'hidden', - overflowX: 'hidden', - overflowY: 'hidden', - clipPath: 'inset(50%)', - }), - clientWidth: 1, - clientHeight: 1, - scrollWidth: 240, - rectWidth: 1, - rectHeight: 1, - }); - - const findings = withMockComputedStyle(() => checkElementTextOverflowDOM(srOnly)); - - expect(findings).toHaveLength(0); - }); - - test('does not classify tiny visible text as sr-only', () => { - const style = baseTextStyle({ - position: 'absolute', - width: '1px', - height: '1px', - }); - - expect(isScreenReaderOnlyTextStyle(style, { width: 1, height: 1 })).toBe(false); - }); -}); - -// --------------------------------------------------------------------------- -// Motion anti-patterns -// --------------------------------------------------------------------------- - -describe('checkElementMotion', () => { - function mockStyle(overrides) { - return { transitionProperty: '', animationName: 'none', animationTimingFunction: '', transitionTimingFunction: '', ...overrides }; - } - - test('detects bounce animation name', () => { - const f = checkElementMotion('div', mockStyle({ animationName: 'bounce' })); - expect(f.some(r => r.id === 'bounce-easing')).toBe(true); - }); - - test('detects elastic animation name', () => { - const f = checkElementMotion('div', mockStyle({ animationName: 'elastic-in' })); - expect(f.some(r => r.id === 'bounce-easing')).toBe(true); - }); - - test('detects overshoot cubic-bezier in animation timing', () => { - const f = checkElementMotion('div', mockStyle({ - animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', - })); - expect(f.some(r => r.id === 'bounce-easing')).toBe(true); - }); - - test('detects overshoot cubic-bezier in transition timing', () => { - const f = checkElementMotion('div', mockStyle({ - transitionTimingFunction: 'cubic-bezier(0.34, 1.56, 0.64, 1)', - })); - expect(f.some(r => r.id === 'bounce-easing')).toBe(true); - }); - - test('passes standard ease-out-quart', () => { - const f = checkElementMotion('div', mockStyle({ - transitionTimingFunction: 'cubic-bezier(0.25, 1, 0.5, 1)', - })); - expect(f.filter(r => r.id === 'bounce-easing')).toHaveLength(0); - }); - - test('passes standard ease', () => { - const f = checkElementMotion('div', mockStyle({ - transitionTimingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)', - })); - expect(f.filter(r => r.id === 'bounce-easing')).toHaveLength(0); - }); - - test('detects width transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'width' })); - expect(f.some(r => r.id === 'layout-transition')).toBe(true); - }); - - test('detects height transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'height' })); - expect(f.some(r => r.id === 'layout-transition')).toBe(true); - }); - - test('detects padding transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'padding' })); - expect(f.some(r => r.id === 'layout-transition')).toBe(true); - }); - - test('detects margin transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'margin' })); - expect(f.some(r => r.id === 'layout-transition')).toBe(true); - }); - - test('detects max-height transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'max-height' })); - expect(f.some(r => r.id === 'layout-transition')).toBe(true); - }); - - test('detects layout prop among mixed transitions', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'opacity, width, color' })); - expect(f.some(r => r.id === 'layout-transition')).toBe(true); - }); - - test('passes transform transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'transform' })); - expect(f.filter(r => r.id === 'layout-transition')).toHaveLength(0); - }); - - test('passes opacity transition', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'opacity' })); - expect(f.filter(r => r.id === 'layout-transition')).toHaveLength(0); - }); - - test('skips transition: all', () => { - const f = checkElementMotion('div', mockStyle({ transitionProperty: 'all' })); - expect(f.filter(r => r.id === 'layout-transition')).toHaveLength(0); - }); - - test('skips safe tags', () => { - const f = checkElementMotion('button', mockStyle({ - animationName: 'bounce', transitionProperty: 'width', - })); - expect(f).toHaveLength(0); - }); -}); - -describe('detectText — motion', () => { - test('detects animate-bounce Tailwind class', () => { - const f = detectText('a
loading', 'test.html'); - expect(f.some(r => r.antipattern === 'bounce-easing')).toBe(true); - }); - - test('detects animation: bounce CSS', () => { - const f = detectText('.icon { animation: bounce-ball 1s infinite; }', 'test.css'); - const finding = f.find(r => r.antipattern === 'bounce-easing'); - expect(finding).toBeTruthy(); - expect(finding.snippet).toBe('animation: bounce-ball'); - }); - - test('detects animation-name: elastic', () => { - const f = detectText('.card { animation-name: elastic; }', 'test.css'); - expect(f.some(r => r.antipattern === 'bounce-easing')).toBe(true); - }); - - test('detects overshoot cubic-bezier', () => { - const f = detectText('.btn { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }', 'test.css'); - expect(f.some(r => r.antipattern === 'bounce-easing')).toBe(true); - }); - - test('passes standard cubic-bezier', () => { - const f = detectText('.btn { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }', 'test.css'); - expect(f.filter(r => r.antipattern === 'bounce-easing')).toHaveLength(0); - }); - - test('detects transition: width', () => { - const f = detectText('.sidebar { transition: width 0.3s ease; }', 'test.css'); - expect(f.some(r => r.antipattern === 'layout-transition')).toBe(true); - }); - - test('detects transition: height', () => { - const f = detectText('.panel { transition: height 0.4s ease-out; }', 'test.css'); - expect(f.some(r => r.antipattern === 'layout-transition')).toBe(true); - }); - - test('detects transition: max-height', () => { - const f = detectText('.accordion { transition: max-height 0.5s ease; }', 'test.css'); - expect(f.some(r => r.antipattern === 'layout-transition')).toBe(true); - }); - - test('detects transition-property: width', () => { - const f = detectText('.box { transition-property: width; transition-duration: 0.3s; }', 'test.css'); - expect(f.some(r => r.antipattern === 'layout-transition')).toBe(true); - }); - - test('skips transition: all', () => { - const f = detectText('.card { transition: all 0.3s ease; }', 'test.css'); - expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0); - }); - - test('skips transition: transform', () => { - const f = detectText('.card { transition: transform 0.3s ease; }', 'test.css'); - expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0); - }); - - test('skips transition: opacity', () => { - const f = detectText('.btn { transition: opacity 0.2s ease; }', 'test.css'); - expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0); - }); - - test('passes JSX quoted paint-only transition with later layout prop', () => { - const f = detectText("", 'test.jsx'); - expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0); - }); - - test('passes JSX grid-template-rows transition with later padding and width', () => { - const f = detectText("", 'test.jsx'); - expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0); - }); - - test('detects JSX quoted width transition', () => { - const f = detectText("", 'test.jsx'); - expect(f.some(r => r.antipattern === 'layout-transition')).toBe(true); - }); - - test('skips JSX quoted transition: all', () => { - const f = detectText("", 'test.jsx'); - expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0); - }); -}); - -// --------------------------------------------------------------------------- -// Dark glow anti-pattern -// --------------------------------------------------------------------------- - -describe('checkElementGlow', () => { - function mockStyle(overrides) { - return { boxShadow: 'none', backgroundColor: '', ...overrides }; - } - - // Dark bg = luminance < 0.1 (e.g. #111827 = gray-900) - const darkBg = { r: 17, g: 24, b: 39 }; // #111827 - const lightBg = { r: 249, g: 250, b: 251 }; // #f9fafb - const mediumBg = { r: 107, g: 114, b: 128 }; // #6b7280 - - test('detects blue glow on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.4) 0px 0px 20px 0px', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('detects purple glow on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(139, 92, 246, 0.35) 0px 0px 25px 0px', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('detects glow in multi-shadow', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(0, 0, 0, 0.3) 0px 4px 6px 0px, rgba(168, 85, 247, 0.3) 0px 0px 30px 0px', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('passes gray shadow on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(0, 0, 0, 0.4) 0px 4px 12px 0px', - }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('detects zero-offset colored halo on light background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.4) 0px 0px 20px 0px', - }), lightBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('detects zero-offset colored halo on medium gray background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.5) 0px 0px 20px 0px', - }), mediumBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('passes offset colored drop shadow on light background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.4) 0px 8px 20px 0px', - }), lightBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('passes achromatic zero-offset shadow on light background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 0px 24px 0px', - }), lightBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('detects oklch glow on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: '0 0 12px oklch(0.85 0.12 200 / 0.5)', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('detects oklch zero-offset glow on light background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'oklch(0.65 0.2 300 / 0.45) 0px 0px 20px 0px', - }), lightBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('passes achromatic oklch glow (white halo) on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: '0 0 12px oklch(1 0 0 / .7)', - }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('detects hex glow on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: '0 0 16px #3b82f6', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('detects hsl glow on dark background', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: '0 0 22px hsl(280, 80%, 60%)', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('skips unresolvable var() shadow color instead of guessing', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: '0 0 10px var(--ok)', - }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('detects chromatic text-shadow glow on any background', () => { - const f = checkElementGlow('h1', mockStyle({ - textShadow: 'rgb(34, 211, 238) 0px 0px 12px', - }), lightBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); - - test('passes offset neutral text-shadow', () => { - const f = checkElementGlow('h1', mockStyle({ - textShadow: 'rgba(0, 0, 0, 0.6) 0px 1px 2px', - }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('passes focus ring (spread only, no blur)', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.5) 0px 0px 0px 3px', - }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('passes subtle shadow (blur < 5px)', () => { - const f = checkElementGlow('div', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.2) 0px 1px 3px 0px', - }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('passes no shadow', () => { - const f = checkElementGlow('div', mockStyle({ boxShadow: 'none' }), darkBg); - expect(f.filter(r => r.id === 'dark-glow')).toHaveLength(0); - }); - - test('detects glow on buttons (not skipped by safe tags)', () => { - const f = checkElementGlow('button', mockStyle({ - boxShadow: 'rgba(59, 130, 246, 0.4) 0px 0px 20px 0px', - }), darkBg); - expect(f.some(r => r.id === 'dark-glow')).toBe(true); - }); -}); - -describe('detectText — dark glow', () => { - test('detects colored box-shadow glow on dark background', () => { - const html = 'glow'; - const f = detectText(html, 'test.html'); - expect(f.some(r => r.antipattern === 'dark-glow')).toBe(true); - }); - - test('skips gray shadow on dark background', () => { - const html = 'shadow'; - const f = detectText(html, 'test.html'); - expect(f.filter(r => r.antipattern === 'dark-glow')).toHaveLength(0); - }); - - test('detects zero-offset colored halo on light page', () => { - const html = 'glow'; - const f = detectText(html, 'test.html'); - expect(f.some(r => r.antipattern === 'dark-glow')).toBe(true); - }); - - test('skips offset colored drop shadow on light page', () => { - const html = 'shadow'; - const f = detectText(html, 'test.html'); - expect(f.filter(r => r.antipattern === 'dark-glow')).toHaveLength(0); - }); - - test('detects oklch glow on dark oklch page', () => { - const html = 'glow'; - const f = detectText(html, 'test.html'); - expect(f.some(r => r.antipattern === 'dark-glow')).toBe(true); - }); - - test('resolves single-level var() shadow colors', () => { - const html = 'lamp'; - const f = detectText(html, 'test.html'); - expect(f.some(r => r.antipattern === 'dark-glow')).toBe(true); - }); - - test('skips unresolvable var() shadow colors', () => { - const html = 'lamp'; - const f = detectText(html, 'test.html'); - expect(f.filter(r => r.antipattern === 'dark-glow')).toHaveLength(0); - }); - - test('detects chromatic text-shadow glow', () => { - const html = 'glow
'; - const f = detectText(html, 'test.html'); - expect(f.some(r => r.antipattern === 'dark-glow')).toBe(true); - }); - - test('skips achromatic zero-offset halo (soft elevation)', () => { - const html = 'card'; - const f = detectText(html, 'test.html'); - expect(f.filter(r => r.antipattern === 'dark-glow')).toHaveLength(0); - }); -}); - -// --------------------------------------------------------------------------- -// Static HTML/CSS engine -// --------------------------------------------------------------------------- - -describe('detectHtml — static HTML/CSS engine', () => { - test('inlines local linked stylesheets', async () => { - const f = await detectHtml(path.join(FIXTURES, 'linked-stylesheet.html')); - expect(findingIds(f)).toContain('side-tab'); - }); - - test('resolves root-relative linked stylesheets with cache-busting query', async () => { - await withStaticFixture({ - 'index.html': ` - -Card`, - 'static/app.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }', - }, async ({ file }) => { - const f = await detectHtml(file); - expect(findingIds(f)).toContain('side-tab'); - }); - }); - - test('resolves root-relative linked stylesheets from nested pages via ancestor walk', async () => { - await withStaticFixture({ - 'pages/about.html': ` - -Card`, - 'static/app.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }', - }, async ({ dir }) => { - const f = await detectHtml(path.join(dir, 'pages', 'about.html')); - expect(findingIds(f)).toContain('side-tab'); - }); - }); - - test('does not resolve root-relative sheets above the project root', async () => { - await withStaticFixture({ - 'project/package.json': '{}', - 'project/index.html': ` - -Card`, - 'static/app.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }', - }, async ({ dir }) => { - const f = await detectHtml(path.join(dir, 'project', 'index.html')); - expect(findingIds(f)).not.toContain('side-tab'); - }); - }); - - test('does not follow root-relative .. segments out of the page directory', async () => { - await withStaticFixture({ - 'project/package.json': '{}', - 'project/index.html': ` - -Card`, - 'outside.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }', - }, async ({ dir }) => { - const f = await detectHtml(path.join(dir, 'project', 'index.html')); - expect(findingIds(f)).not.toContain('side-tab'); - }); - }); - - test('warns when a linked stylesheet cannot be read', async () => { - const writes = []; - const origWrite = process.stderr.write.bind(process.stderr); - process.stderr.write = (chunk, ...args) => { - writes.push(String(chunk)); - return origWrite(chunk, ...args); - }; - try { - await withStaticFixture({ - 'index.html': ` - -Page`, - }, async ({ file, dir }) => { - await detectHtml(file); - await detectHtml(file); - const msg = writes.join(''); - const hits = msg.split('could not read linked stylesheet /missing/app.css').length - 1; - expect(hits).toBe(2); - expect(msg).toContain(`resolved to ${path.join(dir, 'missing', 'app.css')}`); - }); - } finally { - process.stderr.write = origWrite; - } - }); - - test('gradient-text: a style="" attribute alone carries the page-level flag', async () => { - await withStaticFixture({ - 'index.html': `t -Inline gradient heading
-Body copy long enough to make this a real page for the scanners.
- `, - }, async ({ file }) => { - const f = await detectHtml(file); - expect(f.some(r => r.antipattern === 'gradient-text' && /background-clip/.test(r.snippet))).toBe(true); - }); - }); - - test('gradient-text: a -Styled gradient heading
-Body copy long enough to make this a real page for the scanners.
- `, - }, async ({ file }) => { - const f = await detectHtml(file); - expect(f.some(r => r.antipattern === 'gradient-text' && /background-clip/.test(r.snippet))).toBe(true); - }); - }); - - test('gradient-text: prose and code samples about the pattern do not flag', async () => { - await withStaticFixture({ - 'index.html': `changelog -Changelog
--
background-clip: textgradients stop tripping the contrast rules.-.hero { background: linear-gradient(135deg, #667eea, #764ba2); background-clip: text; }Pair bg-clip-text with bg-gradient-to-r and both utilities together are the tell.
- `, - }, async ({ file }) => { - const f = await detectHtml(file); - expect(f.filter(r => r.antipattern === 'gradient-text')).toHaveLength(0); - expect(f.filter(r => r.antipattern === 'ai-color-palette')).toHaveLength(0); - }); - }); - - test('flattens @layer, resolves CSS variables and fallbacks, and skips unsupported selectors', async () => { - await withStaticFixture({ - 'index.html': ` - - - - - -Layer variable side tab-Fallback variable top accent- - `, - }, async ({ file }) => { - const profile = []; - const f = await detectHtml(file, { profile }); - const ids = findingIds(f); - expect(ids).toContain('side-tab'); - expect(ids).toContain('border-accent-on-rounded'); - expect(profile.some(e => e.engine === 'static-html' && e.ruleId === 'unsupported-selector')).toBe(true); - }); - }); - - test('honors specificity, source order, !important, and inline style precedence', async () => { - await withStaticFixture({ - 'index.html': ` - - - - - -Specificity neutral pass-Source order chromatic flag-Important neutral pass-Inline chromatic flag- - `, - }, async ({ file }) => { - const f = await detectHtml(file); - expect(findingIds(f).filter(id => id === 'side-tab')).toHaveLength(2); - }); - }); - - test('expands background, border, font, transition, and animation shorthands', async () => { - await withStaticFixture({ - 'index.html': ` - - - - - -This tiny paragraph is long enough to trigger both the static font shorthand size and line-height checks.
- -Border shorthand side tab-Motion shorthand easing- - `, - }, async ({ file }) => { - const ids = findingIds(await detectHtml(file)); - expect(ids).toContain('tiny-text'); - expect(ids).toContain('tight-leading'); - expect(ids).toContain('low-contrast'); - expect(ids).toContain('side-tab'); - expect(ids).toContain('bounce-easing'); - expect(ids).toContain('layout-transition'); - }); - }); -}); - -describe('StaticDocument.closest — compiled selector cache', () => { - test('compiles each selector once per document', () => { - let compileCount = 0; - const compile = (sel) => { - compileCount++; - return cssSelect.compile(sel); - }; - const root = htmlparser2.parseDocument( - '' + - '' + - 'deep', - ); - const doc = new StaticDocument(root, { - selectAll: cssSelect.selectAll, - selectOne: cssSelect.selectOne, - compile, - domutils, - }); - const deep = doc.querySelectorAll('span')[0]; - const deep2 = doc.querySelectorAll('span')[1]; - expect(deep.closest('.target-ancestor').node.attribs.class).toBe('target-ancestor'); - deep.closest('.target-ancestor'); - deep2.closest('.target-ancestor'); - expect(compileCount).toBe(1); - }); - - test('invalid selector returns null on repeat calls', () => { - const root = htmlparser2.parseDocument('deep2x
'); - const doc = new StaticDocument(root, { - selectAll: cssSelect.selectAll, - selectOne: cssSelect.selectOne, - compile: cssSelect.compile, - domutils, - }); - const p = doc.querySelector('p'); - expect(p.closest('p:has-invalid(')).toBeNull(); - expect(p.closest('p:has-invalid(')).toBeNull(); - }); -}); - -// --------------------------------------------------------------------------- -// Side-tab as absolutely-positioned pseudo-element stripe -// --------------------------------------------------------------------------- - -describe('side-tab — pseudo-element stripe variant', () => { - test('fixture flags both stripe variants and nothing else', async () => { - const f = await detectHtml(path.join(FIXTURES, 'pseudo-stripe.html')); - const stripes = f.filter(r => r.antipattern === 'side-tab'); - const snippets = stripes.map(r => r.snippet).join(' | '); - expect(stripes).toHaveLength(2); - expect(snippets).toContain('.card-stripe::before'); - expect(snippets).toContain('.row-stripe::after'); - }); - - test('detects ::before stripe with var() background resolved to chromatic', () => { - const css = ` - :root { --accent: oklch(0.78 0.145 155); } - .hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); } - `; - const f = scanCssTextForPseudoStripe(css); - expect(f).toHaveLength(1); - expect(f[0].id).toBe('side-tab'); - expect(f[0].snippet).toContain('.hero::before'); - }); - - test('detects height:100% + right:0 variant', () => { - const css = '.card::after { position: absolute; right: 0; top: 0; height: 100%; width: 4px; background: #3b82f6; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(1); - }); - - test('detects floating stripe inset a few px from each end', () => { - // The evasion shape from human review: same left-edge accent bar, but - // backed off the card's corners by a small top/bottom inset so it never - // touches an edge (and needs no corner rounding to read as a side tab). - const css = '.row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: oklch(0.65 0.19 15); }'; - const f = scanCssTextForPseudoStripe(css); - expect(f).toHaveLength(1); - expect(f[0].id).toBe('side-tab'); - expect(f[0].snippet).toContain('(left: 0)'); - }); - - test('skips deeply-inset partial rail (not an edge-spanning stripe)', () => { - const css = '.rail::before { position: absolute; left: 0; top: 40px; bottom: 40px; width: 4px; background: #3b82f6; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('unresolvable custom-property color errs toward detection', () => { - const css = '.card::before { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--from-external-sheet); }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(1); - }); - - test('skips neutral hairline divider', () => { - const css = '.col::before { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.08); }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('skips neutral 4px rail (chromatic gate)', () => { - const css = '.timeline::before { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgb(209, 213, 219); }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('skips 2px stripe below width threshold', () => { - const css = '.card::before { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #3b82f6; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('skips blockquote pseudo decoration', () => { - const css = 'blockquote::before { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #d97706; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('skips non-edge-anchored pseudo (toggle knob)', () => { - const css = '.switch::before { position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: #3b82f6; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('skips full-overlay pseudo (inset: 0, no narrow width)', () => { - const css = '.hero::after { position: absolute; inset: 0; background: #3b82f6; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - // Horizontal (top/bottom) stripe variant - test('detects top-anchored full-width pseudo stripe', () => { - const css = '.stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #e04a3a; }'; - const f = scanCssTextForPseudoStripe(css); - expect(f).toHaveLength(1); - expect(f[0].snippet).toContain('(top: 0)'); - }); - - test('detects bottom-anchored width:100% pseudo stripe', () => { - const css = '.promo::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: oklch(0.62 0.2 30); }'; - const f = scanCssTextForPseudoStripe(css); - expect(f).toHaveLength(1); - expect(f[0].snippet).toContain('(bottom: 0)'); - }); - - test('skips link/button underline affordances (horizontal variant)', () => { - const link = '.nav-link::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #e04a3a; }'; - const anchor = 'a.cta::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #e04a3a; }'; - const btn = '.cta-btn::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #e04a3a; }'; - expect(scanCssTextForPseudoStripe(link)).toHaveLength(0); - expect(scanCssTextForPseudoStripe(anchor)).toHaveLength(0); - expect(scanCssTextForPseudoStripe(btn)).toHaveLength(0); - }); - - test('skips selected-state underlines, flags all-tabs underlines (horizontal variant)', () => { - const selectedTab = '[role="tab"][aria-selected="true"]::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #4a7de0; }'; - const activeItem = '.tabs .item.active::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #4a7de0; }'; - expect(scanCssTextForPseudoStripe(selectedTab)).toHaveLength(0); - expect(scanCssTextForPseudoStripe(activeItem)).toHaveLength(0); - // The same stripe on EVERY tab in the group is decoration, not state. - const allTabs = '.tabs .item::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #4a7de0; }'; - const roleTab = '[role="tab"]::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #4a7de0; }'; - expect(scanCssTextForPseudoStripe(allTabs)).toHaveLength(1); - expect(scanCssTextForPseudoStripe(roleTab)).toHaveLength(1); - }); - - test('skips hover-state underline affordance (horizontal variant)', () => { - const css = '.item:hover::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #e04a3a; }'; - expect(scanCssTextForPseudoStripe(css)).toHaveLength(0); - }); - - test('skips 2px and 16px horizontal bars (thickness gates)', () => { - const thin = '.card::before { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #e04a3a; }'; - const band = '.card::before { position: absolute; top: 0; left: 0; right: 0; height: 16px; background: #e04a3a; }'; - expect(scanCssTextForPseudoStripe(thin)).toHaveLength(0); - expect(scanCssTextForPseudoStripe(band)).toHaveLength(0); - }); -}); - -// --------------------------------------------------------------------------- -// Low contrast — modern computed-color serializations (browser adapter path) -// --------------------------------------------------------------------------- - -describe('checkColors — oklch computed colors', () => { - test('flat dark-on-dark oklch CTA pair parses and fails contrast', () => { - // Real browsers hand back oklch() strings from getComputedStyle for - // colors authored in modern spaces; the adapters must not lose them. - const textColor = parseAnyColor('oklch(0.34 0.01 70)'); - const bgColor = parseAnyColor('oklch(0.22 0.01 70)'); - expect(textColor).toBeTruthy(); - expect(bgColor).toBeTruthy(); - const f = checkColors({ - tag: 'a', - textColor, - bgColor, - effectiveBg: bgColor, - effectiveBgStops: null, - fontSize: 14.4, - fontWeight: 500, - hasDirectText: true, - isEmojiOnly: false, - bgClip: '', - bgImage: '', - classList: 'btn btn-primary', - }); - expect(f.some(r => r.id === 'low-contrast')).toBe(true); - }); -}); - -// --------------------------------------------------------------------------- -// Numbered section labels — pure helpers -// --------------------------------------------------------------------------- - -describe('numbered-section-labels — pure helpers', () => { - test('parseNumberedLabelText accepts zero-padded and separator forms only', () => { - expect(parseNumberedLabelText('01')).toEqual({ index: 1, text: '01' }); - expect(parseNumberedLabelText('12')).toEqual({ index: 12, text: '12' }); - expect(parseNumberedLabelText('04 / rollout')).toMatchObject({ index: 4 }); - expect(parseNumberedLabelText('6 · getting started')).toMatchObject({ index: 6 }); - expect(parseNumberedLabelText('7')).toBeNull(); - expect(parseNumberedLabelText('Step 3')).toBeNull(); - expect(parseNumberedLabelText('12 minute read')).toBeNull(); - expect(parseNumberedLabelText('50% off everything')).toBeNull(); - expect(parseNumberedLabelText('')).toBeNull(); - }); - - test('checkNumberedSectionLabels needs 2+ candidates with 2+ distinct indices', () => { - const candidate = (index) => ({ index, labelText: String(index).padStart(2, '0'), headingTag: 'h2', headingText: 'Heading' }); - expect(checkNumberedSectionLabels({ candidates: [candidate(1)] })).toHaveLength(0); - expect(checkNumberedSectionLabels({ candidates: [candidate(1), candidate(1)] })).toHaveLength(0); - const flagged = checkNumberedSectionLabels({ candidates: [candidate(1), candidate(2)] }); - expect(flagged).toHaveLength(2); - expect(flagged[0].id).toBe('numbered-section-labels'); - }); -}); - -// --------------------------------------------------------------------------- -// Radial-gradient background halo -// --------------------------------------------------------------------------- - -describe('radial-halo', () => { - const darkRoot = 'body { background: oklch(0.085 0.020 262); }'; - - test('flags chromatic halo fading to transparent on a dark page', () => { - const css = `${darkRoot} body { background: radial-gradient(120% 80% at 50% -10%, oklch(0.240 0.045 268) 0%, transparent 55%), oklch(0.085 0.020 262); }`; - const f = scanCssTextForRadialHalo(css); - expect(f).toHaveLength(1); - expect(f[0].snippet).toContain('radial-gradient halo'); - }); - - test('skips achromatic vignette with no transparent stop', () => { - const css = `${darkRoot} body { background: radial-gradient(120% 90% at 50% -10%, oklch(0.19 0.02 264) 0%, oklch(0.075 0.01 262) 100%); }`; - expect(scanCssTextForRadialHalo(css)).toHaveLength(0); - }); - - test('skips panel sheen fading to an opaque surface color', () => { - const css = `${darkRoot} .hero { background: radial-gradient(120% 90% at 85% 0%, oklch(0.255 0.034 262), oklch(0.205 0.032 262) 60%); }`; - expect(scanCssTextForRadialHalo(css)).toHaveLength(0); - }); - - test('skips px-sized dot texture patterns', () => { - const css = `${darkRoot} .device::before { background-image: radial-gradient(oklch(1 0 0 / 0.018) 1px, transparent 1.4px); }`; - expect(scanCssTextForRadialHalo(css)).toHaveLength(0); - }); - - test('skips translucent light-scene washes (inner alpha below 0.7)', () => { - const css = `${darkRoot} .hero .light { background: radial-gradient(closest-side, oklch(0.62 0.10 255 / 0.55), oklch(0.42 0.09 258 / 0.22) 45%, transparent 72%); }`; - expect(scanCssTextForRadialHalo(css)).toHaveLength(0); - }); - - test('skips halos on light pages', () => { - const css = 'body { background: #faf7f2; } .hero { background: radial-gradient(60% 40% at 50% 0%, #7c3aed 0%, transparent 70%); }'; - expect(scanCssTextForRadialHalo(css)).toHaveLength(0); - }); - - test('skips declarations that include photographic url() layers', () => { - const css = `${darkRoot} .hero { background: url(cover.jpg), radial-gradient(60% 40% at 50% 0%, #7c3aed 0%, transparent 70%); }`; - expect(scanCssTextForRadialHalo(css)).toHaveLength(0); - }); - - test('resolves var() color stops', () => { - const css = `:root { --glow: oklch(0.5 0.18 300); } ${darkRoot} .bg { background: radial-gradient(80% 60% at 50% 0%, var(--glow) 0%, transparent 60%); }`; - expect(scanCssTextForRadialHalo(css)).toHaveLength(1); - }); -}); - -// --------------------------------------------------------------------------- -// Hover-state contrast + color-mix parsing -// --------------------------------------------------------------------------- - -describe('hover contrast + color-mix', () => { - test('parseColorMix: mix with transparent keeps color, scales alpha', () => { - const c = parseColorMix('color-mix(in oklab, rgb(230, 68, 37) 16%, transparent)'); - expect(c.r).toBe(230); - expect(c.g).toBe(68); - expect(c.b).toBe(37); - expect(c.a).toBeCloseTo(0.16, 2); - }); - - test('parseColorMix: 50/50 opaque mix averages channels', () => { - const c = parseColorMix('color-mix(in srgb, rgb(0, 0, 0), rgb(255, 255, 255))'); - expect(c.a).toBe(1); - expect(Math.abs(c.r - 128)).toBeLessThanOrEqual(1); - }); - - test('parseAnyColor routes color-mix expressions', () => { - const c = parseAnyColor('color-mix(in oklab, oklch(0.625 0.205 33) 16%, transparent)'); - expect(c).not.toBeNull(); - expect(c.a).toBeCloseTo(0.16, 2); - }); - - // Every expected value below is what Chrome itself paints for that string - // (read back from a 1x1 canvas), so the parser is pinned to the browser it - // has to agree with rather than to my arithmetic. - describe('parseAnyColor — the color syntaxes a browser reports verbatim', () => { - const cases = [ - ['oklch(0.84 0.19 80.46)', [255, 186, 0]], - ['oklch(84% 0.19 80.46)', [255, 186, 0]], - ['oklch(1 0 0)', [255, 255, 255]], - ['oklch(0 0 0)', [0, 0, 0]], - // Chroma far outside the sRGB gamut must clamp, never produce NaN. - ['oklch(0.62 0.4 30)', [255, 0, 0]], - ['color(srgb 0.1 0.11 0.12)', [26, 28, 31]], - // Chrome's serialization of a color-mix in srgb routinely lands outside - // 0..1 on one or more channels. - ['color(srgb 1.04084 0.728032 -0.213551)', [255, 186, 0]], - ['color(srgb-linear 0.5 0.5 0.5)', [188, 188, 188]], - ['color(display-p3 0.9 0.8 0.2)', [235, 203, 0]], - ['color(display-p3 1 0 0)', [255, 0, 0]], - ['lch(20 5 60)', [54, 47, 42]], - ['lab(50 40 -30)', [165, 91, 171]], - ['lab(100 0 0)', [255, 255, 255]], - ['lab(0 0 0)', [0, 0, 0]], - ]; - for (const [input, [r, g, b]] of cases) { - test(`${input} -> rgb(${r}, ${g}, ${b})`, () => { - const c = parseAnyColor(input); - expect(c).not.toBeNull(); - expect(Math.abs(c.r - r)).toBeLessThanOrEqual(1); - expect(Math.abs(c.g - g)).toBeLessThanOrEqual(1); - expect(Math.abs(c.b - b)).toBeLessThanOrEqual(1); - expect(c.a).toBe(1); - }); - } - - test('carries the alpha channel through color() and lch()', () => { - expect(parseAnyColor('color(srgb 0.1 0.11 0.12 / 0.4)').a).toBeCloseTo(0.4, 3); - expect(parseAnyColor('lch(20 5 60 / 25%)').a).toBeCloseTo(0.25, 3); - }); - - test('returns null for color spaces it does not model, so callers abstain', () => { - expect(parseAnyColor('color(rec2020 0.5 0.2 0.1)')).toBeNull(); - expect(parseAnyColor('color(--custom-profile 0.2 0.3 0.4)')).toBeNull(); - }); - }); - - test('parseGradientColors reads stops written in modern color syntax', () => { - const stops = parseGradientColors('linear-gradient(oklch(0.07 0.006 95), oklch(0.11 0.008 95))'); - expect(stops).toHaveLength(2); - expect(stops[0].r).toBeLessThan(10); - expect(stops[1].r).toBeLessThan(20); - }); - - test('parseGradientColors ignores the interpolation-space hint', () => { - const stops = parseGradientColors('linear-gradient(in oklab, rgb(0, 0, 0), rgb(255, 255, 255))'); - expect(stops).toHaveLength(2); - }); - - test('parseGradientColors resolves color-mix stops without leaking nested hex', () => { - const stops = parseGradientColors('linear-gradient(135deg, color-mix(in srgb, #2d5a4a 92%, #000), color-mix(in srgb, #1a3d32 90%, #000))'); - expect(stops).toHaveLength(2); - expect(stops[0]).toEqual({ r: 41, g: 83, b: 68, a: 1 }); - expect(stops[1]).toEqual({ r: 23, g: 55, b: 45, a: 1 }); - }); - - test('parseGradientColors does not leak nested hex when color-mix has var()', () => { - const stops = parseGradientColors('linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand-deep) 90%, #000))'); - expect(stops).toEqual([]); - }); - - test('parseGradientColors still collects sibling bare hex stops beside color-mix', () => { - const stops = parseGradientColors('linear-gradient(color-mix(in srgb, #2d5a4a 92%, #000), #ffffff)'); - expect(stops).toHaveLength(2); - expect(stops[0]).toEqual({ r: 41, g: 83, b: 68, a: 1 }); - expect(stops[1]).toEqual({ r: 255, g: 255, b: 255, a: 1 }); - }); - - test('parseGradientColors still reads bare hex gradient stops', () => { - const stops = parseGradientColors('linear-gradient(#2d5a4a, #000)'); - expect(stops).toHaveLength(2); - expect(stops[0]).toEqual({ r: 45, g: 90, b: 74, a: 1 }); - expect(stops[1]).toEqual({ r: 0, g: 0, b: 0, a: 1 }); - }); - - test('checkHoverContrast flags a failing hover pair on a styled control', () => { - const f = checkHoverContrast({ - tag: 'a', - textColor: { r: 239, g: 236, b: 233, a: 1 }, - bg: { r: 215, g: 56, b: 23, a: 1 }, - ownBgAlpha: 1, - fontSize: 13.6, - fontWeight: 500, - hasDirectText: true, - isEmojiOnly: false, - }); - expect(f).toHaveLength(1); - expect(f[0].id).toBe('low-contrast'); - expect(f[0].snippet).toContain(':hover'); - }); - - test('checkHoverContrast skips plain links without their own background', () => { - const f = checkHoverContrast({ - tag: 'a', - textColor: { r: 120, g: 120, b: 120, a: 1 }, - bg: { r: 128, g: 128, b: 128, a: 1 }, - ownBgAlpha: null, - fontSize: 16, - fontWeight: 400, - hasDirectText: true, - isEmojiOnly: false, - }); - expect(f).toHaveLength(0); - }); - - test('checkHoverContrast passes a compliant hover pair', () => { - const f = checkHoverContrast({ - tag: 'a', - textColor: { r: 255, g: 255, b: 255, a: 1 }, - bg: { r: 20, g: 20, b: 20, a: 1 }, - ownBgAlpha: 1, - fontSize: 14, - fontWeight: 500, - hasDirectText: true, - isEmojiOnly: false, - }); - expect(f).toHaveLength(0); - }); -}); - -// --------------------------------------------------------------------------- -// Auto-scrolling marquee -// --------------------------------------------------------------------------- - -describe('marquee', () => { - test('flags infinite percent-travel X loop (implicit start)', () => { - const css = ` - .ticker-track { display: flex; width: max-content; animation: ticker 25s linear infinite; } - @keyframes ticker { to { transform: translateX(-50%); } } - `; - const f = scanCssTextForMarquee(css); - expect(f).toHaveLength(1); - expect(f[0].id).toBe('marquee'); - expect(f[0].snippet).toContain('.ticker-track'); - }); - - test('flags