mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
test: align hero-eyebrow-chip fixture with relaxed rule gates
b9bf496 intentionally relaxed two gates in checkHeroEyebrow:
- removed the heading-size ≥ 48px anchor (modern hero h1s use
clamp/vw/var that jsdom can't resolve)
- raised the eyebrow text ceiling from 30 to 60 chars
Two fixture cases that satisfied the negative side of the old gates
now match the rule:
- "Body-Sized Heading Below Eyebrow" — 24px h1 with tracked-caps
label above. Per the rule's stated intent ("a tiny tan label
directly above any h1 is the antipattern regardless of how big
the h1 ends up"), this is a flag.
- "Long Uppercase Sentence Above Hero" — 46-char tracked-caps label
is under the new 60-char ceiling, so still eyebrow-shaped.
Both cases moved from the should-pass column to should-flag, with
case descriptions rewritten to explain the gate they exercise.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
f36d1ac2d9
commit
e2008f8091
@@ -341,14 +341,17 @@ describe('detectHtml — hero-eyebrow-chip', () => {
|
||||
'Span Eyebrow Above Hero',
|
||||
'Pill Chip Above Hero',
|
||||
'Already Uppercase Text',
|
||||
// The rule no longer gates on heading font size (modern hero h1s
|
||||
// use clamp() / vw / var() that jsdom can't resolve), and the
|
||||
// eyebrow text ceiling moved 30 → 60 chars. Both shapes now flag.
|
||||
'Body-Sized Heading Below Eyebrow',
|
||||
'Long Uppercase Sentence Above Hero',
|
||||
];
|
||||
const SHOULD_PASS = [
|
||||
'Eyebrow With Normal Tracking',
|
||||
'Body-Sized Heading Below Eyebrow',
|
||||
'Uppercase Caption Far From Hero',
|
||||
'Hero With No Eyebrow',
|
||||
'Heading Above Heading',
|
||||
'Long Uppercase Sentence Above Hero',
|
||||
];
|
||||
|
||||
it('hero-eyebrow-chip: flags only the should-flag column', async () => {
|
||||
|
||||
+12
-11
@@ -145,6 +145,18 @@
|
||||
<h1 class="hero">Already Uppercase Text</h1>
|
||||
<p>Text typed uppercase, no text-transform, but matching tracking and size.</p>
|
||||
</div>
|
||||
|
||||
<div class="case">
|
||||
<div class="eyebrow-classic">SECTION KICKER</div>
|
||||
<h1 class="pass-body-heading">Body-Sized Heading Below Eyebrow</h1>
|
||||
<p>Eyebrow above a 24px h1. Modern hero h1s use clamp() / vw / var() that jsdom can't resolve, so the rule no longer gates on heading font size — a tracked-caps label above any h1 is the antipattern shape.</p>
|
||||
</div>
|
||||
|
||||
<div class="case">
|
||||
<div class="pass-long-uppercase">A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER</div>
|
||||
<h1 class="hero">Long Uppercase Sentence Above Hero</h1>
|
||||
<p>46-char uppercase tracked label — under the 60-char eyebrow ceiling, so it still reads as an oversized eyebrow.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════════
|
||||
@@ -159,12 +171,6 @@
|
||||
<p>Uppercase label above a hero but with letter-spacing: normal.</p>
|
||||
</div>
|
||||
|
||||
<div class="case">
|
||||
<div class="eyebrow-classic">SECTION KICKER</div>
|
||||
<h1 class="pass-body-heading">Body-Sized Heading Below Eyebrow</h1>
|
||||
<p>Eyebrow above a heading, but the heading is only 24px — not a hero.</p>
|
||||
</div>
|
||||
|
||||
<div class="case">
|
||||
<div class="pass-card-caption">CARD CAPTION</div>
|
||||
<p>Plain body text below the caption.</p>
|
||||
@@ -183,11 +189,6 @@
|
||||
<p>An h2 styled like an eyebrow above an h1 — heading-tag exclusion must skip this.</p>
|
||||
</div>
|
||||
|
||||
<div class="case">
|
||||
<div class="pass-long-uppercase">A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER</div>
|
||||
<h1 class="hero">Long Uppercase Sentence Above Hero</h1>
|
||||
<p>Uppercase tracked label, but text length exceeds the 30-char eyebrow ceiling.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user