mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Paul BakausandClaude Fable 5
dc0b25d393
Item 1 (hero liveness theater):
- pulsing-dot now merges declarations per selector across rule blocks
(cascade-approximate), descends into media queries, and strips
prefers-reduced-motion: reduce overrides before the predicate runs.
Catches the shipped split-block constructions (size in the base rule,
animation added later or inside a no-preference media block).
- Dots whose element sits inside a header/nav landmark are promoted to
error severity (string-level landmark ranges in both engines); the
browser engine additionally promotes dots resting in the first ~900px.
- blinking-cursor findings in the first ~900px or inside header/nav are
promoted from advisory to warning.
- Per-finding severity overrides now flow through static-html,
browser-injected serialization, and detect-url.
Item 2 (nav-CTA contrast constructions):
- The a24-opus 01/002 header CTA already fires (specificity cascade +
oklch + var() all resolved); systematic sweep found two remaining
escapes and closes both:
- own gradient background on a SAFE_TAGS element (checkColors styled-
control exception now treats an own gradient as an own surface,
contrast measured against the worst stop)
- ::before/::after full-cover surface (static cascade marks pseudo
surfaces; browser adapter reads the pseudo computed style) so text is
measured against the surface the browser actually paints
- nav-cta-constructions fixture locks all eight computable construction
families; background-image: url() remains unflaggable by design.
Item 3 (shape-assembled-illustration, slop/advisory):
- New rule for large inline SVGs composing a pictorial scene from >= 8
primitive shapes at >= 200x200 intrinsic size with >= 3 distinct fills.
Charts (axis labels), stroke-only technical drawings, icons/logos
(small explicit size), and pattern-tiled backgrounds are exempt.
1.8 percent fire rate over the 3069-sample eval corpus, all verified
pictorial scenes; zero fires across val-a22/val-a24.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
96 lines
4.2 KiB
HTML
96 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Shape-assembled illustration fixture</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<!-- PASS: logo, small (explicit size) even with a big viewBox -->
|
|
<svg viewBox="0 0 400 400" width="32" height="32" aria-hidden="true">
|
|
<rect x="0" y="0" width="180" height="180" fill="#c33"/>
|
|
<rect x="220" y="0" width="180" height="180" fill="#3c3"/>
|
|
<rect x="0" y="220" width="180" height="180" fill="#33c"/>
|
|
<rect x="220" y="220" width="180" height="180" fill="#cc3"/>
|
|
<circle cx="200" cy="200" r="60" fill="#333"/>
|
|
<circle cx="200" cy="200" r="30" fill="#eee"/>
|
|
<polygon points="10,10 30,10 20,30" fill="#933"/>
|
|
<polygon points="370,10 390,10 380,30" fill="#393"/>
|
|
</svg>
|
|
<span>Acme</span>
|
|
</header>
|
|
<main>
|
|
<!-- FLAG: hero mascot scene assembled from primitives at hero size -->
|
|
<svg class="mascot" viewBox="0 0 640 480" role="img" aria-label="A cheerful robot waving">
|
|
<rect x="200" y="120" width="240" height="200" rx="24" fill="#8ecae6"/>
|
|
<rect x="240" y="340" width="60" height="100" fill="#219ebc"/>
|
|
<rect x="340" y="340" width="60" height="100" fill="#219ebc"/>
|
|
<circle cx="270" cy="200" r="24" fill="#ffffff"/>
|
|
<circle cx="370" cy="200" r="24" fill="#ffffff"/>
|
|
<circle cx="270" cy="200" r="10" fill="#023047"/>
|
|
<circle cx="370" cy="200" r="10" fill="#023047"/>
|
|
<ellipse cx="320" cy="270" rx="50" ry="20" fill="#ffb703"/>
|
|
<polygon points="180,160 140,120 180,120" fill="#fb8500"/>
|
|
<polygon points="460,160 500,120 460,120" fill="#fb8500"/>
|
|
<rect x="300" y="60" width="8" height="60" fill="#023047"/>
|
|
<circle cx="304" cy="52" r="12" fill="#fb8500"/>
|
|
</svg>
|
|
|
|
<!-- PASS: bar chart, data-bearing (axis labels) -->
|
|
<svg viewBox="0 0 600 400" role="img" aria-label="Monthly signups">
|
|
<rect x="60" y="220" width="40" height="120" fill="#4477aa"/>
|
|
<rect x="120" y="180" width="40" height="160" fill="#4477aa"/>
|
|
<rect x="180" y="140" width="40" height="200" fill="#66ccee"/>
|
|
<rect x="240" y="200" width="40" height="140" fill="#66ccee"/>
|
|
<rect x="300" y="100" width="40" height="240" fill="#228833"/>
|
|
<rect x="360" y="90" width="40" height="250" fill="#228833"/>
|
|
<rect x="420" y="60" width="40" height="280" fill="#ccbb44"/>
|
|
<rect x="480" y="40" width="40" height="300" fill="#ccbb44"/>
|
|
<line x1="40" y1="340" x2="560" y2="340" stroke="#333"/>
|
|
<text x="60" y="370">Jan</text>
|
|
<text x="180" y="370">Mar</text>
|
|
<text x="300" y="370">May</text>
|
|
<text x="420" y="370">Jul</text>
|
|
</svg>
|
|
|
|
<!-- PASS: stroke-only technical line drawing, no fills -->
|
|
<svg viewBox="0 0 600 470" fill="none" stroke="currentColor" stroke-width="4">
|
|
<circle cx="200" cy="200" r="80"/>
|
|
<circle cx="200" cy="200" r="40"/>
|
|
<ellipse cx="400" cy="220" rx="90" ry="40"/>
|
|
<rect x="120" y="320" width="360" height="60"/>
|
|
<rect x="150" y="340" width="80" height="20"/>
|
|
<rect x="260" y="340" width="80" height="20"/>
|
|
<polygon points="500,80 540,140 460,140"/>
|
|
<polygon points="80,80 120,140 40,140"/>
|
|
<path d="M120 120 C 200 40, 400 40, 480 120"/>
|
|
</svg>
|
|
|
|
<!-- PASS: full-bleed tiling background texture -->
|
|
<svg width="100%" height="600" viewBox="0 0 1200 600" aria-hidden="true">
|
|
<defs>
|
|
<pattern id="tile" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<rect width="20" height="20" fill="#eee"/>
|
|
<rect x="20" y="20" width="20" height="20" fill="#ddd"/>
|
|
<circle cx="30" cy="10" r="4" fill="#ccc"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="1200" height="600" fill="url(#tile)"/>
|
|
<rect x="0" y="0" width="600" height="300" fill="url(#tile)"/>
|
|
<rect x="600" y="300" width="600" height="300" fill="url(#tile)"/>
|
|
<circle cx="300" cy="300" r="80" fill="url(#tile)"/>
|
|
<circle cx="900" cy="150" r="60" fill="url(#tile)"/>
|
|
<circle cx="150" cy="450" r="50" fill="url(#tile)"/>
|
|
<polygon points="700,100 760,180 640,180" fill="url(#tile)"/>
|
|
<polygon points="1000,400 1060,480 940,480" fill="url(#tile)"/>
|
|
</svg>
|
|
|
|
<!-- PASS: small inline icon -->
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M8 12l3 3 5-6"/>
|
|
</svg>
|
|
</main>
|
|
</body>
|
|
</html>
|