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

Harden detector against form.id shadowing and gradient/non-rendered false positives

Browse Source 
Fixes three detector bugs that surfaced on real-world (Shopify) URL scans:

#407 — DOM named-property shadowing crash. On a <form> with a named control
like <input name="id"> (every Shopify product form), HTMLFormElement's
[LegacyOverrideBuiltIns] behavior makes `form.id` return the input element, not
the id string, so `elId.startsWith(...)` throws and aborts the whole scan. Read
the id via getAttribute whenever `el.id` is not a string, at all three sites:
checkQuality (checks.mjs) and collectBrowserFindings + generateSelector
(browser/injected/index.mjs). Regenerated the browser bundle.

#408 — tiny-text / undersized-ui-text flagged non-rendered elements. On sites
that set html{font-size:62.5%} the root computes to 10px, so <script>/<style>/
<title>/<noscript> and display:none / visibility:hidden blocks — whose JS/CSS/
JSON-LD text clears the hasDirectText gate — produced dozens of phantom "10px
body text" findings. Added isNonRenderedText() (tag list + head descendants +
display/visibility) and gated both text-size floors on it.

#409 — contrast rules misjudged gradients. Case A: background-clip:text paints
its glyphs with the element's own gradient, not a backdrop, so measuring the
never-painted `color` against those stops is a guaranteed false positive; skip
the backdrop-contrast checks when bgClip is 'text' (the gradient-text pattern
flag still fires). Case B: a translucent gradient stop (e.g. a 9%-alpha accent
glow) was treated as an opaque accent; composite alpha stops over the resolved
surface beneath the gradient in resolveGradientStops(), dropping the stop rather
than guessing when that surface is unresolvable.

Fixtures + tests: shadowed-form-id.html (browser, #407), nonrendered-text.html
(#408), and gradient-clipped + alpha-glow cases added to color.html (#409).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-07-24 16:17:24 -07:00
co-authored by Claude Fable 5
parent 450d5659c7
commit 507725c935
8 changed files with 395 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cli/engine/browser/injected/index.mjs
+10 -3
View File
@@ -530,7 +530,11 @@ if (IS_BROWSER) {
function generateSelector(el) {
if (el === document.body) return 'body';
if (el === document.documentElement) return 'html';
if (el.id) return '#' + CSS.escape(el.id);
// Read via getAttribute when `el.id` is not a string — a <form> with a
// named control (e.g. <input name="id">) shadows the builtin getter and
// returns the element, producing a garbage `#[object …]` selector (#407).
const elId = typeof el.id === 'string' ? el.id : (el.getAttribute('id') || '');
if (elId) return '#' + CSS.escape(elId);
const parts = [];
let current = el;
@@ -1467,8 +1471,11 @@ if (IS_BROWSER) {
for (const el of document.querySelectorAll('*')) {
// Skip impeccable's own elements and any descendants (overlays, labels, banner, nav buttons)
if (el.closest('.impeccable-overlay, .impeccable-label, .impeccable-banner, .impeccable-tooltip')) continue;
// Skip browser extension elements (Claude, etc.)
const elId = el.id || '';
// Skip browser extension elements (Claude, etc.). Use getAttribute when
// `el.id` is not a string: a <form> with a named control like
// <input name="id"> shadows the builtin `id` getter and returns the
// element, whose `.startsWith` throws (issue #407).
const elId = typeof el.id === 'string' ? el.id : (el.getAttribute('id') || '');
if (elId.startsWith('claude-') || elId.startsWith('cic-')) continue;
// Skip the impeccable live-mode overlay (highlight, tooltip, bar, picker, toast).
// These are inspector chrome, not part of the user's design.