Skip to content

fix: unclip filter drop-shadow demonstration - #12

Merged
FullThrottle83 merged 5 commits into
mainfrom
arena/01a0ddd3-0-js
Sep 26, 2026
Merged

FullThrottle83 merged 5 commits into
mainfrom
arena/01a0ddd3-0-js

Conversation

@arena-ai-coding-agent

@arena-ai-coding-agent arena-ai-coding-agent Bot commented Sep 26, 2026 •

Copy link
Copy Markdown
Contributor

Summary

The filter: drop-shadow() teaching demo was clipped by the shared .swatch { overflow: hidden } rule. This PR makes only that swatch overflow-visible so the glow is painted outside the motif, while preserving the shared fragments and all other demonstrations.

Cause and fix

  • Cause: .f-drop .swatch-yta applied drop-shadow(), but its ancestor .swatch established an overflow clipping context. The filter declaration was active; the outer filter output was simply discarded at the swatch boundary.
  • Fix: the canonical demos/filter-drop-shadow.html source now adds .f-drop { overflow: visible }. The surface gets border-radius: 9px 9px 0 0 so opening the clip does not expose square top corners. The rule is in the canonical source, so the generated copied snippet contains it too.
  • The shared swatch.css, swatch-solo.css, and filter-motiv.css fragments are unchanged. No runtime JavaScript, dependencies, support metadata, or generator architecture changed.

Exact files

  • demos/filter-drop-shadow.html: scoped overflow correction and surface corner geometry.
  • index.html: generated live CSS and copied textarea regenerated from that source.
  • tests/demo-source.mjs: pixel-based regression coverage for the live generated demo and independent snippet; samples the host outside the swatch bounds, checks overflow/radii, checks laboratory values 0 and 8, and exercises 375/1280px and light/dark snippet rendering.
  • scripts/build.test.mjs: locks the drop-shadow source ownership and exact snippet selectors.
  • tests/demo-parity.mjs: the smallest explicit parity normalization for this approved visual change: only overflow and the intentional surface border-radius, in addition to the existing migration class token. All other measured properties remain strict.

Evidence

The browser regression measures actual screenshot pixels, not only computed style:

  • It compares filtered and unfiltered motif screenshots.
  • It samples the host screenshot in the pixels outside .swatch-yta; an interior brightness change cannot satisfy the assertion.
  • It requires a non-zero bright/warm outer ring for the filtered rendering and no ring for the unfiltered reference.
  • It verifies the live laboratory transitions from radius 0 (no outer blur) to radius 8 (stronger outer glow).
  • It independently loads the copied textarea with Grundpaketet, and repeats the outer-ring check at 375px and 1280px in both color schemes.

Representative screenshots are produced by the existing browser screenshot/parity infrastructure (tests/demo-source.mjs and tests/demo-parity.mjs --shots ...); the historical baseline is not overwritten. The corrected result is intentionally not pixel-identical to the historical drop-shadow baseline because the previously clipped outer pixels are now painted.

Regression scope

  • Other seven filter demos keep their existing overflow and dimensions.
  • All five gradient demos and the shared filter motif remain unchanged.
  • The static suite confirms 133 cards, 134 register entries, and zero runtime scripts.

Verification

  • npm run build ✅
  • npm run build:check ✅
  • npm run check ✅
  • node scripts/build.test.mjs ✅
  • npm run test:browser ⚠️ local environment could not download the pinned Playwright Chromium executable (cdn.playwright.dev connection reset). The mandatory browser job is configured unchanged and will run in GitHub Actions.

Independent CI review (HEAD ee7bca43d1cb21ae9d70c0b637303c13fb27d2bb): The first browser run failed only because an inherited standalone-snippet test still required exactly two .f-* selectors. The intended .f-drop { overflow: visible; } adds a third. Updated that test to assert the exact expected selector set for all eight filter demos, with the third selector permitted only for drop-shadow. The latest workflow run is green in both mandatory jobs, including standalone painted-glow verification and full measured parity. The historical seven cross-browser text-metric warnings remain. No shared fragments or baseline files were changed by this follow-up.

Please keep this PR open and unmerged; the intended CI jobs are the repository's two existing required jobs.

FullThrottle83 and others added 5 commits September 26, 2026 13:10
Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
@FullThrottle83
FullThrottle83 merged commit de45f6a into main Sep 26, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant