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:
Paul Bakaus
2026-05-12 23:00:46 -07:00
co-authored by Claude Opus 4.7
parent f36d1ac2d9
commit e2008f8091
2 changed files with 17 additions and 13 deletions
+5 -2
View File
@@ -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
View File
@@ -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>