#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)

#Visual Regression Testing (VRT)

just vrt-url-native https://example.com        # Compare any URL
just test-wpt-vrt                                # WPT visual regression
CRATER_PAINT_BACKEND=native just test-vrt        # Full VRT suite

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

just wpt-dom-all
just wpt-webdriver-profile strict
just wpt-webdriver session
just wpt-webdriver browsing_context
just wpt-webdriver script
just wpt-webdriver input
just wpt-webdriver network

# Text module (mizchi/text-compatible or measureText(text, fontSize) module)
CRATER_TEXT_MODULE=/abs/path/to/text-module.js \
CRATER_TEXT_FONT_PATH=/abs/path/to/font.ttf \
npx tsx scripts/wpt-runner.ts css-overflow

# Image module patterns:
# - module itself as function, or resolveImageIntrinsicSize(src) / getImageSize(src) / sizeOf(src)
# - dimensions/getDimensions/metadata/identify/probe/readHeader/imageInfo style functions
# - image-size style functions that accept src, resolved local path, Uint8Array, or Buffer
# - nested namespace exports such as default.image.getImageSize or default.metadata.identify
# - result shapes: {width,height}, [width,height], {dimensions:{width,height}}, {columns,rows}, {shape:[height,width,...]}
# - mizchi/image-style decode_image_stream(bytes) / decode_png(bytes)
# - synchronous callback providers are supported; Promise/stream-only providers are not yet supported
CRATER_IMAGE_MODULE=/abs/path/to/image-module.js \
npx tsx scripts/wpt-runner.ts css-contain

# Optional local file resolver fallback for images (off by default)
CRATER_IMAGE_FILE_RESOLVE=1 \
npx tsx scripts/wpt-runner.ts wpt/css/css-contain/contain-size-021.html

• 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

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

#WPT CI Maintenance (Parallel Shards)

• wpt-css: 4 shards (wpt-css (shard-1..4))
• wpt-dom: 1 job (wpt-dom, runs --dom and --svg)
• wpt-webdriver: 1 job (wpt-webdriver, runs 10 strict BiDi targets)

• wpt-compat-summary: compatibility totals/pass rate (wpt-summary/wpt-compat-summary.md)
• ci-timing-summary: queue/run bottlenecks by job and group (ci-timing/summary.md)

1. Open the latest GitHub Actions run and check ci-timing-summary.
2. Compare wpt-css (shard-*) durations in "Slowest Jobs".
3. If one shard is consistently slower (roughly >10s), move modules between shard definitions in .github/workflows/ci.yml.
4. Keep each shard runtime close (current target is roughly 65-75s per CSS shard).
5. Verify compatibility totals from wpt-compat-summary are not regressing.

# Example: generate per-shard reports
mkdir -p /tmp/wpt-reports
npx tsx scripts/wpt-runner.ts css-overflow css-grid css-tables --workers 4 --json /tmp/wpt-reports/wpt-css-shard-1.json
npx tsx scripts/wpt-dom-runner.ts --dom --json /tmp/wpt-reports/wpt-dom-dom.json
npx tsx scripts/wpt-dom-runner.ts --svg --json /tmp/wpt-reports/wpt-dom-svg.json
npx tsx scripts/wpt-webdriver-runner.ts --subset --json /tmp/wpt-reports/wpt-webdriver-strict.json

# Optional: network sweep profile (non-gating, excludes auth-related paths)
npx tsx scripts/wpt-webdriver-runner.ts --profile network-no-auth --json /tmp/wpt-reports/wpt-webdriver-network-no-auth.json

# Aggregate compatibility summary
npx tsx scripts/wpt-ci-summary.ts --input /tmp/wpt-reports --json /tmp/wpt-summary.json --markdown /tmp/wpt-summary.md

# Analyze CI run timing from GitHub Actions run jobs API output
gh api repos/mizchi/crater/actions/runs/<RUN_ID>/jobs --paginate > /tmp/jobs.json
npx tsx scripts/ci-timing-summary.ts --input /tmp/jobs.json --json /tmp/ci-timing-summary.json --markdown /tmp/ci-timing-summary.md

#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
• Workspace Guide - Canonical module layout, release policy, and migration notes

#Installation

moon add mizchi/crater

#Package Selection

moon add mizchi/crater-layout
moon add mizchi/crater-css
moon add mizchi/crater-dom
moon add mizchi/crater-renderer
moon add mizchi/crater-browser
moon add mizchi/crater-browser-runtime
moon add mizchi/crater-webdriver-bidi
moon add mizchi/crater-wasm

#Release Policy

• MoonBit modules in this repository are versioned in lockstep with the repo release line. 0.17.x is the first workspace-split line.
• New APIs land in the narrow modules first. The root module keeps compatibility wrappers where practical.
• Root compatibility imports are documented but are no longer the recommended entry point for new integrations.

#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