253 lines
11 KiB
Python
253 lines
11 KiB
Python
"""Unit: the phase-25 still-background contract (source pins).
|
|
|
|
Owner report (2026-08-25, chat): the animated background "jitters down
|
|
and to the right every second and it slowly blinks brighter and darker.
|
|
It should be smooth, fluxuating, dimming and brightening, but not
|
|
moving. Different bright spots should slowly fade in and out."
|
|
|
|
The diagnosis (`.agent/reports/25_background_no_motion/`) found both
|
|
root causes in the phase-22 design:
|
|
- "jitters down and to the right" = the grid's 44px/60s drift
|
|
(0.73px/s, diagonally down-right) — a 1px grid line translated
|
|
sub-pixel by sub-pixel rasterizes with per-frame stepping;
|
|
- "slowly blinks" = the whole-layer 14s opacity 0.85↔1 +
|
|
scale(1)↔scale(1.05) pulse — one synchronized pulse reads as a blink.
|
|
|
|
The fix (styles.css, pure CSS, zero JS, no `filter` — A11): the grid is
|
|
a STATIC texture (no animation, no bg-grid-drift keyframes), and three
|
|
independent soft glow spots (body::after, html::before, html::after)
|
|
each run their own SLOW opacity-only fade (26/34/42s, ease-in-out,
|
|
negative delays → out of phase; LCM 4641s → the composite pattern
|
|
effectively never repeats within a viewing session), so the total light
|
|
fluxuates smoothly and irregularly — no blink, no jitter, no movement.
|
|
|
|
Story: .agent/user_stories/background-no-motion.md. Browser behavior
|
|
(no motion, visible fades, no occlusion, no overflow) is E2E-covered by
|
|
tests/e2e/test_background_no_motion.py (task 02).
|
|
"""
|
|
from __future__ import annotations
|
|
|
|
import re
|
|
|
|
from tests.unit.test_background_animation import _css, _css_no_comments, _rule_block
|
|
|
|
ALL_LAYERS = ("body::before", "body::after", "html::before", "html::after")
|
|
|
|
# (layer, keyframes name, duration shorthand, single-spot gradient)
|
|
GLOW_SPOTS = (
|
|
("body::after", "bg-glow-a", "animation: bg-glow-a 26s ease-in-out infinite",
|
|
"radial-gradient(circle 56rem at 12% 8%, rgb(109 120 242 / 0.14), transparent 62%)"),
|
|
("html::before", "bg-glow-b", "animation: bg-glow-b 34s ease-in-out -12s infinite",
|
|
"radial-gradient(circle 60rem at 88% 92%, rgb(34 211 238 / 0.10), transparent 62%)"),
|
|
("html::after", "bg-glow-c", "animation: bg-glow-c 42s ease-in-out -23s infinite",
|
|
"radial-gradient(circle 52rem at 14% 86%, rgb(109 120 242 / 0.09), transparent 62%)"),
|
|
)
|
|
|
|
|
|
def _bg_keyframes(css: str) -> dict[str, str]:
|
|
"""Name → body for every @keyframes bg-* rule (balanced braces —
|
|
works for the one-line blocks and a multi-line reformat alike)."""
|
|
out: dict[str, str] = {}
|
|
for m in re.finditer(r"@keyframes (bg-[A-Za-z0-9-]+)\s*\{", css):
|
|
start, depth, i = m.end(), 1, m.end()
|
|
while i < len(css) and depth:
|
|
if css[i] == "{":
|
|
depth += 1
|
|
elif css[i] == "}":
|
|
depth -= 1
|
|
i += 1
|
|
out[m.group(1)] = css[start:i - 1]
|
|
return out
|
|
|
|
|
|
# --------------------------------------------------------------------------
|
|
# No movement — the grid is a static texture, and no bg-* keyframe may
|
|
# animate anything but opacity
|
|
# --------------------------------------------------------------------------
|
|
|
|
|
|
def test_grid_has_no_animation() -> None:
|
|
"""body::before must carry NO animation declaration — the phase-22
|
|
0.73px/s drift rasterized as a once-per-second down-right jitter; the
|
|
owner wants no movement (2026-08-25)."""
|
|
block = _rule_block(_css(), "body::before")
|
|
assert "animation" not in block, (
|
|
"body::before must not animate (the no-movement contract)"
|
|
)
|
|
|
|
|
|
def test_drift_and_breathe_keyframes_are_deleted() -> None:
|
|
"""@keyframes bg-grid-drift and @keyframes bg-glow-breathe are gone —
|
|
the names must not appear anywhere in the file (no declaration, no
|
|
keyframe block, no stale comment)."""
|
|
css = _css()
|
|
assert "bg-grid-drift" not in css, "bg-grid-drift must be deleted"
|
|
assert "bg-glow-breathe" not in css, "bg-glow-breathe must be deleted"
|
|
|
|
|
|
def test_grid_keeps_its_static_texture() -> None:
|
|
"""The owner rejected the grid's MOTION, not the grid: 44px cells,
|
|
1px lines at 60% --line alpha, and the widened radial mask (both the
|
|
-webkit- and standard mask properties) stay."""
|
|
block = _rule_block(_css(), "body::before")
|
|
assert "background-size: 44px 44px" in block
|
|
assert (
|
|
"linear-gradient(to right, rgb(38 48 74 / 0.6) 1px, transparent 1px)" in block
|
|
), "grid must keep horizontal 1px lines at 60% --line"
|
|
assert (
|
|
"linear-gradient(to bottom, rgb(38 48 74 / 0.6) 1px, transparent 1px)" in block
|
|
), "grid must keep vertical 1px lines at 60% --line"
|
|
mask = "radial-gradient(140% 110% at 50% 0%, black 40%, transparent 90%)"
|
|
assert f"-webkit-mask-image: {mask};" in block
|
|
assert f"mask-image: {mask};" in block
|
|
|
|
|
|
def test_exactly_three_bg_glow_keyframes_exist() -> None:
|
|
"""Exactly three bg-* keyframe blocks: bg-glow-a/b/c (the old
|
|
bg-grid-drift and bg-glow-breathe are deleted)."""
|
|
assert set(_bg_keyframes(_css())) == {"bg-glow-a", "bg-glow-b", "bg-glow-c"}
|
|
|
|
|
|
def test_bg_keyframes_animate_opacity_only() -> None:
|
|
"""The no-movement contract: across ALL frames of ALL bg-* keyframes
|
|
the set of declared properties is exactly {opacity} — no transform,
|
|
scale, background-position, nothing else may appear."""
|
|
props: set[str] = set()
|
|
for _name, body in _bg_keyframes(_css()).items():
|
|
props |= set(re.findall(r"([A-Za-z-]+)\s*:", body))
|
|
assert props == {"opacity"}, (
|
|
f"bg-* keyframes must animate only opacity, found {sorted(props)}"
|
|
)
|
|
|
|
|
|
def test_glow_layers_declare_no_transform_or_position_animation() -> None:
|
|
"""The three glow layers themselves must not declare transform or
|
|
background-position either (the no-movement contract applies to the
|
|
layers, not just their keyframes)."""
|
|
for sel, _name, _anim, _grad in GLOW_SPOTS:
|
|
block = _rule_block(_css(), sel)
|
|
assert "transform" not in block, f"{sel} must not declare transform"
|
|
assert "background-position" not in block, (
|
|
f"{sel} must not declare background-position"
|
|
)
|
|
|
|
|
|
# --------------------------------------------------------------------------
|
|
# Three distinct bright spots, each on its own slow opacity-only fade
|
|
# --------------------------------------------------------------------------
|
|
|
|
|
|
def test_each_spot_runs_its_own_slow_opacity_fade() -> None:
|
|
"""body::after (phase-08 indigo, 26s), html::before (phase-08 cyan,
|
|
34s, -12s delay), html::after (third indigo, 42s, -23s delay) — each
|
|
glow layer's background-image is EXACTLY the single radial gradient
|
|
from the spec (color, radius, position, 62% transparent stop)."""
|
|
for sel, _name, animation, gradient in GLOW_SPOTS:
|
|
block = _rule_block(_css(), sel)
|
|
assert animation in block, f"{sel} must run {animation}"
|
|
assert f"background-image: {gradient};" in block, (
|
|
f"{sel} must carry exactly one radial gradient: {gradient}"
|
|
)
|
|
|
|
|
|
def test_glow_durations_are_distinct_and_slow() -> None:
|
|
"""The three cycles are out of phase (distinct durations) and each is
|
|
slow (>= 20s); LCM(26, 34, 42) = 4641s, so the composite pattern
|
|
effectively never repeats within a viewing session."""
|
|
durations: list[float] = []
|
|
for sel, name, _anim, _grad in GLOW_SPOTS:
|
|
block = _rule_block(_css(), sel)
|
|
m = re.search(rf"animation: {name}\s+([\d.]+)s", block)
|
|
assert m, f"{sel} must run its {name} fade"
|
|
durations.append(float(m.group(1)))
|
|
assert len(set(durations)) == len(durations), (
|
|
"the three spot cycles must be out of phase (distinct durations)"
|
|
)
|
|
assert all(d >= 20 for d in durations), (
|
|
f"each spot fade must be slow (>= 20s), got {durations}"
|
|
)
|
|
|
|
|
|
def test_glow_keyframes_low_and_high_opacities() -> None:
|
|
"""Each cycle: 0%/100% at its own low opacity (0.25 / 0.20 / 0.15),
|
|
50% at 1 — smooth fade in and out, never a hard cut."""
|
|
keyframes = _bg_keyframes(_css())
|
|
lows = {"bg-glow-a": 0.25, "bg-glow-b": 0.20, "bg-glow-c": 0.15}
|
|
for name, low in lows.items():
|
|
body = keyframes[name]
|
|
m = re.search(r"0%,\s*100%\s*\{\s*opacity:\s*([\d.]+)\s*;\s*\}", body)
|
|
assert m and float(m.group(1)) == low, (
|
|
f"{name} must start/end at opacity {low}"
|
|
)
|
|
m = re.search(r"50%\s*\{\s*opacity:\s*([\d.]+)\s*;\s*\}", body)
|
|
assert m and float(m.group(1)) == 1.0, (f"{name} must peak at opacity 1")
|
|
|
|
|
|
# --------------------------------------------------------------------------
|
|
# Layer plumbing — the no-occlusion contract across all four layers
|
|
# --------------------------------------------------------------------------
|
|
|
|
|
|
def test_all_four_layers_are_fixed_zminus1_noninteractive() -> None:
|
|
"""All four background pseudo-layers stay behind the content and can
|
|
never intercept input: fixed, full-viewport, z-index -1,
|
|
pointer-events none, with pseudo content (UI Structure Check: layers
|
|
behind content, no 360px overflow — the layers are fixed; inset: 0)."""
|
|
for sel in ALL_LAYERS:
|
|
block = _rule_block(_css(), sel)
|
|
assert "position: fixed" in block, f"{sel} must stay position:fixed"
|
|
assert "inset: 0" in block, f"{sel} must stay full-viewport (inset: 0)"
|
|
assert "z-index: -1" in block, f"{sel} must stay z-index:-1"
|
|
assert "pointer-events: none" in block, f"{sel} must stay click-through"
|
|
assert 'content: ""' in block, f"{sel} must keep its pseudo content"
|
|
|
|
|
|
def test_html_owns_canvas_and_body_stays_transparent() -> None:
|
|
"""The no-occlusion contract: <html> keeps the var(--bg) canvas;
|
|
<body> stays transparent and non-stacking — or the z-index:-1 layers
|
|
(including the new html::before / html::after spots) would be painted
|
|
over."""
|
|
html_block = _rule_block(_css(), "html")
|
|
assert "background: var(--bg)" in html_block, (
|
|
"html must keep background: var(--bg) (the page canvas)"
|
|
)
|
|
body_block = _rule_block(_css(), "body")
|
|
assert "background: transparent" in body_block, (
|
|
"body must keep background: transparent so the layers show"
|
|
)
|
|
for prop in ("z-index", "transform", "opacity", "filter"):
|
|
assert prop + ":" not in body_block, (
|
|
f"body must not create a stacking context (found {prop})"
|
|
)
|
|
|
|
|
|
# --------------------------------------------------------------------------
|
|
# Reduced motion + phase-08 anchors (no filter, no blur, zero JS)
|
|
# --------------------------------------------------------------------------
|
|
|
|
|
|
def test_reduced_motion_stills_all_four_layers() -> None:
|
|
"""prefers-reduced-motion: reduce must still ALL FOUR layers together
|
|
(body::before, body::after, html::before, html::after) with
|
|
animation: none — the typing/spinner/thinking blocks are untouched."""
|
|
blocks = re.findall(
|
|
r"@media \(prefers-reduced-motion: reduce\)\s*\{([\s\S]*?)\n\}", _css()
|
|
)
|
|
assert any(
|
|
all(sel in b for sel in ALL_LAYERS) and "animation: none" in b
|
|
for b in blocks
|
|
), "a reduced-motion block must still all four background layers"
|
|
|
|
|
|
def test_no_filter_in_any_layer_and_no_blur_anywhere() -> None:
|
|
"""The phase-08 performance anchor: no `filter` in any background
|
|
layer block, and no `blur` anywhere in styles.css (comments
|
|
stripped)."""
|
|
for sel in ALL_LAYERS:
|
|
assert "filter" not in _rule_block(_css(), sel), (
|
|
f"{sel} must not use any filter"
|
|
)
|
|
assert "blur" not in _css_no_comments(), (
|
|
"no filter: blur anywhere in styles.css (phase-08 perf anchor)"
|
|
)
|