Restyle fewer elements for :has() and cache the box model and marker style

[brainkim]

Makes TermDOM faster and keeps it responsive when the machine is busy, makes its caches provably follow every change, lines atomic inlines up on the baseline, cleans up the internals, and fixes the bugs found along the way.

Performance

• Repaint only the rows that changed. A frame now starts from the previous frame and repaints only the rows that changed. Layout reports which boxes moved, and a style change or selection move reports its own rows. Anything that doesn't report rows still repaints the whole screen. Typing in CodeMirror repaints about 3 rows per frame instead of 40. The tests now check every partial frame against a full repaint, so a missed change fails a test.
• Root laid out as a block. The root of the layout tree was a flex column. That made <html> a flex item, so every layout ran an extra min-content pass over the whole page.
• No timer sleep before a frame. The render loop used setTimeout(0), which puts the process to sleep and adds delay when the machine is busy. It now uses setImmediate.
• Skip work for parts of the page that didn't change:
  • Grid rounding and paint extents are skipped for subtrees layout didn't touch.
  • A partial frame joins borders and compares cells only in the rows it changed.
  • The painter binary-searches the children of any box whose children are in row order, not only block containers.
• Cheaper geometry reads, which editors make on every frame:
  • getBoundingClientRect no longer re-clamps every scroll offset, or searches for an enclosing <math>, when nothing calls for it.
  • It builds one DOMRect instead of three.
  • It checks for fixed positioning from the layout tree instead of every ancestor's computed style.
  • getComputedStyle keeps one view per element, so a restyle no longer redefines some 400 index properties.
• Less restyling:
  • A :has() change restyles earlier siblings only when a sheet uses :has(+ x) or :has(~ x).
  • Adding or removing a child restyles only the siblings a rule could select.
  • Rules are tried only when the element's tag name allows them.
• Caching: selectors are parsed once, not once per document. The box model and list-marker style are cached by style key.

Responsiveness under load

bench/scenarios/latency.ts and editor-latency.ts time a key from input to frame in three conditions: idle, every core busy, and two busy processes per core.

• Plain <input>: median key-to-frame went from 5.3 ms to 2.3 ms idle, and from 4.8 ms to 1.9 ms with every core busy.
• CodeMirror under load: median key-to-frame dropped 26–29% compared with the branch before the repaint and line-breaking changes.

Benchmarks

The branch adds a benchmark harness (bench/run.ts), and the Benchmarks workflow posts this branch's numbers against its base. Medians against main, measured locally on a busy machine. Key to frame is wall time; the rest is CPU time.

Benchmark	Change
toggle (li:has(), 500 items)	−85%
react chat append	−63%
DOM ops (20,000 spans)	−58%
<input> key to frame	−38 to −44%
CodeMirror key to frame	−17% idle, −32 to −36% under load
startup	−29%
scroll	−3 to −9%
emails	−4%
table	about the same

The last round of changes, made after that run, also cut CodeMirror's CPU per key by 18% and emails by 9%.

Staying correct through changes

Every cache layout, style and paint keep between frames is a way for a page that has changed to drift from the same page rendered fresh. Rather than chase those one at a time, the engine now keeps four rules:

1. Nothing reads a value that was overwritten by one derived from it. Layout used to round box positions to cells in place, then read the rounded values back on the next solve. Rounded positions now live in a record of their own (grid) that only rounding writes and layout never reads.
2. Invalidation follows what a computation reads, not the shape of the tree. A measure records every style it read, and a change to any of them measures it again.
3. A cache key covers everything its computation reads. For example, a size measured with no width was reused for a request of the width it came out at. That holds for text but not for content with a percentage width, so such sizes are now reused only for the request they answered.
4. Each value has one writer. The layout tree is a tree: every child names the node that holds it, no node is held twice, held by nothing, or out of reach, only an element that generates a box has one, and every absolutely positioned box hangs where it can reach its containing block.

Some bug classes are now impossible to write rather than only tested for:

• Coordinate frames: a box inside an inline-block counts its rows from that inline-block's own root. Every extent records which root it counts from, and an extent read in another frame reads as none, which only costs a shortcut.
• Form controls: each frame redraws every form control from its state, so a state change that forgot to redraw cannot reach the screen.
• Counters: the key that decides when to count again is made from the same inputs counting applies.

Each rule is checked in every test, on every frame:

• Layout: the frame's layout is compared with a solve that forgot every cache, and the tree's shape is checked.
• Style: every computed value served is compared with one resolved with every cache dropped.
• Paint: every partial frame is compared with a full repaint.
• Form controls: a frame that would redraw a control fails the test, since the redraw was forgotten earlier.

The checks run only under libuild test. They sit behind import.meta.litest, which libuild 0.2.27 defines in every test bundle, and libuild build removes them, so dist carries none of them. tests/incremental.test.ts drives this: it applies seeded random changes to three pages built from the features those caches cover (tests/fuzz-pages.ts), and after each change compares the screen and every element's rect with a fresh render.

Baseline alignment

Inline-blocks, inline-tables, inline-grids and images used to sit at the top of their line and fill it, with the text beside them on the line's top row. Each now sits with its baseline on the line's (CSS 2.1 §10.8.1):

