mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 08:36:25 +03:00
e2ff625b63
* Add oracle harness: verb goldens and function-level vectors
Records stdout/stderr/exit/files for every impeccable verb over a fixed
corpus and replays them against an alternate implementation. Adds a loader
hook that captures per-function call vectors from the pure engine modules.
Prepared with AI assistance (Claude Code).
* Oracle: hook, hook-before-edit, hook-admin cases and goldens
Prepared with AI assistance (Claude Code).
* Add docs/CLI-CONTRACT.md: observable behavior of every impeccable verb
Prepared with AI assistance (Claude Code).
* Oracle: context/doctor/pin/surface-brief/critique/palette/embed/signals/csp/seed/genimg/question cases and goldens
Prepared with AI assistance (Claude Code).
* Oracle: live-mode cases and goldens (roots, inject, wrap, insert, accept, session, manual edits, daemon)
Prepared with AI assistance (Claude Code).
* Oracle: mask the binary path before HOME; export launcher env to the binary
Prepared with AI assistance (Claude Code).
* detect: set process.exitCode instead of exiting after the final write
process.exit() right after a large piped stdout write truncated JSON output
at the pipe buffer boundary; found by the oracle harness. Re-record the six
directory-scan goldens that had captured the truncation.
Prepared with AI assistance (Claude Code).
* Oracle: normalize the hook-admin command in both runtimes' forms and audit chars
Prepared with AI assistance (Claude Code).
* Skill text: invoke the impeccable launcher instead of node scripts
Every `node {{scripts_path}}/<name>.mjs` becomes `{{scripts_path}}/impeccable <verb>`
(context-signals -> signals, hook-admin -> hooks). Setup step 1 drops Node, points
Windows shells without sh at impeccable.cmd, and says the launcher runs a
self-contained binary. allowed-tools follows.
Prepared with AI assistance (Claude Code).
* Scripts dir: replace the Node scripts with the impeccable launcher
skill/scripts keeps command-metadata.json and the page JS; every .mjs entry
point, lib/, and live/ are gone (the binary owns those verbs). Adds the POSIX
launcher, impeccable.cmd, VERSION (copied from the new root ENGINE_VERSION),
scripts/fetch-engine.mjs (bun run fetch:engine) to pull the pinned binary
into skill/scripts/bin/<os>-<arch>/, and gitignores that bin dir.
Prepared with AI assistance (Claude Code).
* Build: ship the launcher instead of bundling the JS engine
readSourceFiles no longer copies cli/engine into the skill; the scripts
payload is the launcher (executable bit preserved through dist, plugin/, and
universal.zip), impeccable.cmd, VERSION (synced from ENGINE_VERSION on every
build), the page JS, and command-metadata.json. Hook manifests call
`<scripts>/impeccable hook` behind an existence guard (Codex adds a
commandWindows sibling calling impeccable.cmd; Cursor runs hook-before-edit;
GitHub keeps the git rev-parse form; Grok mirrors Claude); the Node probe and
systemMessage notice are gone. build:release fetches the pinned engine for
every target (lenient) and stages bin/<os-arch>/ into the dist skill copies
after root harness dirs and plugin/ were synced, so git-delivered trees stay
launcher-only. The detection-rule count check reads the vendored
extension/detector/antipatterns.json and is skipped when absent.
build:browser is a stub; the codex prefix rewrite leaves
`{{scripts_path}}/impeccable` alone.
Prepared with AI assistance (Claude Code).
* CLI: turn the impeccable npm package into a platform-binary shim
cli/engine, cli/lib, and cli/bin/commands are gone; their behavior lives in
the engine binary. cli/bin/cli.js now resolves the binary from IMPECCABLE_BIN,
the @impeccable/cli-<os>-<arch> optional dependency (templates under
cli/platform-packages/, published by the engine release), the
~/.impeccable/bin/<version>/ cache, or a checksum-verified download, and
execs it. package.json drops the engine dependencies and the library
exports; puppeteer moves to devDependencies for the icon scripts.
README.npm.md describes the shim.
Prepared with AI assistance (Claude Code).
* Tests: gate behavior on the oracle and the engine binary
Unit tests of the deleted Node scripts and the JS detector are removed;
their behavior is pinned by tests/oracle goldens (frozen JS behavior plus
reviewed deltas) and the engine's own tests. tests/oracle.test.mjs replays
the corpus against the binary (IMPECCABLE_BIN or skill/scripts/bin/<target>/,
via tests/lib/engine-bin.mjs) and skips cleanly without one; the framework
fixture sweep drives live-inject, live-wrap, and detect-csp through the
binary the same way. record.mjs learns --bin. The function-level vectors
under tests/oracle/vectors/calls are committed as the frozen snapshot they
can no longer be regenerated from. Suites: core trimmed to build and
transformer tests, oracle added to the default run, detector/live reduced to
packaging and reference checks, the live-e2e helper tests move to the opt-in
live-e2e lane pending its retarget, cli-remote-e2e is an empty placeholder.
Prepared with AI assistance (Claude Code).
* Docs: describe the launcher, the engine pin, and the oracle gate
CLAUDE.md gains an Engine binary section (launcher lookup order, ENGINE_VERSION,
untracked binaries, how tests get one, the oracle as behavior gate, what stays
JavaScript) and drops the Node-script and JS-detector descriptions; the CLI
and detection-rule sections point at the shim and the engine repo. README.md
states the skill needs no runtime and lists the launcher-based hook commands;
AGENTS.md follows. CLI-CONTRACT.md's intro notes the scripts it quotes are
the recorded source, not the tree.
Prepared with AI assistance (Claude Code).
* Tests: tighten the hook command guard assertion
Prepared with AI assistance (Claude Code).
* Oracle: re-golden 46 cases for the engine's own command names; record them in DELTAS.md
Prepared with AI assistance (Claude Code).
* Build: ship launcher-only release zips by default
IMPECCABLE_BUNDLE_ENGINE=1 opts in to staging the engine binaries into the
dist skill copies. Bundling every target into every provider copy put
dist/universal.zip near 340 MB, past the 25 MB Cloudflare Pages file cap
that impeccable install downloads through.
Prepared with AI assistance (Claude Code).
* Tests: drive the live-e2e orchestrator through the engine binary
The session, fake-agent loop, steer test, and manual-edit probe spawn
<binary> <verb> (live-server, live, live-inject, live-wrap, live-insert,
live-accept, live-poll, live-complete) resolved by tests/lib/engine-bin.mjs
instead of node skill/scripts/live-*.mjs; the completion typing the agent
imported from the deleted live/completion.mjs is a small local helper. The
live-e2e helper unit tests move back into the default live suite (the steer
loop skips without a binary).
Prepared with AI assistance (Claude Code).
* Tests: run new-work-e2e through the engine's serve-question and generate-image verbs
Prepared with AI assistance (Claude Code).
* Tests: point the skill-behavior harness at the launcher and engine binary
The bash tool exports IMPECCABLE_BIN so the staged skill's launcher runs
without a download; scenarios assert on 'impeccable context' instead of
context.mjs and skip without a binary.
Prepared with AI assistance (Claude Code).
* Tests: note what plugin-e2e validates before and after the generated-output sync
Prepared with AI assistance (Claude Code).
* Oracle: record the engine's 'wasm-unsafe-eval' CSP meta patch as a reviewed delta
Prepared with AI assistance (Claude Code).
* Rebase reconciliation: fold main's post-freeze work into the swapped tree
The rebase onto origin/main brought changes whose JS engine halves left the
tree with the swap. This commit reconciles what survives:
- Suite map: register main's comp-fidelity unit tests (build-phase,
comp-diff, font-match, hero-checks) in the core suite and
live-browser-ignores in the live suite.
- Payload guard: the skill scripts payload now allowlists the comp-fidelity
build pipeline (comp-spec/comp-diff/build-phase/font-match and their libs),
the one Node toolchain that has not moved into the engine.
- Drop skill/scripts/live/project-ignores.mjs, lib/live-path-globs.mjs, and
their test: they import hook-lib/live-inject/impeccable-paths, which the
swap deleted, and their consumer (the JS live server) is the engine now.
- skill text: the comp pipeline's calls to engine verbs (generate-image,
embed-prompt) use the launcher spelling.
- Oracle: re-record 17 detect goldens over the fixture set main changed
(oklch #592, color-mix #578, 1D grid #615, the two comp-fidelity rules)
and record the gap in DELTAS.md; those JS rule changes are not yet ported
to the engine, and the goldens pin its current behavior.
bun run test (oracle included) and bun run build are green on this tree.
AI-assisted change: implemented with Claude Code.
Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WaJv2c4oN8wS7Ttq4XRqyx
* Launcher: engine-probe PATH validation, working .cmd download path; CI: drop stale path, add oracle job
Byte-identical copies of the engine repo's launchers (engine main
af7572c): the retired 3.x npm CLI on PATH or in ~/.impeccable/bin is
rejected by the engine-probe handshake instead of hijacking every verb;
impeccable.cmd's download path is rewritten as straight-line goto flow
(the parenthesized blocks expanded %url%/%cached% at parse time, making
it dead code) with certutil sha256 verification and a windows-arm64 ->
x64 asset fallback; the final error points at the release download
instead of npm i -g (npm still serves the 3.x CLI).
ci.yml: the generated-output check no longer diffs the deleted
cli/engine/detect-antipatterns-browser.js, and a new oracle job fetches
the pinned engine (bun run fetch:engine) and replays tests/oracle/
against it. The job is continue-on-error with a loud warning until the
first engine release exists; flipping it to required is a release-time
toggle, documented in the workflow.
Verified here: sh -n on both launcher copies, bun run build green, full
oracle replay against the rebuilt engine binary green (770 pass, 0
fail), and a launcher behavior test proving a fake 3.x CLI on PATH is
skipped while the download + checksum chain completes against a local
file server.
Prepared with AI assistance (Claude Code).
* Oracle: restore detector goldens to post-fix behavior after the engine ports
The Aug 17-31 detector fixes (oklch parsing, color-mix nested hex, 1D grid
pass, comment stripping, root-relative linked stylesheets, URL userinfo
redaction, inert ignore-value refusal) and the comp-fidelity rules
organic-clip-path / buried-raster are ported to the engine. Re-records the
gap-pinning detect goldens from the fixed binary (glow.html included: its
.photo-opaque-grad column now carries the buried-raster finding it was
written for), replays the frozen checkHtmlPatterns call vectors through the
last JS engine state in history (db1462b9^; args untouched, 14 of 101
results moved), and rewrites the DELTAS gap section into the landed-ports
note. Each re-recorded json fixture golden byte-matches that JS state's
output; oracle: 770 pass, 0 fail.
Prepared with AI assistance (Claude Code).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WaJv2c4oN8wS7Ttq4XRqyx
* Oracle: pin the Aug 17-31 verb fixes ported to the Rust engine
New cases: hook-session-grok-edit-then-stop (Grok Build camelCase envelope,
end_turn/shutdown/stopHookActive Stop handling, 35ae0733 + bfe634e2 +
3c442af7, #646), hook-session-codex-stop-decision (Codex Stop emits
decision/block, c9e7cd8a, #603), and doctor-order-boot-and-deep (boot and
deep findings keep their established artifact order, 80997663).
Re-recorded goldens whose old bytes froze pre-fix behavior, with a
DELTAS.md entry naming each upstream hash: the Stop finding-cache sync
(3c442af7), the Edit|Write manifests without the retired MultiEdit matcher
(7d5c60d2), and the failWithRollback field order (1f2c3f9d).
Prepared with AI assistance (Claude Code).
* Oracle: drop a duplicated DELTAS section
The verb-fix section landed twice when two porting sessions staged the
same file; keep one copy.
Prepared with AI assistance (Claude Code).
* Oracle: pin the hooks ignore-value inert-entry refusal
Three hadmin-ignore-value-inert-* cases record the engine's port of
be87f5eb (#662) to hooks ignore-value: an exact value for a rule whose
findings can never extract one is refused with the wildcard-plus-file
route (and no config write), while the wildcard scoped form for the same
rule is accepted. Goldens recorded from the engine binary and verified
byte-for-byte against the ea360025 hook-admin.mjs on the same sequences.
No existing golden changes, so no DELTAS entry is owed.
Prepared with AI assistance (Claude Code).
* Launcher: fail closed on a missing download checksum (engine triage C1)
Byte-identical sync of the engine repo's launchers: a freshly downloaded
engine binary now runs only after verifying against its .sha256 sidecar.
A sidecar that cannot be fetched, or a machine with no sha256 tool,
refuses the download instead of exec'ing an unverified binary; the
wget-only path fetches the sidecar too. Binaries already on PATH or in
the cache that pass engine-probe are unaffected.
Prepared with AI assistance (Claude Code).
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WaJv2c4oN8wS7Ttq4XRqyx
* Enforce engine-before-skill release order (triage D4)
The launcher, npm shim, and `impeccable install` all resolve the engine
binary for the pinned ENGINE_VERSION, so a skill/CLI release or a rust-swap
merge published ahead of the engine release + platform packages dead-ends
every install path. Add a mechanical guard:
- scripts/check-engine-release.mjs: verifies all five dist binaries +
.sha256 and the five @impeccable/cli-<os>-<arch> npm platform packages
exist for the pinned ENGINE_VERSION; names missing assets, exits non-zero.
Honors IMPECCABLE_DOWNLOAD_BASE.
- release.mjs: hard-fails release:skill and release:cli when assets are
missing; extension is exempt (vendored WASM detector, no engine exec).
- CI engine-release-ready job: runs the check, continue-on-error with a
loud ::warning until the first engine release exists (flip to false then).
- CLAUDE.md Releases: documents the enforced ordering.
Prepared with AI assistance (Claude Code).
* Oracle: re-record the Sep-1 verb fixes ported to the Rust engine
Five fixes landed on main in JS between the swap branch and its rebase and were
ported to the engine; the goldens they touch are re-recorded from the fixed
binary, each engine output first diffed byte-for-byte against the upstream JS on
the same inputs. DELTAS.md documents every case with its upstream hash.
- critique-* (usage/unknown/latest-existing/write-then-read/write-monorepo-child):
the #660 critique close path (identity + fingerprint freshness, ~NNNN
collision suffix, closed flag, close verb, latest --json). Upstream 5211bdf4.
- detect-* (new overused-font fixture cases, dir/scope/no-advisory sweeps):
the #678 overused-font primary-face change (a system stack keeps its system
face, so a Roboto fallback no longer flags). Upstream 2cfd6076.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WaJv2c4oN8wS7Ttq4XRqyx
* Tests: fix pre-existing release-guard staging on the swap branch
release.test.mjs was already red on the swap branch: release.mjs imports
check-engine-release.mjs and fetch-engine.mjs (the D4 engine release-order
guard), which the temp work tree never staged, so every dry run failed to
resolve the module instead of exercising the guard. Stage both modules and set
IMPECCABLE_SKIP_ENGINE_CHECK=1 so the guard does not probe the network; this
suite predates the guard and only covers the version/changelog/artifact checks.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WaJv2c4oN8wS7Ttq4XRqyx
* oracle: pin E8 stale-hook-manifest detector fallback (context)
Cover the v3-to-launcher upgrade fix (triage E8) recorded from the engine
binary and hand-reviewed:
- context-stale-hook-manifest: a .claude/settings.local.json naming the retired
`node .../hook.mjs` script under the claude-code provider emits
MANUAL_DETECTOR_REQUIRED, because the stale marker no longer counts as an
active hook (its script is gone after the update).
- context-launcher-hook-active: the same manifest in the launcher form still
suppresses MANUAL_DETECTOR_REQUIRED, confirming the launcher marker is
recognized as active.
The only difference between the two goldens is the MANUAL_DETECTOR_REQUIRED
block. No existing golden moved: every other context case runs under the source
provider, whose hook-manifest list is empty, so none of them scan a manifest.
Also null IMPECCABLE_PROVIDER_ID in the case BASE_ENV so a recording machine's
value cannot leak. DELTAS.md records the intentional divergence from JS parity.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WaJv2c4oN8wS7Ttq4XRqyx
* Tests: stop two harness hangs from wedging a whole run
Two suites could hang forever and never print a tally, because the one
mechanism that could interrupt the wedged work was missing on both paths.
Hang 1 (bun run test / build-phase.test.mjs): the test's run() helper
spawned every child with spawnSync and no timeout. spawnSync blocks the
test worker's thread, so node's --test-timeout (an event-loop timer)
cannot interrupt a child that wedges (a fork/exec blocked on OS resources
under concurrency, a gate's comp-diff grandchild, or a stray browser
launch). Bound every child with spawnSync timeout + killSignal SIGKILL so
a wedge becomes a fast, named failure the next test survives.
Hang 2 (bun run test:skill-behavior): runTurn called generateText with no
client-side deadline, so a stalled provider stream kept the fetch (and the
whole node process) alive past the per-test timeout, producing no tally.
Attach a real AbortSignal (default 840s, under the 900s per-test cap):
on expiry the fetch aborts, the turn throws, and the scenario
fails-and-continues. The unref'd timer is cleared on completion.
Runner backstops: run-tests.mjs now spawns each command as a detached
process-group leader and enforces a per-suite wall-clock cap that SIGKILLs
the entire group (workers, grandchildren, browsers) on expiry, with
SIGINT/SIGTERM forwarded so Ctrl-C still reaps the tree. The core node
batch gets a finite --test-timeout (180s); skill-behavior gets a 60min
group cap. Env overrides: IMPECCABLE_TEST_WALL_CLOCK_MS,
IMPECCABLE_SKILL_BEHAVIOR_TURN_TIMEOUT_MS,
IMPECCABLE_BUILD_PHASE_RUN_TIMEOUT_MS.
Proof: bun run test green twice (~60s); scoped claude-sonnet-5
skill-behavior sweep terminates with a tally (20 tests, ~32min) where the
840s abort caught a wedged redesign turn and the sweep continued instead
of hanging.
Prepared with AI assistance (Claude Code).
* launcher: export skill-dir env before the IMPECCABLE_BIN exec (sync engine fix)
Prepared with AI assistance (Claude Code).
* Node-free swap: comp-fidelity verbs move to the engine
The four comp-fidelity scripts (comp-spec, comp-diff, font-match, build-phase)
and their six libs are ported into the impeccable-engine binary. This removes
the last Node .mjs from the skill: `git ls-files skill/scripts | grep '\.mjs$'`
now returns nothing.
- reference/new-work.md, reference/visualize.md, and the asset-producer /
finish-reviewer agents now invoke `{{scripts_path}}/impeccable <verb>` instead
of `node <script>.mjs`.
- Deleted the ten ported .mjs and the four JS unit tests that imported them
(their behavior is now covered by the engine's Rust tests and the oracle);
removed those files from scripts/test-suites.mjs.
- Added oracle cases (comp-*, font-match-*, build-phase-*) over a comp-basic
workspace, recorded from the engine binary; the deterministic outputs are
byte-identical to the JS the scripts left behind.
- docs/CLI-CONTRACT.md documents the four verbs, the CDP font rendering, and
the runtime-resolved (never-committed) font-index catalog.
The font-index catalog JSON stays shipped in the skill (data/font-index.json);
the engine resolves it at run time and never vendors it.
Prepared with AI assistance (Claude Code).
* reorg: public plumbing for the in-repo Rust workspace and the two-release flow
The engine binaries move from the impeccable-dist channel to this repo's own
GitHub Releases (tag engine-v<ENGINE_VERSION>), and the closed detector the
engine links arrives as detector-v<DETECTOR_VERSION> releases on the same
repo. This commit wires the public side for that; the crates themselves land
in the next commit.
- Launcher (sh + cmd), npm shim, fetch-engine and check-engine-release now
download from github.com/pbakaus/impeccable/releases/download/engine-v<X>/.
- release.mjs gains `engine`: verifies ENGINE_VERSION against the platform
package pins and the detector release, tags, pushes; release-engine.yml
builds the five targets and publishes. check-detector-release.mjs is the
matching release-order guard (with tests).
- Root Cargo.toml (workspace, lto = false with the reason), rust-toolchain.toml
(exact pin), DETECTOR_VERSION, /target ignored.
- CI: rust + rust-windows jobs and an oracle job that replays the goldens
against a source build, warn-only until the first detector release exists;
ci-test-plan exposes a `rust` output.
- docs/ENGINE.md (the crate map and the closed-detector mechanism) and the
CLAUDE.md engine, release-order and rules sections.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* reorg C: the open Rust runtime joins this repo as one Cargo workspace
The engine no longer lives in a separate repo. `crates/` is a snapshot of the
open crates (foundation, core, common, context, live, hook, skills, comp,
comp-verbs, html, browser, detect, cli) plus `Cargo.lock`, taken as a git
archive of the engine repo at the commit that finished the boundary split.
None of that repo's history comes with it, and none of it should: the closed
half stays private.
The closed half is the rule engine. It ships as a prebuilt native archive per
target, `libimpeccable_detector.a`, published as a `detector-v<X>` GitHub
Release on this repo. `crates/core/build.rs` resolves and links it three ways:
`IMPECCABLE_DETECTOR_LIB=<dir>` for a local detector build, else the
`~/.impeccable/detector/<version>/<target>/` cache, else a download verified
against its `.sha256` sidecar. `crates/core` is a thin shim over a three-symbol
C ABI; nothing above it knows the boundary exists.
What changed versus the engine repo copy:
- Every crate manifest moves from `license-file.workspace` to
`license.workspace` (this workspace declares Apache-2.0), and the workspace
gains the `postcard` dependency the boundary encoding needs.
- The launcher contract test reads `skill/scripts/impeccable{,.cmd}` instead of
a sibling `launcher/` dir, and `engine_binary` downloads from
`github.com/pbakaus/impeccable/releases/download/engine-v<version>/` instead
of the retired dist repo. No oracle golden carried the old URL, so no
re-recording was owed.
- The tests that hunted for a public repo through `IMPECCABLE_PUBLIC_REPO`,
`../impeccable-second` or a hardcoded home directory now resolve the root as
`CARGO_MANIFEST_DIR/../..`, because they are in it. The env var stays as an
override for an out-of-tree checkout.
- The in-page bundle (`detect-antipatterns-browser.js`, 2 MB of generated wasm
glue) is no longer tracked. `crates/core/build.rs` resolves it beside the
archive, hands the path to `impeccable_core::browser::IN_PAGE_BUNDLE_JS`, and
live mode serves that. `scripts/check-detector-release.mjs` now requires it
and its `.sha256` in a detector release.
- The live crate embeds `skill/scripts/live-browser*.js` and
`modern-screenshot.umd.js` directly rather than through vendored copies, so
the binary and the installed skill cannot drift.
- `crates/browser/assets/` (an unused second copy of the bundle) is gone.
- `tests/lib/engine-bin.mjs` also accepts `target/release/impeccable`, so a
plain `cargo build --release -p impeccable` is enough to run `bun run test`.
Verified with the archive from a local detector build: `cargo test --workspace`
267 pass, oracle 795 pass / 0 fail / 0 missing, `bun run build` clean, the
default suite green, and the launcher's `engine-probe` handshake answering
through `skill/scripts/impeccable`.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* docs: bring RUNTIME-ENV and PORTING-GUIDE over with the runtime
They describe the binary's environment contract and the parity method every
crate here was ported with; both belong next to the crates now.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* core/build.rs: refuse a detector archive built by another rustc, in plain words
The archive links only against the exact rustc that built it; a mismatch
used to surface as pages of undefined std symbols from the linker. The
detector repo now writes rustc-version.txt next to the archive (and ships it
with the release); when it is present, build.rs compares it with its own
compiler and names both versions.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* build:extension: ship the wasm-core extension shell and vendor its detector from the detector release
`bun run build:extension` was broken on this branch: it still imported the
deleted JS engine (cli/engine/registry/antipatterns.mjs,
scripts/lib/browser-detector-bundle.js).
The shipped shell now matches the new design. The content script only
snapshots the DOM; an extension-owned offscreen document runs the
WebAssembly rule core over that snapshot, so the scanned page's CSP no
longer matters. That replaces the old approach of injecting a JS rules
bundle into the page. New files: extension/offscreen/offscreen.html, plus
the "offscreen" permission and a 'wasm-unsafe-eval' extension_pages CSP in
the manifest.
The manifest version stays at 1.3.3. The shell's own manifest carried
2.0.0; feature branches never bump versions, so the bump is a release step.
The five generated detector pieces (core.js, core_bg.wasm, snapshot.js,
overlay.js, antipatterns.json) are vendored at build time into the
gitignored extension/detector/ by the new scripts/lib/detector-bundle.mjs,
which resolves them the same three ways crates/core/build.rs resolves the
native archive: IMPECCABLE_DETECTOR_LIB/extension-detector/, the
~/.impeccable/detector/<DETECTOR_VERSION>/ cache, then a checksum-verified
download of detector-browser-bundle.zip from the detector release.
antipatterns.json is no longer regenerated here.
The zip packaging is unchanged. The Firefox variant still builds so
`web-ext lint` keeps covering the shared shell, but it cannot scan: Gecko
has no chrome.offscreen API. The build prints a one-line warning saying so.
Also here: a referenced-path check that fails the build when the manifest
or the service worker points at a file that is not in extension/, a
resolver unit test wired into the core suite, and the detector rule count
in the READMEs synced to the 61 the vendored registry carries.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* oracle: replay byte-for-byte on Linux too
The corpus was recorded on macOS and eight cases failed on ubuntu CI for
reasons that were all environment, not behavior:
- stageWorkspace returns the realpath of the staged dir. macOS's tmpdir is a
symlink and two goldens (context-dir-override, live-accept-source-locked)
had recorded that artifact; both re-recorded, reviewed in DELTAS.md. The
source-locked case now actually exercises the lock it is named for.
- context-lowercase-product-name declares platforms: ['darwin', 'win32'];
run.mjs skips such cases elsewhere and says so in the summary.
- The hook-project workspace's empty provider skill folders (.claude,
.cursor) are now tracked with .gitkeep; git cannot track empty
directories, so a fresh checkout had none and hooks on found nothing to
repair.
- crates/live's read_dir_raw sorts entries by name: the goldens hold the
order macOS returned, Linux returns hash order, and the source-candidate
lists in live-commit output depended on it.
macOS: 795 pass, 0 fail. The Svelte accept cases additionally need the
public repo's node_modules on the machine that runs them (CI now installs
them).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* oracle: mask <HOME> only at path boundaries (a short home like /root ate 'roots.json')
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* oracle: track live-html's dist/generated.html (the root dist/ ignore hid it from CI checkouts)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* release-engine: darwin-x64 builds on macos-14 (macos-13 is retired)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Open the detector: the rule crates join the workspace, the C-ABI goes away
The detector is open source. The rules it ships were already public in this
repo's git history and in every npm tarball of the JS engine, so a closed
binary bought nothing it could keep; the moat is the service (the catalog,
the labs, the review pipeline), not the check functions. Keeping them behind
a prebuilt archive cost a C-ABI, an exact toolchain pin, a build-time
download, a second release to order ahead of every engine release, and a
serde layer that had to serve two encodings.
Deleted
- crates/core/src/ffi.rs, crates/core/build.rs, crates/core/tests/boundary.rs
and the shim modules under src/checks and src/browser.
- crates/foundation/src/boundary.rs and the postcard dependency.
- DETECTOR_VERSION, scripts/check-detector-release.mjs and its test, the
check:detector-release script, the detector gate and
IMPECCABLE_SKIP_DETECTOR_CHECK in scripts/release.mjs.
- scripts/lib/detector-bundle.mjs and tests/detector-bundle.test.mjs (the
vendoring path for the closed browser bundle).
- scripts/build-browser-detector.js and the build:browser script (a stub
since the JS engine left the tree).
- xtask's detector-archive subcommand and its public-repo lookup.
Came back
- crates/core is now the rule logic itself: every check_* / scan_*, the
browser adapters, the visual-contrast decisions. It re-exports foundation
as before, so no consumer changed. Its vectors dispatcher is the union of
both id tables again, and tests/vectors.rs replays the frozen vectors
straight through it.
- crates/wasm and crates/xtask join the workspace. cargo xtask bundle builds
the in-page bundle from browser-bundle/ plus the wasm core, writes
dist/, refreshes the tracked crates/live/assets/detect-antipatterns-
browser.js, and writes extension/detector/. bun run build:extension runs
it instead of downloading.
- crates/live/assets/detect-antipatterns-browser.js is tracked again; live
mode embeds it and serves it as /detect.js.
- Serde is back to plain derives: no is_human_readable branch in
js::json_number, derived Serialize for Rgba and BrowserFinding with their
skip_serializing_if attributes.
- profile.release has lto = "fat" again; rust-toolchain.toml is plain
stable plus the wasm32 target. The rust, rust-windows and oracle CI jobs
lose continue-on-error and can be required.
Verified
- cargo build --workspace --all-targets: clean, no warnings.
- cargo test --workspace: 346 pass, 0 fail (the 8 boundary tests are gone
with the boundary).
- cargo build -p impeccable-wasm --target wasm32-unknown-unknown --release: ok.
- cargo xtask bundle && cargo xtask bundle --check: reproducible; the
regenerated bundle is committed (it differs from the archived one, which
was built with a pinned rustc and lto = false).
- cargo build --release -p impeccable: no linker warnings, 12.5 MB (the
same source at lto = false is 13.1 MB).
- oracle: 795 pass, 0 fail, 0 accepted deltas, 0 missing goldens.
- bun run build, bun run build:extension, web-ext lint (0 errors,
8 warnings), bun run test: 363 + 80 + 1 + 1 + 133 + 180 + 4 pass, 0 fail.
- impeccable detect --no-config --json tests/fixtures/antipatterns: 128.7 ms
median of 5.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* core: doc comments drop the open/closed split
The rule crate and the foundation crate are both Apache-2.0 in one
workspace now, so "open", "closed" and "crosses the boundary" no longer
describe anything. Comments only.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Rule packs: downstream crates add rules on all three engines; wasm detect surface
A crate that depends on this workspace can now add rules without forking
it. `impeccable_core::rule_pack::RulePack` (object-safe, Send + Sync +
Debug) carries a pack's registry rows plus three hooks that default to
empty: `check_text` for the text engine, `check_element_dom` and
`check_page_dom` for the browser driver. `impeccable_html::StaticRulePack`
adds `check_document` for the static engine, where the document model
belongs to the html crate and detect cannot name it.
The registry keeps ANTIPATTERNS as the built-in list; `registry::extend`
appends a pack's rows and every lookup consults them after the built-ins,
so a pack can never shadow a built-in id (extend panics on a collision and
is idempotent per slice). `all_antipatterns()` is the built-ins followed by
the registered rows.
Hook order, chosen so built-in output cannot move:
- detect_text: after every matcher, analyzer and the dedupe, before inline
ignores, so `impeccable-disable` waives pack rules like built-in ones.
- detect_html_source: after the element rules, the design-system merge and
the page passes, again before inline ignores. One pack pass per HTML
file: the document hook when set, otherwise the text hook over the raw
source, so a pack implementing both never reports twice.
- collect_browser_findings: the element hook at the end of the per-element
loop through the same disabled-rules filter and group, the page hook
after every built-in page pass with the same el-or-body attribution.
A pack travels on TextOptions / ScanOptions, DetectHtmlOptions
(static_rule_pack plus rule_pack), StaticHtmlEngine, and BrowserConfig
(serde-skipped: a pack is a Rust value, not JSON from the page). The
shipped binary installs none.
`crates/wasm --features detect` exposes the two file engines as JSON
exports for hosts that cannot exec the binary: `detect_text_json` and
`detect_html_source_json`, options `{ inlineIgnores?, designSystem? }`,
returning the findings array `detect --json` prints. `antipatterns_json`
now includes a pack's rows. `set_rule_pack` and `set_static_rule_pack` are
Rust-only, for a crate that links this one as an rlib.
Tests: registry extension and collision in foundation, one test pack per
engine (crates/core, crates/detect, crates/html tests) proving each hook
fires, that the built-in findings are unchanged, and that the waivers and
the disabled-rules list cover pack rules, plus the wasm export shapes.
Workspace tests 346 to 361, oracle 795/0 unchanged.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* docs: the cutover checklist under the open design
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* bundle: the page JS and the bundler become a library crate downstream packs can reuse
The in-page bundle, the extension pieces, the registry JSON and the
wasm-pack call were reachable only through `cargo xtask bundle`, which read
`browser-bundle/*.js` from the repo root. A downstream crate that links
impeccable-core + impeccable-wasm with its own rule pack had to copy the
page JS to produce a detector bundle for its module.
They move to `impeccable-bundle` (crates/bundle), which embeds every
`browser-bundle/*.js` with `include_str!` and exposes `in_page_bundle`,
`extension_pieces`, `registry_json`, `check_capture_contract` and
`wasm_pack_build`. Nothing writes files or exits the process; the caller
places the bytes. `registry_json` now reads `all_antipatterns()`, so an
installed pack's rows land in `antipatterns.json` too (no built-in change).
xtask becomes the workspace's caller and writes the same files to the same
places; `cargo xtask bundle` is byte-identical, tracked live asset included.
`IMPECCABLE_BUNDLE_SKIP_WASM_PACK` is the skip switch's new name, the old
`IMPECCABLE_XTASK_SKIP_WASM_PACK` still works.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* The immediate tier moves to the registry, and reaches wasm
The design hook's immediate-tier list is the set of rule ids worth fixing
at the edit site, and a downstream reviewer wants the same set to decide
how loudly a finding is reported. `impeccable-hook` is native-only, so the
list moves to `impeccable_core::registry` (the hook re-exports it) and the
`detect` feature gains `immediate_tier_rules_json()`.
The export is behind `detect`, which the in-page bundle does not build, so
the tracked browser asset is unchanged.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* docs: Pristine tracks the engine by revision pin, not npm
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* docs: the cutover checklist is maintainer-side, not part of the tree
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: Fix flat type hierarchy false positives (#702)
Upstream sha 84728e9ce4.
The rule now reads rendered semantic roles and the dominant size per role
instead of the raw set of font sizes on the page, and it fires only when
every adjacent role step is under 1.25x.
- crates/core checks::rules gains TYPE_HIERARCHY_SELECTOR / MIN_ROLES /
MIN_STEP_RATIO, typeHierarchyRole, dominantTypeRoleSize and
checkFlatTypeHierarchySamples, the shared half of checks.mjs.
- crates/core browser::page_checks gets checkFlatTypeHierarchyFromDoc over
the Dom trait, with the overlay skip selector checkTypography passes.
- crates/html page.rs gets the same walk over StaticDocument.
- crates/detect drops the source-only analyzer: flat-type-hierarchy leaves
REGEX_ANALYZERS, the text-content analyzers shift to index 1, and
analyzer_rule_id loses its first row.
- crates/html cascade defaults gain contentVisibility, and crates/foundation
registry carries the reworded description.
Goldens re-recorded (the binary now matches origin/main's JS engine on every
one of these fixtures, verified by scanning the shared corpus with both):
glow, icon-tile-stack, layout, modern-color-borders, motion,
named-color-borders, numbered-section-markers, oklch-neon-text,
typography-should-flag, json and text.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: Fix detector URL scans and advisory handling (#709)
Upstream sha fa44839f72.
Advisory handling. `severity` becomes the canonical registry field: the
`advisory` bool leaves `Antipattern`, `advisory_rule_ids` filters on
`severity == "advisory"`, and `derive_advisory_flag` stamps the finding's
`advisory: true` from the effective severity, so a per-finding promotion or
demotion carries the flag. The html and browser engines call it after their
severity override; the detect CLI and the hook accept either spelling; the
driver's serializer and the wasm registry exports derive it the same way.
em-dash-overuse moves from `advisory: true` to `severity: "advisory"`.
URL scans. `expand_joined_url_targets` splits an argv value that is entirely
whitespace-separated URLs and leaves paths with spaces alone. The browser
driver reads the readable linked-stylesheet corpus into the HTML pattern
corpora and resolves a finding's selector with `selector_nodes_for_live_dom`
/ `pseudo_element_host_selector`, so an unresolvable selector drops the
finding instead of keeping it page-level. The CSSOM walk itself is page JS:
`browser-bundle/15-snapshot.js` gains `__snapLinkedStylesheetText` (grouping
rules flattened, container-query probes, effective keyframes) and puts it in
the snapshot as `linkedCss`; `10-probe.js` exposes the same for the in-page
route, and the Dom trait carries `linked_stylesheet_text`.
Also `enclosing_css_selector` blanks comments before hunting the previous
declaration delimiter, and `check_typography` reports the uniquely most-used
family instead of every family over a 15% share.
Verified: `impeccable detect --no-config --json tests/fixtures/antipatterns`
is now byte-identical to `node cli/bin/cli.js` on an origin/main worktree
over the shared corpus (432 findings). The two changed lines in
tests/oracle/vectors/calls/rules.checks/checkHtmlPatterns.jsonl were
re-recorded by running origin/main's `checkHtmlPatterns` over the frozen
args; only the comment-polluted selector changed. Goldens re-recorded for
the advisory partition (config-*, fixture gemini/gpt-tells,
numbered-section-labels, scoped-ignore, shape-assembled-illustration,
color, em-dash-entities) and the help text, each cross-checked against the
JS on origin/main.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: stop gray-on-color false positives on Tailwind opacity and JSX (#707)
Upstream sha 32b270f4e8.
`find_solid_chromatic_bg` replaces the bare `bg-<hue>-<n>` match in both
engines: a `bg-blue-500/10` tint is a wash, not a solid fill. The `regex`
crate has no lookahead, so the maximal digit run plus the word boundary is
matched as before and the byte after it is tested for `/`.
The text engine gains the JS-source scanner (`scan_js`) and the scope
helpers on top of it: `containing_markup_tag` keeps a gray text class from
pairing with a background in a sibling tag on the same line, and
`find_ternary_split` / `exclusive_class_scopes` split a `cond ? a : b`
class expression into its arms, recursing into nested ternaries, ignoring
`?.` and `??`, and keeping a common prefix and post-ternary suffix in every
arm. `MatchCtx` now carries the match offset the scope lookup needs.
Verified against origin/main's JS: all eleven cases from the upstream test
file plus a nested / nullish / suffix set produce byte-identical findings on
both engines; they are pinned as Rust unit tests in `regex_matchers` and
`checks::rules`. The shared fixture corpus stays byte-identical.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: resolve unique --target names in monorepos (#706)
Upstream sha 8b326fc81e.
`resolve_target_path` / `find_unique_bare_target` in `crates/context`: a
`--target` that does not exist and reduces to a single path segment under
cwd resolves to the one workspace candidate with that name, so `--target a`
selects `apps/a`. A caller that already absolutized the name against cwd
(live and the other helpers do) takes the same route. Ambiguous or unknown
names still report the miss.
The context CLI resolves the target once and hands the resolved path to
`load_context`, replacing `path_exists_for_target`.
Oracle: four new `context-monorepo-target-bare-*` cases (bare name,
absolutized bare name, unknown name, bare name from a child cwd).
`context-monorepo-target-b-inherits` was re-recorded: resolving the target
before `load_context` changes its `surfaceBriefReason` from `not-found` to
`invalid-target`, which is what origin/main's `context.mjs` prints for the
same run.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: Fix Next.js 16 CSP and parent hook discovery (#710)
Upstream sha 672ca29642.
CSP. `detect-csp` recognizes Next.js 16's `proxy.{ts,js,mjs}` request hook
beside `middleware.*`, but only where it sits at a project root or its `src/`
directory: the scan root itself, or a nested directory carrying a Next
project marker (a `next.config.*`, an `app` / `pages` dir, or a `next`
dependency). A same-named helper elsewhere in the tree is not the framework
hook.
Context. `find_git_boundary_root` gives `resolve_project` a git-boundary
notion: an explicit target inside its own repository resolves against that
repository, and an external target resolves against its own root, so caller
context never leaks across the boundary. `hook_manifest_search_roots`
replaces the cwd/projectRoot/repoRoot triple with a walk up from the
project root that stops at the first git boundary, and each root's own hook
lifecycle config is honored before its manifest counts as coverage.
Verified against origin/main's JS: nine `detect-csp` placements and five
hook-discovery scenarios (enclosing harness root, that root disabled,
sibling target, nested git target, markerless nested git target) produce
identical output.
Oracle: five `csp-proxy-*` cases and five `context-hook-*` /
`context-markerless-nested-git-target` cases. Four route-target goldens were
re-recorded because #710 resolves a `/`-prefixed target outside the
workspace; each was cross-checked against origin/main, and
`surface-brief-write-route` has a DELTAS entry for the one wording
difference (an unwritable filesystem root).
`tests/framework-fixtures.test.mjs`'s new proxy-placement block came in from
the merge importing the deleted `detectCsp`; it now drives `detect-csp`
through the binary like the rest of that file.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: fail URL scans when the browser is unavailable (#711)
Upstream sha f2f9958be1e6a4ecb1fbd5ef1ae1b7d9c53e0d24 (Fix: fail URL scans
when the browser is unavailable).
`detect` gains an operational-failure flag. Exit 1 now means at least one
requested target could not be scanned, and it takes precedence over exit 2,
because findings from the targets that did scan do not turn a partial scan
into a complete one. The flag is set by an unreachable path, an unreadable
directory or file in a dir walk, a per-file scan that throws, a URL scan
that throws, and a shared-browser setup failure.
- `walk_dir_reporting` and `build_import_graph_reporting` take a read-error
callback; the plain wrappers stay for callers that do not report. A file
the graph could not read is skipped for the scan too.
- `SharedBrowser::ensure_launched` is the eager half of
`createBrowserDetector()`: the CLI brings the browser up before the loop so
a launch failure prints one `Error:` line and every URL target is skipped,
instead of the lazy launch reporting once per URL.
- The static engine and the text path spell a permission failure the way Node
does (`EACCES: permission denied, open '<path>'`), which is what
`Error: cannot scan <target>: <message>` prints.
- Usage text and docs/CLI-CONTRACT.md carry the exit-status block.
Verified against origin/main's JS: missing target, missing target alongside a
flagging file, unreadable file, unreadable file beside a readable sibling,
unreadable directory, unreadable nested directory, a clean scan, and a
browser-unavailable scan of one and of two URLs all agree on exit code,
stdout and stderr (the browser-not-found wording is the pre-existing
puppeteer-vs-discovery difference).
Oracle: `detect-missing-file` and `detect-missing-file-json` re-recorded at
exit 1, plus new `detect-missing-file-with-findings`,
`detect-unreadable-file-json` and `detect-unreadable-file-in-dir`, each
cross-checked against origin/main. `detect-help` carries the new block.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: OpenCode slash command bridge (#483)
Upstream sha 9736a9f6e9.
OpenCode does not honor `user-invocable: true` on SKILL.md frontmatter, so a
pinned skill never reaches its slash menu. `pin` now writes
`commands/impeccable-<cmd>.md` on the OpenCode command schema instead, and
skips `.opencode` in the SKILL.md loop so no unreachable
`.opencode/skills/<cmd>` is left behind. `unpin` mirrors it, marker-guarded,
and reaches both scopes even when the skill itself is gone.
`find_opencode_commands_dirs` covers the project-local dir when the project
has the skill and the user config dir when Impeccable is installed globally,
resolving that dir the way the CLI does (`OPENCODE_CONFIG_DIR` ->
`XDG_CONFIG_HOME/opencode` -> `~/.config/opencode`).
The build-tooling half of the upstream change (transformers, the OpenCode
command the build generates, `root-commands-sync`) came in with the merge and
needed no port.
Verified against origin/main's pin.mjs across seven scenarios (no harness,
project scope, user scope, a foreign command file, pin then unpin, unpin over
a foreign file, unpin with nothing pinned): identical stdout, identical file
sets, identical file contents apart from the one deliberate difference.
Oracle: five `pin-opencode-*` cases, with a DELTAS entry for the bridge body
naming the launcher rather than `node .../context.mjs`.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: Fix Codex skill version metadata (#703)
Upstream sha 482368511a.
Codex's validator rejects unknown top-level keys, so the Codex and `.agents`
skills now carry `version` under the spec-defined `metadata:` map. Both
version readers learn the same parser: `parse_skill_frontmatter_version` in
`crates/context` (the boot update check) and `extract_version` in
`crates/skills` (`getSkillsVersion`). A metadata version wins, a legacy
top-level one still reads, only the map's own indent level counts, tabs count
as two spaces, and a comment line is skipped.
The build-tooling half (`versionInMetadata` on the two providers, the YAML
emitter's nested-object branch) came in with the merge.
Fourteen frontmatter shapes were recorded from origin/main's
`parseSkillFrontmatterVersion` and pinned as unit tests in both crates.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: Fix skill subcommand help handling (#708)
Upstream sha a264199177.
`install`, `link`, `update` and `check` render static help before entering
any operational path, through both the top-level verb and the legacy `skills`
namespace, for `--help` and `-h` alike.
Verified against origin/main's `cli/bin/cli.js`: all six spellings produce
identical text and exit codes.
Oracle: a new `tests/oracle/cases/skills.mjs` with seven help cases. Only the
help paths are pinned there; every other installer path writes into harness
directories or reaches the network.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Oracle: goldens for the three fixtures the merge added
`tests/fixtures/antipatterns/` gained `flat-type-hierarchy.html` (#702) and
`linked-url-patterns.{css,html}` (#709) with the merge, so the corpus
generator produced six `detect-fixture-*` cases with no goldens and the
directory-wide cases (`detect-dir-*`, `detect-scope-*`, `detect-no-advisory-*`)
moved.
Every golden here was recorded from the binary and then cross-checked against
`node cli/bin/cli.js` on an origin/main worktree over the same files: the six
per-fixture cases agree byte for byte in JSON and text, and a full scan of
`tests/fixtures/antipatterns` produces 432 findings identical on both engines
after normalizing the repo path.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Port: the installer half of the OpenCode command bridge (#483)
Upstream sha 9736a9f6e9, the part of it that
lives in `cli/bin/commands/skills.mjs` rather than `pin.mjs`.
`copy_provider_commands` mirrors `copy_provider_skills` for a provider's
compiled `commands/` dir: project scope writes `<root>/<configDir>/commands`,
user scope writes the config dir OpenCode actually scans
(`OPENCODE_CONFIG_DIR` -> `XDG_CONFIG_HOME/opencode` -> `~/.config/opencode`),
and a pre-#406 global install at `~/.opencode/commands/` loses exactly the
files just written while siblings, symlinked dirs and home-rooted git repos
are left alone. It runs on install, on the reinstall refresh, on update, and
on link, which is the only path that can deliver the bridge to a linked
install.
`is_up_to_date` now compares the bundle's command files too, so an install
whose skills match but whose bridge is missing or drifted refreshes instead of
reporting success while the slash command stays absent. Only bundle-shipped
files are compared, so a pinned shortcut never affects freshness.
`tests/copy-provider-commands.test.js` arrived with the merge importing the
deleted `cli/bin/commands/skills.mjs`; its scenarios are ported to
`crates/skills/tests/provider_commands_tests.rs` (project scope, the three
user-scope dir resolutions, the legacy migration and its two guards, a
provider with no commands dir, and the four `isUpToDate` command-awareness
cases), and the file is removed and deregistered.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* CI: the first full run on the branch, three fixes
- The oracle harness masks the climb to the root a /-prefixed target
produces (<UP_TO_ROOT>/): the number of `../` is the staged tmpdir's depth
(7 on macOS, 2 on Linux), not the verb's behavior. surface-brief-path-slash
re-recorded.
- Two context test helpers canonicalized their temp dir, which on Windows
yields a \\?\ verbatim path that takes `/` literally; they strip the prefix
like Node's realpathSync. The critique-storage identity test compares
against the platform's own resolved path.
- Every job that drives the binary end to end (live-e2e smoke and full,
accept-cleanup, the DeepSeek sweep, the remote CLI smoke) builds it from
the checkout first; before, they looked for a release that does not exist.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* context tests: the verbatim-prefix strip spells the prefix once
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* context test: derive the snapshot identity from the verb's own resolver
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* context test: JSON-quote the snapshot identity, as the verb does
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* detect test: import resolution against platform-form paths
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* hook test: the stock cache path in the host's path form; Windows CI runs every crate's tests before failing
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: skills tests pass on Windows
The two test temp roots kept `canonicalize`'s `\\?\` verbatim prefix, and the
kernel takes a verbatim path literally, so every `/`-joined path built under
them was an invalid filename. Strip it the way Node's `realpathSync` does.
The manifest, artifact and sibling-binary expectations hard-coded POSIX
separators for paths the product joins with the host's semantics; derive them
from `jsp::join` instead.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: hook tests pass on Windows
Same verbatim-prefix strip on the test temp roots, plus expectations derived
from the helpers the product uses: cache keys and scan targets from
`jsp::join`, the config path in an admin message from the same relative form
`path.relative` renders, and the footer hints from `quote_command_arg`, which
deliberately switches to the double-quoted Windows form (#476 / #533). The
env lock no longer poisons the sibling tests when one of them fails.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: html oracle goldens compare on Windows
The goldens pin the `<REPO>`-masked fixture path recorded on POSIX. Mask, then
render the remainder with `/` so a Windows checkout's backslashes are not read
as a finding difference. The goldens are untouched.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: widen the live read-deadline test's margin
Timing only. The watchdog polls in 50ms steps against a ~15.6ms Windows system
timer while the crate's tests run in parallel, so the later request takes its
turn later there. The bound stays far under the 60s read timeout a
deadline-less read would hold the ticket for, so the test still distinguishes
the fix from the regression.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: the request read deadline was not enforced on Windows
Windows does not unblock a `recv` already parked in the kernel when another
thread calls `shutdown` on the same socket, so the watchdog could not end a
silent connection's read and it held its turnstile place for the whole 60s
header timeout instead of the 10s deadline. Bound the read at the socket too,
which enforces the same deadline everywhere; the watchdog stays as the backstop
for a connection that trickles bytes without ever completing a request. POSIX
behavior is unchanged: the watchdog already closed the socket at the deadline.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: hook tests derive the rest of the host path forms
The test temp helper's `write` returned a `PathBuf::join` result, which keeps
the `/` inside the relative part and so does not match what the hook resolves a
relative target to on Windows. Three more admin messages and the cache-root slug
pinned the POSIX spelling of paths the product renders with the host's
semantics (`path.resolve` also prefixes the current drive there).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: skills test fixtures name USERPROFILE, and the win32 quoted form
`os.homedir()` reads USERPROFILE on Windows, so a fixture home that named only
HOME sent the global installs into the runner's real profile. The Windows hook
command carries the JSON-quoted path, so a host path's backslashes arrive
escaped; derive the expectation instead of pinning the POSIX spelling.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: check the oracle fixtures out with LF
A finding's snippet carries the scanned file's own bytes, and the goldens were
recorded from a POSIX checkout, so a CRLF checkout of a linked stylesheet reads
as a finding difference. The goldens are untouched.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* windows: check the grok global-install manifests as JSON
The Windows hook command carries the JSON-quoted launcher path, so the path's
backslashes are escaped once inside the command and again by the manifest file
itself. Read the manifest as JSON and look for either quoting form instead of
counting escaping layers in a raw substring match.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* npm shim: refuse a download with no verifiable sidecar
The skill launcher and `impeccable install` both fail closed when a
release binary's `.sha256` sidecar cannot be fetched or carries no hash:
they refuse rather than cache an unverified binary. The npm shim did not.
It only compared when a hash was present, so a 404, an empty sidecar, or
a truncated one all wrote the payload straight into
`~/.impeccable/bin/<version>/` and exec'd it.
It now refuses in the same cases, with wording that matches the launcher,
and writes nothing until the hash matches, so a refusal leaves the cache
dir empty. IMPECCABLE_BIN and the optional-dependency lookup are
untouched: neither downloads.
tests/cli-shim.test.mjs runs the real shim against a throwaway HTTP
server and covers missing, empty, and mismatched sidecars, plus the
matching-sidecar and IMPECCABLE_BIN paths. The two refusal cases fail
against the old shim.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Oracle fixture: declare the vite plugin the web workspace imports
`live-workspaces/apps/web/vite.config.js` imports `@vitejs/plugin-react`
but the workspace's package.json listed only `vite`. No oracle case
installs or evaluates that config (the three `live-boot-workspaces-*`
cases stop at root resolution), so the fixture was never wrong at
runtime, only self-contradictory to read. Adding the devDependency keeps
the goldens byte-equal.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Vectors: drop the 12,208 byte-identical repeat lines
The recorder deduplicated by arguments per run, not across runs, so the
frozen call snapshot arrived with 12,208 lines (43% of 28,266) that
repeat an earlier line byte for byte. Every one re-asserts what its first
occurrence already asserts, and `crates/core/tests/vectors.rs` replays
line by line with no count anywhere, so removing them changes nothing it
checks: the replay still reports 8,321 pass, 0 fail.
Duplicates were removed with `awk '!seen[$0]++'`, keeping first
occurrences and file order, and every changed file was checked to equal
that transform of its old contents. No line was added, reordered, or
rewritten, and no vector file gained or lost a distinct call. The tree
drops from 9.2 MB to 5.7 MB.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Fix: restore the live overlay's disabledValues waivers in the engine
The JS engine applied value-level ignore waivers at the tail of
collectBrowserFindings: `_disabledValues` read the entries the live
overlay resolved for the page (skill/scripts/live-browser-ignores.js
sends them as config.disabledValues), and filtered the assembled
findings by the value each one reported, with design-system-color
compared by color value rather than by spelling so a hex waiver
suppressed a finding the browser reported as rgb(...). The Rust port
dropped that stage: `disabledValues` appeared nowhere in the workspace
or in browser-bundle, so a project entry like
[detector]
ignoreValues = [{ rule = "overused-font", value = "geist mono" }]
stopped reaching the overlay. The rules the CLI and the edit hook waive
kept drawing markers and counting toward the badge.
Restore it end to end:
* BrowserConfig gains `disabled_values`, parsed leniently so a
hand-edited __IMPECCABLE_CONFIG__ entry of the wrong shape is dropped
rather than failing the whole config, the way the JS filter did.
* The driver applies the waivers after every pass, so a rule pack's
findings are covered the same way the built-in ones are, honoring the
entries only in extension mode exactly as the JS read them. The
normalizer, the value extractor (including the rule that bounce-easing
without a direct ignoreValue offers no value) and the hex/rgb color
key are ported alongside it.
* collectConfigJson in the in-page bundle and configJson in the
offscreen bundle forward the field. The extension never sends it, so
its behavior is unchanged.
Coverage: two driver unit tests (suppression by font value, by hex
waiver across the rgb spelling, and the extension-mode gate; plus the
config parse and the normalizers), a skipScan test that pins the empty
shape for every stage the core produces, and
crates/wasm/tools/disabled-values-check.mjs, a browser-backed check
ported from the retired tests/detect-antipatterns-browser.test.mjs case
that the swap left without a replacement. Against the previous bundle it
fails on exactly the three waiver assertions and passes the skipScan
one, which is the shape of the regression.
Two related review findings were checked and are not defects. skipScan
is gated on extension mode in both the driver and the bundle, which is
what the JS did (index.mjs#skipScanActive), and the live overlay runs in
extension mode: live-browser.js sets `s.dataset.impeccableExtension` on
the injected /detect.js tag, and the overlay's whole detect toggle
travels over the postMessage loop that 50-scan.js installs only under
EXTENSION_MODE. The visual contrast stage is not leaking either:
collectBrowserFindingsAsync and scan() both consult skipScanActive(),
and the offscreen path skips its visual pass on config.skipScan.
The tracked live asset is regenerated (cargo xtask bundle). The oracle
replays with zero unreviewed differences: the new field defaults empty
and the filter is inert without it, and no CLI path sets extension mode.
AI-assisted change: implemented with Claude Code under maintainer
direction.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Shim test: run from a staged copy and prove the download happened
The three fail-closed cases cleared IMPECCABLE_BIN and pointed
IMPECCABLE_HOME at a temp dir, but locate() prefers an installed
@impeccable/cli-<os>-<arch> before the cache or a download. Those
platform packages ship with every engine release and are a merge
prerequisite, so as soon as one is installed under the repo the cases
would resolve it and go green without fetching anything. Confirmed by
hand: with a platform package staged in node_modules, running the shim
against an unreachable download base still exits 0 from the package.
The shim now runs from a throwaway copy at <tmp>/cli/bin/cli.js beside a
copy of the repo's package.json, with no node_modules on the lookup path
above it, so require.resolve of the platform package fails the way it
does on a machine without the optional dependency. Production code is
unchanged; there is no test-only branch in the shim.
The fixture server also records every request now, and each download case
asserts the asset and sidecar URLs were actually requested, so a future
lookup shortcut fails loudly instead of passing on an untested path. A
sixth case installs a fake platform package next to the staged shim and
asserts the shim prefers it with the server untouched, which pins the
precedence the other cases depend on being absent.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Live: the loader now hands off when the resume is the arrival
The overlay could sit in its generating shader over a DOM that already
held all three variants, and only a page refresh cleared it (#719).
The server's generation preflight runs live-wrap with
--defer-source-write, so the wrapper and every variant reach the DOM in a
single HMR batch. The deferred-wrapper scout is constructed at init and
the variant MutationObserver at Go; observer callbacks run in
construction order, so on that batch the scout resumes first and
resumeSession, not the observer, is the transition into CYCLING. It set
the state and the bar but never called hideShaderOverlay(), so the frozen
capture of the original stayed painted over the variants. It also
reported browser_resumed, which does not count as publication progress,
and then disconnected and re-created the observer, dropping the records
that observer had already queued for the same batch, so variants_ready
never fired at all.
resumeSession now finishes the same transition the observer does (shader
down, inline edit off, insert session finalized, params panel rebuilt)
and reports variants_ready when it already holds every variant. The
deferred scout names itself in the journal as
browser_resumed_deferred_wrapper, so the two resume paths are no longer
indistinguishable.
Wrapper resolution goes through findVariantsWrapper, which prefers a
wrapper that actually holds non-original variants. A target inside a
.map() renders one wrapper per item, and an agent that relocates the
wrapper out of the shared primitive live-wrap scaffolded leaves an empty
one behind; first match could pin either and strand the session at 0/N.
With zero or one match this is the querySelector it replaces.
Tests: waitForCycling now asserts the generating shader is gone once the
bar cycles, across every runtime fixture (it failed on vite8-react-plain
before this change and passes after), marked no-retry so the reload
recovery cannot hide it. Source-shape tests pin the transition, the
variants_ready report, and the wrapper preference.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Live server: stop ends the process, SSE skips the mutation lane
Two Rust-only regressions found while investigating #719, both of which
can leave a tab waiting on a broadcast that never comes.
/stop ran shutdown() but never set shutting_down, and the accept loop
only breaks on that flag or a signal, so a stopped server kept its port
and kept answering while its server.json was already deleted. The next
`impeccable live` then booted a second server on another port and a tab
could reattach to the zombie. Node's shutdown() ended in process.exit(0).
The flag is now set after the response is written, so `stop` still reads
"stopping" instead of a reset connection, and the accept loop (already
non-blocking) exits on its next pass.
GET /events took a turnstile ticket and waited its turn before
registering, even though handle_sse releases that ticket two statements
later and needs no arrival ordering. A peer that stalls mid-request holds
the lane for the whole READ_REQUEST_DEADLINE, so a reconnecting stream
could sit unregistered for up to 10 seconds (measured 9.71s against 0.00s
on Node); broadcast is fire-and-forget, so a `done` landing in that
window reaches an empty client set and is gone. Registering early can
only make a stream see more broadcasts. The one cost is that the
connected frame's activeSessions snapshot may miss a mutation still in
flight, and the browser treats that snapshot as a hint. Preflights still
take a turn: answering those out of order reorders the POSTs the browser
issues behind them.
The route classification moved into releases_ticket_up_front so it can be
unit tested. tests/live-server-leak.test.mjs gains a guard that a stopped
server's pid is gone and its port is free.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Live: the shader teardown can no longer race its own construction
The new cycling assertion caught a real defect on CI: vite8-react-insert
reached CYCLING with #impeccable-live-shader still painted over the page.
showShaderOverlay is async. It appends its canvas synchronously, then
awaits createImageBitmap and finishes the GL setup before it publishes
shaderState. hideShaderOverlay returned early on a null shaderState, so a
teardown that landed inside that window did nothing, and the construction
then published itself over a session that had already left GENERATING,
with no teardown left to run. The scroll tick kept repositioning it,
which is why the CI page.html shows the canvas sized from the capture
rect but styled to the cycling anchor.
Every teardown now bumps a shader epoch before it does anything else, and
a construction pins the epoch it owns and abandons its canvas (releasing
the GL context) at every point past an await and before any publish,
including both bitmap-fallback publishes. A teardown also drops a shader
node that no shaderState owns, so an already-orphaned canvas cannot
survive one.
Reproduced by widening the append-to-publish window: with a 400ms delay
after uiAppend, vite8-react-insert failed with the CI error and the probe
showed the teardown arriving at CYCLING with shaderState still null.
The same run passes with this change, as does a 1500ms window on insert
and plain. Locally that window is about 4ms, which is why it only showed
on a slower runner.
The four remaining setLiveState('CYCLING') sites that did not lower the
loader now do: the SSE done handler (the one route that can reach CYCLING
from GENERATING), the Svelte republish remount, and the two accept
failure recoveries.
The e2e assertion already waits up to 5s for the shader to clear, so it
was never racing a legitimate teardown; it is left as it is.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Live: every active-session wrapper lookup goes through the resolver
Cursor Bugbot on #720: findVariantsWrapper alone was not enough.
resolveBarAnchor, the visible-variant element, mountedParameterCount,
readVisibleVariantFromDOM, showVariantInDOM, the source injection, and
the whole accept path still took the first [data-impeccable-variants]
match, so in the relocated-wrapper case Tune never bound and the bar kept
anchoring to the empty scaffold even after the resume reached CYCLING.
Thirteen call sites now resolve through findVariantsWrapper. The resolver
split in two so a missing id cannot silently widen the lookup to any
session: findVariantsWrapper(sessionId) returns null without an id, and
findAnyVariantsWrapper() is the entry point for the two resume paths that
have no id yet. Both share pickPopulatedVariantsWrapper, which is the old
querySelector whenever there are fewer than two matches.
Discard cleanup now hides every duplicate wrapper rather than the first,
since a target inside a `.map()` renders one per item and hiding one left
the rest of the discarded variants on screen.
What still takes a raw first match is deliberate: bare existence checks,
selector strings for stylesheets and observers (which want to cover every
match), querySelectorAll sweeps, the parsed source document, and the
Svelte component wrapper, which holds no variant children at all. The
source-shape test pins that exact set by name, so a new raw lookup fails
until it is either routed through the resolver or justified there.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Live: a discard releases every wrapper it hid
Bugbot on #720: the non-restoreOriginal discard now hides every matching
wrapper, but the delayed fallback still released only the first
querySelector hit. A target inside a `.map()` renders one wrapper per
item, so the rest stayed at display:none and their original content never
came back on the static and missed-HMR flows that fallback exists for.
The hide, the existence checks, and the release now all speak about the
same set. discardedWrappers(sessionId) is the one place that collects it;
releaseDiscardedStaticWrappers takes the stylesheet down once and
releases each wrapper; releaseDiscardedStaticWrapper drops its sessionId
argument and just unwinds the node it is given. The HMR-ownership
decision still reads the first wrapper, which is fair: duplicates all
render from one source element, so ownership is uniform across them. The
reload branch is unchanged because a reload restores every original at
once.
Covered by a source-shape test rather than an e2e scenario:
hasFrameworkHmrOwnership is true for every React, Vue, and Svelte runtime
fixture, so all of them take the watcher path and none can reach the
static release. The existing framework-ownership guards in the same file
move to the new shape and keep their intent, including the one that says
only non-discard cleanup may blank the wrapper while waiting for HMR.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Release: publish the npm platform packages in one command
bun run release:platform-packages downloads each engine-v<ENGINE_VERSION>
binary with its .sha256 sidecar (required; nothing unverified is
published), stages the package from cli/platform-packages/<target> with
the version stamped, the executable at bin/ and the repo LICENSE, and
runs npm publish --access public. Targets already on the registry are
skipped so a re-run resumes after a partial failure. Preconditions:
package.json pins equal ENGINE_VERSION and npm is logged in.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* release-engine: pin checkout, upload-artifact and download-artifact at v7
The v4 pins target Node 20, which the runner now deprecates and forces
onto Node 24 with a warning on every step. The rest of the workflows
already use v7.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Tests: make the temp-dir helpers unique under a coarse clock
Windows' system clock is coarse enough that two parallel tests could get
the same pid-plus-nanoseconds directory name and then remove each
other's files (rust-windows: close_verb_round_trip_and_ownership,
NotFound). A per-process counter is appended to the name.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
* Tests: declare the temp-dir counter in the hook cache-root tests
The previous commit referenced TMP_SEQ there without defining it.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vau2X53xGTjjTCXWMVBoNY
---------
Co-authored-by: Claude <noreply@anthropic.com>
62 lines
466 KiB
JSON
62 lines
466 KiB
JSON
{"args":["<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Blinking cursor fixture</title>\n<style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: monospace, monospace; font-size: 16px; }\n .hero { padding: 40px; }\n .terminal { background: #111; color: #eee; padding: 24px; width: 600px; }\n\n @keyframes blink-anim { 50% { opacity: 0; } }\n @keyframes flicker { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n @keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n /* FLAG: solid block cursor in the hero terminal */\n .flag-block-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #33d17a; vertical-align: text-bottom;\n animation: blink-anim 1.1s steps(1) infinite;\n }\n\n /* FLAG: glyph cursor, animation name says nothing but keyframes toggle opacity */\n .flag-glyph-cursor { animation: flicker 1s steps(2) infinite; }\n\n /* FLAG: underscore bar cursor */\n .flag-underscore-cursor {\n display: inline-block; width: 12px; height: 3px;\n background: #eee; vertical-align: baseline;\n animation: caret-blink 0.9s steps(1) infinite;\n }\n\n /* PASS: same block cursor shape, but deep below the landing region */\n .pass-below-fold-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #33d17a;\n animation: blink-anim 1.1s steps(1) infinite;\n }\n\n /* PASS: cursor inside real editable surfaces */\n .pass-editable-cursor, .pass-textbox-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #444;\n animation: blink-anim 1s steps(1) infinite;\n }\n\n /* PASS: round pulsing dot stays with the pulsing-dot rule */\n .pass-round-dot {\n display: inline-block; width: 8px; height: 8px;\n background: #33d17a; border-radius: 50%;\n animation: blink-anim 2s steps(1) infinite;\n }\n\n /* PASS: spinner animates transform, not visibility */\n .pass-spinner {\n display: inline-block; width: 16px; height: 16px;\n border: 2px solid #999; border-top-color: #333; border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n /* PASS: a blinking word is not a cursor shape */\n .pass-blinking-word { animation: flicker 1s steps(2) infinite; }\n\n /* PASS: large blinking panel fails the caret-size gates */\n .pass-blinking-panel {\n display: inline-block; width: 200px; height: 90px;\n background: #222;\n animation: blink-anim 2s steps(1) infinite;\n }\n\n .spacer { height: 1400px; }\n</style>\n</head>\n<body>\n\n <div class=\"hero\">\n <h1>Terminal-flavored landing hero</h1>\n <div class=\"terminal\">\n <p>user@host:~$ run demo <span class=\"flag-block-cursor\" aria-hidden=\"true\"></span></p>\n <p>user@host:~$ tail -f logs <span class=\"flag-glyph-cursor\" aria-hidden=\"true\">▌</span></p>\n <p>user@host:~$ next up <span class=\"flag-underscore-cursor\" aria-hidden=\"true\"></span></p>\n </div>\n\n <p style=\"margin-top: 24px;\">Status <span class=\"pass-round-dot\" aria-hidden=\"true\"></span>\n loading <span class=\"pass-spinner\" aria-hidden=\"true\"></span>\n and a <span class=\"pass-blinking-word\">LIVE</span> badge word\n plus a big panel <span class=\"pass-blinking-panel\" aria-hidden=\"true\"></span></p>\n\n <div contenteditable=\"true\" class=\"terminal\" style=\"margin-top: 24px;\">\n <p>editable prompt <span class=\"pass-editable-cursor\" aria-hidden=\"true\"></span></p>\n </div>\n\n <div role=\"textbox\" class=\"terminal\" style=\"margin-top: 24px;\">\n <p>textbox prompt <span class=\"pass-textbox-cursor\" aria-hidden=\"true\"></span></p>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"terminal\">\n <p>deep footer terminal <span class=\"pass-below-fold-cursor\" aria-hidden=\"true\"></span></p>\n </div>\n\n</body>\n</html>\n",{"styleText":"\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: monospace, monospace; font-size: 16px; }\n .hero { padding: 40px; }\n .terminal { background: #111; color: #eee; padding: 24px; width: 600px; }\n\n @keyframes blink-anim { 50% { opacity: 0; } }\n @keyframes flicker { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n @keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n /* FLAG: solid block cursor in the hero terminal */\n .flag-block-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #33d17a; vertical-align: text-bottom;\n animation: blink-anim 1.1s steps(1) infinite;\n }\n\n /* FLAG: glyph cursor, animation name says nothing but keyframes toggle opacity */\n .flag-glyph-cursor { animation: flicker 1s steps(2) infinite; }\n\n /* FLAG: underscore bar cursor */\n .flag-underscore-cursor {\n display: inline-block; width: 12px; height: 3px;\n background: #eee; vertical-align: baseline;\n animation: caret-blink 0.9s steps(1) infinite;\n }\n\n /* PASS: same block cursor shape, but deep below the landing region */\n .pass-below-fold-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #33d17a;\n animation: blink-anim 1.1s steps(1) infinite;\n }\n\n /* PASS: cursor inside real editable surfaces */\n .pass-editable-cursor, .pass-textbox-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #444;\n animation: blink-anim 1s steps(1) infinite;\n }\n\n /* PASS: round pulsing dot stays with the pulsing-dot rule */\n .pass-round-dot {\n display: inline-block; width: 8px; height: 8px;\n background: #33d17a; border-radius: 50%;\n animation: blink-anim 2s steps(1) infinite;\n }\n\n /* PASS: spinner animates transform, not visibility */\n .pass-spinner {\n display: inline-block; width: 16px; height: 16px;\n border: 2px solid #999; border-top-color: #333; border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n /* PASS: a blinking word is not a cursor shape */\n .pass-blinking-word { animation: flicker 1s steps(2) infinite; }\n\n /* PASS: large blinking panel fails the caret-size gates */\n .pass-blinking-panel {\n display: inline-block; width: 200px; height: 90px;\n background: #222;\n animation: blink-anim 2s steps(1) infinite;\n }\n\n .spacer { height: 1400px; }\n\nstyle=\"margin-top: 24px;\"\nstyle=\"margin-top: 24px;\"\nstyle=\"margin-top: 24px;\"","classText":"hero\nterminal\nflag-block-cursor\nflag-glyph-cursor\nflag-underscore-cursor\npass-round-dot\npass-spinner\npass-blinking-word\npass-blinking-panel\nterminal\npass-editable-cursor\nterminal\npass-textbox-cursor\nspacer\nterminal\npass-below-fold-cursor"}],"result":[{"id":"pulsing-dot","snippet":".pass-round-dot — 8x8px dot with infinite \"blink-anim\" animation","selector":".pass-round-dot"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Body text viewport edge — Should Flag vs Should Pass</title>\n <style>\n /* Fixture for the body-text-viewport-edge rule. The rule fires\n when a <p> or <li> with substantial text content has rect.left\n within 16px of the viewport edge (or rect.right within 16px\n of viewport.width) AND the element has no own background-color\n AND is not inside <nav>/<header> AND is in normal flow. */\n body { font: 14px/1.5 system-ui, sans-serif; margin: 0; color: #111; background: #fff; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 24px; max-width: 1400px; margin: 0 auto; }\n .col h2 { font: 600 14px/1 system-ui; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin: 16px 0 4px; font-style: italic; }\n .container-good { max-width: 720px; margin: 0 auto; padding: 16px 32px; }\n .container-tight { padding: 16px 32px; }\n .full-bleed-section { background: #fef3c7; padding: 24px 16px; }\n nav.site-nav { padding: 12px 24px; background: #f5f5f5; }\n header.banner { padding: 12px 24px; background: #e5e7eb; }\n\n /* Override the grid container's own padding so we can demonstrate\n a paragraph that genuinely bleeds to the viewport edge inside\n the flag column — the col itself shouldn't reset its padding. */\n .flag-fullwidth-p { /* no container; placed directly in body via .escape */ }\n .escape { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; padding: 0; }\n .edge-list { margin: 0; padding: 0; list-style-position: inside; }\n .edge-list li { margin: 0; }\n </style>\n</head>\n<body>\n\n <!-- ════════════════════════════════════════════════════════════\n FLAG CASES — body text bleeds to viewport edge.\n These paragraphs are placed OUTSIDE the .grid container so\n their bounding rect actually touches the viewport edges.\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"escape\">\n <p>Lucia opened this place in 1978. She cooked every night for fifty years, making the same dishes: spaghetti carbonara, eggplant parmigiana, veal saltimbocca, fresh lasagna. She did not change a single recipe in all that time. Her grandson Anthony runs the kitchen now, using the same recipes with the same care.</p>\n </div>\n <div class=\"escape\">\n <p>This second flush-to-edge paragraph confirms the rule fires on every body paragraph that touches the viewport, not just one. The rendered width should be the full viewport, with text starting essentially at x=0.</p>\n </div>\n <div class=\"escape\">\n <ul class=\"edge-list\">\n <li>This is a list item whose text content is substantially long enough to qualify as body content. It also runs flush against the viewport edge with no left padding.</li>\n </ul>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n PASS CASES — body text with adequate container padding.\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"grid\">\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <span class=\"case-label\">paragraph in centered container with 32px padding</span>\n <div class=\"container-good\">\n <p>This paragraph sits inside a max-width container that's centered and has 32px horizontal padding. It does not touch the viewport edges and should not trigger the rule.</p>\n </div>\n\n <span class=\"case-label\">paragraph inside <nav> (excluded — nav can bleed)</span>\n <nav class=\"site-nav\">\n <p>This nav legitimately bleeds to the edges as a full-width header strip; the rule excludes elements inside <nav> or <header> so this does not flag.</p>\n </nav>\n\n <span class=\"case-label\">paragraph inside <header> (excluded — header can bleed)</span>\n <header class=\"banner\">\n <p>Banner headers commonly bleed to viewport edges with their own internal layout. The rule excludes <header> descendants.</p>\n </header>\n\n <span class=\"case-label\">paragraph inside full-bleed section with own background</span>\n <section class=\"full-bleed-section\">\n <p>This paragraph sits in a full-bleed section that has its own background-color set (intentional design move). The rule excludes paragraphs whose element has its own background-color.</p>\n </section>\n\n <span class=\"case-label\">short label / button-ish text (excluded — < 40 chars)</span>\n <p class=\"container-tight\">Short label.</p>\n </div>\n\n <div class=\"col\" data-col=\"flag-notes\">\n <h2>Notes</h2>\n <p>The flag cases above (rendered outside this grid) demonstrate the failure. The pass cases here show acceptable patterns. The rule gates aggressively to avoid false positives: it only flags <p> and <li> with >40 chars whose width spans more than 50% of the viewport AND whose rect.left or rect.right is within 16px of a viewport edge AND which are not inside nav/header AND which have no own background-color AND which are in normal flow (not position:fixed/absolute).</p>\n </div>\n </div>\n\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* Fixture for the body-text-viewport-edge rule. The rule fires\n when a <p> or <li> with substantial text content has rect.left\n within 16px of the viewport edge (or rect.right within 16px\n of viewport.width) AND the element has no own background-color\n AND is not inside <nav>/<header> AND is in normal flow. */\n body { font: 14px/1.5 system-ui, sans-serif; margin: 0; color: #111; background: #fff; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 24px; max-width: 1400px; margin: 0 auto; }\n .col h2 { font: 600 14px/1 system-ui; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin: 16px 0 4px; font-style: italic; }\n .container-good { max-width: 720px; margin: 0 auto; padding: 16px 32px; }\n .container-tight { padding: 16px 32px; }\n .full-bleed-section { background: #fef3c7; padding: 24px 16px; }\n nav.site-nav { padding: 12px 24px; background: #f5f5f5; }\n header.banner { padding: 12px 24px; background: #e5e7eb; }\n\n /* Override the grid container's own padding so we can demonstrate\n a paragraph that genuinely bleeds to the viewport edge inside\n the flag column — the col itself shouldn't reset its padding. */\n .flag-fullwidth-p { /* no container; placed directly in body via .escape */ }\n .escape { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; padding: 0; }\n .edge-list { margin: 0; padding: 0; list-style-position: inside; }\n .edge-list li { margin: 0; }\n ","classText":"escape\nescape\nescape\nedge-list\ngrid\ncol\ncase-label\ncontainer-good\ncase-label\nsite-nav\ncase-label\nbanner\ncase-label\nfull-bleed-section\ncase-label\ncontainer-tight\ncol"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Border Anti-Patterns — Should Flag vs Should Pass</title>\n <style>\n body {\n margin: 0;\n padding: 24px;\n background: #f8fafc;\n color: #111827;\n font: 14px/1.5 system-ui, sans-serif;\n }\n\n h1 {\n max-width: 1180px;\n margin: 0 auto 8px;\n font-size: 34px;\n line-height: 1.05;\n font-weight: 720;\n }\n\n .intro {\n max-width: 1180px;\n margin: 0 auto 24px;\n color: #4b5563;\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 32px;\n max-width: 1180px;\n margin: 0 auto;\n }\n\n .col h2 {\n margin: 0 0 14px;\n color: #475569;\n font-size: 13px;\n font-weight: 760;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .case {\n margin: 0 0 14px;\n padding: 16px;\n background: #fdfdfd;\n box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);\n }\n\n .case h3 {\n margin: 0 0 4px;\n font-size: 15px;\n line-height: 1.25;\n }\n\n .case p {\n margin: 0;\n color: #475569;\n }\n\n .flag-left {\n border-left: 4px solid #2563eb;\n border-radius: 10px;\n }\n\n .flag-right {\n border-right: 5px solid #dc2626;\n border-radius: 10px;\n }\n\n .flag-left-plain {\n border-left: 4px solid #0f766e;\n }\n\n .flag-top {\n border-top: 4px solid #7c3aed;\n border-radius: 10px;\n }\n\n .flag-bottom {\n border-bottom: 3px solid #ea580c;\n border-radius: 10px;\n }\n\n .flag-dark {\n background: #141820;\n color: #f4f7fb;\n border-left: 4px solid #38bdf8;\n border-radius: 10px;\n }\n\n .flag-dark p {\n color: #cbd5e1;\n }\n\n .pass-full-border {\n border: 1px solid #cbd5e1;\n border-radius: 10px;\n }\n\n .pass-neutral-side {\n border-left: 4px solid #d1d5db;\n border-radius: 10px;\n }\n\n .pass-thin-side {\n border-left: 1px solid #2563eb;\n border-radius: 10px;\n }\n\n .pass-status-alert {\n border-left: 4px solid #2563eb;\n }\n\n .flag-square-top {\n border-top: 4px solid #7c3aed;\n border-radius: 0;\n }\n\n .flag-square-bottom {\n border-bottom: 3px solid #ea580c;\n border-radius: 0;\n }\n\n .pass-tab-underline {\n border-bottom: 3px solid #2563eb;\n border-radius: 0;\n }\n\n .pass-thick-band {\n border-top: 16px solid #7c3aed;\n border-radius: 0;\n }\n\n .pass-dark-uniform {\n background: #161a22;\n color: #f4f7fb;\n border: 1px solid #334155;\n border-radius: 10px;\n }\n\n .pass-dark-uniform p {\n color: #cbd5e1;\n }\n </style>\n</head>\n<body>\n <h1>Border side-tab detector cases</h1>\n <p class=\"intro\">A paired fixture for colored side borders and rounded accent borders. The left column should produce border findings; the right column should stay clean.</p>\n\n <div class=\"grid\">\n <section class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <div class=\"case flag-left\">\n <h3>Rounded card with colored left border</h3>\n <p>Classic side tab: border-left is thick, colored, and paired with rounded corners.</p>\n </div>\n\n <div class=\"case flag-right\">\n <h3>Rounded card with colored right border</h3>\n <p>The right-side version is the same visual trope mirrored.</p>\n </div>\n\n <div class=\"case flag-left-plain\">\n <h3>Thick colored side border without radius</h3>\n <p>A thick chromatic side stripe still reads as a tab even without rounded corners.</p>\n </div>\n\n <div class=\"case flag-top\">\n <h3>Rounded card with top accent border</h3>\n <p>A heavy top accent on a rounded card is the horizontal variant of the same pattern.</p>\n </div>\n\n <div class=\"case flag-bottom\">\n <h3>Rounded card with bottom accent border</h3>\n <p>The bottom accent is also a decorative stripe on a card surface.</p>\n </div>\n\n <div class=\"case flag-dark\">\n <h3>Dark card with bright side stripe</h3>\n <p>Dark surfaces can hide the cliche, but the thick colored side stripe remains.</p>\n </div>\n </section>\n\n <section class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <div class=\"case pass-full-border\">\n <h3>Uniform full border</h3>\n <p>A quiet all-around border frames the card instead of creating a side tab.</p>\n </div>\n\n <div class=\"case pass-neutral-side\">\n <h3>Neutral structural side rule</h3>\n <p>A gray structural rule can be a legitimate divider when it is not chromatic emphasis.</p>\n </div>\n\n <div class=\"case pass-thin-side\">\n <h3>Thin colored side rule</h3>\n <p>A 1px colored rule is below the decorative side-tab threshold.</p>\n </div>\n\n <div class=\"case pass-status-alert\" role=\"status\">\n <h3>Status toast with severity accent</h3>\n <p>A live status region carries a colored side bar as a severity accent, not a decorative side tab.</p>\n </div>\n\n <div class=\"case flag-square-top\">\n <h3>Square top border</h3>\n <p>A chromatic top stripe on a card is the horizontal variant of the side tab.</p>\n </div>\n\n <div class=\"case flag-square-bottom\">\n <h3>Square bottom border</h3>\n <p>A chromatic bottom stripe on a badge or card is the same decorative tell.</p>\n </div>\n\n <div class=\"case\" role=\"tablist\">\n <div class=\"case pass-tab-underline\" role=\"tab\" aria-selected=\"true\">\n <h3>Selected tab underline</h3>\n <p>An active-state underline inside a tablist is an affordance, not a stripe.</p>\n </div>\n </div>\n\n <div class=\"case pass-thick-band\">\n <h3>Thick color band</h3>\n <p>A band well past stripe thickness is a compositional block, not an accent stripe.</p>\n </div>\n\n <div class=\"case pass-dark-uniform\">\n <h3>Dark card with uniform border</h3>\n <p>The dark surface has a full neutral outline, not a chromatic side stripe.</p>\n </div>\n </section>\n </div>\n\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body {\n margin: 0;\n padding: 24px;\n background: #f8fafc;\n color: #111827;\n font: 14px/1.5 system-ui, sans-serif;\n }\n\n h1 {\n max-width: 1180px;\n margin: 0 auto 8px;\n font-size: 34px;\n line-height: 1.05;\n font-weight: 720;\n }\n\n .intro {\n max-width: 1180px;\n margin: 0 auto 24px;\n color: #4b5563;\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 32px;\n max-width: 1180px;\n margin: 0 auto;\n }\n\n .col h2 {\n margin: 0 0 14px;\n color: #475569;\n font-size: 13px;\n font-weight: 760;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .case {\n margin: 0 0 14px;\n padding: 16px;\n background: #fdfdfd;\n box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);\n }\n\n .case h3 {\n margin: 0 0 4px;\n font-size: 15px;\n line-height: 1.25;\n }\n\n .case p {\n margin: 0;\n color: #475569;\n }\n\n .flag-left {\n border-left: 4px solid #2563eb;\n border-radius: 10px;\n }\n\n .flag-right {\n border-right: 5px solid #dc2626;\n border-radius: 10px;\n }\n\n .flag-left-plain {\n border-left: 4px solid #0f766e;\n }\n\n .flag-top {\n border-top: 4px solid #7c3aed;\n border-radius: 10px;\n }\n\n .flag-bottom {\n border-bottom: 3px solid #ea580c;\n border-radius: 10px;\n }\n\n .flag-dark {\n background: #141820;\n color: #f4f7fb;\n border-left: 4px solid #38bdf8;\n border-radius: 10px;\n }\n\n .flag-dark p {\n color: #cbd5e1;\n }\n\n .pass-full-border {\n border: 1px solid #cbd5e1;\n border-radius: 10px;\n }\n\n .pass-neutral-side {\n border-left: 4px solid #d1d5db;\n border-radius: 10px;\n }\n\n .pass-thin-side {\n border-left: 1px solid #2563eb;\n border-radius: 10px;\n }\n\n .pass-status-alert {\n border-left: 4px solid #2563eb;\n }\n\n .flag-square-top {\n border-top: 4px solid #7c3aed;\n border-radius: 0;\n }\n\n .flag-square-bottom {\n border-bottom: 3px solid #ea580c;\n border-radius: 0;\n }\n\n .pass-tab-underline {\n border-bottom: 3px solid #2563eb;\n border-radius: 0;\n }\n\n .pass-thick-band {\n border-top: 16px solid #7c3aed;\n border-radius: 0;\n }\n\n .pass-dark-uniform {\n background: #161a22;\n color: #f4f7fb;\n border: 1px solid #334155;\n border-radius: 10px;\n }\n\n .pass-dark-uniform p {\n color: #cbd5e1;\n }\n ","classText":"intro\ngrid\ncol\ncase flag-left\ncase flag-right\ncase flag-left-plain\ncase flag-top\ncase flag-bottom\ncase flag-dark\ncol\ncase pass-full-border\ncase pass-neutral-side\ncase pass-thin-side\ncase pass-status-alert\ncase flag-square-top\ncase flag-square-bottom\ncase\ncase pass-tab-underline\ncase pass-thick-band\ncase pass-dark-uniform"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Clipped overflow container fixture</title>\n <style>\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n .box { position: relative; width: 200px; height: 120px; margin: 0 0 24px; padding: 16px; border: 1px solid #ddd; }\n .pop { position: absolute; top: 100%; left: 0; width: 220px; background: #222; color: #fff; padding: 8px; }\n .tip-negative { position: absolute; top: -34px; left: 16px; width: 160px; background: #222; color: #fff; padding: 8px; }\n .flyout { position: absolute; top: 28px; left: 100%; width: 180px; background: #222; color: #fff; padding: 8px; }\n .contained-badge { position: absolute; top: 10px; right: 10px; width: 36px; height: 24px; background: #e5f0ff; }\n .button-shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }\n .crop-photo { position: absolute; inset: -18px; background: linear-gradient(135deg, #b7d7ff, #486aa3); }\n .inside-overlay { position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 28px; background: rgba(255,255,255,.86); }\n .pass-hidden-button { position: relative; overflow: hidden; width: 160px; height: 52px; border: 1px solid #ddd; background: #111; color: #fff; }\n .pass-carousel-viewport,\n .pass-fisheye-list,\n .pass-split-container {\n position: relative;\n overflow: hidden;\n width: 200px;\n height: 120px;\n margin: 0 0 24px;\n border: 1px solid #ddd;\n }\n .carousel-slide-next { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; padding: 16px; background: #f5f5f5; }\n .fisheye-next-item { position: absolute; top: 100%; left: 0; width: 100%; padding: 8px; background: none; border: 0; text-align: left; }\n .split-after-panel { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; background: #f5f5f5; }\n </style>\n</head>\n<body>\n <div class=\"cols\">\n <!-- FLAG column: clipping container with a positioned child that needs to escape -->\n <section class=\"col flag\">\n <div class=\"box flag-overflow-hidden\" style=\"overflow: hidden\">\n <button>Menu</button>\n <ul class=\"pop\">Dropdown that gets clipped by the hidden ancestor</ul>\n </div>\n <div class=\"box flag-overflow-clip\" style=\"overflow: clip\">\n <button>Tooltip host</button>\n <span class=\"pop\">Tooltip clipped by overflow clip</span>\n </div>\n <div class=\"box flag-overflow-negative\" style=\"overflow: hidden\">\n <button>Help</button>\n <span class=\"tip-negative\">Tooltip clipped above the host</span>\n </div>\n <div class=\"box flag-overflow-right\" style=\"overflow: hidden\">\n <button>Actions</button>\n <div class=\"flyout\">Flyout menu clipped to the right of the host</div>\n </div>\n <div class=\"box flag-shadow-utility\" style=\"overflow: hidden\">\n <button>More</button>\n <div class=\"pop bg-white shadow-lg\">Dropdown with utility classes still gets clipped.</div>\n </div>\n <div class=\"box flag-overlay-surface\" style=\"overflow: clip\">\n <button>Dialog</button>\n <div class=\"pop modal-overlay\">Overlay-style dialog content still needs to escape.</div>\n </div>\n </section>\n\n <!-- PASS column: no clipping, no positioned child, real scroll region, or contained decorative positioning -->\n <section class=\"col pass\">\n <div class=\"box pass-hidden-no-abs\" style=\"overflow: hidden\">\n <p style=\"position: static\">Hidden container with only static content.</p>\n </div>\n <div class=\"box pass-visible-abs\" style=\"overflow: visible\">\n <button>Visible host</button>\n <span class=\"pop\">Positioned child can escape because overflow is visible.</span>\n </div>\n <div class=\"box pass-scroll-abs\" style=\"overflow: auto\">\n <button>Scroll host</button>\n <span class=\"pop\">A genuine scroll region is allowed to contain positioned children.</span>\n </div>\n <div class=\"box pass-contained-abs\" style=\"overflow: hidden\">\n <p>Positioned decoration remains inside the clipping box.</p>\n <span class=\"contained-badge\" aria-hidden=\"true\"></span>\n </div>\n <button type=\"button\" class=\"pass-hidden-button pass-button-shine\">\n Save\n <span class=\"button-shine\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"box pass-crop-photo\" style=\"overflow: hidden\">\n <span class=\"crop-photo\" aria-hidden=\"true\"></span>\n </div>\n <div class=\"box pass-contained-overlay\" style=\"overflow: clip\">\n <p>Mockup frame with a contained absolute overlay.</p>\n <span class=\"inside-overlay\" aria-hidden=\"true\"></span>\n </div>\n <div class=\"pass-carousel-viewport\" aria-roledescription=\"carousel\">\n <div class=\"carousel-slide-next\">A hidden next slide is clipped intentionally by the viewport.</div>\n </div>\n <div class=\"pass-fisheye-list\">\n <button type=\"button\" class=\"fisheye-next-item\">Next command</button>\n </div>\n <div class=\"pass-split-container\">\n <div class=\"split-after-panel\">Before/after comparison panel clipped by the split frame.</div>\n </div>\n </section>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n .box { position: relative; width: 200px; height: 120px; margin: 0 0 24px; padding: 16px; border: 1px solid #ddd; }\n .pop { position: absolute; top: 100%; left: 0; width: 220px; background: #222; color: #fff; padding: 8px; }\n .tip-negative { position: absolute; top: -34px; left: 16px; width: 160px; background: #222; color: #fff; padding: 8px; }\n .flyout { position: absolute; top: 28px; left: 100%; width: 180px; background: #222; color: #fff; padding: 8px; }\n .contained-badge { position: absolute; top: 10px; right: 10px; width: 36px; height: 24px; background: #e5f0ff; }\n .button-shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }\n .crop-photo { position: absolute; inset: -18px; background: linear-gradient(135deg, #b7d7ff, #486aa3); }\n .inside-overlay { position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 28px; background: rgba(255,255,255,.86); }\n .pass-hidden-button { position: relative; overflow: hidden; width: 160px; height: 52px; border: 1px solid #ddd; background: #111; color: #fff; }\n .pass-carousel-viewport,\n .pass-fisheye-list,\n .pass-split-container {\n position: relative;\n overflow: hidden;\n width: 200px;\n height: 120px;\n margin: 0 0 24px;\n border: 1px solid #ddd;\n }\n .carousel-slide-next { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; padding: 16px; background: #f5f5f5; }\n .fisheye-next-item { position: absolute; top: 100%; left: 0; width: 100%; padding: 8px; background: none; border: 0; text-align: left; }\n .split-after-panel { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; background: #f5f5f5; }\n \nstyle=\"overflow: hidden\"\nstyle=\"overflow: clip\"\nstyle=\"overflow: hidden\"\nstyle=\"overflow: hidden\"\nstyle=\"overflow: hidden\"\nstyle=\"overflow: clip\"\nstyle=\"overflow: hidden\"\nstyle=\"position: static\"\nstyle=\"overflow: visible\"\nstyle=\"overflow: auto\"\nstyle=\"overflow: hidden\"\nstyle=\"overflow: hidden\"\nstyle=\"overflow: clip\"","classText":"cols\ncol flag\nbox flag-overflow-hidden\npop\nbox flag-overflow-clip\npop\nbox flag-overflow-negative\ntip-negative\nbox flag-overflow-right\nflyout\nbox flag-shadow-utility\npop bg-white shadow-lg\nbox flag-overlay-surface\npop modal-overlay\ncol pass\nbox pass-hidden-no-abs\nbox pass-visible-abs\npop\nbox pass-scroll-abs\npop\nbox pass-contained-abs\ncontained-badge\npass-hidden-button pass-button-shine\nbutton-shine\nbox pass-crop-photo\ncrop-photo\nbox pass-contained-overlay\ninside-overlay\npass-carousel-viewport\ncarousel-slide-next\npass-fisheye-list\nfisheye-next-item\npass-split-container\nsplit-after-panel"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Color Anti-Patterns — Should Flag vs Should Pass</title>\n <style>\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #1a1a1a; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n /* Styled button color cases (declared via stylesheet so jsdom resolves them\n reliably — inline color doesn't always win over user-agent rules in jsdom\n for <a> and <button>). */\n .styled-pill-low { background-color: rgb(31, 26, 21); color: rgb(91, 79, 68); display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; }\n .low-contrast-button { background-color: rgb(55, 65, 81); color: rgb(108, 114, 128); display: inline-block; padding: 10px 20px; border-radius: 8px; border: 0; font-size: 14px; }\n .good-pill-high { background-color: rgb(20, 20, 25); color: rgb(245, 240, 232); display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; }\n .inline-link-low { color: rgb(170, 170, 170); }\n /* Chip / badge cases: text-bearing spans painting their own background. */\n .chip-sev-low { display: inline-block; background-color: rgb(182, 50, 45); color: rgb(92, 84, 73); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }\n .chip-ok-high { display: inline-block; background-color: rgb(20, 20, 25); color: rgb(245, 240, 232); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }\n .chip-sub9-low { display: inline-block; background-color: rgb(182, 50, 45); color: rgb(150, 60, 55); font-size: 8px; padding: 1px 4px; }\n .panel-reset { background: rgb(28, 30, 38); color: rgb(230, 232, 237); padding: 12px; }\n .panel-reset code { background: rgb(246, 242, 244); border-radius: 3px; padding: 1px 4px; }\n .panel-reset pre code { background: none; }\n /* issue #409 Case A: gradient-clipped text. The gradient IS the glyph fill\n (text-fill-color: transparent), not a backdrop. The inherited `color`\n (#e8e6e3) is never painted, so measuring it against the element's own\n gradient stops (#6d8cff / #a78bfa) is a false positive. */\n .ox-grad-text { background: linear-gradient(135deg, #6d8cff 0%, #a78bfa 50%, #6d8cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #e8e6e3; font-size: 40px; font-weight: 800; }\n /* issue #409 Case B: a 9%-alpha accent glow stop over a dark surface. The\n stop composites to ~#121f1f, not the full-opacity #34c0a8, so text stays\n high-contrast. The dark wrapper supplies the surface beneath the glow. */\n .ox-dark-wrap { background: #0f0f11; padding: 16px; }\n .ox-glow { background: linear-gradient(160deg, rgba(52,192,168,0.09) 0%, #141419 65%); padding: 20px; }\n .ox-glow p { color: #e8e6e3; font-size: 18px; }\n .ox-glow .muted { color: #8e8c89; font-size: 16px; }\n /* Gradient stop written as color-mix with a bright nested ingredient.\n The stop paints as a 16% wash of the light oklch color (composited\n over the dark wrap it is near-black); the nested oklch(90% ...) is an\n INGREDIENT, never painted. A parser that re-extracts nested tokens\n appends it as a phantom opaque light stop and the worst-case ratio\n then flags the light text at ~1:1 against a color nobody sees. */\n .mix-dark-wrap { background: #0f0f11; padding: 16px; }\n .mix-glow { background: linear-gradient(160deg, color-mix(in oklab, oklch(90% 0.02 95) 16%, transparent) 0%, #141419 65%); padding: 20px; }\n .mix-glow p { color: #ded9cf; font-size: 16px; }\n /* currentcolor surface: background-color paints with the element's own\n text color, which is itself a var() token here. jsdom hands both\n through verbatim, so the walk must resolve the token via the\n custom-prop map instead of abstaining on a knowable surface. */\n :root { --fixture-bone: #e8e2d6; }\n .currentcolor-surface { background-color: currentcolor; color: var(--fixture-bone); padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n .currentcolor-low-text { color: #cfc9bd; font-size: 14px; }\n .currentcolor-good-text { color: #3a352c; font-size: 14px; }\n /* Same shape but the token does not exist: the surface truly cannot be\n read, so the walk must abstain rather than guess. */\n .currentcolor-unknown { background-color: currentcolor; color: var(--fixture-undefined-token); padding: 14px 16px; border-radius: 10px; }\n .currentcolor-unknown p { color: #efe9dd; font-size: 14px; }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>Pure black surfaces</h3>\n <div class=\"card\" style=\"background: #000000; color: white;\">\n <p>Pure #000 background</p>\n </div>\n\n <h3>Gray on color</h3>\n <div class=\"card\" style=\"background: rgb(59, 130, 246);\">\n <p style=\"color: rgb(150, 150, 150);\">Gray text on blue background</p>\n </div>\n <div class=\"card\" style=\"background: rgb(16, 185, 129);\">\n <p style=\"color: rgb(180, 180, 180);\">Gray text on green background</p>\n </div>\n\n <h3>Low contrast</h3>\n <div class=\"card\" style=\"background: white;\">\n <p style=\"color: rgb(200, 200, 200);\">Light gray text on white — very low contrast</p>\n </div>\n <div class=\"card\" style=\"background: rgb(30, 30, 30);\">\n <p style=\"color: rgb(80, 80, 80);\">Dark gray text on near-black — low contrast</p>\n </div>\n <!-- Gradient background — gray heading is unreadable across every stop -->\n <div class=\"card\" style=\"background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%); padding: 16px;\">\n <h1 style=\"color: #808080; font-size: 32px; font-weight: 800; margin: 0;\">Welcome to Our Platform</h1>\n <p style=\"color: #666666; font-size: 14px;\">The best solution for modern teams and businesses</p>\n </div>\n\n <h3>Gradient text</h3>\n <h3 style=\"background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem;\">\n Gradient Heading\n </h3>\n\n <h3>AI color palette</h3>\n <h1 style=\"color: rgb(139, 92, 246); font-size: 1.5rem; margin: 0;\">Purple heading text</h1>\n\n <h3>Styled <a> and <button> with low contrast</h3>\n <!-- A pill-style <a> with its own opaque background and low-contrast text.\n Currently SAFE_TAGS skips <a> entirely; this case asserts the contrast\n check still runs when the element is styled as a button. Mirrors a real\n bug from the landing-demo: warm-charcoal text on near-black bg. -->\n <a href=\"#\" class=\"styled-pill-low\" data-test=\"styled-pill\">Get started</a>\n <!-- A <button> element with its own opaque background and low-contrast text.\n Same SAFE_TAGS exception — buttons styled with their own background should\n still pass through the contrast check. -->\n <button class=\"low-contrast-button\" data-test=\"low-contrast-button\">Submit</button>\n\n <h3>Text-bearing chip with low contrast</h3>\n <!-- A <span> chip painting its own opaque background under direct text.\n SAFE_TAGS used to skip spans categorically; the styled-control\n exception must cover any text-bearing chip or badge. Mirrors a real\n bug: a SEV-2 chip whose white text lost a specificity fight and\n rendered muted brown on red at 1.2:1. -->\n <span class=\"chip-sev-low\" data-test=\"chip-sev\">SEV-2</span>\n\n <h3>Tailwind color anti-patterns</h3>\n <div class=\"bg-black text-white p-4 rounded card\" style=\"background: black; color: white;\">\n <p>bg-black — pure black bg</p>\n </div>\n <div class=\"bg-blue-500 text-gray-400 p-4 rounded card\" style=\"background: rgb(59, 130, 246);\">\n <p style=\"color: rgb(156, 163, 175);\">text-gray-400 on bg-blue-500 — gray on color</p>\n </div>\n <h3 class=\"text-purple-500 text-2xl font-bold\" style=\"color: rgb(168, 85, 247); font-size: 1.5rem; font-weight: 700;\">text-purple-500 heading</h3>\n <div class=\"bg-gradient-to-r from-purple-500 to-indigo-500 text-white p-4 rounded card\" style=\"background: linear-gradient(to right, rgb(168, 85, 247), rgb(99, 102, 241)); color: white;\">\n <p>Purple-to-indigo gradient</p>\n </div>\n\n <h3>currentcolor surface via var() token</h3>\n <!-- background-color: currentcolor with color: var(--fixture-bone).\n The surface is knowable (bone #e8e2d6), so the faint text on it is\n a real low-contrast finding, not an abstention. -->\n <div class=\"currentcolor-surface\" data-test=\"currentcolor-low\">\n <p class=\"currentcolor-low-text\">Faint warm gray on a bone currentcolor surface</p>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>Tinted neutrals</h3>\n <div class=\"card\" style=\"background: rgb(26, 26, 30);\">\n <p style=\"color: rgb(240, 240, 245);\">Near-black bg, near-white text — tinted, not pure</p>\n </div>\n <div class=\"card\" style=\"background: rgb(250, 250, 252);\">\n <p style=\"color: rgb(20, 20, 25);\">Near-white bg, near-black text — good contrast, tinted</p>\n </div>\n\n <h3>Pure white surface is acceptable</h3>\n <div class=\"card\" style=\"background: #ffffff;\">\n <p style=\"color: #111827;\">Pure #fff background with dark text — acceptable contrast</p>\n </div>\n\n <h3>Good contrast</h3>\n <div class=\"card\" style=\"background: rgb(30, 64, 175);\">\n <p style=\"color: rgb(240, 240, 245);\">Near-white text on dark blue — high contrast, not pure white</p>\n </div>\n <div class=\"card\" style=\"background: rgb(16, 185, 129);\">\n <p style=\"color: rgb(5, 46, 32);\">Dark green text on green bg — same hue family</p>\n </div>\n\n <h3>Distinctive accents (not AI purple)</h3>\n <h3 style=\"color: rgb(220, 38, 38); font-size: 1.25rem; margin: 0;\">Red heading — not AI purple</h3>\n <h3 style=\"color: rgb(180, 83, 9); font-size: 1.25rem; margin: 8px 0 0;\">Amber heading — distinctive</h3>\n\n <h3>Background-image url() ancestor (not low contrast)</h3>\n <!-- White text on transparent bg where ancestor has a background-image.\n The detector cannot determine the image color, so it must NOT assume\n white and report a false low-contrast finding. -->\n <div data-test=\"bg-image-ancestor\" style=\"background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg=='); background-size: cover; padding: 20px;\">\n <p style=\"color: rgb(255, 255, 255); font-size: 16px;\">White text on image background — should not flag low-contrast</p>\n </div>\n\n <h3>Tailwind opacity-modified bg-black (not pure black)</h3>\n <!-- bg-black/N classes are NOT pure black — they apply an alpha modifier.\n The detector must not match these as pure-black-white. -->\n <div class=\"bg-black/3 p-4 rounded card\" data-test=\"bg-black-opacity\" style=\"background: rgba(0,0,0,0.03);\">\n <p>bg-black/3 — 3% opacity, not pure black</p>\n </div>\n <div class=\"hover:bg-black/5 p-4 rounded card\" data-test=\"bg-black-hover-opacity\" style=\"background: rgba(0,0,0,0);\">\n <p>hover:bg-black/5 — hover state, not pure black</p>\n </div>\n <div class=\"bg-black/50 p-4 rounded card\" data-test=\"bg-black-half-opacity\" style=\"background: rgba(0,0,0,0.5);\">\n <p style=\"color: white;\">bg-black/50 — 50% opacity, not pure black</p>\n </div>\n\n <h3>Inline <a> without own background (must remain skipped)</h3>\n <!-- A regular text link inside a paragraph. No own background. SAFE_TAGS\n must continue to skip these — flagging them would create noise on\n every text link on the web. The detector exception for styled\n buttons must not regress to flagging plain inline links. -->\n <p>Read more about this <a href=\"#\" class=\"inline-link-low\" data-test=\"inline-link\">here</a> if you want to learn more about the topic.</p>\n\n <h3>Styled <a> with good contrast (must not flag)</h3>\n <!-- A pill-style <a> styled correctly: cream text on near-black bg,\n high contrast. The detector exception for styled buttons must\n let the contrast check run, but this case must clearly pass. -->\n <a href=\"#\" class=\"good-pill-high\" data-test=\"good-pill\">High contrast pill</a>\n\n <h3>Chip with good contrast (must not flag)</h3>\n <span class=\"chip-ok-high\" data-test=\"chip-ok\">HEALTHY</span>\n\n <h3>Sub-9px decorative chip (below the font floor, must not flag)</h3>\n <span class=\"chip-sub9-low\" data-test=\"chip-sub9\">tick</span>\n\n <h3>background: none resets an earlier background-color</h3>\n <!-- The `background` shorthand resets background-color. `pre code\n { background: none }` after `code { background: <light> }` leaves\n the code text transparent over the dark panel; the cascade must not\n keep measuring it against the light surface it never paints. -->\n <div class=\"panel-reset\" data-test=\"panel-reset\">\n <pre><code data-test=\"code-reset\">light text over the dark panel, not the light code surface</code></pre>\n </div>\n\n <h3>Gradient-clipped text (issue #409 Case A — must not flag contrast)</h3>\n <!-- background-clip: text with a transparent fill: the gradient paints the\n glyphs, not a surface behind them. The inherited light `color` is\n never painted. The gradient-text pattern still flags; the backdrop\n contrast rules (low-contrast / gray-on-color) must not. -->\n <h1 class=\"ox-grad-text\" data-test=\"ox-grad-text\">Gradient Clipped Heading Text</h1>\n\n <h3>Faint accent-glow gradient (issue #409 Case B — must not flag contrast)</h3>\n <!-- A 9%-alpha teal glow over a dark section. Composited against the dark\n surface the stop is near-black, so the light and gray text on it are\n high-contrast. Treating the stop as opaque #34c0a8 was the false\n positive that flagged every text child. -->\n <div class=\"ox-dark-wrap\">\n <div class=\"ox-glow\" data-test=\"ox-glow\">\n <p>Light body copy on a faint accent glow that composites to near-black</p>\n <p class=\"muted\">Muted secondary line on the same faint glow area here</p>\n </div>\n </div>\n\n <h3>color-mix gradient stop: nested ingredient is not a surface</h3>\n <div class=\"mix-dark-wrap\">\n <div class=\"mix-glow\" data-test=\"mix-glow\">\n <p>Light copy on a faint mixed wash over a dark ground stays readable</p>\n </div>\n </div>\n\n <h3>currentcolor surface with good contrast</h3>\n <div class=\"currentcolor-surface\" data-test=\"currentcolor-good\">\n <p class=\"currentcolor-good-text\">Dark ink text on a bone currentcolor surface</p>\n </div>\n\n <h3>currentcolor surface with unresolvable token (must abstain)</h3>\n <!-- The var() token is undefined, so the surface genuinely cannot be\n read. The walk must abstain instead of guessing a background for\n the light text inside. -->\n <div class=\"currentcolor-unknown\" data-test=\"currentcolor-unknown\">\n <p>Light text on an unknowable currentcolor surface</p>\n </div>\n\n <h3>Emoji on light backgrounds</h3>\n <!-- Emojis render as multicolor glyphs regardless of CSS color, so the\n CSS color is irrelevant for contrast. These should NOT be flagged. -->\n <div class=\"card emoji-test\" data-test=\"emoji-light\" style=\"background: #ffe4e6;\">\n <p style=\"color: #ffe4e6; font-size: 24px;\">⚠️ 🚨 ✨ 🎨</p>\n </div>\n <div class=\"card emoji-test\" data-test=\"emoji-dark\" style=\"background: #1a1a1a;\">\n <p style=\"color: #1a1a1a; font-size: 24px;\">⚠️ 🚨 ✨ 🎨</p>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #1a1a1a; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n /* Styled button color cases (declared via stylesheet so jsdom resolves them\n reliably — inline color doesn't always win over user-agent rules in jsdom\n for <a> and <button>). */\n .styled-pill-low { background-color: rgb(31, 26, 21); color: rgb(91, 79, 68); display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; }\n .low-contrast-button { background-color: rgb(55, 65, 81); color: rgb(108, 114, 128); display: inline-block; padding: 10px 20px; border-radius: 8px; border: 0; font-size: 14px; }\n .good-pill-high { background-color: rgb(20, 20, 25); color: rgb(245, 240, 232); display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; }\n .inline-link-low { color: rgb(170, 170, 170); }\n /* Chip / badge cases: text-bearing spans painting their own background. */\n .chip-sev-low { display: inline-block; background-color: rgb(182, 50, 45); color: rgb(92, 84, 73); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }\n .chip-ok-high { display: inline-block; background-color: rgb(20, 20, 25); color: rgb(245, 240, 232); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }\n .chip-sub9-low { display: inline-block; background-color: rgb(182, 50, 45); color: rgb(150, 60, 55); font-size: 8px; padding: 1px 4px; }\n .panel-reset { background: rgb(28, 30, 38); color: rgb(230, 232, 237); padding: 12px; }\n .panel-reset code { background: rgb(246, 242, 244); border-radius: 3px; padding: 1px 4px; }\n .panel-reset pre code { background: none; }\n /* issue #409 Case A: gradient-clipped text. The gradient IS the glyph fill\n (text-fill-color: transparent), not a backdrop. The inherited `color`\n (#e8e6e3) is never painted, so measuring it against the element's own\n gradient stops (#6d8cff / #a78bfa) is a false positive. */\n .ox-grad-text { background: linear-gradient(135deg, #6d8cff 0%, #a78bfa 50%, #6d8cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #e8e6e3; font-size: 40px; font-weight: 800; }\n /* issue #409 Case B: a 9%-alpha accent glow stop over a dark surface. The\n stop composites to ~#121f1f, not the full-opacity #34c0a8, so text stays\n high-contrast. The dark wrapper supplies the surface beneath the glow. */\n .ox-dark-wrap { background: #0f0f11; padding: 16px; }\n .ox-glow { background: linear-gradient(160deg, rgba(52,192,168,0.09) 0%, #141419 65%); padding: 20px; }\n .ox-glow p { color: #e8e6e3; font-size: 18px; }\n .ox-glow .muted { color: #8e8c89; font-size: 16px; }\n /* Gradient stop written as color-mix with a bright nested ingredient.\n The stop paints as a 16% wash of the light oklch color (composited\n over the dark wrap it is near-black); the nested oklch(90% ...) is an\n INGREDIENT, never painted. A parser that re-extracts nested tokens\n appends it as a phantom opaque light stop and the worst-case ratio\n then flags the light text at ~1:1 against a color nobody sees. */\n .mix-dark-wrap { background: #0f0f11; padding: 16px; }\n .mix-glow { background: linear-gradient(160deg, color-mix(in oklab, oklch(90% 0.02 95) 16%, transparent) 0%, #141419 65%); padding: 20px; }\n .mix-glow p { color: #ded9cf; font-size: 16px; }\n /* currentcolor surface: background-color paints with the element's own\n text color, which is itself a var() token here. jsdom hands both\n through verbatim, so the walk must resolve the token via the\n custom-prop map instead of abstaining on a knowable surface. */\n :root { --fixture-bone: #e8e2d6; }\n .currentcolor-surface { background-color: currentcolor; color: var(--fixture-bone); padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n .currentcolor-low-text { color: #cfc9bd; font-size: 14px; }\n .currentcolor-good-text { color: #3a352c; font-size: 14px; }\n /* Same shape but the token does not exist: the surface truly cannot be\n read, so the walk must abstain rather than guess. */\n .currentcolor-unknown { background-color: currentcolor; color: var(--fixture-undefined-token); padding: 14px 16px; border-radius: 10px; }\n .currentcolor-unknown p { color: #efe9dd; font-size: 14px; }\n \nstyle=\"background: #000000; color: white;\"\nstyle=\"background: rgb(59, 130, 246);\"\nstyle=\"color: rgb(150, 150, 150);\"\nstyle=\"background: rgb(16, 185, 129);\"\nstyle=\"color: rgb(180, 180, 180);\"\nstyle=\"background: white;\"\nstyle=\"color: rgb(200, 200, 200);\"\nstyle=\"background: rgb(30, 30, 30);\"\nstyle=\"color: rgb(80, 80, 80);\"\nstyle=\"background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%); padding: 16px;\"\nstyle=\"color: #808080; font-size: 32px; font-weight: 800; margin: 0;\"\nstyle=\"color: #666666; font-size: 14px;\"\nstyle=\"background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem;\"\nstyle=\"color: rgb(139, 92, 246); font-size: 1.5rem; margin: 0;\"\nstyle=\"background: black; color: white;\"\nstyle=\"background: rgb(59, 130, 246);\"\nstyle=\"color: rgb(156, 163, 175);\"\nstyle=\"color: rgb(168, 85, 247); font-size: 1.5rem; font-weight: 700;\"\nstyle=\"background: linear-gradient(to right, rgb(168, 85, 247), rgb(99, 102, 241)); color: white;\"\nstyle=\"background: rgb(26, 26, 30);\"\nstyle=\"color: rgb(240, 240, 245);\"\nstyle=\"background: rgb(250, 250, 252);\"\nstyle=\"color: rgb(20, 20, 25);\"\nstyle=\"background: #ffffff;\"\nstyle=\"color: #111827;\"\nstyle=\"background: rgb(30, 64, 175);\"\nstyle=\"color: rgb(240, 240, 245);\"\nstyle=\"background: rgb(16, 185, 129);\"\nstyle=\"color: rgb(5, 46, 32);\"\nstyle=\"color: rgb(220, 38, 38); font-size: 1.25rem; margin: 0;\"\nstyle=\"color: rgb(180, 83, 9); font-size: 1.25rem; margin: 8px 0 0;\"\nstyle=\"background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg=='); background-size: cover; padding: 20px;\"\nstyle=\"color: rgb(255, 255, 255); font-size: 16px;\"\nstyle=\"background: rgba(0,0,0,0.03);\"\nstyle=\"background: rgba(0,0,0,0);\"\nstyle=\"background: rgba(0,0,0,0.5);\"\nstyle=\"color: white;\"\nstyle=\"background: #ffe4e6;\"\nstyle=\"color: #ffe4e6; font-size: 24px;\"\nstyle=\"background: #1a1a1a;\"\nstyle=\"color: #1a1a1a; font-size: 24px;\"","classText":"grid\ncol\ncard\ncard\ncard\ncard\ncard\ncard\nstyled-pill-low\nlow-contrast-button\nchip-sev-low\nbg-black text-white p-4 rounded card\nbg-blue-500 text-gray-400 p-4 rounded card\ntext-purple-500 text-2xl font-bold\nbg-gradient-to-r from-purple-500 to-indigo-500 text-white p-4 rounded card\ncurrentcolor-surface\ncurrentcolor-low-text\ncol\ncard\ncard\ncard\ncard\ncard\nbg-black/3 p-4 rounded card\nhover:bg-black/5 p-4 rounded card\nbg-black/50 p-4 rounded card\ninline-link-low\ngood-pill-high\nchip-ok-high\nchip-sub9-low\npanel-reset\nox-grad-text\nox-dark-wrap\nox-glow\nmuted\nmix-dark-wrap\nmix-glow\ncurrentcolor-surface\ncurrentcolor-good-text\ncurrentcolor-unknown\ncard emoji-test\ncard emoji-test"}],"result":[{"id":"ai-color-palette","snippet":"Purple/violet accent colors detected"},{"id":"gradient-text","snippet":"background-clip: text + gradient","selector":".ox-grad-text"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Cramped Padding — Should Flag vs Should Pass</title>\n <style>\n /* Comprehensive fixture for the cramped-padding rule.\n Both columns include a wide variety of cases so we can verify the\n rule scales sensibly with font-size and treats the two axes\n independently (vertical can be tighter because line-height already\n provides built-in breathing room; horizontal has no equivalent). */\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.5; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1400px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 28px 0 10px; color: #64748b; }\n .case { margin-bottom: 14px; padding: 14px 16px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 8px; font-style: italic; }\n\n /* ── FLAG: cramped body in cards ── */\n .flag-card-4 { padding: 4px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }\n .flag-card-2 { padding: 2px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }\n .flag-card-bg4 { padding: 4px; background: #fef3c7; border-radius: 6px; font-size: 16px; }\n\n /* ── FLAG: asymmetric cramping ── */\n .flag-asym-v { padding: 1px 16px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }\n .flag-asym-h { padding: 12px 4px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }\n\n /* ── FLAG: cramped large text (currently MISSED by the 8px floor) ── */\n .flag-heading-tight { padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 24px; font-weight: 600; line-height: 1.2; }\n .flag-hero-tight { padding: 6px 16px; background: #f1f5f9; border-radius: 6px; font-size: 32px; font-weight: 700; line-height: 1.2; }\n\n /* ── FLAG: cramped multi-line code block ── */\n .flag-pre-tight { padding: 2px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }\n\n /* ── PASS: small inline pills (the .detection-cmd category) ── */\n .pass-cmd {\n display: inline-block;\n font-family: ui-monospace, SFMono-Regular, monospace;\n font-size: 13px;\n line-height: 1.625;\n color: #0f172a;\n background: #f5f5f7;\n padding: 6px 14px;\n border-radius: 6px;\n white-space: nowrap;\n }\n .pass-cmd::before { content: '➜ '; color: #ec4899; }\n .pass-badge {\n display: inline-block;\n font-size: 11px;\n line-height: 1.6;\n padding: 4px 8px;\n background: #dbeafe;\n color: #1e40af;\n border-radius: 999px;\n font-weight: 600;\n }\n .pass-chip {\n display: inline-block;\n font-size: 12px;\n line-height: 1.6;\n padding: 4px 10px;\n background: #fef3c7;\n color: #92400e;\n border-radius: 4px;\n font-weight: 500;\n }\n .pass-inline-code-chip {\n display: inline-block;\n font-family: ui-monospace, SFMono-Regular, monospace;\n font-size: 12px;\n line-height: 2;\n padding: 0.3em 0.5em;\n background: #eef2f7;\n color: #0f172a;\n border-radius: 4px;\n }\n\n /* ── PASS: cards at current standards ── */\n .pass-card-min { padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 16px; line-height: 1.6; }\n .pass-card-good { padding: 16px; background: #f1f5f9; border-radius: 8px; font-size: 14px; line-height: 1.6; }\n .pass-card-large { padding: 12px; background: #f1f5f9; border-radius: 8px; font-size: 18px; line-height: 1.6; }\n\n /* ── PASS: comfortable code blocks ── */\n .pass-pre-min { padding: 8px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }\n .pass-pre-good { padding: 12px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }\n\n /* ── PASS: interactive elements ── */\n .pass-button-std { padding: 8px 16px; background: #3b82f6; color: white; border: 0; border-radius: 6px; font-size: 14px; cursor: pointer; }\n .pass-input-std { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 16px; width: 100%; box-sizing: border-box; }\n\n /* ── PASS: big text with proportional padding ── */\n .pass-heading-good { padding: 16px; background: #f1f5f9; border-radius: 8px; font-size: 24px; font-weight: 600; line-height: 1.2; }\n .pass-hero-good { padding: 20px 32px; background: #f1f5f9; border-radius: 8px; font-size: 32px; font-weight: 700; line-height: 1.2; }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>Cramped body in cards</h3>\n <div class=\"case\">\n <span class=\"case-label\">14px body, 4px padding all sides</span>\n <div class=\"flag-card-4\">This text is crammed against the border with only 4px padding. It feels claustrophobic and hard to read because the eye has nowhere to rest.</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">14px body, 2px padding all sides</span>\n <div class=\"flag-card-2\">Two pixels of padding is essentially nothing — body text needs room to breathe inside its container, especially across multiple lines.</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">16px body, 4px padding, background only</span>\n <div class=\"flag-card-bg4\">A colored background containment with only 4px padding around 16px body text. The colored edge feels like it's pressing in.</div>\n </div>\n\n <h3>Asymmetric cramping</h3>\n <div class=\"case\">\n <span class=\"case-label\">1px vertical / 16px horizontal, 14px body</span>\n <div class=\"flag-asym-v\">Generous horizontal padding doesn't save you when the vertical padding is just one pixel. Lines stack on top of each other against the container edge.</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">12px vertical / 4px horizontal, 14px body</span>\n <div class=\"flag-asym-h\">Comfortable vertical padding can't fix horizontal text running right up against the side edges. Words feel like they're falling off the container.</div>\n </div>\n\n <h3>Currently missed: cramped large text</h3>\n <div class=\"case\">\n <span class=\"case-label\">24px heading, 8px padding (passes the 8px floor but is too tight for the text size)</span>\n <div class=\"flag-heading-tight\">Tight Heading Container Label</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">32px hero, 6px vertical / 16px horizontal padding</span>\n <div class=\"flag-hero-tight\">Hero Section With Tight Vertical Padding</div>\n </div>\n\n <h3>Cramped multi-line code block</h3>\n <div class=\"case\">\n <span class=\"case-label\"><pre>, 2px padding, 14px monospace</span>\n <pre class=\"flag-pre-tight\">function example() {\n const value = \"cramped\";\n return value;\n}</pre>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>Small inline pills</h3>\n <div class=\"case\">\n <span class=\"case-label\">.detection-cmd replica: 13px font, 6px / 14px padding (the homepage case)</span>\n <code class=\"pass-cmd\">npx impeccable detect src/</code>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">small badge: 11px font, 4px / 8px padding</span>\n <span class=\"pass-badge\">FEATURED ITEM BADGE</span>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">tag chip: 12px font, 4px / 10px padding</span>\n <span class=\"pass-chip\">design system tag chip</span>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">long inline code chip: compact inline code should not be treated like a padded card</span>\n <code class=\"pass-inline-code-chip\">npx impeccable check</code>\n </div>\n\n <h3>Cards at current standards</h3>\n <div class=\"case\">\n <span class=\"case-label\">16px body, 8px padding (the original 8px floor)</span>\n <div class=\"pass-card-min\">Standard card with 8px padding around 16px body text. Comfortable and within current conventions.</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">14px body, 16px padding (generous)</span>\n <div class=\"pass-card-good\">Generous 16px padding around 14px body text. The eye has plenty of room from the container edge.</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">18px body, 12px padding (proportional)</span>\n <div class=\"pass-card-large\">Larger body text gets proportionally more padding. 12px around 18px text feels balanced.</div>\n </div>\n\n <h3>Comfortable code blocks</h3>\n <div class=\"case\">\n <span class=\"case-label\">multi-line <pre>, 8px padding, 14px font</span>\n <pre class=\"pass-pre-min\">function example() {\n const value = \"ok\";\n return value;\n}</pre>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">multi-line <pre>, 12px padding, 14px font</span>\n <pre class=\"pass-pre-good\">function example() {\n const value = \"comfortable\";\n return value;\n}</pre>\n </div>\n\n <h3>Interactive elements</h3>\n <div class=\"case\">\n <span class=\"case-label\">button: 14px font, 8px / 16px padding</span>\n <button class=\"pass-button-std\">Standard sized button</button>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">form input: 16px font, 8px / 12px padding</span>\n <input type=\"text\" class=\"pass-input-std\" value=\"Standard input with adequate padding\">\n </div>\n\n <h3>Big text with proportional padding</h3>\n <div class=\"case\">\n <span class=\"case-label\">24px heading, 16px padding</span>\n <div class=\"pass-heading-good\">Heading With Room To Breathe</div>\n </div>\n <div class=\"case\">\n <span class=\"case-label\">32px hero, 20px / 32px padding</span>\n <div class=\"pass-hero-good\">Hero With Big Padding</div>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* Comprehensive fixture for the cramped-padding rule.\n Both columns include a wide variety of cases so we can verify the\n rule scales sensibly with font-size and treats the two axes\n independently (vertical can be tighter because line-height already\n provides built-in breathing room; horizontal has no equivalent). */\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.5; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1400px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 28px 0 10px; color: #64748b; }\n .case { margin-bottom: 14px; padding: 14px 16px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 8px; font-style: italic; }\n\n /* ── FLAG: cramped body in cards ── */\n .flag-card-4 { padding: 4px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }\n .flag-card-2 { padding: 2px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }\n .flag-card-bg4 { padding: 4px; background: #fef3c7; border-radius: 6px; font-size: 16px; }\n\n /* ── FLAG: asymmetric cramping ── */\n .flag-asym-v { padding: 1px 16px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }\n .flag-asym-h { padding: 12px 4px; background: #f1f5f9; border-radius: 6px; font-size: 14px; }\n\n /* ── FLAG: cramped large text (currently MISSED by the 8px floor) ── */\n .flag-heading-tight { padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 24px; font-weight: 600; line-height: 1.2; }\n .flag-hero-tight { padding: 6px 16px; background: #f1f5f9; border-radius: 6px; font-size: 32px; font-weight: 700; line-height: 1.2; }\n\n /* ── FLAG: cramped multi-line code block ── */\n .flag-pre-tight { padding: 2px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }\n\n /* ── PASS: small inline pills (the .detection-cmd category) ── */\n .pass-cmd {\n display: inline-block;\n font-family: ui-monospace, SFMono-Regular, monospace;\n font-size: 13px;\n line-height: 1.625;\n color: #0f172a;\n background: #f5f5f7;\n padding: 6px 14px;\n border-radius: 6px;\n white-space: nowrap;\n }\n .pass-cmd::before { content: '➜ '; color: #ec4899; }\n .pass-badge {\n display: inline-block;\n font-size: 11px;\n line-height: 1.6;\n padding: 4px 8px;\n background: #dbeafe;\n color: #1e40af;\n border-radius: 999px;\n font-weight: 600;\n }\n .pass-chip {\n display: inline-block;\n font-size: 12px;\n line-height: 1.6;\n padding: 4px 10px;\n background: #fef3c7;\n color: #92400e;\n border-radius: 4px;\n font-weight: 500;\n }\n .pass-inline-code-chip {\n display: inline-block;\n font-family: ui-monospace, SFMono-Regular, monospace;\n font-size: 12px;\n line-height: 2;\n padding: 0.3em 0.5em;\n background: #eef2f7;\n color: #0f172a;\n border-radius: 4px;\n }\n\n /* ── PASS: cards at current standards ── */\n .pass-card-min { padding: 8px; background: #f1f5f9; border-radius: 6px; font-size: 16px; line-height: 1.6; }\n .pass-card-good { padding: 16px; background: #f1f5f9; border-radius: 8px; font-size: 14px; line-height: 1.6; }\n .pass-card-large { padding: 12px; background: #f1f5f9; border-radius: 8px; font-size: 18px; line-height: 1.6; }\n\n /* ── PASS: comfortable code blocks ── */\n .pass-pre-min { padding: 8px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }\n .pass-pre-good { padding: 12px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.5; }\n\n /* ── PASS: interactive elements ── */\n .pass-button-std { padding: 8px 16px; background: #3b82f6; color: white; border: 0; border-radius: 6px; font-size: 14px; cursor: pointer; }\n .pass-input-std { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 16px; width: 100%; box-sizing: border-box; }\n\n /* ── PASS: big text with proportional padding ── */\n .pass-heading-good { padding: 16px; background: #f1f5f9; border-radius: 8px; font-size: 24px; font-weight: 600; line-height: 1.2; }\n .pass-hero-good { padding: 20px 32px; background: #f1f5f9; border-radius: 8px; font-size: 32px; font-weight: 700; line-height: 1.2; }\n ","classText":"grid\ncol\ncase\ncase-label\nflag-card-4\ncase\ncase-label\nflag-card-2\ncase\ncase-label\nflag-card-bg4\ncase\ncase-label\nflag-asym-v\ncase\ncase-label\nflag-asym-h\ncase\ncase-label\nflag-heading-tight\ncase\ncase-label\nflag-hero-tight\ncase\ncase-label\nflag-pre-tight\ncol\ncase\ncase-label\npass-cmd\ncase\ncase-label\npass-badge\ncase\ncase-label\npass-chip\ncase\ncase-label\npass-inline-code-chip\ncase\ncase-label\npass-card-min\ncase\ncase-label\npass-card-good\ncase\ncase-label\npass-card-large\ncase\ncase-label\npass-pre-min\ncase\ncase-label\npass-pre-good\ncase\ncase-label\npass-button-std\ncase\ncase-label\npass-input-std\ncase\ncase-label\npass-heading-good\ncase\ncase-label\npass-hero-good"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Cream palette (Tailwind) fixture</title>\n</head>\n<body class=\"bg-amber-50 text-stone-800 font-serif\">\n <h1>A warm cream surface via Tailwind</h1>\n <p>The background comes from a utility class (bg-amber-50), not inline CSS, so the static engine never resolves it to a computed color. The class-list fallback should still catch it.</p>\n</body>\n</html>\n",{"styleText":"","classText":"bg-amber-50 text-stone-800 font-serif"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Cream palette fixture</title>\n <style>\n body { background: #f5efe2; color: #2a2622; font-family: Georgia, serif; margin: 0; padding: 40px; }\n h1 { font-size: 40px; margin: 0 0 16px; }\n p { max-width: 60ch; line-height: 1.6; }\n </style>\n</head>\n<body>\n <h1>A warm cream surface</h1>\n <p>The whole page sits on the default tasteful off-white that every generated landing page reaches for. The background is the tell, regardless of what sits on top of it.</p>\n</body>\n</html>\n",{"styleText":"\n body { background: #f5efe2; color: #2a2622; font-family: Georgia, serif; margin: 0; padding: 40px; }\n h1 { font-size: 40px; margin: 0 0 16px; }\n p { max-width: 60ch; line-height: 1.6; }\n ","classText":""}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<!--\n Companion to css-in-prose-should-pass.html: the same patterns applied as\n real styling. The scoped-corpus scan must still catch every carrier a page\n can style itself with — a <style> rule, an inline style=\"\" attribute, and\n Tailwind utility classes.\n-->\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Real gradient-text styling</title>\n<style>\n body { font-family: Georgia, serif; margin: 0; padding: 40px 24px; background: #fdfcf9; color: #1f2933; }\n /* SHOULD FLAG (gradient-text + ai-color-palette): a real style rule. */\n .gradient-heading {\n background: linear-gradient(135deg, #7c3aed, #a855f7);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n font-size: 44px;\n }\n</style>\n</head>\n<body>\n<h1 class=\"gradient-heading\">Ship Faster With Us</h1>\n\n<!-- SHOULD FLAG (gradient-text): the same construction inline. -->\n<h2 style=\"background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 28px;\">Inline gradient heading</h2>\n\n<!-- SHOULD FLAG (gradient-text, Tailwind): bg-clip-text + bg-gradient-to- classes. -->\n<h2 class=\"bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 text-transparent\">Tailwind gradient heading</h2>\n\n<p>Body copy long enough to make this a real page for the scanners to read.</p>\n</body>\n</html>\n",{"styleText":"\n body { font-family: Georgia, serif; margin: 0; padding: 40px 24px; background: #fdfcf9; color: #1f2933; }\n /* SHOULD FLAG (gradient-text + ai-color-palette): a real style rule. */\n .gradient-heading {\n background: linear-gradient(135deg, #7c3aed, #a855f7);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n font-size: 44px;\n }\n\nstyle=\"background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 28px;\"","classText":"gradient-heading\nbg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 text-transparent"}],"result":[{"id":"ai-color-palette","snippet":"Purple/violet accent colors detected","selector":".gradient-heading"},{"id":"gradient-text","snippet":"background-clip: text + gradient","selector":".gradient-heading"},{"id":"gradient-text","snippet":"bg-clip-text + bg-gradient (Tailwind)"}]}
|
||
{"args":["<!DOCTYPE html>\n<!--\n Regression fixture: CSS-property patterns appearing in prose, code samples,\n and comments are documentation ABOUT css, not styling. The page-level\n pattern checks must scan only real style carriers (<style> blocks, style=\"\"\n attribute values, linked stylesheets, class=\"\" attribute values), never\n rendered text. Live false positive that motivated this fixture: the\n impeccable.style changelog line\n \"<code>background-clip: text</code> gradients stop tripping contrast\"\n tripped gradient-text on the raw-source scan, and the purple hex codes in\n its rule documentation shared the same exposure via ai-color-palette.\n\n Every case in this file SHOULD PASS: nothing here styles the page with the\n documented patterns.\n-->\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Docs about CSS anti-patterns</title>\n<style>\n body { font-family: Georgia, 'Iowan Old Style', serif; margin: 0; padding: 32px 24px 40px; color: #1f2933; background: #fdfcf9; }\n h1 { font-size: 34px; margin: 0 0 12px; }\n h2 { font-size: 20px; margin: 28px 0 8px; }\n p { font-size: 16px; max-width: 640px; }\n pre { background: #f1efe9; padding: 16px; overflow-x: auto; font-size: 13px; }\n code { font-family: 'SF Mono', ui-monospace, monospace; }\n</style>\n</head>\n<body>\n<h1>Changelog</h1>\n\n<!-- SHOULD PASS (gradient-text): the exact changelog shape — inline <code>\n naming the property with \"gradient\" prose within the context window. -->\n<h2>Detector</h2>\n<p><code>background-clip: text</code> gradients stop tripping the contrast rules when the glyph fill is transparent.</p>\n\n<!-- SHOULD PASS (gradient-text + ai-color-palette): a <pre> CSS sample\n documenting the pattern, purple hexes and all. -->\n<h2>What the rule catches</h2>\n<pre><code>.hero-title {\n background: linear-gradient(135deg, #667eea, #764ba2);\n -webkit-background-clip: text;\n background-clip: text;\n color: #7c3aed;\n}</code></pre>\n\n<!-- SHOULD PASS (gradient-text, Tailwind form): prose naming the utility\n classes without applying them. -->\n<p>The Tailwind form pairs bg-clip-text with bg-gradient-to-r on one element; the two utilities together are the tell.</p>\n\n<!-- SHOULD PASS (gradient-text): an HTML comment carrying the pattern.\n background-clip: text; with a linear-gradient(90deg, #7c3aed, #a855f7)\n fill is the construction the rule looks for. -->\n\n<!-- SHOULD PASS (pulsing-dot): a <pre> sample of the decorative live dot. -->\n<h2>Pulsing dots</h2>\n<pre><code>.status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n animation: pulse 2s ease-in-out infinite;\n}</code></pre>\n\n<!-- SHOULD PASS (side-tab): a <pre> sample of the pseudo-element stripe. -->\n<h2>Side stripes</h2>\n<pre><code>.card::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 4px;\n background: #3b82f6;\n}</code></pre>\n\n</body>\n</html>\n",{"styleText":"\n body { font-family: Georgia, 'Iowan Old Style', serif; margin: 0; padding: 32px 24px 40px; color: #1f2933; background: #fdfcf9; }\n h1 { font-size: 34px; margin: 0 0 12px; }\n h2 { font-size: 20px; margin: 28px 0 8px; }\n p { font-size: 16px; max-width: 640px; }\n pre { background: #f1efe9; padding: 16px; overflow-x: auto; font-size: 13px; }\n code { font-family: 'SF Mono', ui-monospace, monospace; }\n","classText":""}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Fixture: gradient body ground, oklch stops (low-contrast)</title>\n<style>\n /* The impeccable.style false-positive class: the page ground is a gradient\n set via `background:` shorthand, so the body's computed backgroundColor\n is transparent and the ground exists only as a backgroundImage whose\n stops serialize in oklch. The detector must measure text against those\n stops (composited under any translucent layers), never against an\n assumed white body. */\n body {\n margin: 0;\n padding: 48px;\n background: linear-gradient(180deg, oklch(7% 0.006 95), oklch(4% 0.004 95));\n font-family: Arial, sans-serif;\n }\n body > * { margin: 0 0 32px; }\n\n /* ── Should flag ─────────────────────────────────────────────────── */\n .flag-muted-direct {\n width: 560px;\n color: oklch(30% 0 0);\n font-size: 16px;\n line-height: 1.7;\n }\n .flag-muted-nested-wrapper { width: 560px; }\n .flag-muted-nested {\n color: oklch(32% 0 0);\n font-size: 16px;\n line-height: 1.7;\n margin: 0;\n }\n .frosted-light {\n width: 480px;\n padding: 24px;\n background: rgba(250, 249, 246, 0.88);\n border-radius: 4px;\n }\n .flag-light-on-frosted {\n color: oklch(88% 0 0);\n font-size: 15px;\n line-height: 1.6;\n margin: 0;\n }\n\n /* ── Should pass ─────────────────────────────────────────────────── */\n .pass-hero-title {\n width: 640px;\n color: oklch(91% 0 0);\n font-size: 48px;\n }\n .pass-hero-body {\n width: 560px;\n color: oklch(88% 0 0);\n font-size: 16px;\n line-height: 1.7;\n }\n .pass-on-raised {\n width: 420px;\n padding: 24px;\n background: oklch(11% 0.006 95);\n color: oklch(88% 0 0);\n font-size: 15px;\n }\n .pass-dark-on-frosted {\n color: oklch(15% 0.01 95);\n font-size: 15px;\n line-height: 1.6;\n margin: 0 0 12px;\n }\n .pass-hex-gradient {\n width: 520px;\n padding: 24px;\n background-image: linear-gradient(180deg, #14120f, #0a0908);\n color: oklch(90% 0 0);\n font-size: 15px;\n line-height: 1.6;\n }\n .pass-image-backed {\n width: 460px;\n padding: 18px 22px;\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)), url(\"/fixtures/antipatterns/no-such-texture.png\") center / cover;\n color: oklch(15% 0.01 95);\n font-size: 15px;\n line-height: 1.6;\n }\n .pass-photo-panel {\n width: 460px;\n padding: 18px 22px;\n background-image: url(\"/fixtures/antipatterns/no-such-photo.jpg\");\n color: oklch(20% 0 0);\n font-size: 15px;\n line-height: 1.6;\n }\n .pass-hidden-scene {\n opacity: 0;\n width: 560px;\n }\n .pass-hidden-scene p {\n color: oklch(30% 0 0);\n font-size: 16px;\n line-height: 1.7;\n margin: 0;\n }\n</style>\n</head>\n<body>\n <h1 class=\"pass-hero-title\">Light display text on the lacquer gradient</h1>\n <p class=\"pass-hero-body\">This paragraph sits directly on the body's dark gradient ground. Its near-white ink clears WCAG AA against both gradient stops by a wide margin, so a detector that measures the real ground must not flag it. A detector that assumes a white body flags it at about 1.3:1.</p>\n <div class=\"pass-on-raised\">Light text on a raised solid oklch surface between the text and the body gradient still resolves through the normal opaque-ancestor walk.</div>\n <div class=\"frosted-light\">\n <p class=\"pass-dark-on-frosted\">Dark ink on a translucent light wash over the dark gradient. The wash composites to a light surface, so this passes; measuring raw gradient stops would wrongly flag it.</p>\n <p class=\"flag-light-on-frosted\">Light ink on the same translucent light wash genuinely fails once the wash is composited over the stops; raw stops would wrongly pass it.</p>\n </div>\n <p class=\"flag-muted-direct\">This muted dark-gray ink genuinely fails contrast against both stops of the dark gradient ground, which proves the gradient stops are being measured instead of the checks silently skipping.</p>\n <div class=\"flag-muted-nested-wrapper\">\n <p class=\"flag-muted-nested\">Muted ink reached through a transparent wrapper still resolves to the body gradient and still fails against its stops.</p>\n </div>\n <div class=\"pass-hex-gradient\">A non-body gradient with legacy hex stops keeps working through the original rgb/hex parser, and light text on it passes.</div>\n <div class=\"pass-image-backed\">Dark ink on a translucent wash over a texture image. The image pixels are unknowable to the analytic walk, so contrast must skip rather than composite the wash over the wrong base.</div>\n <div class=\"pass-photo-panel\">Dark ink on a photo-backed panel sitting over the dark body gradient. Walking past the photo to the gradient stops would wrongly flag this; the unmeasurable image layer must end the walk.</div>\n <div class=\"pass-hidden-scene\"><p>Muted ink inside an opacity-zero scene deck. Nobody sees this state, so the contrast checks must not measure it.</p></div>\n</body>\n</html>\n",{"styleText":"\n /* The impeccable.style false-positive class: the page ground is a gradient\n set via `background:` shorthand, so the body's computed backgroundColor\n is transparent and the ground exists only as a backgroundImage whose\n stops serialize in oklch. The detector must measure text against those\n stops (composited under any translucent layers), never against an\n assumed white body. */\n body {\n margin: 0;\n padding: 48px;\n background: linear-gradient(180deg, oklch(7% 0.006 95), oklch(4% 0.004 95));\n font-family: Arial, sans-serif;\n }\n body > * { margin: 0 0 32px; }\n\n /* ── Should flag ─────────────────────────────────────────────────── */\n .flag-muted-direct {\n width: 560px;\n color: oklch(30% 0 0);\n font-size: 16px;\n line-height: 1.7;\n }\n .flag-muted-nested-wrapper { width: 560px; }\n .flag-muted-nested {\n color: oklch(32% 0 0);\n font-size: 16px;\n line-height: 1.7;\n margin: 0;\n }\n .frosted-light {\n width: 480px;\n padding: 24px;\n background: rgba(250, 249, 246, 0.88);\n border-radius: 4px;\n }\n .flag-light-on-frosted {\n color: oklch(88% 0 0);\n font-size: 15px;\n line-height: 1.6;\n margin: 0;\n }\n\n /* ── Should pass ─────────────────────────────────────────────────── */\n .pass-hero-title {\n width: 640px;\n color: oklch(91% 0 0);\n font-size: 48px;\n }\n .pass-hero-body {\n width: 560px;\n color: oklch(88% 0 0);\n font-size: 16px;\n line-height: 1.7;\n }\n .pass-on-raised {\n width: 420px;\n padding: 24px;\n background: oklch(11% 0.006 95);\n color: oklch(88% 0 0);\n font-size: 15px;\n }\n .pass-dark-on-frosted {\n color: oklch(15% 0.01 95);\n font-size: 15px;\n line-height: 1.6;\n margin: 0 0 12px;\n }\n .pass-hex-gradient {\n width: 520px;\n padding: 24px;\n background-image: linear-gradient(180deg, #14120f, #0a0908);\n color: oklch(90% 0 0);\n font-size: 15px;\n line-height: 1.6;\n }\n .pass-image-backed {\n width: 460px;\n padding: 18px 22px;\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)), url(\"/fixtures/antipatterns/no-such-texture.png\") center / cover;\n color: oklch(15% 0.01 95);\n font-size: 15px;\n line-height: 1.6;\n }\n .pass-photo-panel {\n width: 460px;\n padding: 18px 22px;\n background-image: url(\"/fixtures/antipatterns/no-such-photo.jpg\");\n color: oklch(20% 0 0);\n font-size: 15px;\n line-height: 1.6;\n }\n .pass-hidden-scene {\n opacity: 0;\n width: 560px;\n }\n .pass-hidden-scene p {\n color: oklch(30% 0 0);\n font-size: 16px;\n line-height: 1.7;\n margin: 0;\n }\n","classText":"pass-hero-title\npass-hero-body\npass-on-raised\nfrosted-light\npass-dark-on-frosted\nflag-light-on-frosted\nflag-muted-direct\nflag-muted-nested-wrapper\nflag-muted-nested\npass-hex-gradient\npass-image-backed\npass-photo-panel\npass-hidden-scene"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Dark theme, modern color syntax</title>\n<style>\n /* A lacquer-black ground painted as a gradient in oklch, the shape that\n floods dark themes with \"on #ffffff\" low-contrast false positives when\n the detector cannot read the ground and assumes white. */\n body {\n margin: 0;\n padding: 24px;\n background: linear-gradient(oklch(0.07 0.006 95), oklch(0.11 0.008 95));\n font-family: Georgia, serif;\n font-size: 15px;\n line-height: 1.6;\n }\n\n section {\n padding: 24px;\n margin-bottom: 24px;\n width: 640px;\n }\n\n p { margin: 0 0 12px; font-size: 15px; }\n\n /* Readable grounds, each written in a color syntax a real browser keeps\n verbatim in getComputedStyle output. */\n .panel-srgb { background-color: color(srgb 0.1 0.11 0.12); }\n .panel-mix { background-color: color-mix(in srgb, white 6%, #0b0b0d); }\n .panel-p3 { background-color: color(display-p3 0.07 0.07 0.08); }\n .panel-lch { background-color: lch(18 4 60); }\n .panel-light { background-color: color(srgb 0.98 0.97 0.95); }\n\n /* A color space the detector does not model. Nested inside the light\n panel so a detector that walks PAST the unreadable layer would measure\n light text against the light section and invent a finding. */\n .panel-unreadable { background-color: color(rec2020 0.05 0.05 0.05); padding: 20px; }\n\n /* An image layer stacked ABOVE a loud gradient. The image is the visible\n surface and its pixels are unreadable; a detector that falls back to\n gradient stops here measures a layer the visitor never sees. */\n .panel-image-over-gradient { background-image: url(\"opaque-panel.png\"), linear-gradient(#ff0000, #0000ff); }\n\n /* Keywords a real browser resolves before getComputedStyle output but a\n partial cascade hands through verbatim: inherit takes the parent's\n ground, currentcolor paints with the element's own text color. Both are\n knowable surfaces; abstaining on them would hide real findings. */\n .panel-inherit { background-color: inherit; padding: 20px; }\n .panel-current { background-color: currentcolor; color: color(srgb 0.94 0.93 0.91); }\n .text-pale-2 { color: color(srgb 0.78 0.77 0.75); }\n\n .text-light { color: oklch(0.92 0.01 90); }\n .text-dark { color: color(srgb 0.1 0.11 0.12); }\n\n .text-muted-ground { color: oklch(0.32 0.01 90); }\n .text-dim-srgb { color: color(srgb 0.28 0.28 0.3); }\n .text-dim-p3 { color: color(display-p3 0.35 0.35 0.36); }\n .text-dim-lch { color: lch(35 3 60); }\n .text-pale-light { color: color(srgb 0.75 0.74 0.72); }\n</style>\n</head>\n<body>\n\n<h1 class=\"text-light\">Should flag</h1>\n\n<section>\n <p class=\"text-muted-ground\">Flag Muted On Oklch Ground: charcoal body copy sitting straight on the lacquer gradient.</p>\n</section>\n\n<section class=\"panel-srgb\">\n <p class=\"text-dim-srgb\">Flag Dim On Srgb Panel: slate copy on a near-black srgb surface.</p>\n</section>\n\n<section class=\"panel-p3\">\n <p class=\"text-dim-p3\">Flag Dim On Display P3 Panel: slate copy on a near-black display-p3 surface.</p>\n</section>\n\n<section class=\"panel-lch\">\n <p class=\"text-dim-lch\">Flag Dim On Lch Panel: warm gray copy on a warm near-black lch surface.</p>\n</section>\n\n<section class=\"panel-light\">\n <p class=\"text-pale-light\">Flag Pale On Light Panel: bone copy on a bone-white srgb surface.</p>\n</section>\n\n<section class=\"panel-light\">\n <div class=\"panel-inherit\">\n <p class=\"text-pale-2\">Flag Pale On Inherited Light Panel: the ground is inherited from the light section, so the walk must resolve it rather than abstain.</p>\n </div>\n</section>\n\n<section class=\"panel-current\">\n <p class=\"text-pale-light\">Flag Pale On Currentcolor Panel: the ground is the panel's own bone text color, so the keyword must resolve rather than abstain.</p>\n</section>\n\n<h1 class=\"text-light\">Should pass</h1>\n\n<section>\n <p class=\"text-light\">Pass Light Text On Oklch Gradient Ground: warm ivory copy on the lacquer gradient, roughly 15:1.</p>\n</section>\n\n<section class=\"panel-srgb\">\n <p class=\"text-light\">Pass Light Text On Srgb Panel: warm ivory copy on the near-black srgb surface.</p>\n</section>\n\n<section class=\"panel-mix\">\n <p class=\"text-light\">Pass Light Text On Color Mix Panel: warm ivory copy on a surface a browser reports as color(srgb ...).</p>\n</section>\n\n<section class=\"panel-p3\">\n <p class=\"text-light\">Pass Light Text On Display P3 Panel: warm ivory copy on the near-black display-p3 surface.</p>\n</section>\n\n<section class=\"panel-lch\">\n <p class=\"text-light\">Pass Light Text On Lch Panel: warm ivory copy on the warm near-black lch surface.</p>\n</section>\n\n<section class=\"panel-light\">\n <p class=\"text-dark\">Pass Dark Text On Light Panel: ink copy on the bone-white srgb surface.</p>\n <div class=\"panel-unreadable\">\n <p class=\"text-light\">Pass Unreadable Panel Inside Light Section: the ground is a color space the detector cannot read, so it must abstain instead of measuring against the light section or against white.</p>\n </div>\n</section>\n\n<section class=\"panel-image-over-gradient\">\n <p class=\"text-muted-ground\">Pass Image Over Gradient: the visible ground is an image whose pixels the engine cannot read, so it must abstain instead of measuring the loud gradient hidden beneath it.</p>\n</section>\n\n</body>\n</html>\n",{"styleText":"\n /* A lacquer-black ground painted as a gradient in oklch, the shape that\n floods dark themes with \"on #ffffff\" low-contrast false positives when\n the detector cannot read the ground and assumes white. */\n body {\n margin: 0;\n padding: 24px;\n background: linear-gradient(oklch(0.07 0.006 95), oklch(0.11 0.008 95));\n font-family: Georgia, serif;\n font-size: 15px;\n line-height: 1.6;\n }\n\n section {\n padding: 24px;\n margin-bottom: 24px;\n width: 640px;\n }\n\n p { margin: 0 0 12px; font-size: 15px; }\n\n /* Readable grounds, each written in a color syntax a real browser keeps\n verbatim in getComputedStyle output. */\n .panel-srgb { background-color: color(srgb 0.1 0.11 0.12); }\n .panel-mix { background-color: color-mix(in srgb, white 6%, #0b0b0d); }\n .panel-p3 { background-color: color(display-p3 0.07 0.07 0.08); }\n .panel-lch { background-color: lch(18 4 60); }\n .panel-light { background-color: color(srgb 0.98 0.97 0.95); }\n\n /* A color space the detector does not model. Nested inside the light\n panel so a detector that walks PAST the unreadable layer would measure\n light text against the light section and invent a finding. */\n .panel-unreadable { background-color: color(rec2020 0.05 0.05 0.05); padding: 20px; }\n\n /* An image layer stacked ABOVE a loud gradient. The image is the visible\n surface and its pixels are unreadable; a detector that falls back to\n gradient stops here measures a layer the visitor never sees. */\n .panel-image-over-gradient { background-image: url(\"opaque-panel.png\"), linear-gradient(#ff0000, #0000ff); }\n\n /* Keywords a real browser resolves before getComputedStyle output but a\n partial cascade hands through verbatim: inherit takes the parent's\n ground, currentcolor paints with the element's own text color. Both are\n knowable surfaces; abstaining on them would hide real findings. */\n .panel-inherit { background-color: inherit; padding: 20px; }\n .panel-current { background-color: currentcolor; color: color(srgb 0.94 0.93 0.91); }\n .text-pale-2 { color: color(srgb 0.78 0.77 0.75); }\n\n .text-light { color: oklch(0.92 0.01 90); }\n .text-dark { color: color(srgb 0.1 0.11 0.12); }\n\n .text-muted-ground { color: oklch(0.32 0.01 90); }\n .text-dim-srgb { color: color(srgb 0.28 0.28 0.3); }\n .text-dim-p3 { color: color(display-p3 0.35 0.35 0.36); }\n .text-dim-lch { color: lch(35 3 60); }\n .text-pale-light { color: color(srgb 0.75 0.74 0.72); }\n","classText":"text-light\ntext-muted-ground\npanel-srgb\ntext-dim-srgb\npanel-p3\ntext-dim-p3\npanel-lch\ntext-dim-lch\npanel-light\ntext-pale-light\npanel-light\npanel-inherit\ntext-pale-2\npanel-current\ntext-pale-light\ntext-light\ntext-light\npanel-srgb\ntext-light\npanel-mix\ntext-light\npanel-p3\ntext-light\npanel-lch\ntext-light\npanel-light\ntext-dark\npanel-unreadable\ntext-light\npanel-image-over-gradient\ntext-muted-ground"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Edge-flush cards fixture (browser-only)</title>\n <style>\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #f2f2f4; }\n h2 { padding: 16px 24px 0; font-size: 16px; }\n .scroller { width: 600px; margin: 8px 24px 24px; overflow-x: auto; display: flex; scroll-snap-type: x mandatory; background: #e4e4e8; }\n .panel { flex: 0 0 auto; scroll-snap-align: start; }\n .card { background: #fff; border-radius: 10px; height: 90px; padding: 12px; box-sizing: border-box; margin-bottom: 12px; }\n .plain { height: 90px; padding: 12px; box-sizing: border-box; }\n\n /* FLAG: first panel is wider than the scroller's clip box, so its cards\n keep a 16px left gutter but end 4px past the right clip edge. */\n .flag-pager .panel-wide { width: 620px; }\n .flag-pager .panel-wide .card { margin-left: 16px; width: 588px; }\n .flag-pager .panel-ok { width: 600px; }\n .flag-pager .panel-ok .card { margin-left: 16px; width: 568px; }\n\n /* PASS: every panel keeps a symmetric inset. */\n .pass-even .panel { width: 600px; }\n .pass-even .card { margin-left: 16px; width: 568px; }\n\n /* PASS: deliberate peek carousel; the third card is cut mid-card, far\n past the clip edge, which reads as an affordance rather than a bug. */\n .pass-peek { gap: 12px; padding: 12px 0 12px 16px; }\n .pass-peek .card { flex: 0 0 auto; width: 260px; margin: 0; }\n\n /* PASS: flush children without card styling are plain content, not cards. */\n .pass-plain .panel { width: 620px; }\n .pass-plain .plain { margin-left: 16px; width: 588px; }\n </style>\n</head>\n<body>\n <h2>Flag: first panel wider than its clip box</h2>\n <div class=\"scroller flag-pager\">\n <div class=\"panel panel-wide\">\n <div class=\"card\">Card cut off at the right clip edge while keeping its left gutter.</div>\n <div class=\"card\">Second card in the oversized panel, also flush against the edge.</div>\n </div>\n <div class=\"panel panel-ok\">\n <div class=\"card\">Sibling panel card with the intended inset on both sides.</div>\n </div>\n </div>\n\n <h2>Pass: symmetric insets</h2>\n <div class=\"scroller pass-even\">\n <div class=\"panel\"><div class=\"card\">Card with an even gutter on both sides of the clip box.</div></div>\n <div class=\"panel\"><div class=\"card\">Second panel card, also properly inset.</div></div>\n </div>\n\n <h2>Pass: deliberate peek</h2>\n <div class=\"scroller pass-peek\">\n <div class=\"card\">First peek card fully visible.</div>\n <div class=\"card\">Second peek card fully visible.</div>\n <div class=\"card\">Third card cut mid-card as a scroll affordance.</div>\n <div class=\"card\">Fourth card entirely off-screen.</div>\n </div>\n\n <h2>Pass: plain content, not cards</h2>\n <div class=\"scroller pass-plain\">\n <div class=\"panel\"><div class=\"plain\">Unstyled text block flush against the edge is not a card.</div></div>\n <div class=\"panel\"><div class=\"plain\">Second plain block.</div></div>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #f2f2f4; }\n h2 { padding: 16px 24px 0; font-size: 16px; }\n .scroller { width: 600px; margin: 8px 24px 24px; overflow-x: auto; display: flex; scroll-snap-type: x mandatory; background: #e4e4e8; }\n .panel { flex: 0 0 auto; scroll-snap-align: start; }\n .card { background: #fff; border-radius: 10px; height: 90px; padding: 12px; box-sizing: border-box; margin-bottom: 12px; }\n .plain { height: 90px; padding: 12px; box-sizing: border-box; }\n\n /* FLAG: first panel is wider than the scroller's clip box, so its cards\n keep a 16px left gutter but end 4px past the right clip edge. */\n .flag-pager .panel-wide { width: 620px; }\n .flag-pager .panel-wide .card { margin-left: 16px; width: 588px; }\n .flag-pager .panel-ok { width: 600px; }\n .flag-pager .panel-ok .card { margin-left: 16px; width: 568px; }\n\n /* PASS: every panel keeps a symmetric inset. */\n .pass-even .panel { width: 600px; }\n .pass-even .card { margin-left: 16px; width: 568px; }\n\n /* PASS: deliberate peek carousel; the third card is cut mid-card, far\n past the clip edge, which reads as an affordance rather than a bug. */\n .pass-peek { gap: 12px; padding: 12px 0 12px 16px; }\n .pass-peek .card { flex: 0 0 auto; width: 260px; margin: 0; }\n\n /* PASS: flush children without card styling are plain content, not cards. */\n .pass-plain .panel { width: 620px; }\n .pass-plain .plain { margin-left: 16px; width: 588px; }\n ","classText":"scroller flag-pager\npanel panel-wide\ncard\ncard\npanel panel-ok\ncard\nscroller pass-even\npanel\ncard\npanel\ncard\nscroller pass-peek\ncard\ncard\ncard\ncard\nscroller pass-plain\npanel\nplain\npanel\nplain"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Em-dash entity overuse</title>\n</head>\n<body>\n <main>\n <h1>A page whose em-dashes hide inside HTML entities</h1>\n <p>\n The product is fast — it is also cheap — and it is honest\n — which matters — more than speed — or price\n — in the short term — and the long run — always.\n </p>\n </main>\n</body>\n</html>\n",{"styleText":"","classText":""}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Extreme negative tracking fixture</title>\n <style>\n body { font-family: Georgia, serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n p, h2 { margin: 0 0 20px; }\n </style>\n</head>\n<body>\n <div class=\"cols\">\n <!-- FLAG column: tracking crushed past the point of legibility -->\n <section class=\"col flag\">\n <p style=\"letter-spacing: -0.06em\">Tracking crushed em paragraph copy that should still read as a sentence.</p>\n <p style=\"letter-spacing: -4px; font-size: 64px\">Tracking crushed pixels heading line</p>\n <h2 style=\"letter-spacing: -0.07em\">Tracking crushed heading variant text</h2>\n </section>\n\n <!-- PASS column: optical tightening that display type legitimately wants -->\n <section class=\"col pass\">\n <h1 style=\"letter-spacing: -0.02em; font-size: 72px\">Optical tighten display</h1>\n <p style=\"letter-spacing: normal\">Plain paragraph copy with default tracking that reads comfortably.</p>\n </section>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: Georgia, serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n p, h2 { margin: 0 0 20px; }\n \nstyle=\"letter-spacing: -0.06em\"\nstyle=\"letter-spacing: -4px; font-size: 64px\"\nstyle=\"letter-spacing: -0.07em\"\nstyle=\"letter-spacing: -0.02em; font-size: 72px\"\nstyle=\"letter-spacing: normal\"","classText":"cols\ncol flag\ncol pass"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>first-viewport-column-overflow fixture</title>\n<style>\n * { margin: 0; box-sizing: border-box; }\n body { font-family: system-ui, sans-serif; color: #111; background: #fff; }\n p { margin: 0 0 14px; line-height: 1.6; }\n\n /* ── FLAG: two-column opening section, right column runs far past the fold\n while the left column fits inside one viewport ── */\n .flag { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 40px; }\n .flag .short { }\n .flag .short h1 { font-size: 40px; margin-bottom: 16px; }\n .flag .tall .filler { height: 1600px; background: #eee; border-radius: 8px; padding: 16px; }\n\n /* ── PASS: balanced two-column section, both fit ── */\n .pass-balanced { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; }\n .pass-balanced .col { }\n\n /* ── PASS: single full-page hero (no sibling column) ── */\n .pass-hero { padding: 40px; }\n .pass-hero .art { height: 1400px; background: #f3f3f3; }\n</style>\n</head>\n<body>\n <section class=\"flag\">\n <div class=\"short\">\n <h1>Upload your film and add a narrator</h1>\n <p>Paste a link or drop a file. We transcribe it, translate, and one narrator reads over the top.</p>\n <p>The original stays audible underneath, just quieter.</p>\n </div>\n <aside class=\"tall\">\n <p>What is a lektor? A single calm voice reads every line of a foreign film.</p>\n <div class=\"filler\">A tall editorial column with a long photo and a lot of copy.</div>\n </aside>\n </section>\n\n <section class=\"pass-balanced\">\n <div class=\"col\">\n <p>Left column with a normal amount of copy that fits comfortably within the opening viewport.</p>\n <p>Two short paragraphs, nothing that runs long.</p>\n </div>\n <div class=\"col\">\n <p>Right column, also short. Both sides sit inside the first screen.</p>\n <p>No column stretches the fold.</p>\n </div>\n </section>\n\n <section class=\"pass-hero\">\n <div class=\"art\"></div>\n </section>\n</body>\n</html>\n",{"styleText":"\n * { margin: 0; box-sizing: border-box; }\n body { font-family: system-ui, sans-serif; color: #111; background: #fff; }\n p { margin: 0 0 14px; line-height: 1.6; }\n\n /* ── FLAG: two-column opening section, right column runs far past the fold\n while the left column fits inside one viewport ── */\n .flag { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 40px; }\n .flag .short { }\n .flag .short h1 { font-size: 40px; margin-bottom: 16px; }\n .flag .tall .filler { height: 1600px; background: #eee; border-radius: 8px; padding: 16px; }\n\n /* ── PASS: balanced two-column section, both fit ── */\n .pass-balanced { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; }\n .pass-balanced .col { }\n\n /* ── PASS: single full-page hero (no sibling column) ── */\n .pass-hero { padding: 40px; }\n .pass-hero .art { height: 1400px; background: #f3f3f3; }\n","classText":"flag\nshort\ntall\nfiller\npass-balanced\ncol\ncol\npass-hero\nart"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Flush Against Border; Should Flag vs Should Pass</title>\n <style>\n /* Fixture for the flush-against-border rule.\n\n The rule is more general than its name suggests: it fires when a\n container has any visible boundary (border, outline, OR a\n non-transparent background) AND zero inline padding on the\n bounded side, AND text-bearing children land flush against that\n boundary.\n\n Distinct from cramped-padding (which fires when an element has\n its OWN direct text and the padding/font-size ratio is wrong).\n Here the container has NO direct text; only children; so\n cramped-padding gives it a pass. */\n\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.5; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1400px; margin: 0 auto; }\n .col h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; color: #0f172a; line-height: 1.2; }\n .col h3 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin: 28px 0 10px; color: #64748b; }\n .case { margin-bottom: 14px; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 8px; font-style: italic; max-width: 60ch; }\n\n /* ────────────────────────────────────────────────────────────\n SHOULD FLAG\n ──────────────────────────────────────────────────────────── */\n\n /* ── FLAG: the /live-mode-frameworks bug; border + zero side-padding ── */\n .flag-frameworks {\n padding: 28px 0 0;\n background: #fffbe6;\n border: 1px solid #d4a017;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n .flag-frameworks-label {\n font-family: ui-monospace, monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #8b6914;\n }\n .flag-frameworks-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .flag-frameworks-list li {\n font-family: ui-monospace, monospace;\n font-size: 13px;\n padding: 6px 12px;\n background: #fef3c7;\n border: 1px solid #d4a017;\n border-radius: 4px;\n color: #78350f;\n }\n\n /* ── FLAG: child text flush against the four borders of a card ── */\n .flag-card-borders {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .flag-card-borders h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .flag-card-borders p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── FLAG: non-transparent background, zero padding ── */\n .flag-bg-only {\n padding: 0;\n background: #fde68a;\n border-radius: 6px;\n border: 0;\n }\n .flag-bg-only h4 { margin: 0; font-size: 14px; color: #78350f; }\n .flag-bg-only p { margin: 4px 0 0; font-size: 13px; color: #78350f; }\n\n /* ── FLAG: outline (no border), zero padding ── */\n .flag-outline-only {\n padding: 0;\n background: transparent;\n border: 0;\n outline: 2px solid #94a3b8;\n outline-offset: 0;\n }\n .flag-outline-only h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .flag-outline-only p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── FLAG: border-left + zero left-padding, other sides fine ── */\n .flag-asym-leftflush {\n padding: 12px 16px 12px 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n }\n .flag-asym-leftflush h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .flag-asym-leftflush p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ────────────────────────────────────────────────────────────\n SHOULD PASS\n ──────────────────────────────────────────────────────────── */\n\n /* ── PASS: no boundary at all (no bg, no border, no outline) ── */\n .pass-no-boundary {\n padding: 0;\n background: transparent;\n border: 0;\n outline: 0;\n }\n .pass-no-boundary-label {\n font-family: ui-monospace, monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #475569;\n margin-bottom: 10px;\n }\n .pass-no-boundary-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .pass-no-boundary-list li {\n font-size: 13px;\n padding: 6px 12px;\n background: #f5f5f7;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n color: #0f172a;\n }\n\n /* ── PASS: top-only border, no left/right border, padding-top fine ── */\n .pass-top-rule {\n padding: 24px 0 0;\n background: transparent;\n border: 0;\n border-top: 1px solid #cbd5e1;\n }\n .pass-top-rule-label {\n font-family: ui-monospace, monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #475569;\n margin-bottom: 10px;\n }\n .pass-top-rule-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .pass-top-rule-list li {\n font-size: 13px;\n padding: 6px 12px;\n background: #f5f5f7;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n color: #0f172a;\n }\n\n /* ── PASS: bordered card with comfortable inset on all sides ── */\n .pass-bordered-padded {\n padding: 18px 20px;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .pass-bordered-padded h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .pass-bordered-padded p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: background card with comfortable inset ── */\n .pass-bg-padded {\n padding: 14px 18px;\n background: #fde68a;\n border-radius: 6px;\n border: 0;\n }\n .pass-bg-padded h4 { margin: 0; font-size: 14px; color: #78350f; }\n .pass-bg-padded p { margin: 4px 0 0; font-size: 13px; color: #78350f; }\n\n /* ── PASS: outline with comfortable inset ── */\n .pass-outline-padded {\n padding: 14px 18px;\n outline: 2px solid #94a3b8;\n outline-offset: 0;\n border: 0;\n background: transparent;\n }\n .pass-outline-padded h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .pass-outline-padded p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: image-only container, no text means no flush issue ── */\n .pass-image-only {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n width: 200px;\n overflow: hidden;\n }\n .pass-image-only .placeholder-img {\n width: 100%;\n height: 80px;\n background: linear-gradient(135deg, #cbd5e1, #94a3b8);\n }\n\n /* ── PASS: parent has zero padding, but child margins create the visible inset ── */\n .pass-margin-inset {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .pass-margin-inset h4 { margin: 16px 18px 4px; font-size: 14px; color: #0f172a; }\n .pass-margin-inset p { margin: 0 18px 16px; font-size: 13px; color: #475569; }\n\n /* ── PASS: an inner shell, not the parent, owns the inset spacing ── */\n .pass-inner-shell {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .pass-inner-shell .inner-shell {\n margin: 18px;\n }\n .pass-inner-shell h4 { margin: 0 0 4px; font-size: 14px; color: #0f172a; }\n .pass-inner-shell p { margin: 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: same background as parent, so the child draws no visible boundary ── */\n .pass-same-bg-parent {\n padding: 16px;\n background: #eef2f7;\n border-radius: 8px;\n }\n .pass-same-bg-child {\n padding: 0;\n background: #eef2f7;\n border: 0;\n border-radius: 8px;\n }\n .pass-same-bg-child h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .pass-same-bg-child p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: full-bleed marquee/surface, not a text card missing padding ── */\n .pass-marquee-shell {\n padding: 0;\n background: #172033;\n color: white;\n overflow: hidden;\n border: 0;\n }\n .pass-marquee-track {\n display: flex;\n gap: 12px;\n width: max-content;\n }\n .pass-marquee-card {\n width: 220px;\n padding: 14px;\n background: #23304a;\n border: 1px solid rgba(255, 255, 255, 0.16);\n }\n .pass-marquee-card p { margin: 0; font-size: 13px; }\n\n /* ── PASS: outer scene owns background; inner text surface owns padding ── */\n .pass-inner-text-surface {\n padding: 0;\n background: #0f172a;\n color: white;\n overflow: hidden;\n border: 0;\n }\n .pass-inner-text-surface-window {\n display: grid;\n gap: 6px;\n min-height: 92px;\n padding: 14px;\n background: #111827;\n border: 1px solid rgba(255, 255, 255, 0.16);\n }\n .pass-inner-text-surface-window p { margin: 0; font-size: 13px; }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>Border + zero side-padding</h3>\n <div class=\"case\">\n <span class=\"case-label\">section: full border, padding 28px 0 0; label and pills touch the left/right border lines.</span>\n <section class=\"flag-frameworks\">\n <span class=\"flag-frameworks-label\">Supported dev servers</span>\n <ul class=\"flag-frameworks-list\">\n <li>Vite</li>\n <li>Next.js</li>\n <li>SvelteKit</li>\n <li>Astro</li>\n </ul>\n </section>\n </div>\n\n <h3>All sides flush against a border</h3>\n <div class=\"case\">\n <span class=\"case-label\">card: 1px border on all sides, padding 0; heading and body touch every side.</span>\n <div class=\"flag-card-borders\">\n <h4>Card flush against the borders</h4>\n <p>Body copy sits flush against every visible border line.</p>\n </div>\n </div>\n\n <h3>Background color, zero padding</h3>\n <div class=\"case\">\n <span class=\"case-label\">no border, but a non-transparent bg; text flush against the bg's edge counts too.</span>\n <div class=\"flag-bg-only\">\n <h4>Title flush against the bg edge</h4>\n <p>Body copy with zero padding around a colored fill.</p>\n </div>\n </div>\n\n <h3>Outline (not border), zero padding</h3>\n <div class=\"case\">\n <span class=\"case-label\">outline draws outside the box; content at the box edge sits next to the outline.</span>\n <div class=\"flag-outline-only\">\n <h4>Title flush against the outline</h4>\n <p>The outline counts as a visible boundary too.</p>\n </div>\n </div>\n\n <h3>Left-side flush, other sides fine</h3>\n <div class=\"case\">\n <span class=\"case-label\">card: padding 12px 16px 12px 0; text touches the left border, other sides are inset.</span>\n <div class=\"flag-asym-leftflush\">\n <h4>Title flush only on the left</h4>\n <p>Padding-left zero with a full border.</p>\n </div>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>No boundary at all</h3>\n <div class=\"case\">\n <span class=\"case-label\">no bg, no border, no outline; zero padding is fine.</span>\n <section class=\"pass-no-boundary\">\n <span class=\"pass-no-boundary-label\">Supported dev servers</span>\n <ul class=\"pass-no-boundary-list\">\n <li>Vite</li>\n <li>Next.js</li>\n <li>SvelteKit</li>\n </ul>\n </section>\n </div>\n\n <h3>Top-only border, no side borders</h3>\n <div class=\"case\">\n <span class=\"case-label\">border-top only, padding-top 24px; no left/right border to be flush against.</span>\n <section class=\"pass-top-rule\">\n <span class=\"pass-top-rule-label\">Supported dev servers</span>\n <ul class=\"pass-top-rule-list\">\n <li>Vite</li>\n <li>Next.js</li>\n <li>SvelteKit</li>\n </ul>\n </section>\n </div>\n\n <h3>Bordered card with proper inset</h3>\n <div class=\"case\">\n <span class=\"case-label\">card: 1px border + padding 18px 20px; comfortable inset on every side.</span>\n <div class=\"pass-bordered-padded\">\n <h4>Card with proper inset</h4>\n <p>Body copy sits comfortably away from the borders.</p>\n </div>\n </div>\n\n <h3>Background card with proper inset</h3>\n <div class=\"case\">\n <span class=\"case-label\">non-transparent bg + padding 14px 18px; content has room to breathe.</span>\n <div class=\"pass-bg-padded\">\n <h4>Title with inset on bg</h4>\n <p>Body copy is comfortably inset from the bg edge.</p>\n </div>\n </div>\n\n <h3>Outline with proper inset</h3>\n <div class=\"case\">\n <span class=\"case-label\">outline + padding 14px 18px; content is comfortably inside.</span>\n <div class=\"pass-outline-padded\">\n <h4>Title with inset and outline</h4>\n <p>Outline boundary with proper inset works.</p>\n </div>\n </div>\n\n <h3>Image-only container, no text</h3>\n <div class=\"case\">\n <span class=\"case-label\">card: padding 0, border all sides; no text means nothing can be flush.</span>\n <div class=\"pass-image-only\">\n <div class=\"placeholder-img\"></div>\n </div>\n </div>\n\n <h3>Child margins provide the inset</h3>\n <div class=\"case\">\n <span class=\"case-label\">card: parent padding 0, but text children have margins that create visible inset.</span>\n <div class=\"pass-margin-inset\">\n <h4>Title inset by child margin</h4>\n <p>Body copy is not visually flush even though the parent has zero padding.</p>\n </div>\n </div>\n\n <h3>Inner shell provides the inset</h3>\n <div class=\"case\">\n <span class=\"case-label\">card: parent padding 0, but an inner shell is offset from every edge.</span>\n <div class=\"pass-inner-shell\">\n <div class=\"inner-shell\">\n <h4>Title inset by inner shell</h4>\n <p>The direct child creates the breathing room.</p>\n </div>\n </div>\n </div>\n\n <h3>Same background as parent</h3>\n <div class=\"case\">\n <span class=\"case-label\">child padding 0, but it has the same background as the parent, so no child boundary is visible.</span>\n <div class=\"pass-same-bg-parent\">\n <div class=\"pass-same-bg-child\">\n <h4>Same-surface visual shell</h4>\n <p>The text belongs to the parent surface, not to a distinct zero-padding card.</p>\n </div>\n </div>\n </div>\n\n <h3>Full-bleed marquee shell</h3>\n <div class=\"case\">\n <span class=\"case-label\">marquee shell clips animated cards intentionally; the cards, not the shell, own text padding.</span>\n <section class=\"pass-marquee-shell\">\n <div class=\"pass-marquee-track\">\n <article class=\"pass-marquee-card\"><p>Quote card with its own comfortable padding.</p></article>\n <article class=\"pass-marquee-card\"><p>Another moving card, also padded inside.</p></article>\n </div>\n </section>\n </div>\n\n <h3>Inner text surface</h3>\n <div class=\"case\">\n <span class=\"case-label\">outer shell has a scene background; the inner window owns the actual text padding.</span>\n <div class=\"pass-inner-text-surface\">\n <div class=\"pass-inner-text-surface-window\">\n <p>Build step running</p>\n <p>Detector output belongs to the mock window.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* Fixture for the flush-against-border rule.\n\n The rule is more general than its name suggests: it fires when a\n container has any visible boundary (border, outline, OR a\n non-transparent background) AND zero inline padding on the\n bounded side, AND text-bearing children land flush against that\n boundary.\n\n Distinct from cramped-padding (which fires when an element has\n its OWN direct text and the padding/font-size ratio is wrong).\n Here the container has NO direct text; only children; so\n cramped-padding gives it a pass. */\n\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.5; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1400px; margin: 0 auto; }\n .col h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; color: #0f172a; line-height: 1.2; }\n .col h3 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin: 28px 0 10px; color: #64748b; }\n .case { margin-bottom: 14px; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 8px; font-style: italic; max-width: 60ch; }\n\n /* ────────────────────────────────────────────────────────────\n SHOULD FLAG\n ──────────────────────────────────────────────────────────── */\n\n /* ── FLAG: the /live-mode-frameworks bug; border + zero side-padding ── */\n .flag-frameworks {\n padding: 28px 0 0;\n background: #fffbe6;\n border: 1px solid #d4a017;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n .flag-frameworks-label {\n font-family: ui-monospace, monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #8b6914;\n }\n .flag-frameworks-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .flag-frameworks-list li {\n font-family: ui-monospace, monospace;\n font-size: 13px;\n padding: 6px 12px;\n background: #fef3c7;\n border: 1px solid #d4a017;\n border-radius: 4px;\n color: #78350f;\n }\n\n /* ── FLAG: child text flush against the four borders of a card ── */\n .flag-card-borders {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .flag-card-borders h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .flag-card-borders p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── FLAG: non-transparent background, zero padding ── */\n .flag-bg-only {\n padding: 0;\n background: #fde68a;\n border-radius: 6px;\n border: 0;\n }\n .flag-bg-only h4 { margin: 0; font-size: 14px; color: #78350f; }\n .flag-bg-only p { margin: 4px 0 0; font-size: 13px; color: #78350f; }\n\n /* ── FLAG: outline (no border), zero padding ── */\n .flag-outline-only {\n padding: 0;\n background: transparent;\n border: 0;\n outline: 2px solid #94a3b8;\n outline-offset: 0;\n }\n .flag-outline-only h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .flag-outline-only p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── FLAG: border-left + zero left-padding, other sides fine ── */\n .flag-asym-leftflush {\n padding: 12px 16px 12px 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n }\n .flag-asym-leftflush h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .flag-asym-leftflush p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ────────────────────────────────────────────────────────────\n SHOULD PASS\n ──────────────────────────────────────────────────────────── */\n\n /* ── PASS: no boundary at all (no bg, no border, no outline) ── */\n .pass-no-boundary {\n padding: 0;\n background: transparent;\n border: 0;\n outline: 0;\n }\n .pass-no-boundary-label {\n font-family: ui-monospace, monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #475569;\n margin-bottom: 10px;\n }\n .pass-no-boundary-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .pass-no-boundary-list li {\n font-size: 13px;\n padding: 6px 12px;\n background: #f5f5f7;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n color: #0f172a;\n }\n\n /* ── PASS: top-only border, no left/right border, padding-top fine ── */\n .pass-top-rule {\n padding: 24px 0 0;\n background: transparent;\n border: 0;\n border-top: 1px solid #cbd5e1;\n }\n .pass-top-rule-label {\n font-family: ui-monospace, monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #475569;\n margin-bottom: 10px;\n }\n .pass-top-rule-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n .pass-top-rule-list li {\n font-size: 13px;\n padding: 6px 12px;\n background: #f5f5f7;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n color: #0f172a;\n }\n\n /* ── PASS: bordered card with comfortable inset on all sides ── */\n .pass-bordered-padded {\n padding: 18px 20px;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .pass-bordered-padded h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .pass-bordered-padded p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: background card with comfortable inset ── */\n .pass-bg-padded {\n padding: 14px 18px;\n background: #fde68a;\n border-radius: 6px;\n border: 0;\n }\n .pass-bg-padded h4 { margin: 0; font-size: 14px; color: #78350f; }\n .pass-bg-padded p { margin: 4px 0 0; font-size: 13px; color: #78350f; }\n\n /* ── PASS: outline with comfortable inset ── */\n .pass-outline-padded {\n padding: 14px 18px;\n outline: 2px solid #94a3b8;\n outline-offset: 0;\n border: 0;\n background: transparent;\n }\n .pass-outline-padded h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .pass-outline-padded p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: image-only container, no text means no flush issue ── */\n .pass-image-only {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n width: 200px;\n overflow: hidden;\n }\n .pass-image-only .placeholder-img {\n width: 100%;\n height: 80px;\n background: linear-gradient(135deg, #cbd5e1, #94a3b8);\n }\n\n /* ── PASS: parent has zero padding, but child margins create the visible inset ── */\n .pass-margin-inset {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .pass-margin-inset h4 { margin: 16px 18px 4px; font-size: 14px; color: #0f172a; }\n .pass-margin-inset p { margin: 0 18px 16px; font-size: 13px; color: #475569; }\n\n /* ── PASS: an inner shell, not the parent, owns the inset spacing ── */\n .pass-inner-shell {\n padding: 0;\n background: white;\n border: 1px solid #cbd5e1;\n border-radius: 8px;\n }\n .pass-inner-shell .inner-shell {\n margin: 18px;\n }\n .pass-inner-shell h4 { margin: 0 0 4px; font-size: 14px; color: #0f172a; }\n .pass-inner-shell p { margin: 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: same background as parent, so the child draws no visible boundary ── */\n .pass-same-bg-parent {\n padding: 16px;\n background: #eef2f7;\n border-radius: 8px;\n }\n .pass-same-bg-child {\n padding: 0;\n background: #eef2f7;\n border: 0;\n border-radius: 8px;\n }\n .pass-same-bg-child h4 { margin: 0; font-size: 14px; color: #0f172a; }\n .pass-same-bg-child p { margin: 4px 0 0; font-size: 13px; color: #475569; }\n\n /* ── PASS: full-bleed marquee/surface, not a text card missing padding ── */\n .pass-marquee-shell {\n padding: 0;\n background: #172033;\n color: white;\n overflow: hidden;\n border: 0;\n }\n .pass-marquee-track {\n display: flex;\n gap: 12px;\n width: max-content;\n }\n .pass-marquee-card {\n width: 220px;\n padding: 14px;\n background: #23304a;\n border: 1px solid rgba(255, 255, 255, 0.16);\n }\n .pass-marquee-card p { margin: 0; font-size: 13px; }\n\n /* ── PASS: outer scene owns background; inner text surface owns padding ── */\n .pass-inner-text-surface {\n padding: 0;\n background: #0f172a;\n color: white;\n overflow: hidden;\n border: 0;\n }\n .pass-inner-text-surface-window {\n display: grid;\n gap: 6px;\n min-height: 92px;\n padding: 14px;\n background: #111827;\n border: 1px solid rgba(255, 255, 255, 0.16);\n }\n .pass-inner-text-surface-window p { margin: 0; font-size: 13px; }\n ","classText":"grid\ncol\ncase\ncase-label\nflag-frameworks\nflag-frameworks-label\nflag-frameworks-list\ncase\ncase-label\nflag-card-borders\ncase\ncase-label\nflag-bg-only\ncase\ncase-label\nflag-outline-only\ncase\ncase-label\nflag-asym-leftflush\ncol\ncase\ncase-label\npass-no-boundary\npass-no-boundary-label\npass-no-boundary-list\ncase\ncase-label\npass-top-rule\npass-top-rule-label\npass-top-rule-list\ncase\ncase-label\npass-bordered-padded\ncase\ncase-label\npass-bg-padded\ncase\ncase-label\npass-outline-padded\ncase\ncase-label\npass-image-only\nplaceholder-img\ncase\ncase-label\npass-margin-inset\ncase\ncase-label\npass-inner-shell\ninner-shell\ncase\ncase-label\npass-same-bg-parent\npass-same-bg-child\ncase\ncase-label\npass-marquee-shell\npass-marquee-track\npass-marquee-card\npass-marquee-card\ncase\ncase-label\npass-inner-text-surface\npass-inner-text-surface-window"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Image hover-transform fixture</title>\n <style>\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n img { display: block; width: 160px; height: 120px; margin: 0 0 24px; background: #ddd; }\n .flag-css-hover img { transition: transform 0.3s; }\n .flag-css-hover img:hover { transform: scale(1.05); }\n .card:hover { transform: translateY(-4px); }\n </style>\n</head>\n<body>\n <div class=\"cols\">\n <!-- FLAG column: image hover transforms -->\n <section class=\"col flag\">\n <div class=\"flag-css-hover\">\n <img src=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%23c9b89a'/%3E%3C/svg%3E\" alt=\"CSS hover-zoom image\" />\n </div>\n <img class=\"flag-tw-hover hover:scale-105 transition-transform\" src=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%23a89c86'/%3E%3C/svg%3E\" alt=\"Tailwind hover-zoom image\" />\n </section>\n\n <!-- PASS column: static images, and hover transforms on non-image elements -->\n <section class=\"col pass\">\n <img class=\"pass-static\" src=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%23ddd6c8'/%3E%3C/svg%3E\" alt=\"Static image with no hover transform\" />\n <div class=\"card pass-non-img-hover\">A card that lifts on hover, which is fine because it is not an image.</div>\n </section>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n img { display: block; width: 160px; height: 120px; margin: 0 0 24px; background: #ddd; }\n .flag-css-hover img { transition: transform 0.3s; }\n .flag-css-hover img:hover { transform: scale(1.05); }\n .card:hover { transform: translateY(-4px); }\n ","classText":"cols\ncol flag\nflag-css-hover\nflag-tw-hover hover:scale-105 transition-transform\ncol pass\npass-static\ncard pass-non-img-hover"}],"result":[{"id":"image-hover-transform","snippet":"img:hover { transform } rule","selector":".flag-css-hover img:hover"},{"id":"image-hover-transform","snippet":"Tailwind hover transform on <img>"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Dark Glow Anti-Patterns — Should Flag vs Should Pass</title>\n <style>\n /* Two-column fixture: left = should flag, right = should pass.\n The dark-glow rule fires when a colored box-shadow appears on a\n child whose ancestor has a dark background. Each column wraps\n its dark-context cases in its own .dark-context section so the\n parent-bg lookup behaves predictably regardless of layout. */\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .dark-context { background: #111827; padding: 16px; border-radius: 12px; }\n .dark-context + .dark-context { margin-top: 12px; }\n /* Card variants: explicit dark vs light pairings, both WCAG AA compliant */\n .card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n .card h4 { font-weight: 600; font-size: 13px; margin: 0; }\n .card p { font-size: 12px; margin: 4px 0 0; }\n .card-dark { background: #1f2937; }\n .card-dark h4 { color: #f9fafb; }\n .card-dark p { color: #cbd5e1; }\n .card-light { background: white; }\n .card-light h4 { color: #0f172a; }\n .card-light p { color: #475569; }\n\n /* ── FLAG: dark background + colored glow ── */\n .glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }\n .glow-purple { box-shadow: 0 0 25px rgba(139, 92, 246, 0.35); }\n .glow-cyan { box-shadow: 0 0 15px rgba(6, 182, 212, 0.5); }\n .glow-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.3); }\n\n /* ── FLAG: modern color formats, var() refs, text-shadow ── */\n :root { --fixture-glow: oklch(0.78 0.14 155); }\n .glow-oklch { box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5); }\n .glow-hex { box-shadow: 0 0 16px #3b82f6; }\n .glow-hsl { box-shadow: 0 0 22px hsl(280, 80%, 60%); }\n .glow-var { box-shadow: 0 0 10px var(--fixture-glow); }\n .glow-text h4 { text-shadow: 0 0 12px #22d3ee; }\n /* Zero-offset chromatic halo is slop on light backgrounds too */\n .glow-light-oklch { box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45); }\n /* Unreadable surface: url() image ancestor. The zero-offset halo tell\n holds on ANY background, so an unknown surface must not suppress it.\n Both element loops must agree here (the browser adapter once returned\n [] for the whole element on an unresolved surface). */\n .photo-context { background-image: url('/fixtures/antipatterns/missing-photo.png'); padding: 16px; border-radius: 12px; }\n .glow-photo-halo { box-shadow: 0 0 26px rgba(217, 70, 239, 0.5); }\n /* Opaque gradient atop a url() layer: every stop is opaque, so the\n gradient provably covers the image — the surface IS the dark\n gradient, and the dark-background glow tell may score against it\n (browser hunt; the static loop has no gradient hunt). */\n .photo-opaque-grad { background: linear-gradient(#111827, #0b1220), url('/fixtures/antipatterns/missing-photo.png'); padding: 16px; border-radius: 12px; }\n .glow-photo-opaque { box-shadow: 0 6px 22px rgba(249, 115, 22, 0.5); }\n\n /* ── PASS: same dark/light backgrounds, but neutral or no glow ── */\n .light-colored-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15); }\n .dark-normal-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }\n .dark-focus-ring { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }\n .dark-subtle-shadow { box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2); }\n .dark-elevated-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }\n .dark-elevated-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); }\n .dark-elevated-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); }\n .dark-elevated-inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }\n .dark-elevated-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); }\n .elevated-sm-light { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }\n .elevated-md-light { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }\n .elevated-warm-light { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); }\n /* Medium-gray card: lighter than dark mode, used to demonstrate \"not dark enough\" for glow detection. White text for AA contrast. */\n .card-medium { background: #6b7280; }\n .card-medium h4 { color: #ffffff; }\n .card-medium p { color: #ffffff; }\n .medium-gray-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); }\n /* Offset chromatic drop shadow on a light background: a real drop\n shadow, not a halo — must NOT flag under the zero-offset rule.\n (Element path; the page-level text scan caps at one finding.) */\n .light-offset-colored { box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25); }\n /* Achromatic zero-offset shadow: soft ambient elevation, stays legal */\n .light-soft-neutral { box-shadow: 0 0 24px rgba(0, 0, 0, 0.15); }\n /* Offset chromatic shadow under the same unreadable url() surface:\n the dark-background glow tell needs a surface we can read — abstain. */\n .photo-offset-colored { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35); }\n /* Translucent gradient atop a url() layer: the image shows through the\n 20% wash, so the real surface is a blend with unknowable pixels (a\n white photo composites to ~#cccccc, not black). Averaging the wash\n stops as if they were the surface scored this \"dark\" — abstain. */\n .photo-translucent-grad { background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/fixtures/antipatterns/missing-photo.png'); padding: 16px; border-radius: 12px; }\n .photo-translucent-offset { box-shadow: 0 6px 22px rgba(244, 63, 94, 0.45); }\n /* Offset neutral text-shadow on dark card: legibility aid, not a glow */\n .dark-text-offset h4 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag (dark page + colored glows)\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>CSS colored glows on dark background</h3>\n <div class=\"dark-context\">\n <div class=\"card card-dark glow-blue\">\n <h4>Blue glow</h4>\n <p>box-shadow: 0 0 20px rgba(59, 130, 246, 0.4)</p>\n </div>\n <div class=\"card card-dark glow-purple\">\n <h4>Purple glow</h4>\n <p>box-shadow: 0 0 25px rgba(139, 92, 246, 0.35)</p>\n </div>\n <div class=\"card card-dark glow-cyan\">\n <h4>Cyan glow</h4>\n <p>box-shadow: 0 0 15px rgba(6, 182, 212, 0.5)</p>\n </div>\n <div class=\"card card-dark glow-multi\">\n <h4>Multi-shadow with colored glow</h4>\n <p>Normal shadow + purple glow combined.</p>\n </div>\n </div>\n\n <h3>Inline-style glow (regex path)</h3>\n <div class=\"dark-context\">\n <div class=\"card card-dark\" style=\"box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);\">\n <h4>Inline pink glow</h4>\n <p>Inline style for regex detection path.</p>\n </div>\n </div>\n\n <h3>Modern color formats, var() refs, text-shadow</h3>\n <div class=\"dark-context\">\n <div class=\"card card-dark glow-oklch\">\n <h4>OKLCH glow</h4>\n <p>box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5)</p>\n </div>\n <div class=\"card card-dark glow-hex\">\n <h4>Hex glow</h4>\n <p>box-shadow: 0 0 16px #3b82f6</p>\n </div>\n <div class=\"card card-dark glow-hsl\">\n <h4>HSL glow</h4>\n <p>box-shadow: 0 0 22px hsl(280, 80%, 60%)</p>\n </div>\n <div class=\"card card-dark glow-var\">\n <h4>Glow via var()</h4>\n <p>box-shadow: 0 0 10px var(--fixture-glow)</p>\n </div>\n <div class=\"card card-dark glow-text\">\n <h4>Glowing text</h4>\n <p>text-shadow: 0 0 12px #22d3ee on the heading.</p>\n </div>\n </div>\n\n <h3>Zero-offset halo on LIGHT background</h3>\n <div class=\"card card-light glow-light-oklch\">\n <h4>Chromatic halo on light page</h4>\n <p>box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45)</p>\n </div>\n\n <h3>Zero-offset halo on unreadable (image) surface</h3>\n <div class=\"photo-context\">\n <div class=\"card card-light glow-photo-halo\">\n <h4>Halo over photo background</h4>\n <p>box-shadow: 0 0 26px rgba(217, 70, 239, 0.5)</p>\n </div>\n </div>\n\n <h3>Colored glow under an opaque gradient over an image (browser)</h3>\n <div class=\"photo-opaque-grad\">\n <div class=\"card card-dark glow-photo-opaque\">\n <h4>Opaque dark gradient covers the photo</h4>\n <p>box-shadow: 0 6px 22px rgba(249, 115, 22, 0.5)</p>\n </div>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>Light page + colored shadow</h3>\n <div class=\"card card-light light-colored-shadow\">\n <h4>Colored shadow on light background</h4>\n <p>Not dark mode, colored shadow is fine.</p>\n </div>\n\n <h3>Dark cards with neutral shadows</h3>\n <div class=\"dark-context\">\n <div class=\"card card-dark dark-normal-shadow\">\n <h4>Normal gray shadow on dark card</h4>\n <p>Gray/black shadow is not a glow.</p>\n </div>\n <div class=\"card card-dark dark-focus-ring\">\n <h4>Focus ring (spread, no blur)</h4>\n <p>Functional ring, not decorative glow.</p>\n </div>\n <div class=\"card card-dark dark-subtle-shadow\">\n <h4>Tiny blur (<5px)</h4>\n <p>Too subtle to be \"glowing\".</p>\n </div>\n <div class=\"card card-dark dark-elevated-sm\">\n <h4>Small dark elevation</h4>\n <p>Subtle shadow on dark card.</p>\n </div>\n <div class=\"card card-dark dark-elevated-md\">\n <h4>Medium dark elevation</h4>\n <p>Standard dark card shadow.</p>\n </div>\n <div class=\"card card-dark dark-elevated-lg\">\n <h4>Large dark elevation</h4>\n <p>Prominent shadow on dark card.</p>\n </div>\n <div class=\"card card-dark dark-elevated-inset\">\n <h4>Inset shadow</h4>\n <p>Inner shadow, not a glow.</p>\n </div>\n <div class=\"card card-dark dark-elevated-multi\">\n <h4>Multi-shadow dark card</h4>\n <p>Layered gray shadows, no color glow.</p>\n </div>\n </div>\n\n <h3>Medium-gray background (not dark enough)</h3>\n <div class=\"card card-medium medium-gray-shadow\">\n <h4>Not dark enough background</h4>\n <p>Medium gray doesn't qualify as \"dark mode\".</p>\n </div>\n\n <h3>Colored drop shadow / neutral halo on light background</h3>\n <div class=\"card card-light light-offset-colored\">\n <h4>Offset colored drop shadow</h4>\n <p>Real drop shadow with a color tint — not a halo.</p>\n </div>\n <div class=\"card card-light light-soft-neutral\">\n <h4>Soft neutral halo</h4>\n <p>Achromatic zero-offset shadow is ambient elevation.</p>\n </div>\n\n <h3>Offset chromatic shadow on unreadable (image) surface</h3>\n <div class=\"photo-context\">\n <div class=\"card card-light photo-offset-colored\">\n <h4>Offset colored shadow over photo background</h4>\n <p>Surface unknown, offset shadow — abstain, not flag.</p>\n </div>\n </div>\n\n <h3>Offset chromatic shadow under a translucent gradient over an image</h3>\n <div class=\"photo-translucent-grad\">\n <div class=\"card card-light photo-translucent-offset\">\n <h4>The wash blends with unknowable image pixels</h4>\n <p>Surface unknown — abstain, never score the wash stops as dark.</p>\n </div>\n </div>\n\n <h3>Neutral text-shadow on dark card</h3>\n <div class=\"dark-context\">\n <div class=\"card card-dark dark-text-offset\">\n <h4>Offset neutral text-shadow</h4>\n <p>Legibility aid, not a glow.</p>\n </div>\n </div>\n\n <h3>Light elevated cards</h3>\n <div class=\"card card-light elevated-sm-light\">\n <h4>Small elevation (Tailwind shadow-sm)</h4>\n <p>Standard subtle card shadow.</p>\n </div>\n <div class=\"card card-light elevated-md-light\">\n <h4>Medium elevation (Tailwind shadow-md)</h4>\n <p>Standard card shadow.</p>\n </div>\n <div class=\"card card-light elevated-warm-light\">\n <h4>Warm deep shadow</h4>\n <p>Large spread neutral shadow.</p>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* Two-column fixture: left = should flag, right = should pass.\n The dark-glow rule fires when a colored box-shadow appears on a\n child whose ancestor has a dark background. Each column wraps\n its dark-context cases in its own .dark-context section so the\n parent-bg lookup behaves predictably regardless of layout. */\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .dark-context { background: #111827; padding: 16px; border-radius: 12px; }\n .dark-context + .dark-context { margin-top: 12px; }\n /* Card variants: explicit dark vs light pairings, both WCAG AA compliant */\n .card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n .card h4 { font-weight: 600; font-size: 13px; margin: 0; }\n .card p { font-size: 12px; margin: 4px 0 0; }\n .card-dark { background: #1f2937; }\n .card-dark h4 { color: #f9fafb; }\n .card-dark p { color: #cbd5e1; }\n .card-light { background: white; }\n .card-light h4 { color: #0f172a; }\n .card-light p { color: #475569; }\n\n /* ── FLAG: dark background + colored glow ── */\n .glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }\n .glow-purple { box-shadow: 0 0 25px rgba(139, 92, 246, 0.35); }\n .glow-cyan { box-shadow: 0 0 15px rgba(6, 182, 212, 0.5); }\n .glow-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.3); }\n\n /* ── FLAG: modern color formats, var() refs, text-shadow ── */\n :root { --fixture-glow: oklch(0.78 0.14 155); }\n .glow-oklch { box-shadow: 0 0 18px oklch(0.72 0.15 195 / 0.5); }\n .glow-hex { box-shadow: 0 0 16px #3b82f6; }\n .glow-hsl { box-shadow: 0 0 22px hsl(280, 80%, 60%); }\n .glow-var { box-shadow: 0 0 10px var(--fixture-glow); }\n .glow-text h4 { text-shadow: 0 0 12px #22d3ee; }\n /* Zero-offset chromatic halo is slop on light backgrounds too */\n .glow-light-oklch { box-shadow: 0 0 20px oklch(0.65 0.2 300 / 0.45); }\n /* Unreadable surface: url() image ancestor. The zero-offset halo tell\n holds on ANY background, so an unknown surface must not suppress it.\n Both element loops must agree here (the browser adapter once returned\n [] for the whole element on an unresolved surface). */\n .photo-context { background-image: url('/fixtures/antipatterns/missing-photo.png'); padding: 16px; border-radius: 12px; }\n .glow-photo-halo { box-shadow: 0 0 26px rgba(217, 70, 239, 0.5); }\n /* Opaque gradient atop a url() layer: every stop is opaque, so the\n gradient provably covers the image — the surface IS the dark\n gradient, and the dark-background glow tell may score against it\n (browser hunt; the static loop has no gradient hunt). */\n .photo-opaque-grad { background: linear-gradient(#111827, #0b1220), url('/fixtures/antipatterns/missing-photo.png'); padding: 16px; border-radius: 12px; }\n .glow-photo-opaque { box-shadow: 0 6px 22px rgba(249, 115, 22, 0.5); }\n\n /* ── PASS: same dark/light backgrounds, but neutral or no glow ── */\n .light-colored-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15); }\n .dark-normal-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }\n .dark-focus-ring { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }\n .dark-subtle-shadow { box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2); }\n .dark-elevated-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }\n .dark-elevated-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); }\n .dark-elevated-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); }\n .dark-elevated-inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }\n .dark-elevated-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); }\n .elevated-sm-light { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }\n .elevated-md-light { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }\n .elevated-warm-light { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); }\n /* Medium-gray card: lighter than dark mode, used to demonstrate \"not dark enough\" for glow detection. White text for AA contrast. */\n .card-medium { background: #6b7280; }\n .card-medium h4 { color: #ffffff; }\n .card-medium p { color: #ffffff; }\n .medium-gray-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); }\n /* Offset chromatic drop shadow on a light background: a real drop\n shadow, not a halo — must NOT flag under the zero-offset rule.\n (Element path; the page-level text scan caps at one finding.) */\n .light-offset-colored { box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25); }\n /* Achromatic zero-offset shadow: soft ambient elevation, stays legal */\n .light-soft-neutral { box-shadow: 0 0 24px rgba(0, 0, 0, 0.15); }\n /* Offset chromatic shadow under the same unreadable url() surface:\n the dark-background glow tell needs a surface we can read — abstain. */\n .photo-offset-colored { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35); }\n /* Translucent gradient atop a url() layer: the image shows through the\n 20% wash, so the real surface is a blend with unknowable pixels (a\n white photo composites to ~#cccccc, not black). Averaging the wash\n stops as if they were the surface scored this \"dark\" — abstain. */\n .photo-translucent-grad { background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/fixtures/antipatterns/missing-photo.png'); padding: 16px; border-radius: 12px; }\n .photo-translucent-offset { box-shadow: 0 6px 22px rgba(244, 63, 94, 0.45); }\n /* Offset neutral text-shadow on dark card: legibility aid, not a glow */\n .dark-text-offset h4 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }\n \nstyle=\"box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);\"","classText":"grid\ncol\ndark-context\ncard card-dark glow-blue\ncard card-dark glow-purple\ncard card-dark glow-cyan\ncard card-dark glow-multi\ndark-context\ncard card-dark\ndark-context\ncard card-dark glow-oklch\ncard card-dark glow-hex\ncard card-dark glow-hsl\ncard card-dark glow-var\ncard card-dark glow-text\ncard card-light glow-light-oklch\nphoto-context\ncard card-light glow-photo-halo\nphoto-opaque-grad\ncard card-dark glow-photo-opaque\ncol\ncard card-light light-colored-shadow\ndark-context\ncard card-dark dark-normal-shadow\ncard card-dark dark-focus-ring\ncard card-dark dark-subtle-shadow\ncard card-dark dark-elevated-sm\ncard card-dark dark-elevated-md\ncard card-dark dark-elevated-lg\ncard card-dark dark-elevated-inset\ncard card-dark dark-elevated-multi\ncard card-medium medium-gray-shadow\ncard card-light light-offset-colored\ncard card-light light-soft-neutral\nphoto-context\ncard card-light photo-offset-colored\nphoto-translucent-grad\ncard card-light photo-translucent-offset\ndark-context\ncard card-dark dark-text-offset\ncard card-light elevated-sm-light\ncard card-light elevated-md-light\ncard card-light elevated-warm-light"}],"result":[{"id":"buried-raster","snippet":"raster under a near-opaque gradient wash: linear-gradient(#111827, #0b1220), url('/fixtures/antipatterns/missing-photo.png')","selector":".photo-opaque-grad"},{"id":"dark-glow","snippet":"Zero-offset box-shadow glow (#3b82f6)","selector":".glow-blue"}]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Recurring generated-UI tell fixture</title>\n <style>\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n .card { padding: 24px; margin: 0 0 24px; border-radius: 12px; }\n .stripes { height: 80px; margin: 0 0 24px; border-radius: 12px; }\n .grid { height: 80px; margin: 0 0 24px; border-radius: 12px; }\n </style>\n</head>\n<body>\n <div class=\"cols\">\n <!-- FLAG column: recurring generated-UI idioms -->\n <section class=\"col flag\">\n <div class=\"card flag-thin-border-wide-shadow\" style=\"border: 1px solid #e5e7eb; box-shadow: 0 0 24px rgba(0,0,0,0.18)\">\n Thin hairline border paired with a wide diffuse shadow.\n </div>\n <div class=\"stripes flag-repeating-stripes\" style=\"background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px)\"></div>\n <div class=\"grid flag-codex-grid\" style=\"background: linear-gradient(90deg, oklch(96% 0.012 82 / 0.055) 1px, transparent 1px), linear-gradient(180deg, oklch(96% 0.012 82 / 0.05) 1px, transparent 1px); background-size: 78px 78px, 78px 78px;\"></div>\n <p class=\"flag-theater\">We retired the growth theater and shipped something that actually works.</p>\n </section>\n\n <!-- PASS column: the legitimate, non-tell versions -->\n <section class=\"col pass\">\n <div class=\"card pass-tight-shadow\" style=\"border: 1px solid #e5e7eb; box-shadow: 0 1px 4px rgba(0,0,0,0.08)\">\n Hairline border with a tight, purposeful shadow.\n </div>\n <div class=\"card pass-soft-border-wide-shadow\" style=\"border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 48px -16px rgba(15, 23, 42, 0.18)\">\n A quiet low-contrast hairline with a broad but restrained ambient shadow.\n </div>\n <div class=\"card pass-oklch-soft-shadow\" style=\"border: 1px solid oklch(78% 0 0 / 0.16); box-shadow: 0 16px 36px -12px oklch(2% 0.004 95 / 0.18)\">\n OKLCH shadow hue values should not be mistaken for shadow blur.\n </div>\n <div class=\"stripes pass-plain-gradient\" style=\"background: linear-gradient(180deg, #f3f4f6, #ffffff)\"></div>\n <div class=\"grid pass-single-axis-rule\" style=\"background: linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 100% 32px\"></div>\n <div class=\"grid pass-two-color-blend\" style=\"background: linear-gradient(90deg, #f3f4f6, #e5e7eb), linear-gradient(180deg, #eef2ff, #ffffff)\"></div>\n <div class=\"grid pass-crosshair-no-tiling\" style=\"background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px)\"></div>\n <div class=\"grid pass-bg-plus-mask-hairline\" style=\"background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 1px, transparent 1px)\"></div>\n <p class=\"pass-no-theater\">We measured real outcomes for the people who use this every day.</p>\n </section>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n .card { padding: 24px; margin: 0 0 24px; border-radius: 12px; }\n .stripes { height: 80px; margin: 0 0 24px; border-radius: 12px; }\n .grid { height: 80px; margin: 0 0 24px; border-radius: 12px; }\n \nstyle=\"border: 1px solid #e5e7eb; box-shadow: 0 0 24px rgba(0,0,0,0.18)\"\nstyle=\"background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px)\"\nstyle=\"background: linear-gradient(90deg, oklch(96% 0.012 82 / 0.055) 1px, transparent 1px), linear-gradient(180deg, oklch(96% 0.012 82 / 0.05) 1px, transparent 1px); background-size: 78px 78px, 78px 78px;\"\nstyle=\"border: 1px solid #e5e7eb; box-shadow: 0 1px 4px rgba(0,0,0,0.08)\"\nstyle=\"border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 48px -16px rgba(15, 23, 42, 0.18)\"\nstyle=\"border: 1px solid oklch(78% 0 0 / 0.16); box-shadow: 0 16px 36px -12px oklch(2% 0.004 95 / 0.18)\"\nstyle=\"background: linear-gradient(180deg, #f3f4f6, #ffffff)\"\nstyle=\"background: linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 100% 32px\"\nstyle=\"background: linear-gradient(90deg, #f3f4f6, #e5e7eb), linear-gradient(180deg, #eef2ff, #ffffff)\"\nstyle=\"background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px)\"\nstyle=\"background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 1px, transparent 1px)\"","classText":"cols\ncol flag\ncard flag-thin-border-wide-shadow\nstripes flag-repeating-stripes\ngrid flag-codex-grid\nflag-theater\ncol pass\ncard pass-tight-shadow\ncard pass-soft-border-wide-shadow\ncard pass-oklch-soft-shadow\nstripes pass-plain-gradient\ngrid pass-single-axis-rule\ngrid pass-two-color-blend\ngrid pass-crosshair-no-tiling\ngrid pass-bg-plus-mask-hairline\npass-no-theater"}],"result":[{"id":"repeating-stripes-gradient","snippet":"repeating-gradient decorative stripes"},{"id":"codex-grid-background","snippet":"two-axis grid-line gradient background"},{"id":"theater-slop-phrase","snippet":"\"growth theater\""}]}
|
||
{"args":["<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Heading rhythm fixture</title>\n<style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: Georgia, serif; font-size: 16px; line-height: 1.5; width: 720px; }\n h2 { font-size: 28px; line-height: 1.2; }\n h3 { font-size: 20px; line-height: 1.2; }\n p { max-width: 60ch; }\n\n /* FLAG: zero space above the heading, clear space below it */\n .flag-crowded { margin: 0 0 40px; }\n .flag-crowded + p { margin: 0 0 24px; }\n\n /* PASS: generous space above, tight below */\n .pass-generous { margin: 64px 0 16px; }\n\n /* PASS: near-equal spacing is ambiguous, not inverted */\n .pass-near-equal { margin: 20px 0 24px; }\n\n /* PASS: eyebrow label bound to the heading; real space sits above the cluster */\n .pass-eyebrow-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 72px 0 8px; }\n .pass-eyebrow-heading { margin: 0 0 24px; }\n\n /* PASS: small card, its boundary provides the separation */\n .pass-card { box-shadow: 0 1px 4px rgba(0,0,0,0.2); background: #f4f4f4; padding: 16px; margin: 48px 0; width: 320px; }\n .pass-card h3 { margin: 0 0 20px; }\n\n /* PASS: heading first inside a banded section; the band edge separates */\n .pass-band { background: #ececec; padding: 8px 0 32px; margin-top: 8px; }\n .pass-band h2 { margin: 0 0 24px; }\n</style>\n</head>\n<body>\n\n <h2 class=\"pass-first\">Pass First Heading</h2>\n <p>Opening paragraph after the first heading on the page. The first heading has\n nothing above it, so it is exempt from the rhythm comparison entirely.</p>\n\n <p style=\"margin-top: 24px;\">A closing paragraph of the previous block of content,\n sitting directly above the crowded heading with no gap at all between them.</p>\n <h2 class=\"flag-crowded\">Flag Crowded One</h2>\n <p>The content this heading introduces sits forty pixels away while the previous\n block touches the heading, so the heading reads as a caption for the text above.</p>\n\n <p>Another closing paragraph of a previous content block, again flush against\n the heading that follows it in the document flow.</p>\n <h2 class=\"flag-crowded\">Flag Crowded Two</h2>\n <p>Second crowded case. Two or more headings must violate the principle before\n the rule fires, because a single occurrence is treated as noise.</p>\n\n <p>A third closing paragraph that the next heading will visually attach to,\n which is exactly the inversion this rule measures.</p>\n <h3 class=\"flag-crowded\">Flag Crowded Three</h3>\n <p>Third crowded case, this time an h3, to confirm the rule reads h2 through h4.</p>\n\n <h2 class=\"pass-generous\">Pass Generous Above</h2>\n <p>Sixty-four pixels above and sixteen below. The heading clearly binds to this\n paragraph, which is the healthy shape.</p>\n\n <h2 class=\"pass-near-equal\">Pass Near Equal</h2>\n <p>Twenty pixels above and twenty-four below. Ambiguous rather than inverted,\n so the rule leaves it alone.</p>\n\n <p class=\"pass-eyebrow-label\">Chapter Four</p>\n <h2 class=\"pass-eyebrow-heading\">Pass Eyebrow Cluster</h2>\n <p>The tiny label above belongs to the heading cluster. Space is measured from\n the top of the cluster, where seventy-two pixels separate it from this text.</p>\n\n <div class=\"pass-card\">\n <h3>Pass Card Heading</h3>\n <p>A heading inside a small card. The card boundary provides the separation,\n so the rule exempts headings inside panels shorter than two hundred pixels.</p>\n </div>\n\n <div class=\"pass-band\">\n <h2>Pass Band Heading</h2>\n <p>This heading is the first content inside a section that draws its own\n background, so the band edge is the separator above it.</p>\n </div>\n\n</body>\n</html>\n",{"styleText":"\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: Georgia, serif; font-size: 16px; line-height: 1.5; width: 720px; }\n h2 { font-size: 28px; line-height: 1.2; }\n h3 { font-size: 20px; line-height: 1.2; }\n p { max-width: 60ch; }\n\n /* FLAG: zero space above the heading, clear space below it */\n .flag-crowded { margin: 0 0 40px; }\n .flag-crowded + p { margin: 0 0 24px; }\n\n /* PASS: generous space above, tight below */\n .pass-generous { margin: 64px 0 16px; }\n\n /* PASS: near-equal spacing is ambiguous, not inverted */\n .pass-near-equal { margin: 20px 0 24px; }\n\n /* PASS: eyebrow label bound to the heading; real space sits above the cluster */\n .pass-eyebrow-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 72px 0 8px; }\n .pass-eyebrow-heading { margin: 0 0 24px; }\n\n /* PASS: small card, its boundary provides the separation */\n .pass-card { box-shadow: 0 1px 4px rgba(0,0,0,0.2); background: #f4f4f4; padding: 16px; margin: 48px 0; width: 320px; }\n .pass-card h3 { margin: 0 0 20px; }\n\n /* PASS: heading first inside a banded section; the band edge separates */\n .pass-band { background: #ececec; padding: 8px 0 32px; margin-top: 8px; }\n .pass-band h2 { margin: 0 0 24px; }\n\nstyle=\"margin-top: 24px;\"","classText":"pass-first\nflag-crowded\nflag-crowded\nflag-crowded\npass-generous\npass-near-equal\npass-eyebrow-label\npass-eyebrow-heading\npass-card\npass-band"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Hero-Eyebrow-Chip — Should Flag vs Should Pass</title>\n <style>\n /* ─── Layout convention: two-column fixture ─────────────────────────\n Left column = patterns the rule SHOULD flag.\n Right column = legitimate patterns the rule should NOT flag.\n Each test case is annotated with a unique <h1> text so the test\n can match snippets back to expectations.\n ──────────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2.col-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { margin-bottom: 32px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }\n .case p { font-size: 14px; margin: 12px 0 0; color: #64748b; }\n .case h1 { margin: 0; font-family: 'Inter', sans-serif; line-height: 1.05; }\n\n /* Hero size used by most cases */\n .hero { font-size: 88px; font-weight: 600; }\n\n /* ── FLAG cases ── */\n\n .eyebrow-classic {\n text-transform: uppercase;\n letter-spacing: 0.15em;\n font-size: 12px;\n color: #64748b;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .eyebrow-span {\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: 0.16em;\n font-size: 11px;\n color: #475569;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .eyebrow-pill {\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: 0.14em;\n font-size: 12px;\n background: #f1f5f9;\n color: #334155;\n border-radius: 999px;\n padding: 4px 12px;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .eyebrow-already-uppercase {\n letter-spacing: 0.18em;\n font-size: 11px;\n color: #b45309;\n font-weight: 700;\n margin: 0 0 16px;\n }\n\n /* ── PASS cases ── */\n\n .pass-eyebrow-no-tracking {\n text-transform: uppercase;\n letter-spacing: normal;\n font-size: 12px;\n color: #64748b;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .pass-body-heading {\n font-size: 24px;\n font-weight: 600;\n font-family: 'Inter', sans-serif;\n margin: 0;\n }\n\n .pass-card-caption {\n text-transform: uppercase;\n letter-spacing: 0.18em;\n font-size: 11px;\n color: #94a3b8;\n font-weight: 600;\n margin: 0 0 8px;\n }\n\n .pass-bare-hero {\n font-size: 64px;\n }\n\n .pass-h2-above-h1 {\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n font-weight: 700;\n color: #475569;\n margin: 0 0 16px;\n font-family: 'Inter', sans-serif;\n }\n\n .pass-long-uppercase {\n text-transform: uppercase;\n letter-spacing: 0.14em;\n font-size: 12px;\n color: #475569;\n font-weight: 600;\n margin: 0 0 16px;\n }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2 class=\"col-label\">Should flag</h2>\n\n <div class=\"case\">\n <div class=\"eyebrow-classic\">AI-NATIVE WORKFLOWS</div>\n <h1 class=\"hero\">Eyebrow Above Hero</h1>\n <p>Classic uppercase tracked div eyebrow above an 88px hero.</p>\n </div>\n\n <div class=\"case\">\n <span class=\"eyebrow-span\">NEW IN 2026</span>\n <h1 class=\"hero\">Span Eyebrow Above Hero</h1>\n <p>Span variant with the same uppercase + tracking + small-size shape.</p>\n </div>\n\n <div class=\"case\">\n <span class=\"eyebrow-pill\">FEATURED</span>\n <h1 class=\"hero\">Pill Chip Above Hero</h1>\n <p>Pill-shaped chip with background, border-radius, padding.</p>\n </div>\n\n <div class=\"case\">\n <span class=\"eyebrow-already-uppercase\">NEW</span>\n <h1 class=\"hero\">Already Uppercase Text</h1>\n <p>Text typed uppercase, no text-transform, but matching tracking and size.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"pass-long-uppercase\">A VERY LONG UPPERCASE TABLE OF CONTENTS HEADER</div>\n <h1 class=\"hero\">Long Uppercase Sentence Above Hero</h1>\n <p>46-char uppercase tracked label — under the 60-char eyebrow ceiling, so it still reads as an oversized eyebrow.</p>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2 class=\"col-label\">Should pass</h2>\n\n <div class=\"case\">\n <div class=\"pass-eyebrow-no-tracking\">UPPERCASE LABEL</div>\n <h1 class=\"hero\">Eyebrow With Normal Tracking</h1>\n <p>Uppercase label above a hero but with letter-spacing: normal.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"pass-card-caption\">CARD CAPTION</div>\n <p>Plain body text below the caption.</p>\n <h1 class=\"hero\" style=\"margin-top:32px\">Uppercase Caption Far From Hero</h1>\n <p>Hero exists, but its preceding sibling is a paragraph, not the eyebrow.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"pass-bare-hero\">Hero With No Eyebrow</h1>\n <p>Bare h1 at 64px, nothing above it.</p>\n </div>\n\n <div class=\"case\">\n <h2 class=\"pass-h2-above-h1\">SECTION HEADING</h2>\n <h1 class=\"hero\">Heading Above Heading</h1>\n <p>An h2 styled like an eyebrow above an h1 — heading-tag exclusion must skip this.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"eyebrow-classic\">SECTION KICKER</div>\n <h1 class=\"pass-body-heading\">Body-Sized Heading Below Eyebrow</h1>\n <p>A compact product/page heading is not an oversized marketing hero.</p>\n </div>\n\n <div class=\"case\" role=\"tabpanel\" aria-label=\"Saved station\">\n <div class=\"eyebrow-classic\">NEXT FROM</div>\n <h1 class=\"hero\">Application Panel Heading</h1>\n <p>Context labels inside tab panels describe application state rather than decorating a marketing hero.</p>\n </div>\n\n </div>\n\n </div>\n</body>\n</html>\n",{"styleText":"\n /* ─── Layout convention: two-column fixture ─────────────────────────\n Left column = patterns the rule SHOULD flag.\n Right column = legitimate patterns the rule should NOT flag.\n Each test case is annotated with a unique <h1> text so the test\n can match snippets back to expectations.\n ──────────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2.col-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { margin-bottom: 32px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }\n .case p { font-size: 14px; margin: 12px 0 0; color: #64748b; }\n .case h1 { margin: 0; font-family: 'Inter', sans-serif; line-height: 1.05; }\n\n /* Hero size used by most cases */\n .hero { font-size: 88px; font-weight: 600; }\n\n /* ── FLAG cases ── */\n\n .eyebrow-classic {\n text-transform: uppercase;\n letter-spacing: 0.15em;\n font-size: 12px;\n color: #64748b;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .eyebrow-span {\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: 0.16em;\n font-size: 11px;\n color: #475569;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .eyebrow-pill {\n display: inline-block;\n text-transform: uppercase;\n letter-spacing: 0.14em;\n font-size: 12px;\n background: #f1f5f9;\n color: #334155;\n border-radius: 999px;\n padding: 4px 12px;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .eyebrow-already-uppercase {\n letter-spacing: 0.18em;\n font-size: 11px;\n color: #b45309;\n font-weight: 700;\n margin: 0 0 16px;\n }\n\n /* ── PASS cases ── */\n\n .pass-eyebrow-no-tracking {\n text-transform: uppercase;\n letter-spacing: normal;\n font-size: 12px;\n color: #64748b;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n .pass-body-heading {\n font-size: 24px;\n font-weight: 600;\n font-family: 'Inter', sans-serif;\n margin: 0;\n }\n\n .pass-card-caption {\n text-transform: uppercase;\n letter-spacing: 0.18em;\n font-size: 11px;\n color: #94a3b8;\n font-weight: 600;\n margin: 0 0 8px;\n }\n\n .pass-bare-hero {\n font-size: 64px;\n }\n\n .pass-h2-above-h1 {\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n font-weight: 700;\n color: #475569;\n margin: 0 0 16px;\n font-family: 'Inter', sans-serif;\n }\n\n .pass-long-uppercase {\n text-transform: uppercase;\n letter-spacing: 0.14em;\n font-size: 12px;\n color: #475569;\n font-weight: 600;\n margin: 0 0 16px;\n }\n \nstyle=\"margin-top:32px\"","classText":"grid\ncol\ncol-label\ncase\neyebrow-classic\nhero\ncase\neyebrow-span\nhero\ncase\neyebrow-pill\nhero\ncase\neyebrow-already-uppercase\nhero\ncase\npass-long-uppercase\nhero\ncol\ncol-label\ncase\npass-eyebrow-no-tracking\nhero\ncase\npass-card-caption\nhero\ncase\npass-bare-hero\ncase\npass-h2-above-h1\nhero\ncase\neyebrow-classic\npass-body-heading\ncase\neyebrow-classic\nhero"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <title>Hook inline ignore comments do not suppress detector findings</title>\n <style>\n /* impeccable: ignore overused-font */\n body {\n font-family: \"Roboto\", ui-sans-serif, system-ui, sans-serif;\n margin: 0;\n padding: 48px;\n }\n\n main {\n max-width: 62ch;\n }\n </style>\n </head>\n <body>\n <!-- impeccable: ignore overused-font -->\n <main>\n <h1>Roboto remains a detector finding</h1>\n <p>\n This fixture deliberately uses Roboto across enough visible text for\n the browser detector to report the overused-font page finding. Hook\n exceptions must live in .impeccable/hook.json instead of source comments.\n </p>\n <p>\n The comments above look like old inline hook suppressions, but they are\n intentionally inert and should not hide the finding from headless scans.\n </p>\n <ul>\n <li>Roboto usage sample one.</li>\n <li>Roboto usage sample two.</li>\n <li>Roboto usage sample three.</li>\n <li>Roboto usage sample four.</li>\n <li>Roboto usage sample five.</li>\n <li>Roboto usage sample six.</li>\n <li>Roboto usage sample seven.</li>\n <li>Roboto usage sample eight.</li>\n <li>Roboto usage sample nine.</li>\n <li>Roboto usage sample ten.</li>\n <li>Roboto usage sample eleven.</li>\n <li>Roboto usage sample twelve.</li>\n <li>Roboto usage sample thirteen.</li>\n <li>Roboto usage sample fourteen.</li>\n <li>Roboto usage sample fifteen.</li>\n <li>Roboto usage sample sixteen.</li>\n <li>Roboto usage sample seventeen.</li>\n <li>Roboto usage sample eighteen.</li>\n <li>Roboto usage sample nineteen.</li>\n <li>Roboto usage sample twenty.</li>\n </ul>\n </main>\n </body>\n</html>\n",{"styleText":"\n /* impeccable: ignore overused-font */\n body {\n font-family: \"Roboto\", ui-sans-serif, system-ui, sans-serif;\n margin: 0;\n padding: 48px;\n }\n\n main {\n max-width: 62ch;\n }\n ","classText":""}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Icon-Tile-Stack — Should Flag vs Should Pass</title>\n <style>\n /* ─── Layout convention: two-column fixture ─────────────────────────\n Left column = patterns the rule SHOULD flag.\n Right column = legitimate patterns the rule should NOT flag.\n Each test case is annotated with a unique <h3> text so the test\n can match snippets back to expectations.\n ──────────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 960px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { margin-bottom: 24px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }\n .case h3 { font-size: 18px; margin: 0 0 4px; color: #0f172a; }\n .case p { font-size: 14px; margin: 0; color: #64748b; }\n\n /* ── FLAG cases ── */\n\n /* 1: pastel-gradient icon-tile (the canonical massive-icons.html shape) */\n .icon-pastel {\n width: 80px; height: 80px;\n border-radius: 20px;\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 2: solid-color icon-tile, white svg inside (no gradient) */\n .icon-solid {\n width: 64px; height: 64px;\n border-radius: 16px;\n background: #3b82f6;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 3: white-bg outlined icon-tile (no chromatic background at all) */\n .icon-white {\n width: 72px; height: 72px;\n border-radius: 18px;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 4: larger square (still inside the 32–128 range) */\n .icon-large {\n width: 96px; height: 96px;\n border-radius: 24px;\n background: #f1f5f9;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 5: inline emoji icon — tile contains an emoji/symbol character directly,\n not an <svg> or <i> child. This is the \"card-icon\" pattern from many\n generated demos. */\n .icon-emoji {\n width: 48px; height: 48px;\n border-radius: 12px;\n background: linear-gradient(135deg, #8b5cf6, #a855f7);\n display: flex; align-items: center; justify-content: center;\n font-size: 24px;\n margin-bottom: 16px;\n }\n\n /* ── PASS cases ── */\n\n /* a: round avatar above name (border-radius: 50% — circle, not rounded square) */\n .avatar-round {\n width: 64px; height: 64px;\n border-radius: 50%;\n background: #f59e0b;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* b: wide thumbnail above article title (16:9, much wider than tall) */\n .thumb-wide {\n width: 200px; height: 112px;\n border-radius: 8px;\n background: #cbd5e1;\n margin-bottom: 16px;\n }\n\n /* c: inline icon next to heading (icon and h3 on the same row, NOT stacked) */\n .inline-row { display: flex; align-items: center; gap: 12px; }\n .inline-row .icon-inline {\n width: 80px; height: 80px;\n border-radius: 20px;\n background: #ddd6fe;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n\n /* d: nothing above the heading at all */\n .no-icon h3 { margin-top: 0; }\n\n /* e: icon-tile that's too small (under 32px) — out of size range */\n .icon-tiny {\n width: 24px; height: 24px;\n border-radius: 6px;\n background: #93c5fd;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* f: oversized image card / hero image (over 128px) — out of size range */\n .img-huge {\n width: 200px; height: 200px;\n border-radius: 16px;\n background: #cbd5e1;\n margin-bottom: 16px;\n }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <div class=\"case\">\n <div class=\"icon-pastel\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"1.5\">\n <polyline points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/>\n </svg>\n </div>\n <h3>Lightning Fast</h3>\n <p>Built for speed and performance from the ground up.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"icon-solid\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"1.5\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n </svg>\n </div>\n <h3>Secure Storage</h3>\n <p>Enterprise-grade security for your peace of mind.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"icon-white\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f172a\" stroke-width=\"1.5\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M12 6v6l4 2\"/>\n </svg>\n </div>\n <h3>Easy Setup</h3>\n <p>Get started in minutes with zero configuration.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"icon-large\">\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f172a\" stroke-width=\"1.5\">\n <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"/>\n <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"/>\n <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"/>\n </svg>\n </div>\n <h3>Powerful Analytics</h3>\n <p>Insights that drive smarter business decisions.</p>\n </div>\n\n <div class=\"case\">\n <div class=\"icon-emoji\">⚡</div>\n <h3>Emoji Inline Icon</h3>\n <p>The tile contains an emoji directly, no SVG child.</p>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <!-- a: round avatar (circle, not rounded square) -->\n <div class=\"case\">\n <div class=\"avatar-round\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n <path d=\"M4 22v-2a8 8 0 0116 0v2\"/>\n </svg>\n </div>\n <h3>Sarah Chen</h3>\n <p>Product designer based in Berlin.</p>\n </div>\n\n <!-- b: wide 16:9 thumbnail (aspect ratio out of range) -->\n <div class=\"case\">\n <div class=\"thumb-wide\"></div>\n <h3>Article Headline</h3>\n <p>A summary of an interesting article.</p>\n </div>\n\n <!-- c: side-by-side icon and heading (not stacked vertically) -->\n <div class=\"case\">\n <div class=\"inline-row\">\n <div class=\"icon-inline\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7c3aed\" stroke-width=\"1.5\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n </svg>\n </div>\n <div>\n <h3>Inline Side By Side</h3>\n <p>Icon sits next to the heading, not above it.</p>\n </div>\n </div>\n </div>\n\n <!-- d: no icon above the heading at all -->\n <div class=\"case no-icon\">\n <h3>Plain Heading No Icon</h3>\n <p>Just a heading with body text, nothing above.</p>\n </div>\n\n <!-- e: icon-tile too small (24px — under 32px floor) -->\n <div class=\"case\">\n <div class=\"icon-tiny\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1e40af\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n </svg>\n </div>\n <h3>Tiny Icon Above Me</h3>\n <p>The icon container is smaller than 32px.</p>\n </div>\n\n <!-- f: huge image / hero (200px — over 128px ceiling) -->\n <div class=\"case\">\n <div class=\"img-huge\"></div>\n <h3>Huge Hero Image</h3>\n <p>The container is larger than the size cap.</p>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* ─── Layout convention: two-column fixture ─────────────────────────\n Left column = patterns the rule SHOULD flag.\n Right column = legitimate patterns the rule should NOT flag.\n Each test case is annotated with a unique <h3> text so the test\n can match snippets back to expectations.\n ──────────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 960px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { margin-bottom: 24px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }\n .case h3 { font-size: 18px; margin: 0 0 4px; color: #0f172a; }\n .case p { font-size: 14px; margin: 0; color: #64748b; }\n\n /* ── FLAG cases ── */\n\n /* 1: pastel-gradient icon-tile (the canonical massive-icons.html shape) */\n .icon-pastel {\n width: 80px; height: 80px;\n border-radius: 20px;\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 2: solid-color icon-tile, white svg inside (no gradient) */\n .icon-solid {\n width: 64px; height: 64px;\n border-radius: 16px;\n background: #3b82f6;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 3: white-bg outlined icon-tile (no chromatic background at all) */\n .icon-white {\n width: 72px; height: 72px;\n border-radius: 18px;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 4: larger square (still inside the 32–128 range) */\n .icon-large {\n width: 96px; height: 96px;\n border-radius: 24px;\n background: #f1f5f9;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* 5: inline emoji icon — tile contains an emoji/symbol character directly,\n not an <svg> or <i> child. This is the \"card-icon\" pattern from many\n generated demos. */\n .icon-emoji {\n width: 48px; height: 48px;\n border-radius: 12px;\n background: linear-gradient(135deg, #8b5cf6, #a855f7);\n display: flex; align-items: center; justify-content: center;\n font-size: 24px;\n margin-bottom: 16px;\n }\n\n /* ── PASS cases ── */\n\n /* a: round avatar above name (border-radius: 50% — circle, not rounded square) */\n .avatar-round {\n width: 64px; height: 64px;\n border-radius: 50%;\n background: #f59e0b;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* b: wide thumbnail above article title (16:9, much wider than tall) */\n .thumb-wide {\n width: 200px; height: 112px;\n border-radius: 8px;\n background: #cbd5e1;\n margin-bottom: 16px;\n }\n\n /* c: inline icon next to heading (icon and h3 on the same row, NOT stacked) */\n .inline-row { display: flex; align-items: center; gap: 12px; }\n .inline-row .icon-inline {\n width: 80px; height: 80px;\n border-radius: 20px;\n background: #ddd6fe;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n\n /* d: nothing above the heading at all */\n .no-icon h3 { margin-top: 0; }\n\n /* e: icon-tile that's too small (under 32px) — out of size range */\n .icon-tiny {\n width: 24px; height: 24px;\n border-radius: 6px;\n background: #93c5fd;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 16px;\n }\n\n /* f: oversized image card / hero image (over 128px) — out of size range */\n .img-huge {\n width: 200px; height: 200px;\n border-radius: 16px;\n background: #cbd5e1;\n margin-bottom: 16px;\n }\n ","classText":"grid\ncol\ncase\nicon-pastel\ncase\nicon-solid\ncase\nicon-white\ncase\nicon-large\ncase\nicon-emoji\ncol\ncase\navatar-round\ncase\nthumb-wide\ncase\ninline-row\nicon-inline\ncase no-icon\ncase\nicon-tiny\ncase\nimg-huge"}],"result":[{"id":"ai-color-palette","snippet":"Purple/violet accent colors detected","selector":".icon-emoji"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Fixture: image-backed text sampled at the pixel level by default</title>\n<style>\n body { margin: 0; padding: 40px; background: #17150f; font-family: Arial, sans-serif; }\n /* A same-origin (data-URI) near-white image background. The analytic walk\n cannot know its pixels, so the default overlay pass must sample the image\n itself: white text on it fails, dark ink on it passes. */\n .photo-panel {\n width: 420px;\n padding: 24px;\n margin: 0 0 24px;\n background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100' height='100' fill='%23f5f2ea'/></svg>\") center / cover no-repeat;\n }\n .flag-white-on-light { color: #fdfdfd; font-size: 16px; line-height: 1.6; margin: 0; }\n .pass-ink-on-light { color: #262421; font-size: 16px; line-height: 1.6; margin: 0; }\n /* Fourteen gradient-backed decoys sit BEFORE the photo panels in DOM\n order. They are visual-contrast candidates (gradient background) but not\n image-backed; with the default 12-candidate cap they would starve the\n image-only pass to zero unless the mode filters inside the collector.\n Their ink is dark on a light gradient, so no analytic finding fires. */\n .decoy { display: inline-block; padding: 4px 8px; margin: 0 4px 6px 0; background: linear-gradient(180deg, #f2efe6, #e8e4d8); color: #24211c; font-size: 12px; }\n</style>\n</head>\n<body>\n <div><span class=\"decoy-row\"></span>\n <div class=\"decoy\">Decoy 1</div>\n <div class=\"decoy\">Decoy 2</div>\n <div class=\"decoy\">Decoy 3</div>\n <div class=\"decoy\">Decoy 4</div>\n <div class=\"decoy\">Decoy 5</div>\n <div class=\"decoy\">Decoy 6</div>\n <div class=\"decoy\">Decoy 7</div>\n <div class=\"decoy\">Decoy 8</div>\n <div class=\"decoy\">Decoy 9</div>\n <div class=\"decoy\">Decoy 10</div>\n <div class=\"decoy\">Decoy 11</div>\n <div class=\"decoy\">Decoy 12</div>\n <div class=\"decoy\">Decoy 13</div>\n <div class=\"decoy\">Decoy 14</div>\n </div>\n <div class=\"photo-panel\">\n <p class=\"flag-white-on-light\">White text on a near-white image background is unreadable, and only pixel sampling can prove it.</p>\n </div>\n <div class=\"photo-panel\">\n <p class=\"pass-ink-on-light\">Dark ink on the same image background reads fine and must not flag.</p>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { margin: 0; padding: 40px; background: #17150f; font-family: Arial, sans-serif; }\n /* A same-origin (data-URI) near-white image background. The analytic walk\n cannot know its pixels, so the default overlay pass must sample the image\n itself: white text on it fails, dark ink on it passes. */\n .photo-panel {\n width: 420px;\n padding: 24px;\n margin: 0 0 24px;\n background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100' height='100' fill='%23f5f2ea'/></svg>\") center / cover no-repeat;\n }\n .flag-white-on-light { color: #fdfdfd; font-size: 16px; line-height: 1.6; margin: 0; }\n .pass-ink-on-light { color: #262421; font-size: 16px; line-height: 1.6; margin: 0; }\n /* Fourteen gradient-backed decoys sit BEFORE the photo panels in DOM\n order. They are visual-contrast candidates (gradient background) but not\n image-backed; with the default 12-candidate cap they would starve the\n image-only pass to zero unless the mode filters inside the collector.\n Their ink is dark on a light gradient, so no analytic finding fires. */\n .decoy { display: inline-block; padding: 4px 8px; margin: 0 4px 6px 0; background: linear-gradient(180deg, #f2efe6, #e8e4d8); color: #24211c; font-size: 12px; }\n","classText":"decoy-row\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\ndecoy\nphoto-panel\nflag-white-on-light\nphoto-panel\npass-ink-on-light"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Italic-Serif-Display — Should Flag vs Should Pass</title>\n <style>\n /* ─── Layout convention: two-column fixture ─────────────────────────\n Left column = patterns the rule SHOULD flag.\n Right column = legitimate patterns the rule should NOT flag.\n Each test case is annotated with a unique <h1>/<h2>/<blockquote>\n text so the test can match snippets back to expectations.\n ──────────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2.col-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { margin-bottom: 32px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }\n .case p { font-size: 14px; margin: 12px 0 0; color: #64748b; }\n\n /* ── FLAG cases ── */\n\n /* 1: Fraunces 88px italic — the Lumina hero pattern */\n .hero-fraunces {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-size: 88px;\n font-weight: 400;\n line-height: 1.05;\n margin: 0;\n }\n\n /* 2: Recoleta 64px italic */\n .hero-recoleta {\n font-family: 'Recoleta', serif;\n font-style: italic;\n font-size: 64px;\n font-weight: 400;\n margin: 0;\n }\n\n /* 3: Playfair Display 72px italic */\n .hero-playfair {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 72px;\n font-weight: 500;\n margin: 0;\n }\n\n /* 4: Unknown serif primary, but generic `serif` fallback in stack */\n .hero-unknown-serif {\n font-family: 'CustomSerifFace', serif;\n font-style: italic;\n font-size: 56px;\n font-weight: 400;\n margin: 0;\n }\n\n /* ── PASS cases ── */\n\n /* a: italic, but sans-serif primary (Karla) — italic display in a sans is rare and usually intentional */\n .pass-sans-italic {\n font-family: 'Karla', sans-serif;\n font-style: italic;\n font-size: 64px;\n font-weight: 600;\n margin: 0;\n }\n\n /* b: serif at 88px, but font-style: normal */\n .pass-roman-serif {\n font-family: 'Fraunces', Georgia, serif;\n font-style: normal;\n font-size: 88px;\n font-weight: 600;\n margin: 0;\n }\n\n /* c: italic serif blockquote at 24px (genuine pull quote, not a hero) */\n .pass-pull-quote {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-size: 24px;\n font-weight: 400;\n margin: 0;\n color: #334155;\n }\n\n /* d: roman h1 with an italic <em> inside — v1 explicitly does NOT flag this */\n .pass-roman-h1-em-italic {\n font-family: 'Inter', sans-serif;\n font-style: normal;\n font-size: 72px;\n font-weight: 600;\n margin: 0;\n }\n .pass-roman-h1-em-italic em {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-weight: 400;\n }\n\n /* e: italic serif h2 at 32px — under the 48px hero threshold */\n .pass-italic-serif-32 {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-size: 32px;\n font-weight: 400;\n margin: 0;\n }\n\n /* f: baseline-clean h1 — sans-serif roman */\n .pass-h1-sans-roman {\n font-family: 'Inter', sans-serif;\n font-style: normal;\n font-size: 64px;\n font-weight: 700;\n margin: 0;\n }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2 class=\"col-label\">Should flag</h2>\n\n <div class=\"case\">\n <h1 class=\"hero-fraunces\">Fraunces 88px italic</h1>\n <p>The Lumina hero pattern: oversized Fraunces italic display.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"hero-recoleta\">Recoleta 64px italic</h1>\n <p>Recoleta italic at 64px, generic serif fallback.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"hero-playfair\">Playfair 72px italic</h1>\n <p>Playfair Display italic at hero scale.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"hero-unknown-serif\">Unknown Serif Generic Fallback</h1>\n <p>Primary font unknown to the detector, but the stack ends in generic serif.</p>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2 class=\"col-label\">Should pass</h2>\n\n <div class=\"case\">\n <h1 class=\"pass-sans-italic\">Sans Italic Display</h1>\n <p>Italic at hero scale, but in a sans-serif face.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"pass-roman-serif\">Roman Serif Display</h1>\n <p>Fraunces at 88px, but font-style is normal (not italic).</p>\n </div>\n\n <div class=\"case\">\n <blockquote class=\"pass-pull-quote\">Italic Serif Pull Quote</blockquote>\n <p>Italic serif at 24px is a legitimate pull-quote pattern, not a hero.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"pass-roman-h1-em-italic\">Inline Em Inside <em>Roman</em></h1>\n <p>Roman h1 with an inline italic em — v1 deliberately does not flag this.</p>\n </div>\n\n <div class=\"case\">\n <h2 class=\"pass-italic-serif-32\">Italic Serif at 32px</h2>\n <p>Italic serif h2 below the 48px hero threshold.</p>\n </div>\n\n <div class=\"case\">\n <h1 class=\"pass-h1-sans-roman\">h1 Sans-Serif Roman</h1>\n <p>Baseline-clean control: sans-serif, roman, hero scale.</p>\n </div>\n </div>\n\n </div>\n</body>\n</html>\n",{"styleText":"\n /* ─── Layout convention: two-column fixture ─────────────────────────\n Left column = patterns the rule SHOULD flag.\n Right column = legitimate patterns the rule should NOT flag.\n Each test case is annotated with a unique <h1>/<h2>/<blockquote>\n text so the test can match snippets back to expectations.\n ──────────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2.col-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { margin-bottom: 32px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }\n .case p { font-size: 14px; margin: 12px 0 0; color: #64748b; }\n\n /* ── FLAG cases ── */\n\n /* 1: Fraunces 88px italic — the Lumina hero pattern */\n .hero-fraunces {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-size: 88px;\n font-weight: 400;\n line-height: 1.05;\n margin: 0;\n }\n\n /* 2: Recoleta 64px italic */\n .hero-recoleta {\n font-family: 'Recoleta', serif;\n font-style: italic;\n font-size: 64px;\n font-weight: 400;\n margin: 0;\n }\n\n /* 3: Playfair Display 72px italic */\n .hero-playfair {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 72px;\n font-weight: 500;\n margin: 0;\n }\n\n /* 4: Unknown serif primary, but generic `serif` fallback in stack */\n .hero-unknown-serif {\n font-family: 'CustomSerifFace', serif;\n font-style: italic;\n font-size: 56px;\n font-weight: 400;\n margin: 0;\n }\n\n /* ── PASS cases ── */\n\n /* a: italic, but sans-serif primary (Karla) — italic display in a sans is rare and usually intentional */\n .pass-sans-italic {\n font-family: 'Karla', sans-serif;\n font-style: italic;\n font-size: 64px;\n font-weight: 600;\n margin: 0;\n }\n\n /* b: serif at 88px, but font-style: normal */\n .pass-roman-serif {\n font-family: 'Fraunces', Georgia, serif;\n font-style: normal;\n font-size: 88px;\n font-weight: 600;\n margin: 0;\n }\n\n /* c: italic serif blockquote at 24px (genuine pull quote, not a hero) */\n .pass-pull-quote {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-size: 24px;\n font-weight: 400;\n margin: 0;\n color: #334155;\n }\n\n /* d: roman h1 with an italic <em> inside — v1 explicitly does NOT flag this */\n .pass-roman-h1-em-italic {\n font-family: 'Inter', sans-serif;\n font-style: normal;\n font-size: 72px;\n font-weight: 600;\n margin: 0;\n }\n .pass-roman-h1-em-italic em {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-weight: 400;\n }\n\n /* e: italic serif h2 at 32px — under the 48px hero threshold */\n .pass-italic-serif-32 {\n font-family: 'Fraunces', Georgia, serif;\n font-style: italic;\n font-size: 32px;\n font-weight: 400;\n margin: 0;\n }\n\n /* f: baseline-clean h1 — sans-serif roman */\n .pass-h1-sans-roman {\n font-family: 'Inter', sans-serif;\n font-style: normal;\n font-size: 64px;\n font-weight: 700;\n margin: 0;\n }\n ","classText":"grid\ncol\ncol-label\ncase\nhero-fraunces\ncase\nhero-recoleta\ncase\nhero-playfair\ncase\nhero-unknown-serif\ncol\ncol-label\ncase\npass-sans-italic\ncase\npass-roman-serif\ncase\npass-pull-quote\ncase\npass-roman-h1-em-italic\ncase\npass-italic-serif-32\ncase\npass-h1-sans-roman"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Kicker Above Heading Fixture</title>\n <style>\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n background: #f6f2ec;\n color: #171411;\n }\n main {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n padding: 32px;\n }\n .col {\n min-width: 0;\n border: 1px solid #c9bfb2;\n padding: 24px;\n }\n .case {\n min-height: 120px;\n margin: 0 0 24px;\n padding: 16px;\n background: #fffaf3;\n }\n .kicker,\n .pass-kicker,\n .pass-kicker-caps {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.11em;\n color: #5b5046;\n }\n .kicker,\n .pass-kicker-caps {\n text-transform: uppercase;\n }\n /* The wild's most common kicker recipe: 0.08em tracking at a sub-13px\n size computes to under 1px, which the old absolute floor excluded. */\n .tight-tracked-kicker {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #5b5046;\n }\n .smallcaps-kicker {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.12em;\n font-variant: small-caps;\n color: #5b5046;\n }\n .untracked-caps {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: normal;\n text-transform: uppercase;\n color: #5b5046;\n }\n h1,\n h2 {\n margin: 0 0 12px;\n font-size: 32px;\n line-height: 38px;\n font-weight: 700;\n }\n h3 {\n margin: 0 0 12px;\n font-size: 24px;\n line-height: 30px;\n font-weight: 700;\n }\n h4 {\n margin: 0 0 12px;\n font-size: 20px;\n line-height: 26px;\n font-weight: 700;\n }\n .role-heading {\n margin: 0 0 12px;\n font-size: 28px;\n line-height: 34px;\n font-weight: 700;\n }\n .hero-h1 {\n margin: 0 0 12px;\n font-size: 64px;\n line-height: 70px;\n font-weight: 700;\n }\n .hero-eyebrow {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: #5b5046;\n }\n p,\n label,\n figcaption,\n a,\n li {\n font-size: 16px;\n line-height: 24px;\n }\n nav,\n form,\n figure,\n ol {\n margin: 0 0 24px;\n padding: 16px;\n border: 1px solid #d8cec0;\n min-height: 80px;\n }\n .card-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 12px;\n margin: 0 0 24px;\n }\n .suite-card {\n display: block;\n min-height: 120px;\n padding: 16px;\n border: 1px solid #d8cec0;\n background: #fff;\n }\n .taxonomy-label {\n display: block;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.11em;\n text-transform: uppercase;\n color: #5b5046;\n }\n .suite-card h3 {\n font-size: 24px;\n line-height: 30px;\n }\n .stat {\n min-height: 100px;\n padding: 16px;\n background: #fffaf3;\n }\n .stat h3 {\n font-size: 40px;\n line-height: 46px;\n }\n .hidden-mockup {\n display: grid;\n gap: 12px;\n margin: 0 0 24px;\n }\n .mockup-hero {\n min-height: 120px;\n padding: 16px;\n border: 1px solid #d8cec0;\n background: #fff;\n }\n .mockup-hero h2 {\n font-size: 24px;\n line-height: 30px;\n }\n </style>\n</head>\n<body>\n <main>\n <section class=\"col\" aria-label=\"Should flag\">\n <h1>Should flag</h1>\n\n <section class=\"case\">\n <span class=\"kicker\">Invitation protocol</span>\n <h2>\"A Single Kicker Still Flags\"</h2>\n <p>One tracked uppercase label above one heading is enough. No repetition required.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"tight-tracked-kicker\">Output model</span>\n <h2>\"Standard Tracking Kicker\"</h2>\n <p>Uppercase at 12px with 0.08em tracking is the most common authored kicker and must flag.</p>\n </section>\n\n <section class=\"case\">\n <p class=\"kicker\">Preview sequence</p>\n <h3>\"Kicker Above An H3\"</h3>\n <p>Subsection headings get no eyebrow either.</p>\n </section>\n\n <section class=\"case\">\n <div class=\"kicker\">Access window</div>\n <h4>\"Kicker Above An H4\"</h4>\n <p>The ban runs down to h4.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"kicker\">Platform notes</span>\n <h1 class=\"sub-hero\">\"Sub Hero Heading\"</h1>\n <p>A 32px h1 is below hero scale, so this pair belongs to the general ban.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"smallcaps-kicker\">materials briefing</span>\n <h2>\"Small Caps Kicker\"</h2>\n <p>Small-caps styling is the same label in a different costume.</p>\n </section>\n\n <section class=\"case\">\n <div class=\"kicker\">Field studies</div>\n <div role=\"heading\" aria-level=\"2\" class=\"role-heading\">\"Heading Role Kicker\"</div>\n <p>Elements carrying a heading role are headings for this rule.</p>\n </section>\n </section>\n\n <section class=\"col\" aria-label=\"Should pass\">\n <h1>Should pass</h1>\n\n <nav class=\"case\" aria-label=\"Breadcrumb\">\n <span class=\"pass-kicker\">Home / Journal</span>\n <h2>\"Breadcrumb Before Heading\"</h2>\n <a href=\"/\">Home</a>\n </nav>\n\n <section class=\"case\">\n <span class=\"pass-kicker-caps\">Home / Journal / Archive</span>\n <h2>\"Breadcrumb Trail Outside Nav\"</h2>\n <p>A path with separators is wayfinding, not a kicker, even without a nav wrapper.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"pass-kicker-caps\">News · Jan 12, 2026</span>\n <h2>\"Dateline Above Headline\"</h2>\n <p>Editorial category-and-date meta lines are content metadata.</p>\n </section>\n\n <article class=\"case\">\n <span class=\"pass-kicker-caps\">Field report</span>\n <h3>\"Editorial Card Meta\"</h3>\n <p>Category labels inside an article card are structured metadata for scanning.</p>\n </article>\n\n <form class=\"case\">\n <label class=\"pass-kicker\" for=\"guest\">Guest name</label>\n <input id=\"guest\" name=\"guest\" style=\"width: 220px; height: 40px;\">\n <h2>\"Form Heading Is Separate\"</h2>\n </form>\n\n <figure class=\"case\">\n <figcaption class=\"pass-kicker-caps\">Plate study</figcaption>\n <h3>\"Figure Caption Label\"</h3>\n </figure>\n\n <section class=\"case\">\n <span class=\"pass-kicker-caps\">Section 4.2</span>\n <h2>\"Limitation Of Liability\"</h2>\n <p>Legal and document numbering identifies the clause; it is not decoration.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"pass-kicker-caps\">§ 12.3</span>\n <h2>\"Indemnification Clause\"</h2>\n <p>Statutory references keep their marker.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"pass-kicker-caps\">Chapter Four</span>\n <h2>\"Chapter Numbering Passes\"</h2>\n <p>Spelled-out chapter numbering is document structure, like legal numbering.</p>\n </section>\n\n <section class=\"case\" role=\"tabpanel\" aria-label=\"Saved station\">\n <span class=\"pass-kicker-caps\">Next from</span>\n <h2>\"Application Panel Context\"</h2>\n <p>Context labels inside application panels describe state, not decoration.</p>\n </section>\n\n <section class=\"case\">\n <nav aria-label=\"Primary\"><a href=\"/\">Home</a> <a href=\"/docs\">Docs</a></nav>\n <h1>\"Page Title After Nav\"</h1>\n <p>A navigation landmark preceding the page title is chrome, not a kicker.</p>\n </section>\n\n <div class=\"stat\">\n <h3>\"48%\"</h3>\n <span class=\"pass-kicker-caps\">Growth yoy</span>\n <p>Stat callouts put the small label below the number. That direction is legal.</p>\n </div>\n\n <section class=\"case\">\n <span class=\"pass-kicker\">A quiet lead-in sentence</span>\n <h2>\"Sentence Case Lead In\"</h2>\n <p>Not uppercase, not small-caps: an ordinary standfirst.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"untracked-caps\">New arrivals</span>\n <h2>\"Untracked Caps Label\"</h2>\n <p>Uppercase without tracking lacks the kicker styling signature.</p>\n </section>\n\n <section class=\"case\" data-impeccable-allow-kickers>\n <span class=\"pass-kicker-caps\">Archive code</span>\n <h2>\"Intentional Brand Label\"</h2>\n <p>Deliberate brand systems can opt out with an explicit marker.</p>\n </section>\n\n <section class=\"case\">\n <span class=\"hero-eyebrow\">Platform overview</span>\n <h1 class=\"hero-h1\">\"Hero Owned By Hero Rule\"</h1>\n <p>Hero-scale h1 eyebrows stay with hero-eyebrow-chip; this rule stands down.</p>\n </section>\n\n <div class=\"card-grid\" aria-label=\"Room cards\">\n <article class=\"suite-card\">\n <span class=\"taxonomy-label\">Suite</span>\n <h3>\"Garden Suite\"</h3>\n <p>Category labels inside sibling cards are metadata for comparison.</p>\n </article>\n <article class=\"suite-card\">\n <span class=\"taxonomy-label\">Suite</span>\n <h3>\"Sea Loft\"</h3>\n <p>The label is useful because the user is scanning sibling cards.</p>\n </article>\n </div>\n\n <ol class=\"case\">\n <li>\n <span class=\"pass-kicker-caps\">Step 01</span>\n <h3>\"Step Indicator\"</h3>\n <p>Step indicators in ordered flows are sequence markers.</p>\n </li>\n </ol>\n\n <div class=\"hidden-mockup\" aria-hidden=\"true\">\n <div class=\"mockup-hero\">\n <span class=\"taxonomy-label\">Amalfi Coast</span>\n <h2>\"Mockup Hero Variant One\"</h2>\n </div>\n </div>\n </section>\n </main>\n</body>\n</html>\n",{"styleText":"\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n background: #f6f2ec;\n color: #171411;\n }\n main {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n padding: 32px;\n }\n .col {\n min-width: 0;\n border: 1px solid #c9bfb2;\n padding: 24px;\n }\n .case {\n min-height: 120px;\n margin: 0 0 24px;\n padding: 16px;\n background: #fffaf3;\n }\n .kicker,\n .pass-kicker,\n .pass-kicker-caps {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.11em;\n color: #5b5046;\n }\n .kicker,\n .pass-kicker-caps {\n text-transform: uppercase;\n }\n /* The wild's most common kicker recipe: 0.08em tracking at a sub-13px\n size computes to under 1px, which the old absolute floor excluded. */\n .tight-tracked-kicker {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #5b5046;\n }\n .smallcaps-kicker {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.12em;\n font-variant: small-caps;\n color: #5b5046;\n }\n .untracked-caps {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: normal;\n text-transform: uppercase;\n color: #5b5046;\n }\n h1,\n h2 {\n margin: 0 0 12px;\n font-size: 32px;\n line-height: 38px;\n font-weight: 700;\n }\n h3 {\n margin: 0 0 12px;\n font-size: 24px;\n line-height: 30px;\n font-weight: 700;\n }\n h4 {\n margin: 0 0 12px;\n font-size: 20px;\n line-height: 26px;\n font-weight: 700;\n }\n .role-heading {\n margin: 0 0 12px;\n font-size: 28px;\n line-height: 34px;\n font-weight: 700;\n }\n .hero-h1 {\n margin: 0 0 12px;\n font-size: 64px;\n line-height: 70px;\n font-weight: 700;\n }\n .hero-eyebrow {\n display: block;\n width: 240px;\n min-height: 16px;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: #5b5046;\n }\n p,\n label,\n figcaption,\n a,\n li {\n font-size: 16px;\n line-height: 24px;\n }\n nav,\n form,\n figure,\n ol {\n margin: 0 0 24px;\n padding: 16px;\n border: 1px solid #d8cec0;\n min-height: 80px;\n }\n .card-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 12px;\n margin: 0 0 24px;\n }\n .suite-card {\n display: block;\n min-height: 120px;\n padding: 16px;\n border: 1px solid #d8cec0;\n background: #fff;\n }\n .taxonomy-label {\n display: block;\n margin: 0 0 8px;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.11em;\n text-transform: uppercase;\n color: #5b5046;\n }\n .suite-card h3 {\n font-size: 24px;\n line-height: 30px;\n }\n .stat {\n min-height: 100px;\n padding: 16px;\n background: #fffaf3;\n }\n .stat h3 {\n font-size: 40px;\n line-height: 46px;\n }\n .hidden-mockup {\n display: grid;\n gap: 12px;\n margin: 0 0 24px;\n }\n .mockup-hero {\n min-height: 120px;\n padding: 16px;\n border: 1px solid #d8cec0;\n background: #fff;\n }\n .mockup-hero h2 {\n font-size: 24px;\n line-height: 30px;\n }\n \nstyle=\"width: 220px; height: 40px;\"","classText":"col\ncase\nkicker\ncase\ntight-tracked-kicker\ncase\nkicker\ncase\nkicker\ncase\nkicker\nsub-hero\ncase\nsmallcaps-kicker\ncase\nkicker\nrole-heading\ncol\ncase\npass-kicker\ncase\npass-kicker-caps\ncase\npass-kicker-caps\ncase\npass-kicker-caps\ncase\npass-kicker\ncase\npass-kicker-caps\ncase\npass-kicker-caps\ncase\npass-kicker-caps\ncase\npass-kicker-caps\ncase\npass-kicker-caps\ncase\nstat\npass-kicker-caps\ncase\npass-kicker\ncase\nuntracked-caps\ncase\npass-kicker-caps\ncase\nhero-eyebrow\nhero-h1\ncard-grid\nsuite-card\ntaxonomy-label\nsuite-card\ntaxonomy-label\ncase\npass-kicker-caps\nhidden-mockup\nmockup-hero\ntaxonomy-label"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Layout Anti-Patterns — Should Flag vs Should Pass</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; color: #111827; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>Nested cards (cardocalypse)</h3>\n\n <!-- Classic: card inside card -->\n <div class=\"bg-white rounded-lg shadow-md p-6 mb-4\">\n <h4 class=\"text-lg font-semibold mb-3\">Outer Card</h4>\n <div class=\"bg-white rounded-lg shadow-md p-4\">\n <h5 class=\"font-medium\">Inner Card</h5>\n <p class=\"text-sm text-gray-600\">Card inside card.</p>\n </div>\n </div>\n\n <!-- Three levels deep -->\n <div class=\"bg-white rounded-xl shadow-lg p-6 mb-4\">\n <h4 class=\"text-lg font-semibold mb-3\">Level 1</h4>\n <div class=\"bg-gray-50 rounded-lg shadow-sm p-4 mb-3\">\n <h5 class=\"font-medium mb-2\">Level 2</h5>\n <div class=\"bg-white rounded-md shadow-sm p-3\">\n <p class=\"text-sm\">Level 3 — nesting inception.</p>\n </div>\n </div>\n </div>\n\n <!-- CSS variant: border + bg + shadow nesting -->\n <div style=\"background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 1.5rem; margin-bottom: 1rem;\">\n <h4 style=\"font-weight: 600; margin-bottom: 0.75rem;\">Outer (CSS)</h4>\n <div style=\"background: #f9fafb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1rem;\">\n <p style=\"font-size: 0.875rem; color: #6b7280;\">Inner card via CSS.</p>\n </div>\n </div>\n\n <!-- shadcn-style Card nested in Card -->\n <div class=\"rounded-lg border bg-white shadow-sm p-6 mb-4\" data-component=\"card\">\n <h4 class=\"font-semibold mb-3\">shadcn-style Outer Card</h4>\n <div class=\"rounded-lg border bg-white shadow-sm p-4\" data-component=\"card\">\n <p class=\"text-sm text-gray-600\">Another shadcn Card nested inside.</p>\n </div>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>shadcn Card sub-components (not nested cards)</h3>\n <div class=\"rounded-lg border bg-white shadow-sm mb-4\">\n <div class=\"flex flex-col space-y-1.5 p-6\">\n <h4 class=\"text-lg font-semibold\">Card Title</h4>\n <p class=\"text-sm text-gray-500\">Card description goes here.</p>\n </div>\n <div class=\"p-6 pt-0\">\n <p class=\"text-sm text-gray-600\">CardContent — a sub-section, not a nested card. No shadow, no border-radius of its own.</p>\n </div>\n <div class=\"flex items-center p-6 pt-0\">\n <button class=\"px-4 py-2 bg-gray-900 text-white text-sm rounded-md\">Action</button>\n </div>\n </div>\n\n <h3>Card with form inputs</h3>\n <div class=\"bg-white rounded-lg shadow-sm p-6 mb-4 border\">\n <h4 class=\"font-semibold mb-4\">Settings</h4>\n <div class=\"space-y-3\">\n <input type=\"text\" placeholder=\"Name\" class=\"w-full px-3 py-2 border rounded-md shadow-sm text-sm\">\n <input type=\"email\" placeholder=\"Email\" class=\"w-full px-3 py-2 border rounded-md shadow-sm text-sm\">\n <select class=\"w-full px-3 py-2 border rounded-md shadow-sm text-sm bg-white\">\n <option>Select option</option>\n </select>\n <textarea placeholder=\"Bio\" class=\"w-full px-3 py-2 border rounded-md shadow-sm text-sm h-20 resize-none\"></textarea>\n </div>\n </div>\n\n <h3>Card with code block</h3>\n <div class=\"bg-white rounded-lg shadow-sm p-6 mb-4 border\">\n <h4 class=\"font-semibold mb-3\">Installation</h4>\n <pre class=\"bg-gray-900 text-gray-100 rounded-md p-4 text-sm overflow-x-auto\"><code>npm install @acme/sdk</code></pre>\n </div>\n\n <h3>Card with badges</h3>\n <div class=\"bg-white rounded-lg shadow-sm p-6 mb-4 border\">\n <h4 class=\"font-semibold mb-3\">Tags</h4>\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium\">React</span>\n <span class=\"px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium\">TypeScript</span>\n <span class=\"px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium\">Tailwind</span>\n </div>\n </div>\n\n <h3>Card with image</h3>\n <div class=\"bg-white rounded-lg shadow-sm p-6 mb-4 border\">\n <div class=\"w-full h-32 bg-gradient-to-br from-amber-400 to-rose-500 rounded-lg shadow-inner mb-4\"></div>\n <h4 class=\"font-semibold\">Project Preview</h4>\n <p class=\"text-sm text-gray-600 mt-1\">Image with rounded corners and shadow.</p>\n </div>\n\n <h3>Pricing cards (intentionally similar)</h3>\n <div class=\"grid grid-cols-3 gap-2 mb-4\">\n <div class=\"bg-white rounded-lg shadow-sm p-4 border\">\n <h4 class=\"font-semibold mb-1 text-sm\">Free</h4>\n <div class=\"text-lg font-bold mb-2\">$0</div>\n </div>\n <div class=\"bg-white rounded-lg shadow-sm p-4 border-2 border-blue-500\">\n <h4 class=\"font-semibold mb-1 text-sm\">Pro</h4>\n <div class=\"text-lg font-bold mb-2\">$29</div>\n </div>\n <div class=\"bg-white rounded-lg shadow-sm p-4 border\">\n <h4 class=\"font-semibold mb-1 text-sm\">Enterprise</h4>\n <div class=\"text-lg font-bold mb-2\">Custom</div>\n </div>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; color: #111827; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n \nstyle=\"background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 1.5rem; margin-bottom: 1rem;\"\nstyle=\"font-weight: 600; margin-bottom: 0.75rem;\"\nstyle=\"background: #f9fafb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1rem;\"\nstyle=\"font-size: 0.875rem; color: #6b7280;\"","classText":"grid\ncol\nbg-white rounded-lg shadow-md p-6 mb-4\ntext-lg font-semibold mb-3\nbg-white rounded-lg shadow-md p-4\nfont-medium\ntext-sm text-gray-600\nbg-white rounded-xl shadow-lg p-6 mb-4\ntext-lg font-semibold mb-3\nbg-gray-50 rounded-lg shadow-sm p-4 mb-3\nfont-medium mb-2\nbg-white rounded-md shadow-sm p-3\ntext-sm\nrounded-lg border bg-white shadow-sm p-6 mb-4\nfont-semibold mb-3\nrounded-lg border bg-white shadow-sm p-4\ntext-sm text-gray-600\ncol\nrounded-lg border bg-white shadow-sm mb-4\nflex flex-col space-y-1.5 p-6\ntext-lg font-semibold\ntext-sm text-gray-500\np-6 pt-0\ntext-sm text-gray-600\nflex items-center p-6 pt-0\npx-4 py-2 bg-gray-900 text-white text-sm rounded-md\nbg-white rounded-lg shadow-sm p-6 mb-4 border\nfont-semibold mb-4\nspace-y-3\nw-full px-3 py-2 border rounded-md shadow-sm text-sm\nw-full px-3 py-2 border rounded-md shadow-sm text-sm\nw-full px-3 py-2 border rounded-md shadow-sm text-sm bg-white\nw-full px-3 py-2 border rounded-md shadow-sm text-sm h-20 resize-none\nbg-white rounded-lg shadow-sm p-6 mb-4 border\nfont-semibold mb-3\nbg-gray-900 text-gray-100 rounded-md p-4 text-sm overflow-x-auto\nbg-white rounded-lg shadow-sm p-6 mb-4 border\nfont-semibold mb-3\nflex flex-wrap gap-2\npx-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium\npx-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium\npx-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium\nbg-white rounded-lg shadow-sm p-6 mb-4 border\nw-full h-32 bg-gradient-to-br from-amber-400 to-rose-500 rounded-lg shadow-inner mb-4\nfont-semibold\ntext-sm text-gray-600 mt-1\ngrid grid-cols-3 gap-2 mb-4\nbg-white rounded-lg shadow-sm p-4 border\nfont-semibold mb-1 text-sm\ntext-lg font-bold mb-2\nbg-white rounded-lg shadow-sm p-4 border-2 border-blue-500\nfont-semibold mb-1 text-sm\ntext-lg font-bold mb-2\nbg-white rounded-lg shadow-sm p-4 border\nfont-semibold mb-1 text-sm\ntext-lg font-bold mb-2"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Legitimate Border Patterns — Should NOT Flag</title>\n <style>\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; color: #111827; }\n h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }\n h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; color: #6b7280; }\n .demo { max-width: 36rem; margin-bottom: 1.5rem; }\n </style>\n</head>\n<body>\n <h1>Legitimate Border Patterns</h1>\n <p style=\"color: #6b7280; margin-bottom: 2rem;\">Every border here is a well-established web pattern. None should be flagged.</p>\n\n <!-- 1. BLOCKQUOTE — the classic border-left usage -->\n <h2>Blockquotes</h2>\n <div class=\"demo\">\n <blockquote style=\"border-left: 4px solid #d1d5db; padding-left: 1rem; margin: 0; color: #4b5563; font-style: italic;\">\n \"Design is not just what it looks like and feels like. Design is how it works.\"\n </blockquote>\n </div>\n\n <!-- 2. SIDEBAR NAV — active state indicator -->\n <h2>Sidebar Navigation (Active State)</h2>\n <div class=\"demo\">\n <nav style=\"width: 200px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;\">\n <a href=\"#\" style=\"display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;\">Dashboard</a>\n <a href=\"#\" style=\"display: block; padding: 0.75rem 1rem; color: #1d4ed8; text-decoration: none; border-left: 3px solid #3b82f6; background: #eff6ff; font-weight: 500;\">Projects</a>\n <a href=\"#\" style=\"display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;\">Settings</a>\n </nav>\n </div>\n\n <!-- 3. FORM VALIDATION — error indicator on input -->\n <h2>Form Validation</h2>\n <div class=\"demo\">\n <div style=\"margin-bottom: 1rem;\">\n <label style=\"display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem;\">Email</label>\n <input type=\"email\" value=\"not-an-email\" style=\"width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #fca5a5; border-left: 3px solid #b91c1c; border-radius: 6px; outline: none; font-size: 0.875rem;\">\n <p style=\"color: #b91c1c; font-size: 0.75rem; margin-top: 0.25rem;\">Please enter a valid email address.</p>\n </div>\n </div>\n\n <!-- 4. TIMELINE / STEPPER -->\n <h2>Timeline</h2>\n <div class=\"demo\">\n <div style=\"border-left: 3px solid #e5e7eb; padding-left: 1.5rem; margin-left: 0.75rem;\">\n <div style=\"position: relative; padding-bottom: 1.5rem;\">\n <div style=\"position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;\"></div>\n <p style=\"font-weight: 500; margin: 0;\">Order placed</p>\n <p style=\"font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;\">March 15, 2026</p>\n </div>\n <div style=\"position: relative; padding-bottom: 1.5rem;\">\n <div style=\"position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;\"></div>\n <p style=\"font-weight: 500; margin: 0;\">Shipped</p>\n <p style=\"font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;\">March 16, 2026</p>\n </div>\n <div style=\"position: relative;\">\n <div style=\"position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: 2px solid white;\"></div>\n <p style=\"font-weight: 500; margin: 0; color: #4b5563;\">Delivered</p>\n <p style=\"font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;\">Expected March 18</p>\n </div>\n </div>\n </div>\n\n <!-- 5. CODE BLOCK — diff highlighting -->\n <h2>Code Diff Highlighting</h2>\n <div class=\"demo\">\n <pre style=\"background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 8px; font-size: 0.8125rem; overflow-x: auto; margin: 0;\">\n<code><span style=\"display: block; border-left: 3px solid #ef4444; padding-left: 0.75rem; background: rgba(239,68,68,0.1);\">- const old = getValue();</span>\n<span style=\"display: block; border-left: 3px solid #22c55e; padding-left: 0.75rem; background: rgba(34,197,94,0.1);\">+ const value = getNewValue();</span>\n<span style=\"display: block; padding-left: calc(3px + 0.75rem);\"> return value;</span></code></pre>\n </div>\n\n <!-- 6. TAB ACTIVE STATE — bottom border -->\n <h2>Tab Navigation</h2>\n <div class=\"demo\">\n <div style=\"display: flex; border-bottom: 1px solid #e5e7eb;\">\n <button style=\"padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #1d4ed8; border-bottom: 2px solid #3b82f6; font-weight: 500; cursor: pointer;\">Overview</button>\n <button style=\"padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;\">Analytics</button>\n <button style=\"padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;\">Settings</button>\n </div>\n </div>\n\n <!-- 7. TABLE CELL BORDERS -->\n <h2>Data Table</h2>\n <div class=\"demo\">\n <table style=\"width: 100%; border-collapse: collapse; font-size: 0.875rem;\">\n <thead>\n <tr>\n <th style=\"text-align: left; padding: 0.5rem; border-bottom: 2px solid #111827;\">Name</th>\n <th style=\"text-align: right; padding: 0.5rem; border-bottom: 2px solid #111827;\">Revenue</th>\n </tr>\n </thead>\n <tbody>\n <tr><td style=\"padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\">Acme Corp</td><td style=\"text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\">$1.2M</td></tr>\n <tr><td style=\"padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\">Globex</td><td style=\"text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\">$850K</td></tr>\n </tbody>\n </table>\n </div>\n\n <!-- 8. ALERT BANNER — full-width, not a card -->\n <h2>Alert Banner</h2>\n <div class=\"demo\">\n <div style=\"border: 1px solid #f59e0b; background: #fffbeb; padding: 0.75rem 1rem; font-size: 0.875rem; color: #92400e;\">\n <strong>Warning:</strong> Your trial expires in 3 days. <a href=\"#\" style=\"color: #d97706;\">Upgrade now</a>\n </div>\n </div>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; color: #111827; }\n h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }\n h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; color: #6b7280; }\n .demo { max-width: 36rem; margin-bottom: 1.5rem; }\n \nstyle=\"color: #6b7280; margin-bottom: 2rem;\"\nstyle=\"border-left: 4px solid #d1d5db; padding-left: 1rem; margin: 0; color: #4b5563; font-style: italic;\"\nstyle=\"width: 200px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;\"\nstyle=\"display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;\"\nstyle=\"display: block; padding: 0.75rem 1rem; color: #1d4ed8; text-decoration: none; border-left: 3px solid #3b82f6; background: #eff6ff; font-weight: 500;\"\nstyle=\"display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;\"\nstyle=\"margin-bottom: 1rem;\"\nstyle=\"display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem;\"\nstyle=\"width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #fca5a5; border-left: 3px solid #b91c1c; border-radius: 6px; outline: none; font-size: 0.875rem;\"\nstyle=\"color: #b91c1c; font-size: 0.75rem; margin-top: 0.25rem;\"\nstyle=\"border-left: 3px solid #e5e7eb; padding-left: 1.5rem; margin-left: 0.75rem;\"\nstyle=\"position: relative; padding-bottom: 1.5rem;\"\nstyle=\"position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;\"\nstyle=\"font-weight: 500; margin: 0;\"\nstyle=\"font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;\"\nstyle=\"position: relative; padding-bottom: 1.5rem;\"\nstyle=\"position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;\"\nstyle=\"font-weight: 500; margin: 0;\"\nstyle=\"font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;\"\nstyle=\"position: relative;\"\nstyle=\"position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: 2px solid white;\"\nstyle=\"font-weight: 500; margin: 0; color: #4b5563;\"\nstyle=\"font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;\"\nstyle=\"background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 8px; font-size: 0.8125rem; overflow-x: auto; margin: 0;\"\nstyle=\"display: block; border-left: 3px solid #ef4444; padding-left: 0.75rem; background: rgba(239,68,68,0.1);\"\nstyle=\"display: block; border-left: 3px solid #22c55e; padding-left: 0.75rem; background: rgba(34,197,94,0.1);\"\nstyle=\"display: block; padding-left: calc(3px + 0.75rem);\"\nstyle=\"display: flex; border-bottom: 1px solid #e5e7eb;\"\nstyle=\"padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #1d4ed8; border-bottom: 2px solid #3b82f6; font-weight: 500; cursor: pointer;\"\nstyle=\"padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;\"\nstyle=\"padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;\"\nstyle=\"width: 100%; border-collapse: collapse; font-size: 0.875rem;\"\nstyle=\"text-align: left; padding: 0.5rem; border-bottom: 2px solid #111827;\"\nstyle=\"text-align: right; padding: 0.5rem; border-bottom: 2px solid #111827;\"\nstyle=\"padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\"\nstyle=\"text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\"\nstyle=\"padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\"\nstyle=\"text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;\"\nstyle=\"border: 1px solid #f59e0b; background: #fffbeb; padding: 0.75rem 1rem; font-size: 0.875rem; color: #92400e;\"\nstyle=\"color: #d97706;\"","classText":"demo\ndemo\ndemo\ndemo\ndemo\ndemo\ndemo\ndemo"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Anti-Patterns From Linked Stylesheet</title>\n <link rel=\"stylesheet\" href=\"external-styles.css\">\n <style>\n body {\n margin: 0;\n padding: 24px;\n background: #f9fafb;\n color: #111827;\n font: 14px/1.5 system-ui, sans-serif;\n }\n\n h1 {\n max-width: 1080px;\n margin: 0 auto 8px;\n font-size: 34px;\n line-height: 1.05;\n }\n\n p.intro {\n max-width: 1080px;\n margin: 0 auto 24px;\n color: #4b5563;\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 32px;\n max-width: 1080px;\n margin: 0 auto;\n }\n\n .col h2 {\n margin: 0 0 14px;\n color: #475569;\n font-size: 13px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .cards {\n display: grid;\n gap: 14px;\n }\n\n h3 {\n margin: 0 0 4px;\n font-size: 15px;\n line-height: 1.25;\n }\n\n .cards p {\n margin: 0;\n color: #4b5563;\n }\n </style>\n</head>\n<body>\n <h1>Linked Stylesheet Anti-Patterns</h1>\n <p class=\"intro\">\n These elements get their anti-pattern styles from an external CSS file.\n Regex-only scanning misses these — only computed style analysis catches them.\n </p>\n\n <div class=\"grid\">\n <section class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n <div class=\"cards\">\n <div class=\"external-side-tab\">\n <h3>External side-tab class</h3>\n <p>border-left plus border-radius from a linked stylesheet.</p>\n </div>\n\n <div class=\"external-top-accent\">\n <h3>External top accent class</h3>\n <p>border-top plus border-radius from a linked stylesheet.</p>\n </div>\n </div>\n </section>\n\n <section class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n <div class=\"cards\">\n <div class=\"external-clean\">\n <h3>External clean card</h3>\n <p>Uniform 1px border from the linked stylesheet.</p>\n </div>\n\n <div class=\"external-neutral-side\">\n <h3>External neutral side rule</h3>\n <p>Thick side border, but the color is structural gray.</p>\n </div>\n\n <div class=\"external-square-top\">\n <h3>External square top rule</h3>\n <p>Heavy top border with no rounded card corners.</p>\n </div>\n </div>\n </section>\n </div>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body {\n margin: 0;\n padding: 24px;\n background: #f9fafb;\n color: #111827;\n font: 14px/1.5 system-ui, sans-serif;\n }\n\n h1 {\n max-width: 1080px;\n margin: 0 auto 8px;\n font-size: 34px;\n line-height: 1.05;\n }\n\n p.intro {\n max-width: 1080px;\n margin: 0 auto 24px;\n color: #4b5563;\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 32px;\n max-width: 1080px;\n margin: 0 auto;\n }\n\n .col h2 {\n margin: 0 0 14px;\n color: #475569;\n font-size: 13px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .cards {\n display: grid;\n gap: 14px;\n }\n\n h3 {\n margin: 0 0 4px;\n font-size: 15px;\n line-height: 1.25;\n }\n\n .cards p {\n margin: 0;\n color: #4b5563;\n }\n \n/* External stylesheet that applies anti-pattern styles */\n\n/* Side-tab via external class */\n.external-side-tab {\n background: white;\n padding: 1rem;\n border-radius: 12px;\n border-left: 4px solid #3b82f6;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n/* Top border accent via external class */\n.external-top-accent {\n background: white;\n padding: 1rem;\n border-radius: 12px;\n border-top: 3px solid #8b5cf6;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n/* Overused font from external stylesheet */\n.external-inter {\n font-family: 'Inter', sans-serif;\n}\n\n/* Clean card — should NOT flag */\n.external-clean {\n background: white;\n padding: 1rem;\n border-radius: 12px;\n border: 1px solid #e5e7eb;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n/* Neutral side rule — should NOT flag */\n.external-neutral-side {\n background: white;\n padding: 1rem;\n border-radius: 12px;\n border-left: 4px solid #d1d5db;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n/* Top rule without rounded card corners — should NOT flag */\n.external-square-top {\n background: white;\n padding: 1rem;\n border-radius: 0;\n border-top: 4px solid #8b5cf6;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n","classText":"intro\ngrid\ncol\ncards\nexternal-side-tab\nexternal-top-accent\ncol\ncards\nexternal-clean\nexternal-neutral-side\nexternal-square-top"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Side-Tab with Modern Color Formats (oklch/lab/lch/hsl/hwb)</title>\n <style>\n /* Two-column fixture: left col = should-flag, right col = should-pass.\n The side-tab snippet doesn't embed identifying text, so the test\n asserts finding counts against the structural ids (#flag-N / #pass-N)\n by reading the element via data attributes in the check path. Since\n that isn't available to the Node fixture runner, we instead place a\n unique number of FLAG elements (each a distinct side-tab) and verify\n the side-tab count. */\n\n /* CSS custom properties — variables used by the var()-case fixtures.\n jsdom's CSSOM drops any border shorthand containing var(), which used\n to make every side-tab built with CSS variables invisible to the\n detector. These cases regression-test the fallback pass that parses\n border shorthands directly off the rule (not the computed style). */\n :root {\n --brand: #87a8ff;\n --warn: #8a6a2f;\n --terracotta: #aa674d;\n --line: #e5e7eb; /* neutral gray — must NOT trigger */\n --rule: #f3f4f6; /* near-white — must NOT trigger */\n }\n\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; background: #fafafa; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1120px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { padding: 12px 16px; margin-bottom: 16px; }\n .case h3 { font-size: 14px; margin: 0 0 4px; }\n .case p { font-size: 13px; margin: 0; color: #64748b; }\n\n /* ── FLAG cases: colored side-tab borders using modern color formats ── */\n\n /* 1: oklch border-left + border-radius (the canonical real-page bug) */\n #flag-oklch-1 {\n width: 400px;\n background: oklch(100% 0 0);\n border-radius: 4px;\n border-left: 3px solid oklch(65% 0.12 250);\n }\n\n /* 2: oklch mixed — neutral 1px border all around + colored 4px left +\n border-radius (mirrors .medication-card from the reproducer) */\n #flag-oklch-2 {\n width: 400px;\n background: oklch(100% 0 0);\n border: 1px solid oklch(80% 0.05 250);\n border-left: 4px solid oklch(75% 0.15 45);\n border-radius: 4px;\n }\n\n /* 3: oklch alert pattern — colored 4px border-left + border-radius */\n #flag-oklch-3 {\n width: 400px;\n background: oklch(98% 0.01 60);\n border-left: 4px solid oklch(75% 0.18 45);\n border-radius: 4px;\n }\n\n /* 4: oklab border-left + border-radius */\n #flag-oklab-1 {\n width: 400px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid oklab(60% 0.1 0.15);\n }\n\n /* 5: lch border-left + border-radius */\n #flag-lch-1 {\n width: 400px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid lch(55% 60 250);\n }\n\n /* 6: lab border-left + border-radius */\n #flag-lab-1 {\n width: 400px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid lab(50% 40 -30);\n }\n\n /* 7: card-shaped <label> with colored oklch side border + radius\n (the checklist-item pattern from preop-portal reproducer) */\n label#flag-label-oklch {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 400px;\n padding: 16px;\n background: oklch(100% 0 0);\n border-radius: 4px;\n border-left: 3px solid oklch(65% 0.12 250);\n cursor: pointer;\n }\n\n /* 8: card-shaped <label> with colored rgb side border + radius —\n proves the fix is not oklch-specific */\n label#flag-label-rgb {\n display: block;\n width: 400px;\n padding: 16px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid #3b82f6;\n cursor: pointer;\n }\n\n /* 9: CSS variable in shorthand — the canonical real-page pattern from\n evals (e.g. 09-physics-study: border-left:8px solid var(--brand-2)).\n jsdom silently drops this entire declaration, so the computed-style\n path used to miss it. */\n #flag-var-shorthand {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 5px solid var(--brand);\n }\n\n /* 10: CSS variable + neutral 1px all-around border — mirrors the\n medication-card pattern with a colored accent on the left. */\n #flag-var-mixed {\n width: 400px;\n background: #ffffff;\n border: 1px solid var(--line);\n border-left: 4px solid var(--warn);\n border-radius: 4px;\n }\n\n /* 11: CSS variable shorthand, right side. Ensures the fallback works\n for both inline axes, not just border-left. */\n #flag-var-right {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-right: 4px solid var(--terracotta);\n }\n\n /* 12: card-shaped <label> with var() side border + radius —\n the checklist-row shape, built with tokens. */\n label#flag-label-var {\n display: block;\n width: 400px;\n padding: 16px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid var(--brand);\n cursor: pointer;\n }\n\n /* ── PASS cases: legitimate or neutral borders, must NOT fire ── */\n\n /* 1: oklch chroma ~0 — true neutral gray border should not fire */\n #pass-oklch-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid oklch(80% 0 0);\n }\n\n /* 2: oklch low chroma (0.01) — still perceptually neutral */\n #pass-oklch-nearneutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid oklch(75% 0.01 250);\n }\n\n /* 3: oklch colored border all around (not one-sided) — no side-tab */\n #pass-oklch-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid oklch(65% 0.12 250);\n border-radius: 4px;\n }\n\n /* 4: oklch colored 1px border-left (too thin to qualify) */\n #pass-oklch-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid oklch(65% 0.12 250);\n }\n\n /* 5: lab neutral (chroma near zero) — must not fire */\n #pass-lab-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid lab(50% 0 0);\n }\n\n /* 6: lch neutral (chroma 0) */\n #pass-lch-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid lch(50% 0 0);\n }\n\n /* 7: plain inline form label — no border, no padding, no radius.\n Must NOT be flagged for anything. */\n label#pass-label-plain {\n font-size: 14px;\n font-weight: 500;\n color: #374151;\n }\n\n /* 8: form label with a small neutral gray left border — neutral color\n should not fire the colored side-tab rule. */\n label#pass-label-neutral-border {\n display: block;\n width: 400px;\n padding: 8px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid #e5e7eb;\n }\n\n /* 9: inline label inside a form row — default inline layout,\n no borders, must not fire. */\n label#pass-label-inline {\n font-size: 13px;\n color: #6b7280;\n margin-right: 8px;\n }\n\n /* 10: label with 1px colored left border — too thin to qualify\n (matches the existing 1px thin rule for divs). */\n label#pass-label-thin {\n display: block;\n width: 400px;\n padding: 8px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid #3b82f6;\n }\n\n /* 11: CSS variable resolving to a neutral gray — must NOT fire,\n even though the border shorthand contains var(). */\n #pass-var-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid var(--line);\n }\n\n /* 12: thin (1px) var-based left border — under the side-tab width\n threshold even when resolved. */\n #pass-var-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid var(--brand);\n }\n\n /* 13: var-based uniform border on all four sides. Not a side-tab. */\n #pass-var-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid var(--brand);\n border-radius: 4px;\n }\n\n /* 14: neutral 1px oklch right divider — context-bar hairline, not a side-tab. */\n #pass-oklch-neutral-right-divider {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-right: 1px solid oklch(92% 0 0 / 0.12);\n }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n <div class=\"case\" id=\"flag-oklch-1\"><h3>oklch checklist</h3><p>oklch border-left 3px + radius</p></div>\n <div class=\"case\" id=\"flag-oklch-2\"><h3>oklch medication card</h3><p>neutral all + colored left 4px</p></div>\n <div class=\"case\" id=\"flag-oklch-3\"><h3>oklch alert</h3><p>warm border-left 4px + radius</p></div>\n <div class=\"case\" id=\"flag-oklab-1\"><h3>oklab card</h3><p>oklab border-left 4px + radius</p></div>\n <div class=\"case\" id=\"flag-lch-1\"><h3>lch card</h3><p>lch border-left 4px + radius</p></div>\n <div class=\"case\" id=\"flag-lab-1\"><h3>lab card</h3><p>lab border-left 4px + radius</p></div>\n <label class=\"case\" id=\"flag-label-oklch\">\n <input type=\"checkbox\">\n <span>Card-shaped label with oklch side border</span>\n </label>\n <label class=\"case\" id=\"flag-label-rgb\">\n <input type=\"checkbox\">\n <span>Card-shaped label with rgb side border</span>\n </label>\n <div class=\"case\" id=\"flag-var-shorthand\"><h3>var() shorthand</h3><p>border-left 5px + var(--brand)</p></div>\n <div class=\"case\" id=\"flag-var-mixed\"><h3>var() mixed</h3><p>neutral all + colored var left</p></div>\n <div class=\"case\" id=\"flag-var-right\"><h3>var() right side</h3><p>border-right 4px + var(--terracotta)</p></div>\n <label class=\"case\" id=\"flag-label-var\">\n <input type=\"checkbox\">\n <span>Card-shaped label with var() side border</span>\n </label>\n </div>\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n <div class=\"case\" id=\"pass-oklch-neutral\"><h3>oklch neutral</h3><p>chroma 0 gray</p></div>\n <div class=\"case\" id=\"pass-oklch-nearneutral\"><h3>oklch near-neutral</h3><p>chroma 0.01</p></div>\n <div class=\"case\" id=\"pass-oklch-allsides\"><h3>oklch all sides</h3><p>uniform border</p></div>\n <div class=\"case\" id=\"pass-oklch-thin\"><h3>oklch thin</h3><p>1px too thin</p></div>\n <div class=\"case\" id=\"pass-lab-neutral\"><h3>lab neutral</h3><p>chroma 0</p></div>\n <div class=\"case\" id=\"pass-lch-neutral\"><h3>lch neutral</h3><p>chroma 0</p></div>\n <div>\n <label for=\"pass-email\" id=\"pass-label-plain\">Email address</label>\n <input type=\"email\" id=\"pass-email\">\n </div>\n <label id=\"pass-label-neutral-border\">\n <input type=\"checkbox\">\n <span>Label with neutral gray left border</span>\n </label>\n <form>\n <label for=\"pass-name\" id=\"pass-label-inline\">Name:</label>\n <input type=\"text\" id=\"pass-name\">\n </form>\n <label id=\"pass-label-thin\">\n <input type=\"checkbox\">\n <span>Label with 1px colored left border (too thin)</span>\n </label>\n <div class=\"case\" id=\"pass-var-neutral\"><h3>var() neutral</h3><p>--line resolves to gray</p></div>\n <div class=\"case\" id=\"pass-var-thin\"><h3>var() thin</h3><p>1px too thin to qualify</p></div>\n <div class=\"case\" id=\"pass-var-allsides\"><h3>var() all sides</h3><p>uniform, not a side-tab</p></div>\n <div class=\"case\" id=\"pass-oklch-neutral-right-divider\"><h3>oklch neutral right divider</h3><p>1px neutral context-bar hairline</p></div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* Two-column fixture: left col = should-flag, right col = should-pass.\n The side-tab snippet doesn't embed identifying text, so the test\n asserts finding counts against the structural ids (#flag-N / #pass-N)\n by reading the element via data attributes in the check path. Since\n that isn't available to the Node fixture runner, we instead place a\n unique number of FLAG elements (each a distinct side-tab) and verify\n the side-tab count. */\n\n /* CSS custom properties — variables used by the var()-case fixtures.\n jsdom's CSSOM drops any border shorthand containing var(), which used\n to make every side-tab built with CSS variables invisible to the\n detector. These cases regression-test the fallback pass that parses\n border shorthands directly off the rule (not the computed style). */\n :root {\n --brand: #87a8ff;\n --warn: #8a6a2f;\n --terracotta: #aa674d;\n --line: #e5e7eb; /* neutral gray — must NOT trigger */\n --rule: #f3f4f6; /* near-white — must NOT trigger */\n }\n\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; background: #fafafa; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1120px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { padding: 12px 16px; margin-bottom: 16px; }\n .case h3 { font-size: 14px; margin: 0 0 4px; }\n .case p { font-size: 13px; margin: 0; color: #64748b; }\n\n /* ── FLAG cases: colored side-tab borders using modern color formats ── */\n\n /* 1: oklch border-left + border-radius (the canonical real-page bug) */\n #flag-oklch-1 {\n width: 400px;\n background: oklch(100% 0 0);\n border-radius: 4px;\n border-left: 3px solid oklch(65% 0.12 250);\n }\n\n /* 2: oklch mixed — neutral 1px border all around + colored 4px left +\n border-radius (mirrors .medication-card from the reproducer) */\n #flag-oklch-2 {\n width: 400px;\n background: oklch(100% 0 0);\n border: 1px solid oklch(80% 0.05 250);\n border-left: 4px solid oklch(75% 0.15 45);\n border-radius: 4px;\n }\n\n /* 3: oklch alert pattern — colored 4px border-left + border-radius */\n #flag-oklch-3 {\n width: 400px;\n background: oklch(98% 0.01 60);\n border-left: 4px solid oklch(75% 0.18 45);\n border-radius: 4px;\n }\n\n /* 4: oklab border-left + border-radius */\n #flag-oklab-1 {\n width: 400px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid oklab(60% 0.1 0.15);\n }\n\n /* 5: lch border-left + border-radius */\n #flag-lch-1 {\n width: 400px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid lch(55% 60 250);\n }\n\n /* 6: lab border-left + border-radius */\n #flag-lab-1 {\n width: 400px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid lab(50% 40 -30);\n }\n\n /* 7: card-shaped <label> with colored oklch side border + radius\n (the checklist-item pattern from preop-portal reproducer) */\n label#flag-label-oklch {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 400px;\n padding: 16px;\n background: oklch(100% 0 0);\n border-radius: 4px;\n border-left: 3px solid oklch(65% 0.12 250);\n cursor: pointer;\n }\n\n /* 8: card-shaped <label> with colored rgb side border + radius —\n proves the fix is not oklch-specific */\n label#flag-label-rgb {\n display: block;\n width: 400px;\n padding: 16px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid #3b82f6;\n cursor: pointer;\n }\n\n /* 9: CSS variable in shorthand — the canonical real-page pattern from\n evals (e.g. 09-physics-study: border-left:8px solid var(--brand-2)).\n jsdom silently drops this entire declaration, so the computed-style\n path used to miss it. */\n #flag-var-shorthand {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 5px solid var(--brand);\n }\n\n /* 10: CSS variable + neutral 1px all-around border — mirrors the\n medication-card pattern with a colored accent on the left. */\n #flag-var-mixed {\n width: 400px;\n background: #ffffff;\n border: 1px solid var(--line);\n border-left: 4px solid var(--warn);\n border-radius: 4px;\n }\n\n /* 11: CSS variable shorthand, right side. Ensures the fallback works\n for both inline axes, not just border-left. */\n #flag-var-right {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-right: 4px solid var(--terracotta);\n }\n\n /* 12: card-shaped <label> with var() side border + radius —\n the checklist-row shape, built with tokens. */\n label#flag-label-var {\n display: block;\n width: 400px;\n padding: 16px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid var(--brand);\n cursor: pointer;\n }\n\n /* ── PASS cases: legitimate or neutral borders, must NOT fire ── */\n\n /* 1: oklch chroma ~0 — true neutral gray border should not fire */\n #pass-oklch-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid oklch(80% 0 0);\n }\n\n /* 2: oklch low chroma (0.01) — still perceptually neutral */\n #pass-oklch-nearneutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid oklch(75% 0.01 250);\n }\n\n /* 3: oklch colored border all around (not one-sided) — no side-tab */\n #pass-oklch-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid oklch(65% 0.12 250);\n border-radius: 4px;\n }\n\n /* 4: oklch colored 1px border-left (too thin to qualify) */\n #pass-oklch-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid oklch(65% 0.12 250);\n }\n\n /* 5: lab neutral (chroma near zero) — must not fire */\n #pass-lab-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid lab(50% 0 0);\n }\n\n /* 6: lch neutral (chroma 0) */\n #pass-lch-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid lch(50% 0 0);\n }\n\n /* 7: plain inline form label — no border, no padding, no radius.\n Must NOT be flagged for anything. */\n label#pass-label-plain {\n font-size: 14px;\n font-weight: 500;\n color: #374151;\n }\n\n /* 8: form label with a small neutral gray left border — neutral color\n should not fire the colored side-tab rule. */\n label#pass-label-neutral-border {\n display: block;\n width: 400px;\n padding: 8px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid #e5e7eb;\n }\n\n /* 9: inline label inside a form row — default inline layout,\n no borders, must not fire. */\n label#pass-label-inline {\n font-size: 13px;\n color: #6b7280;\n margin-right: 8px;\n }\n\n /* 10: label with 1px colored left border — too thin to qualify\n (matches the existing 1px thin rule for divs). */\n label#pass-label-thin {\n display: block;\n width: 400px;\n padding: 8px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid #3b82f6;\n }\n\n /* 11: CSS variable resolving to a neutral gray — must NOT fire,\n even though the border shorthand contains var(). */\n #pass-var-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid var(--line);\n }\n\n /* 12: thin (1px) var-based left border — under the side-tab width\n threshold even when resolved. */\n #pass-var-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid var(--brand);\n }\n\n /* 13: var-based uniform border on all four sides. Not a side-tab. */\n #pass-var-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid var(--brand);\n border-radius: 4px;\n }\n\n /* 14: neutral 1px oklch right divider — context-bar hairline, not a side-tab. */\n #pass-oklch-neutral-right-divider {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-right: 1px solid oklch(92% 0 0 / 0.12);\n }\n ","classText":"grid\ncol\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncol\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Motion Anti-Patterns — Should Flag vs Should Pass</title>\n <style>\n /* ─── Two-column fixture convention ─────────────────────────────\n Left column = should flag. Right column = should pass.\n Tests assert (a) every flag-column rule fires and (b) the total\n finding count matches the number of flag cases (no false\n positives leaking from the pass column).\n ──────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .demo { padding: 14px 16px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 10px; }\n .demo h4 { font-weight: 600; font-size: 13px; margin: 0; }\n .demo p { font-size: 12px; color: #6b7280; margin: 4px 0 0; }\n\n /* ── FLAG: bounce / elastic easing ── */\n @keyframes bounce-keyframe {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n .bounce-animation { animation: bounce-keyframe 1s infinite; }\n .elastic-transition { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }\n\n /* ── FLAG: layout property transitions ── */\n .width-transition { transition: width 0.3s ease; }\n .height-transition { transition: height 0.4s ease-out; }\n .padding-transition { transition: padding 0.2s linear; }\n .margin-transition { transition: margin 0.3s ease-in; }\n .max-height-transition { transition: max-height 0.5s ease; }\n .multi-layout-transition { transition: width 0.3s ease, height 0.3s ease; }\n .mixed-transition { transition: width 0.3s ease, opacity 0.3s ease; }\n .transition-property-width { transition-property: width; transition-duration: 0.3s; }\n\n /* ── PASS: good easing ── */\n @keyframes fade-in-keyframe {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .fade-in-good { animation: fade-in-keyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1); }\n .ease-out-quart { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }\n .ease-out-expo { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* ── PASS: safe transitions ── */\n .transform-transition { transition: transform 0.3s ease-out; }\n .opacity-transition { transition: opacity 0.2s ease; }\n .color-transition { transition: color 0.15s ease, background-color 0.15s ease; }\n .shadow-transition { transition: box-shadow 0.2s ease; }\n .all-transition { transition: all 0.3s ease; }\n .multi-safe-transition { transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease; }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>Bounce / elastic easing</h3>\n <div class=\"demo bounce-animation\">\n <h4>CSS bounce animation</h4>\n <p>animation: bounce 1s infinite</p>\n </div>\n <div class=\"demo elastic-transition\">\n <h4>Elastic cubic-bezier</h4>\n <p>cubic-bezier(0.68, -0.55, 0.265, 1.55)</p>\n </div>\n\n <h3>Layout property transitions</h3>\n <div class=\"demo width-transition\">\n <h4>transition: width</h4>\n <p>Animating width causes layout thrash.</p>\n </div>\n <div class=\"demo height-transition\">\n <h4>transition: height</h4>\n <p>Animating height causes layout thrash.</p>\n </div>\n <div class=\"demo padding-transition\">\n <h4>transition: padding</h4>\n <p>Animating padding causes layout thrash.</p>\n </div>\n <div class=\"demo margin-transition\">\n <h4>transition: margin</h4>\n <p>Animating margin causes layout thrash.</p>\n </div>\n <div class=\"demo max-height-transition\">\n <h4>transition: max-height</h4>\n <p>Use grid-template-rows instead.</p>\n </div>\n <div class=\"demo multi-layout-transition\">\n <h4>transition: width, height</h4>\n <p>Multiple layout properties.</p>\n </div>\n <div class=\"demo mixed-transition\">\n <h4>transition: width, opacity</h4>\n <p>Layout property mixed with OK property.</p>\n </div>\n <div class=\"demo transition-property-width\">\n <h4>transition-property: width</h4>\n <p>Longhand form.</p>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>Good easing</h3>\n <div class=\"demo fade-in-good\">\n <h4>Smooth fade in</h4>\n <p>animation: fadeIn with exponential ease-out</p>\n </div>\n <div class=\"demo ease-out-quart\">\n <h4>Ease-out quart</h4>\n <p>cubic-bezier(0.25, 1, 0.5, 1) — smooth deceleration</p>\n </div>\n <div class=\"demo ease-out-expo\">\n <h4>Ease-out expo</h4>\n <p>cubic-bezier(0.16, 1, 0.3, 1) — natural feel</p>\n </div>\n\n <h3>Safe transitions (transform / opacity / color only)</h3>\n <div class=\"demo transform-transition\">\n <h4>transition: transform</h4>\n <p>Transform is GPU-accelerated and safe.</p>\n </div>\n <div class=\"demo opacity-transition\">\n <h4>transition: opacity</h4>\n <p>Opacity is GPU-accelerated and safe.</p>\n </div>\n <div class=\"demo color-transition\">\n <h4>transition: color, background-color</h4>\n <p>Color transitions are paint-only, no layout.</p>\n </div>\n <div class=\"demo shadow-transition\">\n <h4>transition: box-shadow</h4>\n <p>Shadow transitions are paint-only.</p>\n </div>\n <div class=\"demo all-transition\">\n <h4>transition: all</h4>\n <p>Too common to flag — usually paired with transform/opacity.</p>\n </div>\n <div class=\"demo multi-safe-transition\">\n <h4>transition: transform, opacity, box-shadow</h4>\n <p>Multiple safe properties combined.</p>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* ─── Two-column fixture convention ─────────────────────────────\n Left column = should flag. Right column = should pass.\n Tests assert (a) every flag-column rule fires and (b) the total\n finding count matches the number of flag cases (no false\n positives leaking from the pass column).\n ──────────────────────────────────────────────────────────── */\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .demo { padding: 14px 16px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 10px; }\n .demo h4 { font-weight: 600; font-size: 13px; margin: 0; }\n .demo p { font-size: 12px; color: #6b7280; margin: 4px 0 0; }\n\n /* ── FLAG: bounce / elastic easing ── */\n @keyframes bounce-keyframe {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n .bounce-animation { animation: bounce-keyframe 1s infinite; }\n .elastic-transition { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }\n\n /* ── FLAG: layout property transitions ── */\n .width-transition { transition: width 0.3s ease; }\n .height-transition { transition: height 0.4s ease-out; }\n .padding-transition { transition: padding 0.2s linear; }\n .margin-transition { transition: margin 0.3s ease-in; }\n .max-height-transition { transition: max-height 0.5s ease; }\n .multi-layout-transition { transition: width 0.3s ease, height 0.3s ease; }\n .mixed-transition { transition: width 0.3s ease, opacity 0.3s ease; }\n .transition-property-width { transition-property: width; transition-duration: 0.3s; }\n\n /* ── PASS: good easing ── */\n @keyframes fade-in-keyframe {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .fade-in-good { animation: fade-in-keyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1); }\n .ease-out-quart { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }\n .ease-out-expo { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* ── PASS: safe transitions ── */\n .transform-transition { transition: transform 0.3s ease-out; }\n .opacity-transition { transition: opacity 0.2s ease; }\n .color-transition { transition: color 0.15s ease, background-color 0.15s ease; }\n .shadow-transition { transition: box-shadow 0.2s ease; }\n .all-transition { transition: all 0.3s ease; }\n .multi-safe-transition { transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease; }\n ","classText":"grid\ncol\ndemo bounce-animation\ndemo elastic-transition\ndemo width-transition\ndemo height-transition\ndemo padding-transition\ndemo margin-transition\ndemo max-height-transition\ndemo multi-layout-transition\ndemo mixed-transition\ndemo transition-property-width\ncol\ndemo fade-in-good\ndemo ease-out-quart\ndemo ease-out-expo\ndemo transform-transition\ndemo opacity-transition\ndemo color-transition\ndemo shadow-transition\ndemo all-transition\ndemo multi-safe-transition"}],"result":[{"id":"bounce-easing","snippet":"animation: bounce-keyframe","selector":".bounce-animation"},{"id":"bounce-easing","snippet":"cubic-bezier(0.68, -0.55, 0.265, 1.55)","selector":".elastic-transition"},{"id":"layout-transition","snippet":"transition: width"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Side-Tab with CSS Named Colors (purple/rebeccapurple/crimson/teal)</title>\n <style>\n /* Two-column fixture: left col = should-flag, right col = should-pass.\n Regression for issue #359: `border-left: 4px solid purple` in a .html\n file never fired side-tab because the static cascade's shorthand color\n extraction only recognized 9 named colors — every other spec name\n (purple, rebeccapurple, crimson, teal, ...) was dropped from the\n shorthand, leaving the side at the default black, which reads as\n neutral and silently skips the check. The same declaration in a .css\n file was flagged by the regex engine, so the two engines disagreed. */\n\n :root {\n --accent: orange; /* named color behind a var() — must resolve and flag */\n }\n\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; background: #fafafa; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1120px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { padding: 12px 16px; margin-bottom: 16px; }\n .case h3 { font-size: 14px; margin: 0 0 4px; }\n .case p { font-size: 13px; margin: 0; color: #64748b; }\n\n /* ── FLAG cases: colored side-tab borders using CSS named colors ── */\n\n /* 1: the exact reproducer from issue #359 — named purple in a <style>\n rule with background + padding + radius */\n #flag-named-purple {\n width: 400px;\n background: #f6f6f6;\n padding: 16px;\n border-left: 4px solid purple;\n border-radius: 8px;\n }\n\n /* 2: rebeccapurple — a longer name that contains another color name\n (\"purple\") as a substring; must match whole-token. Width 5px so the\n finding snippet is unique to this case. */\n #flag-named-rebecca {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 5px solid rebeccapurple;\n }\n\n /* 3: horizontal stripe variant — named crimson riding the top edge */\n #flag-named-crimson-top {\n width: 400px;\n background: #ffffff;\n border-top: 4px solid crimson;\n }\n\n /* 4: named teal, 3px, no radius — the bare w >= 3 arm */\n #flag-named-teal {\n width: 400px;\n background: #ffffff;\n border-left: 3px solid teal;\n }\n\n /* 5: named color behind a var() in the shorthand. Width 6px so the\n finding snippet is unique to this case. */\n #flag-named-var {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 6px solid var(--accent);\n }\n\n /* ── PASS cases: neutral named colors and non-side-tab shapes ── */\n\n /* 1: dimgray — chromatic-looking name, neutral value; must NOT fire */\n #pass-named-dimgray {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 4px solid dimgray;\n }\n\n /* 2: gainsboro — light neutral named color */\n #pass-named-gainsboro {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid gainsboro;\n }\n\n /* 3: named black side border — neutral, not a colored stripe */\n #pass-named-black {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 4px solid black;\n }\n\n /* 4: 1px named purple — too thin to qualify */\n #pass-named-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid purple;\n }\n\n /* 5: uniform named purple border on all four sides — not a side-tab */\n #pass-named-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid purple;\n border-radius: 4px;\n }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n <div class=\"case\" id=\"flag-named-purple\"><h3>named purple</h3><p>border-left 4px solid purple + radius</p></div>\n <div class=\"case\" id=\"flag-named-rebecca\"><h3>rebeccapurple</h3><p>border-left 4px + radius</p></div>\n <div class=\"case\" id=\"flag-named-crimson-top\"><h3>crimson top stripe</h3><p>border-top 4px, horizontal variant</p></div>\n <div class=\"case\" id=\"flag-named-teal\"><h3>named teal</h3><p>border-left 3px, no radius</p></div>\n <div class=\"case\" id=\"flag-named-var\"><h3>var() to named</h3><p>border-left 4px solid var(--accent)</p></div>\n <div class=\"case\" style=\"width: 400px; background: #ffffff; border-left: 7px solid purple\">\n <h3>inline named purple</h3><p>style attribute, issue #359 case (a); width 7px keeps the snippet unique</p>\n </div>\n </div>\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n <div class=\"case\" id=\"pass-named-dimgray\"><h3>dimgray</h3><p>neutral named color</p></div>\n <div class=\"case\" id=\"pass-named-gainsboro\"><h3>gainsboro</h3><p>light neutral named color</p></div>\n <div class=\"case\" id=\"pass-named-black\"><h3>named black</h3><p>neutral side border</p></div>\n <div class=\"case\" id=\"pass-named-thin\"><h3>1px purple</h3><p>too thin to qualify</p></div>\n <div class=\"case\" id=\"pass-named-allsides\"><h3>uniform purple</h3><p>all four sides, not a stripe</p></div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n /* Two-column fixture: left col = should-flag, right col = should-pass.\n Regression for issue #359: `border-left: 4px solid purple` in a .html\n file never fired side-tab because the static cascade's shorthand color\n extraction only recognized 9 named colors — every other spec name\n (purple, rebeccapurple, crimson, teal, ...) was dropped from the\n shorthand, leaving the side at the default black, which reads as\n neutral and silently skips the check. The same declaration in a .css\n file was flagged by the regex engine, so the two engines disagreed. */\n\n :root {\n --accent: orange; /* named color behind a var() — must resolve and flag */\n }\n\n body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; background: #fafafa; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1120px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .case { padding: 12px 16px; margin-bottom: 16px; }\n .case h3 { font-size: 14px; margin: 0 0 4px; }\n .case p { font-size: 13px; margin: 0; color: #64748b; }\n\n /* ── FLAG cases: colored side-tab borders using CSS named colors ── */\n\n /* 1: the exact reproducer from issue #359 — named purple in a <style>\n rule with background + padding + radius */\n #flag-named-purple {\n width: 400px;\n background: #f6f6f6;\n padding: 16px;\n border-left: 4px solid purple;\n border-radius: 8px;\n }\n\n /* 2: rebeccapurple — a longer name that contains another color name\n (\"purple\") as a substring; must match whole-token. Width 5px so the\n finding snippet is unique to this case. */\n #flag-named-rebecca {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 5px solid rebeccapurple;\n }\n\n /* 3: horizontal stripe variant — named crimson riding the top edge */\n #flag-named-crimson-top {\n width: 400px;\n background: #ffffff;\n border-top: 4px solid crimson;\n }\n\n /* 4: named teal, 3px, no radius — the bare w >= 3 arm */\n #flag-named-teal {\n width: 400px;\n background: #ffffff;\n border-left: 3px solid teal;\n }\n\n /* 5: named color behind a var() in the shorthand. Width 6px so the\n finding snippet is unique to this case. */\n #flag-named-var {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 6px solid var(--accent);\n }\n\n /* ── PASS cases: neutral named colors and non-side-tab shapes ── */\n\n /* 1: dimgray — chromatic-looking name, neutral value; must NOT fire */\n #pass-named-dimgray {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 4px solid dimgray;\n }\n\n /* 2: gainsboro — light neutral named color */\n #pass-named-gainsboro {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid gainsboro;\n }\n\n /* 3: named black side border — neutral, not a colored stripe */\n #pass-named-black {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 4px solid black;\n }\n\n /* 4: 1px named purple — too thin to qualify */\n #pass-named-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid purple;\n }\n\n /* 5: uniform named purple border on all four sides — not a side-tab */\n #pass-named-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid purple;\n border-radius: 4px;\n }\n \nstyle=\"width: 400px; background: #ffffff; border-left: 7px solid purple\"","classText":"grid\ncol\ncase\ncase\ncase\ncase\ncase\ncase\ncol\ncase\ncase\ncase\ncase\ncase"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Nav CTA contrast construction sweep</title>\n<style>\n :root{\n --v3bg: #f0b64e;\n --v3fg: #cfd9e9;\n }\n body{ margin:0; font-family: Georgia, serif; color:#1c2430; background:#ffffff; }\n header{ display:flex; align-items:center; gap:2rem; padding:1rem 2rem; background:#12213a; }\n .nav{ display:flex; gap:1.5rem; align-items:center; }\n .nav a{ font-size:0.9rem; text-decoration:none; }\n .cta{ display:inline-block; padding:0.6em 1.1em; border-radius:6px; font-weight:600; }\n\n /* v1: solid bg + own low-contrast color, both on the button class */\n a.cta.v1{ background:#e8b84b; color:#c9d6ea; }\n\n /* v2: specificity cascade — .nav a (0,1,1) beats .v2 (0,1,0) for color */\n .nav a{ color:#b7c6de; }\n .v2{ background:#e5a93f; color:#26313f; }\n\n /* v3: var() indirection for both colors */\n a.cta.v3{ background:var(--v3bg); color:var(--v3fg); }\n\n /* v4: gradient background, low-contrast text against every stop */\n a.cta.v4{ background:linear-gradient(90deg,#f2b854,#e8a83e); color:#d3dcec; }\n\n /* v5: pseudo-element paints the surface; button itself transparent */\n a.cta.v5{ position:relative; background:transparent; color:#d0daea; }\n .v5::before{ content:\"\"; position:absolute; inset:0; border-radius:6px; background:#efb352; z-index:-1; }\n\n /* v6: color inherited from header, button only sets bg */\n header{ color:#ccd8ea; }\n .v6{ background:#eab04a; }\n\n /* v7: alpha-composited own bg over the dark header */\n a.cta.v7{ background:rgb(240 178 74 / 0.85); color:#d2dcec; }\n\n /* v8: oklch serialization for both sides */\n a.cta.v8{ background:oklch(0.82 0.15 75); color:oklch(0.80 0.05 258); }\n\n /* v9: background-image url only (no computable color) + low contrast vs header */\n a.cta.v9{ background-image:url(\"data:image/gif;base64,R0lGODlhAQABAIAAAP7uSwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==\"); color:#d5deed; }\n</style>\n</head>\n<body>\n<header>\n <span style=\"color:#f4f7fb;font-weight:700\">Acme</span>\n <nav class=\"nav\" aria-label=\"Primary\">\n <a href=\"#a\">Product</a>\n <a href=\"#b\">Docs</a>\n <a class=\"cta v1\" href=\"#s\">Start now v1</a>\n <a class=\"cta v2\" href=\"#s\">Start now v2</a>\n <a class=\"cta v3\" href=\"#s\">Start now v3</a>\n <a class=\"cta v4\" href=\"#s\">Start now v4</a>\n <a class=\"cta v5\" href=\"#s\">Start now v5</a>\n <a class=\"cta v6\" href=\"#s\">Start now v6</a>\n <a class=\"cta v7\" href=\"#s\">Start now v7</a>\n <a class=\"cta v8\" href=\"#s\">Start now v8</a>\n <a class=\"cta v9\" href=\"#s\">Start now v9</a>\n </nav>\n</header>\n<main style=\"padding:4rem 2rem; max-width:60ch;\">\n <h1 style=\"font-size:2.4rem; margin:0 0 1rem;\">A page that exists to host a header</h1>\n <p style=\"line-height:1.6;\">The paragraphs below the header keep the document honest so the\n detector treats this as a full page rather than a fragment. Nothing here should trip any rule.</p>\n <p style=\"line-height:1.6;\">Second paragraph of ordinary body copy with comfortable measure and\n line height, dark ink on paper.</p>\n</main>\n</body>\n</html>\n",{"styleText":"\n :root{\n --v3bg: #f0b64e;\n --v3fg: #cfd9e9;\n }\n body{ margin:0; font-family: Georgia, serif; color:#1c2430; background:#ffffff; }\n header{ display:flex; align-items:center; gap:2rem; padding:1rem 2rem; background:#12213a; }\n .nav{ display:flex; gap:1.5rem; align-items:center; }\n .nav a{ font-size:0.9rem; text-decoration:none; }\n .cta{ display:inline-block; padding:0.6em 1.1em; border-radius:6px; font-weight:600; }\n\n /* v1: solid bg + own low-contrast color, both on the button class */\n a.cta.v1{ background:#e8b84b; color:#c9d6ea; }\n\n /* v2: specificity cascade — .nav a (0,1,1) beats .v2 (0,1,0) for color */\n .nav a{ color:#b7c6de; }\n .v2{ background:#e5a93f; color:#26313f; }\n\n /* v3: var() indirection for both colors */\n a.cta.v3{ background:var(--v3bg); color:var(--v3fg); }\n\n /* v4: gradient background, low-contrast text against every stop */\n a.cta.v4{ background:linear-gradient(90deg,#f2b854,#e8a83e); color:#d3dcec; }\n\n /* v5: pseudo-element paints the surface; button itself transparent */\n a.cta.v5{ position:relative; background:transparent; color:#d0daea; }\n .v5::before{ content:\"\"; position:absolute; inset:0; border-radius:6px; background:#efb352; z-index:-1; }\n\n /* v6: color inherited from header, button only sets bg */\n header{ color:#ccd8ea; }\n .v6{ background:#eab04a; }\n\n /* v7: alpha-composited own bg over the dark header */\n a.cta.v7{ background:rgb(240 178 74 / 0.85); color:#d2dcec; }\n\n /* v8: oklch serialization for both sides */\n a.cta.v8{ background:oklch(0.82 0.15 75); color:oklch(0.80 0.05 258); }\n\n /* v9: background-image url only (no computable color) + low contrast vs header */\n a.cta.v9{ background-image:url(\"data:image/gif;base64,R0lGODlhAQABAIAAAP7uSwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==\"); color:#d5deed; }\n\nstyle=\"color:#f4f7fb;font-weight:700\"\nstyle=\"padding:4rem 2rem; max-width:60ch;\"\nstyle=\"font-size:2.4rem; margin:0 0 1rem;\"\nstyle=\"line-height:1.6;\"\nstyle=\"line-height:1.6;\"","classText":"nav\ncta v1\ncta v2\ncta v3\ncta v4\ncta v5\ncta v6\ncta v7\ncta v8\ncta v9"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<!--\n Regression fixture for issue #408: tiny-text / undersized-ui-text must only\n measure rendered text. On sites that set `html { font-size: 62.5% }` the root\n computes to 10px, so every element that inherits the root and carries text\n content — including <script>, <style>, <title>, <noscript>, and display:none /\n visibility:hidden blocks — reports a 10px computed size. Their JS / CSS /\n JSON-LD text satisfies hasDirectText, so before the fix they produced dozens\n of phantom \"10px body text\" findings on every Shopify page.\n\n Explicit pixel sizes throughout because jsdom does no layout.\n-->\n<html style=\"font-size: 10px\">\n<head>\n<meta charset=\"utf-8\">\n<!-- SHOULD PASS: a long <title> inherits the 10px root, but nothing renders it. -->\n<title>This is a fairly long document title that easily exceeds twenty characters</title>\n<!-- SHOULD PASS: stylesheet text is never painted. -->\n<style>\n /* This CSS comment is deliberately longer than twenty characters so the style\n element's text node clears the hasDirectText / textLen > 20 gate. */\n body { font-size: 10px; font-family: system-ui, sans-serif; }\n .rendered-body { font-size: 10px; }\n .rendered-nav-link { font-size: 9px; }\n .none-block { display: none; font-size: 10px; }\n .hidden-block { visibility: hidden; font-size: 10px; }\n</style>\n<!-- SHOULD PASS: script payload text is never painted. -->\n<script>window.__ANALYTICS__ = { id: 1, ts: 0 }; console.log(\"an analytics payload string that is clearly longer than twenty characters\");</script>\n<!-- SHOULD PASS: JSON-LD schema block, a Shopify staple. -->\n<script type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"Product\",\"name\":\"A product name long enough to exceed twenty characters\"}</script>\n<!-- SHOULD PASS: noscript fallback prose is only shown without JS; still non-rendered here. -->\n<noscript>Please enable JavaScript in your browser to view this page content correctly.</noscript>\n</head>\n<body>\n\n<!-- SHOULD PASS: display:none block, its text is never painted. -->\n<div class=\"none-block\">Hidden display-none block of body text long enough to exceed twenty characters.</div>\n\n<!-- SHOULD PASS: visibility:hidden paragraph, its text is never painted. -->\n<p class=\"hidden-block\">Invisible visibility-hidden paragraph copy that is longer than the twenty char gate.</p>\n\n<!-- SHOULD FLAG (tiny-text): genuinely rendered body copy at 10px. -->\n<p class=\"rendered-body\">This is real rendered body copy at 10px that is definitely long enough to flag.</p>\n\n<!-- SHOULD FLAG (undersized-ui-text): genuinely rendered interactive text at 9px. -->\n<nav aria-label=\"primary\"><a href=\"/docs\" class=\"rendered-nav-link\">Rendered Nav Link</a></nav>\n\n</body>\n</html>\n",{"styleText":"\n /* This CSS comment is deliberately longer than twenty characters so the style\n element's text node clears the hasDirectText / textLen > 20 gate. */\n body { font-size: 10px; font-family: system-ui, sans-serif; }\n .rendered-body { font-size: 10px; }\n .rendered-nav-link { font-size: 9px; }\n .none-block { display: none; font-size: 10px; }\n .hidden-block { visibility: hidden; font-size: 10px; }\n\nstyle=\"font-size: 10px\"","classText":"none-block\nhidden-block\nrendered-body\nrendered-nav-link"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Numbered Section Labels Fixture</title>\n <style>\n body {\n font-family: Georgia, serif;\n font-size: 16px;\n margin: 0;\n padding: 40px;\n background: #ffffff;\n color: #222222;\n }\n .column { width: 520px; padding: 20px; }\n h2 { font-size: 28px; margin: 0 0 12px; }\n h3 { font-size: 22px; margin: 0 0 10px; }\n section { margin-bottom: 48px; }\n\n /* ── flag column styles ── */\n .sec-index {\n font-family: monospace;\n font-size: 11px;\n font-weight: 700;\n color: #b45309;\n display: block;\n margin-bottom: 8px;\n }\n .sec-index-micro {\n font-family: monospace;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n color: #b45309;\n display: block;\n margin-bottom: 8px;\n }\n\n /* ── pass column styles ── */\n .big-index {\n font-size: 16px;\n font-weight: 700;\n font-family: monospace;\n display: block;\n }\n .plain-note {\n font-size: 12px;\n font-weight: 400;\n letter-spacing: 0;\n color: #666666;\n display: block;\n }\n .step-label {\n font-family: monospace;\n font-size: 11px;\n font-weight: 700;\n display: block;\n }\n .card {\n border: 1px solid #d4d4d4;\n border-radius: 8px;\n padding: 16px;\n }\n </style>\n</head>\n<body>\n\n <!-- ══ SHOULD FLAG: tiny numeric index labels repeated across sections ══ -->\n <div class=\"column\">\n\n <section>\n <span class=\"sec-index\">01</span>\n <h2>Alpha ships first</h2>\n <p>Direct previous-sibling label: tiny, mono, bold, zero-padded index.</p>\n </section>\n\n <section>\n <span class=\"sec-index\">02</span>\n <h2>Beta earns trust</h2>\n <p>Second section repeating the same index scaffold.</p>\n </section>\n\n <section>\n <span class=\"sec-index\">03</span>\n <div>\n <h2>Gamma holds the line</h2>\n <p>Label precedes the wrapper; the heading leads the wrapper.</p>\n </div>\n </section>\n\n <section>\n <span class=\"sec-index-micro\">04 / ROLLOUT</span>\n <h2>Delta closes the loop</h2>\n <p>Index joined to a tracked micro-label by a separator glyph.</p>\n </section>\n\n </div>\n\n <!-- ══ SHOULD PASS ══ -->\n <div class=\"column\">\n\n <section>\n <span class=\"big-index\">05</span>\n <h2>Epsilon reads large</h2>\n <p>16px index is a deliberate display device, not a micro label.</p>\n </section>\n\n <section>\n <span class=\"plain-note\">12 · minute read</span>\n <h2>Zeta stays plain</h2>\n <p>Parses as an index but carries no micro-label styling: regular weight, neutral color, no tracking, serif body face.</p>\n </section>\n\n <section>\n <span class=\"sec-index\">Step 6</span>\n <h2>Eta walks steps</h2>\n <p>Word-first label is not a numeric index.</p>\n </section>\n\n <section>\n <span class=\"sec-index\">7</span>\n <h2>Theta counts casually</h2>\n <p>A bare unpadded single digit is ordinary list numbering.</p>\n </section>\n\n <ol>\n <li>\n <span class=\"step-label\">08</span>\n <h3>Iota lives in a list</h3>\n </li>\n <li>\n <span class=\"step-label\">09</span>\n <h3>Kappa lives in a list too</h3>\n </li>\n </ol>\n\n <article class=\"card\">\n <span class=\"sec-index\">10</span>\n <h3>Lambda sits in a card</h3>\n <p>Per-card indices are item numbering, not section scaffolding.</p>\n </article>\n\n <nav aria-label=\"Progress\">\n <span class=\"sec-index\">11</span>\n <h3>Mu tracks progress</h3>\n </nav>\n\n </div>\n\n</body>\n</html>\n",{"styleText":"\n body {\n font-family: Georgia, serif;\n font-size: 16px;\n margin: 0;\n padding: 40px;\n background: #ffffff;\n color: #222222;\n }\n .column { width: 520px; padding: 20px; }\n h2 { font-size: 28px; margin: 0 0 12px; }\n h3 { font-size: 22px; margin: 0 0 10px; }\n section { margin-bottom: 48px; }\n\n /* ── flag column styles ── */\n .sec-index {\n font-family: monospace;\n font-size: 11px;\n font-weight: 700;\n color: #b45309;\n display: block;\n margin-bottom: 8px;\n }\n .sec-index-micro {\n font-family: monospace;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n color: #b45309;\n display: block;\n margin-bottom: 8px;\n }\n\n /* ── pass column styles ── */\n .big-index {\n font-size: 16px;\n font-weight: 700;\n font-family: monospace;\n display: block;\n }\n .plain-note {\n font-size: 12px;\n font-weight: 400;\n letter-spacing: 0;\n color: #666666;\n display: block;\n }\n .step-label {\n font-family: monospace;\n font-size: 11px;\n font-weight: 700;\n display: block;\n }\n .card {\n border: 1px solid #d4d4d4;\n border-radius: 8px;\n padding: 16px;\n }\n ","classText":"column\nsec-index\nsec-index\nsec-index\nsec-index-micro\ncolumn\nbig-index\nplain-note\nsec-index\nsec-index\nstep-label\nstep-label\ncard\nsec-index\nsec-index"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Numbered section marker fixture</title>\n <style>\n .fixture-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n }\n .case {\n margin: 0 0 18px;\n padding: 16px;\n border: 1px solid #d7d0c2;\n border-radius: 8px;\n }\n .marker {\n display: block;\n font: 700 12px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #7c5c00;\n }\n .code-like::before {\n content: \"01 02 03\";\n }\n </style>\n</head>\n<body>\n <main class=\"fixture-grid\">\n <section aria-labelledby=\"flag-title\">\n <h1 id=\"flag-title\">Should flag</h1>\n <article class=\"case\">\n <span class=\"marker\">01</span>\n <h2>Strategy</h2>\n </article>\n <article class=\"case\">\n <span class=\"marker\">02</span>\n <h2>Prototype</h2>\n </article>\n <article class=\"case\">\n <span class=\"marker\">03</span>\n <h2>Launch</h2>\n </article>\n <article class=\"case\">\n <span class=\"marker\">04</span>\n <h2>Measure</h2>\n </article>\n </section>\n\n <section aria-labelledby=\"pass-title\">\n <h1 id=\"pass-title\">Should pass</h1>\n <article class=\"case\">\n <h2>Readable date</h2>\n <p>Updated June 14, 2026.</p>\n </article>\n <article class=\"case\">\n <h2>Statistic cards</h2>\n <p>Revenue grew 18%, margin reached 24%, and churn fell to 3%.</p>\n </article>\n <article class=\"case\">\n <h2>CSS generated content</h2>\n <p class=\"code-like\">Generated numbers in CSS should not count as body copy.</p>\n </article>\n <article class=\"case\">\n <h2>Inline SVG coordinates</h2>\n <svg width=\"120\" height=\"32\" viewBox=\"0 0 120 32\" aria-hidden=\"true\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" fill=\"none\" stroke=\"#333\" />\n </svg>\n </article>\n <article class=\"case\">\n <h2>Script constants</h2>\n <script>\n const colorStops = ['01', '02', '03', '04'];\n const luminance = 0.2126 + 0.7152 + 0.0722;\n const size = '11.5px';\n </script>\n <p>Implementation constants in script blocks are invisible.</p>\n </article>\n </section>\n </main>\n</body>\n</html>\n",{"styleText":"\n .fixture-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n }\n .case {\n margin: 0 0 18px;\n padding: 16px;\n border: 1px solid #d7d0c2;\n border-radius: 8px;\n }\n .marker {\n display: block;\n font: 700 12px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #7c5c00;\n }\n .code-like::before {\n content: \"01 02 03\";\n }\n ","classText":"fixture-grid\ncase\nmarker\ncase\nmarker\ncase\nmarker\ncase\nmarker\ncase\ncase\ncase\ncode-like\ncase\ncase"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Overlay Positioning Edge Cases</title>\n <style>\n body {\n font-family: system-ui, sans-serif;\n background: #f9fafb;\n padding: 2rem;\n max-width: 900px;\n margin: 0 auto;\n }\n h1 { font-size: 2rem; margin-bottom: 0.5rem; }\n h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }\n .scenario { margin-bottom: 2rem; padding: 1rem; border: 1px dashed #d1d5db; border-radius: 8px; }\n .scenario-label { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }\n\n /* ============================================\n 1. TRANSFORM ANCESTOR\n position:absolute overlays on body use document coords,\n but getBoundingClientRect is viewport-relative.\n Transforms on ancestors create new stacking contexts.\n ============================================ */\n .transform-container {\n transform: translateY(0);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .transform-rotate {\n transform: rotate(0deg);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .transform-scale {\n transform: scale(1);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .transform-nested-outer {\n transform: translateX(0);\n padding: 1rem;\n background: #e5e7eb;\n border-radius: 8px;\n }\n .transform-nested-inner {\n transform: translateY(0);\n padding: 1rem;\n background: #d1d5db;\n border-radius: 8px;\n }\n\n /* ============================================\n 2. CLOSED <details>\n Elements inside collapsed details may report\n a bounding rect but aren't visually present.\n ============================================ */\n details { margin-bottom: 1rem; }\n summary { cursor: pointer; font-weight: 600; }\n\n /* ============================================\n 3. STICKY / FIXED POSITIONING\n Sticky elements change their containing block\n behavior during scroll.\n ============================================ */\n .sticky-container {\n height: 200px;\n overflow-y: auto;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n }\n .sticky-header {\n position: sticky;\n top: 0;\n background: #1f2937;\n color: white;\n padding: 0.5rem 1rem;\n z-index: 10;\n }\n .sticky-content {\n padding: 1rem;\n }\n\n /* ============================================\n 4. OVERFLOW HIDDEN\n Elements that extend beyond an overflow:hidden\n parent are visually clipped but still in the DOM.\n ============================================ */\n .overflow-hidden-container {\n overflow: hidden;\n height: 60px;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n padding: 0.5rem 1rem;\n }\n\n /* ============================================\n 5. ABSOLUTE / RELATIVE POSITIONING\n Elements that are offset from their normal flow\n position via top/left.\n ============================================ */\n .relative-offset {\n position: relative;\n top: 20px;\n left: 40px;\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .absolute-container {\n position: relative;\n height: 120px;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .absolute-child {\n position: absolute;\n bottom: 10px;\n right: 10px;\n }\n\n /* ============================================\n 6. FLEXBOX / GRID CENTERING\n Elements centered via flex/grid may have\n unexpected positions vs. document flow.\n ============================================ */\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 120px;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .grid-center {\n display: grid;\n place-items: center;\n height: 120px;\n background: #f3f4f6;\n border-radius: 8px;\n }\n\n /* ============================================\n 7. WILL-CHANGE / CONTAIN / FILTER\n These CSS properties create new containing\n blocks, similar to transforms.\n ============================================ */\n .will-change-container {\n will-change: transform;\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .contain-container {\n contain: layout;\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .filter-container {\n filter: brightness(1);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .backdrop-filter-container {\n backdrop-filter: blur(0px);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n\n /* ============================================\n 8. MARGIN COLLAPSE / NEGATIVE MARGINS\n Elements with collapsed or negative margins\n can shift from expected position.\n ============================================ */\n .negative-margin-container {\n padding: 2rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .negative-margin-child {\n margin-top: -1rem;\n margin-left: -1rem;\n }\n\n /* ============================================\n Anti-pattern triggers (tiny-text, cramped, ai-color)\n used across scenarios.\n ============================================ */\n .tiny { font-size: 10px; color: #374151; line-height: 1.4; }\n .cramped-box { border: 1px solid #d1d5db; padding: 3px; font-size: 14px; border-radius: 4px; }\n .ai-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; }\n .side-tab-card { border-left: 4px solid #8b5cf6; padding: 1rem; background: white; border-radius: 0 8px 8px 0; }\n </style>\n</head>\n<body>\n\n<h1>Overlay Positioning Edge Cases</h1>\n<p>Each scenario places a detectable anti-pattern inside a layout context that can cause overlay misalignment.</p>\n\n<!-- ═══════════════════════════════════════════\n 1. TRANSFORM ANCESTORS\n ═══════════════════════════════════════════ -->\n<h2>1. Transform Ancestors</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">1a. translateY(0) container</div>\n <div class=\"transform-container\">\n <span class=\"tiny\">This tiny text is inside a transform: translateY(0) container. The overlay should frame this text precisely.</span>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">1b. rotate(0deg) container</div>\n <div class=\"transform-rotate\">\n <span class=\"tiny\">Tiny text inside a transform: rotate(0deg) container.</span>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">1c. scale(1) container</div>\n <div class=\"transform-scale\">\n <div class=\"cramped-box\">Cramped text inside a transform: scale(1) container.</div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">1d. Nested transforms</div>\n <div class=\"transform-nested-outer\">\n <div class=\"transform-nested-inner\">\n <span class=\"tiny\">Tiny text nested inside two levels of transformed parents.</span>\n </div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">1e. Transform + absolute child</div>\n <div class=\"transform-container\" style=\"position: relative; height: 100px;\">\n <div style=\"position: absolute; bottom: 8px; right: 8px;\">\n <span class=\"tiny\">Absolutely positioned tiny text inside transformed parent.</span>\n </div>\n </div>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 2. CLOSED <details>\n ═══════════════════════════════════════════ -->\n<h2>2. Closed Details</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">2a. Closed details with anti-pattern inside</div>\n <details>\n <summary>Click to expand (closed by default)</summary>\n <span class=\"tiny\">This tiny text is hidden inside a closed details element. No overlay should appear for it.</span>\n <div class=\"cramped-box\">Cramped text also hidden inside closed details.</div>\n </details>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">2b. Open details with anti-pattern inside</div>\n <details open>\n <summary>This details is open</summary>\n <span class=\"tiny\">This tiny text IS visible because details is open. Overlay should frame it correctly.</span>\n </details>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">2c. Nested details (outer open, inner closed)</div>\n <details open>\n <summary>Outer details (open)</summary>\n <p>Some visible content.</p>\n <details>\n <summary>Inner details (closed)</summary>\n <span class=\"tiny\">Hidden tiny text inside nested closed details.</span>\n </details>\n </details>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">2d. Transform inside closed details</div>\n <details>\n <summary>Closed with transform inside</summary>\n <div class=\"transform-container\">\n <span class=\"tiny\">Tiny text inside transform inside closed details. Double trouble.</span>\n </div>\n </details>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 3. STICKY / FIXED\n ═══════════════════════════════════════════ -->\n<h2>3. Sticky and Fixed Positioning</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">3a. Sticky header inside scrollable container</div>\n <div class=\"sticky-container\">\n <div class=\"sticky-header\">\n <span class=\"tiny\">Tiny text in a sticky header.</span>\n </div>\n <div class=\"sticky-content\">\n <p>Scroll this container to test sticky behavior.</p>\n <p>More content to enable scrolling.</p>\n <p>Even more content here.</p>\n <div class=\"cramped-box\">Cramped text below the sticky header.</div>\n <p>Additional content.</p>\n <p>More filler text.</p>\n </div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">3b. Fixed footer (stays at bottom of viewport)</div>\n <p>The fixed footer at the bottom of the page has tiny text. Its overlay should stay fixed too.</p>\n</div>\n\n<!-- Actual fixed footer -- outside scenario container so it's truly fixed -->\n<div style=\"position: fixed; bottom: 0; left: 0; right: 0; background: #1f2937; color: white; padding: 0.5rem 1rem; z-index: 50;\">\n <span class=\"tiny\">Tiny text in a fixed footer -- overlay should track this on scroll.</span>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 4. OVERFLOW HIDDEN\n ═══════════════════════════════════════════ -->\n<h2>4. Overflow Hidden</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">4a. Content clipped by overflow:hidden</div>\n <div class=\"overflow-hidden-container\">\n <p>This paragraph is visible.</p>\n <span class=\"tiny\">This tiny text is below the overflow cutoff, clipped but still in DOM.</span>\n <p>This content is also clipped away.</p>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">4b. overflow:hidden + transform ancestor</div>\n <div class=\"transform-container\">\n <div class=\"overflow-hidden-container\">\n <p>Visible inside transform + overflow.</p>\n <span class=\"tiny\">Clipped tiny text inside a transformed overflow:hidden container.</span>\n </div>\n </div>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 5. ABSOLUTE / RELATIVE OFFSETS\n ═══════════════════════════════════════════ -->\n<h2>5. Position Offsets</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">5a. Relative position with top/left offset</div>\n <div class=\"relative-offset\">\n <span class=\"tiny\">This tiny text is shifted via position:relative + top/left offset.</span>\n </div>\n <div style=\"height: 30px;\"></div><!-- spacer for the offset -->\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">5b. Absolute child in relative parent</div>\n <div class=\"absolute-container\">\n <p>Normal flow content at top.</p>\n <div class=\"absolute-child\">\n <span class=\"tiny\">Absolutely positioned tiny text at bottom-right.</span>\n </div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">5c. Negative top offset</div>\n <div style=\"padding-top: 2rem;\">\n <div style=\"position: relative; top: -1rem;\">\n <span class=\"tiny\">Tiny text pulled upward via negative top offset.</span>\n </div>\n </div>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 6. FLEX / GRID CENTERING\n ═══════════════════════════════════════════ -->\n<h2>6. Flex and Grid Centering</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">6a. Flex-centered anti-pattern</div>\n <div class=\"flex-center\">\n <span class=\"tiny\">Centered tiny text inside a flex container.</span>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">6b. Grid-centered anti-pattern</div>\n <div class=\"grid-center\">\n <div class=\"cramped-box\">Cramped text inside a grid-centered container.</div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">6c. Flex with transform</div>\n <div class=\"flex-center transform-container\">\n <button class=\"ai-btn\">AI Gradient Button in Flex + Transform</button>\n </div>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 7. WILL-CHANGE / CONTAIN / FILTER\n ═══════════════════════════════════════════ -->\n<h2>7. Containing Block Creators</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">7a. will-change: transform</div>\n <div class=\"will-change-container\">\n <span class=\"tiny\">Tiny text inside a will-change: transform container.</span>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">7b. contain: layout</div>\n <div class=\"contain-container\">\n <span class=\"tiny\">Tiny text inside a contain: layout container.</span>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">7c. filter: brightness(1)</div>\n <div class=\"filter-container\">\n <span class=\"tiny\">Tiny text inside a filter container (creates containing block).</span>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">7d. backdrop-filter</div>\n <div class=\"backdrop-filter-container\">\n <span class=\"tiny\">Tiny text inside a backdrop-filter container.</span>\n </div>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 8. NEGATIVE MARGINS\n ═══════════════════════════════════════════ -->\n<h2>8. Margin Collapse and Negative Margins</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">8a. Negative margin shifting element position</div>\n <div class=\"negative-margin-container\">\n <div class=\"negative-margin-child\">\n <span class=\"tiny\">Tiny text pulled out of its parent via negative margins.</span>\n </div>\n </div>\n</div>\n\n<!-- ═══════════════════════════════════════════\n 9. COMBINATION SCENARIOS\n ═══════════════════════════════════════════ -->\n<h2>9. Combined Edge Cases</h2>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">9a. Transform + sticky + overflow</div>\n <div class=\"transform-container\">\n <div class=\"sticky-container\">\n <div class=\"sticky-header\">\n <span class=\"tiny\">Tiny text in sticky header inside transform inside scrollable overflow.</span>\n </div>\n <div class=\"sticky-content\">\n <p>Scroll content line 1.</p>\n <p>Scroll content line 2.</p>\n <p>Scroll content line 3.</p>\n <div class=\"cramped-box\">Cramped box scrolled below sticky.</div>\n <p>Scroll content line 4.</p>\n <p>Scroll content line 5.</p>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">9b. Closed details + transform + flex</div>\n <details>\n <summary>Closed combo scenario</summary>\n <div class=\"flex-center transform-container\">\n <span class=\"tiny\">Triple-nested: closed details > flex > transform > tiny text.</span>\n </div>\n </details>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">9c. Grid + absolute + transform</div>\n <div class=\"grid-center\" style=\"position: relative; height: 150px;\">\n <div class=\"transform-container\" style=\"position: absolute; top: 10px; left: 10px; right: 10px;\">\n <span class=\"tiny\">Absolute inside grid inside transform: overlays must track all three contexts.</span>\n </div>\n <div style=\"position: absolute; bottom: 10px; right: 10px;\">\n <div class=\"cramped-box\">Absolute cramped box at bottom-right of grid.</div>\n </div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">9d. Overflow hidden + absolute breakout</div>\n <div style=\"position: relative; overflow: hidden; height: 80px; background: #f3f4f6; border-radius: 8px; padding: 1rem;\">\n <p>Visible content.</p>\n <div style=\"position: absolute; bottom: -20px; left: 0; right: 0;\">\n <span class=\"tiny\">Absolute-positioned tiny text that breaks out below overflow:hidden.</span>\n </div>\n </div>\n</div>\n\n<div class=\"scenario\">\n <div class=\"scenario-label\">9e. Side-tab card inside transform + relative offset</div>\n <div class=\"transform-container\">\n <div style=\"position: relative; left: 50px;\">\n <div class=\"side-tab-card\">\n This card has a side-tab border accent and is offset inside a transform container.\n </div>\n </div>\n </div>\n</div>\n\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body {\n font-family: system-ui, sans-serif;\n background: #f9fafb;\n padding: 2rem;\n max-width: 900px;\n margin: 0 auto;\n }\n h1 { font-size: 2rem; margin-bottom: 0.5rem; }\n h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }\n .scenario { margin-bottom: 2rem; padding: 1rem; border: 1px dashed #d1d5db; border-radius: 8px; }\n .scenario-label { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }\n\n /* ============================================\n 1. TRANSFORM ANCESTOR\n position:absolute overlays on body use document coords,\n but getBoundingClientRect is viewport-relative.\n Transforms on ancestors create new stacking contexts.\n ============================================ */\n .transform-container {\n transform: translateY(0);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .transform-rotate {\n transform: rotate(0deg);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .transform-scale {\n transform: scale(1);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .transform-nested-outer {\n transform: translateX(0);\n padding: 1rem;\n background: #e5e7eb;\n border-radius: 8px;\n }\n .transform-nested-inner {\n transform: translateY(0);\n padding: 1rem;\n background: #d1d5db;\n border-radius: 8px;\n }\n\n /* ============================================\n 2. CLOSED <details>\n Elements inside collapsed details may report\n a bounding rect but aren't visually present.\n ============================================ */\n details { margin-bottom: 1rem; }\n summary { cursor: pointer; font-weight: 600; }\n\n /* ============================================\n 3. STICKY / FIXED POSITIONING\n Sticky elements change their containing block\n behavior during scroll.\n ============================================ */\n .sticky-container {\n height: 200px;\n overflow-y: auto;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n }\n .sticky-header {\n position: sticky;\n top: 0;\n background: #1f2937;\n color: white;\n padding: 0.5rem 1rem;\n z-index: 10;\n }\n .sticky-content {\n padding: 1rem;\n }\n\n /* ============================================\n 4. OVERFLOW HIDDEN\n Elements that extend beyond an overflow:hidden\n parent are visually clipped but still in the DOM.\n ============================================ */\n .overflow-hidden-container {\n overflow: hidden;\n height: 60px;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n padding: 0.5rem 1rem;\n }\n\n /* ============================================\n 5. ABSOLUTE / RELATIVE POSITIONING\n Elements that are offset from their normal flow\n position via top/left.\n ============================================ */\n .relative-offset {\n position: relative;\n top: 20px;\n left: 40px;\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .absolute-container {\n position: relative;\n height: 120px;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .absolute-child {\n position: absolute;\n bottom: 10px;\n right: 10px;\n }\n\n /* ============================================\n 6. FLEXBOX / GRID CENTERING\n Elements centered via flex/grid may have\n unexpected positions vs. document flow.\n ============================================ */\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 120px;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .grid-center {\n display: grid;\n place-items: center;\n height: 120px;\n background: #f3f4f6;\n border-radius: 8px;\n }\n\n /* ============================================\n 7. WILL-CHANGE / CONTAIN / FILTER\n These CSS properties create new containing\n blocks, similar to transforms.\n ============================================ */\n .will-change-container {\n will-change: transform;\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .contain-container {\n contain: layout;\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .filter-container {\n filter: brightness(1);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .backdrop-filter-container {\n backdrop-filter: blur(0px);\n padding: 1rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n\n /* ============================================\n 8. MARGIN COLLAPSE / NEGATIVE MARGINS\n Elements with collapsed or negative margins\n can shift from expected position.\n ============================================ */\n .negative-margin-container {\n padding: 2rem;\n background: #f3f4f6;\n border-radius: 8px;\n }\n .negative-margin-child {\n margin-top: -1rem;\n margin-left: -1rem;\n }\n\n /* ============================================\n Anti-pattern triggers (tiny-text, cramped, ai-color)\n used across scenarios.\n ============================================ */\n .tiny { font-size: 10px; color: #374151; line-height: 1.4; }\n .cramped-box { border: 1px solid #d1d5db; padding: 3px; font-size: 14px; border-radius: 4px; }\n .ai-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; padding: 8px 16px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; }\n .side-tab-card { border-left: 4px solid #8b5cf6; padding: 1rem; background: white; border-radius: 0 8px 8px 0; }\n \nstyle=\"position: relative; height: 100px;\"\nstyle=\"position: absolute; bottom: 8px; right: 8px;\"\nstyle=\"position: fixed; bottom: 0; left: 0; right: 0; background: #1f2937; color: white; padding: 0.5rem 1rem; z-index: 50;\"\nstyle=\"height: 30px;\"\nstyle=\"padding-top: 2rem;\"\nstyle=\"position: relative; top: -1rem;\"\nstyle=\"position: relative; height: 150px;\"\nstyle=\"position: absolute; top: 10px; left: 10px; right: 10px;\"\nstyle=\"position: absolute; bottom: 10px; right: 10px;\"\nstyle=\"position: relative; overflow: hidden; height: 80px; background: #f3f4f6; border-radius: 8px; padding: 1rem;\"\nstyle=\"position: absolute; bottom: -20px; left: 0; right: 0;\"\nstyle=\"position: relative; left: 50px;\"","classText":"scenario\nscenario-label\ntransform-container\ntiny\nscenario\nscenario-label\ntransform-rotate\ntiny\nscenario\nscenario-label\ntransform-scale\ncramped-box\nscenario\nscenario-label\ntransform-nested-outer\ntransform-nested-inner\ntiny\nscenario\nscenario-label\ntransform-container\ntiny\nscenario\nscenario-label\ntiny\ncramped-box\nscenario\nscenario-label\ntiny\nscenario\nscenario-label\ntiny\nscenario\nscenario-label\ntransform-container\ntiny\nscenario\nscenario-label\nsticky-container\nsticky-header\ntiny\nsticky-content\ncramped-box\nscenario\nscenario-label\ntiny\nscenario\nscenario-label\noverflow-hidden-container\ntiny\nscenario\nscenario-label\ntransform-container\noverflow-hidden-container\ntiny\nscenario\nscenario-label\nrelative-offset\ntiny\nscenario\nscenario-label\nabsolute-container\nabsolute-child\ntiny\nscenario\nscenario-label\ntiny\nscenario\nscenario-label\nflex-center\ntiny\nscenario\nscenario-label\ngrid-center\ncramped-box\nscenario\nscenario-label\nflex-center transform-container\nai-btn\nscenario\nscenario-label\nwill-change-container\ntiny\nscenario\nscenario-label\ncontain-container\ntiny\nscenario\nscenario-label\nfilter-container\ntiny\nscenario\nscenario-label\nbackdrop-filter-container\ntiny\nscenario\nscenario-label\nnegative-margin-container\nnegative-margin-child\ntiny\nscenario\nscenario-label\ntransform-container\nsticky-container\nsticky-header\ntiny\nsticky-content\ncramped-box\nscenario\nscenario-label\nflex-center transform-container\ntiny\nscenario\nscenario-label\ngrid-center\ntransform-container\ntiny\ncramped-box\nscenario\nscenario-label\ntiny\nscenario\nscenario-label\ntransform-container\nside-tab-card"}],"result":[{"id":"ai-color-palette","snippet":"Purple/violet accent colors detected","selector":".ai-btn"}]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Oversized H1 browser fixture</title>\n <style>\n body { font-family: Georgia, serif; margin: 0; color: #1a1a1a; background: #fff; }\n main { display: grid; gap: 48px; padding: 32px; }\n h1 { margin: 0; line-height: 1.04; }\n .flag-dominating-h1 {\n max-width: 1040px;\n font-size: 104px;\n }\n .pass-contained-large-h1 {\n max-width: 1120px;\n font-size: 83px;\n }\n </style>\n</head>\n<body>\n <main>\n <h1 class=\"flag-dominating-h1\">A sweeping product headline that sprawls across the whole viewport and keeps going</h1>\n <h1 class=\"pass-contained-large-h1\">The missing design vocabulary for agents.</h1>\n </main>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: Georgia, serif; margin: 0; color: #1a1a1a; background: #fff; }\n main { display: grid; gap: 48px; padding: 32px; }\n h1 { margin: 0; line-height: 1.04; }\n .flag-dominating-h1 {\n max-width: 1040px;\n font-size: 104px;\n }\n .pass-contained-large-h1 {\n max-width: 1120px;\n font-size: 83px;\n }\n ","classText":"flag-dominating-h1\npass-contained-large-h1"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Oversized H1 fixture</title>\n <style>\n body { font-family: Georgia, serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n h1 { margin: 0 0 24px; line-height: 1.05; }\n </style>\n</head>\n<body>\n <div class=\"cols\">\n <!-- FLAG column: a long headline set at display size, dominating the viewport -->\n <section class=\"col flag\">\n <h1 style=\"font-size: 96px\">A sweeping product headline that runs on far too long to sit at this size</h1>\n <h1 style=\"font-size: 80px\">Everything your whole team needs to launch quickly and finally rest at night</h1>\n </section>\n\n <!-- PASS column: punchy short headlines at display size (a valid choice), and a long headline at a sane size -->\n <section class=\"col pass\">\n <h1 style=\"font-size: 168px\">Bold.</h1>\n <h1 style=\"font-size: 120px\">Ship faster</h1>\n <h1 style=\"font-size: 40px\">A perfectly ordinary headline that is reasonably long but set at a sane, readable size</h1>\n </section>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: Georgia, serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }\n .col { padding: 16px; }\n h1 { margin: 0 0 24px; line-height: 1.05; }\n \nstyle=\"font-size: 96px\"\nstyle=\"font-size: 80px\"\nstyle=\"font-size: 168px\"\nstyle=\"font-size: 120px\"\nstyle=\"font-size: 40px\"","classText":"cols\ncol flag\ncol pass"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html>\n<head>\n<title>Pseudo-element side stripe fixture</title>\n<style>\n :root {\n --ok: oklch(0.78 0.145 155);\n --line: rgba(0, 0, 0, 0.08);\n }\n\n /* FLAG: classic ::before accent stripe — absolute, full height, left edge,\n chromatic background resolved through a custom property. */\n .card-stripe { position: relative; border-radius: 12px; }\n .card-stripe::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 5px;\n background: var(--ok);\n }\n\n /* FLAG: right-edge variant using inset shorthand + literal color. */\n .row-stripe { position: relative; }\n .row-stripe::after {\n content: \"\";\n position: absolute;\n inset: 0 0 0 auto;\n width: 4px;\n background-color: #3b82f6;\n }\n\n /* PASS: 1px neutral hairline divider (below width threshold + neutral). */\n .col + .col::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 1px;\n background: var(--line);\n }\n\n /* PASS: neutral 4px rail (timeline spine) — chromatic gate rejects it. */\n .timeline::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 4px;\n background: rgb(210, 210, 214);\n }\n\n /* PASS: blockquote decoration is exempt in prose contexts. */\n blockquote::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 4px;\n background: #d97706;\n }\n\n /* PASS: toggle knob — offset from the edge, not a stripe. */\n .switch::before {\n content: \"\";\n position: absolute;\n left: 2px; top: 2px;\n width: 10px; height: 10px;\n border-radius: 50%;\n background: #3b82f6;\n }\n\n /* PASS: wide decorative panel, not a stripe. */\n .panel::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 40px;\n background: #3b82f6;\n }\n\n /* PASS: horizontal underline accent (not full height, not edge-anchored\n vertically). */\n .heading::after {\n content: \"\";\n position: absolute;\n left: 0; bottom: 0;\n width: 6px; height: 3px;\n background: #3b82f6;\n }\n</style>\n</head>\n<body>\n <div class=\"card-stripe\">Card with pseudo stripe</div>\n <div class=\"row-stripe\">Row with right stripe</div>\n <div class=\"col\">One</div><div class=\"col\">Two</div>\n <div class=\"timeline\">Timeline</div>\n <blockquote>Quoted text</blockquote>\n <span class=\"switch\"></span>\n <div class=\"panel\">Panel</div>\n <h2 class=\"heading\">Heading</h2>\n</body>\n</html>\n",{"styleText":"\n :root {\n --ok: oklch(0.78 0.145 155);\n --line: rgba(0, 0, 0, 0.08);\n }\n\n /* FLAG: classic ::before accent stripe — absolute, full height, left edge,\n chromatic background resolved through a custom property. */\n .card-stripe { position: relative; border-radius: 12px; }\n .card-stripe::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 5px;\n background: var(--ok);\n }\n\n /* FLAG: right-edge variant using inset shorthand + literal color. */\n .row-stripe { position: relative; }\n .row-stripe::after {\n content: \"\";\n position: absolute;\n inset: 0 0 0 auto;\n width: 4px;\n background-color: #3b82f6;\n }\n\n /* PASS: 1px neutral hairline divider (below width threshold + neutral). */\n .col + .col::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 1px;\n background: var(--line);\n }\n\n /* PASS: neutral 4px rail (timeline spine) — chromatic gate rejects it. */\n .timeline::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 4px;\n background: rgb(210, 210, 214);\n }\n\n /* PASS: blockquote decoration is exempt in prose contexts. */\n blockquote::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 4px;\n background: #d97706;\n }\n\n /* PASS: toggle knob — offset from the edge, not a stripe. */\n .switch::before {\n content: \"\";\n position: absolute;\n left: 2px; top: 2px;\n width: 10px; height: 10px;\n border-radius: 50%;\n background: #3b82f6;\n }\n\n /* PASS: wide decorative panel, not a stripe. */\n .panel::before {\n content: \"\";\n position: absolute;\n left: 0; top: 0; bottom: 0;\n width: 40px;\n background: #3b82f6;\n }\n\n /* PASS: horizontal underline accent (not full height, not edge-anchored\n vertically). */\n .heading::after {\n content: \"\";\n position: absolute;\n left: 0; bottom: 0;\n width: 6px; height: 3px;\n background: #3b82f6;\n }\n","classText":"card-stripe\nrow-stripe\ncol\ncol\ntimeline\nswitch\npanel\nheading"}],"result":[{"id":"side-tab","snippet":".card-stripe::before — absolute 5px pseudo-element stripe (left: 0)","index":287,"selector":".card-stripe::before"},{"id":"side-tab","snippet":".row-stripe::after — absolute 4px pseudo-element stripe (right: 0)","index":543,"selector":".row-stripe::after"}]}
|
||
{"args":["<!DOCTYPE html>\n<html>\n<head>\n<title>Pulsing status dot fixture</title>\n<style>\n :root { --dot: 8px; }\n\n /* FLAG: tiny circular live dot on an infinite opacity pulse. */\n .live-dot {\n width: 7px; height: 7px;\n border-radius: 50%;\n background: #22c55e;\n animation: pulse 2.4s ease-out infinite;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n /* FLAG: box-shadow ripple variant, var-sized, pill radius. */\n .status .dot {\n width: var(--dot); height: var(--dot);\n border-radius: 999px;\n background: #ef4444;\n animation: ripple 1.8s linear infinite;\n }\n @keyframes ripple {\n 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\n 100% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }\n }\n\n /* FLAG: longhand animation-name + iteration-count. */\n .beacon {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: #f59e0b;\n animation-name: pulse;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n }\n\n /* PASS: rotation-only spinner — same size class, must never flag. */\n .spinner {\n width: 14px; height: 14px;\n border-radius: 50%;\n border: 2px solid #e5e7eb;\n border-top-color: #3b82f6;\n animation: spin 0.8s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n /* PASS: named pulse but the local keyframes only rotate. */\n .fake-pulse {\n width: 8px; height: 8px;\n border-radius: 50%;\n animation: pulse-ring 1s linear infinite;\n }\n @keyframes pulse-ring { to { transform: rotate(180deg); } }\n\n /* PASS: large breathing card — not a dot. */\n .breathing-card {\n width: 240px; height: 120px;\n border-radius: 16px;\n animation: pulse 3s ease-in-out infinite;\n }\n\n /* PASS: finite attention pulse (no infinite). */\n .nudge {\n width: 8px; height: 8px;\n border-radius: 50%;\n animation: pulse 0.6s ease-out 3;\n }\n\n /* PASS: square badge, not circular. */\n .square-badge {\n width: 12px; height: 12px;\n border-radius: 2px;\n animation: pulse 2s infinite;\n }\n\n /* FLAG (error): header logo dot whose size and animation live in\n separate rule blocks, animation added inside a matching media query,\n with a reduced-motion reset that must not mask the default. */\n .rec-mark {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: #dc2626;\n }\n @media (prefers-reduced-motion: no-preference) {\n .rec-mark { animation: pulse 2.4s ease-in-out infinite; }\n }\n @media (prefers-reduced-motion: reduce) {\n .rec-mark { animation: none; }\n }\n</style>\n</head>\n<body>\n <header>\n <a href=\"#top\"><span class=\"rec-mark\"></span> Brand</a>\n </header>\n <span class=\"live-dot\"></span>\n <span class=\"status\"><i class=\"dot\"></i> Online</span>\n <span class=\"beacon\"></span>\n <span class=\"spinner\"></span>\n <span class=\"fake-pulse\"></span>\n <div class=\"breathing-card\">Card</div>\n <span class=\"nudge\"></span>\n <span class=\"square-badge\"></span>\n <!-- FLAG: Tailwind utility variant -->\n <span class=\"animate-ping w-2 h-2 rounded-full bg-emerald-500\"></span>\n <!-- PASS: Tailwind pulse on a large skeleton block -->\n <div class=\"animate-pulse rounded-md w-48 h-6 bg-gray-200\"></div>\n</body>\n</html>\n",{"styleText":"\n :root { --dot: 8px; }\n\n /* FLAG: tiny circular live dot on an infinite opacity pulse. */\n .live-dot {\n width: 7px; height: 7px;\n border-radius: 50%;\n background: #22c55e;\n animation: pulse 2.4s ease-out infinite;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n /* FLAG: box-shadow ripple variant, var-sized, pill radius. */\n .status .dot {\n width: var(--dot); height: var(--dot);\n border-radius: 999px;\n background: #ef4444;\n animation: ripple 1.8s linear infinite;\n }\n @keyframes ripple {\n 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\n 100% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }\n }\n\n /* FLAG: longhand animation-name + iteration-count. */\n .beacon {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: #f59e0b;\n animation-name: pulse;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n }\n\n /* PASS: rotation-only spinner — same size class, must never flag. */\n .spinner {\n width: 14px; height: 14px;\n border-radius: 50%;\n border: 2px solid #e5e7eb;\n border-top-color: #3b82f6;\n animation: spin 0.8s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n /* PASS: named pulse but the local keyframes only rotate. */\n .fake-pulse {\n width: 8px; height: 8px;\n border-radius: 50%;\n animation: pulse-ring 1s linear infinite;\n }\n @keyframes pulse-ring { to { transform: rotate(180deg); } }\n\n /* PASS: large breathing card — not a dot. */\n .breathing-card {\n width: 240px; height: 120px;\n border-radius: 16px;\n animation: pulse 3s ease-in-out infinite;\n }\n\n /* PASS: finite attention pulse (no infinite). */\n .nudge {\n width: 8px; height: 8px;\n border-radius: 50%;\n animation: pulse 0.6s ease-out 3;\n }\n\n /* PASS: square badge, not circular. */\n .square-badge {\n width: 12px; height: 12px;\n border-radius: 2px;\n animation: pulse 2s infinite;\n }\n\n /* FLAG (error): header logo dot whose size and animation live in\n separate rule blocks, animation added inside a matching media query,\n with a reduced-motion reset that must not mask the default. */\n .rec-mark {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: #dc2626;\n }\n @media (prefers-reduced-motion: no-preference) {\n .rec-mark { animation: pulse 2.4s ease-in-out infinite; }\n }\n @media (prefers-reduced-motion: reduce) {\n .rec-mark { animation: none; }\n }\n","classText":"rec-mark\nlive-dot\nstatus\ndot\nbeacon\nspinner\nfake-pulse\nbreathing-card\nnudge\nsquare-badge\nanimate-ping w-2 h-2 rounded-full bg-emerald-500\nanimate-pulse rounded-md w-48 h-6 bg-gray-200"}],"result":[{"id":"pulsing-dot","snippet":".live-dot — 7x7px dot with infinite \"pulse\" animation","selector":".live-dot"},{"id":"pulsing-dot","snippet":".status .dot — 8x8px dot with infinite \"ripple\" animation","selector":".status .dot"},{"id":"pulsing-dot","snippet":".beacon — 10x10px dot with infinite \"pulse\" animation","selector":".beacon"},{"id":"pulsing-dot","snippet":".rec-mark — 10x10px dot with infinite \"pulse\" animation in header/nav","selector":".rec-mark","severity":"error"},{"id":"pulsing-dot","snippet":"animate-ping on tiny rounded-full element"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Quality (Typography & Readability) — Should Flag vs Should Pass</title>\n <style>\n /* Two-column fixture: left = should flag, right = should pass.\n Covers the typography-quality rules that need real browser layout\n (line-length, tight-leading, tiny-text, justified-text, all-caps-body,\n wide-tracking, skipped-heading). All are browser-only — see\n tests/detect-antipatterns-browser.test.mjs for assertions. */\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.6; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .case { margin-bottom: 16px; padding: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 6px; font-style: italic; }\n\n /* ── FLAG: typography quality issues ── */\n\n /* Line length: 12px body text fits >85 chars/line in a ~528px column.\n 12px is not below the tiny-text 12px floor (rule fires at <12px). */\n .long-lines {\n font-size: 12px;\n line-height: 1.6;\n }\n\n /* Tight leading */\n .tight-leading {\n font-size: 16px;\n line-height: 1.0;\n max-width: 40em;\n }\n\n /* Tiny body text */\n .tiny-text {\n font-size: 10px;\n line-height: 1.6;\n max-width: 40em;\n }\n .tiny-text-11 {\n font-size: 11px;\n line-height: 1.6;\n max-width: 40em;\n }\n\n /* Justified text without hyphens */\n .justified-no-hyphens {\n text-align: justify;\n max-width: 30em;\n font-size: 16px;\n line-height: 1.6;\n }\n\n /* All-caps long body */\n .all-caps-body {\n text-transform: uppercase;\n font-size: 16px;\n max-width: 40em;\n line-height: 1.6;\n }\n\n /* Wide letter spacing on body */\n .wide-tracking-body {\n letter-spacing: 0.15em;\n font-size: 16px;\n max-width: 40em;\n line-height: 1.6;\n }\n\n /* ── PASS: comfortable typography ── */\n\n .good-measure {\n max-width: 65ch;\n font-size: 16px;\n line-height: 1.6;\n }\n\n .good-leading {\n font-size: 16px;\n line-height: 1.6;\n max-width: 40em;\n }\n\n .good-text-size {\n font-size: 16px;\n line-height: 1.6;\n max-width: 40em;\n }\n\n /* Justified text WITH hyphens — fine */\n .justified-with-hyphens {\n text-align: justify;\n hyphens: auto;\n -webkit-hyphens: auto;\n max-width: 30em;\n font-size: 16px;\n line-height: 1.6;\n }\n\n /* Short label in all-caps (passes — under 30 chars) */\n .label-caps {\n text-transform: uppercase;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: #475569;\n }\n\n /* Wide tracking on a short uppercase label (passes — both conditions excluded) */\n .label-tracking {\n letter-spacing: 0.15em;\n text-transform: uppercase;\n font-size: 12px;\n font-weight: 600;\n color: #475569;\n }\n\n .mock-terminal-title,\n .mock-terminal-meta,\n .mock-diff-line {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n color: #475569;\n line-height: 1.5;\n }\n .mock-terminal-title { font-size: 11px; }\n .mock-terminal-meta { font-size: 10.8px; }\n .mock-diff-line { font-size: 11.84px; }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n\n <!-- ════════════════════════════════════════════════════════════\n LEFT COLUMN: should flag\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"flag\">\n <h2>Should flag</h2>\n\n <h3>Line length too long</h3>\n <div class=\"case\">\n <span class=\"case-label\">no max-width on a paragraph</span>\n <p class=\"long-lines\">This paragraph has no max-width constraint at all, which means on a wide monitor or ultrawide display, each line of text can stretch to 150 or even 200 characters wide. Research consistently shows that line lengths beyond 75 characters significantly reduce reading speed and comprehension. The eye has to travel too far to find the beginning of the next line, causing readers to lose their place. A simple max-width of 65ch to 75ch on the paragraph or its container would fix this entirely.</p>\n </div>\n\n <h3>Tight line height</h3>\n <div class=\"case\">\n <span class=\"case-label\">line-height: 1.0</span>\n <p class=\"tight-leading\">This paragraph has a line-height of 1.0, which means the lines are touching. Multi-line body text needs breathing room between lines for readability. A line-height of 1.5 to 1.7 is generally recommended for body text.</p>\n </div>\n\n <h3>Tiny body text</h3>\n <div class=\"case\">\n <span class=\"case-label\">10px body text</span>\n <p class=\"tiny-text\">This body text is only 10px. While this might be fine for a disclaimer or legal footnote, it's too small for primary content that users need to actually read. Aim for at least 14px for body content, 16px is ideal.</p>\n </div>\n\n <h3>Justified text without hyphens</h3>\n <div class=\"case\">\n <span class=\"case-label\">text-align: justify, no hyphens: auto</span>\n <p class=\"justified-no-hyphens\">This paragraph uses text-align: justify, which forces each line to stretch to fill the full width. Without hyphenation support, this creates uneven gaps between words known as \"rivers of white space\" that flow vertically through the text. Left-aligned text is almost always more readable on the web.</p>\n </div>\n\n <h3>All-caps body text</h3>\n <div class=\"case\">\n <span class=\"case-label\">text-transform: uppercase on a long passage</span>\n <p class=\"all-caps-body\">This entire paragraph is in uppercase via text-transform. While all-caps works for short labels, headings, or navigation items, longer body text in uppercase is significantly harder to read because we lose the word shape cues that come from ascenders and descenders in mixed-case text.</p>\n </div>\n\n <h3>Wide letter spacing on body text</h3>\n <div class=\"case\">\n <span class=\"case-label\">letter-spacing: 0.15em on body text</span>\n <p class=\"wide-tracking-body\">This body text has letter-spacing: 0.15em applied to it. While subtle tracking adjustments can improve readability for headings or all-caps text, adding significant letter spacing to body text actually makes it harder to read by disrupting natural character groupings.</p>\n </div>\n\n <h3>Skipped heading levels</h3>\n <div class=\"case\">\n <span class=\"case-label\">h1 → h3 (missing h2)</span>\n <h1 style=\"font-size: 20px; margin: 0 0 4px;\">Top heading</h1>\n <h3 style=\"font-size: 16px; margin: 0;\">Skips straight to h3</h3>\n </div>\n </div>\n\n <!-- ════════════════════════════════════════════════════════════\n RIGHT COLUMN: should pass\n ═══════════════════════════════════════════════════════════ -->\n <div class=\"col\" data-col=\"pass\">\n <h2>Should pass</h2>\n\n <h3>Comfortable line length</h3>\n <div class=\"case\">\n <span class=\"case-label\">max-width: 65ch on the paragraph</span>\n <p class=\"good-measure\">This paragraph has a max-width of 65ch, keeping the line length comfortable for reading. The eye can easily track from the end of one line to the beginning of the next without losing its place.</p>\n </div>\n\n <h3>Comfortable line height</h3>\n <div class=\"case\">\n <span class=\"case-label\">line-height: 1.6</span>\n <p class=\"good-leading\">This paragraph has a line-height of 1.6, which gives multi-line text plenty of room to breathe and improves the rhythm of the page.</p>\n </div>\n\n <h3>Comfortable body text size</h3>\n <div class=\"case\">\n <span class=\"case-label\">16px body text</span>\n <p class=\"good-text-size\">This is 16px body text — the recommended baseline for comfortable reading on modern displays.</p>\n </div>\n\n <h3>Justified text with hyphens</h3>\n <div class=\"case\">\n <span class=\"case-label\">text-align: justify + hyphens: auto</span>\n <p class=\"justified-with-hyphens\">When justified text is paired with hyphens: auto, the browser can break long words across lines, eliminating the rivers of white space and making the justification look intentional rather than awkward.</p>\n </div>\n\n <h3>Short label in all-caps</h3>\n <div class=\"case\">\n <span class=\"case-label\">short label, uppercase</span>\n <span class=\"label-caps\">Featured</span>\n </div>\n\n <h3>Wide tracking on a short uppercase label</h3>\n <div class=\"case\">\n <span class=\"case-label\">letter-spacing on a short uppercase label</span>\n <span class=\"label-tracking\">Beta</span>\n </div>\n\n <h3>Proper heading hierarchy</h3>\n <div class=\"case\">\n <span class=\"case-label\">h1 → h2 → h3</span>\n <h1 style=\"font-size: 20px; margin: 0 0 4px;\">Top heading</h1>\n <h2 style=\"font-size: 18px; margin: 0 0 4px;\">Second level</h2>\n <h3 style=\"font-size: 16px; margin: 0;\">Third level</h3>\n </div>\n\n <h3>Small mockup metadata</h3>\n <div class=\"case\">\n <span class=\"case-label\">terminal/diff metadata at tiny sizes</span>\n <span class=\"mock-terminal-title\">/impeccable polish : scanning codebase</span>\n <div class=\"mock-terminal-meta\">12 files inspected · 4 visual issues queued</div>\n <div class=\"mock-diff-line\">+ Replace generic button label with action-specific copy</div>\n </div>\n </div>\n </div>\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n <!-- SVG text: Chrome reports fake scrollWidth/clientWidth on SVG content;\n the text-overflow rule must skip it (pass). -->\n <svg class=\"svg-metrics-pass\" viewBox=\"0 0 430 60\" width=\"430\" height=\"60\" role=\"img\" aria-label=\"diagram\">\n <rect x=\"6\" y=\"10\" width=\"96\" height=\"40\" rx=\"3\" fill=\"none\" stroke=\"#888\"/>\n <text x=\"54\" y=\"35\" text-anchor=\"middle\" font-size=\"13\">impeccable</text>\n </svg>\n</body>\n</html>\n",{"styleText":"\n /* Two-column fixture: left = should flag, right = should pass.\n Covers the typography-quality rules that need real browser layout\n (line-length, tight-leading, tiny-text, justified-text, all-caps-body,\n wide-tracking, skipped-heading). All are browser-only — see\n tests/detect-antipatterns-browser.test.mjs for assertions. */\n body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.6; }\n .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }\n .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }\n .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }\n .case { margin-bottom: 16px; padding: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; }\n .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 6px; font-style: italic; }\n\n /* ── FLAG: typography quality issues ── */\n\n /* Line length: 12px body text fits >85 chars/line in a ~528px column.\n 12px is not below the tiny-text 12px floor (rule fires at <12px). */\n .long-lines {\n font-size: 12px;\n line-height: 1.6;\n }\n\n /* Tight leading */\n .tight-leading {\n font-size: 16px;\n line-height: 1.0;\n max-width: 40em;\n }\n\n /* Tiny body text */\n .tiny-text {\n font-size: 10px;\n line-height: 1.6;\n max-width: 40em;\n }\n .tiny-text-11 {\n font-size: 11px;\n line-height: 1.6;\n max-width: 40em;\n }\n\n /* Justified text without hyphens */\n .justified-no-hyphens {\n text-align: justify;\n max-width: 30em;\n font-size: 16px;\n line-height: 1.6;\n }\n\n /* All-caps long body */\n .all-caps-body {\n text-transform: uppercase;\n font-size: 16px;\n max-width: 40em;\n line-height: 1.6;\n }\n\n /* Wide letter spacing on body */\n .wide-tracking-body {\n letter-spacing: 0.15em;\n font-size: 16px;\n max-width: 40em;\n line-height: 1.6;\n }\n\n /* ── PASS: comfortable typography ── */\n\n .good-measure {\n max-width: 65ch;\n font-size: 16px;\n line-height: 1.6;\n }\n\n .good-leading {\n font-size: 16px;\n line-height: 1.6;\n max-width: 40em;\n }\n\n .good-text-size {\n font-size: 16px;\n line-height: 1.6;\n max-width: 40em;\n }\n\n /* Justified text WITH hyphens — fine */\n .justified-with-hyphens {\n text-align: justify;\n hyphens: auto;\n -webkit-hyphens: auto;\n max-width: 30em;\n font-size: 16px;\n line-height: 1.6;\n }\n\n /* Short label in all-caps (passes — under 30 chars) */\n .label-caps {\n text-transform: uppercase;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: #475569;\n }\n\n /* Wide tracking on a short uppercase label (passes — both conditions excluded) */\n .label-tracking {\n letter-spacing: 0.15em;\n text-transform: uppercase;\n font-size: 12px;\n font-weight: 600;\n color: #475569;\n }\n\n .mock-terminal-title,\n .mock-terminal-meta,\n .mock-diff-line {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n color: #475569;\n line-height: 1.5;\n }\n .mock-terminal-title { font-size: 11px; }\n .mock-terminal-meta { font-size: 10.8px; }\n .mock-diff-line { font-size: 11.84px; }\n \nstyle=\"font-size: 20px; margin: 0 0 4px;\"\nstyle=\"font-size: 16px; margin: 0;\"\nstyle=\"font-size: 20px; margin: 0 0 4px;\"\nstyle=\"font-size: 18px; margin: 0 0 4px;\"\nstyle=\"font-size: 16px; margin: 0;\"","classText":"grid\ncol\ncase\ncase-label\nlong-lines\ncase\ncase-label\ntight-leading\ncase\ncase-label\ntiny-text\ncase\ncase-label\njustified-no-hyphens\ncase\ncase-label\nall-caps-body\ncase\ncase-label\nwide-tracking-body\ncase\ncase-label\ncol\ncase\ncase-label\ngood-measure\ncase\ncase-label\ngood-leading\ncase\ncase-label\ngood-text-size\ncase\ncase-label\njustified-with-hyphens\ncase\ncase-label\nlabel-caps\ncase\ncase-label\nlabel-tracking\ncase\ncase-label\ncase\ncase-label\nmock-terminal-title\nmock-terminal-meta\nmock-diff-line\nsvg-metrics-pass"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>radial-spotlight-glow fixture</title>\n<style>\n /* jsdom / static-html engine does no layout: every case declares explicit\n pixel width + height so the size gate can read them. */\n body { margin: 0; background: #0b0d13; }\n .grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; }\n .case { color: #e6e6e6; }\n\n /* ───────── SHOULD FLAG: decorative low-opacity chromatic spotlights ───────── */\n\n /* The exact declaration that evaded the detector: soft blue spotlight fading\n to transparent, painted on a large mobile hero. */\n .flag-hero-blue {\n width: 360px; height: 560px;\n background: radial-gradient(circle at 52% 38%, rgba(80,111,255,0.26), transparent 44%);\n }\n /* Violet accent wash on a full section. */\n .flag-section-violet {\n width: 900px; height: 600px;\n background-image: radial-gradient(circle, rgba(139,92,246,0.30), transparent 60%);\n }\n /* Cyan overlay-style glow (the pseudo-element overlay div reflex). */\n .flag-overlay-cyan {\n width: 760px; height: 480px;\n background: radial-gradient(ellipse at top, rgba(34,211,238,0.22), transparent 70%);\n }\n /* Single glow drawn with two low-alpha stops of one hue fading out. */\n .flag-two-stop-rose {\n width: 640px; height: 400px;\n background: radial-gradient(circle, rgba(255,90,120,0.28) 0%, rgba(255,90,120,0.12) 45%, transparent 75%);\n }\n /* Same tell written as an 8-digit hex (#506fff at alpha 0x3d ≈ 0.24). */\n .flag-hex-alpha {\n width: 700px; height: 460px;\n background: radial-gradient(circle, #506fff3d, transparent 50%);\n }\n\n /* ───────── SHOULD PASS: real backgrounds, small elements, neutrals, rich art ───────── */\n\n /* Opaque radial background — a real surface, not a glow (no transparent end). */\n .pass-opaque-bg {\n width: 800px; height: 520px;\n background: radial-gradient(circle, #1e3a8a, #0f172a);\n }\n /* Small badge: chromatic low-alpha radial glow, but tiny. */\n .pass-badge {\n width: 40px; height: 40px;\n background: radial-gradient(circle, rgba(80,111,255,0.30), transparent);\n }\n /* Avatar-scale light: the subject IS a small light, exempt by size. */\n .pass-avatar-light {\n width: 72px; height: 72px;\n background: radial-gradient(circle, rgba(255,196,64,0.35), transparent 70%);\n }\n /* Neutral near-black vignette — grayscale, not the accent-glow tell. */\n .pass-neutral-vignette {\n width: 800px; height: 520px;\n background: radial-gradient(circle, rgba(0,0,0,0.40), transparent 80%);\n }\n /* Neutral near-white vignette — grayscale, exempt. */\n .pass-white-vignette {\n width: 820px; height: 540px;\n background: radial-gradient(ellipse, rgba(255,255,255,0.35), transparent 70%);\n }\n /* Rich three-color radial composition — real color structure, opaque, no fade. */\n .pass-rich-composition {\n width: 800px; height: 520px;\n background: radial-gradient(circle, #ff0080 0%, #7928ca 45%, #0070f3 100%);\n }\n /* Rich composition that does fade out, but its color stops are opaque. */\n .pass-rich-transparent {\n width: 780px; height: 500px;\n background: radial-gradient(circle, rgba(255,0,128,0.90) 0%, rgba(121,40,202,0.85) 50%, transparent);\n }\n /* Opaque center glow (the radial-halo case, alpha ≥ 0.45) — not this rule. */\n .pass-opaque-center {\n width: 800px; height: 520px;\n background: radial-gradient(circle, rgba(80,111,255,0.85), transparent);\n }\n /* Low-alpha chromatic wash, but LINEAR, not radial. */\n .pass-linear-wash {\n width: 800px; height: 520px;\n background: linear-gradient(120deg, rgba(80,111,255,0.28), transparent 60%);\n }\n</style>\n</head>\n<body>\n <main class=\"grid\">\n <!-- should-flag column -->\n <div class=\"case flag-hero-blue\" data-name=\"Hero Spotlight Blue\"></div>\n <div class=\"case flag-section-violet\" data-name=\"Section Glow Violet\"></div>\n <div class=\"case flag-overlay-cyan\" data-name=\"Overlay Glow Cyan\"></div>\n <div class=\"case flag-two-stop-rose\" data-name=\"Two Stop Soft Glow\"></div>\n <div class=\"case flag-hex-alpha\" data-name=\"Hex Alpha Glow\"></div>\n\n <!-- should-pass column -->\n <div class=\"case pass-opaque-bg\" data-name=\"Opaque Radial Background\"></div>\n <div class=\"case pass-badge\" data-name=\"Small Accent Badge\"></div>\n <div class=\"case pass-avatar-light\" data-name=\"Avatar Glow Light\"></div>\n <div class=\"case pass-neutral-vignette\" data-name=\"Neutral Vignette\"></div>\n <div class=\"case pass-white-vignette\" data-name=\"White Vignette\"></div>\n <div class=\"case pass-rich-composition\" data-name=\"Rich Radial Composition\"></div>\n <div class=\"case pass-rich-transparent\" data-name=\"Rich Transparent Composition\"></div>\n <div class=\"case pass-opaque-center\" data-name=\"Opaque Center Glow\"></div>\n <div class=\"case pass-linear-wash\" data-name=\"Linear Gradient Wash\"></div>\n </main>\n</body>\n</html>\n",{"styleText":"\n /* jsdom / static-html engine does no layout: every case declares explicit\n pixel width + height so the size gate can read them. */\n body { margin: 0; background: #0b0d13; }\n .grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; }\n .case { color: #e6e6e6; }\n\n /* ───────── SHOULD FLAG: decorative low-opacity chromatic spotlights ───────── */\n\n /* The exact declaration that evaded the detector: soft blue spotlight fading\n to transparent, painted on a large mobile hero. */\n .flag-hero-blue {\n width: 360px; height: 560px;\n background: radial-gradient(circle at 52% 38%, rgba(80,111,255,0.26), transparent 44%);\n }\n /* Violet accent wash on a full section. */\n .flag-section-violet {\n width: 900px; height: 600px;\n background-image: radial-gradient(circle, rgba(139,92,246,0.30), transparent 60%);\n }\n /* Cyan overlay-style glow (the pseudo-element overlay div reflex). */\n .flag-overlay-cyan {\n width: 760px; height: 480px;\n background: radial-gradient(ellipse at top, rgba(34,211,238,0.22), transparent 70%);\n }\n /* Single glow drawn with two low-alpha stops of one hue fading out. */\n .flag-two-stop-rose {\n width: 640px; height: 400px;\n background: radial-gradient(circle, rgba(255,90,120,0.28) 0%, rgba(255,90,120,0.12) 45%, transparent 75%);\n }\n /* Same tell written as an 8-digit hex (#506fff at alpha 0x3d ≈ 0.24). */\n .flag-hex-alpha {\n width: 700px; height: 460px;\n background: radial-gradient(circle, #506fff3d, transparent 50%);\n }\n\n /* ───────── SHOULD PASS: real backgrounds, small elements, neutrals, rich art ───────── */\n\n /* Opaque radial background — a real surface, not a glow (no transparent end). */\n .pass-opaque-bg {\n width: 800px; height: 520px;\n background: radial-gradient(circle, #1e3a8a, #0f172a);\n }\n /* Small badge: chromatic low-alpha radial glow, but tiny. */\n .pass-badge {\n width: 40px; height: 40px;\n background: radial-gradient(circle, rgba(80,111,255,0.30), transparent);\n }\n /* Avatar-scale light: the subject IS a small light, exempt by size. */\n .pass-avatar-light {\n width: 72px; height: 72px;\n background: radial-gradient(circle, rgba(255,196,64,0.35), transparent 70%);\n }\n /* Neutral near-black vignette — grayscale, not the accent-glow tell. */\n .pass-neutral-vignette {\n width: 800px; height: 520px;\n background: radial-gradient(circle, rgba(0,0,0,0.40), transparent 80%);\n }\n /* Neutral near-white vignette — grayscale, exempt. */\n .pass-white-vignette {\n width: 820px; height: 540px;\n background: radial-gradient(ellipse, rgba(255,255,255,0.35), transparent 70%);\n }\n /* Rich three-color radial composition — real color structure, opaque, no fade. */\n .pass-rich-composition {\n width: 800px; height: 520px;\n background: radial-gradient(circle, #ff0080 0%, #7928ca 45%, #0070f3 100%);\n }\n /* Rich composition that does fade out, but its color stops are opaque. */\n .pass-rich-transparent {\n width: 780px; height: 500px;\n background: radial-gradient(circle, rgba(255,0,128,0.90) 0%, rgba(121,40,202,0.85) 50%, transparent);\n }\n /* Opaque center glow (the radial-halo case, alpha ≥ 0.45) — not this rule. */\n .pass-opaque-center {\n width: 800px; height: 520px;\n background: radial-gradient(circle, rgba(80,111,255,0.85), transparent);\n }\n /* Low-alpha chromatic wash, but LINEAR, not radial. */\n .pass-linear-wash {\n width: 800px; height: 520px;\n background: linear-gradient(120deg, rgba(80,111,255,0.28), transparent 60%);\n }\n","classText":"grid\ncase flag-hero-blue\ncase flag-section-violet\ncase flag-overlay-cyan\ncase flag-two-stop-rose\ncase flag-hex-alpha\ncase pass-opaque-bg\ncase pass-badge\ncase pass-avatar-light\ncase pass-neutral-vignette\ncase pass-white-vignette\ncase pass-rich-composition\ncase pass-rich-transparent\ncase pass-opaque-center\ncase pass-linear-wash"}],"result":[{"id":"radial-halo","snippet":"radial-gradient halo (#ff0080 → transparent) on dark page","selector":".pass-rich-transparent"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Repeated Container Text Fixture</title>\n <style>\n body {\n font-family: Georgia, serif;\n font-size: 16px;\n margin: 0;\n padding: 40px;\n background: #f5f5f4;\n color: #222222;\n }\n .card {\n background: #ffffff;\n border: 1px solid #d6d3d1;\n border-radius: 10px;\n padding: 20px;\n width: 360px;\n margin-bottom: 32px;\n }\n .shadow-card {\n background: #ffffff;\n border-radius: 10px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n padding: 20px;\n width: 360px;\n margin-bottom: 32px;\n }\n h2 { font-size: 22px; margin: 0 0 10px; }\n .big-word { font-size: 30px; font-weight: 700; color: #b91c1c; }\n .tag { font-size: 12px; text-transform: uppercase; color: #b91c1c; }\n .row { padding: 6px 0; border-bottom: 1px solid #eeeeee; }\n .status { font-size: 13px; color: #57534e; }\n td, th { padding: 6px 10px; font-size: 14px; }\n </style>\n</head>\n<body>\n\n <!-- ══ SHOULD FLAG ══ -->\n\n <!-- Same word wired into three structurally different slots of one card -->\n <div class=\"card\" id=\"flag-status-card\">\n <h2>Museumplein departure</h2>\n <div class=\"headline\"><span class=\"big-word\">Suspended</span></div>\n <div class=\"meta\"><span class=\"tag\">Suspended</span></div>\n <p class=\"note\">This service is <strong>Suspended</strong> until further notice.</p>\n </div>\n\n <!-- Four distinct slots inside one elevated card -->\n <div class=\"shadow-card\" id=\"flag-ticket-card\">\n <h2>Evening show</h2>\n <div class=\"banner\"><span class=\"big-word\">Unavailable</span></div>\n <div class=\"detail\"><em class=\"tag\">Unavailable</em></div>\n <div class=\"footer\"><span class=\"status\">Unavailable</span></div>\n <p class=\"aside\">Currently <strong>Unavailable</strong> at this venue.</p>\n </div>\n\n <!-- ══ SHOULD PASS ══ -->\n\n <!-- Table columns inside a card repeat by design -->\n <div class=\"card\" id=\"pass-table-card\">\n <h2>Deploy history</h2>\n <table>\n <tr><td>build 12</td><td>Rolled back</td></tr>\n <tr><td>build 13</td><td>Rolled back</td></tr>\n <tr><td>build 14</td><td>Rolled back</td></tr>\n </table>\n </div>\n\n <!-- Parallel templated rows: identical structural position each time -->\n <div class=\"card\" id=\"pass-parallel-rows\">\n <h2>Departures</h2>\n <div class=\"row\"><span class=\"status\">On schedule</span></div>\n <div class=\"row\"><span class=\"status\">On schedule</span></div>\n <div class=\"row\"><span class=\"status\">On schedule</span></div>\n </div>\n\n <!-- Nav list inside a card -->\n <div class=\"card\" id=\"pass-nav-card\">\n <h2>Sections</h2>\n <nav>\n <div class=\"a\"><span>Overview page</span></div>\n <div class=\"b\"><em>Overview page</em></div>\n <div class=\"c\"><strong>Overview page</strong></div>\n </nav>\n </div>\n\n <!-- Short strings never count -->\n <div class=\"card\" id=\"pass-short-text\">\n <h2>Toggles</h2>\n <div class=\"one\"><span>Off</span></div>\n <div class=\"two\"><em>Off</em></div>\n <div class=\"three\"><strong>Off</strong></div>\n </div>\n\n <!-- Digits-only strings never count -->\n <div class=\"card\" id=\"pass-numbers\">\n <h2>Scores</h2>\n <div class=\"one\"><span>2026</span></div>\n <div class=\"two\"><em>2026</em></div>\n <div class=\"three\"><strong>2026</strong></div>\n </div>\n\n <!-- One occurrence per card, three cards -->\n <div class=\"card\" id=\"pass-spread-a\"><span class=\"tag\">Standby mode</span></div>\n <div class=\"card\" id=\"pass-spread-b\"><em class=\"tag\">Standby mode</em></div>\n <div class=\"card\" id=\"pass-spread-c\"><strong class=\"tag\">Standby mode</strong></div>\n\n <!-- Calendar-style grid repeats by design -->\n <div class=\"card\" id=\"pass-grid-card\">\n <h2>Availability</h2>\n <div role=\"grid\">\n <div class=\"cell-a\"><span>Open slot</span></div>\n <div class=\"cell-b\"><em>Open slot</em></div>\n <div class=\"cell-c\"><strong>Open slot</strong></div>\n </div>\n </div>\n\n <!-- Only two structurally distinct occurrences: below threshold -->\n <div class=\"card\" id=\"pass-two-spots\">\n <h2>Corner case</h2>\n <div class=\"headline\"><span class=\"big-word\">Rescheduled</span></div>\n <div class=\"meta\"><span class=\"tag\">Rescheduled</span></div>\n </div>\n\n</body>\n</html>\n",{"styleText":"\n body {\n font-family: Georgia, serif;\n font-size: 16px;\n margin: 0;\n padding: 40px;\n background: #f5f5f4;\n color: #222222;\n }\n .card {\n background: #ffffff;\n border: 1px solid #d6d3d1;\n border-radius: 10px;\n padding: 20px;\n width: 360px;\n margin-bottom: 32px;\n }\n .shadow-card {\n background: #ffffff;\n border-radius: 10px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n padding: 20px;\n width: 360px;\n margin-bottom: 32px;\n }\n h2 { font-size: 22px; margin: 0 0 10px; }\n .big-word { font-size: 30px; font-weight: 700; color: #b91c1c; }\n .tag { font-size: 12px; text-transform: uppercase; color: #b91c1c; }\n .row { padding: 6px 0; border-bottom: 1px solid #eeeeee; }\n .status { font-size: 13px; color: #57534e; }\n td, th { padding: 6px 10px; font-size: 14px; }\n ","classText":"card\nheadline\nbig-word\nmeta\ntag\nnote\nshadow-card\nbanner\nbig-word\ndetail\ntag\nfooter\nstatus\naside\ncard\ncard\nrow\nstatus\nrow\nstatus\nrow\nstatus\ncard\na\nb\nc\ncard\none\ntwo\nthree\ncard\none\ntwo\nthree\ncard\ntag\ncard\ntag\ncard\ntag\ncard\ncell-a\ncell-b\ncell-c\ncard\nheadline\nbig-word\nmeta\ntag"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Working reveal-on-scroll fixture (browser-only pass case)</title>\n <style>\n html { scroll-behavior: smooth; }\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n main { max-width: 640px; margin: 0 auto; padding: 32px 24px; }\n section { margin: 0 0 480px; }\n .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }\n .reveal.in-view { opacity: 1; transform: none; }\n .menu { display: none; }\n </style>\n</head>\n<body>\n <main>\n <h1>Visible hero headline stays readable</h1>\n <p>Identical markup to the broken fixture, but the script parses and runs, so every\n reveal section becomes visible once the detector's reveal sweep scrolls it into view.\n Nothing on this page may produce a script-error or content-hidden finding.</p>\n\n <!-- Legitimately hidden UI: excluded from the measurement entirely -->\n <nav class=\"menu\">\n <a href=\"#one\">A menu that only opens on demand</a>\n <a href=\"#two\">Another menu entry with text</a>\n </nav>\n <div hidden>Hidden attribute content that never counts against the page.</div>\n <div aria-hidden=\"true\">Decorative aria-hidden copy that also stays out of the denominator.</div>\n <template><p>Template content never renders and never counts.</p></template>\n\n <section class=\"reveal\" id=\"one\">\n <h2>First revealed section</h2>\n <p>This block starts at opacity zero, exactly like a broken page would, but its\n IntersectionObserver is alive. During the sweep it gains the in-view class and\n transitions to full opacity, so the post-sweep measurement sees it as visible.</p>\n </section>\n <section class=\"reveal\" id=\"two\">\n <h2>Second revealed section</h2>\n <p>More reveal-on-scroll copy that carries a meaningful share of the page's\n character count. If the sweep or the exclusion rules regress, this fixture is the\n page that starts producing a false content-hidden-at-rest finding.</p>\n </section>\n <section class=\"reveal\">\n <h2>Third revealed section</h2>\n <p>The smooth scroll-behavior on the root element is deliberate: the sweep must\n use instant scrolling or it never actually reaches these sections before it\n measures, which was the first false-positive mode found while calibrating.</p>\n </section>\n </main>\n\n <script>\n const sections = document.querySelectorAll('.reveal');\n const io = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) { entry.target.classList.add('in-view'); io.unobserve(entry.target); }\n }\n }, { threshold: 0.1 });\n sections.forEach((el) => io.observe(el));\n </script>\n</body>\n</html>\n",{"styleText":"\n html { scroll-behavior: smooth; }\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n main { max-width: 640px; margin: 0 auto; padding: 32px 24px; }\n section { margin: 0 0 480px; }\n .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }\n .reveal.in-view { opacity: 1; transform: none; }\n .menu { display: none; }\n ","classText":"menu\nreveal\nreveal\nreveal"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Fixture: data-impeccable-ignore scoped waivers</title>\n<style>\n body { margin: 0; padding: 40px; background: #faf8f4; font-family: Arial, sans-serif; color: #262421; }\n /* Every case carries a UNIQUE border-left width so each finding's snippet\n (`border-left: Npx`) attributes to exactly one case. Flag widths: 5, 6,\n 8, 12. Pass widths: 4, 7, 9, 10, 11. */\n .tabbed {\n width: 420px;\n padding: 16px 20px;\n margin: 0 0 24px;\n background: #ffffff;\n border: 1px solid #ddd8d0;\n border-left: 6px solid #b8422e;\n }\n .w4 { border-left-width: 4px; }\n .w5 { border-left-width: 5px; }\n .w7 { border-left-width: 7px; }\n .w8 { border-left-width: 8px; }\n .w9 { border-left-width: 9px; }\n .w10 { border-left-width: 10px; }\n .w11 { border-left-width: 11px; }\n .w12 { border-left-width: 12px; }\n /* Marquee specimen: keyframes + an infinite loop track. The section that\n hosts it carries a marquee waiver; the CSS-scan finding must resolve the\n selector to the live element and honor the ancestor attribute. */\n @keyframes ticker-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n .quote-track { display: flex; width: max-content; animation: ticker-loop 80s linear infinite; }\n .quote-track span { padding: 8px 16px; }\n /* Dead grid CSS: this two-axis hairline grid selector matches nothing on\n this page, so the browser pass must drop the codex-grid finding — the\n pattern never renders here. */\n .never-rendered-grid {\n background:\n linear-gradient(90deg, rgba(200,180,120,0.08) 1px, transparent 1px),\n linear-gradient(180deg, rgba(200,180,120,0.08) 1px, transparent 1px);\n background-size: 24px 24px;\n }\n /* Overshoot bezier inside a keyframe STEP: enclosingCssSelector must refuse\n `to` as a selector (it would match nothing and wrongly drop the finding),\n so this bounce-easing finding stays page-level and is retained. */\n @keyframes springy {\n from { transform: none; }\n to { transform: translateY(-4px); animation-timing-function: cubic-bezier(0.3, 1.8, 0.6, 1); }\n }\n</style>\n</head>\n<body>\n <!-- FLAG 6px — control: no waiver anywhere above. -->\n <article class=\"tabbed control-flags\">The control case has a 6px side-tab accent border and no waiver, so the side-tab rule must flag it.</article>\n\n <!-- FLAG 8px — waiver names a different rule, so side-tab still applies. -->\n <section data-impeccable-ignore=\"pulsing-dot\">\n <article class=\"tabbed w8 flags-other-rule-waived\">The waiver names pulsing-dot, not side-tab, so this 8px case must still flag.</article>\n </section>\n\n <!-- FLAG 12px — waiver sits on a SIBLING, not an ancestor: no effect. -->\n <div data-impeccable-ignore=\"side-tab\"></div>\n <article class=\"tabbed w12 flags-sibling-waiver\">A waiver on a preceding sibling is not an ancestor; this 12px case must still flag.</article>\n\n <!-- FLAG 5px — waiver value misspells the rule id: exact matching only. -->\n <section data-impeccable-ignore=\"side-tabs\">\n <article class=\"tabbed w5 flags-misspelled-rule\">\"side-tabs\" is not a rule id; the 5px case must still flag.</article>\n </section>\n\n <!-- PASS 7px — exact-rule waiver on the container: the subtree is exempt. -->\n <section data-impeccable-ignore=\"side-tab\">\n <article class=\"tabbed w7 pass-exact-rule\">Inside a container waived for exactly side-tab; must not flag.</article>\n </section>\n\n <!-- PASS 9px — two levels below the waiving container. -->\n <section data-impeccable-ignore=\"side-tab\">\n <div>\n <article class=\"tabbed w9 pass-nested-depth\">Two levels below the waiving container; the ancestor walk must still find it.</article>\n </div>\n </section>\n\n <!-- PASS 10px — star waiver: every rule is exempt in the subtree. -->\n <section data-impeccable-ignore=\"*\">\n <article class=\"tabbed w10 pass-star\">Inside a star-waived container; must not flag.</article>\n </section>\n\n <!-- PASS 11px — comma list including side-tab. -->\n <section data-impeccable-ignore=\"pulsing-dot, side-tab\">\n <article class=\"tabbed w11 pass-rule-list\">side-tab appears in the comma list; must not flag.</article>\n </section>\n\n <!-- PASS 4px — waiver on the flagged element itself (self counts). -->\n <article class=\"tabbed w4 pass-self-waiver\" data-impeccable-ignore=\"side-tab\">The waiver sits on the element itself; must not flag.</article>\n\n <!-- Live marquee inside a rule-scoped waiver: the CSS-scan marquee finding\n resolves .quote-track to this element and is waived by the ancestor. -->\n <section data-impeccable-ignore=\"marquee\">\n <div class=\"quote-track\"><span>One voice.</span><span>Another voice.</span><span>One voice.</span><span>Another voice.</span></div>\n </section>\n</body>\n</html>\n",{"styleText":"\n body { margin: 0; padding: 40px; background: #faf8f4; font-family: Arial, sans-serif; color: #262421; }\n /* Every case carries a UNIQUE border-left width so each finding's snippet\n (`border-left: Npx`) attributes to exactly one case. Flag widths: 5, 6,\n 8, 12. Pass widths: 4, 7, 9, 10, 11. */\n .tabbed {\n width: 420px;\n padding: 16px 20px;\n margin: 0 0 24px;\n background: #ffffff;\n border: 1px solid #ddd8d0;\n border-left: 6px solid #b8422e;\n }\n .w4 { border-left-width: 4px; }\n .w5 { border-left-width: 5px; }\n .w7 { border-left-width: 7px; }\n .w8 { border-left-width: 8px; }\n .w9 { border-left-width: 9px; }\n .w10 { border-left-width: 10px; }\n .w11 { border-left-width: 11px; }\n .w12 { border-left-width: 12px; }\n /* Marquee specimen: keyframes + an infinite loop track. The section that\n hosts it carries a marquee waiver; the CSS-scan finding must resolve the\n selector to the live element and honor the ancestor attribute. */\n @keyframes ticker-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n .quote-track { display: flex; width: max-content; animation: ticker-loop 80s linear infinite; }\n .quote-track span { padding: 8px 16px; }\n /* Dead grid CSS: this two-axis hairline grid selector matches nothing on\n this page, so the browser pass must drop the codex-grid finding — the\n pattern never renders here. */\n .never-rendered-grid {\n background:\n linear-gradient(90deg, rgba(200,180,120,0.08) 1px, transparent 1px),\n linear-gradient(180deg, rgba(200,180,120,0.08) 1px, transparent 1px);\n background-size: 24px 24px;\n }\n /* Overshoot bezier inside a keyframe STEP: enclosingCssSelector must refuse\n `to` as a selector (it would match nothing and wrongly drop the finding),\n so this bounce-easing finding stays page-level and is retained. */\n @keyframes springy {\n from { transform: none; }\n to { transform: translateY(-4px); animation-timing-function: cubic-bezier(0.3, 1.8, 0.6, 1); }\n }\n","classText":"tabbed control-flags\ntabbed w8 flags-other-rule-waived\ntabbed w12 flags-sibling-waiver\ntabbed w5 flags-misspelled-rule\ntabbed w7 pass-exact-rule\ntabbed w9 pass-nested-depth\ntabbed w10 pass-star\ntabbed w11 pass-rule-list\ntabbed w4 pass-self-waiver\nquote-track"}],"result":[{"id":"bounce-easing","snippet":"cubic-bezier(0.3, 1.8, 0.6, 1)"},{"id":"marquee","snippet":".quote-track — infinite horizontal loop animation \"ticker-loop\"","selector":".quote-track"},{"id":"codex-grid-background","snippet":"two-axis grid-line gradient background","selector":".never-rendered-grid"}]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Script error + content hidden fixture (browser-only)</title>\n <style>\n html { scroll-behavior: smooth; }\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n main { max-width: 640px; margin: 0 auto; padding: 32px 24px; }\n section { margin: 0 0 480px; }\n .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }\n .reveal.in-view { opacity: 1; transform: none; }\n </style>\n</head>\n<body>\n <main>\n <h1>Visible hero headline stays readable</h1>\n <p>The opening paragraph renders normally, exactly like the real broken sample: the\n first viewport looks fine while everything below it never appears.</p>\n\n <section class=\"reveal\">\n <h2>First hidden section</h2>\n <p>This block waits for an IntersectionObserver that will never construct, because\n the single script tag below fails to parse. Its text ships in the document but the\n reveal class never lands, so the reader scrolls through blank space.</p>\n </section>\n <section class=\"reveal\">\n <h2>Second hidden section</h2>\n <p>More shipped-but-invisible copy. Together the hidden sections carry well over\n thirty percent of the character count of the page, which is the failed-reveal\n signature this fixture exists to reproduce for the detector tests.</p>\n </section>\n <section class=\"reveal\">\n <h2>Third hidden section</h2>\n <p>A final block of body copy that stays at opacity zero forever. A healthy page\n with this exact markup reveals every one of these sections during the detector's\n reveal sweep; this one cannot, because its JavaScript died at parse time.</p>\n </section>\n </main>\n\n <script>\n const sections = document.querySelectorAll('.reveal');\n const io = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) { entry.target.classList.add('in-view'); io.unobserve(entry.target); }\n }\n }, { threshold: 0.1 });\n sections.forEach((el) => io.observe(el));\n // Deliberate syntax error: an unterminated string kills the whole block,\n // including the observer wiring above.\n const label = 'unterminated\n </script>\n</body>\n</html>\n",{"styleText":"\n html { scroll-behavior: smooth; }\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n main { max-width: 640px; margin: 0 auto; padding: 32px 24px; }\n section { margin: 0 0 480px; }\n .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }\n .reveal.in-view { opacity: 1; transform: none; }\n ","classText":"reveal\nreveal\nreveal"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<!--\n Regression fixture for issue #407: DOM named-property shadowing.\n\n HTMLFormElement is [LegacyOverrideBuiltIns], so a named control shadows even\n builtin getters: a <form> containing <input name=\"id\"> makes `form.id` return\n the INPUT ELEMENT, not the id string. Reading `.startsWith` on it throws\n \"elId.startsWith is not a function\". Every Shopify product form ships an\n <input name=\"id\"> (the variant id), so this crashed the URL scan of essentially\n every Shopify page. `<input name=\"className\">` shadows `form.className` the same\n way. The detector must read these via getAttribute (immune to shadowing).\n-->\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Shadowed form.id regression fixture</title>\n<style>\n body { font-family: system-ui, sans-serif; background: #ffffff; color: #1a1a1a; margin: 0; padding: 24px; }\n .product { max-width: 640px; margin: 0 auto; }\n h1 { font-size: 28px; margin: 0 0 12px; }\n .price { font-size: 20px; font-weight: 600; }\n form { margin-top: 16px; }\n .add-to-cart { background: #1a1a1a; color: #ffffff; border: 0; padding: 12px 24px; border-radius: 6px; font-size: 16px; cursor: pointer; }\n label { display: block; margin: 8px 0 4px; font-size: 14px; }\n select, input[type=\"number\"] { padding: 8px; font-size: 14px; }\n</style>\n</head>\n<body>\n<main class=\"product\">\n <h1>Impeccable Test Product</h1>\n <p class=\"price\">$49.00</p>\n\n <!-- Shopify-style product form: the <input name=\"id\"> shadows form.id. -->\n <form method=\"post\" action=\"/cart/add\" id=\"product-form\">\n <input type=\"hidden\" name=\"id\" value=\"4001\">\n <input type=\"hidden\" name=\"className\" value=\"variant-default\">\n <label for=\"qty\">Quantity</label>\n <input type=\"number\" id=\"qty\" name=\"quantity\" value=\"1\" min=\"1\">\n <label for=\"variant\">Variant</label>\n <select id=\"variant\" name=\"options[Size]\">\n <option value=\"s\">Small</option>\n <option value=\"m\">Medium</option>\n <option value=\"l\">Large</option>\n </select>\n <button type=\"submit\" class=\"add-to-cart\">Add to cart</button>\n </form>\n</main>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; background: #ffffff; color: #1a1a1a; margin: 0; padding: 24px; }\n .product { max-width: 640px; margin: 0 auto; }\n h1 { font-size: 28px; margin: 0 0 12px; }\n .price { font-size: 20px; font-weight: 600; }\n form { margin-top: 16px; }\n .add-to-cart { background: #1a1a1a; color: #ffffff; border: 0; padding: 12px 24px; border-radius: 6px; font-size: 16px; cursor: pointer; }\n label { display: block; margin: 8px 0 4px; font-size: 14px; }\n select, input[type=\"number\"] { padding: 8px; font-size: 14px; }\n","classText":"product\nprice\nadd-to-cart"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Shape-assembled illustration fixture</title>\n</head>\n<body>\n<header>\n <!-- PASS: logo, small (explicit size) even with a big viewBox -->\n <svg viewBox=\"0 0 400 400\" width=\"32\" height=\"32\" aria-hidden=\"true\">\n <rect x=\"0\" y=\"0\" width=\"180\" height=\"180\" fill=\"#c33\"/>\n <rect x=\"220\" y=\"0\" width=\"180\" height=\"180\" fill=\"#3c3\"/>\n <rect x=\"0\" y=\"220\" width=\"180\" height=\"180\" fill=\"#33c\"/>\n <rect x=\"220\" y=\"220\" width=\"180\" height=\"180\" fill=\"#cc3\"/>\n <circle cx=\"200\" cy=\"200\" r=\"60\" fill=\"#333\"/>\n <circle cx=\"200\" cy=\"200\" r=\"30\" fill=\"#eee\"/>\n <polygon points=\"10,10 30,10 20,30\" fill=\"#933\"/>\n <polygon points=\"370,10 390,10 380,30\" fill=\"#393\"/>\n </svg>\n <span>Acme</span>\n</header>\n<main>\n <!-- FLAG: hero mascot scene assembled from primitives at hero size -->\n <svg class=\"mascot\" viewBox=\"0 0 640 480\" role=\"img\" aria-label=\"A cheerful robot waving\">\n <rect x=\"200\" y=\"120\" width=\"240\" height=\"200\" rx=\"24\" fill=\"#8ecae6\"/>\n <rect x=\"240\" y=\"340\" width=\"60\" height=\"100\" fill=\"#219ebc\"/>\n <rect x=\"340\" y=\"340\" width=\"60\" height=\"100\" fill=\"#219ebc\"/>\n <circle cx=\"270\" cy=\"200\" r=\"24\" fill=\"#ffffff\"/>\n <circle cx=\"370\" cy=\"200\" r=\"24\" fill=\"#ffffff\"/>\n <circle cx=\"270\" cy=\"200\" r=\"10\" fill=\"#023047\"/>\n <circle cx=\"370\" cy=\"200\" r=\"10\" fill=\"#023047\"/>\n <ellipse cx=\"320\" cy=\"270\" rx=\"50\" ry=\"20\" fill=\"#ffb703\"/>\n <polygon points=\"180,160 140,120 180,120\" fill=\"#fb8500\"/>\n <polygon points=\"460,160 500,120 460,120\" fill=\"#fb8500\"/>\n <rect x=\"300\" y=\"60\" width=\"8\" height=\"60\" fill=\"#023047\"/>\n <circle cx=\"304\" cy=\"52\" r=\"12\" fill=\"#fb8500\"/>\n </svg>\n\n <!-- PASS: bar chart, data-bearing (axis labels) -->\n <svg viewBox=\"0 0 600 400\" role=\"img\" aria-label=\"Monthly signups\">\n <rect x=\"60\" y=\"220\" width=\"40\" height=\"120\" fill=\"#4477aa\"/>\n <rect x=\"120\" y=\"180\" width=\"40\" height=\"160\" fill=\"#4477aa\"/>\n <rect x=\"180\" y=\"140\" width=\"40\" height=\"200\" fill=\"#66ccee\"/>\n <rect x=\"240\" y=\"200\" width=\"40\" height=\"140\" fill=\"#66ccee\"/>\n <rect x=\"300\" y=\"100\" width=\"40\" height=\"240\" fill=\"#228833\"/>\n <rect x=\"360\" y=\"90\" width=\"40\" height=\"250\" fill=\"#228833\"/>\n <rect x=\"420\" y=\"60\" width=\"40\" height=\"280\" fill=\"#ccbb44\"/>\n <rect x=\"480\" y=\"40\" width=\"40\" height=\"300\" fill=\"#ccbb44\"/>\n <line x1=\"40\" y1=\"340\" x2=\"560\" y2=\"340\" stroke=\"#333\"/>\n <text x=\"60\" y=\"370\">Jan</text>\n <text x=\"180\" y=\"370\">Mar</text>\n <text x=\"300\" y=\"370\">May</text>\n <text x=\"420\" y=\"370\">Jul</text>\n </svg>\n\n <!-- PASS: stroke-only technical line drawing, no fills -->\n <svg viewBox=\"0 0 600 470\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\">\n <circle cx=\"200\" cy=\"200\" r=\"80\"/>\n <circle cx=\"200\" cy=\"200\" r=\"40\"/>\n <ellipse cx=\"400\" cy=\"220\" rx=\"90\" ry=\"40\"/>\n <rect x=\"120\" y=\"320\" width=\"360\" height=\"60\"/>\n <rect x=\"150\" y=\"340\" width=\"80\" height=\"20\"/>\n <rect x=\"260\" y=\"340\" width=\"80\" height=\"20\"/>\n <polygon points=\"500,80 540,140 460,140\"/>\n <polygon points=\"80,80 120,140 40,140\"/>\n <path d=\"M120 120 C 200 40, 400 40, 480 120\"/>\n </svg>\n\n <!-- PASS: full-bleed tiling background texture -->\n <svg width=\"100%\" height=\"600\" viewBox=\"0 0 1200 600\" aria-hidden=\"true\">\n <defs>\n <pattern id=\"tile\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n <rect width=\"20\" height=\"20\" fill=\"#eee\"/>\n <rect x=\"20\" y=\"20\" width=\"20\" height=\"20\" fill=\"#ddd\"/>\n <circle cx=\"30\" cy=\"10\" r=\"4\" fill=\"#ccc\"/>\n </pattern>\n </defs>\n <rect width=\"1200\" height=\"600\" fill=\"url(#tile)\"/>\n <rect x=\"0\" y=\"0\" width=\"600\" height=\"300\" fill=\"url(#tile)\"/>\n <rect x=\"600\" y=\"300\" width=\"600\" height=\"300\" fill=\"url(#tile)\"/>\n <circle cx=\"300\" cy=\"300\" r=\"80\" fill=\"url(#tile)\"/>\n <circle cx=\"900\" cy=\"150\" r=\"60\" fill=\"url(#tile)\"/>\n <circle cx=\"150\" cy=\"450\" r=\"50\" fill=\"url(#tile)\"/>\n <polygon points=\"700,100 760,180 640,180\" fill=\"url(#tile)\"/>\n <polygon points=\"1000,400 1060,480 940,480\" fill=\"url(#tile)\"/>\n </svg>\n\n <!-- PASS: small inline icon -->\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M8 12l3 3 5-6\"/>\n </svg>\n</main>\n</body>\n</html>\n",{"styleText":"","classText":"mascot"}],"result":[{"id":"shape-assembled-illustration","snippet":"inline <svg> scene: 12 primitive shapes, ~640x480px, 6 fill colors"}]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Anti-Patterns That Should Be Flagged</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }\n h1 { font-size: 2rem; margin-bottom: 0.5rem; }\n h2 { font-size: 0.875rem; margin: 2.5rem 0 0.75rem; color: #4b5563; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }\n p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }\n .cards { display: grid; gap: 1rem; max-width: 28rem; }\n .card { background: white; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\n .card h3 { font-weight: 600; color: #111827; font-size: 0.875rem; }\n .card p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }\n\n /* CSS side-tab variants */\n .card-shorthand-left { border-left: 4px solid #3b82f6; }\n .card-shorthand-right { border-right: 5px solid #8b5cf6; }\n .card-longhand-left { border-left-width: 3px; border-left-style: solid; border-left-color: #10b981; }\n .card-longhand-right { border-right-width: 6px; border-right-style: solid; border-right-color: #ef4444; }\n\n /* CSS top/bottom + border-radius */\n .card-css-top { border-radius: 12px; border-top: 4px solid #3b82f6; }\n .card-css-bottom { border-radius: 12px; border-bottom: 3px solid #8b5cf6; }\n </style>\n</head>\n<body>\n <h1>Anti-Patterns: Should Flag</h1>\n <p class=\"intro\">Every example on this page should be detected by the anti-pattern scanner.</p>\n\n <!-- TAILWIND SIDE-TAB -->\n <h2>Tailwind Side-Tab</h2>\n <div class=\"cards\">\n <div class=\"border-l-4 border-blue-500 bg-white p-4 rounded-r shadow-sm\">\n <h3>border-l-4 + rounded-r</h3>\n <p>The classic AI tell.</p>\n </div>\n <div class=\"border-r-4 border-purple-500 bg-white p-4 rounded-l shadow-sm\">\n <h3>border-r-4 + rounded-l</h3>\n <p>Right side variant.</p>\n </div>\n <div class=\"border-e-8 border-red-500 bg-white p-4 rounded-l shadow-sm\">\n <h3>border-e-8 + rounded-l</h3>\n <p>Logical inline-end, extra thick.</p>\n </div>\n </div>\n\n <!-- CSS SIDE-TAB -->\n <h2>CSS Side-Tab</h2>\n <div class=\"cards\">\n <div class=\"card card-shorthand-left\">\n <h3>border-left: 4px solid</h3>\n <p>CSS shorthand.</p>\n </div>\n <div class=\"card card-shorthand-right\">\n <h3>border-right: 5px solid</h3>\n <p>CSS shorthand right.</p>\n </div>\n <div class=\"card card-longhand-left\">\n <h3>border-left-width: 3px</h3>\n <p>CSS longhand.</p>\n </div>\n <div class=\"card card-longhand-right\">\n <h3>border-right-width: 6px</h3>\n <p>CSS longhand right.</p>\n </div>\n </div>\n\n <!-- TOP/BOTTOM + ROUNDED -->\n <h2>Top/Bottom + Rounded</h2>\n <div class=\"cards\">\n <div class=\"border-t-4 border-blue-500 rounded-lg bg-white p-4 shadow-sm\">\n <h3 class=\"font-semibold text-sm\">border-t-4 + rounded-lg</h3>\n <p class=\"text-sm text-gray-600\">Top accent on rounded card.</p>\n </div>\n <div class=\"border-b-4 border-purple-500 rounded-xl bg-white p-4 shadow-sm\">\n <h3 class=\"font-semibold text-sm\">border-b-4 + rounded-xl</h3>\n <p class=\"text-sm text-gray-600\">Bottom accent on rounded card.</p>\n </div>\n <div class=\"border-t-2 border-emerald-500 rounded-md bg-white p-4 shadow-sm\">\n <h3 class=\"font-semibold text-sm\">border-t-2 + rounded-md</h3>\n <p class=\"text-sm text-gray-600\">Even thin top border on rounded.</p>\n </div>\n <div class=\"card card-css-top\">\n <h3>CSS border-top + border-radius</h3>\n <p>Top border from style block.</p>\n </div>\n <div class=\"card card-css-bottom\">\n <h3>CSS border-bottom + border-radius</h3>\n <p>Bottom border from style block.</p>\n </div>\n </div>\n <!-- DARK MODE VARIANTS -->\n <h2>Dark Mode</h2>\n <div class=\"cards\">\n <div class=\"border-l-4 border-cyan-400 rounded-lg bg-gray-800 p-4 shadow-sm\">\n <h3 class=\"font-semibold text-sm text-white\">Dark card + border-l-4 + rounded</h3>\n <p class=\"text-sm text-gray-400\">Dark background doesn't make the side-tab OK.</p>\n </div>\n <div class=\"border-t-2 border-violet-500 rounded-xl bg-slate-900 p-4 shadow-sm\">\n <h3 class=\"font-semibold text-sm text-white\">Dark card + border-t-2 + rounded</h3>\n <p class=\"text-sm text-gray-400\">Top accent on dark rounded card.</p>\n </div>\n <div style=\"background: #1f2937; padding: 1rem; border-radius: 12px; border-left: 4px solid #f472b6; max-width: 28rem;\">\n <h3 style=\"font-weight: 600; font-size: 0.875rem; color: white;\">Dark CSS card + side border + radius</h3>\n <p style=\"font-size: 0.8125rem; color: #9ca3af;\">Inline dark card with side-tab.</p>\n </div>\n </div>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }\n h1 { font-size: 2rem; margin-bottom: 0.5rem; }\n h2 { font-size: 0.875rem; margin: 2.5rem 0 0.75rem; color: #4b5563; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }\n p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }\n .cards { display: grid; gap: 1rem; max-width: 28rem; }\n .card { background: white; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\n .card h3 { font-weight: 600; color: #111827; font-size: 0.875rem; }\n .card p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }\n\n /* CSS side-tab variants */\n .card-shorthand-left { border-left: 4px solid #3b82f6; }\n .card-shorthand-right { border-right: 5px solid #8b5cf6; }\n .card-longhand-left { border-left-width: 3px; border-left-style: solid; border-left-color: #10b981; }\n .card-longhand-right { border-right-width: 6px; border-right-style: solid; border-right-color: #ef4444; }\n\n /* CSS top/bottom + border-radius */\n .card-css-top { border-radius: 12px; border-top: 4px solid #3b82f6; }\n .card-css-bottom { border-radius: 12px; border-bottom: 3px solid #8b5cf6; }\n \nstyle=\"background: #1f2937; padding: 1rem; border-radius: 12px; border-left: 4px solid #f472b6; max-width: 28rem;\"\nstyle=\"font-weight: 600; font-size: 0.875rem; color: white;\"\nstyle=\"font-size: 0.8125rem; color: #9ca3af;\"","classText":"intro\ncards\nborder-l-4 border-blue-500 bg-white p-4 rounded-r shadow-sm\nborder-r-4 border-purple-500 bg-white p-4 rounded-l shadow-sm\nborder-e-8 border-red-500 bg-white p-4 rounded-l shadow-sm\ncards\ncard card-shorthand-left\ncard card-shorthand-right\ncard card-longhand-left\ncard card-longhand-right\ncards\nborder-t-4 border-blue-500 rounded-lg bg-white p-4 shadow-sm\nfont-semibold text-sm\ntext-sm text-gray-600\nborder-b-4 border-purple-500 rounded-xl bg-white p-4 shadow-sm\nfont-semibold text-sm\ntext-sm text-gray-600\nborder-t-2 border-emerald-500 rounded-md bg-white p-4 shadow-sm\nfont-semibold text-sm\ntext-sm text-gray-600\ncard card-css-top\ncard card-css-bottom\ncards\nborder-l-4 border-cyan-400 rounded-lg bg-gray-800 p-4 shadow-sm\nfont-semibold text-sm text-white\ntext-sm text-gray-400\nborder-t-2 border-violet-500 rounded-xl bg-slate-900 p-4 shadow-sm\nfont-semibold text-sm text-white\ntext-sm text-gray-400"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Clean Patterns — Should NOT Flag</title>\n <style>\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }\n h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }\n h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }\n p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }\n .section { max-width: 28rem; }\n .card-rounded { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }\n .card-rounded h3 { font-weight: 600; color: #111827; }\n .card-rounded p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }\n .card-flat { background: white; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }\n .badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }\n\n /* Below-threshold side borders without radius */\n .thin-left { border-left: 1px solid #3b82f6; }\n .thin-right { border-right: 2px solid #8b5cf6; }\n </style>\n</head>\n<body>\n <h1>Clean Patterns: Should Pass</h1>\n <p class=\"intro\">None of these should be flagged. They're all intentional, well-established web patterns.</p>\n\n <!-- CLEAN CARDS -->\n <h2>Clean Cards</h2>\n <div class=\"section\">\n <div class=\"card-rounded\" style=\"border: 1px solid #e5e7eb;\">\n <h3>Full border card</h3>\n <p>Subtle 1px border all around. Clean and intentional.</p>\n </div>\n\n <div style=\"max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-top: 1px solid #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,0.1);\">\n <h3 style=\"font-weight: 600; color: #111827;\">Top border, no radius</h3>\n <p style=\"font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;\">A hairline top rule without rounded corners is a clean section divider.</p>\n </div>\n\n <div style=\"max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-bottom: 2px solid #10b981; box-shadow: 0 1px 3px rgba(0,0,0,0.1);\">\n <h3 style=\"font-weight: 600; color: #111827;\">Bottom border, no radius</h3>\n <p style=\"font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;\">Bottom accent without rounded corners is also clean.</p>\n </div>\n\n <div class=\"card-rounded\">\n <span class=\"badge\">New</span>\n <h3>No border at all</h3>\n <p>Just a shadow. Simple and effective.</p>\n </div>\n </div>\n\n <!-- BELOW THRESHOLD -->\n <h2>Below Threshold (Thin, No Radius)</h2>\n <div class=\"section\">\n <div class=\"card-flat thin-left\">\n <p>border-left: 1px solid, no radius — not flagged</p>\n </div>\n <div class=\"card-flat thin-right\">\n <p>border-right: 2px solid, no radius — not flagged</p>\n </div>\n <div class=\"card-flat\" style=\"border-left: 1px solid #10b981;\">\n <p>1px inline border-left, no radius — not flagged</p>\n </div>\n </div>\n <!-- DARK MODE CLEAN -->\n <h2>Dark Mode (Clean)</h2>\n <div class=\"section\">\n <div style=\"background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #374151; max-width: 28rem; margin-bottom: 1rem;\">\n <h3 style=\"font-weight: 600; color: white;\">Dark card, full border</h3>\n <p style=\"font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;\">Uniform 1px border all around. Clean.</p>\n </div>\n <div style=\"background: #111827; padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem; border-bottom: 2px solid #6366f1;\">\n <h3 style=\"font-weight: 600; color: white;\">Dark section, bottom border, no radius</h3>\n <p style=\"font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;\">Bottom accent without radius is fine.</p>\n </div>\n <div style=\"background: #1e293b; padding: 1.5rem; border-radius: 0.5rem; max-width: 28rem; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);\">\n <h3 style=\"font-weight: 600; color: white;\">Dark card, no border</h3>\n <p style=\"font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;\">Shadow only. Clean.</p>\n </div>\n </div>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }\n h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }\n h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }\n p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }\n .section { max-width: 28rem; }\n .card-rounded { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }\n .card-rounded h3 { font-weight: 600; color: #111827; }\n .card-rounded p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }\n .card-flat { background: white; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }\n .badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }\n\n /* Below-threshold side borders without radius */\n .thin-left { border-left: 1px solid #3b82f6; }\n .thin-right { border-right: 2px solid #8b5cf6; }\n \nstyle=\"border: 1px solid #e5e7eb;\"\nstyle=\"max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-top: 1px solid #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,0.1);\"\nstyle=\"font-weight: 600; color: #111827;\"\nstyle=\"font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;\"\nstyle=\"max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-bottom: 2px solid #10b981; box-shadow: 0 1px 3px rgba(0,0,0,0.1);\"\nstyle=\"font-weight: 600; color: #111827;\"\nstyle=\"font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;\"\nstyle=\"border-left: 1px solid #10b981;\"\nstyle=\"background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #374151; max-width: 28rem; margin-bottom: 1rem;\"\nstyle=\"font-weight: 600; color: white;\"\nstyle=\"font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;\"\nstyle=\"background: #111827; padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem; border-bottom: 2px solid #6366f1;\"\nstyle=\"font-weight: 600; color: white;\"\nstyle=\"font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;\"\nstyle=\"background: #1e293b; padding: 1.5rem; border-radius: 0.5rem; max-width: 28rem; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);\"\nstyle=\"font-weight: 600; color: white;\"\nstyle=\"font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;\"","classText":"intro\nsection\ncard-rounded\ncard-rounded\nbadge\nsection\ncard-flat thin-left\ncard-flat thin-right\ncard-flat\nsection"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>text-occlusion fixture</title>\n<style>\n * { margin: 0; box-sizing: border-box; }\n body { font-family: system-ui, sans-serif; color: #111; background: #fff; }\n section { padding: 40px; position: relative; }\n\n /* ── FLAG 1: opaque box painted over text (>30%) ── */\n .flag-box-wrap { position: relative; height: 120px; }\n .flag-box-text { position: absolute; top: 40px; left: 40px; font-size: 20px; width: 300px; }\n .flag-box-cover { position: absolute; top: 30px; left: 30px; width: 240px; height: 60px;\n background: #1f7a3d; border-radius: 8px; z-index: 5; }\n\n /* ── FLAG 2: inline element with opaque fill + leaked vertical padding ── */\n .flag-leak-host { position: relative; margin-top: 30px; }\n .flag-leak { display: inline; background: #2f8543; padding: 36px; border-radius: 6px; }\n .flag-leak-card { background: #14202b; color: #fff; padding: 24px; border-radius: 6px; }\n\n /* ── FLAG 3: big headline overhanging an opaque card ── */\n .flag-hero { position: relative; height: 220px; }\n .flag-headline { position: absolute; top: 40px; left: 0; font-size: 64px; font-weight: 800;\n width: 760px; color: #b22; white-space: nowrap; }\n .flag-card { position: absolute; top: 20px; left: 700px; width: 360px; height: 180px;\n background: #f4f5f7; border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,.08); border-radius: 8px; }\n\n /* ── PASS: stacked headline with tight leading (line-box bleed, no real overlap) ── */\n .pass-stack { margin-top: 40px; }\n .pass-eyebrow { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #a33; }\n .pass-title { font-size: 96px; line-height: .9; font-weight: 800; }\n\n /* ── PASS: text over image with a scrim, text on top (readable) ── */\n .pass-hero { position: relative; height: 200px; overflow: hidden; border-radius: 8px; }\n .pass-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n .pass-hero .scrim { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }\n .pass-hero .cap { position: absolute; bottom: 16px; left: 16px; color: #fff; font-size: 24px; z-index: 2; }\n\n /* ── PASS: fixed status bar over content at the fold ── */\n .pass-under { margin-top: 20px; font-size: 16px; }\n /* Invisible interaction layer: an opacity-0 scrubber input stretched over\n text, like a before/after comparison handle. It paints nothing, so it must\n not read as an occluder despite its UA background-color. */\n .pass-scrubber-wrap { position: relative; margin-top: 30px; height: 80px; }\n .pass-scrubber-text { position: absolute; top: 20px; left: 10px; font-size: 20px; width: 320px; }\n .pass-scrubber-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; margin: 0; }\n .pass-fixedbar { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; background: #b22;\n color: #fff; display: flex; align-items: center; padding: 0 16px; }\n</style>\n</head>\n<body>\n <section>\n <div class=\"flag-box-wrap\">\n <p class=\"flag-box-text\">Root cause identified in four minutes</p>\n <div class=\"flag-box-cover\" aria-hidden=\"true\"></div>\n </div>\n\n <div class=\"flag-leak-host\">\n <span class=\"flag-leak\" aria-hidden=\"true\"></span>\n <div class=\"flag-leak-card\">Incident closed. Missing index on the replica, found from one alert.</div>\n </div>\n\n <div class=\"flag-hero\">\n <div class=\"flag-headline\">The trace you need is the one they sampled away.</div>\n <div class=\"flag-card\">\n <p>INCIDENT 4417</p>\n <p>service checkout-api</p>\n </div>\n </div>\n\n <div class=\"pass-stack\">\n <p class=\"pass-eyebrow\">Family Italian on the waterfront</p>\n <h1 class=\"pass-title\">Trattoria da Nonna Lucia</h1>\n </div>\n\n <div class=\"pass-hero\">\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\">\n <div class=\"scrim\"></div>\n <div class=\"cap\">Villa on the cliff</div>\n </div>\n\n <p class=\"pass-under\">Every span of every trace, kept on disk, no sampling ever applied here.</p>\n </section>\n <div class=\"pass-fixedbar\">8/8 services up · p99 1.20s · retention infinite</div>\n <div class=\"pass-scrubber-wrap\">\n <p class=\"pass-scrubber-text\">Drag anywhere to compare versions</p>\n <input class=\"pass-scrubber-input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\">\n </div>\n</body>\n</html>\n",{"styleText":"\n * { margin: 0; box-sizing: border-box; }\n body { font-family: system-ui, sans-serif; color: #111; background: #fff; }\n section { padding: 40px; position: relative; }\n\n /* ── FLAG 1: opaque box painted over text (>30%) ── */\n .flag-box-wrap { position: relative; height: 120px; }\n .flag-box-text { position: absolute; top: 40px; left: 40px; font-size: 20px; width: 300px; }\n .flag-box-cover { position: absolute; top: 30px; left: 30px; width: 240px; height: 60px;\n background: #1f7a3d; border-radius: 8px; z-index: 5; }\n\n /* ── FLAG 2: inline element with opaque fill + leaked vertical padding ── */\n .flag-leak-host { position: relative; margin-top: 30px; }\n .flag-leak { display: inline; background: #2f8543; padding: 36px; border-radius: 6px; }\n .flag-leak-card { background: #14202b; color: #fff; padding: 24px; border-radius: 6px; }\n\n /* ── FLAG 3: big headline overhanging an opaque card ── */\n .flag-hero { position: relative; height: 220px; }\n .flag-headline { position: absolute; top: 40px; left: 0; font-size: 64px; font-weight: 800;\n width: 760px; color: #b22; white-space: nowrap; }\n .flag-card { position: absolute; top: 20px; left: 700px; width: 360px; height: 180px;\n background: #f4f5f7; border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,.08); border-radius: 8px; }\n\n /* ── PASS: stacked headline with tight leading (line-box bleed, no real overlap) ── */\n .pass-stack { margin-top: 40px; }\n .pass-eyebrow { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #a33; }\n .pass-title { font-size: 96px; line-height: .9; font-weight: 800; }\n\n /* ── PASS: text over image with a scrim, text on top (readable) ── */\n .pass-hero { position: relative; height: 200px; overflow: hidden; border-radius: 8px; }\n .pass-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n .pass-hero .scrim { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }\n .pass-hero .cap { position: absolute; bottom: 16px; left: 16px; color: #fff; font-size: 24px; z-index: 2; }\n\n /* ── PASS: fixed status bar over content at the fold ── */\n .pass-under { margin-top: 20px; font-size: 16px; }\n /* Invisible interaction layer: an opacity-0 scrubber input stretched over\n text, like a before/after comparison handle. It paints nothing, so it must\n not read as an occluder despite its UA background-color. */\n .pass-scrubber-wrap { position: relative; margin-top: 30px; height: 80px; }\n .pass-scrubber-text { position: absolute; top: 20px; left: 10px; font-size: 20px; width: 320px; }\n .pass-scrubber-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; margin: 0; }\n .pass-fixedbar { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; background: #b22;\n color: #fff; display: flex; align-items: center; padding: 0 16px; }\n","classText":"flag-box-wrap\nflag-box-text\nflag-box-cover\nflag-leak-host\nflag-leak\nflag-leak-card\nflag-hero\nflag-headline\nflag-card\npass-stack\npass-eyebrow\npass-title\npass-hero\nscrim\ncap\npass-under\npass-fixedbar\npass-scrubber-wrap\npass-scrubber-text\npass-scrubber-input"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <title>Text overflow fixture (browser-only)</title>\n <style>\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; align-items: start; }\n .col { padding: 16px; }\n .box { width: 160px; border: 1px solid #ddd; margin: 0 0 24px; padding: 8px; }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n white-space: nowrap;\n border-width: 0;\n }\n .sr-only-clip-path { clip-path: inset(50%); }\n .sr-only-legacy-clip { clip: rect(0, 0, 0, 0); }\n .sr-only-tiny-hidden { clip: auto; }\n .sr-only-clipped-wide {\n position: absolute;\n width: 160px;\n height: 20px;\n overflow: visible;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n .hidden-slide {\n opacity: 0;\n pointer-events: none;\n }\n .hidden-slide .pass-hidden-slide-overflow {\n display: block;\n width: 120px;\n white-space: nowrap;\n }\n </style>\n</head>\n<body>\n <div class=\"cols\">\n <!-- FLAG column: content forced wider than its box with no scroll affordance -->\n <section class=\"col flag\">\n <div class=\"box flag-nowrap\" style=\"white-space: nowrap\">A single long line of running text that refuses to wrap and clearly spills past its fixed-width box.</div>\n <div class=\"box flag-longword\">Supercalifragilisticexpialidocioussupercalifragilisticexpialidocious</div>\n <!-- Inline owner: the span has no client geometry, so only the rect-vs-container\n path can catch it. The parent box has no direct text and must not flag. -->\n <div class=\"box\"><span class=\"flag-inline-spill\" style=\"white-space: nowrap\">IOC-QARTOD-ARGO-PROFILES-SPILLING-WELL-PAST-THE-CELL</span></div>\n </section>\n\n <!-- PASS column: real scroll regions, preformatted code, wrapping text, scroll ancestors -->\n <section class=\"col pass\">\n <div class=\"box pass-scroll\" style=\"overflow-x: auto; white-space: nowrap\">The very same unwrapping line, but inside a genuine horizontal scroll region meant to scroll.</div>\n <pre class=\"box pass-pre\" style=\"overflow: visible\">a-very-long-preformatted-code-line-that-intentionally-extends-beyond-the-box-width</pre>\n <div class=\"box pass-wrap\">Ordinary wrapping paragraph text that stays comfortably within its container.</div>\n <div class=\"box\" style=\"overflow-x: auto\"><span class=\"pass-inside-scroll\" style=\"white-space: nowrap; display: inline-block\">A long line living inside a scroll ancestor, which must not be flagged.</span></div>\n <span class=\"pass-sr-only-clip-path sr-only sr-only-clip-path\">A screen-reader-only label with long text that should never draw a visible overflow finding.</span>\n <span class=\"pass-sr-only-legacy sr-only sr-only-legacy-clip\">A legacy clipped screen-reader-only label with long text that should not be flagged.</span>\n <span class=\"pass-sr-only-tiny-hidden sr-only sr-only-tiny-hidden\">A tiny overflow-hidden screen-reader-only label without a clip declaration should not be flagged.</span>\n <span class=\"pass-sr-only-clipped-wide sr-only-clipped-wide\">A fully clipped label with a normal-sized box and overflowing text should not be flagged.</span>\n <div class=\"hidden-slide\">\n <span class=\"pass-hidden-slide-overflow\">An inactive carousel slide can contain long text that overflows while hidden.</span>\n </div>\n <div class=\"box\"><span class=\"pass-inline-fits\" style=\"white-space: nowrap\">Fits fine</span></div>\n <div class=\"box\"><span class=\"pass-inline-wraps\">An ordinary inline span with wrapping text that stays inside its container across several lines.</span></div>\n </section>\n </div>\n</body>\n</html>\n",{"styleText":"\n body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }\n .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; align-items: start; }\n .col { padding: 16px; }\n .box { width: 160px; border: 1px solid #ddd; margin: 0 0 24px; padding: 8px; }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n white-space: nowrap;\n border-width: 0;\n }\n .sr-only-clip-path { clip-path: inset(50%); }\n .sr-only-legacy-clip { clip: rect(0, 0, 0, 0); }\n .sr-only-tiny-hidden { clip: auto; }\n .sr-only-clipped-wide {\n position: absolute;\n width: 160px;\n height: 20px;\n overflow: visible;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n .hidden-slide {\n opacity: 0;\n pointer-events: none;\n }\n .hidden-slide .pass-hidden-slide-overflow {\n display: block;\n width: 120px;\n white-space: nowrap;\n }\n \nstyle=\"white-space: nowrap\"\nstyle=\"white-space: nowrap\"\nstyle=\"overflow-x: auto; white-space: nowrap\"\nstyle=\"overflow: visible\"\nstyle=\"overflow-x: auto\"\nstyle=\"white-space: nowrap; display: inline-block\"\nstyle=\"white-space: nowrap\"","classText":"cols\ncol flag\nbox flag-nowrap\nbox flag-longword\nbox\nflag-inline-spill\ncol pass\nbox pass-scroll\nbox pass-pre\nbox pass-wrap\nbox\npass-inside-scroll\npass-sr-only-clip-path sr-only sr-only-clip-path\npass-sr-only-legacy sr-only sr-only-legacy-clip\npass-sr-only-tiny-hidden sr-only sr-only-tiny-hidden\npass-sr-only-clipped-wide sr-only-clipped-wide\nhidden-slide\npass-hidden-slide-overflow\nbox\npass-inline-fits\nbox\npass-inline-wraps"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typography Anti-Patterns — Should Flag</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background: #f9fafb;\n padding: 2rem;\n }\n h1 { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }\n h2 { font-size: 16px; font-weight: 600; margin: 2rem 0 0.75rem; color: #6b7280; }\n h3 { font-size: 15px; font-weight: 600; }\n p { font-size: 14px; color: #6b7280; margin-top: 0.25rem; }\n .caption { font-size: 13px; color: #6b7280; }\n </style>\n</head>\n<body>\n <h1>Typography Anti-Patterns</h1>\n <p>This page triggers three typography detections:</p>\n\n <h2>1. Overused Font</h2>\n <p>Inter is loaded from Google Fonts and set as the only font-family. It's the most common AI default.</p>\n\n <h2>2. Single Font</h2>\n <p>There's no second font for headings or display text. Everything uses Inter — no typographic variety.</p>\n\n <h2>3. Flat Type Hierarchy</h2>\n <p>The font sizes are 13px, 14px, 15px, 16px, 18px — all crammed into a 5px range. No visual contrast between heading and body.</p>\n <p class=\"caption\">This caption is barely distinguishable from body text.</p>\n\n <h3>A Subheading</h3>\n <p>Can you tell this is a subheading? Exactly.</p>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body {\n font-family: 'Inter', sans-serif;\n background: #f9fafb;\n padding: 2rem;\n }\n h1 { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }\n h2 { font-size: 16px; font-weight: 600; margin: 2rem 0 0.75rem; color: #6b7280; }\n h3 { font-size: 15px; font-weight: 600; }\n p { font-size: 14px; color: #6b7280; margin-top: 0.25rem; }\n .caption { font-size: 13px; color: #6b7280; }\n ","classText":"caption"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typography — Clean Patterns</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,700&family=Karla:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Karla', system-ui, sans-serif;\n background: #f9fafb;\n padding: 2rem;\n font-size: 16px;\n color: #111827;\n }\n h1 {\n font-family: 'Newsreader', Georgia, serif;\n font-size: 48px;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n h2 {\n font-family: 'Newsreader', Georgia, serif;\n font-size: 32px;\n font-weight: 700;\n margin: 2rem 0 0.75rem;\n }\n h3 { font-size: 24px; font-weight: 600; }\n p { font-size: 16px; color: #6b7280; margin-top: 0.25rem; }\n .caption { font-size: 12px; color: #6b7280; }\n </style>\n</head>\n<body>\n <h1>Good Typography</h1>\n <p>This page uses distinctive fonts, proper pairing, and strong hierarchy.</p>\n\n <h2>Two Font Families</h2>\n <p>Newsreader (serif) for headings, Karla for body. Clear contrast in both structure and personality, and neither face has been adopted into the current AI-default monoculture.</p>\n\n <h3>Strong Size Hierarchy</h3>\n <p>Sizes range from 12px to 48px — a 4:1 ratio with clear visual steps.</p>\n <p class=\"caption\">Caption text is clearly distinct from body.</p>\n<script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body {\n font-family: 'Karla', system-ui, sans-serif;\n background: #f9fafb;\n padding: 2rem;\n font-size: 16px;\n color: #111827;\n }\n h1 {\n font-family: 'Newsreader', Georgia, serif;\n font-size: 48px;\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n h2 {\n font-family: 'Newsreader', Georgia, serif;\n font-size: 32px;\n font-weight: 700;\n margin: 2rem 0 0.75rem;\n }\n h3 { font-size: 24px; font-weight: 600; }\n p { font-size: 16px; color: #6b7280; margin-top: 0.25rem; }\n .caption { font-size: 12px; color: #6b7280; }\n ","classText":"caption"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typography Anti-Patterns — Side by Side</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,700&family=Karla:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n margin: 0;\n padding: 24px;\n background: #f9fafb;\n color: #111827;\n font: 16px/1.5 system-ui, sans-serif;\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 32px;\n max-width: 1180px;\n margin: 0 auto;\n }\n\n .col {\n min-width: 0;\n }\n\n .col-label {\n margin: 0 0 14px;\n color: #475569;\n font-size: 13px;\n font-weight: 760;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .flag-type {\n font-family: 'Inter', sans-serif;\n background: #fdfdfd;\n padding: 22px;\n border: 1px solid #e5e7eb;\n }\n\n .flag-type h1 {\n margin: 0 0 8px;\n font-size: 18px;\n line-height: 1.2;\n }\n\n .flag-type h2 {\n margin: 24px 0 8px;\n color: #4b5563;\n font-size: 16px;\n line-height: 1.25;\n }\n\n .flag-type h3 {\n margin: 18px 0 4px;\n font-size: 15px;\n line-height: 1.25;\n }\n\n .flag-type p {\n margin: 0 0 10px;\n color: #4b5563;\n font-size: 14px;\n }\n\n .flag-type .caption {\n color: #6b7280;\n font-size: 13px;\n }\n\n .flag-type .tight-leading-demo {\n line-height: 1.05;\n }\n\n .flag-type .tiny-body-demo {\n color: #374151;\n font-size: 10px;\n line-height: 1.6;\n }\n\n .flag-type .caps-body-demo {\n text-transform: uppercase;\n }\n\n .flag-type .tracked-body-demo {\n letter-spacing: 0.08em;\n }\n\n .flag-type .justified-body-demo {\n text-align: justify;\n }\n\n .pass-type {\n background: #fdfdfd;\n padding: 22px;\n border: 1px solid #e5e7eb;\n }\n\n .pass-type h1,\n .pass-type h2 {\n font-family: 'Newsreader', Georgia, serif;\n }\n\n .pass-type h1 {\n margin: 0 0 10px;\n font-size: 48px;\n line-height: 0.98;\n font-weight: 700;\n }\n\n .pass-type h2 {\n margin: 32px 0 10px;\n font-size: 30px;\n line-height: 1.08;\n font-weight: 700;\n }\n\n .pass-type h3,\n .pass-type p,\n .pass-type .caption {\n font-family: 'Karla', system-ui, sans-serif;\n }\n\n .pass-type h3 {\n margin: 22px 0 6px;\n font-size: 22px;\n line-height: 1.15;\n }\n\n .pass-type p {\n margin: 0 0 12px;\n color: #374151;\n font-size: 16px;\n }\n\n .pass-type .caption {\n color: #4b5563;\n font-size: 12px;\n }\n </style>\n</head>\n<body>\n <div class=\"grid\">\n <section class=\"col\" data-col=\"flag\">\n <h2 class=\"col-label\">Should flag</h2>\n <article class=\"flag-type\">\n <h1>Typography Anti-Patterns</h1>\n <p>This side uses element-level typography failures that can be highlighted directly in the detector lab.</p>\n\n <h2>Tight Leading</h2>\n <p class=\"tight-leading-demo\">This paragraph has a line-height that is too tight for body copy. The lines press into each other and make scanning harder, especially once the text wraps across multiple lines in a production layout.</p>\n\n <h2>Tiny Body Text</h2>\n <p class=\"tiny-body-demo\">This body text is set at 10px, which is too small for real reading content and should be reserved for neither primary copy nor explanatory product text.</p>\n\n <h2>All-Caps Body</h2>\n <p class=\"caps-body-demo\">This entire paragraph is transformed to uppercase, which removes useful word shapes and makes longer body copy feel like a shout instead of a readable passage.</p>\n\n <h2>Wide Tracking</h2>\n <p class=\"tracked-body-demo\">This paragraph spreads every letter apart, a treatment that belongs on short labels at most, not on body copy that people need to read comfortably.</p>\n\n <h2>Justified Text</h2>\n <p class=\"justified-body-demo\">This paragraph uses justified alignment without automatic hyphenation. In narrow columns it creates uneven word spacing and distracting rivers through the text block.</p>\n\n <h2>Overused Font</h2>\n <p>Inter is also the dominant face on this side of the page, so the browser page-level detector has enough real text elements to show the global overused-font banner.</p>\n </article>\n </section>\n\n <section class=\"col\" data-col=\"pass\">\n <h2 class=\"col-label\">Should pass</h2>\n <article class=\"pass-type\">\n <h1>Good Typography</h1>\n <p>This side keeps readable body defaults, a real font pairing, clear scale, and visible hierarchy.</p>\n\n <h2>Two Font Families</h2>\n <p>Newsreader carries display text, while Karla handles reading surfaces and supporting labels.</p>\n\n <h3>Strong Size Hierarchy</h3>\n <p>Sizes range from 12px to 48px with distinct roles for heading, subheading, body, and caption.</p>\n <p class=\"caption\">Caption text is intentionally smaller but still readable.</p>\n </article>\n </section>\n </div>\n\n <script src=\"/js/detect-antipatterns-browser.js\"></script>\n</body>\n</html>\n",{"styleText":"\n body {\n margin: 0;\n padding: 24px;\n background: #f9fafb;\n color: #111827;\n font: 16px/1.5 system-ui, sans-serif;\n }\n\n .grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 32px;\n max-width: 1180px;\n margin: 0 auto;\n }\n\n .col {\n min-width: 0;\n }\n\n .col-label {\n margin: 0 0 14px;\n color: #475569;\n font-size: 13px;\n font-weight: 760;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .flag-type {\n font-family: 'Inter', sans-serif;\n background: #fdfdfd;\n padding: 22px;\n border: 1px solid #e5e7eb;\n }\n\n .flag-type h1 {\n margin: 0 0 8px;\n font-size: 18px;\n line-height: 1.2;\n }\n\n .flag-type h2 {\n margin: 24px 0 8px;\n color: #4b5563;\n font-size: 16px;\n line-height: 1.25;\n }\n\n .flag-type h3 {\n margin: 18px 0 4px;\n font-size: 15px;\n line-height: 1.25;\n }\n\n .flag-type p {\n margin: 0 0 10px;\n color: #4b5563;\n font-size: 14px;\n }\n\n .flag-type .caption {\n color: #6b7280;\n font-size: 13px;\n }\n\n .flag-type .tight-leading-demo {\n line-height: 1.05;\n }\n\n .flag-type .tiny-body-demo {\n color: #374151;\n font-size: 10px;\n line-height: 1.6;\n }\n\n .flag-type .caps-body-demo {\n text-transform: uppercase;\n }\n\n .flag-type .tracked-body-demo {\n letter-spacing: 0.08em;\n }\n\n .flag-type .justified-body-demo {\n text-align: justify;\n }\n\n .pass-type {\n background: #fdfdfd;\n padding: 22px;\n border: 1px solid #e5e7eb;\n }\n\n .pass-type h1,\n .pass-type h2 {\n font-family: 'Newsreader', Georgia, serif;\n }\n\n .pass-type h1 {\n margin: 0 0 10px;\n font-size: 48px;\n line-height: 0.98;\n font-weight: 700;\n }\n\n .pass-type h2 {\n margin: 32px 0 10px;\n font-size: 30px;\n line-height: 1.08;\n font-weight: 700;\n }\n\n .pass-type h3,\n .pass-type p,\n .pass-type .caption {\n font-family: 'Karla', system-ui, sans-serif;\n }\n\n .pass-type h3 {\n margin: 22px 0 6px;\n font-size: 22px;\n line-height: 1.15;\n }\n\n .pass-type p {\n margin: 0 0 12px;\n color: #374151;\n font-size: 16px;\n }\n\n .pass-type .caption {\n color: #4b5563;\n font-size: 12px;\n }\n ","classText":"grid\ncol\ncol-label\nflag-type\ntight-leading-demo\ntiny-body-demo\ncaps-body-demo\ntracked-body-demo\njustified-body-demo\ncol\ncol-label\npass-type\ncaption"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>undersized-ui-text fixture</title>\n<style>\n /* Explicit pixel dimensions because jsdom does no layout. */\n body { font-family: system-ui, sans-serif; font-size: 16px; }\n .col { display: inline-block; width: 480px; vertical-align: top; }\n\n /* --- should-flag styles --- */\n .nav-link { font-size: 8px; }\n .category { font-size: 8px; }\n .meta { font-size: 9px; }\n .btn-small { font-size: 10px; width: 120px; height: 24px; }\n .cell-small { font-size: 9px; }\n .caps-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }\n .footer-link { font-size: 8px; }\n\n /* --- should-pass styles --- */\n .legal { font-size: 10px; line-height: 1.5; } /* non-interactive footer smallprint at 10px */\n .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); font-size: 4px; }\n .sup-marker { font-size: 8px; }\n .sub-marker { font-size: 8px; }\n .em-parent { font-size: 20px; }\n .em-child { font-size: 0.6em; } /* resolves to 12px, above the floor */\n .mock-terminal { width: 400px; }\n .term-line { font-size: 9px; } /* legitimately small code/terminal text */\n .normal-link { font-size: 12px; } /* at the floor, allowed */\n</style>\n</head>\n<body>\n\n<!-- ================= SHOULD FLAG (functional/UI text below the 11px floor) ================= -->\n<div class=\"col\" id=\"should-flag\">\n <h2>Should flag</h2>\n\n <!-- interactive: nav link at 8px -->\n <nav aria-label=\"primary\">\n <a href=\"/docs\" class=\"nav-link\">Flag Nav Link</a>\n </nav>\n\n <!-- non-interactive furniture: category label at 8px -->\n <span class=\"category\">Flag Category</span>\n\n <!-- non-interactive furniture: meta row at 9px -->\n <span class=\"meta\">Flag Meta Row</span>\n\n <!-- interactive: button label at 10px -->\n <button type=\"button\" class=\"btn-small\">Flag Button</button>\n\n <!-- structural furniture: table cell at 9px -->\n <table>\n <tbody>\n <tr><td class=\"cell-small\">Flag Table Cell</td></tr>\n </tbody>\n </table>\n\n <!-- decorative letterspaced uppercase micro-label at 10px: STILL functional, not exempt -->\n <span class=\"caps-label\">Flag Caps Label</span>\n\n <!-- interactive text in a footer stays on the 11px floor: footer link at 8px -->\n <footer>\n <a href=\"/privacy\" class=\"footer-link\">Flag Footer Link</a>\n </footer>\n</div>\n\n<!-- ================= SHOULD PASS ================= -->\n<div class=\"col\" id=\"should-pass\">\n <h2>Should pass</h2>\n\n <!-- non-interactive legal fine print in a footer at 10px: floor drops to 10px for smallprint -->\n <footer>\n <p class=\"legal\">Pass Legal Fine Print copyright 2026 all rights reserved across this jurisdiction</p>\n </footer>\n\n <!-- visually-hidden / screen-reader text: never rendered, exempt -->\n <span class=\"sr-only\">Pass Sr Only</span>\n\n <!-- sup / sub markers are exempt by tag -->\n <p>Reference<sup class=\"sup-marker\">Pass Sup Marker</sup> and water<sub class=\"sub-marker\">Pass Sub Marker</sub></p>\n\n <!-- em-sized text relative to a large parent computes to 12px, above the floor -->\n <div class=\"em-parent\"><span class=\"em-child\">Pass Em Sized</span></div>\n\n <!-- code / terminal mock: legitimately small, exempt -->\n <div class=\"mock-terminal\">\n <span class=\"term-line\">Pass Terminal Line</span>\n </div>\n\n <!-- functional text exactly at the 12px floor is allowed -->\n <a href=\"/home\" class=\"normal-link\">Pass Normal Link</a>\n</div>\n\n</body>\n</html>\n",{"styleText":"\n /* Explicit pixel dimensions because jsdom does no layout. */\n body { font-family: system-ui, sans-serif; font-size: 16px; }\n .col { display: inline-block; width: 480px; vertical-align: top; }\n\n /* --- should-flag styles --- */\n .nav-link { font-size: 8px; }\n .category { font-size: 8px; }\n .meta { font-size: 9px; }\n .btn-small { font-size: 10px; width: 120px; height: 24px; }\n .cell-small { font-size: 9px; }\n .caps-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }\n .footer-link { font-size: 8px; }\n\n /* --- should-pass styles --- */\n .legal { font-size: 10px; line-height: 1.5; } /* non-interactive footer smallprint at 10px */\n .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); font-size: 4px; }\n .sup-marker { font-size: 8px; }\n .sub-marker { font-size: 8px; }\n .em-parent { font-size: 20px; }\n .em-child { font-size: 0.6em; } /* resolves to 12px, above the floor */\n .mock-terminal { width: 400px; }\n .term-line { font-size: 9px; } /* legitimately small code/terminal text */\n .normal-link { font-size: 12px; } /* at the floor, allowed */\n","classText":"col\nnav-link\ncategory\nmeta\nbtn-small\ncell-small\ncaps-label\nfooter-link\ncol\nlegal\nsr-only\nsup-marker\nsub-marker\nem-parent\nem-child\nmock-terminal\nterm-line\nnormal-link"}],"result":[]}
|
||
{"args":["<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Visual Contrast Fixture</title>\n <style>\n :root {\n --paper: #f7f3ee;\n --ink: #171717;\n --muted: #566174;\n }\n\n body {\n margin: 0;\n padding: 32px;\n background: var(--paper);\n color: var(--ink);\n font-family: system-ui, sans-serif;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 24px;\n max-width: 980px;\n margin: 0 auto;\n }\n\n .column {\n display: grid;\n gap: 14px;\n }\n\n .column > h2 {\n margin: 0 0 2px;\n color: var(--muted);\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.08em;\n line-height: 1.4;\n text-transform: uppercase;\n }\n\n .image-card {\n position: relative;\n display: grid;\n align-content: end;\n min-height: 180px;\n padding: 28px;\n border-radius: 8px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n }\n\n .image-card p {\n position: relative;\n z-index: 1;\n max-width: 28ch;\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.45;\n }\n\n .light-image {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23ece8df'/%3E%3Ccircle cx='308' cy='58' r='132' fill='%23faf7f0'/%3E%3Cpath d='M0 186c52-22 92-26 142-8s98 18 148-8 92-22 130 0v70H0z' fill='%23f5efe4'/%3E%3C/svg%3E\");\n }\n\n .pale-pattern {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23edf2f7'/%3E%3Cg fill='%23f8fafc'%3E%3Ccircle cx='60' cy='64' r='42'/%3E%3Ccircle cx='182' cy='142' r='58'/%3E%3Ccircle cx='336' cy='84' r='74'/%3E%3C/g%3E%3Cg stroke='%23dbe4ef' stroke-width='14' opacity='.55'%3E%3Cpath d='M-20 220C74 112 150 94 232 164s138 46 214-62' fill='none'/%3E%3C/g%3E%3C/svg%3E\");\n }\n\n .mist-image {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23b9c4cf'/%3E%3Cpath d='M0 52c74-28 138-22 194 18s124 38 226-28v198H0z' fill='%23cbd3dc'/%3E%3Ccircle cx='82' cy='176' r='68' fill='%23aeb8c4'/%3E%3C/svg%3E\");\n }\n\n .dark-image {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23191b20'/%3E%3Ccircle cx='316' cy='50' r='132' fill='%232d3440'/%3E%3Cpath d='M0 182c70-48 138-42 204-6s128 24 216-58v122H0z' fill='%23101318'/%3E%3C/svg%3E\");\n }\n\n .underlay {\n isolation: isolate;\n background: #1a1d24;\n }\n\n .underlay.light-shell {\n background: #f5f2ea;\n }\n\n .underlay img,\n .underlay svg {\n position: absolute;\n inset: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .underlay svg {\n display: block;\n }\n </style>\n</head>\n<body>\n <main class=\"grid\">\n <section class=\"column\" data-col=\"flag\">\n <h2>Should flag after pixel sampling</h2>\n\n <article class=\"image-card light-image\">\n <p style=\"color: rgb(255, 255, 255);\">White text on light image should be sampled by pixel contrast.</p>\n </article>\n\n <article class=\"image-card dark-image\">\n <p style=\"color: rgb(28, 30, 35);\">Dark text on dark image should be sampled by pixel contrast.</p>\n </article>\n\n <article class=\"image-card pale-pattern\">\n <p style=\"color: rgba(255, 255, 255, 0.72);\">Translucent white text on a pale pattern should use rendered pixels.</p>\n </article>\n\n <article class=\"image-card mist-image\">\n <p style=\"color: rgb(138, 146, 156);\">Muted gray text on a misty image should be sampled by pixel contrast.</p>\n </article>\n </section>\n\n <section class=\"column\" data-col=\"pass\">\n <h2>Should pass after pixel sampling</h2>\n\n <article class=\"image-card dark-image\">\n <p style=\"color: rgb(250, 247, 239);\">White text on dark image should pass the pixel contrast fallback.</p>\n </article>\n\n <article class=\"image-card light-image\">\n <p style=\"color: rgb(31, 35, 42);\">Dark text on light image should pass the pixel contrast fallback.</p>\n </article>\n\n <article class=\"image-card underlay\">\n <img alt=\"\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23141920'/%3E%3Ccircle cx='318' cy='70' r='126' fill='%23293442'/%3E%3C/svg%3E\">\n <p style=\"color: rgb(246, 242, 232);\">White text over a dark image underlay should pass.</p>\n </article>\n\n <article class=\"image-card underlay light-shell\">\n <svg viewBox=\"0 0 420 240\" aria-hidden=\"true\">\n <rect width=\"420\" height=\"240\" fill=\"#f3eee4\"></rect>\n <circle cx=\"86\" cy=\"70\" r=\"68\" fill=\"#fffaf2\"></circle>\n <path d=\"M0 176c72-24 132-22 190 6s128 30 230-34v92H0z\" fill=\"#e5dccd\"></path>\n </svg>\n <p style=\"color: rgb(35, 31, 27);\">Dark text over a light SVG underlay should pass.</p>\n </article>\n\n <article class=\"image-card light-image\" aria-hidden=\"true\">\n <p style=\"color: rgb(255, 255, 255);\">Hidden mockup text on a light image should not be sampled.</p>\n </article>\n </section>\n </main>\n</body>\n</html>\n",{"styleText":"\n :root {\n --paper: #f7f3ee;\n --ink: #171717;\n --muted: #566174;\n }\n\n body {\n margin: 0;\n padding: 32px;\n background: var(--paper);\n color: var(--ink);\n font-family: system-ui, sans-serif;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 24px;\n max-width: 980px;\n margin: 0 auto;\n }\n\n .column {\n display: grid;\n gap: 14px;\n }\n\n .column > h2 {\n margin: 0 0 2px;\n color: var(--muted);\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.08em;\n line-height: 1.4;\n text-transform: uppercase;\n }\n\n .image-card {\n position: relative;\n display: grid;\n align-content: end;\n min-height: 180px;\n padding: 28px;\n border-radius: 8px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n }\n\n .image-card p {\n position: relative;\n z-index: 1;\n max-width: 28ch;\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.45;\n }\n\n .light-image {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23ece8df'/%3E%3Ccircle cx='308' cy='58' r='132' fill='%23faf7f0'/%3E%3Cpath d='M0 186c52-22 92-26 142-8s98 18 148-8 92-22 130 0v70H0z' fill='%23f5efe4'/%3E%3C/svg%3E\");\n }\n\n .pale-pattern {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23edf2f7'/%3E%3Cg fill='%23f8fafc'%3E%3Ccircle cx='60' cy='64' r='42'/%3E%3Ccircle cx='182' cy='142' r='58'/%3E%3Ccircle cx='336' cy='84' r='74'/%3E%3C/g%3E%3Cg stroke='%23dbe4ef' stroke-width='14' opacity='.55'%3E%3Cpath d='M-20 220C74 112 150 94 232 164s138 46 214-62' fill='none'/%3E%3C/g%3E%3C/svg%3E\");\n }\n\n .mist-image {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23b9c4cf'/%3E%3Cpath d='M0 52c74-28 138-22 194 18s124 38 226-28v198H0z' fill='%23cbd3dc'/%3E%3Ccircle cx='82' cy='176' r='68' fill='%23aeb8c4'/%3E%3C/svg%3E\");\n }\n\n .dark-image {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Crect width='420' height='240' fill='%23191b20'/%3E%3Ccircle cx='316' cy='50' r='132' fill='%232d3440'/%3E%3Cpath d='M0 182c70-48 138-42 204-6s128 24 216-58v122H0z' fill='%23101318'/%3E%3C/svg%3E\");\n }\n\n .underlay {\n isolation: isolate;\n background: #1a1d24;\n }\n\n .underlay.light-shell {\n background: #f5f2ea;\n }\n\n .underlay img,\n .underlay svg {\n position: absolute;\n inset: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .underlay svg {\n display: block;\n }\n \nstyle=\"color: rgb(255, 255, 255);\"\nstyle=\"color: rgb(28, 30, 35);\"\nstyle=\"color: rgba(255, 255, 255, 0.72);\"\nstyle=\"color: rgb(138, 146, 156);\"\nstyle=\"color: rgb(250, 247, 239);\"\nstyle=\"color: rgb(31, 35, 42);\"\nstyle=\"color: rgb(246, 242, 232);\"\nstyle=\"color: rgb(35, 31, 27);\"\nstyle=\"color: rgb(255, 255, 255);\"","classText":"grid\ncolumn\nimage-card light-image\nimage-card dark-image\nimage-card pale-pattern\nimage-card mist-image\ncolumn\nimage-card dark-image\nimage-card light-image\nimage-card underlay\nimage-card underlay light-shell\nimage-card light-image"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html><head>\n<!-- impeccable-disable low-contrast -- exported brand doc -->\n<style>\n .faint { color: #ff00aa; }\n .brand { font-family: Verdana } /* impeccable-disable-line design-system-font */\n .also { font-family: Verdana }\n</style></head>\n<body><p class=\"faint\">faint text</p><p class=\"brand\">x</p><p class=\"also\">y</p></body></html>\n",{"styleText":"\n .faint { color: #ff00aa; }\n .brand { font-family: Verdana } /* impeccable-disable-line design-system-font */\n .also { font-family: Verdana }\n","classText":"faint\nbrand\nalso"}],"result":[]}
|
||
{"args":["<!doctype html>\n<html><head><style>\n .card { font-family: Verdana, sans-serif; }\n .brand { font-family: Inter, sans-serif; }\n .dot { width: 8px; height: 8px; border-radius: 50%; animation: blink 1s infinite; }\n .off { color: #ff00aa; }\n</style></head>\n<body>\n <div class=\"card\">Hi</div>\n <p class=\"brand\">Brand</p>\n <span class=\"dot\"></span>\n <p class=\"off\">Off palette</p>\n</body></html>\n",{"styleText":"\n .card { font-family: Verdana, sans-serif; }\n .brand { font-family: Inter, sans-serif; }\n .dot { width: 8px; height: 8px; border-radius: 50%; animation: blink 1s infinite; }\n .off { color: #ff00aa; }\n","classText":"card\nbrand\ndot\noff"}],"result":[{"id":"pulsing-dot","snippet":".dot — 8x8px dot with infinite \"blink\" animation","selector":".dot"}]}
|