mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-13 06:36:26 +03:00
Paul BakausandClaude Fable 5
7a99e1725d
Four gaps found shipping in Opus 4.8 eval samples during human review: 1. low-contrast (extended): the browser adapters parsed text/own-bg colors with parseRgb only, so Chrome's oklch()-serialized computed colors silently skipped every contrast check — a flat dark-on-dark nav CTA (broader nav selector beating the button class) shipped at 1.5:1 undetected. checkElementColorsDOM and readOwnBackgroundColor now fall back to parseAnyColor. Near-threshold ratios print two decimals so a 4.497 finding no longer reads "4.5 needs 4.5". 2. NEW numbered-section-labels (slop, advisory): tiny (<=13px) styled numeric index labels riding beside section headings, repeated across 2+ sections with distinct indices. Sibling of repeated-section-kickers (which deliberately excludes bare numeric labels); handles both the direct prev-sibling shape and label-before-heading-wrapper shape. List/nav/table/card-item numbering is exempt. 3. side-tab (extended): the vertical pseudo-element stripe scan required the stripe to touch both corners (top/bottom 0 or height 100%), so a left accent bar inset a few px from each end evaded it; small end insets (<=20px each) now count. Added a browser-side pseudo-element check (getComputedStyle(el, '::before'/'::after')) since runtime- assigned custom-property colors are invisible to the text scanner. Selection-state exemptions stay as narrowed: only aria-selected=true / aria-current / active-class markers exempt, plus button/link affordances on the horizontal variant. 4. NEW repeated-container-text (quality): the same literal string (>=4 chars, contains letters) rendered 3+ times at 3+ structurally distinct positions inside one bordered/elevated container. Parallel/templated repetition (table cells, calendar grids, nav lists, identical sibling rows) never counts — structural signatures, not word lists. Verified: each rule fires on its repro sample via the file:// browser scan; clean eval samples add no new findings (the new low-contrast hits on other samples are genuine sub-AA oklch button pairs). Full test suite green; browser bundle regenerated; README/homepage rule counts bumped 49 -> 51 (docs-integrity test enforces them). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
130 lines
4.2 KiB
HTML
130 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Repeated Container Text Fixture</title>
|
|
<style>
|
|
body {
|
|
font-family: Georgia, serif;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
padding: 40px;
|
|
background: #f5f5f4;
|
|
color: #222222;
|
|
}
|
|
.card {
|
|
background: #ffffff;
|
|
border: 1px solid #d6d3d1;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
width: 360px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.shadow-card {
|
|
background: #ffffff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
padding: 20px;
|
|
width: 360px;
|
|
margin-bottom: 32px;
|
|
}
|
|
h2 { font-size: 22px; margin: 0 0 10px; }
|
|
.big-word { font-size: 30px; font-weight: 700; color: #b91c1c; }
|
|
.tag { font-size: 12px; text-transform: uppercase; color: #b91c1c; }
|
|
.row { padding: 6px 0; border-bottom: 1px solid #eeeeee; }
|
|
.status { font-size: 13px; color: #57534e; }
|
|
td, th { padding: 6px 10px; font-size: 14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ══ SHOULD FLAG ══ -->
|
|
|
|
<!-- Same word wired into three structurally different slots of one card -->
|
|
<div class="card" id="flag-status-card">
|
|
<h2>Museumplein departure</h2>
|
|
<div class="headline"><span class="big-word">Suspended</span></div>
|
|
<div class="meta"><span class="tag">Suspended</span></div>
|
|
<p class="note">This service is <strong>Suspended</strong> until further notice.</p>
|
|
</div>
|
|
|
|
<!-- Four distinct slots inside one elevated card -->
|
|
<div class="shadow-card" id="flag-ticket-card">
|
|
<h2>Evening show</h2>
|
|
<div class="banner"><span class="big-word">Unavailable</span></div>
|
|
<div class="detail"><em class="tag">Unavailable</em></div>
|
|
<div class="footer"><span class="status">Unavailable</span></div>
|
|
<p class="aside">Currently <strong>Unavailable</strong> at this venue.</p>
|
|
</div>
|
|
|
|
<!-- ══ SHOULD PASS ══ -->
|
|
|
|
<!-- Table columns inside a card repeat by design -->
|
|
<div class="card" id="pass-table-card">
|
|
<h2>Deploy history</h2>
|
|
<table>
|
|
<tr><td>build 12</td><td>Rolled back</td></tr>
|
|
<tr><td>build 13</td><td>Rolled back</td></tr>
|
|
<tr><td>build 14</td><td>Rolled back</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Parallel templated rows: identical structural position each time -->
|
|
<div class="card" id="pass-parallel-rows">
|
|
<h2>Departures</h2>
|
|
<div class="row"><span class="status">On schedule</span></div>
|
|
<div class="row"><span class="status">On schedule</span></div>
|
|
<div class="row"><span class="status">On schedule</span></div>
|
|
</div>
|
|
|
|
<!-- Nav list inside a card -->
|
|
<div class="card" id="pass-nav-card">
|
|
<h2>Sections</h2>
|
|
<nav>
|
|
<div class="a"><span>Overview page</span></div>
|
|
<div class="b"><em>Overview page</em></div>
|
|
<div class="c"><strong>Overview page</strong></div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Short strings never count -->
|
|
<div class="card" id="pass-short-text">
|
|
<h2>Toggles</h2>
|
|
<div class="one"><span>Off</span></div>
|
|
<div class="two"><em>Off</em></div>
|
|
<div class="three"><strong>Off</strong></div>
|
|
</div>
|
|
|
|
<!-- Digits-only strings never count -->
|
|
<div class="card" id="pass-numbers">
|
|
<h2>Scores</h2>
|
|
<div class="one"><span>2026</span></div>
|
|
<div class="two"><em>2026</em></div>
|
|
<div class="three"><strong>2026</strong></div>
|
|
</div>
|
|
|
|
<!-- One occurrence per card, three cards -->
|
|
<div class="card" id="pass-spread-a"><span class="tag">Standby mode</span></div>
|
|
<div class="card" id="pass-spread-b"><em class="tag">Standby mode</em></div>
|
|
<div class="card" id="pass-spread-c"><strong class="tag">Standby mode</strong></div>
|
|
|
|
<!-- Calendar-style grid repeats by design -->
|
|
<div class="card" id="pass-grid-card">
|
|
<h2>Availability</h2>
|
|
<div role="grid">
|
|
<div class="cell-a"><span>Open slot</span></div>
|
|
<div class="cell-b"><em>Open slot</em></div>
|
|
<div class="cell-c"><strong>Open slot</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Only two structurally distinct occurrences: below threshold -->
|
|
<div class="card" id="pass-two-spots">
|
|
<h2>Corner case</h2>
|
|
<div class="headline"><span class="big-word">Rescheduled</span></div>
|
|
<div class="meta"><span class="tag">Rescheduled</span></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|