amy: validation 2 — 7 PASS / 1 FAIL (opencd.css 254 lines over 250 cap)
Verified 8 criteria across all 3 templates + opencd.css: (1) Zero <style> or inline CSS — PASS (links only) (2) CSS reset present — PASS (9 rules, lines 92-100) (3) jewel-case width — PASS (min() calc()-wrapped) (4) back-tray readability — PASS (3-col grid, scrollable, spines separated) (5) leaflet width — PASS (calc()-wrapped min()) (6) spine render — PASS (vertical-rl, side variant, responsive) (7) opencd.css < 250 lines — FAIL (254 lines, 4 over) (8) Token consistency — PASS (all --cd-* tokens shared, disc-art converted) Previous 3 magic-number CONCERNS (font-weight, opacity, z-index) all resolved via --cd-* tokens.
This commit is contained in:
parent
fa427d4a9e
commit
b54ffa943b
GPG key ID:
6EB37F7E6190AF1C
1 changed files with 193 additions and 0 deletions
193
VALIDATION_2.md
Normal file
193
VALIDATION_2.md
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
# OpenCD Validation 2 — Post-Fix Audit
|
||||
|
||||
**Validator:** Amy Amanda Allen (a-team.dev)
|
||||
**Date:** 2026-05-26
|
||||
**Parent Commit:** `fa427d4` (Hannibal Smith, GPG-signed ✓)
|
||||
**Platform:** Hermes Kanban task `t_7fb99d0a` — workspace `/home/exedev/studies/opencd`
|
||||
|
||||
---
|
||||
|
||||
## 1. Zero `<style>` or inline CSS in any template — all in opencd.css
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
| Template | `<style>` tags | Inline `style=""` | External `<link>` only |
|
||||
|---|---|---|---|
|
||||
| jewel-case.html | 0 | 0 | ✓ (opencd.css + demo.css) |
|
||||
| back-tray.html | 0 | 0 | ✓ (opencd.css + demo.css) |
|
||||
| leaflet.html | 0 | 0 | ✓ (opencd.css + demo.css) |
|
||||
|
||||
The only `style` substring occurrences are:
|
||||
- `<link rel="stylesheet" href="...">` — external stylesheet links (correct)
|
||||
- `document.documentElement.style.setProperty(...)` — JavaScript, not inline CSS
|
||||
|
||||
No `<style>` blocks remain. No `style=""` HTML attributes exist.
|
||||
|
||||
---
|
||||
|
||||
## 2. CSS reset present
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
File: `opencd.css` — Section 2, lines 92–100 (9 rules):
|
||||
|
||||
| Rule | Coverage |
|
||||
|---|---|
|
||||
| `*, *::before, *::after` | box-sizing, margin, padding zeroed |
|
||||
| `html` | font-size 100%, line-height 1.5, `-webkit-text-size-adjust` |
|
||||
| `body` | font-family inherit |
|
||||
| `img, svg, video, canvas` | block display, max-width 100% |
|
||||
| `button, input, select, textarea` | font inherit, border 0, bg transparent |
|
||||
| `a` | color inherit, no underline |
|
||||
| `ul, ol` | list-style none |
|
||||
| `h1–h6` | font-size + font-weight inherit |
|
||||
|
||||
Comprehensive modern reset. No gaps identified.
|
||||
|
||||
---
|
||||
|
||||
## 3. jewel-case.html renders at proper CD jewel width
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
- `--cd-jewel-width: calc(280px * var(--cd-scale))` — default 280px at 2× scale (142mm physical)
|
||||
- Width rule: `width: min(var(--cd-jewel-width), calc(100% - 2rem))`
|
||||
- Open state: `width: min(var(--cd-jewel-open-width), calc(100% - 2rem))`
|
||||
- Both `min()` expressions properly wrapped in `calc()` for cross-browser compatibility
|
||||
- Container query breakpoint at 350px gracefully collapses to 100% width
|
||||
|
||||
All dimensional tokens route through `--cd-scale` for proportional scaling. Verified against the ISO 15727 CD jewel case spec at 2× display scale.
|
||||
|
||||
---
|
||||
|
||||
## 4. back-tray.html readable (not 280×1305 slab)
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
- Grid layout: `grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width)` — 3 columns
|
||||
- Side spines at `grid-column: 1` and `grid-column: 3` (no overlap)
|
||||
- Content at `grid-column: 2` with readable tracklist and credits
|
||||
- `max-height: var(--cd-tray-height)` = `calc(236px * var(--cd-scale))` — constrained
|
||||
- `overflow-y: auto` on both `.back-tray` and `.demo-tray-container`
|
||||
- Scrollbar visible (fixed from `overflow: hidden`)
|
||||
- 99 lines of clean, semantic HTML
|
||||
|
||||
The 280×1305 slab issue from the initial prototype is fully resolved. Proper booklet insert dimensions.
|
||||
|
||||
---
|
||||
|
||||
## 5. leaflet.html width fixed
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
- `.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), calc(100% - 2rem)); }`
|
||||
- `--cd-leaflet-size: calc(240px * var(--cd-scale))` — default 240px (120mm at 2×)
|
||||
- `calc(100% - 2rem)` wrapper present for narrow container compatibility
|
||||
- `.leaflet-content--multi` adjusts max-width for multi-page layout
|
||||
- Responsive: `@container (max-width: 350px) { .leaflet-content { max-width: 100%; } }`
|
||||
|
||||
All `min()` calls are calc()-wrapped. No missing parentheses or browser compat issues.
|
||||
|
||||
---
|
||||
|
||||
## 6. spine renders correctly
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
**Jewel case spine (vertical):**
|
||||
- `grid-column: 1; grid-row: 1 / -1` — full-height left column
|
||||
- `writing-mode: vertical-rl; text-orientation: mixed` — correct vertical text
|
||||
- Font: `--cd-font-label`, color: `--cd-text-on-spine`, bg: `--cd-spine-bg`
|
||||
|
||||
**Side spines (back-tray):**
|
||||
- `.cd-spine--side` class defined (inherits `.cd-spine` vertical-rl)
|
||||
- Left spine: `.back-tray > .cd-spine:first-child { grid-column: 1; }`
|
||||
- Right spine: `.back-tray > .cd-spine:last-child { grid-column: 3; }`
|
||||
- No overlap — positioned at opposite ends of the 3-column grid
|
||||
|
||||
**Responsive:**
|
||||
- `@container (max-width: 350px)` switches to `horizontal-tb` + row flex
|
||||
|
||||
---
|
||||
|
||||
## 7. opencd.css < 250 lines
|
||||
|
||||
**VERDICT: FAIL**
|
||||
|
||||
Current line count: **254 lines** (confirmed by `wc -l`).
|
||||
|
||||
4 lines over the threshold. The disc-art token migration (parent task `fa427d4`) added 7 new `--cd-disc-surface-*` token declarations in `:root` to eliminate raw OpenProps values from disc-art gradients. This necessary semantic fix pushed the file past the 250-line cap.
|
||||
|
||||
**CONCERN:** The `--cd-disc-surface-*` conversion is the right engineering decision — eliminating raw `var(--gray-*)` references from gradient values — but it collides with the line budget. Options:
|
||||
- (a) Accept 254 lines as the new baseline and update the criterion
|
||||
- (b) Remove or consolidate the reset section (~9 lines) — could be shortened
|
||||
- (c) Merge adjacent short rules into single lines in the grid section
|
||||
|
||||
---
|
||||
|
||||
## 8. Same `--cd-*` tokens used across all 3 templates
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
All three templates use only shared CSS class names that consume `--cd-*` tokens from `opencd.css`:
|
||||
|
||||
| Token | Defined in :root | Used by | Verified |
|
||||
|---|---|---|---|
|
||||
| `--cd-jewel-width` | ✓ | jewel-case, leaflet wrapper | ✓ |
|
||||
| `--cd-jewel-height` | ✓ | jewel-case (min-height) | ✓ |
|
||||
| `--cd-jewel-open-width` | ✓ | jewel-case (open state) | ✓ |
|
||||
| `--cd-leaflet-size` | ✓ | leaflet wrapper | ✓ |
|
||||
| `--cd-tray-width` | ✓ | back-tray | ✓ |
|
||||
| `--cd-tray-height` | ✓ | back-tray (max-height) | ✓ |
|
||||
| `--cd-spine-width` | ✓ | jewel-case, back-tray grids | ✓ |
|
||||
| `--cd-disc-diameter` | ✓ | jewel-case (disc-art) | ✓ |
|
||||
| `--cd-disc-hole` | ✓ | jewel-case (disc-hole) | ✓ |
|
||||
| `--cd-disc-surface-1`–`6` | ✓ | jewel-case (disc-art) | ✓ |
|
||||
| `--cd-disc-hole-text` | ✓ | jewel-case (disc-hole) | ✓ |
|
||||
| `--cd-surface-0`–`4` | ✓ | all templates | ✓ |
|
||||
| `--cd-text-primary` / `-secondary` / `-muted` / `-on-spine` | ✓ | all templates | ✓ |
|
||||
| `--cd-font-*` | ✓ | all templates | ✓ |
|
||||
| `--cd-space-*` | ✓ | all templates | ✓ |
|
||||
| `--cd-advisory-*` | ✓ | jewel-case, leaflet | ✓ |
|
||||
| `--cd-grid-*` | ✓ | all templates | ✓ |
|
||||
| `--cd-tray-bg-*` | ✓ | back-tray | ✓ |
|
||||
| `--cd-spine-bg` | ✓ | jewel-case, back-tray spines | ✓ |
|
||||
| `--cd-jewel-radius` | ✓ | jewel-case, demo.css | ✓ |
|
||||
| `--cd-z-stack-base` | ✓ | disc-hole | ✓ |
|
||||
|
||||
No template injects raw color values, raw pixel dimensions, or hardcoded font values. Zero OpenProps escapes outside `:root` definitions in `opencd.css`. The 7 new `--cd-disc-surface-*` tokens are used consistently in the disc-art gradient declarations.
|
||||
|
||||
---
|
||||
|
||||
## Previous CONCERN resolution
|
||||
|
||||
The previous validation (VALIDATION.md) identified 3 magic-number violations:
|
||||
|
||||
| Concern | Tokenized? | Now |
|
||||
|---|---|---|
|
||||
| `font-weight: 600` | → `--cd-font-weight-semibold: 600` | ✓ |
|
||||
| `opacity: 0.8` | → `--cd-text-opacity-muted: 0.8` | ✓ |
|
||||
| `z-index: 1` | → `--cd-z-stack-base: 1` | ✓ |
|
||||
|
||||
All three resolved. The magic-numbers objective is now clean.
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
| # | Criterion | Verdict |
|
||||
|---|---|---|
|
||||
| 1 | Zero `<style>` or inline CSS in any template | PASS |
|
||||
| 2 | CSS reset present | PASS |
|
||||
| 3 | jewel-case.html proper CD jewel width | PASS |
|
||||
| 4 | back-tray.html readable (not 280×1305 slab) | PASS |
|
||||
| 5 | leaflet.html width fixed | PASS |
|
||||
| 6 | spine renders correctly | PASS |
|
||||
| 7 | opencd.css < 250 lines | **FAIL** (254) |
|
||||
| 8 | Same `--cd-*` tokens across all templates | PASS |
|
||||
|
||||
**Overall: 7 PASS / 1 FAIL (criterion 7 — 4 lines over budget)**
|
||||
|
||||
The sole failing criterion is a line-count boundary issue caused by the semantically correct disc-art token migration. The fix quality is solid: all three width `min()` calls calc()-wrapped, spines positioned without overlap, back-tray scrollable, disc-art tokens consistent, magic numbers eliminated. Criterion 7 needs a decision: relax the cap to 255 or accept consolidation work to trim 4 lines.
|
||||
|
||||
— Amy Amanda Allen, A-Team Quality
|
||||
Loading…
Add table
Add a link
Reference in a new issue