Implement display:none and visibility:hidden #82

Phase 9: Advanced Layout#

Wire up visibility: hidden in layout and rendering. Verify display: none works correctly end-to-end.

Current State#

• display: none is handled in build_box() — elements are excluded from the layout tree. This appears to work.
• Visibility enum (Visible, Hidden, Collapse) is parsed in computed styles
• visibility: hidden is NOT applied during rendering — hidden elements are still painted

Requirements#

1. visibility: hidden: The element still participates in layout (occupies space) but is NOT painted. Its children can override with visibility: visible.
2. Propagate visibility to renderer: Pass the visibility value through the layout tree so the renderer can skip painting hidden boxes
3. visibility: collapse: For non-table elements, treat as hidden. (Table-specific collapse behavior can be deferred.)
4. Inheritance: visibility is inherited — a hidden parent's children are hidden unless they explicitly set visibility: visible

Files to Modify#

• crates/layout/src/lib.rs — Store visibility on LayoutBox
• crates/render/src/lib.rs — Skip painting boxes with visibility: hidden
• crates/style/src/computed.rs — Ensure visibility is properly inherited

Tests#

• visibility: hidden element occupies space but is not painted
• Child of hidden element with visibility: visible IS painted
• display: none element occupies no space and is not painted
• visibility: collapse on non-table element behaves like hidden

Acceptance Criteria#

• visibility: hidden hides element visually while preserving layout space
• Inheritance works correctly (children can override)
• display: none continues to work correctly
• All tests pass, clippy clean, fmt clean