skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Lock down the scroll-clip case for text-occlusion (#602)

Browse Source 
The paintedRect clamp landed in 9d2b0556 without a fixture, so nothing
stopped the false positive coming back. This adds the shape that produced
it: a scroll region with an opaque bar directly beneath.

Text scrolled past the panel's bottom edge still reports its full
unclipped rect, and that rect lands on the bar. The probe then samples
coordinates the text is not painted at, finds the bar, and reports the
text as buried under it. Any sticky footer or toolbar under a scroller
has this shape.

Verified red then green: with the clamp reverted to main's version the
fixture reports a fourth finding and the assertion fails; with it in
place the count holds at three.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-08-28 06:13:59 +05:00
committed by Abdul Wahab
co-authored by Claude Opus 5
parent 6dd15238c4
commit e0ec77b4bb
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/fixtures/antipatterns/text-occlusion.html
Vendored
+24
View File
@@ -47,9 +47,33 @@
.pass-scrubber-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; margin: 0; }
.pass-fixedbar { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; background: #b22;
color: #fff; display: flex; align-items: center; padding: 0 16px; }
/* ── PASS: text clipped by a scroll region, with an opaque bar right below it ──
getBoundingClientRect reports where a box would be if nothing cut it off, so
the lines that have scrolled past this panel's bottom edge still report
their full rects, and those rects land on the bar. Nothing overlaps: those
lines are clipped away, and scrolling brings them into the panel rather than
out from under anything. Any sticky footer or toolbar under a scroll region
has this shape, which is why it has to probe only where the text paints. */
.pass-scrollbox { width: 420px; height: 90px; overflow-y: auto;
background: #fff; border: 1px solid #ccd; }
.pass-scrollbox p { margin: 0 0 10px; padding: 0 12px; font-size: 16px; color: #222; }
.pass-scrollbox p:first-child { padding-top: 12px; }
.pass-underbar { width: 420px; height: 64px; background: #223; color: #fff;
display: flex; align-items: center; padding: 0 12px; font-size: 16px; }
</style>
</head>
<body>
<!-- First in the document on purpose: the probe only samples text in the
first viewport, and this case is about geometry rather than about where
on the page it sits. -->
<div class="pass-scrollbox">
<p>Palette and material, warm cream ground with hairline sepia rules</p>
<p>Type and composition, engraved italic names over small-caps labels</p>
<p>Topology and navigation, move by life stage rather than by index</p>
<p>Controls and state, align and overlay and compare and annotate</p>
</div>
<div class="pass-underbar">Scrolled-out lines report rects that land here</div>
<section>
<div class="flag-box-wrap">
<p class="flag-box-text">Root cause identified in four minutes</p>