diff --git a/tests/fixtures/antipatterns/text-occlusion.html b/tests/fixtures/antipatterns/text-occlusion.html index ba9139b7c..772ed4728 100644 --- a/tests/fixtures/antipatterns/text-occlusion.html +++ b/tests/fixtures/antipatterns/text-occlusion.html @@ -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; } + +
+

Palette and material, warm cream ground with hairline sepia rules

+

Type and composition, engraved italic names over small-caps labels

+

Topology and navigation, move by life stage rather than by index

+

Controls and state, align and overlay and compare and annotate

+
+
Scrolled-out lines report rects that land here
+

Root cause identified in four minutes