A CSS layout engine written in MoonBit, ported from Taffy.

Crater aims to provide layout computation similar to Yoga - calculating positions and dimensions of elements based on CSS properties like Flexbox and Grid, without requiring a full browser environment.

This library focuses purely on layout calculation - it computes the x, y, width, and height of each element in your tree. It does not handle:

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

Layout algorithm tests ported from Taffy:

CSS tests from web-platform-tests:

Run WPT tests:

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

WPT target selection is configured in wpt.json.

• Added recursive module scan for css-align and css-box via recursiveModules
• Expanded includePrefixes for additional overflow/alignment coverage (scroll-, scrollbar-, scrollable-, text-overflow-, column-scroll-, targeted-column-scroll-, align-, place-)
• Excludes JS harness tests (testharness.js, check-layout-th.js, interpolation helpers) from layout-tree comparison runs

Check current enabled test counts:

npx tsx scripts/wpt-runner.ts --list

• 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

• 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

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

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

• 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

HTML parser benchmarks (on Apple Silicon):

Run benchmarks:

moon bench -p html

• 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

• API Reference - Public interface documentation

moon add mizchi/crater

// 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

Apache-2.0