#Crater

#Overview

• Font loading or text shaping
• Text rendering or measurement (uses approximate character-based sizing)
• Painting or drawing
• DOM manipulation

#Test Status

#Taffy Compatibility Tests

#Parser Tests

#Web Platform Tests (WPT)

npm run wpt:fetch-all  # Fetch all WPT tests
npm run wpt:run-all    # Run all WPT tests

#Features

#Layout Modes

• Flexbox - direction, wrap, wrap-reverse, alignment, grow/shrink
• CSS Grid - templates, auto-placement, areas, fr units, minmax, repeat
• Block layout - margin collapsing
• Inline layout - inline formatting context, inline-block

#Box Model

• margin, padding, border
• Percentage and fixed dimensions
• min-width, max-width, min-height, max-height
• Intrinsic sizing: min-content, max-content, fit-content
• box-sizing: border-box

#Positioning

• position: static, relative, absolute, fixed
• top, right, bottom, left (inset properties)

#Other Properties

• gap (row-gap, column-gap)
• aspect-ratio
• overflow-x, overflow-y
• visibility: hidden (with child override)
• CSS Variables (--var, var())
• calc() CSS function

#Accessibility

• Accessible Name Computation - WAI-ARIA accname-1.2 algorithm
• ARIA Snapshot - Playwright-compatible YAML/JSON format
• Accessibility Tree - Full tree structure with roles, states, and aria-owns support

#Performance

moon bench -p html

#Limitations

• No font rendering: Text measurement uses approximate monospace character sizing
• No real text layout: Word wrapping is simplified
• Baseline alignment: Partial implementation
• Writing modes: Limited support for vertical text

#Documentation

• API Reference - Public interface documentation

#Installation

moon add mizchi/crater

#Usage

// Parse HTML and render layout

///|
let html = "<div style=\"display: flex; width: 300px;\"><div style=\"flex: 1\">A</div><div style=\"flex: 2\">B</div></div>"

///|
let ctx = @renderer.RenderContext::default()

///|
let layout = @renderer.render(html, ctx)

// layout contains x, y, width, height for each element

#License