Box	The text beside it lines up with
inline-block	its last line of text
inline-table, inline-grid, inline-flex	its first row
image, or a box that clips, such as a <textarea>	its bottom edge

vertical-align: top, middle and bottom place a box against the line instead. A line of text alone is placed as before, and no email snapshot changed. display: inline-table is also new: it used to lay out as a block.

Bug fixes

• Non-breaking spaces: a block holding only   now takes a line. Outlook writes every blank line this way, so those blank lines were dropped.
• Half-cell boxes: text in a box whose edges fall on half cells now breaks to the columns the box is drawn across. Before, it could cross the box's border.
• Image position: an image's x and y report its position.
• Fullscreen: asking for fullscreen on a detached element now fails with a TypeError.
• @import and @namespace in the wrong place in a sheet are dropped, as the spec requires.
• Solitaire's height breakpoints now have units. Without them, the largest card size never showed.

Found by the checks and the fuzz tests:

• Layout:
  • An inline-block is measured again when a child's size or a style it read changes.
  • Positioned rows, row groups and cells keep their absolutely positioned boxes laid out.
  • A box that becomes sticky no longer crashes a solve that places a fixed box.
  • A block inside an inline that becomes display: contents no longer keeps its old box.
• Repaint:
  • A restyle inside an inline-block repaints the rows the inline-block is on.
  • A box that loses its background as it moves clears its old rows.
  • A sticky box whose shift changes repaints where it was and where it is.
  • An outline on a box with no height no longer draws on the row above.
• Style:
  • A <style> added inside a subtree applies.
  • A class change restyles a form control's internal elements.
  • An <input> shows its new value when its value or type attribute changes.
  • A <textarea> shows its new text children until edited.
• Inline-blocks:
  • A sticky box inside one now sticks to the scroller around it. Its shift used to be counted against the viewport from the inline-block's own rows.
  • A positioned cell inside one paints, and the pointer finds boxes inside one, including content that overflows it.
  • Changing an inline-block or inline-table into another kind of box re-derives what it holds, its own root's display, and the absolutely positioned boxes under it.
• Percentages: an inline-block's percentage width stays exact until rounding to cells, so three boxes at a third each fit their line.
• Form controls: a canceled click on a checkbox redraws it as it puts its state back.
• Counters follow CSS Lists 3:
  • an element inherits its previous sibling's counters as well as its parent's;
  • counter-set works, and a box that isn't shown doesn't count;
  • ::before and ::after count as an element's first and last child, so h2::before { counter-increment: section } numbers headings;
  • counters() works, and a string that spells counter() stays text;
  • counters follow the flat tree, through shadow trees and slots.
• Tables follow CSS 2.1 §17.2.1:
  • table parts outside a table share an anonymous table, so cells sit side by side and rows share columns;
  • text a script puts in a table gets a row, and anything but a cell in a row gets a cell;
  • each row group spans only its own rows;
  • an absolute box after an anonymous table starts below it.

Cleanup

• No import cycles. The old 10-module runtime cycle is gone, and a test fails if one comes back. New modules: tree.ts (tree reads), units.ts (cell size) and window.ts (window assembly).
• Internal steps renamed. Internal methods take a leading underscore instead of symbol keys, and a test checks that none shows on a public interface.
• Plain functions instead of methods for the painter, cascade, framebuffer, layout, exchange, layout node, cell grid and input.
• Dead code and comments: dead branches, unused parameters and unneeded fallbacks are gone, and the typechecker now rejects unused locals and parameters. Stray comments are back on the code they describe, and comments that described the wrong thing are fixed.
• CodeMirror example: it runs at the terminal's own cell size, so its cell-size workarounds are gone.
• No test hooks in the library: setDecodeTimeout and getWindowInterfaceNames existed only for a test and a script, and are gone.

Tests

CI passes on node 20.19 and 26, bun and deno. The branch requires libuild 0.2.27. New or changed tests:

• tests/import-graph.test.ts: fails on any runtime import cycle.
• tests/style-caches.test.ts: the cached box model and marker style follow every kind of style change.
• tests/stylesheet.test.ts: :has() invalidation.
• tests/whitespace.test.ts:   paragraphs.
• tests/cell-size.test.ts: the half-cell case.
• tests/test-utils.ts: turns on the layout, style and partial-frame checks for every test.
• tests/incremental.test.ts and tests/fuzz-pages.ts: seeded changes against fresh renders, plus every seed that once found a bug.
• tests/partial-repaint.test.ts: each way a page can change names the rows it repaints.
• tests/counters.test.ts: CSS counters, pseudo-element counters, counters() and the flat tree.
• tests/tables.test.ts: anonymous tables, row groups and inline-tables.
• tests/inline-block.test.ts: baseline alignment.
• tests/sticky-position.test.ts: a sticky box inside an inline-block.
• tests/element-from-point-shadow.test.ts: hit-testing inside inline-blocks.
• The email fixture snapshots changed where   spacer rows now appear, where lines that crossed their box now wrap inside it, and where a Ghost newsletter's feedback buttons, which were drawn at no size, now show. Centred text in two of them moved one column, from widths kept exact before rounding.

🤖 Generated with Claude Code