dev-render-htmlcss-feature

grida-htmlcss — feature loop

What this is. A heavy, manually-invoked loop for driving a single CSS feature forward in the grida htmlcss renderer. Do not auto-trigger; load only when the user explicitly runs it. The loop is a conductor over /research, /fixtures, and /render-reftest — those auto-trigger on their own for narrower work.

Sibling skill. For features in the SVG path (crates/htmlcss/src/svg/, resvg-test-suite corpus, multi-oracle scoring against expected.png + baked Chrome PNG), use dev-render-htmlcss-svg-feature instead. Same five-phase shape, different tooling.

Lifecycle. Expect this skill to grow as new divergence patterns surface. It will likely go stale in parts once htmlcss hits Chromium-parity on L0/L1; treat the phase structure as durable and the property-specific callouts as advisory.

---

The five phases

┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐
│ 1. AUDIT │→ │2. GROUND │→ │3. FIXTURE│→ │ 4. IMPL  │→ │5. VERIFY │
└──────────┘  └──────────┘  └──────────┘  └──────────┘  └──────────┘
    │                                                         │
    └───── ← ─── loop ← ─── score < floor ← ─── diff ← ───────┘

Each phase has a question it answers, a deliverable, and an exit criterion. Don't skip forward; don't linger past the exit criterion. The loop closes at verify — if the score is below the gate, return to phase 3 or 4 with a specific hypothesis, not a vibe.

1. Audit — "what's the actual state of this feature?"

Question. Where is the feature on the grida side today? What renders wrong, what doesn't render at all, what renders coincidentally-correctly but by the wrong path?

Actions.

• Scan crates/htmlcss/src/ for the property name in stylo enum mapping, paint emit, layout feed. A property can be parsed-but-dropped, emitted-but-wrong, or unhandled — each has a different fix shape.
• Enumerate existing fixtures that touch the feature (fixtures/test-html/L0/). Run them under L0.coverage and record current similarity per fixture. This is the before-number.
• Check docs/wg/feat-2d/htmlcss.md and any related design notes for a prior decision or deliberate gap.
• List sibling properties likely to break the same way (e.g. border-radius %-values implied border-image-slice %-values).