From e2008f809149fd3127113cca7d797599c275bfe6 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Tue, 12 May 2026 23:00:46 -0700
Subject: [PATCH] test: align hero-eyebrow-chip fixture with relaxed rule gates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 tests/detect-antipatterns-fixtures.test.mjs   |  7 ++++--
 .../antipatterns/hero-eyebrow-chip.html       | 23 ++++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/tests/detect-antipatterns-fixtures.test.mjs b/tests/detect-antipatterns-fixtures.test.mjs
index d8bbf375b..4a0cdc655 100644
--- a/tests/detect-antipatterns-fixtures.test.mjs
+++ b/tests/detect-antipatterns-fixtures.test.mjs
@@ -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 () => {
diff --git a/tests/fixtures/antipatterns/hero-eyebrow-chip.html b/tests/fixtures/antipatterns/hero-eyebrow-chip.html
index 53d74d75a..8eb490530 100644
--- a/tests/fixtures/antipatterns/hero-eyebrow-chip.html
+++ b/tests/fixtures/antipatterns/hero-eyebrow-chip.html
@@ -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>