diff --git a/.github/workflows/bench.yml b/.github/workflows/bench.yml
new file mode 100644
index 00000000..ee1f1171
--- /dev/null
+++ b/.github/workflows/bench.yml
@@ -0,0 +1,32 @@
+name: Benchmarks
+
+on:
+  pull_request:
+
+# Shared runners are too noisy to fail a pull request on a number, so the
+# comparison is a report in the job summary, not a check.
+jobs:
+  compare:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 26
+
+      - run: bun install --frozen-lockfile
+
+      - name: Compare with the base branch
+        run: |
+          {
+            echo "## Benchmarks: median CPU time, base against this pull request"
+            echo
+            node bench/run.ts --runs 3 --against "origin/${{ github.base_ref }}" --markdown
+          } >> "$GITHUB_STEP_SUMMARY"
diff --git a/bench/editor.ts b/bench/editor.ts
new file mode 100644
index 00000000..042a89c3
--- /dev/null
+++ b/bench/editor.ts
@@ -0,0 +1,49 @@
+/**
+ * CodeMirror as the example runs it, on a 400-line file, with the cursor
+ * near the top.
+ */
+import {installGlobals, mount, nextFrame} from "./harness.ts";
+
+export async function mountEditor(): Promise<{proc: any; dom: any; view: any}> {
+	const {proc, dom} = await mount(100, 40, {cellSize: "auto"});
+	installGlobals(dom);
+	const {EditorState} = await import("@codemirror/state");
+	const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
+	const {defaultKeymap, history, historyKeymap} = await import(
+		"@codemirror/commands",
+	);
+	const {javascript} = await import("@codemirror/lang-javascript");
+	const {defaultHighlightStyle, syntaxHighlighting} = await import(
+		"@codemirror/language",
+	);
+
+	const {document} = dom;
+	document.body.innerHTML = "<h1>Editor</h1><div id=editor></div>";
+	const doc = Array.from(
+		{length: 100},
+		(_, i) =>
+			[
+				`function step${i}(value: number, rect: {x: number; y: number}): number {`,
+				`\tconst scaled = value * ${i + 1} + rect.x; // step ${i}`,
+				"\treturn Math.max(scaled, rect.y);",
+				"}",
+			].join("\n"),
+	).join("\n");
+	const view = new EditorView({
+		state: EditorState.create({
+			doc,
+			extensions: [
+				lineNumbers(),
+				history(),
+				javascript({typescript: true}),
+				syntaxHighlighting(defaultHighlightStyle),
+				keymap.of([...defaultKeymap, ...historyKeymap]),
+			],
+		}),
+		parent: document.getElementById("editor"),
+	});
+	view.focus();
+	view.dispatch({selection: {anchor: doc.indexOf("\n", 200)}});
+	await nextFrame(dom);
+	return {proc, dom, view};
+}
diff --git a/bench/harness.ts b/bench/harness.ts
new file mode 100644
index 00000000..23c27ee3
--- /dev/null
+++ b/bench/harness.ts
@@ -0,0 +1,161 @@
+/**
+ * What every scenario shares. A scenario runs against the checkout named
+ * by its first argument, so the runner can point the same scenario at two
+ * checkouts, and prints one JSON line per measurement.
+ */
+import {spawn} from "node:child_process";
+import {readFileSync} from "node:fs";
+import {availableParallelism} from "node:os";
+
+export const root = process.argv[2];
+
+/** The bench's own checkout, which every input is read from. */
+export const benchRoot = new URL("..", import.meta.url).pathname;
+
+const index = await import(`${root}/src/index.ts`);
+const utils = await import(`${root}/tests/test-utils.ts`);
+const painter = await import(`${root}/src/internal/painter.ts`);
+// The test utilities check every partial frame against a whole one, which
+// is not what a user's frame costs.
+if (painter.partialFrameCheck !== undefined) {
+	painter.partialFrameCheck.enabled = false;
+}
+const cssom = await import(`${root}/src/internal/cssom.ts`);
+if (cssom.styleCheck !== undefined) {
+	cssom.styleCheck.enabled = false;
+}
+const layout = await import(`${root}/src/internal/layout.ts`);
+if (layout.layoutCheck !== undefined) {
+	layout.layoutCheck.enabled = false;
+}
+
+export const TermDOM = index.TermDOM;
+export const installGlobals = index.installGlobals;
+export const MockProcess = utils.MockProcess;
+export const nextFrame: (dom: unknown) => Promise<void> = utils.nextFrame;
+
+export function readBenchFile(path: string): string {
+	return readFileSync(`${benchRoot}${path}`, "utf8");
+}
+
+export async function mount(
+	cols = 100,
+	rows = 40,
+	options: object = {},
+): Promise<{proc: any; dom: any}> {
+	const proc = new MockProcess({cols, rows});
+	const dom = new TermDOM({...options, transport: proc.transport});
+	dom.attach();
+	await nextFrame(dom);
+	return {proc, dom};
+}
+
+/**
+ * The terminal becomes a sink once the page is up, so what is measured
+ * is the engine and not the emulator reading its output.
+ */
+export function silence(proc: any): void {
+	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
+		const callback = typeof enc === "function" ? enc : cb;
+		if (typeof callback === "function") {
+			(callback as () => void)();
+		}
+		return true;
+	};
+}
+
+/** CPU time, so the time a frame waits for its turn is not counted. */
+export function cpuMs(): number {
+	const {user, system} = process.cpuUsage();
+	return (user + system) / 1000;
+}
+
+export function report(label: string, times: number[]): void {
+	const sorted = [...times].sort((a, b) => a - b);
+	const median = sorted[Math.floor(sorted.length / 2)];
+	console.log(JSON.stringify({label, median}));
+}
+
+export async function measure(
+	label: string,
+	steps: number,
+	step: (i: number) => Promise<void> | void,
+	warm = 10,
+): Promise<void> {
+	for (let i = 0; i < warm; i++) {
+		await step(i);
+	}
+	const times: number[] = [];
+	for (let i = warm; i < warm + steps; i++) {
+		const start = cpuMs();
+		await step(i);
+		times.push(cpuMs() - start);
+	}
+	report(label, times);
+}
+
+/**
+ * Reports wall times as a measurement, and prints their percentiles, which
+ * a median alone hides, to stderr.
+ */
+export function describeLatency(label: string, times: number[]): void {
+	report(label, times);
+	const sorted = [...times].sort((a, b) => a - b);
+	const at = (q: number): string =>
+		sorted[Math.floor(sorted.length * q)].toFixed(1);
+	console.error(
+		`${label}: p50 ${at(0.5)} p90 ${at(0.9)} p99 ${at(0.99)} max ${sorted.at(-1)!.toFixed(1)}`,
+	);
+}
+
+/**
+ * Times each key from reaching the program to its frame reaching the
+ * terminal, typed at a person's pace.
+ */
+export function keyLatency(proc: any): (key: string) => Promise<number> {
+	let wrote: (() => void) | null = null;
+	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
+		wrote?.();
+		const callback = typeof enc === "function" ? enc : cb;
+		if (typeof callback === "function") {
+			(callback as () => void)();
+		}
+		return true;
+	};
+	return async (key) => {
+		await new Promise((resolve) => setTimeout(resolve, 40));
+		const painted = new Promise<void>((resolve) => {
+			wrote = resolve;
+		});
+		const start = performance.now();
+		proc.stdin.simulateResponse(key);
+		await painted;
+		wrote = null;
+		return performance.now() - start;
+	};
+}
+
+/** Runs the work with an idle machine, every core busy, and two spinners a core. */
+export async function underLoad(
+	label: string,
+	work: () => Promise<number[]>,
+): Promise<void> {
+	describeLatency(`${label}, idle`, await work());
+	for (const [load, perCore] of [
+		["every core busy", 1],
+		["two spinners a core", 2],
+	] as const) {
+		const spinners = Array.from(
+			{length: availableParallelism() * perCore},
+			() => spawn(process.execPath, ["-e", "for (;;) {}"], {stdio: "ignore"}),
+		);
+		await new Promise((resolve) => setTimeout(resolve, 300));
+		try {
+			describeLatency(`${label}, ${load}`, await work());
+		} finally {
+			for (const spinner of spinners) {
+				spinner.kill();
+			}
+		}
+	}
+}
diff --git a/bench/run.ts b/bench/run.ts
new file mode 100644
index 00000000..4562a2da
--- /dev/null
+++ b/bench/run.ts
@@ -0,0 +1,145 @@
+/**
+ * Runs the scenarios in bench/scenarios, each in a process of its own,
+ * and prints the median CPU time of each measurement.
+ *
+ *   node bench/run.ts [--runs N] [--only a,b] [--against REF] [--markdown]
+ *
+ * --against checks REF out into a temporary worktree and runs the same
+ * scenarios against it, alternating with this checkout, so both sides
+ * share whatever the machine was doing.
+ */
+import {spawnSync} from "node:child_process";
+import {mkdtempSync, readdirSync, rmSync, symlinkSync} from "node:fs";
+import {tmpdir} from "node:os";
+import {join} from "node:path";
+
+const benchRoot = new URL("..", import.meta.url).pathname;
+const scenarioDirectory = new URL("scenarios/", import.meta.url).pathname;
+
+function option(name: string): string | undefined {
+	const index = process.argv.indexOf(name);
+	return index === -1 ? undefined : process.argv[index + 1];
+}
+
+const runs = Number(option("--runs") ?? 3);
+const only = option("--only")?.split(",");
+const against = option("--against");
+const markdown = process.argv.includes("--markdown");
+
+const scenarios = readdirSync(scenarioDirectory)
+	.filter((name) => name.endsWith(".ts"))
+	.map((name) => name.slice(0, -3))
+	.filter((name) => only === undefined || only.includes(name));
+
+function git(...args: string[]): void {
+	const result = spawnSync("git", args, {cwd: benchRoot, stdio: "inherit"});
+	if (result.status !== 0) {
+		throw new Error(`git ${args.join(" ")} failed`);
+	}
+}
+
+function runScenario(name: string, root: string): Map<string, number> {
+	const result = spawnSync(
+		process.execPath,
+		[...process.execArgv, join(scenarioDirectory, `${name}.ts`), root],
+		{
+			cwd: root,
+			encoding: "utf8",
+			timeout: 600_000,
+			stdio: ["ignore", "pipe", "pipe"],
+		},
+	);
+	const medians = new Map<string, number>();
+	for (const line of result.stdout.split("\n")) {
+		if (line.startsWith("{")) {
+			const {label, median} = JSON.parse(line);
+			medians.set(label, median);
+		}
+	}
+	if (medians.size === 0) {
+		console.error(`${name} on ${root} reported nothing:\n${result.stderr}`);
+	}
+	return medians;
+}
+
+function median(values: number[]): number {
+	const sorted = [...values].sort((a, b) => a - b);
+	return sorted[Math.floor(sorted.length / 2)];
+}
+
+const roots: Array<{name: string; path: string}> = [];
+let worktree: string | undefined;
+if (against !== undefined) {
+	worktree = mkdtempSync(join(tmpdir(), "termdom-bench-"));
+	git("worktree", "add", "--detach", worktree, against);
+	symlinkSync(join(benchRoot, "node_modules"), join(worktree, "node_modules"));
+	roots.push({name: against, path: worktree});
+}
+roots.push({name: "this checkout", path: benchRoot.replace(/\/$/, "")});
+
+const samples = new Map<string, Map<string, number[]>>();
+try {
+	for (let run = 0; run < runs; run++) {
+		for (const scenario of scenarios) {
+			for (const root of roots) {
+				for (const [label, value] of runScenario(scenario, root.path)) {
+					let byRoot = samples.get(label);
+					if (byRoot === undefined) {
+						byRoot = new Map();
+						samples.set(label, byRoot);
+					}
+					const values = byRoot.get(root.name) ?? [];
+					values.push(value);
+					byRoot.set(root.name, values);
+				}
+			}
+		}
+		console.error(`run ${run + 1} of ${runs} done`);
+	}
+} finally {
+	if (worktree !== undefined) {
+		rmSync(join(worktree, "node_modules"));
+		git("worktree", "remove", "--force", worktree);
+	}
+}
+
+const header = [
+	"Measurement",
+	...roots.map((root) => `${root.name} (ms)`),
+	...(roots.length === 2 ? ["Change"] : []),
+];
+const rows = [...samples].map(([label, byRoot]) => {
+	const values = roots.map((root) => {
+		const values = byRoot.get(root.name);
+		return values === undefined ? NaN : median(values);
+	});
+	const cells = [label, ...values.map((value) => value.toFixed(2))];
+	if (values.length === 2) {
+		const change = (values[1] - values[0]) / values[0] * 100;
+		cells.push(`${change > 0 ? "+" : ""}${change.toFixed(0)}%`);
+	}
+	return cells;
+});
+
+if (markdown) {
+	console.log(`| ${header.join(" | ")} |`);
+	console.log(
+		`|${header.map((_, i) => i === 0 ? " --- " : " ---: ").join("|")}|`,
+	);
+	for (const row of rows) {
+		console.log(`| ${row.join(" | ")} |`);
+	}
+} else {
+	const widths = header.map((_, i) =>
+		Math.max(header[i].length, ...rows.map((row) => row[i].length)));
+	const format = (cells: string[]): string =>
+		cells
+			.map((cell, i) =>
+				i === 0 ? cell.padEnd(widths[i]) : cell.padStart(widths[i]),
+			)
+			.join("  ");
+	console.log(format(header));
+	for (const row of rows) {
+		console.log(format(row));
+	}
+}
diff --git a/bench/scenarios/chat.ts b/bench/scenarios/chat.ts
new file mode 100644
index 00000000..7e2307a5
--- /dev/null
+++ b/bench/scenarios/chat.ts
@@ -0,0 +1,83 @@
+import {
+	installGlobals,
+	measure,
+	mount,
+	nextFrame,
+	silence,
+} from "../harness.ts";
+
+const {proc, dom} = await mount();
+installGlobals(dom);
+const React = await import("react");
+const {createRoot} = await import("react-dom/client");
+const {flushSync} = await import("react-dom");
+const h = React.createElement;
+
+dom.document.head.innerHTML = `<style>
+	.msg { margin-top: 1px }
+	.who { font-weight: bold }
+	.you .who { color: #5fafff }
+	.bot .who { color: #87d787 }
+	.body { display: block }
+	.time { color: #808080 }
+	.prompt { display: flex }
+	textarea { flex-grow: 1; border: none; padding: 0 }
+</style>`;
+
+interface Message {
+	id: number;
+	who: string;
+	text: string;
+}
+
+let append: (message: Message) => void = () => {};
+
+function App(): React.ReactElement {
+	const [messages, setMessages] = React.useState<Message[]>([]);
+	append = (message) => setMessages((list) => [...list, message]);
+	return h(
+		"div",
+		null,
+		h(
+			"div",
+			{className: "log"},
+			messages.map((message) =>
+				h(
+					"div",
+					{key: message.id, className: `msg ${message.who}`},
+					h("span", {className: "who"}, message.who === "you" ? "You" : "Bot"),
+					" ",
+					h(
+						"span",
+						{className: "time"},
+						`12:${String(message.id % 60).padStart(2, "0")}`,
+					),
+					h("span", {className: "body"}, message.text),
+				)),
+		),
+		h(
+			"div",
+			{className: "prompt"},
+			h("span", null, "› "),
+			h("textarea", {rows: 1}),
+		),
+	);
+}
+
+const reactRoot = createRoot(dom.document.body);
+flushSync(() => reactRoot.render(h(App)));
+await nextFrame(dom);
+silence(proc);
+
+const words = (
+	"the quick brown fox jumps over the lazy dog while a terminal renders the dom"
+).split(" ");
+let id = 0;
+await measure("react chat: append a message", 200, async () => {
+	const text = Array.from({length: 12 + (id % 20)}, (_, k) => words[(id + k) %
+		words.length]).join(" ");
+	flushSync(() => append({id, who: id % 2 ? "bot" : "you", text}));
+	id++;
+	await nextFrame(dom);
+});
+dom.dispose();
diff --git a/bench/scenarios/dom-ops.ts b/bench/scenarios/dom-ops.ts
new file mode 100644
index 00000000..50c3232c
--- /dev/null
+++ b/bench/scenarios/dom-ops.ts
@@ -0,0 +1,22 @@
+import {measure, TermDOM} from "../harness.ts";
+
+const term = new TermDOM();
+const {document} = term;
+await measure(
+	"dom: build, render and remove 20000 spans",
+	15,
+	() => {
+		const root = document.createElement("div");
+		document.body.appendChild(root);
+		for (let k = 0; k < 20000; k++) {
+			const span = document.createElement("span");
+			span.className = `c${k % 7}`;
+			span.textContent = "t";
+			root.appendChild(span);
+		}
+		root.remove();
+		term.renderANSI();
+	},
+	3,
+);
+term.dispose();
diff --git a/bench/scenarios/editor-latency.ts b/bench/scenarios/editor-latency.ts
new file mode 100644
index 00000000..5596b8da
--- /dev/null
+++ b/bench/scenarios/editor-latency.ts
@@ -0,0 +1,23 @@
+import {mountEditor} from "../editor.ts";
+import {keyLatency, underLoad} from "../harness.ts";
+
+const {proc, dom} = await mountEditor();
+const press = keyLatency(proc);
+const text = "const value = compute(element, rect);";
+let typed = 0;
+
+async function type(keys: number): Promise<number[]> {
+	const times: number[] = [];
+	for (let i = 0; i < keys; i++) {
+		const key = typed % text.length === text.length - 1
+			? "\r"
+			: text[typed % text.length];
+		times.push(await press(key));
+		typed++;
+	}
+	return times;
+}
+
+await type(20);
+await underLoad("codemirror: key to frame", () => type(100));
+dom.dispose();
diff --git a/bench/scenarios/editor.ts b/bench/scenarios/editor.ts
new file mode 100644
index 00000000..2fe0a9c8
--- /dev/null
+++ b/bench/scenarios/editor.ts
@@ -0,0 +1,25 @@
+import {mountEditor} from "../editor.ts";
+import {measure, nextFrame, silence} from "../harness.ts";
+
+const {proc, dom, view} = await mountEditor();
+silence(proc);
+
+async function press(data: string): Promise<void> {
+	const before = view.state.doc.length;
+	proc.stdin.simulateResponse(data);
+	for (let i = 0; i < 200 && view.state.doc.length === before; i++) {
+		await new Promise((resolve) => setImmediate(resolve));
+	}
+	await nextFrame(dom);
+}
+
+const text = "const value = compute(element, rect);";
+let typed = 0;
+await measure("codemirror: type a character", 120, async () => {
+	await press(text[typed % text.length]);
+	typed++;
+	if (typed % text.length === 0) {
+		await press("\r");
+	}
+});
+dom.dispose();
diff --git a/bench/scenarios/emails.ts b/bench/scenarios/emails.ts
new file mode 100644
index 00000000..fe0ac74f
--- /dev/null
+++ b/bench/scenarios/emails.ts
@@ -0,0 +1,18 @@
+import {readdirSync} from "node:fs";
+
+import {benchRoot, measure, readBenchFile, TermDOM} from "../harness.ts";
+
+const directory = "tests/fixtures/email";
+const emails = readdirSync(`${benchRoot}${directory}`)
+	.filter((name) => name.endsWith(".html"))
+	.map((name) => readBenchFile(`${directory}/${name}`));
+await measure(
+	"emails: parse and render every fixture",
+	7,
+	() => {
+		for (const html of emails) {
+			new TermDOM({html}).renderANSI();
+		}
+	},
+	2,
+);
diff --git a/bench/scenarios/latency.ts b/bench/scenarios/latency.ts
new file mode 100644
index 00000000..45bb9df5
--- /dev/null
+++ b/bench/scenarios/latency.ts
@@ -0,0 +1,24 @@
+import {keyLatency, mount, nextFrame, underLoad} from "../harness.ts";
+
+const {proc, dom} = await mount();
+dom.document.body.innerHTML = "<input id=field>";
+const field = dom.document.getElementById("field");
+field.focus();
+await nextFrame(dom);
+const press = keyLatency(proc);
+
+async function type(keys: number): Promise<number[]> {
+	const times: number[] = [];
+	for (let i = 0; i < keys; i++) {
+		times.push(await press(String.fromCharCode(97 + (i % 26))));
+		if (field.value.length > 60) {
+			field.value = "";
+			await nextFrame(dom);
+		}
+	}
+	return times;
+}
+
+await type(20);
+await underLoad("latency: key to frame", () => type(100));
+dom.dispose();
diff --git a/bench/scenarios/scroll.ts b/bench/scenarios/scroll.ts
new file mode 100644
index 00000000..13932e8b
--- /dev/null
+++ b/bench/scenarios/scroll.ts
@@ -0,0 +1,25 @@
+import {marked} from "marked";
+
+import {measure, mount, nextFrame, readBenchFile, silence} from "../harness.ts";
+
+const html = marked.parse(readBenchFile("README.md"), {async: false});
+const {proc, dom} = await mount();
+dom.document.body.innerHTML = `<article>${html}</article>`;
+await nextFrame(dom);
+silence(proc);
+const view = dom.window;
+let direction = 1;
+
+async function scroll(rows: number): Promise<void> {
+	const max = dom.document.body.scrollHeight - view.innerHeight;
+	const next = view.scrollY + rows * direction;
+	if (next > max || next < 0) {
+		direction = -direction;
+	}
+	view.scrollBy(0, rows * direction);
+	await nextFrame(dom);
+}
+
+await measure("scroll: one row", 100, () => scroll(1));
+await measure("scroll: one page", 60, () => scroll(40));
+dom.dispose();
diff --git a/bench/scenarios/startup.ts b/bench/scenarios/startup.ts
new file mode 100644
index 00000000..db087fc0
--- /dev/null
+++ b/bench/scenarios/startup.ts
@@ -0,0 +1,26 @@
+import {marked} from "marked";
+
+import {
+	cpuMs,
+	MockProcess,
+	nextFrame,
+	readBenchFile,
+	report,
+	TermDOM,
+} from "../harness.ts";
+
+const html = marked.parse(readBenchFile("README.md"), {async: false});
+const times: number[] = [];
+for (let i = 0; i < 25; i++) {
+	const proc = new MockProcess({cols: 100, rows: 40});
+	const start = cpuMs();
+	const dom = new TermDOM({transport: proc.transport});
+	dom.document.body.innerHTML = `<article>${html}</article>`;
+	dom.attach();
+	await nextFrame(dom);
+	if (i >= 5) {
+		times.push(cpuMs() - start);
+	}
+	dom.dispose();
+}
+report("startup: README to first frame", times);
diff --git a/bench/scenarios/table.ts b/bench/scenarios/table.ts
new file mode 100644
index 00000000..b8a70449
--- /dev/null
+++ b/bench/scenarios/table.ts
@@ -0,0 +1,16 @@
+import {measure, TermDOM} from "../harness.ts";
+
+const rows = Array.from(
+	{length: 1000},
+	(_, i) => `<tr><td>${i}</td><td class=a>row ${i}</td><td><b>x</b></td></tr>`,
+).join("");
+const html =
+	`<style>td { padding: 0 1ch } .a { color: red }</style><table>${rows}</table>`;
+await measure(
+	"table: render 1000 rows",
+	7,
+	() => {
+		new TermDOM({html}).renderANSI();
+	},
+	2,
+);
diff --git a/bench/scenarios/toggle.ts b/bench/scenarios/toggle.ts
new file mode 100644
index 00000000..30fa1c1b
--- /dev/null
+++ b/bench/scenarios/toggle.ts
@@ -0,0 +1,24 @@
+import {measure, TermDOM} from "../harness.ts";
+
+const term = new TermDOM();
+const {document} = term;
+document.body.innerHTML =
+	"<style>.on { color: red; font-weight: bold } li:has(.on) { background: blue }</style>" +
+	"<ul>" +
+	Array.from(
+		{length: 500},
+		(_, i) => `<li><span id=s${i}>item ${i}</span></li>`,
+	).join("") +
+	"</ul>";
+term.renderANSI();
+let next = 0;
+await measure(
+	"toggle: a class under li:has(), 500 items",
+	200,
+	() => {
+		document.getElementById(`s${next++ % 500}`).classList.toggle("on");
+		term.renderANSI();
+	},
+	50,
+);
+term.dispose();
diff --git a/bun.lock b/bun.lock
index 09da77fa..75da0cb4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -14,7 +14,7 @@
       "devDependencies": {
         "@b9g/crank": "^0.7.12",
         "@b9g/eslint-config": "^0.1.10",
-        "@b9g/libuild": "^0.2.26",
+        "@b9g/libuild": "^0.2.27",
         "@codemirror/commands": "^6.11.1",
         "@codemirror/lang-javascript": "^6.2.5",
         "@codemirror/language": "^6.12.4",
@@ -61,7 +61,7 @@
 
     "@b9g/eslint-config": ["@b9g/eslint-config@0.1.10", "", { "peerDependencies": { "@eslint/js": ">=9", "@stylistic/eslint-plugin": ">=3", "@typescript-eslint/eslint-plugin": ">=8", "@typescript-eslint/parser": ">=8", "eslint": ">=9", "eslint-plugin-acrocase": ">=0.0.1", "eslint-plugin-crank": ">=0.2.2", "eslint-plugin-esfold": ">=0.1.2" } }, "sha512-5uVBZvX+K4XoGilegJ5/tEH4Mzg5gf+/XdOF6I3QJxTX/5iOoyTuMChIKWHPI3oxBAHzbLHYxFeHoNrp7q2gRQ=="],
 
-    "@b9g/libuild": ["@b9g/libuild@0.2.26", "", { "dependencies": { "@b9g/async-context": "^0.2.1", "commander": "^15.0.0", "esbuild": "^0.28.1", "expect": "^30.4.1", "glob": "^13.0.6", "pretty-format": "^30.4.1" }, "peerDependencies": { "playwright": "^1.40.0", "typescript": "^5.0.0 || ^6.0.0" }, "optionalPeers": ["playwright", "typescript"], "bin": { "libuild": "cli.js" } }, "sha512-8eZT6nJ+PL5ILlowL64kBntd+PPrH7DpTJHyWazhL6ik9kQwmQpQFJgVtcu27G4FE0BPqtlSYyJMbLPNVE1KlA=="],
+    "@b9g/libuild": ["@b9g/libuild@0.2.27", "", { "dependencies": { "@b9g/async-context": "^0.2.1", "c8": "^12.0.0", "commander": "^15.0.0", "esbuild": "^0.28.1", "expect": "^30.4.1", "glob": "^13.0.6", "pretty-format": "^30.4.1" }, "peerDependencies": { "playwright": "^1.40.0", "typescript": "^5.0.0 || ^6.0.0" }, "optionalPeers": ["playwright", "typescript"], "bin": { "libuild": "cli.js" } }, "sha512-WpPtO642xQ1GKx8nrbOM0e2s2eCJ2vP5lLJMMxOEgahSxwkuJ321v3sWrf5TCv5Dl6Kig0VH46LybkSCDcnGHQ=="],
 
     "@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
 
@@ -73,6 +73,8 @@
 
     "@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
 
+    "@bcoe/v8-coverage": ["@bcoe/v8-coverage@1.0.2", "", {}, "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA=="],
+
     "@cacheable/memory": ["@cacheable/memory@2.2.0", "", { "dependencies": { "@cacheable/utils": "^2.5.0", "@keyv/bigmap": "^1.3.1", "hookified": "^1.15.1", "keyv": "^5.6.0" } }, "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ=="],
 
     "@cacheable/utils": ["@cacheable/utils@2.5.0", "", { "dependencies": { "hashery": "^1.5.1", "keyv": "^5.6.0" } }, "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA=="],
@@ -171,6 +173,8 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
+    "@istanbuljs/schema": ["@istanbuljs/schema@0.1.6", "", {}, "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw=="],
+
     "@jest/diff-sequences": ["@jest/diff-sequences@30.5.0", "", {}, "sha512-OsqBjHXCn8cadasoAZBP6nWYvMsRhpMzGXTpxJ5aO04NlbdhIz+FVe3q49l0AwVhsz/cEmIpBes6gAFl1/dWQg=="],
 
     "@jest/expect-utils": ["@jest/expect-utils@30.5.2", "", { "dependencies": { "@jest/get-type": "30.5.0" } }, "sha512-d/HOLSrJUlBIl6n3LzOa7cjW3xdePm5H5gQw2lixZ/0h157l9sw3mLblzFqnPcTbhDzhRQdBOX3A3KcG73nm5Q=="],
@@ -297,6 +301,8 @@
 
     "ajv": ["ajv@6.15.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw=="],
 
+    "ansi-regex": ["ansi-regex@6.4.0", "", {}, "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw=="],
+
     "ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "arabic-persian-reshaper": ["arabic-persian-reshaper@1.0.1", "", {}, "sha512-VYBjkhz6o4W1Xt4mD2LAReljJpLSw5CUZMqSBDIQRvFgUSlTKEYghapgBWvkeMWF4W+KF3Fm+/z8EywJU4PBeg=="],
@@ -319,12 +325,16 @@
 
     "buildcheck": ["buildcheck@0.0.7", "", {}, "sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA=="],
 
+    "c8": ["c8@12.0.0", "", { "dependencies": { "@bcoe/v8-coverage": "^1.0.1", "@istanbuljs/schema": "^0.1.3", "find-up": "^5.0.0", "foreground-child": "^3.1.1", "istanbul-lib-coverage": "^3.2.0", "istanbul-lib-report": "^3.0.1", "istanbul-reports": "^3.1.6", "test-exclude": "^8.0.0", "v8-to-istanbul": "^9.0.0", "yargs": "^18.0.0", "yargs-parser": "^21.1.1" }, "peerDependencies": { "monocart-coverage-reports": "^2" }, "optionalPeers": ["monocart-coverage-reports"], "bin": { "c8": "bin/c8.js" } }, "sha512-4zpJvrd1nKWutnnKC2pXkFmb6iM1l+ffN//o1CzlTNwW7GSOs9a1xrLqkC48nU8oEkjmPZLPiwMsIaOvoF4Pqg=="],
+
     "cacheable": ["cacheable@2.5.0", "", { "dependencies": { "@cacheable/memory": "^2.2.0", "@cacheable/utils": "^2.5.0", "hookified": "^1.15.0", "keyv": "^5.6.0", "qified": "^0.10.1" } }, "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "ci-info": ["ci-info@4.4.0", "", {}, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="],
 
+    "cliui": ["cliui@9.0.1", "", { "dependencies": { "string-width": "^7.2.0", "strip-ansi": "^7.1.0", "wrap-ansi": "^9.0.0" } }, "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w=="],
+
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "codemirror": ["codemirror@6.0.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw=="],
@@ -335,6 +345,8 @@
 
     "commander": ["commander@15.0.0", "", {}, "sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg=="],
 
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
     "cpu-features": ["cpu-features@0.0.10", "", { "dependencies": { "buildcheck": "~0.0.6", "nan": "^2.19.0" } }, "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA=="],
 
     "crelt": ["crelt@1.0.7", "", {}, "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA=="],
@@ -351,10 +363,14 @@
 
     "devalue": ["devalue@5.9.4", "", {}, "sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg=="],
 
+    "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
+
     "entities": ["entities@8.1.0", "", {}, "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA=="],
 
     "esbuild": ["esbuild@0.28.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.28.2", "@esbuild/android-arm": "0.28.2", "@esbuild/android-arm64": "0.28.2", "@esbuild/android-x64": "0.28.2", "@esbuild/darwin-arm64": "0.28.2", "@esbuild/darwin-x64": "0.28.2", "@esbuild/freebsd-arm64": "0.28.2", "@esbuild/freebsd-x64": "0.28.2", "@esbuild/linux-arm": "0.28.2", "@esbuild/linux-arm64": "0.28.2", "@esbuild/linux-ia32": "0.28.2", "@esbuild/linux-loong64": "0.28.2", "@esbuild/linux-mips64el": "0.28.2", "@esbuild/linux-ppc64": "0.28.2", "@esbuild/linux-riscv64": "0.28.2", "@esbuild/linux-s390x": "0.28.2", "@esbuild/linux-x64": "0.28.2", "@esbuild/netbsd-arm64": "0.28.2", "@esbuild/netbsd-x64": "0.28.2", "@esbuild/openbsd-arm64": "0.28.2", "@esbuild/openbsd-x64": "0.28.2", "@esbuild/openharmony-arm64": "0.28.2", "@esbuild/sunos-x64": "0.28.2", "@esbuild/win32-arm64": "0.28.2", "@esbuild/win32-ia32": "0.28.2", "@esbuild/win32-x64": "0.28.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA=="],
 
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
     "eslint": ["eslint@10.11.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.3", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "11.1.5 || >11.1.6 <12", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-P7a6UEEqb9G95MYAtqkmsTbVXIYyzIfl6NGOIJk162PaahFxFyeGcrlXYFSiagECg4sEm8IseJdZBKR3rx6MsQ=="],
@@ -405,6 +421,12 @@
 
     "flatted": ["flatted@3.4.4", "", {}, "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q=="],
 
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
+
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
+    "get-east-asian-width": ["get-east-asian-width@1.7.0", "", {}, "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q=="],
+
     "glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
 
     "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
@@ -419,6 +441,8 @@
 
     "htm": ["htm@3.1.1", "", {}, "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ=="],
 
+    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
+
     "ignore": ["ignore@7.0.10", "", {}, "sha512-HpbUakT7xp5miBUywCHf36ZEuAJNklBJDDsGpUIjMzOSmM8ELSfA9Sa/QDPeNeqeoN31u+UTCkL4klCOVvRm4Q=="],
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
@@ -431,6 +455,12 @@
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
+    "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
+
+    "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
+
+    "istanbul-reports": ["istanbul-reports@3.2.0", "", { "dependencies": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" } }, "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA=="],
+
     "jest-diff": ["jest-diff@30.5.2", "", { "dependencies": { "@jest/diff-sequences": "30.5.0", "@jest/get-type": "30.5.0", "chalk": "^4.1.2", "pretty-format": "30.5.1" } }, "sha512-rBtHnI6BWTiWj3lM7fOLVfChx7R9B0u9VV3PRHawKs79x6ZjW1QoSrKenaigNGWlvhtoi2BqvDbABDie+Os3xQ=="],
 
     "jest-matcher-utils": ["jest-matcher-utils@30.5.2", "", { "dependencies": { "@jest/get-type": "30.5.0", "chalk": "^4.1.2", "jest-diff": "30.5.2", "pretty-format": "30.5.1" } }, "sha512-lFkB365PTIHOhPzwrb9T6gvlDnPpOZ7/c3ewOKKB7bzztqjVrtlyRL2MkyfJXpyY2u2SKw001JKrTx14fBUFcQ=="],
@@ -465,6 +495,8 @@
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
+    "make-dir": ["make-dir@4.0.0", "", { "dependencies": { "semver": "^7.5.3" } }, "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw=="],
+
     "marked": ["marked@18.0.14", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A=="],
 
     "marked-highlight": ["marked-highlight@2.2.4", "", { "peerDependencies": { "marked": ">=4 <19" } }, "sha512-PZxisNMJDduSjc0q6uvjsnqqHCXc9s0eyzxDO9sB1eNGJnd/H1/Fu+z6g/liC1dfJdFW4SftMwMlLvsBhUPrqQ=="],
@@ -533,6 +565,8 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
     "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -541,12 +575,18 @@
 
     "stack-utils": ["stack-utils@2.0.6", "", { "dependencies": { "escape-string-regexp": "^2.0.0" } }, "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ=="],
 
+    "string-width": ["string-width@8.3.0", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ=="],
+
+    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
     "style-mod": ["style-mod@4.1.4", "", {}, "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw=="],
 
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "svelte": ["svelte@5.57.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-Uqj49lWKB+iSSnneuwiYYJ7MZgkB+eXr0LXBhv4uDuAkXqnWmq65Sxflfvp0Lc6MdKjMUxGaeOKWJqz5SNiVIA=="],
 
+    "test-exclude": ["test-exclude@8.0.0", "", { "dependencies": { "@istanbuljs/schema": "^0.1.2", "glob": "^13.0.6", "minimatch": "^10.2.2" } }, "sha512-ZOffsNrXYggvU1mDGHk54I96r26P8SyMjO5slMKSc7+IWmtB/MQKnEC2fP51imB3/pT6YK5cT5E8f+Dd9KdyOQ=="],
+
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
 
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
@@ -565,6 +605,8 @@
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
+    "v8-to-istanbul": ["v8-to-istanbul@9.3.0", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", "@types/istanbul-lib-coverage": "^2.0.1", "convert-source-map": "^2.0.0" } }, "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA=="],
+
     "vue": ["vue@3.5.43", "", { "dependencies": { "@vue/compiler-dom": "3.5.43", "@vue/compiler-sfc": "3.5.43", "@vue/runtime-dom": "3.5.43", "@vue/server-renderer": "3.5.43", "@vue/shared": "3.5.43" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-o5qZoksdnjIKvW1srZ3ab7pcDNYAerBjRe54D0LBLfRdCYFrSgBHVXokMas35czQc0//lmx4/tuY4ZNQ+Rf2Ng=="],
 
     "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
@@ -575,6 +617,14 @@
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
+    "wrap-ansi": ["wrap-ansi@9.0.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "string-width": "^7.0.0", "strip-ansi": "^7.1.0" } }, "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww=="],
+
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "yargs": ["yargs@18.2.0", "", { "dependencies": { "cliui": "^9.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "string-width": "^8.2.1", "y18n": "^5.0.5", "yargs-parser": "^22.0.0" } }, "sha512-9OpKOLeaoNFecEp7P6iYbzze/5CqWoH7N3SMs/6y1XF4nMvFMspEGZzJ6uFi9MmQwXhyzqYoSEKO3tvA3Z/o2w=="],
+
+    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
     "zimmerframe": ["zimmerframe@1.1.5", "", {}, "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA=="],
@@ -589,6 +639,8 @@
 
     "chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
+    "cliui/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
     "css-tree/mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
 
     "eslint/eslint-visitor-keys": ["eslint-visitor-keys@5.0.1", "", {}, "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA=="],
@@ -601,6 +653,12 @@
 
     "stack-utils/escape-string-regexp": ["escape-string-regexp@2.0.0", "", {}, "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="],
 
+    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "wrap-ansi/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
+    "yargs/yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
+
     "@types/ssh2/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
   }
 }
diff --git a/eslint.config.js b/eslint.config.js
index fad21ad7..ec170b67 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,7 +20,7 @@ export default [
 	{
 		// Scripts and examples print to the terminal as their job. URL is a
 		// runtime global everywhere the scripts run.
-		files: ["scripts/**", "examples/**"],
+		files: ["scripts/**", "examples/**", "bench/**"],
 		languageOptions: {globals: {URL: "readonly"}},
 		rules: {"no-console": "off"},
 	},
diff --git a/examples/codemirror.ts b/examples/codemirror.ts
index 723fe8c1..257f7384 100644
--- a/examples/codemirror.ts
+++ b/examples/codemirror.ts
@@ -8,14 +8,14 @@
 // CodeMirror edits the document through the DOM: it renders lines into a
 // contenteditable element, listens for beforeinput and watches the tree
 // with a MutationObserver, and reads the selection back through
-// getSelection(). Nothing here is adapted for the terminal except the
-// theme, which turns its pixel paddings into cells.
+// getSelection(). The terminal reports how many pixels a cell measures,
+// so CodeMirror's pixel sizes and its viewport culling work as they do in
+// a browser. Nothing here is adapted for the terminal but the colors.
 import {readFileSync} from "node:fs";
 
 import {installGlobals, TermDOM} from "@b9g/termdom";
-import type {EditorView as View} from "@codemirror/view";
 
-const term = new TermDOM();
+const term = new TermDOM({cellSize: "auto"});
 term.attach();
 const {document} = term;
 
@@ -30,7 +30,7 @@ const {javascript} = await import("@codemirror/lang-javascript");
 const {defaultHighlightStyle, syntaxHighlighting} = await import(
   "@codemirror/language",
 );
-const {EditorSelection, EditorState} = await import("@codemirror/state");
+const {EditorState} = await import("@codemirror/state");
 const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
 
 document.head.innerHTML = `
@@ -51,53 +51,20 @@ const theme = EditorView.theme(
     // The focused editor edits text, so it shows the terminal cursor, not
     // the dotted outline the base theme draws around the wrapper.
     "&.cm-focused": {outline: "none"},
-    ".cm-scroller": {lineHeight: "1"},
-    ".cm-content": {padding: "0", caretColor: "white"},
+    ".cm-content": {caretColor: "white"},
     ".cm-line": {padding: "0 1ch"},
     ".cm-gutters": {
       backgroundColor: "#101418",
       color: "#606060",
       borderRight: "1px solid #303030",
-      minWidth: "4ch",
-    },
-    ".cm-lineNumbers .cm-gutterElement": {
-      padding: "0 1ch 0 0",
-      minWidth: "3ch",
     },
     ".cm-activeLine": {backgroundColor: "#1a2028"},
     ".cm-activeLineGutter": {backgroundColor: "#1a2028"},
+    ".cm-lineNumbers .cm-gutterElement": {padding: "0 1ch"},
   },
   {dark: true},
 );
 
-// CodeMirror's own line moves probe half a text height at a time, and a
-// line here is one cell tall, so half of it rounds to nothing. These
-// probe half a cell past the line's edge, which is the next row.
-function moveLine(forward: boolean, extend: boolean): (view: View) => boolean {
-  return (view: View): boolean => {
-    const {selection} = view.state;
-    const ranges = selection.ranges.map((range) => {
-      const moved = view.moveVertically(
-        range,
-        forward,
-        view.defaultLineHeight / 2,
-      );
-      return extend ? EditorSelection.range(range.anchor, moved.head) : moved;
-    });
-    view.dispatch({
-      selection: EditorSelection.create(ranges, selection.mainIndex),
-      scrollIntoView: true,
-      userEvent: "select",
-    });
-    return true;
-  };
-}
-
-const lineKeys = keymap.of([
-  {key: "ArrowUp", run: moveLine(false, false), shift: moveLine(false, true)},
-  {key: "ArrowDown", run: moveLine(true, false), shift: moveLine(true, true)},
-]);
-
 const sample = [
   "function greet(name) {",
   "  const hour = new Date().getHours();",
@@ -119,7 +86,6 @@ const view = new EditorView({
       EditorState.tabSize.of(2),
       lineNumbers(),
       history(),
-      lineKeys,
       keymap.of([...defaultKeymap, ...historyKeymap]),
       javascript(),
       syntaxHighlighting(defaultHighlightStyle),
diff --git a/examples/solitaire.ts b/examples/solitaire.ts
index 99c1f1b2..d6a5e5c1 100644
--- a/examples/solitaire.ts
+++ b/examples/solitaire.ts
@@ -528,9 +528,9 @@ function sheet(): string {
 
   ${css(TIERS.compact)}
   @media (min-width: ${ROOMY_MIN_WIDTH}ch) { ${css(TIERS.roomy)} }
-  @media (min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}) { ${css(TIERS.grand)} }
+  @media (min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}px) { ${css(TIERS.grand)} }
   /* A short terminal spends its rows on the cards. */
-  @media (max-height: ${HINT_MIN_HEIGHT - 1}) { .hint { display: none; } }
+  @media (max-height: ${HINT_MIN_HEIGHT - 1}px) { .hint { display: none; } }
 `;
 }
 
@@ -1360,7 +1360,7 @@ function *App(this: Context) {
   // re-renders the faces to the size the CSS just snapped to.
   const roomy = term.window.matchMedia(`(min-width: ${ROOMY_MIN_WIDTH}ch)`);
   const grand = term.window.matchMedia(
-    `(min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT})`,
+    `(min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}px)`,
   );
   const retier = () => this.refresh();
   roomy.addEventListener("change", retier);
diff --git a/package.json b/package.json
index 38f4d476..024bce45 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "LICENSE"
   ],
   "scripts": {
+    "bench": "node bench/run.ts",
     "build": "libuild build",
     "lint": "eslint .",
     "prepublishOnly": "echo 'ERROR: Cannot publish from root directory. Use libuild to publish or stage the package.' && exit 1",
@@ -58,7 +59,7 @@
   "devDependencies": {
     "@b9g/crank": "^0.7.12",
     "@b9g/eslint-config": "^0.1.10",
-    "@b9g/libuild": "^0.2.26",
+    "@b9g/libuild": "^0.2.27",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/language": "^6.12.4",
diff --git a/scripts/generate-dom-idl.ts b/scripts/generate-dom-idl.ts
index 3d83d0f0..a0841225 100644
--- a/scripts/generate-dom-idl.ts
+++ b/scripts/generate-dom-idl.ts
@@ -18,7 +18,7 @@ import {fileURLToPath} from "node:url";
 
 import {parse} from "webidl2";
 
-import {getWindowInterfaceNames} from "../src/internal/dom.ts";
+import {getWindowClasses} from "../src/internal/window.ts";
 
 const require = createRequire(import.meta.url);
 const idlDir = dirname(require.resolve("@webref/idl/package.json"));
@@ -311,7 +311,7 @@ for (const definition of definitions) {
 	}
 }
 
-const windowInterfaces = new Set(getWindowInterfaceNames());
+const windowInterfaces = new Set(Object.keys(getWindowClasses()));
 const exposed = new Set(
 	definitions
 		.filter(
diff --git a/src/index.ts b/src/index.ts
index e068971b..8bfb9cef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,19 +3,20 @@ import "./internal/inspector.ts";
 import type {CanvasCellGridContext} from "./internal/canvas.ts";
 import {
 	Cascade,
-	type CellSize,
-	type CellSizeSetting,
-	getCellSize,
-	UNIT_CELL,
+	checkStylesFromScratch,
+	dispose,
+	hoverRulesExist,
+	styleCheck,
 } from "./internal/cssom.ts";
 import {
 	applyMutations,
 	attachDocument,
+	checkFormControls,
 	clampScrollOffsets,
 	clearHighlights,
 	clearWindowTimers,
 	constructInternal,
-	createWindow,
+	controlCheck,
 	disconnectObservers,
 	dispatchAsUserAgent,
 	DOMException,
@@ -24,7 +25,6 @@ import {
 	type EventTargetSlots,
 	flushLayout,
 	flushObservers,
-	getCellSizeSetting,
 	getGraphicsSettings,
 	getProcessTimers,
 	type GraphicsSetting,
@@ -38,29 +38,77 @@ import {
 	runFrameCallbacks,
 	runScrollSteps,
 	setDocumentVisible,
+	syncFormControls,
 	syncMediaQueries,
 	takeScrollShift,
 	type Window,
 } from "./internal/dom.ts";
+import {installEditing} from "./internal/editing.ts";
 import {
+	abandonColorDepthQuery,
+	abandonColorSchemeQuery,
+	clearScreen,
+	cursorToRow,
 	DEFAULT_ROWS,
+	deferResizeEvent,
+	detectAnchor,
 	type ColorDepth as EmittedColorDepth,
+	eraseBelow,
 	Exchange,
+	flushExchange,
+	initializeCursorDetection,
+	negotiateBidi,
+	negotiateCellPixels,
+	negotiateColorDepth,
+	negotiateColorScheme,
+	negotiateGraphemeClusters,
+	negotiateOverline,
+	queryDeviceAttributes,
+	reclaimModes,
+	releaseModes,
+	reserveRows,
+	restoreEngagedModes,
+	scrubProbeEcho,
+	setDisplayType,
+	startExchange,
 	type TerminalCloseInfo,
 	type TerminalResizeEvent,
 	type TerminalSize,
 	type TerminalTransport,
 	transportFromProcess,
+	writeLines,
 } from "./internal/exchange.ts";
-import {Framebuffer} from "./internal/framebuffer.ts";
+import {
+	beginFrame,
+	endFrame,
+	Framebuffer,
+	rebind,
+	repaintAll,
+	scrollTo,
+} from "./internal/framebuffer.ts";
 import {
 	releaseDecoder,
 	retainDecoder,
 	setDecodeWorkerURL,
 } from "./internal/images.ts";
-import {Input} from "./internal/input.ts";
-import {Layout} from "./internal/layout.ts";
-import {Painter} from "./internal/painter.ts";
+import {Input, resolvePendingHover} from "./internal/input.ts";
+import {
+	checkLayoutFromScratch,
+	framePainted,
+	invalidateTextMeasurement,
+	Layout,
+	layoutCheck,
+	takeDamageBands,
+} from "./internal/layout.ts";
+import {
+	checkPartialFrame,
+	paint,
+	Painter,
+	paintsAsBefore,
+	partialFrameCheck,
+	resolveDocumentScrollBand,
+	resolveScrollShift,
+} from "./internal/painter.ts";
 import {
 	answerRequest,
 	checkInlineHandler,
@@ -71,10 +119,18 @@ import {
 	setWindowFetch,
 } from "./internal/resources.ts";
 import {_, type internals, moveLateMembers} from "./internal/slots.ts";
-import {queueMicrotask, setTimeout} from "./internal/timers.ts";
+import {queueMicrotask, queueTask, setTimeout} from "./internal/timers.ts";
+import {getCellSizeSetting} from "./internal/tree.ts";
+import {
+	type CellSize,
+	type CellSizeSetting,
+	getCellSize,
+	UNIT_CELL,
+} from "./internal/units.ts";
+import {createWindow} from "./internal/window.ts";
 
 export type {CanvasCellGridContext} from "./internal/canvas.ts";
-export type {CellSize} from "./internal/cssom.ts";
+export type {CellSize} from "./internal/units.ts";
 export {transportFromProcess, transportFromSSH} from "./internal/exchange.ts";
 export {
 	ExtendableEvent,
@@ -559,6 +615,7 @@ export class TermDOM extends EventTarget {
 				reportUncaught(this, error);
 			},
 		});
+		installEditing(exchange);
 		// The document had no size until it was attached, so an @media rule
 		// in the markup was read against a zero-width viewport. Attaching is
 		// a resize, and flips @media results the same way.
@@ -655,11 +712,11 @@ export class TermDOM extends EventTarget {
 			}
 
 			started = true;
-			slots.exchange.start(slots.input);
+			startExchange(slots.exchange, slots.input);
 			if (slots.transport.interactive) {
-				slots.exchange.setDisplayType("bracketedPaste", true);
+				setDisplayType(slots.exchange, "bracketedPaste", true);
 				// So dispose can restore the title.
-				slots.exchange.setDisplayType("titleStack", true);
+				setDisplayType(slots.exchange, "titleStack", true);
 				if (this.document.title) {
 					void slots.exchange.setTitle(this.document.title);
 				}
@@ -669,7 +726,7 @@ export class TermDOM extends EventTarget {
 			// The terminal's background, asked first so the first frame can
 			// wait for it.
 			const schemeBefore = slots.exchange.colorScheme;
-			void slots.exchange.negotiateColorScheme().then(() => {
+			void negotiateColorScheme(slots.exchange).then(() => {
 				if (isAttached(this) && slots.exchange.colorScheme !== schemeBefore) {
 					slots.cascade.syncStylesheets();
 					syncMediaQueries(this.document);
@@ -679,9 +736,9 @@ export class TermDOM extends EventTarget {
 			// What colors the terminal shows, when the program leaves it to the
 			// terminal to say. Asked before DA1, like the background.
 			const depthSettled = slots.colorDepth === undefined
-				? slots.exchange.negotiateColorDepth().then((depth) => {
+				? negotiateColorDepth(slots.exchange).then((depth) => {
 					if (isAttached(this) && depth !== slots.framebuffer.colorDepth) {
-						slots.framebuffer.rebind(depth);
+						rebind(slots.framebuffer, depth);
 						syncMediaQueries(this.document);
 						void render(this);
 					}
@@ -689,34 +746,34 @@ export class TermDOM extends EventTarget {
 				: Promise.resolve();
 			// A terminal answers in the order it was asked, so once it answers
 			// DA1, one that said nothing of its background never will.
-			const answered = slots.exchange.queryDeviceAttributes();
-			slots.exchange.initializeCursorDetection();
+			const answered = queryDeviceAttributes(slots.exchange);
+			initializeCursorDetection(slots.exchange);
 			// A terminal that answers nothing is not waited on past the cursor
 			// question the anchor already waits for.
 			const cursor = slots.exchange.cursorDetectionPending;
 			const schemeSettled = (
 				cursor === null ? answered : Promise.race([answered, cursor])
 			).then(() => {
-				slots.exchange.abandonColorSchemeQuery();
-				slots.exchange.abandonColorDepthQuery();
+				abandonColorSchemeQuery(slots.exchange);
+				abandonColorDepthQuery(slots.exchange);
 			});
-			void slots.exchange.negotiateBidi();
-			void slots.exchange.negotiateGraphemeClusters();
+			void negotiateBidi(slots.exchange);
+			void negotiateGraphemeClusters(slots.exchange);
 			// Math draws its bars as overlines once the terminal has agreed
 			// to them, so what was measured before the answer measures again.
-			void slots.exchange.negotiateOverline().then((agreed) => {
+			void negotiateOverline(slots.exchange).then((agreed) => {
 				if (agreed && isAttached(this)) {
-					slots.layout.invalidateTextMeasurement();
+					invalidateTextMeasurement(slots.layout);
 					void render(this);
 				}
 			});
-			slots.exchange.scrubProbeEcho();
+			scrubProbeEcho(slots.exchange);
 			// After the erase, which is for the mode probes' echo. What was
 			// painted against the guessed cell repaints when the answer lands.
 			// When the cell sizes the page, the first frame waits for it, so
 			// the page never lays out against the guess.
 			const measuresCell = getCellSizeSetting(this.document) === "auto";
-			const cellAnswered = slots.exchange.negotiateCellPixels().then(
+			const cellAnswered = negotiateCellPixels(slots.exchange).then(
 				(cellChanged) => {
 					if (!isAttached(this)) {
 						return;
@@ -741,10 +798,10 @@ export class TermDOM extends EventTarget {
 			if (measuresCell) {
 				// A font zoom resizes the grid, and the cell with it. The page
 				// hears of it once, when the cell is known.
-				slots.exchange.deferResizeEvent();
+				deferResizeEvent(slots.exchange);
 				slots.exchange.addEventListener("terminalresize", (event) => {
 					const {sizeChanged} = event as TerminalResizeEvent;
-					void slots.exchange.negotiateCellPixels().then((cellChanged) => {
+					void negotiateCellPixels(slots.exchange).then((cellChanged) => {
 						if (!isAttached(this)) {
 							return;
 						}
@@ -919,7 +976,7 @@ export class TermDOM extends EventTarget {
 		// Leaving the alternate screen puts the cursor where the switch saved
 		// it, on the flow content's bottom row. Step below it, or the shell's
 		// next line lands on ours.
-		slots.exchange.restoreEngagedModes();
+		restoreEngagedModes(slots.exchange);
 		dropFullscreen(this.document);
 		slots.hoverReportingEnabled = false;
 		slots.mouseReportingEnabled = false;
@@ -941,13 +998,13 @@ export class TermDOM extends EventTarget {
 			void slots.staticSibling.dispose();
 			slots.staticSibling = null;
 		}
-		slots.cascade.dispose();
+		dispose(slots.cascade);
 		slots.layout.dispose();
 		clearHighlights(this.document);
 		disconnectObservers(this.document);
 		clearWindowTimers(slots.window);
 		slots.disposal = Promise.all([
-			slots.exchange.flush(),
+			flushExchange(slots.exchange),
 			drained,
 			...slots.lifetimes,
 		]).then(() => {});
@@ -980,19 +1037,19 @@ async function suspendTermDOM(termDOM: TermDOM): Promise<void> {
 		flushDocument(termDOM);
 		termDOMSlots.sealed = true;
 	}
-	termDOMSlots.exchange.releaseModes();
-	await termDOMSlots.exchange.flush();
+	releaseModes(termDOMSlots.exchange);
+	await flushExchange(termDOMSlots.exchange);
 	await suspend.call(termDOMSlots.transport);
 	termDOMSlots.suspended = false;
 	if (termDOMSlots.lifecycle !== "attached") {
 		return;
 	}
-	termDOMSlots.exchange.reclaimModes();
+	reclaimModes(termDOMSlots.exchange);
 	if (termDOM.document.title) {
 		void termDOMSlots.exchange.setTitle(termDOM.document.title);
 	}
 	if (fullscreen) {
-		termDOMSlots.framebuffer.repaintAll();
+		repaintAll(termDOMSlots.framebuffer);
 	}
 	setDocumentVisible(termDOM.document, true);
 	void render(termDOM);
@@ -1118,7 +1175,7 @@ function writeHeldErrors(termDOM: TermDOM): void {
 		return;
 	}
 	termDOMSlots.unwrittenErrors = (termDOMSlots.unwrittenErrors ?? "") + text;
-	void termDOMSlots.exchange.writeLines(text).then(() => {
+	void writeLines(termDOMSlots.exchange, text).then(() => {
 		termDOMSlots.unwrittenErrors = null;
 		if (termDOMSlots.heldErrors.length === 0) {
 			sessionsHoldingErrors.delete(termDOM);
@@ -1179,7 +1236,7 @@ function syncMouseReporting(termDOM: TermDOM): void {
 		return;
 	}
 	termDOMSlots.mouseReportingEnabled = wanted;
-	termDOMSlots.exchange.setDisplayType("mouseCapture", wanted);
+	setDisplayType(termDOMSlots.exchange, "mouseCapture", wanted);
 }
 
 /**
@@ -1191,12 +1248,12 @@ function syncHoverReporting(termDOM: TermDOM): void {
 	const wanted =
 		termDOMSlots.mouseReportingEnabled &&
 		(hoverListenerCount(termDOM.document) > 0 ||
-			termDOMSlots.cascade.hoverRulesExist());
+			hoverRulesExist(termDOMSlots.cascade));
 	if (wanted === termDOMSlots.hoverReportingEnabled) {
 		return;
 	}
 	termDOMSlots.hoverReportingEnabled = wanted;
-	termDOMSlots.exchange.setDisplayType("motionReporting", wanted);
+	setDisplayType(termDOMSlots.exchange, "motionReporting", wanted);
 }
 
 // An image's or a canvas's natural size in cells is its pixels over the
@@ -1277,8 +1334,11 @@ async function render(termDOM: TermDOM): Promise<void> {
 		try {
 			// After the task that asked, and every microtask it queued, as a
 			// browser renders: an edit and whatever answers it in its own
-			// microtasks are one frame, not a frame of the half-done edit.
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			// microtasks are one frame, not a frame of the half-done edit. A
+			// task the runtime runs at once, not a timer, which sleeps the
+			// process and, on a loaded machine, waits for the scheduler to
+			// give it the processor back.
+			await new Promise<void>((resolve) => queueTask(resolve));
 			do {
 				termDOMSlots.renderQueued = false;
 				if (termDOMSlots.lifecycle === "attaching") {
@@ -1307,7 +1367,13 @@ async function render(termDOM: TermDOM): Promise<void> {
 				// microtasks alone, and input and timers would never get a turn.
 				const wait =
 					termDOMSlots.lastFrameAt + FRAME_INTERVAL_MS - performance.now();
-				await new Promise((resolve) => setTimeout(resolve, Math.max(0, wait)));
+				await new Promise<void>((resolve) => {
+					if (wait > 0) {
+						setTimeout(resolve, wait);
+					} else {
+						queueTask(resolve);
+					}
+				});
 				if (!isAttached(termDOM) || termDOMSlots.suspended) {
 					break;
 				}
@@ -1426,7 +1492,7 @@ function printStatic(termDOM: TermDOM): void {
 	applyMutations(termDOM.document);
 	const termDOMSlots = _(termDOM);
 	termDOMSlots.layout.performLayout();
-	termDOMSlots.layout.framePainted();
+	framePainted(termDOMSlots.layout);
 	termDOMSlots.unprinted = true;
 	sessionsUnprinted.add(termDOM);
 	installExitHook();
@@ -1472,9 +1538,9 @@ function flushDocument(termDOM: TermDOM): void {
 	// old frame held below. Never a full ED from the top. tmux archives a
 	// fully erased screen into the scrollback, which put the document there
 	// twice.
-	void termDOMSlots.exchange.cursorToRow(top + 1);
-	void termDOMSlots.exchange.writeLines(output);
-	void termDOMSlots.exchange.eraseBelow();
+	void cursorToRow(termDOMSlots.exchange, top + 1);
+	void writeLines(termDOMSlots.exchange, output);
+	void eraseBelow(termDOMSlots.exchange);
 }
 
 /** The document as ANSI: colors and line breaks, no cursor controls, no modes. */
@@ -1484,7 +1550,7 @@ function renderStatic(termDOM: TermDOM, lineEnding: "\n" | "\r\n"): string {
 	return termDOMSlots.framebuffer.renderStatic(
 		termDOMSlots.layout.documentPaintHeight(),
 		lineEnding,
-		(context) => termDOMSlots.painter.paint(context),
+		(context) => paint(termDOMSlots.painter, context),
 	);
 }
 
@@ -1498,14 +1564,14 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	const termDOMSlots = _(termDOM);
 	if (termDOMSlots.sealed) {
 		termDOMSlots.sealed = false;
-		termDOMSlots.framebuffer.scrollTo(0);
-		termDOMSlots.framebuffer.repaintAll();
+		scrollTo(termDOMSlots.framebuffer, 0);
+		repaintAll(termDOMSlots.framebuffer);
 		// detectAnchor reads a reply, so the listener must be attached.
 		if (termDOMSlots.transport.interactive) {
 			termDOM.attach();
 			// A terminal that does not answer leaves the anchor where it was,
 			// as at attach, and dispose() gives the question up.
-			await termDOMSlots.exchange.detectAnchor(NaN);
+			await detectAnchor(termDOMSlots.exchange, NaN);
 			if (termDOMSlots.lifecycle === "disposed") {
 				return;
 			}
@@ -1526,25 +1592,36 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	const wantAlt = isFullscreen(termDOM);
 	if (wantAlt !== termDOMSlots.onAlternateScreen) {
 		termDOMSlots.onAlternateScreen = wantAlt;
-		termDOMSlots.exchange.setDisplayType("altScreen", wantAlt);
+		setDisplayType(termDOMSlots.exchange, "altScreen", wantAlt);
 		if (wantAlt) {
-			termDOMSlots.exchange.setDisplayType("cursorHidden", true);
-			void termDOMSlots.exchange.clearScreen();
+			setDisplayType(termDOMSlots.exchange, "cursorHidden", true);
+			void clearScreen(termDOMSlots.exchange);
 		}
 		// Drop the diff model, or this frame patches one screen against the
 		// other's content.
-		termDOMSlots.framebuffer.repaintAll();
+		repaintAll(termDOMSlots.framebuffer);
 		syncMouseReporting(termDOM);
 		syncHoverReporting(termDOM);
 	}
 
 	// First, so a hover listener's mutations join the records taken below.
-	termDOMSlots.input.resolvePendingHover();
+	resolvePendingHover(termDOMSlots.input);
 
+	if (import.meta.litest && controlCheck.enabled) {
+		checkFormControls(termDOM.document);
+	}
+	syncFormControls(termDOM.document);
 	applyMutations(termDOM.document);
 	runFocusFixup(termDOM.document);
 
+	// The checks run under test only, and the build strips them.
+	if (import.meta.litest && styleCheck.enabled) {
+		checkStylesFromScratch(termDOMSlots.cascade);
+	}
 	termDOMSlots.layout.performLayout();
+	if (import.meta.litest && layoutCheck.enabled) {
+		checkLayoutFromScratch(termDOMSlots.layout);
+	}
 	clampScrollOffsets(termDOM.document);
 
 	revealPendingCaret(termDOM.document);
@@ -1579,13 +1656,14 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		: termDOMSlots.layout.documentPaintHeight();
 	const regionHeight = Math.min(contentHeight, termDOMSlots.framebuffer.rows);
 
-	const top = fullscreen ? 0 : termDOMSlots.exchange.reserveRows(regionHeight);
+	const top = fullscreen ? 0 : reserveRows(termDOMSlots.exchange, regionHeight);
 
 	if (!fullscreen) {
 		// Through scrollTo, so the journal's delta is what the screen is about
 		// to be shifted by.
 		const maxScroll = Math.max(0, contentHeight - regionHeight);
-		termDOMSlots.framebuffer.scrollTo(
+		scrollTo(
+			termDOMSlots.framebuffer,
 			Math.min(termDOMSlots.framebuffer.scrollTop, maxScroll),
 		);
 	}
@@ -1593,25 +1671,42 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	// The document scroll has nothing to move in fullscreen. A scroll box
 	// inside it still does, under DECSTBM margins.
 	const shift =
-		termDOMSlots.painter.resolveScrollShift(regionHeight, journalled) ??
+		resolveScrollShift(termDOMSlots.painter, regionHeight, journalled) ??
 		(fullscreen || termDOMSlots.framebuffer.journal.frameScroll === 0
 			? null
-			: termDOMSlots.painter.resolveDocumentScrollBand(
+			: resolveDocumentScrollBand(
+				termDOMSlots.painter,
 				regionHeight,
 				termDOMSlots.framebuffer.journal.frameScroll,
 			));
 	// Read after the clamp, which adds to the journal.
 	const clamped = termDOMSlots.framebuffer.journal;
-	const context = termDOMSlots.framebuffer.beginFrame({
+	const damage = takeDamageBands(
+		termDOMSlots.layout,
+		-termDOMSlots.framebuffer.scrollTop,
+		(element, key) => paintsAsBefore(termDOMSlots.painter, element, key),
+	);
+	const context = beginFrame(termDOMSlots.framebuffer, {
 		offset: -termDOMSlots.framebuffer.scrollTop,
 		cursorRow: top,
 		regionRows: top + regionHeight,
 		delta: shift ? shift.delta : fullscreen ? 0 : clamped.frameScroll,
 		shift: shift ?? undefined,
+		// A box scrolled moves rows no box reports.
+		bands: termDOMSlots.framebuffer.wholeDamage || journalled !== null
+			? undefined
+			: damage,
 	});
-	termDOMSlots.painter.paint(context);
-	const ansi = termDOMSlots.framebuffer.endFrame();
-	termDOMSlots.layout.framePainted();
+	paint(termDOMSlots.painter, context);
+	if (import.meta.litest && context.partial && partialFrameCheck.enabled) {
+		checkPartialFrame(
+			termDOMSlots.painter,
+			context,
+			termDOMSlots.framebuffer.prevFrame?.caret ?? null,
+		);
+	}
+	const ansi = endFrame(termDOMSlots.framebuffer);
+	framePainted(termDOMSlots.layout);
 
 	// The cursor stays hidden while a frame paints and between frames. It
 	// is parked for resize bookkeeping, and a cursor blinking there is not
@@ -1621,10 +1716,11 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		if (!fullscreen) {
 			termDOMSlots.flowPainted = true;
 		}
-		termDOMSlots.exchange.setDisplayType("cursorHidden", true);
+		setDisplayType(termDOMSlots.exchange, "cursorHidden", true);
 		await termDOMSlots.exchange.write(ansi);
 	}
-	termDOMSlots.exchange.setDisplayType(
+	setDisplayType(
+		termDOMSlots.exchange,
 		"cursorHidden",
 		!termDOMSlots.framebuffer.caretVisible,
 	);
@@ -1698,9 +1794,6 @@ function hasRuntimeGlobal(name: string): boolean {
 	if (!(name in globalThis)) {
 		return false;
 	}
-	if (name !== "localStorage" && name !== "sessionStorage") {
-		return true;
-	}
 	const emitWarning = process.emitWarning;
 	process.emitWarning = () => {};
 	try {
diff --git a/src/internal/canvas.ts b/src/internal/canvas.ts
index 68c39233..2b3b533a 100644
--- a/src/internal/canvas.ts
+++ b/src/internal/canvas.ts
@@ -22,6 +22,12 @@ import {
 import {
 	type CellContext,
 	type CellStyle,
+	clearGrid,
+	clearRange,
+	drawBox,
+	drawLine,
+	drawRect,
+	drawText,
 	LINE_STYLES,
 	type LineStyle,
 	readCell,
@@ -42,7 +48,6 @@ import {
 	type internals,
 	seal,
 	type Slots,
-	type Step,
 } from "./slots.ts";
 import {getStringWidth, graphemeSegmenter, toVisualOrder} from "./text.ts";
 
@@ -115,9 +120,9 @@ export class ImageData {
 			width = Math.floor(dataOrWidth);
 			height = Math.floor(widthOrHeight);
 			if (!(width > 0) || !(height > 0)) {
-				throw domException(
-					"IndexSizeError",
+				throw new DOMException(
 					"The width and height must be positive",
+					"IndexSizeError",
 				);
 			}
 			if (width * height > MAX_IMAGE_PIXELS) {
@@ -132,16 +137,16 @@ export class ImageData {
 			if (
 				!(width > 0) || data.length === 0 || data.length % (4 * width) !== 0
 			) {
-				throw domException(
-					"IndexSizeError",
+				throw new DOMException(
 					"The data does not hold whole rows of that width",
+					"IndexSizeError",
 				);
 			}
 			const rows = data.length / (4 * width);
 			if (height !== undefined && Math.floor(height) !== rows) {
-				throw domException(
-					"IndexSizeError",
+				throw new DOMException(
 					"The data does not hold that many rows",
+					"IndexSizeError",
 				);
 			}
 			height = rows;
@@ -156,8 +161,6 @@ export class ImageData {
 
 declareSealedRoot(ImageData);
 
-const kColorAt = Symbol("colorAt");
-
 export interface ImageBitmapSlots {
 	bitmapData: Bitmap | null;
 }
@@ -201,9 +204,9 @@ export function createImageBitmapFrom(
 ): ImageBitmap {
 	const bitmap = readDrawable(source);
 	if (bitmap === null) {
-		throw domException(
-			"InvalidStateError",
+		throw new DOMException(
 			"The image has nothing to copy yet",
+			"InvalidStateError",
 		);
 	}
 	const x = Math.floor(sx ?? 0);
@@ -211,7 +214,7 @@ export function createImageBitmapFrom(
 	const width = Math.floor(sw ?? naturalWidthOf(bitmap));
 	const height = Math.floor(sh ?? naturalHeightOf(bitmap));
 	if (width <= 0 || height <= 0) {
-		throw domException("IndexSizeError", "The crop rectangle is empty");
+		throw new DOMException("The crop rectangle is empty", "IndexSizeError");
 	}
 	if (bitmap.width === naturalWidthOf(bitmap)) {
 		const copy = createBitmap(width, height);
@@ -283,14 +286,6 @@ function copyRect(
 	}
 }
 
-// The platform's DOMException where there is one, which every runtime
-// this engine supports has.
-function domException(name: string, message: string): Error {
-	const Constructor = (globalThis as {DOMException?: typeof DOMException})
-		.DOMException;
-	return Constructor ? new Constructor(message, name) : new Error(message);
-}
-
 // ---------------------------------------------------------------------------
 // Colors.
 
@@ -436,8 +431,6 @@ interface Subpath {
 	closed: boolean;
 }
 
-const kSubpaths = Symbol("subpaths");
-
 class PathBuilder {
 	subpaths: Subpath[];
 	last: [number, number] | null;
@@ -559,7 +552,7 @@ class PathBuilder {
 			return;
 		}
 		if (rx < 0 || ry < 0) {
-			throw domException("IndexSizeError", "The radius is negative");
+			throw new DOMException("The radius is negative", "IndexSizeError");
 		}
 		// HTML's sweep rules: a full turn or more draws the whole ellipse,
 		// and otherwise the sweep is brought into (0, 2π) in its direction.
@@ -614,7 +607,7 @@ class PathBuilder {
 			return;
 		}
 		if (radius < 0) {
-			throw domException("IndexSizeError", "The radius is negative");
+			throw new DOMException("The radius is negative", "IndexSizeError");
 		}
 		this.ensure(x1, y1);
 		const [x0, y0] = this.last!;
@@ -786,7 +779,6 @@ interface DOMPointInit {
 
 export interface Path2DSlots {
 	builder: PathBuilder;
-	[kSubpaths]: Step<Path2D[typeof kSubpaths]>;
 }
 
 export interface Path2D {
@@ -805,10 +797,6 @@ export class Path2D {
 		}
 	}
 
-	get [kSubpaths](): Subpath[] {
-		return (this as unknown as Slots<Path2D>).builder.subpaths;
-	}
-
 	addPath(path: Path2D, transform?: Partial<CanvasMatrix>): void {
 		const m: Matrix = [
 			transform?.a ?? 1,
@@ -1457,7 +1445,6 @@ function pathPolygons(subpaths: Subpath[]): number[][] {
 export interface CanvasGradientSlots {
 	stops: Array<{offset: number; color: RGBA}>;
 	position: (x: number, y: number) => number;
-	[kColorAt]: Step<CanvasGradient[typeof kColorAt]>;
 }
 
 export interface CanvasGradient {
@@ -1474,11 +1461,11 @@ export class CanvasGradient {
 
 	addColorStop(offset: number, color: string): void {
 		if (!Number.isFinite(offset) || offset < 0 || offset > 1) {
-			throw domException("IndexSizeError", "The offset is outside 0 to 1");
+			throw new DOMException("The offset is outside 0 to 1", "IndexSizeError");
 		}
 		const parsed = parseCanvasColor(String(color));
 		if (parsed === null) {
-			throw domException("SyntaxError", "The color does not parse");
+			throw new DOMException("The color does not parse", "SyntaxError");
 		}
 		// A stop at an equal offset goes after the ones there already.
 		const slots = _(this);
@@ -1488,44 +1475,47 @@ export class CanvasGradient {
 		}
 		slots.stops.splice(index, 0, {offset, color: parsed});
 	}
+}
 
-	/** The color at a user-space point, or null where the gradient has none. */
-	[kColorAt](this: Slots<CanvasGradient>, x: number, y: number): RGBA | null {
-		const slots = this;
-		const stops = slots.stops;
-		if (stops.length === 0) {
-			return {r: 0, g: 0, b: 0, a: 0};
-		}
-		const t = slots.position(x, y);
-		if (Number.isNaN(t)) {
-			return null;
-		}
-		if (t <= stops[0].offset) {
-			return stops[0].color;
-		}
-		const last = stops[stops.length - 1];
-		if (t >= last.offset) {
-			return last.color;
-		}
-		for (let i = 1; i < stops.length; i++) {
-			const a = stops[i - 1];
-			const b = stops[i];
-			if (t <= b.offset) {
-				const span = b.offset - a.offset;
-				const u = span === 0 ? 1 : (t - a.offset) / span;
-				// HTML interpolates the four channels as they are, without
-				// premultiplying.
-				const mix = (p: number, q: number) => p + (q - p) * u;
-				return {
-					r: mix(a.color.r, b.color.r),
-					g: mix(a.color.g, b.color.g),
-					b: mix(a.color.b, b.color.b),
-					a: mix(a.color.a, b.color.a),
-				};
-			}
-		}
+/** The color at a user-space point, or null where the gradient has none. */
+function getGradientColor(
+	slots: Slots<CanvasGradient>,
+	x: number,
+	y: number,
+): RGBA | null {
+	const stops = slots.stops;
+	if (stops.length === 0) {
+		return {r: 0, g: 0, b: 0, a: 0};
+	}
+	const t = slots.position(x, y);
+	if (Number.isNaN(t)) {
+		return null;
+	}
+	if (t <= stops[0].offset) {
+		return stops[0].color;
+	}
+	const last = stops[stops.length - 1];
+	if (t >= last.offset) {
 		return last.color;
 	}
+	for (let i = 1; i < stops.length; i++) {
+		const a = stops[i - 1];
+		const b = stops[i];
+		if (t <= b.offset) {
+			const span = b.offset - a.offset;
+			const u = span === 0 ? 1 : (t - a.offset) / span;
+			// HTML interpolates the four channels as they are, without
+			// premultiplying.
+			const mix = (p: number, q: number) => p + (q - p) * u;
+			return {
+				r: mix(a.color.r, b.color.r),
+				g: mix(a.color.g, b.color.g),
+				b: mix(a.color.b, b.color.b),
+				a: mix(a.color.a, b.color.a),
+			};
+		}
+	}
+	return last.color;
 }
 
 declareSealedRoot(CanvasGradient);
@@ -1535,7 +1525,6 @@ export interface CanvasPatternSlots {
 	repeatX: boolean;
 	repeatY: boolean;
 	patternTransform: Matrix;
-	[kColorAt]: Step<CanvasPattern[typeof kColorAt]>;
 }
 
 export interface CanvasPattern {
@@ -1564,35 +1553,43 @@ export class CanvasPattern {
 			transform?.f ?? 0,
 		];
 	}
+}
 
-	[kColorAt](this: Slots<CanvasPattern>, x: number, y: number): RGBA {
-		const slots = this;
-		const inverse = invert(slots.patternTransform);
-		if (inverse !== null) {
-			[x, y] = apply(inverse, x, y);
-		}
-		const bitmap = slots.patternBitmap;
-		const {width, height, data} = bitmap;
-		// The pattern tiles at the image's natural size.
-		let px = Math.floor((x * width) / naturalWidthOf(bitmap));
-		let py = Math.floor((y * height) / naturalHeightOf(bitmap));
-		if (slots.repeatX) {
-			px = ((px % width) + width) % width;
-		}
-		if (slots.repeatY) {
-			py = ((py % height) + height) % height;
-		}
-		if (px < 0 || py < 0 || px >= width || py >= height) {
-			return {r: 0, g: 0, b: 0, a: 0};
-		}
-		const at = (py * width + px) * 4;
-		return {
-			r: data[at],
-			g: data[at + 1],
-			b: data[at + 2],
-			a: data[at + 3] / 255,
-		};
+function getPatternColor(
+	slots: Slots<CanvasPattern>,
+	x: number,
+	y: number,
+): RGBA {
+	const inverse = invert(slots.patternTransform);
+	if (inverse !== null) {
+		[x, y] = apply(inverse, x, y);
+	}
+	const bitmap = slots.patternBitmap;
+	const {width, height, data} = bitmap;
+	// The pattern tiles at the image's natural size.
+	let px = Math.floor((x * width) / naturalWidthOf(bitmap));
+	let py = Math.floor((y * height) / naturalHeightOf(bitmap));
+	if (slots.repeatX) {
+		px = ((px % width) + width) % width;
+	}
+	if (slots.repeatY) {
+		py = ((py % height) + height) % height;
 	}
+	if (px < 0 || py < 0 || px >= width || py >= height) {
+		return {r: 0, g: 0, b: 0, a: 0};
+	}
+	const at = (py * width + px) * 4;
+	return {r: data[at], g: data[at + 1], b: data[at + 2], a: data[at + 3] / 255};
+}
+
+function getPaintColor(
+	paint: CanvasGradient | CanvasPattern,
+	x: number,
+	y: number,
+): RGBA | null {
+	return paint instanceof CanvasGradient
+		? getGradientColor(_(paint), x, y)
+		: getPatternColor(_(paint), x, y);
 }
 
 declareSealedRoot(CanvasPattern);
@@ -1785,17 +1782,6 @@ interface CanvasHost {
 	direction(): "ltr" | "rtl";
 }
 
-const kSetMatrix = Symbol("setMatrix");
-const kSubpathsFor = Symbol("subpathsFor");
-const kReadPathArgs = Symbol("readPathArgs");
-const kStrokeStyle = Symbol("strokeStyle");
-const kScale = Symbol("scale");
-const kRectMask = Symbol("rectMask");
-const kPaint = Symbol("paint");
-const kDropText = Symbol("dropText");
-const kCoverText = Symbol("coverText");
-const kDrawText = Symbol("drawText");
-
 // The host getContext() is making a context for. A context made any other
 // way has none, and its constructor is illegal, as a browser's is.
 let constructingHost: CanvasHost | GridHost | null = null;
@@ -1827,16 +1813,6 @@ export interface CanvasRenderingContext2DSlots {
 	state: State;
 	stack: State[];
 	path: PathBuilder;
-	[kSetMatrix]: Step<CanvasRenderingContext2D[typeof kSetMatrix]>;
-	[kSubpathsFor]: Step<CanvasRenderingContext2D[typeof kSubpathsFor]>;
-	[kReadPathArgs]: Step<CanvasRenderingContext2D[typeof kReadPathArgs]>;
-	[kStrokeStyle]: Step<CanvasRenderingContext2D[typeof kStrokeStyle]>;
-	[kScale]: Step<CanvasRenderingContext2D[typeof kScale]>;
-	[kRectMask]: Step<CanvasRenderingContext2D[typeof kRectMask]>;
-	[kPaint]: Step<CanvasRenderingContext2D[typeof kPaint]>;
-	[kDropText]: Step<CanvasRenderingContext2D[typeof kDropText]>;
-	[kCoverText]: Step<CanvasRenderingContext2D[typeof kCoverText]>;
-	[kDrawText]: Step<CanvasRenderingContext2D[typeof kDrawText]>;
 }
 
 export interface CanvasRenderingContext2D {
@@ -2102,21 +2078,22 @@ export class CanvasRenderingContext2D {
 
 	scale(x: number, y: number): void {
 		const slots = _(this);
-		slots[kSetMatrix](multiply(slots.state.transform, [x, 0, 0, y, 0, 0]));
+		setMatrix(slots, multiply(slots.state.transform, [x, 0, 0, y, 0, 0]));
 	}
 
 	rotate(angle: number): void {
 		const cos = Math.cos(angle);
 		const sin = Math.sin(angle);
 		const slots = _(this);
-		slots[kSetMatrix](
+		setMatrix(
+			slots,
 			multiply(slots.state.transform, [cos, sin, -sin, cos, 0, 0]),
 		);
 	}
 
 	translate(x: number, y: number): void {
 		const slots = _(this);
-		slots[kSetMatrix](multiply(slots.state.transform, [1, 0, 0, 1, x, y]));
+		setMatrix(slots, multiply(slots.state.transform, [1, 0, 0, 1, x, y]));
 	}
 
 	transform(
@@ -2128,7 +2105,7 @@ export class CanvasRenderingContext2D {
 		f: number,
 	): void {
 		const slots = _(this);
-		slots[kSetMatrix](multiply(slots.state.transform, [a, b, c, d, e, f]));
+		setMatrix(slots, multiply(slots.state.transform, [a, b, c, d, e, f]));
 	}
 
 	setTransform(
@@ -2141,9 +2118,9 @@ export class CanvasRenderingContext2D {
 	): void {
 		const slots = _(this);
 		if (typeof a === "number") {
-			slots[kSetMatrix]([a, b!, c!, d!, e!, f!]);
+			setMatrix(slots, [a, b!, c!, d!, e!, f!]);
 		} else {
-			slots[kSetMatrix]([
+			setMatrix(slots, [
 				a?.a ?? 1,
 				a?.b ?? 0,
 				a?.c ?? 0,
@@ -2155,7 +2132,7 @@ export class CanvasRenderingContext2D {
 	}
 
 	resetTransform(): void {
-		_(this)[kSetMatrix]([1, 0, 0, 1, 0, 0]);
+		setMatrix(_(this), [1, 0, 0, 1, 0, 0]);
 	}
 
 	getTransform(): CanvasMatrix {
@@ -2204,7 +2181,7 @@ export class CanvasRenderingContext2D {
 			throw new TypeError("The gradient's circles must be finite");
 		}
 		if (r0 < 0 || r1 < 0) {
-			throw domException("IndexSizeError", "A radius is negative");
+			throw new DOMException("A radius is negative", "IndexSizeError");
 		}
 		// The largest t whose circle passes through the point (HTML's
 		// two-circle gradient), solved as a quadratic.
@@ -2256,7 +2233,10 @@ export class CanvasRenderingContext2D {
 		const bitmap = readDrawable(image);
 		const mode = repetition ?? "";
 		if (!["", "repeat", "repeat-x", "repeat-y", "no-repeat"].includes(mode)) {
-			throw domException("SyntaxError", "The repetition is not one HTML names");
+			throw new DOMException(
+				"The repetition is not one HTML names",
+				"SyntaxError",
+			);
 		}
 		if (bitmap === null || bitmap.width === 0 || bitmap.height === 0) {
 			return null;
@@ -2343,15 +2323,15 @@ export class CanvasRenderingContext2D {
 
 	fill(pathOrRule?: Path2D | FillRule, rule?: FillRule): void {
 		const slots = _(this);
-		const args = slots[kReadPathArgs](pathOrRule, rule);
+		const args = readPathArgs(pathOrRule, rule);
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
-			pathPolygons(slots[kSubpathsFor](args.path)),
+			pathPolygons(subpathsFor(slots, args.path)),
 			bitmap.width,
 			bitmap.height,
 			args.rule,
 		);
-		slots[kPaint](mask, slots.state.fillStyle);
+		paintMask(slots, mask, slots.state.fillStyle);
 	}
 
 	stroke(path?: Path2D): void {
@@ -2359,23 +2339,23 @@ export class CanvasRenderingContext2D {
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
 			strokePolygons(
-				slots[kSubpathsFor](path),
-				slots[kStrokeStyle](),
-				slots[kScale](),
+				subpathsFor(slots, path),
+				getStrokeStyle(slots),
+				getTransformScale(slots),
 			),
 			bitmap.width,
 			bitmap.height,
 			"nonzero",
 		);
-		slots[kPaint](mask, slots.state.strokeStyle);
+		paintMask(slots, mask, slots.state.strokeStyle);
 	}
 
 	clip(pathOrRule?: Path2D | FillRule, rule?: FillRule): void {
 		const slots = _(this);
-		const args = slots[kReadPathArgs](pathOrRule, rule);
+		const args = readPathArgs(pathOrRule, rule);
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
-			pathPolygons(slots[kSubpathsFor](args.path)),
+			pathPolygons(subpathsFor(slots, args.path)),
 			bitmap.width,
 			bitmap.height,
 			args.rule,
@@ -2415,7 +2395,7 @@ export class CanvasRenderingContext2D {
 		// The point is in canvas coordinates, unaffected by the transform.
 		let winding = 0;
 		let crossings = 0;
-		for (const points of pathPolygons(_(this)[kSubpathsFor](path))) {
+		for (const points of pathPolygons(subpathsFor(_(this), path))) {
 			const count = points.length / 2;
 			for (let i = 0; i < count; i++) {
 				const ax = points[i * 2];
@@ -2447,9 +2427,9 @@ export class CanvasRenderingContext2D {
 		}
 		const slots = _(this);
 		for (const points of strokePolygons(
-			slots[kSubpathsFor](path),
-			slots[kStrokeStyle](),
-			slots[kScale](),
+			subpathsFor(slots, path),
+			getStrokeStyle(slots),
+			getTransformScale(slots),
 		)) {
 			let inside = false;
 			const count = points.length / 2;
@@ -2476,7 +2456,7 @@ export class CanvasRenderingContext2D {
 			return;
 		}
 		const slots = _(this);
-		slots[kPaint](slots[kRectMask](x, y, w, h), slots.state.fillStyle);
+		paintMask(slots, getRectMask(slots, x, y, w, h), slots.state.fillStyle);
 	}
 
 	strokeRect(x: number, y: number, w: number, h: number): void {
@@ -2489,12 +2469,16 @@ export class CanvasRenderingContext2D {
 		builder.rect(x, y, w, h);
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
-			strokePolygons(builder.subpaths, slots[kStrokeStyle](), slots[kScale]()),
+			strokePolygons(
+				builder.subpaths,
+				getStrokeStyle(slots),
+				getTransformScale(slots),
+			),
 			bitmap.width,
 			bitmap.height,
 			"nonzero",
 		);
-		slots[kPaint](mask, slots.state.strokeStyle);
+		paintMask(slots, mask, slots.state.strokeStyle);
 	}
 
 	clearRect(x: number, y: number, w: number, h: number): void {
@@ -2502,7 +2486,7 @@ export class CanvasRenderingContext2D {
 			return;
 		}
 		const slots = _(this);
-		const mask = slots[kRectMask](x, y, w, h);
+		const mask = getRectMask(slots, x, y, w, h);
 		const clip = slots.state.clip;
 		const data = slots.host.bitmap().data;
 		for (let i = 0; i < mask.length; i++) {
@@ -2517,7 +2501,7 @@ export class CanvasRenderingContext2D {
 				data[at] = data[at + 1] = data[at + 2] = 0;
 			}
 		}
-		slots[kDropText](mask, 0.5);
+		dropText(slots, mask, 0.5);
 		slots.host.changed();
 	}
 
@@ -2655,7 +2639,7 @@ export class CanvasRenderingContext2D {
 		};
 		// Large downscales average the source area a pixel covers, so a
 		// photo drawn small does not alias.
-		const scale = slots[kScale]();
+		const scale = getTransformScale(slots);
 		const shrinkX = Math.abs(sw / (dw * scale));
 		const shrinkY = Math.abs(sh / (dh * scale));
 		const average = smooth && (shrinkX > 2 || shrinkY > 2);
@@ -2710,7 +2694,7 @@ export class CanvasRenderingContext2D {
 			}
 		}
 		if (operation === "source-over" || operation === "copy") {
-			slots[kDropText](mask, 0.5);
+			dropText(slots, mask, 0.5);
 		}
 		slots.host.changed();
 	}
@@ -2727,7 +2711,7 @@ export class CanvasRenderingContext2D {
 			throw new TypeError("The rectangle must be finite");
 		}
 		if (sw === 0 || sh === 0) {
-			throw domException("IndexSizeError", "The rectangle is empty");
+			throw new DOMException("The rectangle is empty", "IndexSizeError");
 		}
 		if (sw < 0) {
 			sx += sw;
@@ -2802,12 +2786,12 @@ export class CanvasRenderingContext2D {
 
 	fillText(text: string, x: number, y: number, _maxWidth?: number): void {
 		const slots = _(this);
-		slots[kDrawText](String(text), x, y, slots.state.fillStyle);
+		drawContextText(slots, String(text), x, y, slots.state.fillStyle);
 	}
 
 	strokeText(text: string, x: number, y: number, _maxWidth?: number): void {
 		const slots = _(this);
-		slots[kDrawText](String(text), x, y, slots.state.strokeStyle);
+		drawContextText(slots, String(text), x, y, slots.state.strokeStyle);
 	}
 
 	/** Widths in canvas pixels: a cell's width in pixels for each column. */
@@ -2838,289 +2822,277 @@ export class CanvasRenderingContext2D {
 	}
 
 	drawFocusIfNeeded(): void {}
+}
 
-	[kSetMatrix](this: Slots<CanvasRenderingContext2D>, m: Matrix): void {
-		if (!isFiniteAll(...m)) {
-			return;
-		}
-		const slots = this;
-		slots.state.transform = m;
-		slots.path.transform = m;
+function setMatrix(slots: Slots<CanvasRenderingContext2D>, m: Matrix): void {
+	if (!isFiniteAll(...m)) {
+		return;
 	}
+	slots.state.transform = m;
+	slots.path.transform = m;
+}
 
-	// A Path2D's points are in user space and go through the transform
-	// when it is used; the current path's went through as they were added.
-	[kSubpathsFor](
-		this: Slots<CanvasRenderingContext2D>,
-		path?: Path2D,
-	): Subpath[] {
-		const slots = this;
-		if (path === undefined) {
-			return slots.path.subpaths;
-		}
-		const builder = new PathBuilder();
-		builder.append(_(path)[kSubpaths], slots.state.transform);
-		return builder.subpaths;
+// A Path2D's points are in user space and go through the transform
+// when it is used; the current path's went through as they were added.
+function subpathsFor(
+	slots: Slots<CanvasRenderingContext2D>,
+	path?: Path2D,
+): Subpath[] {
+	if (path === undefined) {
+		return slots.path.subpaths;
 	}
+	const builder = new PathBuilder();
+	builder.append(_(path).builder.subpaths, slots.state.transform);
+	return builder.subpaths;
+}
 
-	[kReadPathArgs](
-		pathOrRule?: Path2D | FillRule,
-		maybeRule?: FillRule,
-	): {path: Path2D | undefined; rule: FillRule} {
-		if (pathOrRule instanceof Path2D) {
-			return {
-				path: pathOrRule,
-				rule: maybeRule === "evenodd" ? "evenodd" : "nonzero",
-			};
-		}
+function readPathArgs(
+	pathOrRule?: Path2D | FillRule,
+	maybeRule?: FillRule,
+): {path: Path2D | undefined; rule: FillRule} {
+	if (pathOrRule instanceof Path2D) {
 		return {
-			path: undefined,
-			rule: pathOrRule === "evenodd" ? "evenodd" : "nonzero",
+			path: pathOrRule,
+			rule: maybeRule === "evenodd" ? "evenodd" : "nonzero",
 		};
 	}
+	return {
+		path: undefined,
+		rule: pathOrRule === "evenodd" ? "evenodd" : "nonzero",
+	};
+}
 
-	[kStrokeStyle](this: Slots<CanvasRenderingContext2D>): StrokeStyle {
-		const slots = this;
-		const scale = slots[kScale]();
-		return {
-			width: slots.state.lineWidth,
-			cap: slots.state.lineCap,
-			join: slots.state.lineJoin,
-			miterLimit: slots.state.miterLimit,
-			dash: slots.state.lineDash.map((value) => value * scale),
-			dashOffset: slots.state.lineDashOffset * scale,
-		};
-	}
+function getStrokeStyle(slots: Slots<CanvasRenderingContext2D>): StrokeStyle {
+	const scale = getTransformScale(slots);
+	return {
+		width: slots.state.lineWidth,
+		cap: slots.state.lineCap,
+		join: slots.state.lineJoin,
+		miterLimit: slots.state.miterLimit,
+		dash: slots.state.lineDash.map((value) => value * scale),
+		dashOffset: slots.state.lineDashOffset * scale,
+	};
+}
 
-	// How much the transform scales lengths, for line widths and dashes.
-	[kScale](this: Slots<CanvasRenderingContext2D>): number {
-		const m = this.state.transform;
-		return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
-	}
+// How much the transform scales lengths, for line widths and dashes.
+function getTransformScale(slots: Slots<CanvasRenderingContext2D>): number {
+	const m = slots.state.transform;
+	return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
+}
 
-	[kRectMask](
-		this: Slots<CanvasRenderingContext2D>,
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-	): Float32Array {
-		const builder = new PathBuilder();
-		const slots = this;
-		builder.transform = slots.state.transform;
-		builder.rect(x, y, w, h);
-		const bitmap = slots.host.bitmap();
-		return rasterize(
-			pathPolygons(builder.subpaths),
-			bitmap.width,
-			bitmap.height,
-			"nonzero",
-		);
-	}
+function getRectMask(
+	slots: Slots<CanvasRenderingContext2D>,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): Float32Array {
+	const builder = new PathBuilder();
+	builder.transform = slots.state.transform;
+	builder.rect(x, y, w, h);
+	const bitmap = slots.host.bitmap();
+	return rasterize(
+		pathPolygons(builder.subpaths),
+		bitmap.width,
+		bitmap.height,
+		"nonzero",
+	);
+}
 
-	[kPaint](
-		this: Slots<CanvasRenderingContext2D>,
-		mask: Float32Array,
-		paint: Paint,
-	): void {
-		const slots = this;
-		const bitmap = slots.host.bitmap();
-		const {width, height, data} = bitmap;
-		const operation = slots.state.globalCompositeOperation;
-		const unbounded = UNBOUNDED.has(operation);
-		const alpha = slots.state.globalAlpha;
-		const clip = slots.state.clip;
-		const solid = typeof paint === "string" ? parseCanvasColor(paint) : null;
-		const inverse = typeof paint === "string"
-			? null
-			: invert(slots.state.transform);
-		for (let y = 0; y < height; y++) {
-			for (let x = 0; x < width; x++) {
-				const i = y * width + x;
-				const clipCover = clip === null ? 1 : clip[i];
-				if (clipCover <= 0) {
-					continue;
-				}
-				const cover = mask[i];
-				if (cover <= 0 && !unbounded) {
-					continue;
-				}
-				let color: RGBA | null = solid;
-				if (color === null && cover > 0 && inverse !== null) {
-					const [ux, uy] = apply(inverse, x + 0.5, y + 0.5);
-					color = _((paint as CanvasGradient | CanvasPattern))[kColorAt](
-						ux,
-						uy,
-					);
-				}
-				const sa = color === null ? 0 : color.a * alpha * cover;
-				if (clipCover < 1) {
-					// Blend the result back toward the old pixel where the clip
-					// only partly covers it.
-					const before = [
-						data[i * 4],
-						data[i * 4 + 1],
-						data[i * 4 + 2],
-						data[i * 4 + 3],
-					];
-					composite(
-						data,
-						i * 4,
-						color?.r ?? 0,
-						color?.g ?? 0,
-						color?.b ?? 0,
-						sa,
-						operation,
-					);
-					for (let c = 0; c < 4; c++) {
-						data[i * 4 + c] =
-							before[c] + (data[i * 4 + c] - before[c]) * clipCover;
-					}
-				} else {
-					composite(
-						data,
-						i * 4,
-						color?.r ?? 0,
-						color?.g ?? 0,
-						color?.b ?? 0,
-						sa,
-						operation,
-					);
-				}
+function paintMask(
+	slots: Slots<CanvasRenderingContext2D>,
+	mask: Float32Array,
+	paint: Paint,
+): void {
+	const bitmap = slots.host.bitmap();
+	const {width, height, data} = bitmap;
+	const operation = slots.state.globalCompositeOperation;
+	const unbounded = UNBOUNDED.has(operation);
+	const alpha = slots.state.globalAlpha;
+	const clip = slots.state.clip;
+	const solid = typeof paint === "string" ? parseCanvasColor(paint) : null;
+	const inverse = typeof paint === "string"
+		? null
+		: invert(slots.state.transform);
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const i = y * width + x;
+			const clipCover = clip === null ? 1 : clip[i];
+			if (clipCover <= 0) {
+				continue;
 			}
-		}
-		if (operation === "source-over") {
-			slots[kCoverText](
-				mask,
-				(x, y) =>
-					solid ??
-				(inverse === null
-					? null
-					: _((paint as CanvasGradient | CanvasPattern))[kColorAt](
-						...apply(inverse, x + 0.5, y + 0.5),
-					)),
-				alpha,
-			);
-		} else if (operation === "copy") {
-			slots[kDropText](mask, 0.5);
-		}
-		slots.host.changed();
-	}
-
-	// Translucent paint over text blends the text toward the paint, as it
-	// would blend the text's pixels in a browser, so drawing a dim fill
-	// every frame fades text out over several frames.
-	[kCoverText](
-		this: Slots<CanvasRenderingContext2D>,
-		mask: Float32Array,
-		colorAt: (x: number, y: number) => RGBA | null,
-		alpha: number,
-	): void {
-		const slots = this;
-		const bitmap = slots.host.bitmap();
-		if (bitmap.width === 0 || bitmap.height === 0) {
-			return;
-		}
-		slots.text = slots.text.filter((run) => {
-			const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
-			const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
-			const cover = mask[y * bitmap.width + x];
-			if (cover <= 0) {
-				return true;
+			const cover = mask[i];
+			if (cover <= 0 && !unbounded) {
+				continue;
 			}
-			const paint = colorAt(x, y);
-			const amount = paint === null ? 0 : paint.a * alpha * cover;
-			run.covered = 1 - (1 - run.covered) * (1 - amount);
-			if (run.covered >= 0.5) {
-				return false;
+			let color: RGBA | null = solid;
+			if (color === null && cover > 0 && inverse !== null) {
+				const [ux, uy] = apply(inverse, x + 0.5, y + 0.5);
+				color = getPaintColor(paint as CanvasGradient | CanvasPattern, ux, uy);
 			}
-			if (paint !== null) {
-				run.color = {
-					r: run.color.r + (paint.r - run.color.r) * amount,
-					g: run.color.g + (paint.g - run.color.g) * amount,
-					b: run.color.b + (paint.b - run.color.b) * amount,
-					a: run.color.a,
-				};
+			const sa = color === null ? 0 : color.a * alpha * cover;
+			if (clipCover < 1) {
+				// Blend the result back toward the old pixel where the clip
+				// only partly covers it.
+				const before = [
+					data[i * 4],
+					data[i * 4 + 1],
+					data[i * 4 + 2],
+					data[i * 4 + 3],
+				];
+				composite(
+					data,
+					i * 4,
+					color?.r ?? 0,
+					color?.g ?? 0,
+					color?.b ?? 0,
+					sa,
+					operation,
+				);
+				for (let c = 0; c < 4; c++) {
+					data[i * 4 + c] =
+						before[c] + (data[i * 4 + c] - before[c]) * clipCover;
+				}
+			} else {
+				composite(
+					data,
+					i * 4,
+					color?.r ?? 0,
+					color?.g ?? 0,
+					color?.b ?? 0,
+					sa,
+					operation,
+				);
 			}
-			return true;
-		});
-	}
-
-	// Text under the shape painted last is covered, as it would be
-	// in pixels.
-	[kDropText](
-		this: Slots<CanvasRenderingContext2D>,
-		mask: Float32Array,
-		threshold: number,
-	): void {
-		const slots = this;
-		const bitmap = slots.host.bitmap();
-		if (bitmap.width === 0 || bitmap.height === 0) {
-			return;
 		}
-		// An anchor on or past an edge (right-aligned text at the canvas's
-		// width, say) is read at the nearest pixel inside, so clearing the
-		// canvas clears it too.
-		slots.text = slots.text.filter((run) => {
-			const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
-			const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
-			return mask[y * bitmap.width + x] < threshold;
-		});
 	}
+	if (operation === "source-over") {
+		coverText(
+			slots,
+			mask,
+			(x, y) =>
+				solid ??
+			(inverse === null
+				? null
+				: getPaintColor(
+					paint as CanvasGradient | CanvasPattern,
+					...apply(inverse, x + 0.5, y + 0.5),
+				)),
+			alpha,
+		);
+	} else if (operation === "copy") {
+		dropText(slots, mask, 0.5);
+	}
+	slots.host.changed();
+}
 
-	[kDrawText](
-		this: Slots<CanvasRenderingContext2D>,
-		text: string,
-		x: number,
-		y: number,
-		paint: Paint,
-	): void {
-		if (!isFiniteAll(x, y)) {
-			return;
+// Translucent paint over text blends the text toward the paint, as it
+// would blend the text's pixels in a browser, so drawing a dim fill
+// every frame fades text out over several frames.
+function coverText(
+	slots: Slots<CanvasRenderingContext2D>,
+	mask: Float32Array,
+	colorAt: (x: number, y: number) => RGBA | null,
+	alpha: number,
+): void {
+	const bitmap = slots.host.bitmap();
+	if (bitmap.width === 0 || bitmap.height === 0) {
+		return;
+	}
+	slots.text = slots.text.filter((run) => {
+		const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
+		const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
+		const cover = mask[y * bitmap.width + x];
+		if (cover <= 0) {
+			return true;
 		}
-		const slots = this;
-		const [px, py] = apply(slots.state.transform, x, y);
-		const color = typeof paint === "string"
-			? parseCanvasColor(paint)
-			: _((paint as CanvasGradient | CanvasPattern))[kColorAt](x, y);
-		if (color === null || color.a * slots.state.globalAlpha === 0) {
-			return;
+		const paint = colorAt(x, y);
+		const amount = paint === null ? 0 : paint.a * alpha * cover;
+		run.covered = 1 - (1 - run.covered) * (1 - amount);
+		if (run.covered >= 0.5) {
+			return false;
 		}
-		// "inherit" takes the canvas's direction as the text is drawn.
-		const direction = slots.state.direction === "inherit"
-			? slots.host.direction()
-			: slots.state.direction;
-		const rtl = direction === "rtl";
-		const align = slots.state.textAlign;
-		const resolved = align === "center"
-			? "center"
-			: align === "right" ||
-				(align === "end" && !rtl) ||
-				(align === "start" && rtl)
-				? "right"
-				: "left";
-		const words = slots.state.font.toLowerCase().split(/\s+/);
-		const run: CanvasTextRun = {
-			text: toVisualOrder(
-				text.replace(/[\t\n\f\r]/g, " "),
-				rtl ? "rtl" : "ltr",
-			),
-			x: px,
-			y: py,
-			align: resolved,
-			baseline: slots.state.textBaseline,
-			color: {...color, a: color.a * slots.state.globalAlpha},
-			covered: 0,
-			bold: words.some(
-				(word) => word === "bold" ||
-					word === "bolder" ||
-				(/^\d+$/.test(word) && Number(word) >= 600),
-			),
-			italic: words.includes("italic") || words.includes("oblique"),
-		};
-		slots.text.push(run);
-		slots.host.changed();
+		if (paint !== null) {
+			run.color = {
+				r: run.color.r + (paint.r - run.color.r) * amount,
+				g: run.color.g + (paint.g - run.color.g) * amount,
+				b: run.color.b + (paint.b - run.color.b) * amount,
+				a: run.color.a,
+			};
+		}
+		return true;
+	});
+}
+
+// Text under the shape painted last is covered, as it would be
+// in pixels.
+function dropText(
+	slots: Slots<CanvasRenderingContext2D>,
+	mask: Float32Array,
+	threshold: number,
+): void {
+	const bitmap = slots.host.bitmap();
+	if (bitmap.width === 0 || bitmap.height === 0) {
+		return;
+	}
+	// An anchor on or past an edge (right-aligned text at the canvas's
+	// width, say) is read at the nearest pixel inside, so clearing the
+	// canvas clears it too.
+	slots.text = slots.text.filter((run) => {
+		const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
+		const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
+		return mask[y * bitmap.width + x] < threshold;
+	});
+}
+
+function drawContextText(
+	slots: Slots<CanvasRenderingContext2D>,
+	text: string,
+	x: number,
+	y: number,
+	paint: Paint,
+): void {
+	if (!isFiniteAll(x, y)) {
+		return;
 	}
+	const [px, py] = apply(slots.state.transform, x, y);
+	const color = typeof paint === "string"
+		? parseCanvasColor(paint)
+		: getPaintColor(paint as CanvasGradient | CanvasPattern, x, y);
+	if (color === null || color.a * slots.state.globalAlpha === 0) {
+		return;
+	}
+	// "inherit" takes the canvas's direction as the text is drawn.
+	const direction = slots.state.direction === "inherit"
+		? slots.host.direction()
+		: slots.state.direction;
+	const rtl = direction === "rtl";
+	const align = slots.state.textAlign;
+	const resolved = align === "center"
+		? "center"
+		: align === "right" ||
+			(align === "end" && !rtl) ||
+			(align === "start" && rtl)
+			? "right"
+			: "left";
+	const words = slots.state.font.toLowerCase().split(/\s+/);
+	const run: CanvasTextRun = {
+		text: toVisualOrder(text.replace(/[\t\n\f\r]/g, " "), rtl ? "rtl" : "ltr"),
+		x: px,
+		y: py,
+		align: resolved,
+		baseline: slots.state.textBaseline,
+		color: {...color, a: color.a * slots.state.globalAlpha},
+		covered: 0,
+		bold: words.some(
+			(word) => word === "bold" ||
+				word === "bolder" ||
+			(/^\d+$/.test(word) && Number(word) >= 600),
+		),
+		italic: words.includes("italic") || words.includes("oblique"),
+	};
+	slots.text.push(run);
+	slots.host.changed();
 }
 
 declareSealedRoot(CanvasRenderingContext2D);
@@ -3177,10 +3149,6 @@ interface GridHost {
 	drawsPixels(): boolean;
 }
 
-const kResolveDirection = Symbol("resolveDirection");
-const kTextColor = Symbol("textColor");
-const kRect = Symbol("rect");
-
 type GridTextAlign = "start" | "end" | "left" | "right" | "center";
 type GridDirection = "ltr" | "rtl" | "inherit";
 type GridLineStyle = LineStyle["style"] | "none";
@@ -3220,9 +3188,6 @@ export interface CanvasCellGridContextSlots {
 	gridHost: GridHost;
 	gridState: GridState;
 	gridStack: GridState[];
-	[kResolveDirection]: Step<CanvasCellGridContext[typeof kResolveDirection]>;
-	[kTextColor]: Step<CanvasCellGridContext[typeof kTextColor]>;
-	[kRect]: Step<CanvasCellGridContext[typeof kRect]>;
 }
 
 export interface CanvasCellGridContext {
@@ -3412,19 +3377,19 @@ export class CanvasCellGridContext {
 
 	fillRect(x: number, y: number, w: number, h: number): void {
 		const slots = _(this);
-		const rect = slots[kRect](x, y, w, h);
+		const rect = getGridRect(x, y, w, h);
 		const fill = toGridFill(slots.gridState.fillStyle);
 		if (rect === null || fill === undefined) {
 			return;
 		}
 		const [x0, y0, x1, y1] = rect;
-		slots.gridHost.cells().drawRect(x0, y0, x1 - x0, y1 - y0, fill);
+		drawRect(slots.gridHost.cells(), x0, y0, x1 - x0, y1 - y0, fill);
 		slots.gridHost.changed();
 	}
 
 	clearRect(x: number, y: number, w: number, h: number): void {
 		const slots = _(this);
-		const rect = slots[kRect](x, y, w, h);
+		const rect = getGridRect(x, y, w, h);
 		if (rect === null) {
 			return;
 		}
@@ -3432,7 +3397,7 @@ export class CanvasCellGridContext {
 		const x0 = Math.max(0, rect[0]);
 		const x1 = Math.min(cols, rect[2]);
 		for (let row = Math.max(0, rect[1]); row < Math.min(rows, rect[3]); row++) {
-			grid.clearRange(row * cols + x0, row * cols + x1);
+			clearRange(grid, row * cols + x0, row * cols + x1);
 		}
 		slots.gridHost.changed();
 	}
@@ -3442,12 +3407,12 @@ export class CanvasCellGridContext {
 			return;
 		}
 		const slots = _(this);
-		const color = slots[kTextColor](slots.gridState.fillStyle);
+		const color = getGridTextColor(slots.gridState.fillStyle);
 		if (color === undefined || (maxWidth !== undefined && !(maxWidth > 0))) {
 			return;
 		}
 		const cells = slots.gridHost.cells();
-		const rtl = slots[kResolveDirection]() === "rtl";
+		const rtl = resolveGridDirection(slots) === "rtl";
 		const clusters = [
 			...graphemeSegmenter.segment(
 				toVisualOrder(
@@ -3501,7 +3466,8 @@ export class CanvasCellGridContext {
 				inside &&
 				grid.cluster[index] !== 0 &&
 				readCell(grid, index)?.inverse === true;
-			cells.drawText(
+			drawText(
+				cells,
 				cluster,
 				col,
 				row,
@@ -3529,7 +3495,7 @@ export class CanvasCellGridContext {
 			return;
 		}
 		const slots = _(this);
-		const color = slots[kTextColor](slots.gridState.strokeStyle);
+		const color = getGridTextColor(slots.gridState.strokeStyle);
 		const style = slots.gridState.lineStyle;
 		if (color === undefined || style === "none" || style === "hidden") {
 			return;
@@ -3538,13 +3504,13 @@ export class CanvasCellGridContext {
 		const line: LineStyle = {style, color};
 		const cells = slots.gridHost.cells();
 		if (b === d) {
-			cells.drawLine(Math.min(a, c), b, Math.max(a, c) + 1, b, {
+			drawLine(cells, Math.min(a, c), b, Math.max(a, c) + 1, b, {
 				...line,
 				startCap: a === c ? "square" : undefined,
 				endCap: a === c ? "square" : undefined,
 			});
 		} else if (a === c) {
-			cells.drawLine(a, Math.min(b, d), a, Math.max(b, d) + 1, line);
+			drawLine(cells, a, Math.min(b, d), a, Math.max(b, d) + 1, line);
 		} else {
 			return;
 		}
@@ -3554,8 +3520,8 @@ export class CanvasCellGridContext {
 	/** A box on the cells `w` by `h` from (x, y), in strokeStyle and lineStyle. */
 	strokeRect(x: number, y: number, w: number, h: number): void {
 		const slots = _(this);
-		const rect = slots[kRect](x, y, w, h);
-		const color = slots[kTextColor](slots.gridState.strokeStyle);
+		const rect = getGridRect(x, y, w, h);
+		const color = getGridTextColor(slots.gridState.strokeStyle);
 		const style = slots.gridState.lineStyle;
 		if (
 			rect === null ||
@@ -3568,24 +3534,23 @@ export class CanvasCellGridContext {
 		const [x0, y0, x1, y1] = rect;
 		const side: LineStyle = {style, color};
 		const corner = slots.gridState.lineJoin === "round" ? "round" : undefined;
-		slots.gridHost.cells()
-			.drawBox(x0, y0, x1 - x0, y1 - y0, {
-				top: side,
-				right: side,
-				bottom: side,
-				left: side,
-				topLeft: corner,
-				topRight: corner,
-				bottomRight: corner,
-				bottomLeft: corner,
-			});
+		drawBox(slots.gridHost.cells(), x0, y0, x1 - x0, y1 - y0, {
+			top: side,
+			right: side,
+			bottom: side,
+			left: side,
+			topLeft: corner,
+			topRight: corner,
+			bottomRight: corner,
+			bottomLeft: corner,
+		});
 		slots.gridHost.changed();
 	}
 
 	measureText(text: string): {width: number} {
 		const slots = _(this);
 		return slots.gridHost.cells()
-			.measureText(toVisualOrder(String(text), slots[kResolveDirection]()));
+			.measureText(toVisualOrder(String(text), resolveGridDirection(slots)));
 	}
 
 	/**
@@ -3676,7 +3641,7 @@ export class CanvasCellGridContext {
 						: null,
 				);
 				if (half !== null) {
-					cells.drawText(half.char, x, y, half.style);
+					drawText(cells, half.char, x, y, half.style);
 				}
 			}
 		}
@@ -3735,52 +3700,53 @@ export class CanvasCellGridContext {
 
 	reset(): void {
 		const slots = _(this);
-		slots.gridHost.cells().grid.clear();
+		clearGrid(slots.gridHost.cells().grid);
 		slots.gridState = defaultGridState();
 		slots.gridStack = [];
 		slots.gridHost.changed();
 	}
+}
 
-	[kResolveDirection](this: Slots<CanvasCellGridContext>): "ltr" | "rtl" {
-		const slots = this;
-		const {direction} = slots.gridState;
-		return direction === "inherit" ? slots.gridHost.direction() : direction;
-	}
+function resolveGridDirection(
+	slots: Slots<CanvasCellGridContext>,
+): "ltr" | "rtl" {
+	const {direction} = slots.gridState;
+	return direction === "inherit" ? slots.gridHost.direction() : direction;
+}
 
-	// A kept color as a glyph's color: a cell color, null for the
-	// terminal's own text color, or undefined for one too transparent to
-	// show, as a 2d context's text under half opaque does not.
-	[kTextColor](value: string): number | null | undefined {
-		const system = getSystemColor(value);
-		if (system !== null) {
-			return system.cell === 0 ? null : system.cell;
-		}
-		const color = parseCanvasColor(value)!;
-		if (color.a < 0.5) {
-			return undefined;
-		}
-		return toCellColor((color.r << 16) | (color.g << 8) | color.b);
+// A kept color as a glyph's color: a cell color, null for the
+// terminal's own text color, or undefined for one too transparent to
+// show, as a 2d context's text under half opaque does not.
+function getGridTextColor(value: string): number | null | undefined {
+	const system = getSystemColor(value);
+	if (system !== null) {
+		return system.cell === 0 ? null : system.cell;
+	}
+	const color = parseCanvasColor(value)!;
+	if (color.a < 0.5) {
+		return undefined;
 	}
+	return toCellColor((color.r << 16) | (color.g << 8) | color.b);
+}
 
-	[kRect](
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-	): [number, number, number, number] | null {
-		if (!isFiniteAll(x, y, w, h)) {
-			return null;
-		}
-		if (w < 0) {
-			x += w;
-			w = -w;
-		}
-		if (h < 0) {
-			y += h;
-			h = -h;
-		}
-		return [Math.round(x), Math.round(y), Math.round(x + w), Math.round(y + h)];
+function getGridRect(
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): [number, number, number, number] | null {
+	if (!isFiniteAll(x, y, w, h)) {
+		return null;
+	}
+	if (w < 0) {
+		x += w;
+		w = -w;
+	}
+	if (h < 0) {
+		y += h;
+		h = -h;
 	}
+	return [Math.round(x), Math.round(y), Math.round(x + w), Math.round(y + h)];
 }
 
 declareSealedRoot(CanvasCellGridContext);
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index d8631e0c..0cf22ce7 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -17,46 +17,36 @@ import * as CSSTree from "./csstree.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
 	appendChildOf,
-	attributeOf,
 	constructInternal,
-	containsOf,
 	dispatchAsUserAgent,
 	type Document as DOMDocument,
 	type Element as DOMElement,
 	type Node as DOMNode,
 	dropPseudoElement,
 	ensurePseudoElement,
+	flatChildren,
 	flatParentElement,
 	flushLayout,
 	flushStyle,
 	getAddedNodes,
-	getAttributeList,
-	getCellPixels,
-	getCellSizeSetting,
 	getClassTokens,
-	getDocumentExchange,
 	getHighlightRegistry,
 	getPseudoHost,
 	getPseudoName,
 	getRemovedNodes,
 	getShadowRoot,
 	getTopLayer,
-	hasAttributeOf,
-	HTML_NAMESPACE,
 	isButtonInput,
+	isConnectedNode,
 	isDocumentElement,
 	isShadowRoot,
 	isUAShadowTree,
-	localNameOf,
-	MATHML_NAMESPACE,
-	namespaceOf,
-	nodeTypeOf,
-	ownerDocumentOf,
 	pseudoElement,
 	pseudoElementCount,
 	releaseRemovedNodes,
 	reobserveShadowRoot,
 	setAttributeOf,
+	setStyleHooks,
 	styleElementCount,
 	TransitionEvent,
 	type Window,
@@ -81,6 +71,22 @@ import {
 } from "./slots.ts";
 import {getStringWidth, splitOnASCIIWhitespace} from "./text.ts";
 import {clearTimeout, queueMicrotask, setTimeout} from "./timers.ts";
+import {
+	attributeOf,
+	containsOf,
+	ELEMENT_NODE,
+	getAttributeList,
+	getDocumentExchange,
+	hasAttributeOf,
+	HTML_NAMESPACE,
+	localNameOf,
+	MATHML_NAMESPACE,
+	namespaceOf,
+	nextInTree,
+	nodeTypeOf,
+	ownerDocumentOf,
+} from "./tree.ts";
+import {cellsFromPx, getCellSize, pxFromCells, UNIT_CELL} from "./units.ts";
 import {
 	UA_CONTROL_STYLES,
 	UA_DOCUMENT_STYLES,
@@ -88,72 +94,6 @@ import {
 } from "./useragent.ts";
 import {windowMember} from "./webidl.ts";
 
-// What one terminal cell measures in CSS pixels, per document. Layout
-// counts cells; everything a page writes or reads counts CSS pixels. At
-// the default unit size the two are the same number.
-
-export interface CellSize {
-	width: number;
-	height: number;
-}
-
-export const UNIT_CELL: Readonly<CellSize> = {width: 1, height: 1};
-
-/**
- * How the page's lengths map to cells: one CSS pixel a cell, the
- * terminal's pixels once it reports them, or a size the program gives.
- */
-export type CellSizeSetting = "unit" | "auto" | Readonly<CellSize>;
-
-export function getCellSize(node: Node | null | undefined): Readonly<CellSize> {
-	const setting = node ? getCellSizeSetting(node) : undefined;
-	if (setting === undefined || setting === "unit") {
-		return UNIT_CELL;
-	}
-	return setting === "auto" ? getCellPixels(node!)! : setting;
-}
-
-/**
- * The cell an image's pixels divide by. An image's pixels are CSS
- * pixels, so this is the page's cell. Under the unit cell that would be
- * a cell per pixel, so the screen's cell stands in. A document no TermDOM
- * draws has no screen, and draws no image.
- */
-export function getImageCellSize(
-	node: Node | null | undefined,
-): Readonly<CellSize> {
-	const page = getCellSize(node);
-	if (page !== UNIT_CELL) {
-		return page;
-	}
-	return (node && getCellPixels(node)) ?? page;
-}
-
-/**
- * CSS pixels along one axis as cells, fractions kept. Layout rounds the
- * edges of the boxes it places, not each length, so lengths that add up
- * still add up.
- */
-function cellsFromPx(
-	px: number,
-	vertical: boolean,
-	node: Node | null | undefined,
-): number {
-	const cell = getCellSize(node);
-	const size = vertical ? cell.height : cell.width;
-	return px / size;
-}
-
-/** Cells along one axis as CSS pixels. */
-export function pxFromCells(
-	cells: number,
-	vertical: boolean,
-	node: Node | null | undefined,
-): number {
-	const cell = getCellSize(node);
-	return cells * (vertical ? cell.height : cell.width);
-}
-
 // Per-element defaults that are STATE, not stylesheet: the fullscreen
 // element's viewport block, a select sized to its widest option label so
 // the text control never jumps, the size attribute driving an input's width.
@@ -391,8 +331,65 @@ export function getCellBorderWidths(
 	};
 }
 
-/** An element's margins, borders and padding, in cells. */
+// The entry point for every read of the cascade from a node, including
+// reads deep inside the cascade itself that have no Cascade in
+// hand.
+const documentCascades = new WeakMap<object, Cascade>();
+
+// Each resolved style's box model, by the object the style keeps until
+// it changes.
+const boxModels = new WeakMap<object, CSSValues.BoxModel>();
+
+/**
+ * An element's margins, borders and padding, in cells. The same object
+ * until the element's style changes, so a caller copies it to change it.
+ */
+/**
+ * Called with every style value read while set: the element, what was
+ * read, and the value. A computation that caches its result records what
+ * it read, and is invalidated when any of it reads differently.
+ */
+type StyleReadRecorder = (
+	element: Element,
+	read: string,
+	value: string,
+) => void;
+
+let readRecorder: StyleReadRecorder | null = null;
+
+// A box model is recorded as one read, not the values it is made of, and
+// by the record it is: the same until the element's style changes.
+const BOX_MODEL_READ = "box-model";
+const boxModelIds = new WeakMap<CSSValues.BoxModel, string>();
+let nextBoxModelId = 0;
+
+function getBoxModelId(model: CSSValues.BoxModel): string {
+	let id = boxModelIds.get(model);
+	if (id === undefined) {
+		id = String(nextBoxModelId++);
+		boxModelIds.set(model, id);
+	}
+	return id;
+}
+
 export function getBoxModel(element: Element): CSSValues.BoxModel {
+	const document = ownerDocumentOf(element);
+	const cascade = document ? documentCascades.get(document) : undefined;
+	const key = cascade?.getStyleKey(element) ?? null;
+	let model = key === null ? undefined : boxModels.get(key);
+	if (model === undefined) {
+		// Recorded as one read, cached or not, rather than as the values
+		// that make it up.
+		model = recordStyleReads(() => {}, () => readBoxModel(element));
+		if (key !== null) {
+			boxModels.set(key, model);
+		}
+	}
+	readRecorder?.(element, BOX_MODEL_READ, getBoxModelId(model));
+	return model;
+}
+
+function readBoxModel(element: Element): CSSValues.BoxModel {
 	// The engine's own read: the cascade's declaration directly, without
 	// the author path's resolved-value work.
 	const length = (property: string, vertical: boolean, signed = false) =>
@@ -443,11 +440,6 @@ export function getBoxModel(element: Element): CSSValues.BoxModel {
 	};
 }
 
-// The entry point for every read of the cascade from a node, including
-// reads deep inside the cascade itself that have no Cascade in
-// hand.
-const documentCascades = new WeakMap<object, Cascade>();
-
 // What list-style-type spells, quoted the way a content value is
 // written. Null outside a list.
 function getDefaultMarkerContent(hostElement: Element): string | null {
@@ -510,7 +502,7 @@ function getListGutterWidth(listElement: Element): number {
 				continue;
 			}
 			const marker = cascade
-				? cascade.getMarkerContent(child)
+				? getMarkerContent(cascade, child)
 				: CSSValues.withMarkerSeparator(getListMarker(child, listElement));
 			if (!marker) {
 				continue;
@@ -557,10 +549,6 @@ function createCSSNamespace(document: Document): typeof CSSNamespace {
 
 const inlineStyles = new WeakMap<Element, CSSStyleDeclaration>();
 
-const kComputedValue = Symbol("computedValue");
-const kCustomProperties = Symbol("customProperties");
-const kSync = Symbol("sync");
-
 // Declarations are stored as longhands. A shorthand write expands and a
 // shorthand read reconstructs. An element-owned block and the `style`
 // attribute are one store seen from two sides: a property write
@@ -589,7 +577,7 @@ interface CSSStyleDeclarationSlots {
 	block: CSSValues.DeclarationBlock | null;
 	// How many numeric index properties currently name a declaration.
 	indexed: number;
-	[kSync]: Step<CSSStyleDeclaration[typeof kSync]>;
+	_sync: Step<CSSStyleDeclaration["_sync"]>;
 }
 
 interface CSSStyleDeclaration {
@@ -635,7 +623,7 @@ class CSSStyleDeclaration {
 			syncViewIndices(this);
 			return slots.viewOf.length;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return slots.declarations.length;
 	}
 
@@ -644,7 +632,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.cssText;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return serializeDeclarations(this);
 	}
 
@@ -654,7 +642,7 @@ class CSSStyleDeclaration {
 			slots.viewOf.cssText = text;
 			return;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		slots.declarations = [];
 		slots.byName.clear();
 		for (const declaration of CSSValues.parseDeclarationText(text ?? "")) {
@@ -677,7 +665,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.item(index);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return slots.declarations[index]?.name ?? "";
 	}
 
@@ -687,7 +675,7 @@ class CSSStyleDeclaration {
 			syncViewIndices(this);
 			return slots.viewOf[Symbol.iterator]();
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return slots.declarations.map((entry) => entry.name)[Symbol.iterator]();
 	}
 
@@ -696,7 +684,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.getPropertyValue(property);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		const declared = findDeclaration(this, name);
 		if (declared) {
@@ -711,7 +699,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.getPropertyPriority(property);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		const declared = findDeclaration(this, name);
 		if (declared) {
@@ -733,7 +721,7 @@ class CSSStyleDeclaration {
 			slots.viewOf.setProperty(property, value, priority);
 			return;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		if (!isSupportedDeclaration(this, name)) {
 			return;
@@ -764,7 +752,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.removeProperty(property);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		const previous = this.getPropertyValue(name);
 		let changed = removeDeclaration(this, name);
@@ -781,7 +769,7 @@ class CSSStyleDeclaration {
 	 * Reparse the `style` attribute if it changed since this object last wrote
 	 * it.
 	 */
-	[kSync]?(this: Slots<CSSStyleDeclaration>): void {
+	_sync?(this: Slots<CSSStyleDeclaration>): void {
 		const slots = this;
 		if (!slots.element) {
 			return;
@@ -818,7 +806,7 @@ function getDeclarationBlock(
 	style: CSSStyleDeclaration,
 ): CSSValues.DeclarationBlock {
 	const styleSlots = _(style);
-	styleSlots[kSync]!();
+	styleSlots._sync!();
 	if (styleSlots.declarations.length === 0) {
 		return EMPTY_DECLARATIONS;
 	}
@@ -1159,21 +1147,32 @@ for (const property of CSS_PROPERTIES) {
 	}
 }
 
-const pageViews = new WeakMap<CSSStyleDeclaration, CSSStyleProperties>();
+const pageViews = new WeakMap<Element, Map<string, CSSStyleProperties>>();
 
 // The engine resolves a computed style through classes of its own, which
 // a page must not find in a prototype chain. What a page gets is a plain
-// CSSStyleProperties that reads through to the engine's, one per
-// declaration, so asking again returns the same object.
-function getPageView(source: CSSStyleDeclaration): CSSStyleProperties {
-	let view = pageViews.get(source);
+// CSSStyleProperties that reads through to the engine's, one per element
+// and pseudo-element, so asking again returns the same object. A restyle
+// gives the element a new declaration, and the view reads through to it,
+// keeping the indices it already defined.
+function getPageView(
+	source: CSSStyleDeclaration,
+	element: Element,
+	pseudoElement: string,
+): CSSStyleProperties {
+	let views = pageViews.get(element);
+	if (views === undefined) {
+		views = new Map();
+		pageViews.set(element, views);
+	}
+	let view = views.get(pseudoElement);
 	if (view === undefined) {
 		view = Object.create(CSSStyleProperties.prototype) as CSSStyleProperties;
 		seal(view, CSSStyleProperties, CSSStyleDeclaration);
-		_(view).viewOf = source;
 		_(view).indexed = 0;
-		pageViews.set(source, view);
+		views.set(pseudoElement, view);
 	}
+	_(view).viewOf = source;
 	syncViewIndices(view);
 	return view;
 }
@@ -1676,6 +1675,27 @@ class CSSStyleRule extends CSSGroupingRule {
 	}
 }
 
+// A sheet opens with @layer statements, then @import rules, then
+// @namespace rules, and either of the last two anywhere else is dropped,
+// as css-cascade-5 and css-namespaces-3 place them.
+const PRELUDE_LAYERS = 0;
+const PRELUDE_IMPORTS = 1;
+const PRELUDE_NAMESPACES = 2;
+const PRELUDE_OVER = 3;
+
+function getPreludeStage(rule: CSSRule): number {
+	if (rule instanceof CSSLayerStatementRule) {
+		return PRELUDE_LAYERS;
+	}
+	if (rule instanceof CSSImportRule) {
+		return PRELUDE_IMPORTS;
+	}
+	if (rule instanceof CSSNamespaceRule) {
+		return PRELUDE_NAMESPACES;
+	}
+	return PRELUDE_OVER;
+}
+
 function getSheetNamespaces(
 	sheet: CSSStyleSheet | null,
 ): SelectorNamespaces | undefined {
@@ -1683,7 +1703,10 @@ function getSheetNamespaces(
 		return undefined;
 	}
 	const namespaces: SelectorNamespaces = {default: null, prefixes: new Map()};
-	for (const rule of Array.from(sheet.cssRules)) {
+	for (const rule of sheet.cssRules) {
+		if (getPreludeStage(rule) === PRELUDE_OVER) {
+			break;
+		}
 		if (!(rule instanceof CSSNamespaceRule)) {
 			continue;
 		}
@@ -2777,7 +2800,7 @@ interface CSSStyleSheetSlots {
 	title: string | null;
 	// The owner node's text CSSStyleSheet sheet last parsed.
 	text: string | null;
-	[kSync]: Step<CSSStyleSheet[typeof kSync]>;
+	_sync: Step<CSSStyleSheet["_sync"]>;
 }
 
 interface CSSStyleSheet {
@@ -2815,7 +2838,7 @@ class CSSStyleSheet {
 
 	get cssRules(): CSSRuleList {
 		const slots = _(this);
-		slots[kSync]!();
+		slots._sync!();
 		return slots.ruleList;
 	}
 
@@ -2876,7 +2899,7 @@ class CSSStyleSheet {
 			throw typeError("insertRule requires a rule", this);
 		}
 		const slots = _(this);
-		slots[kSync]!();
+		slots._sync!();
 		if (index > slots.rules.length) {
 			throw domException(
 				`Cannot insert at index ${index}`,
@@ -2906,7 +2929,7 @@ class CSSStyleSheet {
 			throw typeError("deleteRule requires an index", this);
 		}
 		const slots = _(this);
-		slots[kSync]!();
+		slots._sync!();
 		if (index >= slots.rules.length) {
 			throw domException(
 				`Cannot delete at index ${index}`,
@@ -2943,7 +2966,7 @@ class CSSStyleSheet {
 	}
 
 	removeRule(index = 0): void {
-		_(this)[kSync]!();
+		_(this)._sync!();
 		if (index >= this.cssRules.length) {
 			throw domException(
 				`Cannot delete at index ${index}`,
@@ -2985,7 +3008,7 @@ class CSSStyleSheet {
 	}
 
 	// Reparse the owner element's text if it changed.
-	[kSync]?(this: Slots<CSSStyleSheet>): void {
+	_sync?(this: Slots<CSSStyleSheet>): void {
 		const slots = this;
 		const node = slots.ownerNode;
 		if (!node || node.tagName !== "STYLE") {
@@ -3254,6 +3277,7 @@ function convertRules(
 			run = [];
 		}
 	};
+	let stage = PRELUDE_LAYERS;
 	for (const node of nodes) {
 		if (node.type === "Declaration") {
 			if (nestedContext) {
@@ -3266,6 +3290,15 @@ function convertRules(
 		if (!rule) {
 			continue;
 		}
+		const ruleStage = getPreludeStage(rule);
+		if (ruleStage !== PRELUDE_LAYERS && ruleStage !== PRELUDE_OVER) {
+			if (parentRule !== null || ruleStage < stage) {
+				continue;
+			}
+			stage = ruleStage;
+		} else if (stage !== PRELUDE_LAYERS || ruleStage === PRELUDE_OVER) {
+			stage = PRELUDE_OVER;
+		}
 		if (rule instanceof CSSNamespaceRule) {
 			if (rule.prefix === "") {
 				namespaces.default = rule.namespaceURI;
@@ -3831,7 +3864,7 @@ function getUAStyleSheet(): CSSStyleSheet {
 interface MeasuredSlots {
 	element: Element;
 	cascade: Cascade | null;
-	[kComputedValue](property: string): string;
+	_computedValue(property: string): string;
 }
 
 interface MeasuredDeclaration {
@@ -3853,6 +3886,44 @@ export function getComputedValue(
 	element: Element,
 	property: string,
 	pseudoElement = "",
+): string {
+	const value = readComputedValue(element, property, pseudoElement);
+	readRecorder?.(
+		element,
+		pseudoElement === "" ? property : `${pseudoElement}|${property}`,
+		value,
+	);
+	return value;
+}
+
+export function recordStyleReads<T>(
+	recorder: StyleReadRecorder,
+	compute: () => T,
+): T {
+	const outer = readRecorder;
+	readRecorder = recorder;
+	try {
+		return compute();
+	} finally {
+		readRecorder = outer;
+	}
+}
+
+/** What a recorded read reads now. */
+export function readStyleAgain(element: Element, read: string): string {
+	if (read === BOX_MODEL_READ) {
+		return getBoxModelId(getBoxModel(element));
+	}
+	const bar = read.indexOf("|");
+	return bar === -1
+		? readComputedValue(element, read, "")
+		: readComputedValue(element, read.slice(bar + 1), read.slice(0, bar));
+}
+
+function readComputedValue(
+	element: Element,
+	property: string,
+	pseudoElement: string,
 ): string {
 	// A pseudo-element node's style is its host's declaration for the
 	// pseudo-element it fills. It matches no selector of its own.
@@ -3876,10 +3947,10 @@ export function getComputedValue(
 		return "";
 	}
 	return pseudoElement
-		? _(getPseudoDeclaration(cascade, element, pseudoElement))[kComputedValue](
+		? _(getPseudoDeclaration(cascade, element, pseudoElement))._computedValue(
 			property,
 		)
-		: cascade.computedSlotsFor(element)[kComputedValue](property);
+		: computedSlotsFor(cascade, element)._computedValue(property);
 }
 
 // A box with nothing to contain or transform: no box at all, or a plain
@@ -3936,10 +4007,6 @@ function hasContainment(element: Element, kinds: Set<string>): boolean {
 		.some((keyword) => kinds.has(keyword));
 }
 
-function hasPaintContainment(element: Element): boolean {
-	return hasContainment(element, PAINT_CONTAINMENT);
-}
-
 export function hasLayoutOrPaintContainment(element: Element): boolean {
 	return hasContainment(element, LAYOUT_OR_PAINT_CONTAINMENT);
 }
@@ -3950,7 +4017,7 @@ export function getUsedOverflow(element: Element, axis: "x" | "y"): string {
 	const overflow =
 		getComputedValue(element, axis === "x" ? "overflow-x" : "overflow-y") ||
 		getComputedValue(element, "overflow");
-	return overflow === "visible" && hasPaintContainment(element)
+	return overflow === "visible" && hasContainment(element, PAINT_CONTAINMENT)
 		? "clip"
 		: overflow;
 }
@@ -4029,10 +4096,6 @@ function defineLonghandIndices(prototype: object): void {
 	}
 }
 
-const kSyncResolved = Symbol("syncResolved");
-const kUsedValue = Symbol("usedValue");
-const kBaseValue = Symbol("baseValue");
-
 // Writing a computed style is an error, not a no-op. It throws the
 // document's own DOMException, since one from another global is not
 // what an author catches.
@@ -4182,7 +4245,7 @@ function getResolvedValues(
 	if (cascade.getStyleKey(element) === null) {
 		return null;
 	}
-	return cascade.computedSlotsFor(element).resolved;
+	return computedSlotsFor(cascade, element).resolved;
 }
 
 function getSharedResolved(
@@ -4266,11 +4329,10 @@ interface ComputedStyleDeclarationSlots extends CSSStyleDeclarationSlots {
 	// for the paint style to be derived again.
 	styleVersion: object;
 	custom: string[] | null;
-	[kCustomProperties]: Step<ComputedStyleDeclaration[typeof kCustomProperties]>;
-	[kUsedValue]: Step<ComputedStyleDeclaration[typeof kUsedValue]>;
-	[kBaseValue]: Step<ComputedStyleDeclaration[typeof kBaseValue]>;
-	[kSyncResolved]: Step<ComputedStyleDeclaration[typeof kSyncResolved]>;
-	[kComputedValue]: Step<ComputedStyleDeclaration[typeof kComputedValue]>;
+	_usedValue: Step<ComputedStyleDeclaration["_usedValue"]>;
+	_baseValue: Step<ComputedStyleDeclaration["_baseValue"]>;
+	_syncResolved: Step<ComputedStyleDeclaration["_syncResolved"]>;
+	_computedValue: Step<ComputedStyleDeclaration["_computedValue"]>;
 }
 
 interface ComputedStyleDeclaration {
@@ -4327,16 +4389,16 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		}
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(slots)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
 		// A flow-relative longhand resolves as the physical longhand it maps
 		// to: same slot, same measurement, same result.
 		property = toPhysicalProperty(this, property);
 		if (slots.cascade && USED_VALUE_PROPERTIES.has(property)) {
-			return slots[kUsedValue](property);
+			return slots._usedValue(property);
 		}
 		if (slots.cascade && MIN_SIZE_PROPERTIES.has(property)) {
-			return getResolvedMinSize(this, slots[kComputedValue](property));
+			return getResolvedMinSize(this, slots._computedValue(property));
 		}
 		if (slots.cascade && USED_TRACK_PROPERTIES.has(property)) {
 			const tracks = usedGridTracks(
@@ -4356,9 +4418,9 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 				this.getPropertyValue(longhand),
 			);
 		}
-		let computed = slots[kComputedValue](property);
+		let computed = slots._computedValue(property);
 		if (AUTO_COLOR_PROPERTIES.has(property) && computed === "auto") {
-			computed = slots[kComputedValue]("color");
+			computed = slots._computedValue("color");
 		}
 		// A system color computes as its keyword, and reads back as the color
 		// it stands for here.
@@ -4397,32 +4459,10 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		return [...CSS_LONGHANDS, ...getCustomNames(this)][Symbol.iterator]();
 	}
 
-	[kCustomProperties](this: Slots<ComputedStyleDeclaration>): string[] {
-		const names: string[] = [];
-		for (const rule of this.cssRules) {
-			for (const name of Object.keys(rule.declarations)) {
-				if (name.startsWith("--") && !names.includes(name)) {
-					names.push(name);
-				}
-			}
-		}
-		for (const name of Object.keys(
-			getInlineDeclarations(ownerOf(this)).declarations,
-		)) {
-			if (name.startsWith("--") && !names.includes(name)) {
-				names.push(name);
-			}
-		}
-		return names;
-	}
-
 	// Measured through the same flush a geometry read takes, and memoized
 	// behind it, so a property-heavy caller measures once per layout. The
 	// memo belongs to the cascade, which lets a flush drop every one.
-	[kUsedValue](
-		this: Slots<ComputedStyleDeclaration>,
-		property: string,
-	): string {
+	_usedValue(this: Slots<ComputedStyleDeclaration>, property: string): string {
 		const slots = this;
 		const cascade = slots.cascade!;
 		const used = getUsedValues(cascade, ownerOf(this));
@@ -4431,7 +4471,7 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 			return memoized;
 		}
 
-		const computed = slots[kComputedValue](property);
+		const computed = slots._computedValue(property);
 		const value = measureUsedValue(ownerOf(this), property, computed);
 		used.set(property, value);
 		return value;
@@ -4440,17 +4480,14 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 	// The cascade's value before a running transition overrides it, meaning
 	// the after-change style. An interpolated value moves every frame and
 	// must never enter the memo.
-	[kBaseValue](
-		this: Slots<ComputedStyleDeclaration>,
-		property: string,
-	): string {
+	_baseValue(this: Slots<ComputedStyleDeclaration>, property: string): string {
 		const slots = this;
 		let value = slots.resolved.get(property);
 		if (value === undefined) {
 			const longhands = CSSValues.getLonghands(property);
 			value = longhands
 				? CSSValues.resolveShorthand(property, longhands, (longhand) =>
-					slots[kBaseValue](longhand),
+					slots._baseValue(longhand),
 				)
 				: getAbsolutizedValue(
 					ownerOf(this),
@@ -4463,7 +4500,7 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 
 	// Reads call this only when the cascade no longer vouches for this
 	// declaration. It runs under every property read of every element.
-	[kSyncResolved](this: Slots<ComputedStyleDeclaration>): void {
+	_syncResolved(this: Slots<ComputedStyleDeclaration>): void {
 		const slots = this;
 		if (!slots.cascade) {
 			return;
@@ -4490,21 +4527,21 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		processTransitionStyle(
 			slots.cascade,
 			slots.element,
-			(property) => slots[kBaseValue](property),
+			(property) => slots._baseValue(property),
 			"",
 		);
 	}
 
-	[kComputedValue](
+	_computedValue(
 		this: Slots<ComputedStyleDeclaration>,
 		property: string,
 	): string {
 		const slots = this;
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(this)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
-		const value = slots[kBaseValue](property);
+		const value = slots._baseValue(property);
 		const cascade = slots.cascade;
 		if (cascade !== null && cascade.activeTransitions.size > 0) {
 			const transitional = getTransitionValue(
@@ -4521,6 +4558,27 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 	}
 }
 
+function getDeclaredCustomNames(
+	slots: Slots<ComputedStyleDeclaration>,
+): string[] {
+	const names: string[] = [];
+	for (const rule of slots.cssRules) {
+		for (const name of Object.keys(rule.declarations)) {
+			if (name.startsWith("--") && !names.includes(name)) {
+				names.push(name);
+			}
+		}
+	}
+	for (const name of Object.keys(
+		getInlineDeclarations(ownerOf(slots)).declarations,
+	)) {
+		if (name.startsWith("--") && !names.includes(name)) {
+			names.push(name);
+		}
+	}
+	return names;
+}
+
 // The cascade's declaration, interned, and absolutized against this
 // element when the interned entry says only an element can resolve it.
 function getAbsolutizedValue(
@@ -4575,7 +4633,7 @@ function getLengthContext(
 	const font = CSSValues.getFontSize(
 		own
 			? parent ? getComputedValue(parent, "font-size") : ""
-			: declarationSlots[kComputedValue]("font-size"),
+			: declarationSlots._computedValue("font-size"),
 		initial,
 	);
 	const root = getRootFontSize(declaration, own);
@@ -4654,7 +4712,7 @@ function getRootFontSize(
 		!root || (ownFontSize && root === declarationSlots.element)
 			? ""
 			: root === declarationSlots.element
-				? declarationSlots[kComputedValue]("font-size")
+				? declarationSlots._computedValue("font-size")
 				: getComputedValue(root, "font-size"),
 		getCellSize(declarationSlots.element).height,
 	);
@@ -4670,7 +4728,7 @@ function toPhysicalProperty(
 	return (
 		CSSValues.getPhysicalProperty(
 			property,
-			_(declaration)[kComputedValue]("direction"),
+			_(declaration)._computedValue("direction"),
 		) ?? property
 	);
 }
@@ -4685,7 +4743,7 @@ function measureUsedValue(
 	// A border with no style draws nothing and takes no space, whatever
 	// width it declares.
 	if (property.startsWith("border-") && property.endsWith("-width")) {
-		const style = _(declaration)[kComputedValue](
+		const style = _(declaration)._computedValue(
 			`${property.slice(0, -"-width".length)}-style`,
 		);
 		if (!style || style === "none" || style === "hidden") {
@@ -4716,7 +4774,7 @@ function measureUsedValue(
 		const border = vertical ? rect.height : rect.width;
 		// The used value of width is the box box-sizing names, so a
 		// border-box element reads its border box (css-sizing-3 §3.1).
-		if (_(declaration)[kComputedValue]("box-sizing") === "border-box") {
+		if (_(declaration)._computedValue("box-sizing") === "border-box") {
 			return CSSValues.getUsedLength(Math.max(0, border));
 		}
 		const edges =
@@ -4786,7 +4844,7 @@ function getUsedInset(
 
 	const opposite = OPPOSITE_INSET[property];
 	const other = CSSValues.getInsetLength(
-		_(declaration)[kComputedValue](opposite),
+		_(declaration)._computedValue(opposite),
 		basis,
 	);
 	// A relatively positioned box is offset from where it already was, so
@@ -4947,7 +5005,7 @@ function getResolvedMinSize(
 			return "0px";
 		}
 	}
-	if (declarationSlots[kComputedValue]("aspect-ratio") !== "auto") {
+	if (declarationSlots._computedValue("aspect-ratio") !== "auto") {
 		return "auto";
 	}
 	const parent = flatParentElement(declarationSlots.element);
@@ -5209,7 +5267,7 @@ function resolvePropertyValue(
 	if (
 		property === "text-align" &&
 		CSSValues.getLegacyAlignment(value) !== null &&
-		/^(?:inline-)?table$/.test(declarationSlots[kComputedValue]("display"))
+		/^(?:inline-)?table$/.test(declarationSlots._computedValue("display"))
 	) {
 		return "start";
 	}
@@ -5270,7 +5328,7 @@ function resolveCascadedValue(
 		// on.
 		return property === "color"
 			? (resolveFromParent(declaration, "color") ?? "")
-			: _(declaration)[kComputedValue]("color");
+			: _(declaration)._computedValue("color");
 	}
 	return value;
 }
@@ -5291,7 +5349,7 @@ function resolvePropertyValueRaw(
 			name === property ||
 			CSSValues.getPhysicalProperty(
 				name,
-				(direction ??= declarationSlots[kComputedValue]("direction")),
+				(direction ??= declarationSlots._computedValue("direction")),
 			) === property;
 
 	const inline = getInlineDeclarations(declaration);
@@ -5426,7 +5484,7 @@ function getCustomNames(computed: ComputedStyleDeclaration): string[] {
 	const computedSlots = _(computed);
 	const current = computedSlots.cascade?.currentDeclarations;
 	if (current !== undefined && !current.has(computedSlots)) {
-		computedSlots[kSyncResolved]();
+		computedSlots._syncResolved();
 	}
 	if (computedSlots.custom) {
 		return computedSlots.custom;
@@ -5438,7 +5496,8 @@ function getCustomNames(computed: ComputedStyleDeclaration): string[] {
 		element = flatParentElement(element)
 	) {
 		const declaration = computedSlots.cascade?.declarationFor(element);
-		for (const name of _maybe(declaration)?.[kCustomProperties]() ?? []) {
+		const slots = _maybe(declaration);
+		for (const name of slots ? getDeclaredCustomNames(slots) : []) {
 			names.add(name);
 		}
 	}
@@ -5461,10 +5520,10 @@ interface PseudoStyleDeclarationSlots extends CSSStyleDeclarationSlots {
 	cascade: Cascade | null;
 	nodeResolved: Map<string, string>;
 	boxView: MeasuredDeclaration | null;
-	[kSyncResolved]: Step<PseudoStyleDeclaration[typeof kSyncResolved]>;
-	[kBaseValue]: Step<PseudoStyleDeclaration[typeof kBaseValue]>;
-	[kUsedValue]: Step<PseudoStyleDeclaration[typeof kUsedValue]>;
-	[kComputedValue]: Step<PseudoStyleDeclaration[typeof kComputedValue]>;
+	_syncResolved: Step<PseudoStyleDeclaration["_syncResolved"]>;
+	_baseValue: Step<PseudoStyleDeclaration["_baseValue"]>;
+	_usedValue: Step<PseudoStyleDeclaration["_usedValue"]>;
+	_computedValue: Step<PseudoStyleDeclaration["_computedValue"]>;
 }
 
 interface PseudoStyleDeclaration {
@@ -5511,12 +5570,12 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 		const slots = _(this);
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(slots)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
 		let value = slots.nodeResolved.get(property);
 		if (value === undefined) {
 			value =
-				slots[kBaseValue](property) ||
+				slots._baseValue(property) ||
 				CSSValues.getComputedValueEntry(
 					property,
 					getInitialStyle(null, property),
@@ -5533,13 +5592,13 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 			flushCascadeStyle(slots.cascade);
 		}
 		const computed =
-			slots[kComputedValue](property) ||
+			slots._computedValue(property) ||
 			CSSValues.getComputedValueEntry(
 				property,
 				getInitialStyle(null, property),
 			);
 		if (slots.cascade && USED_VALUE_PROPERTIES.has(property)) {
-			return slots[kUsedValue](property, computed);
+			return slots._usedValue(property, computed);
 		}
 		return computed;
 	}
@@ -5560,7 +5619,7 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 		return CSS_LONGHANDS[index] ?? "";
 	}
 
-	[kSyncResolved](this: Slots<PseudoStyleDeclaration>): void {
+	_syncResolved(this: Slots<PseudoStyleDeclaration>): void {
 		// Before the work, because resolving below reads back through this
 		// declaration.
 		const slots = this;
@@ -5587,21 +5646,21 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 			processTransitionStyle(
 				slots.cascade,
 				slots.element,
-				(property) => slots[kBaseValue](property),
+				(property) => slots._baseValue(property),
 				slots.pseudoElement,
 			);
 		}
 	}
 
 	// The cascade's declarations alone, with no transition overriding them.
-	[kBaseValue](this: Slots<PseudoStyleDeclaration>, property: string): string {
+	_baseValue(this: Slots<PseudoStyleDeclaration>, property: string): string {
 		const slots = this;
 		let value = slots.resolved.get(property);
 		if (value === undefined) {
 			const longhands = CSSValues.getLonghands(property);
 			value = longhands && slots.pseudoDeclarations[property] === undefined
 				? CSSValues.serializeShorthandValue(property, longhands, (longhand) =>
-					slots[kBaseValue](longhand) || CSS_INITIAL_VALUES[longhand] || "")
+					slots._baseValue(longhand) || CSS_INITIAL_VALUES[longhand] || "")
 				: CSSValues.getComputedValueEntry(
 					property,
 					slots.pseudoDeclarations[property] ?? "",
@@ -5615,7 +5674,7 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 	// through the same arithmetic as an element's metrics. A pseudo-element
 	// never given a node uses the percentage resolution below, against the
 	// box it would be in.
-	[kUsedValue](
+	_usedValue(
 		this: Slots<PseudoStyleDeclaration>,
 		property: string,
 		computed: string,
@@ -5667,16 +5726,16 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 	// The engine's read. An empty result means no rule reached the
 	// pseudo-element, which is what the ::selection and ::marker painters
 	// check.
-	[kComputedValue](
+	_computedValue(
 		this: Slots<PseudoStyleDeclaration>,
 		property: string,
 	): string {
 		const slots = this;
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(this)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
-		const value = slots[kBaseValue](property);
+		const value = slots._baseValue(property);
 		const transitional = getPseudoTransitionValue(ownerOf(this), property);
 		return transitional ?? value;
 	}
@@ -5724,7 +5783,7 @@ function getBoxView(
 		adoptSlots(measured, {
 			element: node,
 			cascade: declarationSlots.cascade,
-			[kComputedValue]: (property: string): string =>
+			_computedValue: (property: string): string =>
 				declaration.nodeValue(property),
 		});
 		view = measured as MeasuredDeclaration;
@@ -5986,6 +6045,7 @@ interface ParsedCSSRule {
 	// hasAnchors keeps them, and the pseudo-classes inside it.
 	hasAnchors?: readonly string[];
 	hasStates?: readonly string[];
+	hasSiblings?: boolean;
 
 	// Cascade ORIGIN, the tier above specificity. Every author rule beats
 	// every UA rule, which lets `input::placeholder { color }` beat the UA
@@ -6062,9 +6122,9 @@ function shouldCreatePseudoElement(
 ): boolean {
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(element);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 		const listStylePosition =
-			_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+			_(computedStyle)._computedValue("list-style-position") || "outside";
 
 		if (display === "list-item" && listStylePosition !== "outside") {
 			return true;
@@ -6146,7 +6206,7 @@ export class Cascade {
 
 	// The slots of every declaration resolved against the current cascade.
 	// Dropping one, or replacing the set, sends it back through
-	// kSyncResolved on its next read. Weak, so a declaration nobody holds
+	// _syncResolved on its next read. Weak, so a declaration nobody holds
 	// costs nothing.
 	currentDeclarations: WeakSet<object>;
 
@@ -6211,6 +6271,18 @@ export class Cascade {
 	pseudoRulesByType: Map<string, ParsedCSSRule[]>;
 	counterRulesExist: boolean;
 	listItemRulesExist: boolean;
+	// The elements whose generated content reads a counter, and the
+	// counters each element declared when its scope was built. A counter
+	// one element changes renumbers the content of others, which nothing
+	// restyles, so a change sets countersStale and those elements restyle.
+	counterUsers: Set<Element>;
+	countersStale: boolean;
+	// Each element's counters where its subtree starts and where it ends,
+	// the inputs they were counted from, and whether any were counted.
+	counterSets: WeakMap<Element, CounterStart>;
+	counterEnds: WeakMap<Element, CounterEnd>;
+	counterKeys: WeakMap<Element, string>;
+	countersCounted: boolean;
 
 	// Whether any rule is scoped, which is what adds proximity to the sort.
 	scopedRulesExist: boolean;
@@ -6221,6 +6293,9 @@ export class Cascade {
 	// change inside an element that has none of them leaves every :has()
 	// as it was.
 	hasAnchors: Set<string>;
+	// Whether a :has() argument starts with + or ~, which an element's
+	// earlier siblings can match from, and not only its ancestors.
+	hasSiblingRules: boolean;
 
 	// The engine reads this to decide whether the terminal must report
 	// pointer motion. A sheet that never tests :hover cannot show it, and
@@ -6232,8 +6307,6 @@ export class Cascade {
 	// apply with no MutationObserver attached.
 	parsedStyleSheetCount: number;
 
-	counterScopes: WeakMap<Element, CSSValues.CounterScope>;
-
 	// The transition gate is STICKY. It opens the first time anything
 	// declares a transition and never closes, so a document with none pays
 	// two checks per style change event. Snapshots live in a WeakMap. Only
@@ -6326,13 +6399,19 @@ export class Cascade {
 		this.pseudoRulesByType = new Map<string, ParsedCSSRule[]>();
 		this.counterRulesExist = false;
 		this.listItemRulesExist = false;
+		this.counterUsers = new Set();
+		this.countersStale = false;
+		this.counterSets = new WeakMap();
+		this.counterEnds = new WeakMap();
+		this.counterKeys = new WeakMap();
+		this.countersCounted = false;
 		this.scopedRulesExist = false;
 		this.hasRulesExist = false;
 		this.hasAnchors = new Set();
+		this.hasSiblingRules = false;
 		this.hasStates = new Set();
 		this.hoverRulesDeclared = false;
 		this.parsedStyleSheetCount = -1;
-		this.counterScopes = new WeakMap<Element, CSSValues.CounterScope>();
 		this.flushing = false;
 		this.usedValues = new WeakMap();
 		this.hasResults = null;
@@ -6363,6 +6442,8 @@ export class Cascade {
 				getPageView(
 					getResolvedStyle(this, element, pseudoElt) as unknown as
 						CSSStyleDeclaration,
+					element,
+					pseudoElt ?? "",
 				) as unknown as globalThis.CSSStyleDeclaration,
 		) as typeof window.getComputedStyle;
 
@@ -6376,11 +6457,17 @@ export class Cascade {
 			return;
 		}
 		this.shadowRoots.add(root);
+		noteFlatTreeChange(this);
 		// Incrementally. Rebuilding every sheet per UA shadow tree upgrade made
 		// a document of n UA shadow trees reparse everything n times.
 		syncShadowRoot(this, root);
 	}
 
+	// A slot took other nodes, which now inherit through it.
+	slotsChanged(): void {
+		noteFlatTreeChange(this);
+	}
+
 	// A root filled with its content after it registered, as a declarative
 	// shadow root is, has sheets its registration did not see.
 	syncShadowRoot(root: ShadowRoot): void {
@@ -6391,236 +6478,6 @@ export class Cascade {
 		}
 	}
 
-	handleMutations(mutations: MutationRecord[]): void {
-		const Node = this.window.Node;
-		let shouldSyncStylesheets = false;
-		let removedElements = false;
-		const changedParents = new Set<Element>();
-
-		// A :has() anchor sits above what changed it, or before it among its
-		// siblings for :has(+ x) and :has(~ x), and the rule can style the
-		// anchor's descendants too. So each such element a :has() could be
-		// tested on restyles, with everything under it.
-		if (this.hasRulesExist) {
-			const anchors = new Set<Element>();
-			for (const mutation of mutations) {
-				const start = nodeTypeOf(mutation.target) === 1
-					? (mutation.target as Element)
-					: mutation.target.parentElement;
-				for (
-					let ancestor: Element | null = start;
-					ancestor;
-					ancestor = flatParentElement(ancestor)
-				) {
-					for (
-						let element: Element | null = ancestor;
-						element !== null;
-						element = element.previousElementSibling
-					) {
-						if (!anchors.has(element) && couldAnchorHas(this, element)) {
-							anchors.add(element);
-							invalidateSubtree(this, element);
-						}
-					}
-				}
-			}
-		}
-
-		// A root's sheets sync once a batch, after its records: each sync
-		// restyles the whole tree, and a page that fills its sheets a rule at
-		// a time sent a record per rule.
-		const rootsToSync = new Set<ShadowRoot>();
-		for (const mutation of mutations) {
-			if (mutation.type === "childList") {
-				// A <style>'s children ARE its stylesheet text. A shadow
-				// sheet's sync stays inside its root.
-				if ((mutation.target as Element).tagName === "STYLE") {
-					reparseOwnerText(getSheet(mutation.target as Element));
-					const styleRoot = mutation.target.getRootNode();
-					if (isShadowRoot(styleRoot)) {
-						rootsToSync.add(styleRoot);
-					} else {
-						shouldSyncStylesheets = true;
-					}
-				}
-				// A list's gutter is derived from its items' markers, so a
-				// change to the ITEMS invalidates the list: a wider marker added
-				// later overran the gutter the original items set. A change
-				// inside an item's content moves no marker.
-				if (mutationChangesListItems(mutation)) {
-					invalidateEnclosingList(this, mutation.target);
-				}
-
-				for (const node of getAddedNodes(mutation)) {
-					if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
-						const element = node as Element;
-						if (isStyleElement(element)) {
-							const addedRoot = element.tagName === "STYLE"
-								? element.getRootNode()
-								: null;
-							if (addedRoot !== null && isShadowRoot(addedRoot)) {
-								rootsToSync.add(addedRoot);
-							} else {
-								shouldSyncStylesheets = true;
-							}
-						} else {
-							invalidateElementCaches(this, element);
-							attachPseudoElementsToElement(this, element);
-							registerConnectedShadowRoots(this, element);
-
-							const childElements = element.querySelectorAll("*");
-							for (const childElement of childElements) {
-								invalidateElementCaches(this, childElement);
-								attachPseudoElementsToElement(this, childElement);
-								registerConnectedShadowRoots(this, childElement);
-							}
-						}
-					}
-				}
-
-				for (const node of getRemovedNodes(mutation)) {
-					if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
-						const element = node as Element;
-						if (isStyleElement(element)) {
-							shouldSyncStylesheets = true;
-						}
-						removedElements = true;
-					}
-				}
-				// A child that came or went changes what `li + li`,
-				// `:first-child` and `:empty` match on the children around it
-				// and on the parent, none of which the mutation names. Once
-				// per parent per batch: appending n children one at a time
-				// is n records against the same parent.
-				if (
-					nodeTypeOf(mutation.target) === Node.ELEMENT_NODE &&
-					getSiblingIndex(this, mutation.target as Element)?.reachesSiblings
-				) {
-					changedParents.add(mutation.target as Element);
-				}
-			} else if (mutation.type === "attributes") {
-				const element = mutation.target as Element;
-				// A value written over itself changes no style.
-				if (
-					mutation.oldValue !== null &&
-					mutation.oldValue === attributeOf(element, mutation.attributeName!)
-				) {
-					continue;
-				}
-				// A change to keys whose rules declare only paint properties
-				// leaves every box where it was. The styles are dropped so the
-				// next read resolves them, and layout is not told.
-				const notifyLayout = !isPaintOnlyChange(
-					this,
-					element,
-					mutation.attributeName!,
-					mutation.oldValue,
-				);
-				// Only a change the sheets USE that way reaches descendants.
-				// When no rule tests the class outside its own subject and none
-				// declares an inherited property, descendant styles are
-				// unchanged.
-				const subjects = mutation.attributeName === "class"
-					? classChangeSubjects(this, element, mutation.oldValue)
-					: null;
-				if (subjects !== null) {
-					invalidateElementCaches(this, element, notifyLayout);
-					attachPseudoElementsToElement(this, element);
-					if (subjects.length > 0) {
-						for (const descendant of element.querySelectorAll("*")) {
-							const parent = descendant.parentElement;
-							if (
-								subjects.some(
-									(anchor) =>
-										couldAnchor(descendant, anchor) ||
-										// A display change blockifies the changed element's
-										// own children, and those of anyone else it anchors.
-										(anchor.children === true &&
-											parent !== null &&
-											(parent === element || couldAnchor(parent, anchor))),
-								)
-							) {
-								invalidateElementCaches(this, descendant, notifyLayout);
-								attachPseudoElementsToElement(this, descendant);
-							}
-						}
-					}
-				} else if (
-					attributeReachesDescendants(
-						this,
-						element,
-						mutation.attributeName!,
-						mutation.oldValue,
-					)
-				) {
-					invalidateSubtree(this, element, notifyLayout);
-				} else {
-					invalidateElementCaches(this, element, notifyLayout);
-					attachPseudoElementsToElement(this, element);
-				}
-				if (!notifyLayout) {
-					this.layout.invalidateFrame();
-				}
-				// `.on ~ .light` matches a FOLLOWING sibling whose cached
-				// styles know nothing of this change.
-				if (
-					changeReachesLaterSiblings(
-						getSiblingIndex(this, element),
-						element,
-						mutation.attributeName!,
-						mutation.oldValue,
-					)
-				) {
-					for (
-						let sibling = element.nextElementSibling;
-						sibling;
-						sibling = sibling.nextElementSibling
-					) {
-						invalidateSibling(this, sibling);
-					}
-				}
-			} else if (mutation.type === "characterData") {
-				const owner = mutation.target.parentElement;
-				if (owner?.tagName === "STYLE") {
-					reparseOwnerText(getSheet(owner));
-					const ownerRoot = owner.getRootNode();
-					if (isShadowRoot(ownerRoot)) {
-						rootsToSync.add(ownerRoot);
-					} else {
-						shouldSyncStylesheets = true;
-					}
-				}
-			}
-		}
-		for (const root of rootsToSync) {
-			syncShadowRoot(this, root);
-		}
-
-		for (const parent of changedParents) {
-			invalidateChildren(this, parent);
-		}
-		// What left the document is let go: elements given a pseudo-element,
-		// and shadow roots with their rules. A host connected again registers
-		// its root on the way in.
-		if (removedElements) {
-			for (const host of this.pseudoHosts) {
-				if (!host.isConnected) {
-					this.pseudoHosts.delete(host);
-				}
-			}
-			for (const root of this.shadowRoots) {
-				if (!root.host.isConnected) {
-					this.shadowRoots.delete(root);
-					forgetShadowRoot(this, root);
-				}
-			}
-			releaseRemovedNodes(this.document);
-		}
-		if (shouldSyncStylesheets) {
-			this.syncStylesheets();
-		}
-	}
-
 	// user-select, with `auto` resolved through the parent per css-ui-4.
 	// `text`, `all` and `contain` all behave as plain isSelectable. Nothing
 	// implements the shapes `all` and `contain` ask for yet.
@@ -6639,95 +6496,11 @@ export class Cascade {
 		return true;
 	}
 
-	// Focus is not a mutation, and nothing else invalidates. The cached
-	// declarations of the two moved elements hold rule sets matched BEFORE
-	// the move, so a :focus rule would never apply or stop applying.
-	handleFocusChange(...elements: Array<Element | null>): void {
-		if (FOCUS_STATES.some((state) => this.hasStates.has(state))) {
-			restyleAll(this);
-			return;
-		}
-		for (const element of elements) {
-			// The whole flat-tree chain can observe focus (:focus-within,
-			// :host(:focus)), so every element on it goes stale together.
-			for (
-				let node: Element | null = element; node; node = flatParentElement(node)
-			) {
-				invalidateForState(this, node, FOCUS_STATES);
-			}
-		}
-	}
-
-	// State no attribute or tree records changed: a checkbox was checked, a
-	// custom element defined, a popover shown. `states` names the
-	// pseudo-classes that read it. A rule can test the state on the element
-	// itself, on an ancestor of what it styles, or before a sibling
-	// combinator, so the element's subtree and its later siblings restyle.
-	// One that tests it inside :has() can style anything, so everything
-	// restyles.
-	handleStateChange(element: Element, states: readonly string[]): void {
-		if (states.some((state) => this.hasStates.has(state))) {
-			restyleAll(this);
-			return;
-		}
-		invalidateForState(this, element, states);
-		// No mutation record describes the change, so the frame that decides
-		// whether anything needs painting is notified here.
-		this.layout.invalidateFrame();
-	}
-
-	// The same staleness a focus move leaves, scoped to the symmetric
-	// difference of the two flat-tree chains. The shared ancestors above the
-	// fork were hovered before and are hovered still.
-	handleHoverChange(previous: Element | null, next: Element | null): void {
-		chainStateChange(this, previous, next, "hover");
-	}
-
-	// The same for the element a mouse button is held down on, which with
-	// its ancestors is :active.
-	handleActiveChange(previous: Element | null, next: Element | null): void {
-		chainStateChange(this, previous, next, "active");
-	}
-
-	// A dirty sheet list parses first, so a value read between frames still
-	// describes the current document.
-	hoverRulesExist(): boolean {
-		parseStylesheetsIfStale(this);
-		return this.hoverRulesDeclared;
-	}
-
 	// The internal read path: no pseudo parsing, no being-rendered check, no
 	// resolved-value branch. Called thousands of times per frame, so it does
 	// the least it can.
 	declarationFor(element: Element): ComputedStyleDeclaration {
-		return ownerOf(this.computedSlotsFor(element));
-	}
-
-	// The slots of the declaration, which the cache holds, so a read of a
-	// computed value looks nothing up.
-	computedSlotsFor(element: Element): Slots<ComputedStyleDeclaration> {
-		let slots = this.computedStyleCache.get(element);
-		if (!slots) {
-			parseStylesheetsIfStale(this);
-			const fresh = _(
-				new ComputedStyleDeclaration(
-					element,
-					getCascadeRules(this, element),
-					this,
-				),
-			);
-			slots = fresh;
-			this.computedStyleCache.set(element, fresh);
-			// Building a fresh declaration is the other form of the style
-			// change event kSyncResolved sees.
-			processTransitionStyle(
-				this,
-				element,
-				(property) => fresh[kBaseValue](property),
-				"",
-			);
-		}
-		return slots;
+		return ownerOf(computedSlotsFor(this, element));
 	}
 
 	/**
@@ -6738,106 +6511,492 @@ export class Cascade {
 		if (getPseudoHost(element) !== null || isTransitioning(this, element)) {
 			return null;
 		}
-		const declarationSlots = this.computedSlotsFor(element);
+		const declarationSlots = computedSlotsFor(this, element);
 		if (!this.currentDeclarations.has(declarationSlots)) {
-			declarationSlots[kSyncResolved]();
+			declarationSlots._syncResolved();
 		}
 		return declarationSlots.styleVersion;
 	}
 
-	/**
-	 * The properties a pseudo-element's own rules set on this element, empty
-	 * when no rule reaches it. Unlike getComputedValue, this does not fill in
-	 * the originating element's inherited values.
-	 */
-	declaredPseudoProperties(
-		element: Element,
-		pseudoElement: string,
-	): Set<string> {
-		parseStylesheetsIfStale(this);
-		return new Set(
-			Object.keys(computePseudoElementStyle(this, element, pseudoElement)),
-		);
-	}
+	syncStylesheets(): void {
+		// A sheet materializing its rules under the parse in progress
+		// notifies once per rule; that parse reads them.
+		if (this.parsing) {
+			return;
+		}
+		parseStylesheets(this);
 
-	// Public because window.matchMedia uses the SAME evaluator @media
-	// does, so a stylesheet and a script can never disagree. A query that
-	// does not parse is `not all`, and the rest of its list still counts.
-	mediaQueryMatches(mediaText: string): boolean {
-		const text = mediaText.trim();
-		if (!text) {
-			return true;
-		}
-		const queries = CSSValues.parseMediaQueryList(text);
-		if (queries) {
-			return queries.some((query) => mediaQueryNodeMatches(this, query));
+		// Boxes may have been built under the pre-parse styles, such as a
+		// subtree a .view{display:none} in the same batch hides. Rebuild from
+		// the root. Stylesheet changes are rare.
+		const body = this.document.body;
+		if (body) {
+			this.layout.invalidate(body);
 		}
-		return CSSValues.splitMediaQueryList(text).some((piece) => {
-			const parsed = CSSValues.parseMediaQueryList(piece);
-			return parsed?.length === 1 && mediaQueryNodeMatches(this, parsed[0]);
-		});
 	}
+}
 
-	/** The text a list item's marker draws, or null when it draws none. */
-	getMarkerContent(hostElement: Element): string | null {
-		if (!hostElement || nodeTypeOf(hostElement) !== hostElement.ELEMENT_NODE) {
-			return null;
+const LIST_NUMBERING_ATTRIBUTES = new Set([
+	"start",
+	"value",
+	"reversed",
+	"type",
+]);
+
+export function handleMutations(
+	cascade: Cascade,
+	mutations: MutationRecord[],
+): void {
+	const Node = cascade.window.Node;
+	let shouldSyncStylesheets = false;
+	let removedElements = false;
+	const changedParents = new Set<Element>();
+
+	// A :has() anchor sits above what changed it, or before it among its
+	// siblings for :has(+ x) and :has(~ x), and the rule can style the
+	// anchor's descendants too. So each such element a :has() could be
+	// tested on restyles, with everything under it.
+	if (cascade.hasRulesExist) {
+		const anchors = new Set<Element>();
+		for (const mutation of mutations) {
+			const start = nodeTypeOf(mutation.target) === 1
+				? (mutation.target as Element)
+				: mutation.target.parentElement;
+			for (
+				let ancestor: Element | null = start;
+				ancestor;
+				ancestor = flatParentElement(ancestor)
+			) {
+				for (
+					let element: Element | null = ancestor;
+					element !== null;
+					element = cascade.hasSiblingRules
+						? element.previousElementSibling
+						: null
+				) {
+					if (!anchors.has(element) && couldAnchorHas(cascade, element)) {
+						anchors.add(element);
+						invalidateSubtree(cascade, element);
+					}
+				}
+			}
 		}
+	}
 
-		const computedStyle = this.declarationFor(hostElement);
-		const display = _(computedStyle)[kComputedValue]("display");
+	// A root's sheets sync once a batch, after its records: each sync
+	// restyles the whole tree, and a page that fills its sheets a rule at
+	// a time sent a record per rule.
+	const rootsToSync = new Set<ShadowRoot>();
+	for (const mutation of mutations) {
+		if (mutation.type === "childList") {
+			// A <style>'s children ARE its stylesheet text. A shadow
+			// sheet's sync stays inside its root.
+			if ((mutation.target as Element).tagName === "STYLE") {
+				reparseOwnerText(getSheet(mutation.target as Element));
+				const styleRoot = mutation.target.getRootNode();
+				if (isShadowRoot(styleRoot)) {
+					rootsToSync.add(styleRoot);
+				} else {
+					shouldSyncStylesheets = true;
+				}
+			}
+			// A list's gutter is derived from its items' markers, so a
+			// change to the ITEMS invalidates the list: a wider marker added
+			// later overran the gutter the original items set. A change
+			// inside an item's content moves no marker.
+			if (mutationChangesListItems(mutation)) {
+				invalidateEnclosingList(cascade, mutation.target);
+			}
 
-		if (display !== "list-item") {
-			return null;
-		}
+			for (const node of getAddedNodes(mutation)) {
+				if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
+					const element = node as Element;
+					if (isStyleElement(element)) {
+						const addedRoot = element.tagName === "STYLE"
+							? element.getRootNode()
+							: null;
+						if (addedRoot !== null && isShadowRoot(addedRoot)) {
+							rootsToSync.add(addedRoot);
+						} else {
+							shouldSyncStylesheets = true;
+						}
+					} else {
+						// A detached tree's pseudo-elements and shadow roots wait
+						// for the record that brings it into the document. Its
+						// styles still answer getComputedStyle.
+						const connected = isConnectedNode(element);
+						const elements: Element[] = [];
+						for (
+							let next: DOMNode | null = element as unknown as DOMNode;
+							next !== null;
+							next = nextInTree(next, element as unknown as DOMNode)
+						) {
+							if (nodeTypeOf(next) === Node.ELEMENT_NODE) {
+								elements.push(next as unknown as Element);
+							}
+						}
+						for (const each of elements) {
+							// A sheet brought in inside what was added, a <style>
+							// in an added <head>, is synced as one added alone.
+							if (each !== element && isStyleElement(each)) {
+								const styleRoot = each.getRootNode();
+								if (isShadowRoot(styleRoot)) {
+									rootsToSync.add(styleRoot);
+								} else {
+									shouldSyncStylesheets = true;
+								}
+							}
+							invalidateElementCaches(cascade, each);
+							if (connected) {
+								attachPseudoElementsToElement(cascade, each);
+								registerConnectedShadowRoots(cascade, each);
+							}
+						}
+					}
+				}
+			}
 
-		const styles = computePseudoElementStyle(this, hostElement, "::marker");
-		let content = styles.content;
+			for (const node of getRemovedNodes(mutation)) {
+				if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
+					const element = node as Element;
+					if (isStyleElement(element)) {
+						shouldSyncStylesheets = true;
+					}
+					removedElements = true;
+					if (cascade.countersCounted && !cascade.countersStale) {
+						cascade.countersStale = declaresCounters(cascade, element);
+					}
+				}
+			}
+			// A child that came or went changes what `li + li`,
+			// `:first-child` and `:empty` match on the children around it
+			// and on the parent, none of which the mutation names. Once
+			// per parent per batch: appending n children one at a time
+			// is n records against the same parent.
+			if (
+				nodeTypeOf(mutation.target) === Node.ELEMENT_NODE &&
+				getSiblingIndex(cascade, mutation.target as Element)?.reachesSiblings
+			) {
+				changedParents.add(mutation.target as Element);
+			}
+		} else if (mutation.type === "attributes") {
+			const element = mutation.target as Element;
+			// A value written over itself changes no style.
+			if (
+				mutation.oldValue !== null &&
+				mutation.oldValue === attributeOf(element, mutation.attributeName!)
+			) {
+				continue;
+			}
+			// A list's numbering reads these, and renumbers markers that
+			// belong to other elements than the one changed.
+			if (
+				LIST_NUMBERING_ATTRIBUTES.has(mutation.attributeName!) &&
+				(localNameOf(element) === "ol" || localNameOf(element) === "li")
+			) {
+				noteCounterChange(cascade, element);
+				cascade.layout.invalidateFrame();
+			}
+			// A change to keys whose rules declare only paint properties
+			// leaves every box where it was. The styles are dropped so the
+			// next read resolves them, and layout is not told.
+			const notifyLayout = !isPaintOnlyChange(
+				cascade,
+				element,
+				mutation.attributeName!,
+				mutation.oldValue,
+			);
+			// Only a change the sheets USE that way reaches descendants.
+			// When no rule tests the class outside its own subject and none
+			// declares an inherited property, descendant styles are
+			// unchanged.
+			const subjects = mutation.attributeName === "class"
+				? classChangeSubjects(cascade, element, mutation.oldValue)
+				: null;
+			if (subjects !== null) {
+				invalidateElementCaches(cascade, element, notifyLayout);
+				attachPseudoElementsToElement(cascade, element);
+				if (subjects.length > 0) {
+					// The flat tree, where a box's children are: a host's are
+					// its shadow tree's, a form control's included.
+					for (const descendant of flatDescendants(element)) {
+						const parent = flatParentElement(descendant);
+						if (
+							subjects.some(
+								(anchor) =>
+									couldAnchor(descendant, anchor) ||
+									// A display change blockifies the changed element's
+									// own children, and those of anyone else it anchors.
+									(anchor.children === true &&
+										parent !== null &&
+										(parent === element || couldAnchor(parent, anchor))),
+							)
+						) {
+							invalidateElementCaches(cascade, descendant, notifyLayout);
+							attachPseudoElementsToElement(cascade, descendant);
+						}
+					}
+				}
+			} else if (
+				attributeReachesDescendants(
+					cascade,
+					element,
+					mutation.attributeName!,
+					mutation.oldValue,
+				)
+			) {
+				invalidateSubtree(cascade, element, notifyLayout);
+			} else {
+				invalidateElementCaches(cascade, element, notifyLayout);
+				attachPseudoElementsToElement(cascade, element);
+			}
+			// Each element restyled names its rows for the frame.
+			if (!notifyLayout) {
+				cascade.layout.invalidateFrame(false);
+			}
+			// `.on ~ .light` matches a FOLLOWING sibling whose cached
+			// styles know nothing of this change.
+			if (
+				changeReachesLaterSiblings(
+					getSiblingIndex(cascade, element),
+					element,
+					mutation.attributeName!,
+					mutation.oldValue,
+				)
+			) {
+				for (
+					let sibling = element.nextElementSibling;
+					sibling;
+					sibling = sibling.nextElementSibling
+				) {
+					invalidateSibling(cascade, sibling);
+				}
+			}
+		} else if (mutation.type === "characterData") {
+			const owner = mutation.target.parentElement;
+			if (owner?.tagName === "STYLE") {
+				reparseOwnerText(getSheet(owner));
+				const ownerRoot = owner.getRootNode();
+				if (isShadowRoot(ownerRoot)) {
+					rootsToSync.add(ownerRoot);
+				} else {
+					shouldSyncStylesheets = true;
+				}
+			}
+		}
+	}
+	for (const root of rootsToSync) {
+		syncShadowRoot(cascade, root);
+	}
 
-		if (!content || content === "none" || content === "normal") {
-			content = getDefaultMarkerContent(hostElement) ?? content;
+	for (const parent of changedParents) {
+		invalidateChildren(cascade, parent);
+	}
+	// What left the document is let go: elements given a pseudo-element,
+	// and shadow roots with their rules. A host connected again registers
+	// its root on the way in.
+	if (removedElements) {
+		for (const host of cascade.pseudoHosts) {
+			if (!host.isConnected) {
+				cascade.pseudoHosts.delete(host);
+			}
 		}
-		if (!content || content === "none" || content === "normal") {
-			return null;
+		for (const root of cascade.shadowRoots) {
+			if (!root.host.isConnected) {
+				cascade.shadowRoots.delete(root);
+				forgetShadowRoot(cascade, root);
+			}
 		}
+		releaseRemovedNodes(cascade.document);
+	}
+	refreshCounters(cascade);
+	if (shouldSyncStylesheets) {
+		cascade.syncStylesheets();
+	}
+}
+
+// Focus is not a mutation, and nothing else invalidates. The cached
+// declarations of the two moved elements hold rule sets matched BEFORE
+// the move, so a :focus rule would never apply or stop applying.
+export function handleFocusChange(
+	cascade: Cascade,
+	...elements: Array<Element | null>
+): void {
+	if (FOCUS_STATES.some((state) => cascade.hasStates.has(state))) {
+		restyleAll(cascade);
+		return;
+	}
+	for (const element of elements) {
+		// The whole flat-tree chain can observe focus (:focus-within,
+		// :host(:focus)), so every element on it goes stale together.
+		for (
+			let node: Element | null = element; node; node = flatParentElement(node)
+		) {
+			invalidateForState(cascade, node, FOCUS_STATES);
+		}
+	}
+}
+
+// State no attribute or tree records changed: a checkbox was checked, a
+// custom element defined, a popover shown. `states` names the
+// pseudo-classes that read it. A rule can test the state on the element
+// itself, on an ancestor of what it styles, or before a sibling
+// combinator, so the element's subtree and its later siblings restyle.
+// One that tests it inside :has() can style anything, so everything
+// restyles.
+export function handleStateChange(
+	cascade: Cascade,
+	element: Element,
+	states: readonly string[],
+): void {
+	if (states.some((state) => cascade.hasStates.has(state))) {
+		restyleAll(cascade);
+		return;
+	}
+	invalidateForState(cascade, element, states);
+	refreshCounters(cascade);
+	// No mutation record describes the change, so the frame that decides
+	// whether anything needs painting is notified here. The elements
+	// restyled name their rows.
+	cascade.layout.invalidateFrame(false);
+}
+
+// The same staleness a focus move leaves, scoped to the symmetric
+// difference of the two flat-tree chains. The shared ancestors above the
+// fork were hovered before and are hovered still.
+export function handleHoverChange(
+	cascade: Cascade,
+	previous: Element | null,
+	next: Element | null,
+): void {
+	chainStateChange(cascade, previous, next, "hover");
+}
 
-		let textContent = CSSValues.unquoteContent(content);
+// The same for the element a mouse button is held down on, which with
+// its ancestors is :active.
+export function handleActiveChange(
+	cascade: Cascade,
+	previous: Element | null,
+	next: Element | null,
+): void {
+	chainStateChange(cascade, previous, next, "active");
+}
 
-		textContent = resolveCounterFunction(this, hostElement, textContent);
+// A dirty sheet list parses first, so a value read between frames still
+// describes the current document.
+export function hoverRulesExist(cascade: Cascade): boolean {
+	parseStylesheetsIfStale(cascade);
+	return cascade.hoverRulesDeclared;
+}
 
-		return textContent;
+// The slots of the declaration, which the cache holds, so a read of a
+// computed value looks nothing up.
+function computedSlotsFor(
+	cascade: Cascade,
+	element: Element,
+): Slots<ComputedStyleDeclaration> {
+	let slots = cascade.computedStyleCache.get(element);
+	if (!slots) {
+		parseStylesheetsIfStale(cascade);
+		const fresh = _(
+			new ComputedStyleDeclaration(
+				element,
+				getCascadeRules(cascade, element),
+				cascade,
+			),
+		);
+		slots = fresh;
+		cascade.computedStyleCache.set(element, fresh);
+		// Building a fresh declaration is the other form of the style
+		// change event _syncResolved sees.
+		processTransitionStyle(
+			cascade,
+			element,
+			(property) => fresh._baseValue(property),
+			"",
+		);
 	}
+	return slots;
+}
 
-	syncStylesheets(): void {
-		// A sheet materializing its rules under the parse in progress
-		// notifies once per rule; that parse reads them.
-		if (this.parsing) {
-			return;
-		}
-		parseStylesheets(this);
+/**
+ * The properties a pseudo-element's own rules set on this element, empty
+ * when no rule reaches it. Unlike getComputedValue, this does not fill in
+ * the originating element's inherited values.
+ */
+export function declaredPseudoProperties(
+	cascade: Cascade,
+	element: Element,
+	pseudoElement: string,
+): Set<string> {
+	parseStylesheetsIfStale(cascade);
+	return new Set(
+		Object.keys(computePseudoElementStyle(cascade, element, pseudoElement)),
+	);
+}
 
-		// Boxes may have been built under the pre-parse styles, such as a
-		// subtree a .view{display:none} in the same batch hides. Rebuild from
-		// the root. Stylesheet changes are rare.
-		const body = this.document.body;
-		if (body) {
-			this.layout.invalidate(body);
-		}
+// Public because window.matchMedia uses the SAME evaluator @media
+// does, so a stylesheet and a script can never disagree. A query that
+// does not parse is `not all`, and the rest of its list still counts.
+export function mediaQueryMatches(
+	cascade: Cascade,
+	mediaText: string,
+): boolean {
+	const text = mediaText.trim();
+	if (!text) {
+		return true;
 	}
+	const queries = CSSValues.parseMediaQueryList(text);
+	if (queries) {
+		return queries.some((query) => mediaQueryNodeMatches(cascade, query));
+	}
+	return CSSValues.splitMediaQueryList(text).some((piece) => {
+		const parsed = CSSValues.parseMediaQueryList(piece);
+		return parsed?.length === 1 && mediaQueryNodeMatches(cascade, parsed[0]);
+	});
+}
 
-	// The document is being torn down.
-	dispose(): void {
-		this.computedStyleCache = new WeakMap();
-		this.hasResults = null;
-		this.pseudoElementStyleCache = new WeakMap();
-		this.counterScopes = new WeakMap();
-		if (this.transitionTimer !== null) {
-			clearTimeout(this.transitionTimer);
-			this.transitionTimer = null;
-		}
-		this.activeTransitions.clear();
-		this.transitionEvents = [];
+/** The text a list item's marker draws, or null when it draws none. */
+export function getMarkerContent(
+	cascade: Cascade,
+	hostElement: Element,
+): string | null {
+	if (!hostElement || nodeTypeOf(hostElement) !== hostElement.ELEMENT_NODE) {
+		return null;
+	}
+
+	const computedStyle = cascade.declarationFor(hostElement);
+	const display = _(computedStyle)._computedValue("display");
+
+	if (display !== "list-item") {
+		return null;
+	}
+
+	const styles = computePseudoElementStyle(cascade, hostElement, "::marker");
+	let content = styles.content;
+
+	if (!content || content === "none" || content === "normal") {
+		content = getDefaultMarkerContent(hostElement) ?? content;
 	}
+	if (!content || content === "none" || content === "normal") {
+		return null;
+	}
+
+	return evaluateContent(cascade, hostElement, "::marker", content);
+}
+
+// The document is being torn down.
+export function dispose(cascade: Cascade): void {
+	cascade.computedStyleCache = new WeakMap();
+	cascade.hasResults = null;
+	cascade.pseudoElementStyleCache = new WeakMap();
+	forgetCounters(cascade);
+	if (cascade.transitionTimer !== null) {
+		clearTimeout(cascade.transitionTimer);
+		cascade.transitionTimer = null;
+	}
+	cascade.activeTransitions.clear();
+	cascade.transitionEvents = [];
 }
 
 // Null for a box that generated no grid. The resolved value then stays
@@ -6881,8 +7040,12 @@ function noteHasRule(
 	cascade: Cascade,
 	anchors: readonly string[],
 	states: readonly string[],
+	siblings: boolean,
 ): void {
 	cascade.hasRulesExist = true;
+	if (siblings) {
+		cascade.hasSiblingRules = true;
+	}
 	for (const anchor of anchors) {
 		cascade.hasAnchors.add(anchor);
 	}
@@ -6891,6 +7054,39 @@ function noteHasRule(
 	}
 }
 
+// Whether a :has() in the selector takes a relative selector that starts
+// with + or ~.
+function hasSiblingArgument(selector: string): boolean {
+	for (
+		let at = selector.indexOf(":has(");
+		at !== -1;
+		at = selector.indexOf(":has(", at + 5)
+	) {
+		let depth = 0;
+		let start = at + 5;
+		for (let index = start; index < selector.length; index++) {
+			const char = selector[index];
+			if (char === "(" || char === "[") {
+				depth++;
+			} else if (char === ")" || char === "]") {
+				if (depth === 0) {
+					if (/^\s*[+~]/.test(selector.slice(start, index))) {
+						return true;
+					}
+					break;
+				}
+				depth--;
+			} else if (char === "," && depth === 0) {
+				if (/^\s*[+~]/.test(selector.slice(start, index))) {
+					return true;
+				}
+				start = index + 1;
+			}
+		}
+	}
+	return false;
+}
+
 // For each :has() in a selector, what the compound it is written on asks
 // of an element: its id, else a class, else its local name, else
 // anything. What a functional pseudo-class or an attribute selector asks
@@ -6965,10 +7161,16 @@ function forgetShadowRoot(cascade: Cascade, root: ShadowRoot): void {
 	// The root's :has() rules went with it, and so does what they asked for.
 	cascade.hasRulesExist = false;
 	cascade.hasAnchors = new Set();
+	cascade.hasSiblingRules = false;
 	cascade.hasStates = new Set();
 	for (const rule of cascade.parsedRules) {
 		if (rule.hasAnchors !== undefined) {
-			noteHasRule(cascade, rule.hasAnchors, rule.hasStates ?? []);
+			noteHasRule(
+				cascade,
+				rule.hasAnchors,
+				rule.hasStates ?? [],
+				rule.hasSiblings === true,
+			);
 		}
 	}
 	// A parse already due builds without the root. One that is not would
@@ -7047,26 +7249,72 @@ function restyleAll(cascade: Cascade): void {
 	}
 }
 
-// Replace each counter(name[, style]) with the number it stands at
-// here.
-function resolveCounterFunction(
+// A content value's text: its strings, and what counter() and counters()
+// stand for where the pseudo-element is.
+function evaluateContent(
 	cascade: Cascade,
 	element: Element,
+	pseudoType: string,
 	content: string,
 ): string {
-	initializeCounters(cascade, element);
-	const scope = cascade.counterScopes.get(element);
-	return content.replace(
-		/counter\s*\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/g,
-		(_match, counterName, style) => {
-			const trimmedName = counterName.trim();
-			const trimmedStyle = style?.trim() || "decimal";
-			return CSSValues.formatCounterValue(
-				CSSValues.getCounterValueInScope(scope, trimmedName),
-				trimmedStyle,
-			);
-		},
-	);
+	return CSSValues.unquoteContent(content, (name, args) => {
+		if (name !== "counter" && name !== "counters") {
+			return null;
+		}
+		cascade.counterUsers.add(element);
+		const [counterName, ...rest] = splitArguments(args);
+		const counters = getCounters(cascade, element, pseudoType);
+		const values = counters
+			.filter((counter) => counter.name === counterName)
+			.map((counter) => counter.value);
+		if (values.length === 0) {
+			values.push(0);
+		}
+		if (name === "counter") {
+			return CSSValues.formatCounterValue(values.at(-1)!, rest[0] || "decimal");
+		}
+		const separator = CSSValues.unquoteContent(rest[0] ?? "\"\"");
+		return values
+			.map((value) => CSSValues.formatCounterValue(value, rest[1] || "decimal"))
+			.join(separator);
+	});
+}
+
+// Commas outside a string part a function's arguments.
+function splitArguments(args: string): string[] {
+	const parts: string[] = [];
+	let current = "";
+	let quote: string | null = null;
+	for (let index = 0; index < args.length; index++) {
+		const char = args[index];
+		if (quote !== null) {
+			current += char;
+			if (char === "\\") {
+				current += args[++index] ?? "";
+			} else if (char === quote) {
+				quote = null;
+			}
+		} else if (char === "\"" || char === "'") {
+			quote = char;
+			current += char;
+		} else if (char === ",") {
+			parts.push(current.trim());
+			current = "";
+		} else {
+			current += char;
+		}
+	}
+	parts.push(current.trim());
+	return parts;
+}
+
+function *flatDescendants(element: Element): Generator<Element> {
+	for (const child of flatChildren(element)) {
+		if (nodeTypeOf(child) === ELEMENT_NODE) {
+			yield child as Element;
+			yield *flatDescendants(child as Element);
+		}
+	}
 }
 
 function reachesSiblings(
@@ -7110,7 +7358,7 @@ function pseudoDeclarationsFor(
 	const hostStyleSlots = _(hostStyle);
 	for (const property of inheritedProperties) {
 		if (!declarations[property]) {
-			const inherited = hostStyleSlots[kComputedValue](property);
+			const inherited = hostStyleSlots._computedValue(property);
 			if (inherited) {
 				declarations[property] = inherited;
 			}
@@ -7118,7 +7366,7 @@ function pseudoDeclarationsFor(
 	}
 	// A pseudo-element of a flex or grid container is one of its items,
 	// and an item's display isBlockified, including the initial `inline`.
-	if (ITEM_DISPLAYS.has(hostStyleSlots[kComputedValue]("display"))) {
+	if (ITEM_DISPLAYS.has(hostStyleSlots._computedValue("display"))) {
 		declarations.display = CSSValues.getBlockifiedDisplay(
 			declarations.display || getInitialStyle(null, "display"),
 		);
@@ -7187,6 +7435,75 @@ function flushCascadeStyle(cascade: Cascade): void {
 	}
 }
 
+/**
+ * Checks each frame's styles against styles resolved from nothing, for
+ * tests: every value an element's cached style has served must be what
+ * the cascade resolves with every cache dropped. Set, a value served
+ * otherwise throws, naming it.
+ */
+export const styleCheck = {enabled: false, checked: 0};
+
+export function checkStylesFromScratch(cascade: Cascade): void {
+	styleCheck.checked++;
+	const elements: Element[] =
+		[...cascade.document.querySelectorAll("*")] as Element[];
+	for (const root of cascade.shadowRoots) {
+		elements.push(...root.querySelectorAll("*") as unknown as Element[]);
+	}
+	const before = new Map<Element, Map<string, string>>();
+	for (const element of elements) {
+		const slots = cascade.computedStyleCache.get(element);
+		// A transition's values move with time, and resolving again would
+		// restart it.
+		if (slots === undefined || cascade.activeTransitions.has(element)) {
+			continue;
+		}
+		const values = new Map<string, string>();
+		for (const property of [...slots.resolved.keys()]) {
+			values.set(property, getComputedValue(element, property));
+		}
+		before.set(element, values);
+	}
+	// The caches are put back after, so the check observes and changes
+	// nothing a page could see.
+	const kept = {
+		currentDeclarations: cascade.currentDeclarations,
+		usedValues: cascade.usedValues,
+		computedStyleCache: cascade.computedStyleCache,
+		hasResults: cascade.hasResults,
+		pseudoElementStyleCache: cascade.pseudoElementStyleCache,
+		counterSets: cascade.counterSets,
+		counterEnds: cascade.counterEnds,
+		counterKeys: cascade.counterKeys,
+		countersCounted: cascade.countersCounted,
+		sharedRoot: cascade.sharedRoot,
+	};
+	dropCache(cascade);
+	cascade.sharedRoot = new Map();
+	const differences: string[] = [];
+	for (const [element, values] of before) {
+		for (const [property, value] of values) {
+			const now = getComputedValue(element, property);
+			if (now !== value) {
+				differences.push(
+					`${element.localName}${element.id ? `#${element.id}` : ""} ` +
+						`${property} ${JSON.stringify(value)}, from nothing ${
+							JSON.stringify(now)
+						}`,
+				);
+			}
+		}
+	}
+	Object.assign(cascade, kept);
+	if (differences.length > 0) {
+		throw new Error(
+			`A style differs from one from nothing at ${
+				differences.slice(0, 8).join("; ")
+			}`,
+		);
+	}
+}
+
 function dropCache(cascade: Cascade): void {
 	// Every computed style ever handed out re-resolves on its next read.
 	cascade.currentDeclarations = new WeakSet<object>();
@@ -7194,7 +7511,7 @@ function dropCache(cascade: Cascade): void {
 	cascade.computedStyleCache = new WeakMap();
 	cascade.hasResults = null;
 	cascade.pseudoElementStyleCache = new WeakMap();
-	cascade.counterScopes = new WeakMap();
+	forgetCounters(cascade);
 }
 
 // The box a child's or a pseudo-element's percentage resolves against,
@@ -7395,7 +7712,7 @@ function getPseudoDeclaration(
 	processTransitionStyle(
 		cascade,
 		element,
-		(property) => _(declaration)[kBaseValue](property),
+		(property) => _(declaration)._baseValue(property),
 		pseudoElement,
 	);
 	return declaration;
@@ -7525,9 +7842,9 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 	}
 	for (const element of listItems) {
 		const computedStyle = cascade.declarationFor(element);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 		const listStylePosition =
-			_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+			_(computedStyle)._computedValue("list-style-position") || "outside";
 
 		if (display === "list-item" && listStylePosition !== "outside") {
 			attachPseudoElementToElementForType(cascade, element, "::marker");
@@ -7535,142 +7852,505 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 	}
 }
 
-// The parent's scope is read, never built. Building it recursively up a
-// deep tree is what this avoids.
-// Built on first read, not on invalidation: a counter's value depends
-// on the element's ancestors, and for a list item on the items before
-// it, so the parent is built first and a dropped scope comes back when
-// something next asks.
-function initializeCounters(cascade: Cascade, element: Element): void {
-	if (cascade.counterScopes.has(element)) {
+// Everything an element's counters are computed from: whether it shows,
+// and what it, its ::before and its ::after reset, step and set. The key
+// that says when to count again is made from these, and counting applies
+// them, so the two cannot disagree.
+interface CounterInputs {
+	hidden: boolean;
+	own: CounterEffects;
+	before: CounterEffects | null;
+	after: CounterEffects | null;
+}
+
+function readCounterInputs(cascade: Cascade, element: Element): CounterInputs {
+	return {
+		hidden:
+			_(cascade.declarationFor(element))._computedValue("display") === "none",
+		own: getElementCounterEffects(cascade, element),
+		before: getPseudoCounterEffects(cascade, element, "::before"),
+		after: getPseudoCounterEffects(cascade, element, "::after"),
+	};
+}
+
+// Null for an element that changes no counter. Such an element passes on
+// what it inherits, so adding or removing it leaves every other
+// element's counters as they were.
+function getCounterKey(inputs: CounterInputs): string | null {
+	const parts: string[] = [];
+	if (inputs.hidden) {
+		parts.push("hidden");
+	}
+	const own = describeCounterEffects(inputs.own);
+	if (own !== "") {
+		parts.push(own);
+	}
+	if (inputs.before !== null) {
+		parts.push(`::before ${describeCounterEffects(inputs.before)}`);
+	}
+	if (inputs.after !== null) {
+		parts.push(`::after ${describeCounterEffects(inputs.after)}`);
+	}
+	return parts.length === 0 ? null : parts.join("|");
+}
+
+// Whether an element restyled now computes its counters from other
+// inputs than they were counted with.
+function noteCounterChange(cascade: Cascade, element: Element): void {
+	if (!cascade.countersCounted || cascade.countersStale) {
 		return;
 	}
-	if (element.parentElement) {
-		initializeCounters(cascade, element.parentElement);
+	const before = cascade.counterKeys.get(element) ?? null;
+	if (before !== getCounterKey(readCounterInputs(cascade, element))) {
+		cascade.countersStale = true;
 	}
+}
 
-	// With no counter rules anywhere, only lists carry counters. But an
-	// element under a scope-holding parent still joins, so a chain like ol >
-	// li > div > ol keeps its inheritance path unbroken.
-	const tag = element.tagName;
-	if (
-		!cascade.counterRulesExist &&
-		tag !== "OL" &&
-		tag !== "UL" &&
-		tag !== "LI" &&
-		!(
-			element.parentElement && cascade.counterScopes.has(element.parentElement)
-		) &&
-		!(attributeOf(element, "style") ?? "").includes("counter")
-	) {
+// Whether a removed subtree held an element that changed a counter,
+// which renumbers what came after it.
+function declaresCounters(cascade: Cascade, root: Element): boolean {
+	if (cascade.counterKeys.has(root)) {
+		return true;
+	}
+	for (const element of flatDescendants(root)) {
+		if (cascade.counterKeys.has(element)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Elements moved in the flat tree with no change of their own, as a slot
+ * takes other nodes or a host takes a shadow root, inherit their counters
+ * from elsewhere, so the counts are made again.
+ */
+function noteFlatTreeChange(cascade: Cascade): void {
+	if (cascade.countersCounted) {
+		cascade.countersStale = true;
+	}
+}
+
+// Every counter is counted again, and the content that reads one is made
+// again from the new counts.
+function refreshCounters(cascade: Cascade): void {
+	if (!cascade.countersStale) {
 		return;
 	}
+	forgetCounters(cascade);
+	const users = [...cascade.counterUsers];
+	cascade.counterUsers.clear();
+	for (const element of users) {
+		if (element.isConnected) {
+			invalidateElementCaches(cascade, element);
+			attachPseudoElementsToElement(cascade, element);
+		}
+	}
+}
 
-	const computedStyle = cascade.declarationFor(element);
-	const computedStyleSlots = _(computedStyle);
-	const counterReset = computedStyleSlots[kComputedValue]("counter-reset");
-	const counterIncrement =
-		computedStyleSlots[kComputedValue]("counter-increment");
+function forgetCounters(cascade: Cascade): void {
+	cascade.countersStale = false;
+	cascade.countersCounted = false;
+	cascade.counterSets = new WeakMap();
+	cascade.counterEnds = new WeakMap();
+	cascade.counterKeys = new WeakMap();
+}
 
-	const parentElement = element.parentElement;
-	const parentScope = parentElement
-		? cascade.counterScopes.get(parentElement)
-		: undefined;
+interface CounterEntry {
+	name: string;
+	// The box that made the counter, and the node holding it, whose other
+	// children are its siblings. A pseudo-element is held by its host.
+	origin: object;
+	holder: Node | null;
+	value: number;
+}
 
-	const scope: CSSValues.CounterScope = {
-		element,
-		counters: {},
-		parent: parentScope,
-	};
-	cascade.counterScopes.set(element, scope);
+// The counters an element's own properties leave, those its ::before
+// leaves, which its first child starts from, and whether it shows.
+interface CounterStart {
+	own: readonly CounterEntry[];
+	inner: readonly CounterEntry[];
+	hidden: boolean;
+	// What its ::after resets, steps and sets, counted where it ends.
+	after: CounterEffects | null;
+}
 
-	if (counterReset && counterReset !== "none") {
-		CSSValues.parseCounterReset(scope, counterReset);
-	}
+// What its ::after reads, if it has one, and what the subtree leaves,
+// ::after included, which the next sibling takes its values from.
+interface CounterEnd {
+	after: readonly CounterEntry[] | null;
+	end: readonly CounterEntry[];
+}
 
-	if (element.tagName === "OL" || element.tagName === "UL") {
-		const startValue = element.tagName === "OL"
-			? parseInt(attributeOf(element, "start") || "1", 10)
-			: 0;
-		// start - 1, so the first increment gives start.
-		scope.counters["list-item"] = startValue - 1;
-	}
+interface CounterEffects {
+	resets: Array<[string, number]>;
+	increments: Array<[string, number]>;
+	sets: Array<[string, number]>;
+}
 
-	if (counterIncrement && counterIncrement !== "none") {
-		parseCounterIncrement(cascade, scope, counterIncrement);
-	}
+const NO_EFFECTS: CounterEffects = {resets: [], increments: [], sets: []};
+
+const NO_COUNTERS: readonly CounterEntry[] = [];
 
-	if (element.tagName === "LI") {
-		incrementCounter(cascade, scope, "list-item", 1);
+/**
+ * The counters in scope where an element's content reads them, innermost
+ * last (css-lists-3 §4.4): the element's own for its ::marker, after its
+ * ::before for its ::before, and after its last child for its ::after.
+ * A box inherits the counters of its parent and of its previous sibling,
+ * at the values the box before it in tree order left, then applies its
+ * own counter-reset, counter-increment and counter-set. ::before is its
+ * host's first child and ::after its last.
+ *
+ * By induction on tree order, a box's counters begin with its parent's,
+ * and so with those of every ancestor: it starts from its parent's and
+ * appends, and only ever removes a counter one of its siblings made. The
+ * box before B in tree order is B's previous sibling, or one of that
+ * sibling's descendants, or B's parent, so its counters begin with the
+ * ones B inherits, at the values B inherits them with. Inheriting is
+ * cutting that list to the length of the previous sibling's, or the
+ * parent's.
+ */
+function getCounters(
+	cascade: Cascade,
+	element: Element,
+	pseudoType: string | null,
+): readonly CounterEntry[] {
+	if (pseudoType === "::after") {
+		countCounters(cascade, element, "end");
+		return cascade.counterEnds.get(element)!.after ?? NO_COUNTERS;
 	}
+	countCounters(cascade, element, "start");
+	const start = cascade.counterSets.get(element)!;
+	return pseudoType === "::before" ? start.inner : start.own;
 }
 
-function parseCounterIncrement(
+// What each count is made from comes first in tree order, so it is
+// counted first, from a stack rather than by recursion, since a long
+// list asks through every item before.
+function countCounters(
 	cascade: Cascade,
-	scope: CSSValues.CounterScope,
-	counterIncrement: string,
+	element: Element,
+	part: "start" | "end",
 ): void {
-	for (const [name, increment] of CSSValues.getCounterPairs(
-		counterIncrement,
-		1,
-	)) {
-		incrementCounter(cascade, scope, name, increment);
+	const tree = createFlatElementTree();
+	const isCounted = ([each, which]: [Element, "start" | "end"]) =>
+		which === "start"
+			? cascade.counterSets.has(each)
+			: cascade.counterEnds.has(each);
+	const stack: Array<[Element, "start" | "end"]> = [[element, part]];
+	while (stack.length > 0) {
+		const top = stack.at(-1)!;
+		if (isCounted(top)) {
+			stack.pop();
+			continue;
+		}
+		const [each, which] = top;
+		const needs: Array<[Element, "start" | "end"]> = [];
+		if (which === "start") {
+			const sibling = tree.previousOf(each);
+			const parent = tree.parentOf(each);
+			if (sibling !== null) {
+				needs.push([sibling, "start"], [sibling, "end"]);
+			} else if (parent !== null) {
+				needs.push([parent, "start"]);
+			}
+		} else {
+			needs.push([each, "start"]);
+			const last = tree.lastOf(each);
+			if (last !== null) {
+				needs.push([last, "start"], [last, "end"]);
+			}
+		}
+		const missing = needs.filter((need) => !isCounted(need));
+		if (missing.length > 0) {
+			stack.push(...missing);
+			continue;
+		}
+		stack.pop();
+		if (which === "start") {
+			countStart(cascade, each, tree);
+		} else {
+			countEnd(cascade, each, tree);
+		}
 	}
 }
 
-function incrementCounter(
+// The flat tree's elements, which counters are inherited through, as a
+// shadow tree's content is its host's and a slot's assigned nodes are
+// its own. Each parent's children are listed once a count.
+interface FlatElementTree {
+	parentOf(element: Element): Element | null;
+	previousOf(element: Element): Element | null;
+	lastOf(element: Element): Element | null;
+}
+
+function createFlatElementTree(): FlatElementTree {
+	const children = new Map<Element, Element[]>();
+	const indices = new Map<Element, number>();
+	const childrenOf = (parent: Element): Element[] => {
+		let list = children.get(parent);
+		if (list === undefined) {
+			list = [];
+			for (const child of flatChildren(parent)) {
+				if (nodeTypeOf(child) === ELEMENT_NODE) {
+					indices.set(child as Element, list.length);
+					list.push(child as Element);
+				}
+			}
+			children.set(parent, list);
+		}
+		return list;
+	};
+	return {
+		parentOf: (element) => flatParentElement(element) as Element | null,
+		previousOf: (element) => {
+			const parent = flatParentElement(element) as Element | null;
+			if (parent === null) {
+				return null;
+			}
+			const list = childrenOf(parent);
+			const index = indices.get(element) ?? -1;
+			return index > 0 ? list[index - 1] : null;
+		},
+		lastOf: (element) => childrenOf(element).at(-1) ?? null,
+	};
+}
+
+function inherit(
+	base: readonly CounterEntry[],
+	preceding: readonly CounterEntry[],
+): readonly CounterEntry[] {
+	return preceding.length === base.length
+		? preceding
+		: preceding.slice(0, base.length);
+}
+
+function countStart(
 	cascade: Cascade,
-	scope: CSSValues.CounterScope,
-	counterName: string,
-	increment: number,
+	element: Element,
+	tree: FlatElementTree,
 ): void {
-	// A list item counts from the item before it, not from its scope.
-	// Siblings share one list, and each scope only ever holds its own
-	// element's value.
-	if (counterName === "list-item" && scope.element.tagName === "LI") {
-		const currentValue = getListItemCounterValue(cascade, scope.element);
-		scope.counters[counterName] = currentValue + increment;
-	} else {
-		const currentValue = CSSValues.getCounterValueInScope(
-			scope.parent,
-			counterName,
-		);
-		scope.counters[counterName] = currentValue + increment;
+	cascade.countersCounted = true;
+	const sibling = tree.previousOf(element);
+	const parent = tree.parentOf(element);
+	const parentStart = parent === null ? null : cascade.counterSets.get(parent)!;
+	const inherited = sibling !== null
+		? inherit(
+			cascade.counterSets.get(sibling)!.own,
+			cascade.counterEnds.get(sibling)!.end,
+		)
+		: parentStart?.inner ?? NO_COUNTERS;
+	const inputs = readCounterInputs(cascade, element);
+	const key = getCounterKey(inputs);
+	if (key !== null) {
+		cascade.counterKeys.set(element, key);
+	}
+	const hidden = parentStart?.hidden === true || inputs.hidden;
+	if (key === null || hidden) {
+		cascade.counterSets.set(element, {
+			own: inherited,
+			inner: inherited,
+			hidden,
+			after: null,
+		});
+		return;
 	}
+	const own = applyCounters(inputs.own, inherited, element, element.parentNode);
+	cascade.counterSets.set(element, {
+		own,
+		inner: inputs.before === null
+			? own
+			: applyCounters(inputs.before, own, {}, element),
+		hidden,
+		after: inputs.after,
+	});
 }
 
-// The list's start value plus the items before this one. Siblings
-// share one counter, and each scope holds only its own element's value.
-function getListItemCounterValue(cascade: Cascade, element: Element): number {
-	let parent = element.parentElement;
-	while (parent && parent.tagName !== "OL" && parent.tagName !== "UL") {
-		parent = parent.parentElement;
-	}
+function countEnd(
+	cascade: Cascade,
+	element: Element,
+	tree: FlatElementTree,
+): void {
+	const start = cascade.counterSets.get(element)!;
+	const last = tree.lastOf(element);
+	const base = last === null ? start.inner : cascade.counterSets.get(last)!.own;
+	const preceding = last === null
+		? start.inner
+		: cascade.counterEnds.get(last)!.end;
+	const after =
+		start.hidden ||
+			!hasGeneratedContent(cascade, element, "::after")
+			? null
+			: applyCounters(
+				start.after ?? NO_EFFECTS,
+				inherit(base, preceding),
+				{},
+				element,
+			);
+	cascade.counterEnds.set(element, {after, end: after ?? preceding});
+}
+
+function describeCounterEffects(effects: CounterEffects): string {
+	const describe = (pairs: Array<[string, number]>) =>
+		pairs.map(([name, value]) => `${name} ${value}`).join(" ");
+	return effects.resets.length === 0 &&
+			effects.increments.length === 0 &&
+			effects.sets.length === 0
+		? ""
+		: `reset:${describe(effects.resets)};increment:${
+			describe(effects.increments)
+		};set:${describe(effects.sets)}`;
+}
+
+function readCounterEffects(
+	read: (property: string) => string | undefined,
+): CounterEffects {
+	const declared = (property: string, fallback: number) => {
+		const value = read(property);
+		return value && value !== "none"
+			? CSSValues.getCounterPairs(value, fallback)
+			: [];
+	};
+	return {
+		resets: declared("counter-reset", 0),
+		increments: declared("counter-increment", 1),
+		sets: declared("counter-set", 0),
+	};
+}
 
-	if (!parent) {
-		return 0;
+// An element's own counter-reset, counter-increment and counter-set,
+// with the list-item counter HTML's lists keep: a list resets it, an
+// item steps it, and an item's value sets it.
+function getElementCounterEffects(
+	cascade: Cascade,
+	element: Element,
+): CounterEffects {
+	const slots = _(cascade.declarationFor(element));
+	const declares =
+		cascade.counterRulesExist ||
+		(attributeOf(element, "style") ?? "").includes("counter");
+	const effects = readCounterEffects((property) =>
+		declares ? (slots._computedValue(property) ?? undefined) : undefined,
+	);
+	const names = (pairs: Array<[string, number]>) => pairs.map(([name]) => name);
+	const tag = element.tagName;
+	if (
+		(tag === "OL" || tag === "UL") &&
+		!names(effects.resets).includes("list-item")
+	) {
+		effects.resets.push(["list-item", getListStart(element)]);
+	}
+	if (tag === "LI") {
+		const list = element.parentElement;
+		if (!names(effects.increments).includes("list-item")) {
+			effects.increments.push([
+				"list-item",
+				list?.tagName === "OL" && hasAttributeOf(list, "reversed") ? -1 : 1,
+			]);
+		}
+		const value = parseInt(attributeOf(element, "value") ?? "", 10);
+		if (Number.isFinite(value) && !names(effects.sets).includes("list-item")) {
+			effects.sets.push(["list-item", value]);
+		}
 	}
+	return effects;
+}
 
-	// Items initialize in document order, so the nearest earlier item that
-	// has a scope already holds the count up to itself. Counting from the
-	// list's start for every item made a long list quadratic.
-	let uncounted = 0;
-	for (
-		let previous = element.previousElementSibling;
-		previous !== null;
-		previous = previous.previousElementSibling
+// A pseudo-element's counter properties, when it generates a box and
+// sets any: a ::before or ::after with no content is no box.
+function getPseudoCounterEffects(
+	cascade: Cascade,
+	element: Element,
+	type: string,
+): CounterEffects | null {
+	if (
+		!cascade.counterRulesExist || !hasGeneratedContent(cascade, element, type)
 	) {
-		if (previous.tagName !== "LI") {
-			continue;
+		return null;
+	}
+	const style = computePseudoElementStyle(cascade, element, type);
+	const effects = readCounterEffects((property) => style[property]);
+	return describeCounterEffects(effects) === "" ? null : effects;
+}
+
+function hasGeneratedContent(
+	cascade: Cascade,
+	element: Element,
+	type: string,
+): boolean {
+	if (!(cascade.pseudoRulesByType.get(type)?.length)) {
+		return false;
+	}
+	const style = computePseudoElementStyle(cascade, element, type);
+	const content = style.content;
+	return content !== undefined &&
+		content !== "none" &&
+		content !== "normal" &&
+		style.display !== "none";
+}
+
+// A reset makes a counter, in place of one of the same name a sibling
+// made. A step or a set reaches the innermost of the name, made here at
+// zero if there is none.
+function applyCounters(
+	effects: CounterEffects,
+	inherited: readonly CounterEntry[],
+	origin: object,
+	holder: Node | null,
+): readonly CounterEntry[] {
+	const counters = [...inherited];
+	const instantiate = (name: string, value: number): number => {
+		const index = counters.findIndex((counter) =>
+			counter.name === name &&
+			(counter.origin === origin || counter.holder === holder),
+		);
+		if (index !== -1) {
+			counters.splice(index, 1);
 		}
-		const scope = cascade.counterScopes.get(previous as Element);
-		if (scope !== undefined && "list-item" in scope.counters) {
-			return scope.counters["list-item"] + uncounted;
+		counters.push({name, origin, holder, value});
+		return counters.length - 1;
+	};
+	const innermost = (name: string): number => {
+		const index = findInnermost(counters, name);
+		return index === -1 ? instantiate(name, 0) : index;
+	};
+	for (const [name, value] of effects.resets) {
+		instantiate(name, value);
+	}
+	for (const [name, step] of effects.increments) {
+		const index = innermost(name);
+		counters[index] = {...counters[index], value: counters[index].value + step};
+	}
+	for (const [name, value] of effects.sets) {
+		const index = innermost(name);
+		counters[index] = {...counters[index], value};
+	}
+	return counters;
+}
+
+function findInnermost(
+	counters: readonly CounterEntry[],
+	name: string,
+): number {
+	for (let index = counters.length - 1; index >= 0; index--) {
+		if (counters[index].name === name) {
+			return index;
 		}
-		uncounted++;
 	}
-	const parentScope = cascade.counterScopes.get(parent);
-	return (parentScope?.counters["list-item"] ?? 0) + uncounted;
+	return -1;
+}
+
+// One before the first item's number, so the first step gives it.
+function getListStart(list: Element): number {
+	if (list.tagName !== "OL") {
+		return 0;
+	}
+	const reversed = hasAttributeOf(list, "reversed");
+	const start = parseInt(attributeOf(list, "start") ?? "", 10);
+	if (reversed) {
+		return (Number.isFinite(start) ? start : getListItems(list).length) + 1;
+	}
+	return (Number.isFinite(start) ? start : 1) - 1;
 }
 
 function getUsedValues(
@@ -8134,7 +8814,8 @@ function tickTransitions(cascade: Cascade): void {
 		}
 		invalidateElementCaches(cascade, element);
 	}
-	cascade.layout.invalidateFrame();
+	refreshCounters(cascade);
+	cascade.layout.invalidateFrame(false);
 	flushTransitionEvents(cascade);
 	// A window no engine set up has no requestAnimationFrame, and its reads
 	// interpolate on their own.
@@ -8222,21 +8903,46 @@ function invalidateElement(cascade: Cascade, element: Element): void {
 	}
 	cascade.computedStyleCache.delete(element);
 	cascade.hasResults = null;
-	cascade.pseudoElementStyleCache.delete(element);
+	const hadPseudoStyles = cascade.pseudoElementStyleCache.delete(element);
 	// A style change can flip display: contents, which moves the node's
-	// flat-tree BOX parent, so every box enumeration is stale.
-	cascade.layout.invalidateFrame();
+	// flat-tree BOX parent, so every box enumeration is stale. A change
+	// layout sees repaints what it moves. The element's own rows repaint
+	// for one it does not.
+	cascade.layout.invalidateFrame(false);
+	recordRestyle(cascade, element, dropped, hadPseudoStyles);
+}
+
+// The style an element painted under, kept until the next frame compares
+// it with the new one. A pseudo-element's style is not compared.
+function recordRestyle(
+	cascade: Cascade,
+	element: Element,
+	dropped: Slots<ComputedStyleDeclaration> | undefined,
+	hadPseudoStyles: boolean,
+): void {
+	cascade.layout.restyledSinceLayout.add(element);
+	// Past this many, the next frame repaints whole rather than compare
+	// them, and a document that never paints keeps no more.
+	if (cascade.layout.restyledForPaint.size >= 256) {
+		cascade.layout.restyledForPaint.clear();
+		cascade.layout.invalidateFrame();
+		return;
+	}
+	if (!cascade.layout.restyledForPaint.has(element)) {
+		cascade.layout.restyledForPaint.set(
+			element,
+			dropped && !hadPseudoStyles ? dropped.styleVersion : null,
+		);
+	}
 }
 
 // A child that came or went can change what the element's other
 // children match, and the element itself through :empty. Their
 // descendants only follow when a sheet tests siblings outside a subject
 // or inherits through one.
+// Only a child a sibling-tested compound could name restyles, with its
+// subtree when such a rule reaches descendants.
 function invalidateChildren(cascade: Cascade, element: Element): void {
-	if (getSiblingIndex(cascade, element)?.reachesDescendants) {
-		invalidateSubtree(cascade, element);
-		return;
-	}
 	invalidateSibling(cascade, element);
 	for (const child of element.children) {
 		invalidateSibling(cascade, child);
@@ -8406,6 +9112,12 @@ function invalidateElementCaches(
 	// A computed style an author still holds is the one this cache handed
 	// out, so it is told the cascade changed rather than merely dropped.
 	const dropped = cascade.computedStyleCache.get(element);
+	recordRestyle(
+		cascade,
+		element,
+		dropped,
+		cascade.pseudoElementStyleCache.has(element),
+	);
 	if (dropped) {
 		cascade.currentDeclarations.delete(dropped);
 		storeTransitionFallback(cascade, element, "", dropped.resolved);
@@ -8420,7 +9132,9 @@ function invalidateElementCaches(
 		}
 	}
 	cascade.pseudoElementStyleCache.delete(element);
-	cascade.counterScopes.delete(element);
+	cascade.counterSets.delete(element);
+	cascade.counterEnds.delete(element);
+	noteCounterChange(cascade, element);
 }
 
 // Properties the painter reads and layout never does. A rule declaring
@@ -8606,6 +9320,7 @@ function parseStylesheetsNow(cascade: Cascade): void {
 	cascade.scopedRulesExist = false;
 	cascade.hasRulesExist = false;
 	cascade.hasAnchors = new Set();
+	cascade.hasSiblingRules = false;
 	cascade.hasStates = new Set();
 	cascade.hoverRulesDeclared = false;
 	cascade.stylesheetsDirty = false;
@@ -8654,7 +9369,8 @@ function parseStylesheetsNow(cascade: Cascade): void {
 }
 
 // Origin first (UA below every author rule, later wins), then layer,
-// then specificity, then the order the rules were read in.
+// then specificity, then the order the rules were read in. The
+// pseudo-element rules are filed again in that order.
 function sortRulesForCascade(cascade: Cascade): void {
 	const sourceOrder = new Map(
 		cascade.parsedRules.map((rule, index) => [rule, index] as const),
@@ -8671,6 +9387,18 @@ function sortRulesForCascade(cascade: Cascade): void {
 		}
 		return sourceOrder.get(a)! - sourceOrder.get(b)!;
 	});
+	cascade.pseudoRulesByType = new Map();
+	for (const rule of cascade.parsedRules) {
+		if (rule.pseudoElement === undefined) {
+			continue;
+		}
+		const byType = cascade.pseudoRulesByType.get(rule.pseudoElement);
+		if (byType) {
+			byType.push(rule);
+		} else {
+			cascade.pseudoRulesByType.set(rule.pseudoElement, [rule]);
+		}
+	}
 }
 
 // Declare a layer and every layer its path nests inside.
@@ -8738,7 +9466,7 @@ function parseStyleSheet(
 		if (container.disabled) {
 			return;
 		}
-		if (!cascade.mediaQueryMatches(container.media.mediaText)) {
+		if (!mediaQueryMatches(cascade, container.media.mediaText)) {
 			return;
 		}
 	}
@@ -8746,7 +9474,7 @@ function parseStyleSheet(
 		if (rule instanceof CSSStyleRule) {
 			parseStyleRule(cascade, rule, scope, uaOrigin, context);
 		} else if (rule instanceof CSSMediaRule) {
-			if (cascade.mediaQueryMatches(rule.conditionText)) {
+			if (mediaQueryMatches(cascade, rule.conditionText)) {
 				parseStyleSheet(cascade, rule, scope, uaOrigin, context);
 			}
 		} else if (rule instanceof CSSSupportsRule) {
@@ -9288,7 +10016,7 @@ function parseNestedRules(
 		} else if (rule instanceof CSSStyleRule) {
 			parseStyleRule(cascade, rule, scope, uaOriginSheet, context, parent);
 		} else if (rule instanceof CSSMediaRule) {
-			if (cascade.mediaQueryMatches(rule.conditionText)) {
+			if (mediaQueryMatches(cascade, rule.conditionText)) {
 				parseNestedRules(cascade, rule, parent, scope, uaOriginSheet, context);
 			}
 		} else if (rule instanceof CSSSupportsRule) {
@@ -9543,13 +10271,15 @@ function parseSelector(
 	// sweep only for documents that need it.
 	let hasAnchors: string[] | undefined;
 	let hasStates: string[] | undefined;
+	let hasSiblings: boolean | undefined;
 	if (selector.includes(":has(")) {
 		hasAnchors = getHasAnchors(selector);
 		const inside = selector.slice(selector.indexOf(":has(") + 5);
 		hasStates = Array.from(inside.matchAll(/:([a-zA-Z-]+)/g), (match) =>
 			match[1].toLowerCase(),
 		);
-		noteHasRule(cascade, hasAnchors, hasStates);
+		hasSiblings = hasSiblingArgument(selector);
+		noteHasRule(cascade, hasAnchors, hasStates, hasSiblings);
 	}
 	if (selector.includes(":hover")) {
 		cascade.hoverRulesDeclared = true;
@@ -9570,6 +10300,7 @@ function parseSelector(
 	if (
 		declarations["counter-reset"] ||
 		declarations["counter-increment"] ||
+		declarations["counter-set"] ||
 		declarations["content"]?.includes("counter")
 	) {
 		cascade.counterRulesExist = true;
@@ -9637,6 +10368,7 @@ function parseSelector(
 			reachesHost,
 			hasAnchors,
 			hasStates,
+			hasSiblings,
 			layer,
 			layerRank: 0,
 			scopes,
@@ -9662,6 +10394,7 @@ function parseSelector(
 			reachesHost,
 			hasAnchors,
 			hasStates,
+			hasSiblings,
 			layer,
 			layerRank: 0,
 			scopes,
@@ -9679,10 +10412,12 @@ interface RuleIndex {
 	rules: ParsedCSSRule[];
 	length: number;
 	keyed: Map<string, number[]>;
-	unkeyed: ParsedCSSRule[];
+	// The rest by the element name their subject requires, so a span never
+	// tries the rules for inputs and table cells.
+	tagged: Map<string, number[]>;
 	unkeyedPositions: number[];
-	// Candidates by the id and classes that chose them, since elements
-	// alike in both, like an editor's lines, try the same rules.
+	// Candidates by the name, id and classes that chose them, since elements
+	// alike in those, like an editor's lines, try the same rules.
 	candidates: Map<string, ParsedCSSRule[]>;
 }
 
@@ -9702,23 +10437,26 @@ function getRuleIndex(cascade: Cascade): RuleIndex {
 		rules,
 		length: rules.length,
 		keyed: new Map(),
-		unkeyed: [],
+		tagged: new Map(),
 		unkeyedPositions: [],
 		candidates: new Map(),
 	};
 	for (const [position, rule] of rules.entries()) {
 		// A pseudo-element's rule matches through its host, and a :host rule
 		// through the tree's host, so neither is filed under the element.
-		if (
-			rule.subjectKey === undefined || rule.pseudoElement || rule.reachesHost
-		) {
-			index.unkeyed.push(rule);
+		if (rule.pseudoElement || rule.reachesHost) {
 			index.unkeyedPositions.push(position);
 			continue;
 		}
-		const bucket = index.keyed.get(rule.subjectKey);
+		const key = rule.subjectKey ?? rule.subjectTag;
+		if (key === undefined) {
+			index.unkeyedPositions.push(position);
+			continue;
+		}
+		const buckets = rule.subjectKey === undefined ? index.tagged : index.keyed;
+		const bucket = buckets.get(key);
 		if (bucket === undefined) {
-			index.keyed.set(rule.subjectKey, [position]);
+			buckets.set(key, [position]);
 		} else {
 			bucket.push(position);
 		}
@@ -9751,10 +10489,8 @@ function getCandidateRules(
 	const index = getRuleIndex(cascade);
 	const id = getIdValue(element);
 	const classes = getClassTokens(element);
-	if (id === null && classes.size === 0) {
-		return index.unkeyed;
-	}
-	let key = id === null ? "" : `#${id}`;
+	const tag = localNameOf(element);
+	let key = id === null ? tag : `${tag} #${id}`;
 	for (const name of classes) {
 		key += ` .${name}`;
 	}
@@ -9763,6 +10499,14 @@ function getCandidateRules(
 		return candidates;
 	}
 	const positions = new Set(index.unkeyedPositions);
+	// A foreign element's name keeps its case, and a type selector may
+	// still match it lowercased, as isRuleMatch allows.
+	const lower = tag.toLowerCase();
+	for (const name of lower === tag ? [tag] : [tag, lower]) {
+		for (const position of index.tagged.get(name) ?? []) {
+			positions.add(position);
+		}
+	}
 	if (id !== null) {
 		for (const position of index.keyed.get(`#${id}`) ?? []) {
 			positions.add(position);
@@ -9795,15 +10539,19 @@ function getMatchingRules(cascade: Cascade, element: Element): ParsedCSSRule[] {
 		.filter(Boolean);
 	const matched = getCandidateRules(cascade, element).filter((rule) => {
 		if (rule.pseudoElement) {
+			if (shadowHost === null) {
+				return false;
+			}
 			// ::part(name) matches the shadow's HOST, and its declarations
 			// cascade onto the part element. This is the standard CSS Shadow
 			// Parts crossing. A built-in control's parts are the UA's, as in
 			// every browser, and a page reaches them only through the
 			// pseudo-elements above.
-			const partArg = rule.pseudoElement.match(/^::part\((.+)\)$/);
+			const partArg = rule.pseudoElement.startsWith("::part(")
+				? rule.pseudoElement.match(/^::part\((.+)\)$/)
+				: null;
 			if (partArg) {
 				return (
-					shadowHost !== null &&
 					(rule.uaOrigin || !isUAShadowTree(root)) &&
 					splitOnASCIIWhitespace(partArg[1])
 						.every((name) => partNames.includes(name)) &&
@@ -9814,7 +10562,6 @@ function getMatchingRules(cascade: Cascade, element: Element): ParsedCSSRule[] {
 				);
 			}
 			return (
-				shadowHost !== null &&
 				partPseudos.includes(rule.pseudoElement) &&
 				isRuleMatch(shadowHost, rule)
 			);
@@ -10013,12 +10760,8 @@ function computePseudoElementStyle(
 	pseudoElement: string,
 ): Record<string, string> {
 	const pseudoRoot = element.getRootNode() as unknown as Node;
-	const matchingRules = cascade.parsedRules.filter((rule) => {
-		if (rule.pseudoElement !== pseudoElement) {
-			return false;
-		}
-		return isRuleMatch(element, rule, pseudoRoot);
-	});
+	const matchingRules = (cascade.pseudoRulesByType.get(pseudoElement) ?? [])
+		.filter((rule) => isRuleMatch(element, rule, pseudoRoot));
 
 	// A pseudo-element's declarations are a flat record, not a per-property
 	// cascade, so a flow-relative declaration fills BOTH names of its slot
@@ -10035,8 +10778,8 @@ function computePseudoElementStyle(
 			if (!CSSValues.hasSlotAliases(name)) {
 				continue;
 			}
-			direction ??=
-				cascade.computedSlotsFor(element)[kComputedValue]("direction");
+			direction ??= computedSlotsFor(cascade, element)
+				._computedValue("direction");
 			for (const other of CSSValues.getSlotNames(name, direction)) {
 				computedStyle[other] = value;
 			}
@@ -10056,11 +10799,11 @@ function getPseudoContent(
 
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(hostElement);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 
 		if (display === "list-item") {
 			const listStylePosition =
-				_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+				_(computedStyle)._computedValue("list-style-position") || "outside";
 
 			if (listStylePosition === "outside") {
 				return null;
@@ -10076,9 +10819,7 @@ function getPseudoContent(
 		return null;
 	}
 
-	const textContent = CSSValues.unquoteContent(content);
-
-	return resolveCounterFunction(cascade, hostElement, textContent);
+	return evaluateContent(cascade, hostElement, pseudoType, content);
 }
 
 function attachPseudoElements(cascade: Cascade): void {
@@ -10212,14 +10953,11 @@ function attachPseudoElementToElementForType(
 		return;
 	}
 
-	// counter() in a content value reads these, so they must exist first.
-	initializeCounters(cascade, element);
-
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(element);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 		const listStylePosition =
-			_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+			_(computedStyle)._computedValue("list-style-position") || "outside";
 
 		if (display !== "list-item") {
 			return;
@@ -10388,3 +11126,20 @@ export function styleShadowAttached(root: ShadowRoot): void {
 		.get((root.host as Element).ownerDocument as object)
 		?.registerShadowRoot(root);
 }
+
+setStyleHooks({
+	adoptStyleSheets,
+	getAdoptedStyleSheets,
+	getBoxModel,
+	getComputedValue,
+	getInlineStyle,
+	getStyleSheets,
+	getWhiteSpace,
+	handleFocusChange,
+	handleMutations,
+	handleStateChange,
+	mediaQueryMatches,
+	styleAttributeChanged,
+	styleElementSheet,
+	styleShadowAttached,
+});
diff --git a/src/internal/cssselectors.ts b/src/internal/cssselectors.ts
index 26596030..16bbbadd 100644
--- a/src/internal/cssselectors.ts
+++ b/src/internal/cssselectors.ts
@@ -1,61 +1,80 @@
 import bidiFactory from "bidi-js";
 
 import * as CSSTree from "./csstree.ts";
+import type * as DOM from "./dom.ts";
+import type {Element, Node} from "./dom.ts";
+import {splitOnASCIIWhitespace, toASCIILowercase} from "./text.ts";
 import {
 	attributeOf,
-	type Element,
+	CDATA_SECTION_NODE,
+	DOCUMENT_NODE,
+	ELEMENT_NODE,
 	getAttributeList,
 	getElementChildren,
 	getFirstChildNode,
-	getHeadingLevel,
-	getMeterLevel,
 	getNextSiblingNode,
-	getOpenAssignedSlot,
 	getParentNode,
-	getPartNames,
 	getPreviousSiblingNode,
-	getRangeMatch,
 	getRoot,
-	getShadowHost,
-	getUserValidityMatch,
-	getValidityMatch,
 	hasAttributeOf,
-	hasCustomState,
-	hasFocus,
-	hasFocusWithin,
 	HTML_NAMESPACE,
-	isActive,
-	isActuallyDisabled,
-	isCheckedControl,
-	isDefaultControl,
-	isDefinedElement,
 	isElement,
-	isFocusVisible,
-	isFormAssociatedCustom,
-	isFullscreenElement,
-	isHovered,
-	isHTMLNode,
-	isIndeterminateControl,
-	isInQuirksMode,
-	isMeterValue,
-	isModalDialog,
-	isOpenElement,
-	isPlaceholderShown,
-	isShowingPopover,
-	isTargetElement,
 	localNameOf,
 	namespaceOf,
 	nextInTree,
-	Node,
 	nodeTypeOf,
 	parentElement,
-	READONLY_INPUT_TYPES,
-	REQUIRED_INPUT_TYPES,
 	SVG_NAMESPACE,
+	TEXT_NODE,
 	XLINK_NAMESPACE,
 	XML_NAMESPACE,
-} from "./dom.ts";
-import {splitOnASCIIWhitespace, toASCIILowercase} from "./text.ts";
+} from "./tree.ts";
+
+/**
+ * What the matcher asks the DOM about an element's state: focus, hover,
+ * a form control's validity and the rest, which only dom.ts can answer.
+ * dom.ts hands them over as it loads, so this module never imports it.
+ */
+type ElementStates = Pick<
+	typeof DOM,
+	"getHeadingLevel" |
+	"getMeterLevel" |
+	"getOpenAssignedSlot" |
+	"getPartNames" |
+	"getRangeMatch" |
+	"getShadowHost" |
+	"getUserValidityMatch" |
+	"getValidityMatch" |
+	"hasCustomState" |
+	"hasFocus" |
+	"hasFocusWithin" |
+	"isActive" |
+	"isActuallyDisabled" |
+	"isCheckedControl" |
+	"isDefaultControl" |
+	"isDefinedElement" |
+	"isFocusVisible" |
+	"isFormAssociatedCustom" |
+	"isFullscreenElement" |
+	"isHovered" |
+	"isHTMLNode" |
+	"isIndeterminateControl" |
+	"isInQuirksMode" |
+	"isMeterValue" |
+	"isModalDialog" |
+	"isOpenElement" |
+	"isPlaceholderShown" |
+	"isShowingPopover" |
+	"isTargetElement" |
+	"READONLY_INPUT_TYPES" |
+	"REQUIRED_INPUT_TYPES"
+>;
+
+let states: ElementStates;
+
+export function setElementStates(given: ElementStates): void {
+	states = given;
+}
 
 // CSS Selectors: the language, and the matcher a selector compiles to.
 // css-tree parses the selector. It is checked against the pseudo-classes
@@ -708,7 +727,7 @@ function compileSimple(
 				if (value === null) {
 					return false;
 				}
-				return isInQuirksMode(element)
+				return states.isInQuirksMode(element)
 					? toASCIILowercase(value) === folded
 					: value === id;
 			});
@@ -725,7 +744,7 @@ function compileSimple(
 				if (value === null) {
 					return false;
 				}
-				if (!isInQuirksMode(element)) {
+				if (!states.isInQuirksMode(element)) {
 					return hasToken(value, name);
 				}
 				for (const token of splitOnASCIIWhitespace(value)) {
@@ -812,7 +831,7 @@ function compileType(name: string, compiling: Compiling): Predicate {
 	const {namespace, local} = qualifiedName(name, compiling.namespaces, false);
 	const folded = local === null ? null : toASCIILowercase(local);
 	return (element) => {
-		if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+		if (nodeTypeOf(element) !== ELEMENT_NODE) {
 			return false;
 		}
 		const elementNamespace = namespaceOf(element);
@@ -828,7 +847,7 @@ function compileType(name: string, compiling: Compiling): Predicate {
 		}
 		return (
 			elementNamespace === HTML_NAMESPACE &&
-			isHTMLNode(element) &&
+			states.isHTMLNode(element) &&
 			toASCIILowercase(elementLocal) === folded
 		);
 	};
@@ -909,7 +928,8 @@ function compileAttribute(
 	// Read the attribute the way HTML reads a name. An HTML element in an
 	// HTML document lowercases its attribute names.
 	const read = (element: Element): string | null => {
-		const fold = namespaceOf(element) === HTML_NAMESPACE && isHTMLNode(element);
+		const fold =
+			namespaceOf(element) === HTML_NAMESPACE && states.isHTMLNode(element);
 		const attributes = getAttributeList(element);
 		for (let index = 0; index < attributes.length; index++) {
 			const attribute = attributes[index];
@@ -949,7 +969,7 @@ function compileAttribute(
 			flags === "i" ||
 			(flags === "" &&
 				namespaceOf(element) === HTML_NAMESPACE &&
-				isHTMLNode(element) &&
+				states.isHTMLNode(element) &&
 				CASE_INSENSITIVE_ATTRIBUTES.has(folded));
 		const subject = insensitive ? toASCIILowercase(value) : value;
 		const target = insensitive ? foldedWanted : wanted;
@@ -1039,7 +1059,7 @@ function compilePseudoClass(
 			const context = name === "host-context";
 			compound.tests.push((element, state) => {
 				const shadow = state.shadow;
-				if (shadow === null || getShadowHost(shadow) !== element) {
+				if (shadow === null || states.getShadowHost(shadow) !== element) {
 					return false;
 				}
 				if (inner === null) {
@@ -1072,7 +1092,7 @@ function compilePseudoClass(
 		case "root":
 			compound.tests.push((element) => {
 				const parent = getParentNode(element);
-				return parent !== null && nodeTypeOf(parent) === Node.DOCUMENT_NODE;
+				return parent !== null && nodeTypeOf(parent) === DOCUMENT_NODE;
 			});
 			return;
 		case "empty":
@@ -1124,19 +1144,21 @@ function compilePseudoClass(
 			// Bare, any heading. With arguments, a heading at one of the
 			// listed levels (selectors-5 §7.4).
 			if (args.length === 0) {
-				compound.tests.push((element) => getHeadingLevel(element) !== null);
+				compound.tests.push(
+					(element) => states.getHeadingLevel(element) !== null,
+				);
 				return;
 			}
 			const levels = getIntegerArguments(args, "heading");
 			compound.tests.push((element) => {
-				const level = getHeadingLevel(element);
+				const level = states.getHeadingLevel(element);
 				return level !== null && levels.includes(level);
 			});
 			return;
 		}
 		case "state": {
 			const wanted = getIdentifierArgument(args, "state");
-			compound.tests.push((element) => hasCustomState(element, wanted));
+			compound.tests.push((element) => states.hasCustomState(element, wanted));
 			return;
 		}
 		case "link":
@@ -1149,108 +1171,117 @@ function compilePseudoClass(
 			compound.tests.push(matchNothing);
 			return;
 		case "target":
-			compound.tests.push((element) => isTargetElement(element));
+			compound.tests.push((element) => states.isTargetElement(element));
 			return;
 		case "hover":
-			compound.tests.push((element) => isHovered(element));
+			compound.tests.push((element) => states.isHovered(element));
 			return;
 		case "active":
 			// Between a mouse press and its release, which a terminal's mouse
 			// reporting sends apart.
-			compound.tests.push((element) => isActive(element));
+			compound.tests.push((element) => states.isActive(element));
 			return;
 		case "focus":
-			compound.tests.push((element) => hasFocus(element));
+			compound.tests.push((element) => states.hasFocus(element));
 			return;
 		case "focus-visible":
-			compound.tests.push((element) => isFocusVisible(element));
+			compound.tests.push((element) => states.isFocusVisible(element));
 			return;
 		case "focus-within":
-			compound.tests.push((element) => hasFocusWithin(element));
+			compound.tests.push((element) => states.hasFocusWithin(element));
 			return;
 		case "modal":
 			// A dialog shown modally, or an element in fullscreen.
 			compound.tests.push(
-				(element) => isModalDialog(element) || isFullscreenElement(element),
+				(element) => states.isModalDialog(element) ||
+					states.isFullscreenElement(element),
 			);
 			return;
 		case "popover-open":
-			compound.tests.push((element) => isShowingPopover(element));
+			compound.tests.push((element) => states.isShowingPopover(element));
 			return;
 		case "fullscreen":
-			compound.tests.push((element) => isFullscreenElement(element));
+			compound.tests.push((element) => states.isFullscreenElement(element));
 			return;
 		case "defined":
-			compound.tests.push((element) => isDefinedElement(element));
+			compound.tests.push((element) => states.isDefinedElement(element));
 			return;
 		case "open":
-			compound.tests.push((element) => isOpenElement(element));
+			compound.tests.push((element) => states.isOpenElement(element));
 			return;
 		case "closed":
 			compound.tests.push(
-				(element) => canOpen(element) && !isOpenElement(element),
+				(element) => canOpen(element) && !states.isOpenElement(element),
 			);
 			return;
 		case "checked":
-			compound.tests.push((element) => isCheckedControl(element));
+			compound.tests.push((element) => states.isCheckedControl(element));
 			return;
 		case "indeterminate":
-			compound.tests.push((element) => isIndeterminateControl(element));
+			compound.tests.push((element) => states.isIndeterminateControl(element));
 			return;
 		case "low-value":
-			compound.tests.push((element) => isMeterValue(element, "low"));
+			compound.tests.push((element) => states.isMeterValue(element, "low"));
 			return;
 		case "high-value":
-			compound.tests.push((element) => isMeterValue(element, "high"));
+			compound.tests.push((element) => states.isMeterValue(element, "high"));
 			return;
 		case "optimal-value":
 		case "-moz-meter-optimum":
-			compound.tests.push((element) => getMeterLevel(element) === "optimum");
+			compound.tests.push(
+				(element) => states.getMeterLevel(element) === "optimum",
+			);
 			return;
 		case "-moz-meter-sub-optimum":
-			compound.tests.push((element) => getMeterLevel(element) === "suboptimum");
+			compound.tests.push(
+				(element) => states.getMeterLevel(element) === "suboptimum",
+			);
 			return;
 		case "-moz-meter-sub-sub-optimum":
 			compound.tests.push(
-				(element) => getMeterLevel(element) === "even-less-good",
+				(element) => states.getMeterLevel(element) === "even-less-good",
 			);
 			return;
 		case "placeholder-shown":
-			compound.tests.push((element) => isPlaceholderShown(element));
+			compound.tests.push((element) => states.isPlaceholderShown(element));
 			return;
 		case "default":
-			compound.tests.push((element) => isDefaultControl(element));
+			compound.tests.push((element) => states.isDefaultControl(element));
 			return;
 		case "disabled":
-			compound.tests.push(isDisabled);
+			compound.tests.push(states.isActuallyDisabled);
 			return;
 		case "enabled":
 			compound.tests.push(
-				(element, state) => isDisableable(element) &&
-					!isDisabled(element, state),
+				(element) => isDisableable(element) &&
+					!states.isActuallyDisabled(element),
 			);
 			return;
 		case "valid":
-			compound.tests.push((element) => getValidityMatch(element) === "valid");
+			compound.tests.push(
+				(element) => states.getValidityMatch(element) === "valid",
+			);
 			return;
 		case "invalid":
-			compound.tests.push((element) => getValidityMatch(element) === "invalid");
+			compound.tests.push(
+				(element) => states.getValidityMatch(element) === "invalid",
+			);
 			return;
 		case "user-valid":
 			compound.tests.push(
-				(element) => getUserValidityMatch(element) === "valid",
+				(element) => states.getUserValidityMatch(element) === "valid",
 			);
 			return;
 		case "user-invalid":
 			compound.tests.push(
-				(element) => getUserValidityMatch(element) === "invalid",
+				(element) => states.getUserValidityMatch(element) === "invalid",
 			);
 			return;
 		case "in-range":
-			compound.tests.push((element) => getRangeMatch(element) === "in");
+			compound.tests.push((element) => states.getRangeMatch(element) === "in");
 			return;
 		case "out-of-range":
-			compound.tests.push((element) => getRangeMatch(element) === "out");
+			compound.tests.push((element) => states.getRangeMatch(element) === "out");
 			return;
 		case "required":
 			compound.tests.push((element) =>
@@ -1261,7 +1292,7 @@ function compilePseudoClass(
 				isRequirable(element) && attributeOf(element, "required") === null);
 			return;
 		case "read-only":
-			compound.tests.push((element, state) => !isMutable(element, state));
+			compound.tests.push((element) => !isMutable(element));
 			return;
 		case "read-write":
 			compound.tests.push(isMutable);
@@ -1423,10 +1454,10 @@ function compilePseudoElement(
 		// before `::slotted()` describes the slot it landed in.
 		compound.originTests = compound.tests;
 		compound.tests = [];
-		compound.origin = (element) => getOpenAssignedSlot(element);
+		compound.origin = (element) => states.getOpenAssignedSlot(element);
 		compound.tests.push(
 			(element, state) =>
-				getOpenAssignedSlot(element) !== null &&
+				states.getOpenAssignedSlot(element) !== null &&
 				inner.some((complex) => matchComplex(complex, element, state, false)),
 		);
 		return;
@@ -1441,9 +1472,9 @@ function compilePseudoElement(
 		// `::part()` describes the host whose tree the part lives in.
 		compound.originTests = compound.tests;
 		compound.tests = [];
-		compound.origin = (element) => getShadowHost(getRoot(element));
+		compound.origin = (element) => states.getShadowHost(getRoot(element));
 		compound.tests.push((element) => {
-			const names = getPartNames(element);
+			const names = states.getPartNames(element);
 			return wanted.every((name) => names.includes(name));
 		});
 		return;
@@ -1480,7 +1511,7 @@ function compileNth(
 	const fromEnd = name === "nth-last-child" || name === "nth-last-of-type";
 	const ofType = name === "nth-of-type" || name === "nth-last-of-type";
 	return (element, state) => {
-		if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+		if (nodeTypeOf(element) !== ELEMENT_NODE) {
 			return false;
 		}
 		// The plain forms read the element's place in a list built once per
@@ -1595,15 +1626,11 @@ const DISABLEABLE = new Set([
 function isDisableable(element: Element): boolean {
 	return (
 		(namespaceOf(element) === HTML_NAMESPACE &&
-			DISABLEABLE.has(localNameOf(element))) || isFormAssociatedCustom(element)
+			DISABLEABLE.has(localNameOf(element))) ||
+		states.isFormAssociatedCustom(element)
 	);
 }
 
-// The selector matches what HTML calls actually disabled.
-function isDisabled(element: Element, _state: MatchState): boolean {
-	return isActuallyDisabled(element);
-}
-
 function isRequirable(element: Element): boolean {
 	if (namespaceOf(element) !== HTML_NAMESPACE) {
 		return false;
@@ -1616,22 +1643,24 @@ function isRequirable(element: Element): boolean {
 		return false;
 	}
 	// The type property, which an unknown type reads as text.
-	return REQUIRED_INPUT_TYPES.has((element as unknown as {type: string}).type);
+	return states.REQUIRED_INPUT_TYPES.has(
+		(element as unknown as {type: string}).type,
+	);
 }
 
 // `:read-write`: a text control the user can type into, or anything an
 // editing host contains.
-function isMutable(element: Element, state: MatchState): boolean {
+function isMutable(element: Element): boolean {
 	if (namespaceOf(element) === HTML_NAMESPACE) {
 		const name = localNameOf(element);
 		if (name === "input" || name === "textarea") {
 			const type = name === "input"
 				? (element as unknown as {type: string}).type
 				: "text";
-			if (READONLY_INPUT_TYPES.has(type)) {
+			if (states.READONLY_INPUT_TYPES.has(type)) {
 				return (
 					attributeOf(element, "readonly") === null &&
-					!isDisabled(element, state)
+					!states.isActuallyDisabled(element)
 				);
 			}
 		}
@@ -1676,12 +1705,12 @@ function isEmpty(element: Element): boolean {
 		child !== null;
 		child = getNextSiblingNode(child)
 	) {
-		if (nodeTypeOf(child) === Node.ELEMENT_NODE) {
+		if (nodeTypeOf(child) === ELEMENT_NODE) {
 			return false;
 		}
 		if (
-			(nodeTypeOf(child) === Node.TEXT_NODE ||
-				nodeTypeOf(child) === Node.CDATA_SECTION_NODE) &&
+			(nodeTypeOf(child) === TEXT_NODE ||
+				nodeTypeOf(child) === CDATA_SECTION_NODE) &&
 				(child.nodeValue ?? "") !== ""
 		) {
 			return false;
@@ -1735,7 +1764,7 @@ function getLanguageParent(node: Element): Element | null {
 	if (parent === null) {
 		return null;
 	}
-	return isElement(parent) ? parent : getShadowHost(parent);
+	return isElement(parent) ? parent : states.getShadowHost(parent);
 }
 
 // The nearest lang attribute, climbing out of a shadow tree into its host
@@ -1810,7 +1839,7 @@ const AUTO_INPUT_TYPES = new Set([
 function compileDir(args: CSSTree.SelectorNode[]): Predicate {
 	const wanted = toASCIILowercase(getIdentifierArgument(args, "dir"));
 	return (element) =>
-		nodeTypeOf(element) === Node.ELEMENT_NODE &&
+		nodeTypeOf(element) === ELEMENT_NODE &&
 		getDirectionality(element) === wanted;
 }
 
@@ -1838,7 +1867,7 @@ export function getDirectionality(element: Element): "ltr" | "rtl" {
 
 // Includes `bdi`'s default.
 function getDeclaredDirection(element: Element): "ltr" | "rtl" | "auto" | null {
-	if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+	if (nodeTypeOf(element) !== ELEMENT_NODE) {
 		return null;
 	}
 	const html = namespaceOf(element) === HTML_NAMESPACE;
@@ -1879,8 +1908,8 @@ function getTextUnder(element: Element, all: boolean): string {
 		child = getNextSiblingNode(child)
 	) {
 		if (
-			nodeTypeOf(child) === Node.TEXT_NODE ||
-			nodeTypeOf(child) === Node.CDATA_SECTION_NODE
+			nodeTypeOf(child) === TEXT_NODE ||
+			nodeTypeOf(child) === CDATA_SECTION_NODE
 		) {
 			text += child.nodeValue ?? "";
 			continue;
@@ -1937,7 +1966,7 @@ function matchFrom(
 	if (featureless && !compound.host) {
 		return false;
 	}
-	if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+	if (nodeTypeOf(element) !== ELEMENT_NODE) {
 		return false;
 	}
 	for (const test of compound.tests) {
@@ -2011,7 +2040,7 @@ function getParentStep(
 	element: Element,
 	state: MatchState,
 ): {element: Element; featureless: boolean} | null {
-	if (state.shadow !== null && getShadowHost(state.shadow) === element) {
+	if (state.shadow !== null && states.getShadowHost(state.shadow) === element) {
 		return null;
 	}
 	const parent = getParentNode(element);
@@ -2025,7 +2054,7 @@ function getParentStep(
 	// the host is featureless. Only `:host` and its two functional forms can
 	// match it.
 	if (state.shadow !== null && parent === state.shadow) {
-		const host = getShadowHost(parent);
+		const host = states.getShadowHost(parent);
 		return host === null ? null : {element: host, featureless: true};
 	}
 	return null;
@@ -2044,7 +2073,7 @@ function hasMatch(
 	// Asked of the host from inside its shadow tree, :has() searches that
 	// tree, and the answer is not the one a light-tree rule would get.
 	const hostOfShadow =
-		state.shadow !== null && getShadowHost(state.shadow) === element;
+		state.shadow !== null && states.getShadowHost(state.shadow) === element;
 	const store = cacheable && !hostOfShadow ? state.hasResults : null;
 	let answers = store?.get(element);
 	const known = answers?.get(inner);
@@ -2072,7 +2101,7 @@ function findHasMatch(
 	// to.
 	const inside: MatchState = {...state, anchor: element};
 	const hostOfShadow =
-		state.shadow !== null && getShadowHost(state.shadow) === element;
+		state.shadow !== null && states.getShadowHost(state.shadow) === element;
 	for (const complex of inner) {
 		const selects = (node: Element): boolean =>
 			matchComplex(complex, node, inside, false);
diff --git a/src/internal/cssvalues.ts b/src/internal/cssvalues.ts
index d4283b90..513fa83b 100644
--- a/src/internal/cssvalues.ts
+++ b/src/internal/cssvalues.ts
@@ -2446,7 +2446,12 @@ export function withMarkerSeparator(marker: string): string {
 // A content value is a SEQUENCE of components (strings and functions).
 // Stripping quotes only when the whole value was one quoted string left
 // `"` in the rendered marker.
-export function unquoteContent(content: string): string {
+// A function's text goes through `evaluate`, which answers what it stands
+// for, or null to keep it as written.
+export function unquoteContent(
+	content: string,
+	evaluate?: (name: string, args: string) => string | null,
+): string {
 	let out = "";
 	let index = 0;
 
@@ -2481,7 +2486,9 @@ export function unquoteContent(content: string): string {
 					break;
 				}
 			}
-			out += content.slice(index, end);
+			const token = content.slice(index, end);
+			const call = /^([\w-]+)\(([\s\S]*)\)$/.exec(token);
+			out += (call && evaluate?.(call[1].toLowerCase(), call[2])) ?? token;
 			index = end;
 		}
 	}
@@ -4613,11 +4620,27 @@ function harvestRequiredKeys(
 // and :empty.
 const SIBLING_SELECTOR = /[+~]|:(?:nth-|first-|last-|only-|empty)/;
 
+// Every document reads the UA sheet's selectors again, so each selector
+// is read once and its reading shared. No caller changes a reading.
+const selectorReadings = new Map<string, SelectorReading>();
+
+export function readSelector(selector: string): SelectorReading {
+	let reading = selectorReadings.get(selector);
+	if (reading === undefined) {
+		reading = readSelectorText(selector);
+		if (selectorReadings.size > 4096) {
+			selectorReadings.clear();
+		}
+		selectorReadings.set(selector, reading);
+	}
+	return reading;
+}
+
 // A selector this parser cannot read weighs nothing. The matcher reads
 // a wider grammar and may still accept it, and a rule whose weight
 // cannot be counted should lose a tie. It anchors to no type and names
 // no keys.
-export function readSelector(selector: string): SelectorReading {
+function readSelectorText(selector: string): SelectorReading {
 	const reachesSiblings = SIBLING_SELECTOR.test(selector);
 	let failed = false;
 	let list: CSSTree.SelectorNode | null = null;
@@ -5756,12 +5779,6 @@ function cubicBezierEasing(
 	};
 }
 
-export interface CounterScope {
-	element: Element;
-	counters: {[counterName: string]: number};
-	parent?: CounterScope;
-}
-
 // Each identifier opens a pair. A counter written without a number
 // takes `fallback`: 0 for a reset, 1 for an increment.
 export function getCounterPairs(
@@ -5786,29 +5803,6 @@ export function getCounterPairs(
 	return pairs;
 }
 
-export function parseCounterReset(
-	scope: CounterScope,
-	counterReset: string,
-): void {
-	for (const [name, value] of getCounterPairs(counterReset, 0)) {
-		scope.counters[name] = value;
-	}
-}
-
-export function getCounterValueInScope(
-	scope: CounterScope | undefined,
-	counterName: string,
-): number {
-	let currentScope = scope;
-	while (currentScope) {
-		if (counterName in currentScope.counters) {
-			return currentScope.counters[counterName];
-		}
-		currentScope = currentScope.parent;
-	}
-	return 0;
-}
-
 // A bullet style names a glyph and ignores the value. Everything else is
 // the ordinal a list marker of the same style would show.
 export function formatCounterValue(value: number, style: string): string {
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index f214ccae..ff1c8ff2 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -10,8 +10,6 @@ import {
 } from "../generated/htmlidl.ts";
 import {
 	CanvasCellGridContext,
-	CanvasGradient,
-	CanvasPattern,
 	CanvasRenderingContext2D,
 	clearCanvasText,
 	createCellGridContext,
@@ -20,29 +18,11 @@ import {
 	getCanvasText,
 	ImageBitmap,
 	ImageData,
-	Path2D,
 	registerDrawable,
 	resetContextState,
 } from "./canvas.ts";
-import {
-	adoptStyleSheets,
-	type Cascade,
-	type CellSizeSetting,
-	CSSOM_INTERFACES,
-	getAdoptedStyleSheets,
-	getBoxModel,
-	getCellSize,
-	getComputedValue,
-	getImageCellSize,
-	getInlineStyle,
-	getStyleSheets,
-	getWhiteSpace,
-	pxFromCells,
-	styleAttributeChanged,
-	styleElementSheet,
-	styleShadowAttached,
-	UNIT_CELL,
-} from "./cssom.ts";
+import type * as CSSOM from "./cssom.ts";
+import type {Cascade} from "./cssom.ts";
 import {
 	closestSelector,
 	getDirectionality,
@@ -50,11 +30,19 @@ import {
 	selectAll,
 	selectFirst,
 	SelectorError,
+	setElementStates,
 } from "./cssselectors.ts";
 import * as CSSValues from "./cssvalues.ts";
-import {getEditingHost, installEditing} from "./editing.ts";
 import type {Exchange} from "./exchange.ts";
-import {CellContext, CellGrid, type Framebuffer} from "./framebuffer.ts";
+import {
+	CellContext,
+	CellGrid,
+	drawGrid,
+	type Framebuffer,
+	invalidate,
+	requestFrame,
+	scrollTo,
+} from "./framebuffer.ts";
 import {
 	getInterface,
 	getReflections,
@@ -74,12 +62,7 @@ import {
 	resolveImageURL,
 } from "./images.ts";
 import type {Layout} from "./layout.ts";
-import {linearizeMath} from "./mathml.ts";
-import {
-	addDocumentPolicy,
-	type ResourceLoader,
-	setRequestDestination,
-} from "./resources.ts";
+import type {ResourceLoader} from "./resources.ts";
 import {
 	_,
 	_maybe,
@@ -92,7 +75,6 @@ import {
 	isSealed,
 	objectOf,
 	ownerOf,
-	prepareClasses,
 	rememberObject,
 	seal,
 	type Slots,
@@ -111,28 +93,86 @@ import {
 } from "./text.ts";
 import {clearTimeout, queueMicrotask, setTimeout} from "./timers.ts";
 import {
-	type Constructor,
-	installInterfaces,
-	interfaceNameOf,
-	windowMember,
-} from "./webidl.ts";
-
-export const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
-export const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
-export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-export const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
-export const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
-const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+	type AttachedDocument,
+	ATTRIBUTE_NODE,
+	attributeOf,
+	CDATA_SECTION_NODE,
+	COMMENT_NODE,
+	containsOf,
+	DOCUMENT_FRAGMENT_NODE,
+	DOCUMENT_NODE,
+	DOCUMENT_TYPE_NODE,
+	ELEMENT_NODE,
+	ENTITY_NODE,
+	ENTITY_REFERENCE_NODE,
+	getAttachedDocument,
+	getAttributeByName,
+	getElementChildren,
+	getRoot,
+	hasAttributeOf,
+	HTML_NAMESPACE,
+	isElement,
+	isHTMLDocument,
+	isInclusiveAncestor,
+	localNameOf,
+	MATHML_NAMESPACE,
+	namespaceOf,
+	nextInTree,
+	nextSlotsInTree,
+	nodeTypeOf,
+	NOTATION_NODE,
+	ownerDocumentOf,
+	PROCESSING_INSTRUCTION_NODE,
+	SVG_NAMESPACE,
+	TEXT_NODE,
+	XLINK_NAMESPACE,
+	XML_NAMESPACE,
+	XMLNS_NAMESPACE,
+} from "./tree.ts";
+import {
+	type CellSizeSetting,
+	getCellSize,
+	getImageCellSize,
+	pxFromCells,
+	UNIT_CELL,
+} from "./units.ts";
+import {interfaceNameOf} from "./webidl.ts";
 
-const kEnsureUAShadowTree = Symbol("build a control's UA shadow tree");
+/**
+ * What the DOM asks of the CSSOM and the cascade: the style objects it
+ * hands out, the computed values it reads, and the changes it reports.
+ * cssom.ts gives them as it loads, so this module never imports it.
+ */
+type StyleHooks = Pick<
+	typeof CSSOM,
+	"adoptStyleSheets" |
+	"getAdoptedStyleSheets" |
+	"getBoxModel" |
+	"getComputedValue" |
+	"getInlineStyle" |
+	"getStyleSheets" |
+	"getWhiteSpace" |
+	"handleFocusChange" |
+	"handleMutations" |
+	"handleStateChange" |
+	"mediaQueryMatches" |
+	"styleAttributeChanged" |
+	"styleElementSheet" |
+	"styleShadowAttached"
+>;
+
+let cssom: StyleHooks;
+
+export function setStyleHooks(given: StyleHooks): void {
+	cssom = given;
+}
 
 // Safe to call more than once, and synchronous: the shadow tree exists
 // when this returns. A control that was removed and re-inserted keeps its
 // tree and only updates the state it missed.
 function ensureUAShadowTree(element: globalThis.Element): void {
-	(_(element) as unknown as Record<symbol, (() => void) | undefined>)[
-		kEnsureUAShadowTree
-	]?.();
+	(_(element) as unknown as Record<string, (() => void) | undefined>)
+		._ensureUAShadowTree?.();
 }
 
 // Built-in tags that get a UA shadow tree when they connect.
@@ -146,19 +186,6 @@ const UA_SHADOW_HOSTS = new Set([
 	"TEXTAREA",
 ]);
 
-const ELEMENT_NODE = 1;
-const ATTRIBUTE_NODE = 2;
-const TEXT_NODE = 3;
-const CDATA_SECTION_NODE = 4;
-const ENTITY_REFERENCE_NODE = 5;
-const ENTITY_NODE = 6;
-const PROCESSING_INSTRUCTION_NODE = 7;
-const COMMENT_NODE = 8;
-const DOCUMENT_NODE = 9;
-const DOCUMENT_TYPE_NODE = 10;
-const DOCUMENT_FRAGMENT_NODE = 11;
-const NOTATION_NODE = 12;
-
 // Walks the child links directly instead of running a selector query.
 // This runs on every insertion, so ordinary markup should cost no more
 // than one tag comparison per element.
@@ -180,8 +207,6 @@ function ensureUAShadowTrees(root: globalThis.Node): void {
 	}
 }
 
-const kUASelection = Symbol("a control's selection, whatever its type");
-
 /**
  * A text control's selection record, without the type check authors get.
  * Per spec selectionStart is null on a number input, but the UA still needs
@@ -191,13 +216,11 @@ export function getSelectionRecord(
 	control: globalThis.Element,
 ): {start: number; end: number; direction: string} | null {
 	const slots = _(control) as unknown as {
-		[kUASelection]?: () => ReturnType<typeof getSelectionRecord>;
+		_uaSelection?: () => ReturnType<typeof getSelectionRecord>;
 	};
-	return slots[kUASelection]?.() ?? null;
+	return slots._uaSelection?.() ?? null;
 }
 
-const kSetUASelection = Symbol("move a control's selection, whatever its type");
-
 /** Set a text control's selection, without the type check authors get. */
 export function setUASelection(
 	control: globalThis.Element,
@@ -207,17 +230,15 @@ export function setUASelection(
 ): void {
 	(
 		_(control) as unknown as {
-			[kSetUASelection](
+			_setUASelection(
 				start: number,
 				end: number,
 				direction?: string,
 			): void;
 		}
-	)[kSetUASelection]!(start, end, direction);
+	)._setUASelection!(start, end, direction);
 }
 
-const kSyncUAShadowTree = Symbol("bring a control's UA tree back into step");
-
 // The pseudo-classes that read a control's state rather than its
 // attributes, each with its bit in a snapshot of what an element matches.
 // :autofill and :blank match nothing here, so they never change.
@@ -285,9 +306,8 @@ function reportControlStates(element: Element): void {
 // selected. Its shadow tree redraws, and the rules that read that state
 // are told, since no mutation record says so.
 function syncUAShadowTree(element: Element): void {
-	(_(element) as unknown as Record<symbol, (() => void) | undefined>)[
-		kSyncUAShadowTree
-	]?.();
+	(_(element) as unknown as Record<string, (() => void) | undefined>)
+		._syncUAShadowTree?.();
 	reportControlStates(element);
 	// A form and every fieldset around the control are :valid or :invalid
 	// by what they hold, so they are told as well.
@@ -329,9 +349,6 @@ export function takesTextCursor(
 	return isTextControl(element) && !CURSORLESS_INPUT_TYPES.has(element.type!);
 }
 
-const kUAValueText =
-	Symbol("the text node a control's editable value lives in");
-
 /**
  * The text node holding a form control's value inside its UA shadow tree,
  * or null before the tree is built. The editable text lives at
@@ -342,10 +359,8 @@ export function getTextControlValueText(
 	textControl: globalThis.Element,
 ): globalThis.Text | null {
 	return (
-		(_(textControl) as unknown as Record<
-			symbol,
-			globalThis.Text | null | undefined
-		>)[kUAValueText] ?? null
+		(_(textControl) as unknown as {_uaValueText?: globalThis.Text | null})
+			._uaValueText ?? null
 	);
 }
 
@@ -418,8 +433,6 @@ export function placeTextControlCaret(
 	return {textControl: target, offset};
 }
 
-const kUASelectionRange = Symbol("what an element's own selection covers");
-
 /**
  * The focused text control's selection over this text node, or null. Per
  * spec a control's selection is invisible to getSelection(), so this is
@@ -438,7 +451,7 @@ export function getTextControlSelectionRange(
 	const range =
 		_(
 			(active as HTMLInputElement | HTMLTextAreaElement),
-		)[kUASelectionRange]?.() ??
+		)._uaSelectionRange?.() ??
 		null;
 	if (!range || range.startContainer !== textNode) {
 		return null;
@@ -583,8 +596,6 @@ function moveTextControlSelection(
 	return {value, start: clamped, end: clamped, direction: "none"};
 }
 
-const kUAValue = Symbol("a text control's value, beneath the IDL attribute");
-
 // Handles Backspace, Delete, the horizontal arrows and the readline chords,
 // grapheme-aware. Returns null for any other key. Enter, vertical motion
 // and Home/End are left to the control, which knows where its lines end,
@@ -596,7 +607,7 @@ function applySharedTextControlEdit(
 	ctrlKey: boolean,
 	altKey: boolean,
 ): TextControlEditResult | null {
-	const value = _(textControl)[kUAValue];
+	const value = _(textControl)._uaValue;
 	const {start, end, direction} = getSelectionRecord(textControl)!;
 	const backward = direction === "backward";
 	const caret = backward ? start : end;
@@ -782,7 +793,7 @@ function printableTextControlEdit(
 	textControl: HTMLInputElement | HTMLTextAreaElement,
 	text: string,
 ): TextControlEditResult {
-	const value = _(textControl)[kUAValue];
+	const value = _(textControl)._uaValue;
 	const {start, end} = getSelectionRecord(textControl)!;
 	return createCollapsedEdit(
 		value.slice(0, start) + text + value.slice(end),
@@ -824,8 +835,6 @@ function createCollapsedEdit(
 	return {value, start: clamped, end: clamped, direction: "none"};
 }
 
-const kSetUAValue = Symbol("write a text control's value, as a user edit does");
-
 // Fires input when the value actually changed and select when the user
 // moved the selection. Writes to the control's value directly, never
 // through the value IDL setter. In a browser a user edit changes the value
@@ -886,7 +895,7 @@ function applyTextControlEdit(
 	kind: TextControlEditKind = {inputType: "", asked: true},
 ): void {
 	const textControlSlots = _(textControl);
-	const value = textControlSlots[kUAValue];
+	const value = textControlSlots._uaValue;
 	const {start, end, direction} = getSelectionRecord(textControl)!;
 	if (result.value !== value) {
 		const init = {
@@ -907,8 +916,8 @@ function applyTextControlEdit(
 			return;
 		}
 		editedSinceChange.add(textControl);
-		textControlSlots[kSetUAValue]!(result.value);
-		textControlSlots[kSetUASelection]!(
+		textControlSlots._setUAValue!(result.value);
+		textControlSlots._setUASelection!(
 			result.start,
 			result.end,
 			result.direction,
@@ -922,7 +931,7 @@ function applyTextControlEdit(
 		result.end !== end ||
 		(result.start !== result.end && result.direction !== direction)
 	) {
-		textControlSlots[kSetUASelection]!(
+		textControlSlots._setUASelection!(
 			result.start,
 			result.end,
 			result.direction,
@@ -1104,169 +1113,7 @@ function replaceTextRange(
 	}
 }
 
-// WebIDL §3.14.1: the legacy code of each name that had one, 0 for the
-// rest.
-const DOM_EXCEPTION_CODES = new Map<string, number>([
-	["IndexSizeError", 1],
-	["DOMStringSizeError", 2],
-	["HierarchyRequestError", 3],
-	["WrongDocumentError", 4],
-	["InvalidCharacterError", 5],
-	["NoDataAllowedError", 6],
-	["NoModificationAllowedError", 7],
-	["NotFoundError", 8],
-	["NotSupportedError", 9],
-	["InUseAttributeError", 10],
-	["InvalidStateError", 11],
-	["SyntaxError", 12],
-	["InvalidModificationError", 13],
-	["NamespaceError", 14],
-	["InvalidAccessError", 15],
-	["ValidationError", 16],
-	["TypeMismatchError", 17],
-	["SecurityError", 18],
-	["NetworkError", 19],
-	["AbortError", 20],
-	["URLMismatchError", 21],
-	["QuotaExceededError", 22],
-	["TimeoutError", 23],
-	["InvalidNodeTypeError", 24],
-	["DataCloneError", 25],
-]);
-
-export interface SealedDOMExceptionSlots {
-	exceptionName: string;
-	exceptionMessage: string;
-}
-
-export interface SealedDOMException {
-	readonly [internals]: SealedDOMExceptionSlots;
-}
-
-/**
- * WebIDL's DOMException, for a runtime that has none. Its prototype's is
- * Error's, as WebIDL says.
- */
-export class SealedDOMException
-	extends Error
-	implements globalThis.DOMException {
-	static readonly INDEX_SIZE_ERR = 1;
-	static readonly DOMSTRING_SIZE_ERR = 2;
-	static readonly HIERARCHY_REQUEST_ERR = 3;
-	static readonly WRONG_DOCUMENT_ERR = 4;
-	static readonly INVALID_CHARACTER_ERR = 5;
-	static readonly NO_DATA_ALLOWED_ERR = 6;
-	static readonly NO_MODIFICATION_ALLOWED_ERR = 7;
-	static readonly NOT_FOUND_ERR = 8;
-	static readonly NOT_SUPPORTED_ERR = 9;
-	static readonly INUSE_ATTRIBUTE_ERR = 10;
-	static readonly INVALID_STATE_ERR = 11;
-	static readonly SYNTAX_ERR = 12;
-	static readonly INVALID_MODIFICATION_ERR = 13;
-	static readonly NAMESPACE_ERR = 14;
-	static readonly INVALID_ACCESS_ERR = 15;
-	static readonly VALIDATION_ERR = 16;
-	static readonly TYPE_MISMATCH_ERR = 17;
-	static readonly SECURITY_ERR = 18;
-	static readonly NETWORK_ERR = 19;
-	static readonly ABORT_ERR = 20;
-	static readonly URL_MISMATCH_ERR = 21;
-	static readonly QUOTA_EXCEEDED_ERR = 22;
-	static readonly TIMEOUT_ERR = 23;
-	static readonly INVALID_NODE_TYPE_ERR = 24;
-	static readonly DATA_CLONE_ERR = 25;
-
-	declare readonly INDEX_SIZE_ERR: 1;
-	declare readonly DOMSTRING_SIZE_ERR: 2;
-	declare readonly HIERARCHY_REQUEST_ERR: 3;
-	declare readonly WRONG_DOCUMENT_ERR: 4;
-	declare readonly INVALID_CHARACTER_ERR: 5;
-	declare readonly NO_DATA_ALLOWED_ERR: 6;
-	declare readonly NO_MODIFICATION_ALLOWED_ERR: 7;
-	declare readonly NOT_FOUND_ERR: 8;
-	declare readonly NOT_SUPPORTED_ERR: 9;
-	declare readonly INUSE_ATTRIBUTE_ERR: 10;
-	declare readonly INVALID_STATE_ERR: 11;
-	declare readonly SYNTAX_ERR: 12;
-	declare readonly INVALID_MODIFICATION_ERR: 13;
-	declare readonly NAMESPACE_ERR: 14;
-	declare readonly INVALID_ACCESS_ERR: 15;
-	declare readonly VALIDATION_ERR: 16;
-	declare readonly TYPE_MISMATCH_ERR: 17;
-	declare readonly SECURITY_ERR: 18;
-	declare readonly NETWORK_ERR: 19;
-	declare readonly ABORT_ERR: 20;
-	declare readonly URL_MISMATCH_ERR: 21;
-	declare readonly QUOTA_EXCEEDED_ERR: 22;
-	declare readonly TIMEOUT_ERR: 23;
-	declare readonly INVALID_NODE_TYPE_ERR: 24;
-	declare readonly DATA_CLONE_ERR: 25;
-
-	constructor(message = "", name = "Error") {
-		super();
-		seal(this, new.target, SealedDOMException);
-		const slots = _(this);
-		slots.exceptionName = String(name);
-		slots.exceptionMessage = String(message);
-	}
-
-	override get name(): string {
-		return _(this).exceptionName;
-	}
-
-	override get message(): string {
-		return _(this).exceptionMessage;
-	}
-
-	get code(): number {
-		return DOM_EXCEPTION_CODES.get(_(this).exceptionName) ?? 0;
-	}
-}
-
-declareSealedRoot(SealedDOMException);
-
-for (const [index, name] of [
-	"INDEX_SIZE_ERR",
-	"DOMSTRING_SIZE_ERR",
-	"HIERARCHY_REQUEST_ERR",
-	"WRONG_DOCUMENT_ERR",
-	"INVALID_CHARACTER_ERR",
-	"NO_DATA_ALLOWED_ERR",
-	"NO_MODIFICATION_ALLOWED_ERR",
-	"NOT_FOUND_ERR",
-	"NOT_SUPPORTED_ERR",
-	"INUSE_ATTRIBUTE_ERR",
-	"INVALID_STATE_ERR",
-	"SYNTAX_ERR",
-	"INVALID_MODIFICATION_ERR",
-	"NAMESPACE_ERR",
-	"INVALID_ACCESS_ERR",
-	"VALIDATION_ERR",
-	"TYPE_MISMATCH_ERR",
-	"SECURITY_ERR",
-	"NETWORK_ERR",
-	"ABORT_ERR",
-	"URL_MISMATCH_ERR",
-	"QUOTA_EXCEEDED_ERR",
-	"TIMEOUT_ERR",
-	"INVALID_NODE_TYPE_ERR",
-	"DATA_CLONE_ERR",
-].entries()) {
-	Object.defineProperty(SealedDOMException.prototype, name, {
-		value: index + 1,
-		enumerable: true,
-	});
-}
-
-Object.defineProperty(SealedDOMException.prototype, Symbol.toStringTag, {
-	value: "DOMException",
-	configurable: true,
-});
-
-export const DOMException: typeof globalThis.DOMException =
-	(globalThis as {DOMException?: typeof globalThis.DOMException})
-		.DOMException ??
-	(SealedDOMException as unknown as typeof globalThis.DOMException);
+export const DOMException = globalThis.DOMException;
 
 export type DOMException = globalThis.DOMException;
 
@@ -1451,8 +1298,6 @@ function toDictionary<T extends object>(value: unknown, what: string): T {
 	return value as T;
 }
 
-const kState = Symbol("state");
-
 // One accessor shared by every event and installed as an own property on
 // each. The interface declares isTrusted unforgeable, so it cannot live on
 // the prototype or be redefined.
@@ -1473,9 +1318,7 @@ const isTrustedProperty: PropertyDescriptor = {
 // is in. It also marks the events the engine fires itself.
 let internalConstruction = false;
 
-const RuntimeEvent: typeof globalThis.Event | undefined = (
-	globalThis as {Event?: typeof globalThis.Event}
-).Event;
+const RuntimeEvent = globalThis.Event;
 
 function probeRuntimeEvent(
 	Runtime: typeof globalThis.Event,
@@ -1501,7 +1344,6 @@ function probeRuntimeEvent(
 // Deno's Event constructor writes a toStringTag onto each event, which a
 // read-only one on a subclass's prototype refuses.
 const runtimeTagsEvents =
-	RuntimeEvent !== undefined &&
 	probeRuntimeEvent(RuntimeEvent, false) === null &&
 	probeRuntimeEvent(RuntimeEvent, true) !== null;
 
@@ -1532,9 +1374,7 @@ const constructsRuntimeEvents =
 	runtimeEventSupport === "construct" || runtimeEventSupport === "untrusted";
 
 function runtimeEventMember(name: string): PropertyDescriptor | undefined {
-	return RuntimeEvent === undefined
-		? undefined
-		: Object.getOwnPropertyDescriptor(RuntimeEvent.prototype, name);
+	return Object.getOwnPropertyDescriptor(RuntimeEvent.prototype, name);
 }
 
 const runtimeEventPhase = runtimeEventMember("eventPhase")?.get;
@@ -1556,7 +1396,7 @@ const EventBase = (
 	constructsRuntimeEvents ? RuntimeEvent : function EventBase(): void {}
 ) as unknown as new (type: string, init: globalThis.EventInit) => object;
 
-if (RuntimeEvent !== undefined && !constructsRuntimeEvents) {
+if (!constructsRuntimeEvents) {
 	EventBase.prototype = Object.create(RuntimeEvent.prototype) as object;
 }
 
@@ -1607,7 +1447,7 @@ function makeEventTagsWritable(type: object): void {
 	writableTagTypes.add(type);
 	for (
 		let prototype = (type as {prototype: object}).prototype;
-		prototype !== RuntimeEvent!.prototype;
+		prototype !== RuntimeEvent.prototype;
 		prototype = Object.getPrototypeOf(prototype) as object
 	) {
 		const tag = Object.getOwnPropertyDescriptor(prototype, Symbol.toStringTag);
@@ -4399,8 +4239,6 @@ interface Listener {
 	hoverCount?: HoverListenerCount;
 }
 
-const kGetTheParent = Symbol("get the parent");
-
 // Every target starts on this one empty list, frozen since nothing may add
 // to it: most nodes are never listened to, and a list of their own would
 // be one more allocation each.
@@ -4409,21 +4247,15 @@ const NO_LISTENERS = Object.freeze([]) as unknown as Listener[];
 const EventTargetBase = function EventTargetBase(): void {} as unknown as
 	new () => object;
 
-const RuntimeEventTarget = (
-	globalThis as {EventTarget?: typeof globalThis.EventTarget}
-).EventTarget;
-
-if (RuntimeEventTarget !== undefined) {
-	EventTargetBase.prototype =
-		Object.create(RuntimeEventTarget.prototype) as object;
-}
+EventTargetBase.prototype =
+	Object.create(globalThis.EventTarget.prototype) as object;
 
 export interface EventTargetSlots {
 	listeners: Listener[];
 
 	/** Null until EventTarget target is given an event handler. Most never are. */
 	handlers: Map<string, EventHandlerRecord> | null;
-	[kGetTheParent]: Step<EventTarget[typeof kGetTheParent]>;
+	_getTheParent: Step<EventTarget["_getTheParent"]>;
 }
 
 export interface EventTarget {
@@ -4531,7 +4363,7 @@ export class EventTarget
 	}
 
 	// A bare event target ends the path. A node returns its parent.
-	[kGetTheParent](_event: Event): EventTarget | null {
+	_getTheParent(_event: Event): EventTarget | null {
 		return null;
 	}
 }
@@ -4636,7 +4468,7 @@ export class SealedAbortSignal extends EventTarget {
 }
 
 /** Whether `value` is one of this DOM's AbortSignals. */
-export function isAbortSignal(value: unknown): value is SealedAbortSignal {
+function isAbortSignal(value: unknown): value is SealedAbortSignal {
 	return (
 		typeof value === "object" &&
 		value !== null &&
@@ -4645,11 +4477,6 @@ export function isAbortSignal(value: unknown): value is SealedAbortSignal {
 	);
 }
 
-const RuntimeAbortController:
-	typeof globalThis.AbortController | undefined = globalThis.AbortController;
-const RuntimeAbortSignal: typeof globalThis.AbortSignal | undefined =
-	globalThis.AbortSignal;
-
 const runtimeSignalFollowers = new WeakMap<
 	globalThis.AbortSignal,
 	SealedAbortSignal
@@ -4677,7 +4504,7 @@ function followRuntimeSignal(
 }
 
 /** Runs `algorithm` when `signal` aborts, as the DOM's specs do. */
-export function addAbortAlgorithm(
+function addAbortAlgorithm(
 	signal: SealedAbortSignal,
 	algorithm: () => void,
 ): void {
@@ -4759,15 +4586,11 @@ Object.defineProperty(SealedAbortController.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-export const AbortController: typeof globalThis.AbortController =
-	RuntimeAbortController ??
-	(SealedAbortController as unknown as typeof globalThis.AbortController);
+export const AbortController = globalThis.AbortController;
 
 export type AbortController = globalThis.AbortController;
 
-export const AbortSignal: typeof globalThis.AbortSignal =
-	RuntimeAbortSignal ??
-	(SealedAbortSignal as unknown as typeof globalThis.AbortSignal);
+export const AbortSignal = globalThis.AbortSignal;
 
 export type AbortSignal = globalThis.AbortSignal;
 
@@ -4802,9 +4625,7 @@ function flattenMore(
 	if (given !== undefined) {
 		if (isAbortSignal(given)) {
 			signal = given;
-		} else if (
-			RuntimeAbortSignal !== undefined && given instanceof RuntimeAbortSignal
-		) {
+		} else if (given instanceof AbortSignal) {
 			signal = followRuntimeSignal(given);
 		} else {
 			throw new TypeError("A listener's signal must be an AbortSignal");
@@ -5298,7 +5119,7 @@ function dispatchFromOutside(
 	const state = isSealed(event) ? _(event).state : undefined;
 	if (state === undefined) {
 		const given: unknown = event;
-		if (RuntimeEvent !== undefined && given instanceof RuntimeEvent) {
+		if (given instanceof RuntimeEvent) {
 			return dispatchRuntimeEvent(target, given, trusted);
 		}
 		throw new TypeError("dispatchEvent needs an Event");
@@ -5484,7 +5305,7 @@ function dispatch(target: EventTarget, event: Event, trusted = true): boolean {
 		if (isActivationEvent && hasActivationBehavior(eventTarget)) {
 			activationTarget = eventTarget;
 		}
-		let parent = _(eventTarget)[kGetTheParent](event);
+		let parent = _(eventTarget)._getTheParent(event);
 		while (parent !== null) {
 			if (slottable !== null) {
 				slottable = null;
@@ -5536,7 +5357,7 @@ function dispatch(target: EventTarget, event: Event, trusted = true): boolean {
 				);
 			}
 			if (parent !== null) {
-				parent = _(parent)[kGetTheParent](event);
+				parent = _(parent)._getTheParent(event);
 			}
 			slotInClosedTree = false;
 		}
@@ -5924,17 +5745,6 @@ function innerInvoke(
 	return found;
 }
 
-/** The terminal behind a document, while it is attached to one. */
-export function getDocumentExchange(
-	document: globalThis.Document | null,
-): Exchange | null {
-	if (document === null) {
-		return null;
-	}
-	const attached = getAttachedDocument(document as unknown as Document);
-	return attached === undefined ? null : _(attached).extra.exchange;
-}
-
 function getSessionExchange(target: EventTarget): EventTarget | null {
 	const document = getEventTargetDocument(target);
 	if (document === null) {
@@ -6011,7 +5821,10 @@ function callListener(
 // reporting mode" has it, rather than firing another without end.
 const reportingWindows = new WeakSet<object>();
 
-function reportError(error: unknown, document: Document | null = null): void {
+export function reportError(
+	error: unknown,
+	document: Document | null = null,
+): void {
 	const view = document === null ? null : _(document).extra.defaultView;
 	if (view !== null && !reportingWindows.has(view)) {
 		const event = constructInternal(() =>
@@ -6062,28 +5875,24 @@ function getEventTargetDocument(target: EventTarget): Document | null {
 	return null;
 }
 
-const kSync = Symbol("resynchronize own properties");
-const kChildrenChangedSteps = Symbol("children changed steps");
-const kAttributeSync = Symbol("resynchronize after an attribute change");
-
 interface LiveCollection {
-	[kSync](): void;
-	[kChildrenChangedSteps](
+	_sync(): void;
+	_childrenChangedSteps(
 		point: Node,
 		changed: readonly Node[] | null,
 		added: boolean,
 	): void;
-	[kAttributeSync](element: Element, localName: string): void;
+	_attributeSync(element: Element, localName: string): void;
 }
 
 // A collection's indexed and named properties are own properties rather
 // than proxy traps, so they are observable without reading the
 // collection. So once a collection has been read, every relevant change
 // must notify it, and each collection updates as cheaply as it can. A
-// collection listing what one node contains registers on that node under
-// kLiveLists. A collection whose members can be anywhere in the document
-// (a form's controls, for example) registers on the document under
-// kDocumentWideLists.
+// collection listing what one node contains registers in that node's
+// liveLists. A collection whose members can be anywhere in the document
+// (a form's controls, for example) registers in the document's
+// documentWideLists.
 
 // A collection stays registered for its owner's lifetime, so this only
 // grows. A change in a document that never registered a collection skips
@@ -6141,14 +5950,14 @@ function runChildrenChangedSteps(
 				continue;
 			}
 			for (const collection of held) {
-				_(collection)[kChildrenChangedSteps](point, changed, added);
+				_(collection)._childrenChangedSteps(point, changed, added);
 			}
 		}
 	}
 	const wide = _(pointSlots.document).extra.documentWideLists;
 	if (wide !== null) {
 		for (const collection of wide) {
-			_(collection)[kChildrenChangedSteps](point, changed, added);
+			_(collection)._childrenChangedSteps(point, changed, added);
 		}
 	}
 }
@@ -6161,16 +5970,16 @@ function syncAttributeCollections(element: Element, localName: string): void {
 	const elementSlots = _(element);
 	const map = elementSlots.attributesMap;
 	if (map !== null) {
-		_(map)[kSync]();
+		_(map)._sync();
 	}
 	const classList = elementSlots.classList;
 	if (classList !== null) {
-		_(classList)[kSync]();
+		_(classList)._sync();
 	}
 	const lists = elementSlots.tokenLists;
 	if (lists !== null) {
 		for (const list of lists.values()) {
-			_(list)[kSync]();
+			_(list)._sync();
 		}
 	}
 	if (heldListDocuments.has(elementSlots.document)) {
@@ -6182,14 +5991,14 @@ function syncAttributeCollections(element: Element, localName: string): void {
 				continue;
 			}
 			for (const collection of held) {
-				_(collection)[kAttributeSync](element, localName);
+				_(collection)._attributeSync(element, localName);
 			}
 		}
 	}
 	const wide = _(elementSlots.document).extra.documentWideLists;
 	if (wide !== null) {
 		for (const collection of wide) {
-			_(collection)[kAttributeSync](element, localName);
+			_(collection)._attributeSync(element, localName);
 		}
 	}
 }
@@ -6204,12 +6013,6 @@ const DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
 /** A stable per-node serial, so disconnected nodes order consistently. */
 let nodeSerial = 0;
 
-const kInsertionSteps = Symbol("insertion steps");
-const kRemovingSteps = Symbol("removing steps");
-const kAdoptingSteps = Symbol("adopting steps");
-const kCloningSteps = Symbol("cloning steps");
-const kCloneSingle = Symbol("clone a single node");
-
 /** The node-type constants, installed on the prototype below. */
 // The slots a class below Node, Element or CharacterData declares of its
 // own, kept apart so that every record of the family has one shape.
@@ -6245,11 +6048,11 @@ export interface NodeSlots extends EventTargetSlots {
 	// What nodeType reports, read here by the engine's hot paths.
 	nodeType: number;
 	registeredObservers: RegisteredObserver[] | null;
-	[kInsertionSteps]: Step<Node[typeof kInsertionSteps]>;
-	[kRemovingSteps]: Step<Node[typeof kRemovingSteps]>;
-	[kAdoptingSteps]: Step<Node[typeof kAdoptingSteps]>;
-	[kCloningSteps]: Step<Node[typeof kCloningSteps]>;
-	[kCloneSingle]: Step<Node[typeof kCloneSingle]>;
+	_insertionSteps: Step<Node["_insertionSteps"]>;
+	_removingSteps: Step<Node["_removingSteps"]>;
+	_adoptingSteps: Step<Node["_adoptingSteps"]>;
+	_cloningSteps: Step<Node["_cloningSteps"]>;
+	_cloneSingle: Step<Node["_cloneSingle"]>;
 	children: HTMLCollection | null;
 	// Set on the first collection a node is asked for by kind and name.
 	collectionCaches?: Map<string, HTMLCollection>;
@@ -6641,25 +6444,22 @@ export class Node extends EventTarget implements globalThis.Node {
 
 	// An assigned slottable overrides this to return its slot, where the
 	// composed tree continues.
-	override [kGetTheParent](
-		this: Slots<Node>,
-		_event: Event,
-	): EventTarget | null {
+	override _getTheParent(this: Slots<Node>, _event: Event): EventTarget | null {
 		return objectOf(this.parent);
 	}
 
 	// The spec's per-node steps. Subclasses override them; the algorithms
 	// call them.
 
-	[kInsertionSteps](): void {}
+	_insertionSteps(): void {}
 
-	[kRemovingSteps](_oldParent: Node): void {}
+	_removingSteps(_oldParent: Node): void {}
 
-	[kAdoptingSteps](_oldDocument: Document): void {}
+	_adoptingSteps(_oldDocument: Document): void {}
 
-	[kCloningSteps](_copy: Node, _document: Document, _deep: boolean): void {}
+	_cloningSteps(_copy: Node, _document: Document, _deep: boolean): void {}
 
-	[kCloneSingle](_document: Document): Node {
+	_cloneSingle(_document: Document): Node {
 		throw domError("NotSupportedError", "That node cannot be cloned");
 	}
 }
@@ -6695,21 +6495,6 @@ Object.defineProperty(Node.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-export function getRoot(node: Node): Node {
-	return _(node).treeRoot;
-}
-
-function isInclusiveAncestor(ancestor: Node, node: Node): boolean {
-	let current: Node | null = node;
-	while (current !== null) {
-		if (current === ancestor) {
-			return true;
-		}
-		current = objectOf(_(current).parent);
-	}
-	return false;
-}
-
 function isHostIncludingInclusiveAncestor(ancestor: Node, node: Node): boolean {
 	let root = node;
 	for (
@@ -6788,57 +6573,6 @@ function *shadowIncludingInclusiveDescendantSlots(
 	}
 }
 
-/** The next node in tree order, or null once the walk leaves the root. */
-export function nextInTree(node: Node, root: Node): Node | null {
-	const nodeSlots = slotsOf(node);
-	if (nodeSlots.firstChild !== null) {
-		return rememberObject(nodeSlots.firstChild);
-	}
-	// The root is compared, not looked up, so a walk that calls this for
-	// every node keeps the node it is on in the lookup cache.
-	let current: Slots<Node> | null = nodeSlots;
-	while (current !== null && objectOf(current) !== root) {
-		if (current.next !== null) {
-			return rememberObject(current.next);
-		}
-		current = current.parent;
-	}
-	return null;
-}
-
-function nextSlotsInTree(
-	node: Slots<Node>,
-	root: Slots<Node>,
-): Slots<Node> | null {
-	if (node.firstChild !== null) {
-		return node.firstChild;
-	}
-	let current: Slots<Node> | null = node;
-	while (current !== null && current !== root) {
-		if (current.next !== null) {
-			return current.next;
-		}
-		current = current.parent;
-	}
-	return null;
-}
-
-export function getParentNode(node: Node): Node | null {
-	return objectOf(_(node).parent);
-}
-
-export function getFirstChildNode(node: Node): Node | null {
-	return objectOf(_(node).firstChild);
-}
-
-export function getNextSiblingNode(node: Node): Node | null {
-	return objectOf(_(node).next);
-}
-
-export function getPreviousSiblingNode(node: Node): Node | null {
-	return objectOf(_(node).previous);
-}
-
 function *inclusiveDescendants(node: Node): Generator<Node> {
 	const root = slotsOf(node);
 	let current: Slots<Node> | null = root;
@@ -7288,7 +7022,7 @@ function insertNode(
 			)
 		) {
 			descendantSlots.connected = connected;
-			descendantSlots[kInsertionSteps]();
+			descendantSlots._insertionSteps();
 			if (!connected) {
 				continue;
 			}
@@ -7570,7 +7304,7 @@ function removeNode(node: Node, suppressObservers = false): void {
 					: nodeTypeOf(parent) === ELEMENT_NODE ? (parent as Element) : null;
 				const attached = getAttachedDocument(document);
 				if (left !== null && attached !== undefined) {
-					_(attached).extra.cascade.handleFocusChange(left);
+					cssom.handleFocusChange(_(attached).extra.cascade, left);
 				}
 				break;
 			}
@@ -7582,7 +7316,7 @@ function removeNode(node: Node, suppressObservers = false): void {
 	const parentWasConnected = _(parent).connected;
 	for (const descendant of shadowIncludingInclusiveDescendants(node)) {
 		_(descendant).connected = false;
-		_(descendant)[kRemovingSteps](parent);
+		_(descendant)._removingSteps(parent);
 		if (
 			parentWasConnected &&
 			nodeTypeOf(descendant) === ELEMENT_NODE &&
@@ -7631,7 +7365,7 @@ function adoptNode(node: Node, document: Document): void {
 				document,
 			]);
 		}
-		_(descendant)[kAdoptingSteps](oldDocument);
+		_(descendant)._adoptingSteps(oldDocument);
 	}
 }
 
@@ -8250,12 +7984,6 @@ function queueTreeMutationRecord(
 	);
 }
 
-const kMembersMoved = Symbol("members moved");
-
-const kListMembers = Symbol("listMembers");
-const kListNames = Symbol("listNames");
-const kChangedMembers = Symbol("changedMembers");
-
 const anyAttribute = Symbol("any attribute");
 
 // Copies an internal base's methods onto an interface's prototype, where
@@ -8295,17 +8023,17 @@ interface LiveListSlots {
 	documentWide: boolean;
 	watched: string | symbol | null;
 	names: string[];
-	[kListMembers](): Node[];
-	[kListNames](items: Node[]): Map<string, Node> | null;
-	[kChangedMembers](changed: readonly Node[]): Node[] | null;
-	[kMembersMoved](): void;
-	[kSync](): void;
-	[kChildrenChangedSteps](
+	_listMembers(): Node[];
+	_listNames(items: Node[]): Map<string, Node> | null;
+	_changedMembers(changed: readonly Node[]): Node[] | null;
+	_membersMoved(): void;
+	_sync(): void;
+	_childrenChangedSteps(
 		point: Node,
 		changed: readonly Node[] | null,
 		added: boolean,
 	): void;
-	[kAttributeSync](element: Element, localName: string): void;
+	_attributeSync(element: Element, localName: string): void;
 }
 
 interface LiveList {
@@ -8316,16 +8044,16 @@ interface LiveList {
 // where a page would see it: shareMethods() copies its methods onto each
 // list interface.
 abstract class LiveList implements LiveCollection {
-	abstract [kListMembers](): Node[];
+	abstract _listMembers(): Node[];
 
-	[kListNames](_items: Node[]): Map<string, Node> | null {
+	_listNames(_items: Node[]): Map<string, Node> | null {
 		return null;
 	}
 
 	// The members the changed nodes carry, if the collection can determine
 	// that from those nodes alone and knows its named properties did not
 	// move. Null if the list has to be recomputed to find out.
-	[kChangedMembers](
+	_changedMembers(
 		this: Slots<LiveList>,
 		changed: readonly Node[],
 	): Node[] | null {
@@ -8344,9 +8072,9 @@ abstract class LiveList implements LiveCollection {
 
 	// The list cannot tell its members moved, because a splice moves them
 	// within the one array the collection holds.
-	[kMembersMoved](): void {}
+	_membersMoved(): void {}
 
-	[kSync](this: Slots<LiveList>): void {
+	_sync(this: Slots<LiveList>): void {
 		const slots = this;
 		if (slots.registered === null) {
 			return;
@@ -8367,7 +8095,7 @@ abstract class LiveList implements LiveCollection {
 	// except for a document-wide list, which is dropped and recomputed on the
 	// next read, because a document sees far more changes than reads of such
 	// a list.
-	[kChildrenChangedSteps](
+	_childrenChangedSteps(
 		this: Slots<LiveList>,
 		point: Node,
 		changed: readonly Node[] | null,
@@ -8386,7 +8114,7 @@ abstract class LiveList implements LiveCollection {
 				return;
 			}
 			if (changed !== null) {
-				const members = slots[kChangedMembers](changed);
+				const members = slots._changedMembers(changed);
 				if (
 					members !== null &&
 					splice(ownerOf(this), point, changed, members, added)
@@ -8399,7 +8127,7 @@ abstract class LiveList implements LiveCollection {
 	}
 
 	// A list that reads none of the element's attributes is unaffected.
-	[kAttributeSync](
+	_attributeSync(
 		this: Slots<LiveList>,
 		_element: Element,
 		localName: string,
@@ -8407,7 +8135,7 @@ abstract class LiveList implements LiveCollection {
 		const slots = this;
 		const watched = slots.watched;
 		if (watched === localName || watched === anyAttribute) {
-			slots[kSync]();
+			slots._sync();
 		}
 	}
 }
@@ -8449,14 +8177,14 @@ function dropList(list: LiveList): void {
 		return;
 	}
 	listSlots.exact = false;
-	listSlots[kMembersMoved]();
+	listSlots._membersMoved();
 }
 
 function recomputeList(list: LiveList): void {
 	const listSlots = _(list);
-	listSlots.items = listSlots[kListMembers]();
+	listSlots.items = listSlots._listMembers();
 	listSlots.exact = true;
-	listSlots[kMembersMoved]();
+	listSlots._membersMoved();
 	defineListProperties(list);
 }
 
@@ -8515,7 +8243,7 @@ function splice(
 		}
 		items.splice(at, members.length);
 	}
-	listSlots[kMembersMoved]();
+	listSlots._membersMoved();
 	defineIndices(list, items.length);
 	return true;
 }
@@ -8551,7 +8279,7 @@ function defineListProperties(list: LiveList): void {
 		delete record[name];
 	}
 	listSlots.names = [];
-	const named = listSlots[kListNames](items);
+	const named = listSlots._listNames(items);
 	if (named !== null) {
 		for (const [name, node] of named) {
 			if (name === "" || Object.prototype.hasOwnProperty.call(list, name)) {
@@ -8612,7 +8340,7 @@ function ensureList(list: LiveList): Node[] {
 
 export interface NodeListSlots extends LiveListSlots {
 	compute: () => Node[];
-	[kListMembers]: Step<NodeList[typeof kListMembers]>;
+	_listMembers: Step<NodeList["_listMembers"]>;
 }
 
 export interface NodeList extends LiveList {
@@ -8657,7 +8385,7 @@ export class NodeList {
 		return at < items.length ? (items[at] as unknown as globalThis.Node) : null;
 	}
 
-	[kListMembers](this: Slots<NodeList>): Node[] {
+	_listMembers(this: Slots<NodeList>): Node[] {
 		return this.compute();
 	}
 }
@@ -8693,11 +8421,11 @@ interface HTMLCollectionSlots extends LiveListSlots {
 	root?: Node;
 	matches?: (element: Element) => boolean;
 	members?: Set<Node> | null;
-	[kListMembers]: Step<HTMLCollection[typeof kListMembers]>;
-	[kChangedMembers]: Step<HTMLCollection[typeof kChangedMembers]>;
-	[kListNames]: Step<HTMLCollection[typeof kListNames]>;
-	[kAttributeSync]: Step<HTMLCollection[typeof kAttributeSync]>;
-	[kMembersMoved]: Step<HTMLCollection[typeof kMembersMoved]>;
+	_listMembers: Step<HTMLCollection["_listMembers"]>;
+	_changedMembers: Step<HTMLCollection["_changedMembers"]>;
+	_listNames: Step<HTMLCollection["_listNames"]>;
+	_attributeSync: Step<HTMLCollection["_attributeSync"]>;
+	_membersMoved: Step<HTMLCollection["_membersMoved"]>;
 }
 
 interface HTMLCollection extends LiveList {
@@ -8750,26 +8478,26 @@ class HTMLCollection {
 		return null;
 	}
 
-	[kListMembers](this: Slots<HTMLCollection>): Node[] {
+	_listMembers(this: Slots<HTMLCollection>): Node[] {
 		return this.compute();
 	}
 
-	[kChangedMembers](
+	_changedMembers(
 		this: Slots<HTMLCollection>,
 		changed: readonly Node[],
 	): Node[] | null {
 		const matches = this.matches;
 		if (matches !== undefined) {
-			return matchingChangedMembers(ownerOf(this), matches, changed);
+			return matchingChangedMembers(matches, changed);
 		}
-		const members = LiveList.prototype[kChangedMembers].call(this, changed);
+		const members = LiveList.prototype._changedMembers.call(this, changed);
 		if (members === null || isNameless(members)) {
 			return members;
 		}
 		return null;
 	}
 
-	[kListNames](items: Node[]): Map<string, Node> {
+	_listNames(items: Node[]): Map<string, Node> {
 		const named = new Map<string, Node>();
 		for (const item of items) {
 			const element = item as Element;
@@ -8791,7 +8519,7 @@ class HTMLCollection {
 	// change to either moves its named properties. No collection here selects
 	// members by id or name, so the members stay and only the names are
 	// rebuilt.
-	[kAttributeSync](
+	_attributeSync(
 		this: Slots<HTMLCollection>,
 		element: Element,
 		localName: string,
@@ -8803,7 +8531,7 @@ class HTMLCollection {
 			return;
 		}
 		if (localName !== "id" && localName !== "name") {
-			LiveList.prototype[kAttributeSync].call(this, element, localName);
+			LiveList.prototype._attributeSync.call(this, element, localName);
 			return;
 		}
 		if (
@@ -8818,7 +8546,7 @@ class HTMLCollection {
 		}
 	}
 
-	[kMembersMoved](this: Slots<HTMLCollection>): void {
+	_membersMoved(this: Slots<HTMLCollection>): void {
 		const slots = this;
 		if (slots.members !== undefined) {
 			slots.members = null;
@@ -8894,19 +8622,6 @@ function getCollectionCache(node: Node): Map<string, HTMLCollection> {
 	return cache;
 }
 
-export function getElementChildren(parent: Node): Element[] {
-	const elements: Element[] = [];
-	for (let nodeSlots = _(parent).firstChild;
-		nodeSlots !== null;
-		nodeSlots = nodeSlots.next) {
-		const node = objectOf(nodeSlots);
-		if (nodeTypeOf(node) === ELEMENT_NODE) {
-			elements.push(node as Element);
-		}
-	}
-	return elements;
-}
-
 // A name belongs to the first member in tree order that carries it,
 // which depends on the whole list. So a collection splices members in and
 // out only when no name is affected.
@@ -8950,7 +8665,6 @@ function createMatchingHTMLCollection(
 // Runs the test over the changed subtree rather than over the tree it
 // moved in or out of.
 function matchingChangedMembers(
-	collection: HTMLCollection,
 	matches: (element: Element) => boolean,
 	changed: readonly Node[],
 ): Node[] | null {
@@ -8988,7 +8702,7 @@ function matchingAttributeSync(
 			return;
 		}
 	}
-	collectionSlots[kSync]();
+	collectionSlots._sync();
 }
 
 function getDescendantElements(root: Node, into: Element[]): Element[] {
@@ -9058,20 +8772,6 @@ function createTagNameNSCollection(
 	return collection;
 }
 
-/**
- * An element's attributes as the element holds them, for engine code that
- * reads them. `attributes` would build a live NamedNodeMap to hand out.
- */
-/**
- * An element's attributes, as their slots, so a reader looks none of
- * them up. The accessors below read them.
- */
-export function getAttributeList(
-	element: globalThis.Element,
-): readonly AttributeSlots[] {
-	return _(element as Element).attributeList;
-}
-
 // The one set every element without classes shares.
 const NO_CLASS_TOKENS: ReadonlySet<string> = new Set();
 
@@ -9146,15 +8846,16 @@ function toASCIIUppercase(value: string): string {
 	return value.toUpperCase();
 }
 
-const kTokens = Symbol("tokens");
-
 interface DOMTokenListSlots extends LiveListSlots {
 	element: Element;
 	attribute: string;
 	supported: Set<string> | null;
-	[kTokens]: Step<DOMTokenList[typeof kTokens]>;
-	[kChangedMembers]: Step<DOMTokenList[typeof kChangedMembers]>;
-	[kListMembers]: Step<DOMTokenList[typeof kListMembers]>;
+	_changedMembers: Step<DOMTokenList["_changedMembers"]>;
+	_listMembers: Step<DOMTokenList["_listMembers"]>;
+}
+
+function getTokens(list: DOMTokenList): string[] {
+	return ensureList(list) as unknown as string[];
 }
 
 interface DOMTokenList extends LiveList {
@@ -9182,7 +8883,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	}
 
 	get length(): number {
-		return _(this)[kTokens].length;
+		return getTokens(this).length;
 	}
 
 	get value(): string {
@@ -9195,25 +8896,19 @@ class DOMTokenList implements globalThis.DOMTokenList {
 		setAttributeOf(slots.element, slots.attribute, String(value));
 	}
 
-	get [kTokens](): string[] {
-		return ensureList(
-			ownerOf(this as unknown as Slots<DOMTokenList>),
-		) as unknown as string[];
-	}
-
 	item(index: number): string | null {
-		const tokens = _(this)[kTokens];
+		const tokens = getTokens(this);
 		const at = toUnsignedLong(index);
 		return at < tokens.length ? tokens[at] : null;
 	}
 
 	contains(token: string): boolean {
-		return _(this)[kTokens].includes(String(token));
+		return getTokens(this).includes(String(token));
 	}
 
 	add(...tokens: string[]): void {
 		validateTokens(tokens);
-		const current = _(this)[kTokens].slice();
+		const current = getTokens(this).slice();
 		for (const token of tokens) {
 			if (!current.includes(token)) {
 				current.push(String(token));
@@ -9224,7 +8919,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 
 	remove(...tokens: string[]): void {
 		validateTokens(tokens);
-		const current = _(this)[kTokens].filter(
+		const current = getTokens(this).filter(
 			(each) => !tokens.some((token) => String(token) === each),
 		);
 		writeTokenList(this, current);
@@ -9233,7 +8928,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	toggle(token: string, force?: boolean): boolean {
 		validateTokens([token]);
 		const name = String(token);
-		const current = _(this)[kTokens].slice();
+		const current = getTokens(this).slice();
 		const index = current.indexOf(name);
 		if (index !== -1) {
 			if (force === undefined || force === false) {
@@ -9255,7 +8950,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 		validateTokens([token, newToken]);
 		const name = String(token);
 		const replacement = String(newToken);
-		const current = _(this)[kTokens].slice();
+		const current = getTokens(this).slice();
 		if (!current.includes(name)) {
 			return false;
 		}
@@ -9292,11 +8987,11 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	}
 
 	// An attribute's tokens are not part of the tree's shape.
-	[kChangedMembers](): Node[] {
+	_changedMembers(): Node[] {
 		return [];
 	}
 
-	[kListMembers](this: Slots<DOMTokenList>): Node[] {
+	_listMembers(this: Slots<DOMTokenList>): Node[] {
 		const slots = this;
 		const value = attributeOf(slots.element, slots.attribute);
 		const tokens = value === null ? [] : splitOnASCIIWhitespace(value);
@@ -9597,15 +9292,12 @@ export class Text extends CharacterData implements globalThis.Text {
 		return created;
 	}
 
-	override [kGetTheParent](
-		this: Slots<Text>,
-		_event: Event,
-	): EventTarget | null {
+	override _getTheParent(this: Slots<Text>, _event: Event): EventTarget | null {
 		const slots = this;
 		return slots.assignedSlot ?? objectOf(slots.parent);
 	}
 
-	override [kCloneSingle](this: Slots<Text>, document: Document): Node {
+	override _cloneSingle(this: Slots<Text>, document: Document): Node {
 		const copy = new Text(this.data);
 		_(copy).document = document;
 		return copy;
@@ -9635,7 +9327,7 @@ class CDATASection extends Text {
 		return "#cdata-section";
 	}
 
-	override [kCloneSingle](this: Slots<CDATASection>, document: Document): Node {
+	override _cloneSingle(this: Slots<CDATASection>, document: Document): Node {
 		const copy = new CDATASection(this.data);
 		_(copy).document = document;
 		return copy;
@@ -9668,7 +9360,7 @@ export class Comment extends CharacterData implements globalThis.Comment {
 		return "#comment";
 	}
 
-	override [kCloneSingle](this: Slots<Comment>, document: Document): Node {
+	override _cloneSingle(this: Slots<Comment>, document: Document): Node {
 		const copy = new Comment(this.data);
 		_(copy).document = document;
 		return copy;
@@ -9716,7 +9408,7 @@ class ProcessingInstruction extends CharacterData {
 		return _(this).extra.target;
 	}
 
-	override [kCloneSingle](
+	override _cloneSingle(
 		this: Slots<ProcessingInstruction>,
 		document: Document,
 	): Node {
@@ -9784,7 +9476,7 @@ class DocumentType extends Node {
 		return _(this).extra.name;
 	}
 
-	override [kCloneSingle](this: Slots<DocumentType>, document: Document): Node {
+	override _cloneSingle(this: Slots<DocumentType>, document: Document): Node {
 		const slots = this;
 		const copy = new DocumentType(
 			slots.extra.name,
@@ -9868,7 +9560,7 @@ export class DocumentFragment
 		return null;
 	}
 
-	override [kCloneSingle](document: Document): Node {
+	override _cloneSingle(document: Document): Node {
 		const copy = new DocumentFragment();
 		_(copy).document = document;
 		return copy;
@@ -9907,8 +9599,6 @@ function setDescendantText(node: Node, value: string | null): void {
 
 export type AttributeSlots = Slots<Attr>;
 
-const kQualifiedName = Symbol("qualified name");
-
 interface AttrExtra extends NodeExtra {
 	namespace: string | null;
 	prefix: string | null;
@@ -9919,7 +9609,7 @@ interface AttrExtra extends NodeExtra {
 
 interface AttrSlots extends NodeSlots {
 	extra: AttrExtra;
-	[kQualifiedName]: Step<Attr[typeof kQualifiedName]>;
+	_qualifiedName: Step<Attr["_qualifiedName"]>;
 }
 
 interface Attr {
@@ -9957,7 +9647,7 @@ class Attr extends Node implements globalThis.Attr {
 	}
 
 	get name(): string {
-		return _(this)[kQualifiedName];
+		return _(this)._qualifiedName;
 	}
 
 	get value(): string {
@@ -9981,7 +9671,7 @@ class Attr extends Node implements globalThis.Attr {
 	}
 
 	override get nodeName(): string {
-		return _(this)[kQualifiedName];
+		return _(this)._qualifiedName;
 	}
 
 	override get nodeValue(): string | null {
@@ -10000,14 +9690,14 @@ class Attr extends Node implements globalThis.Attr {
 		setExistingAttributeValue(this, nullableString(value));
 	}
 
-	get [kQualifiedName](): string {
+	get _qualifiedName(): string {
 		const slots = this as unknown as Slots<Attr>;
 		return slots.extra.prefix === null
 			? slots.extra.localName
 			: `${slots.extra.prefix}:${slots.extra.localName}`;
 	}
 
-	override [kCloneSingle](this: Slots<Attr>, document: Document): Node {
+	override _cloneSingle(this: Slots<Attr>, document: Document): Node {
 		const slots = this;
 		const copy = new Attr(
 			slots.extra.namespace,
@@ -10041,18 +9731,16 @@ function setExistingAttributeValue(attribute: Attr, value: string): void {
 // them. An element's own steps read the element, and they must see the
 // tree the rest of the world will see.
 function notifyAttributeChange(element: Element, localName: string): void {
-	styleAttributeChanged(element, localName);
+	cssom.styleAttributeChanged(element, localName);
 }
 
-const kAttributeChangeSteps = Symbol("attribute change steps");
-
 function changeAttribute(attribute: Attr, value: string): void {
 	const attributeSlots = _(attribute);
 	const element = attributeSlots.extra.ownerElement as Element;
 	const oldValue = attributeSlots.extra.value;
 	queueAttributeMutationRecord(element, attribute, oldValue);
 	attributeSlots.extra.value = value;
-	_(element)[kAttributeChangeSteps](
+	_(element)._attributeChangeSteps(
 		attributeSlots.extra.localName,
 		oldValue,
 		value,
@@ -10071,7 +9759,7 @@ function appendAttribute(element: Element, attribute: Attr): void {
 	const attributeSlots = _(attribute);
 	attributeSlots.extra.ownerElement = element;
 	attributeSlots.document = elementSlots.document;
-	elementSlots[kAttributeChangeSteps](
+	elementSlots._attributeChangeSteps(
 		attributeSlots.extra.localName,
 		null,
 		attributeSlots.extra.value,
@@ -10092,7 +9780,7 @@ function removeAttributeNode(element: Element, attribute: Attr): void {
 		list.splice(index, 1);
 	}
 	attributeSlots.extra.ownerElement = null;
-	elementSlots[kAttributeChangeSteps](
+	elementSlots._attributeChangeSteps(
 		attributeSlots.extra.localName,
 		oldValue,
 		null,
@@ -10120,7 +9808,7 @@ function replaceAttribute(
 	newAttributeSlots.extra.ownerElement = element;
 	newAttributeSlots.document = elementSlots.document;
 	oldAttributeSlots.extra.ownerElement = null;
-	elementSlots[kAttributeChangeSteps](
+	elementSlots._attributeChangeSteps(
 		newAttributeSlots.extra.localName,
 		oldAttributeSlots.extra.value,
 		newAttributeSlots.extra.value,
@@ -10149,26 +9837,6 @@ function queueAttributeMutationRecord(
 	);
 }
 
-function getAttributeByName(
-	element: Element,
-	qualifiedName: string,
-): Attr | null {
-	let name = qualifiedName;
-	const elementSlots = _(element);
-	if (
-		elementSlots.namespace === HTML_NAMESPACE &&
-		isHTMLDocument(elementSlots.document)
-	) {
-		name = toASCIILowercase(name);
-	}
-	for (const attribute of elementSlots.attributeList) {
-		if (attribute[kQualifiedName] === name) {
-			return objectOf(attribute);
-		}
-	}
-	return null;
-}
-
 function getAttributeByNamespace(
 	element: Element,
 	namespace: string | null,
@@ -10215,9 +9883,9 @@ function setAttributeNode(element: Element, attribute: Attr): Attr | null {
 
 interface NamedNodeMapSlots extends LiveListSlots {
 	element: Element;
-	[kChangedMembers]: Step<NamedNodeMap[typeof kChangedMembers]>;
-	[kListMembers]: Step<NamedNodeMap[typeof kListMembers]>;
-	[kListNames]: Step<NamedNodeMap[typeof kListNames]>;
+	_changedMembers: Step<NamedNodeMap["_changedMembers"]>;
+	_listMembers: Step<NamedNodeMap["_listMembers"]>;
+	_listNames: Step<NamedNodeMap["_listNames"]>;
 }
 
 interface NamedNodeMap extends LiveList {
@@ -10288,17 +9956,17 @@ class NamedNodeMap implements globalThis.NamedNodeMap {
 	}
 
 	// An element's attributes are not part of the tree's shape.
-	[kChangedMembers](): Node[] {
+	_changedMembers(): Node[] {
 		return [];
 	}
 
-	[kListMembers](this: Slots<NamedNodeMap>): Node[] {
+	_listMembers(this: Slots<NamedNodeMap>): Node[] {
 		return _(this.element).attributeList.map((attribute) =>
 			objectOf(attribute),
 		);
 	}
 
-	[kListNames](this: Slots<NamedNodeMap>, items: Node[]): Map<string, Node> {
+	_listNames(this: Slots<NamedNodeMap>, items: Node[]): Map<string, Node> {
 		const named = new Map<string, Node>();
 		const slots = this;
 		const html =
@@ -10306,7 +9974,7 @@ class NamedNodeMap implements globalThis.NamedNodeMap {
 			isHTMLDocument(_(slots.element).document);
 		for (const item of items) {
 			const attribute = item as Attr;
-			const name = _(attribute)[kQualifiedName];
+			const name = _(attribute)._qualifiedName;
 			if (html && toASCIILowercase(name) !== name) {
 				continue;
 			}
@@ -10498,8 +10166,8 @@ export interface ElementSlots extends NodeSlots {
 	pseudoElements: Map<string, Element> | null;
 	pseudoHost: Element | null;
 	pseudoName: string | null;
-	[kQualifiedName]: Step<Element[typeof kQualifiedName]>;
-	[kAttributeChangeSteps]: Step<Element[typeof kAttributeChangeSteps]>;
+	_qualifiedName: Step<Element["_qualifiedName"]>;
+	_attributeChangeSteps: Step<Element["_attributeChangeSteps"]>;
 	// Set on the first selectionchange a text control schedules.
 	textSelectionChangeScheduled?: boolean;
 }
@@ -10644,11 +10312,11 @@ export class Element extends Node implements globalThis.Element {
 	get tagName(): string {
 		const slots = _(this);
 		if (slots.namespace !== HTML_NAMESPACE || !isHTMLDocument(slots.document)) {
-			return slots[kQualifiedName];
+			return slots._qualifiedName;
 		}
 		let upper = slots.upperName;
 		if (upper === null) {
-			upper = toASCIIUppercase(slots[kQualifiedName]);
+			upper = toASCIIUppercase(slots._qualifiedName);
 			slots.upperName = upper;
 		}
 		return upper;
@@ -10767,7 +10435,7 @@ export class Element extends Node implements globalThis.Element {
 		return 1;
 	}
 
-	get [kQualifiedName](): string {
+	get _qualifiedName(): string {
 		const slots = this;
 		return slots.prefix === null
 			? slots.localName
@@ -10852,7 +10520,7 @@ export class Element extends Node implements globalThis.Element {
 			// subtree and repaint.
 			if (this.isConnected) {
 				_(attached).extra.layout.invalidate(this);
-				_(attached).extra.framebuffer.invalidate();
+				invalidate(_(attached).extra.framebuffer);
 				void _(attached).extra.render();
 			}
 		}
@@ -10894,7 +10562,7 @@ export class Element extends Node implements globalThis.Element {
 	}
 
 	getAttributeNames(): string[] {
-		return _(this).attributeList.map((attribute) => attribute[kQualifiedName]);
+		return _(this).attributeList.map((attribute) => attribute._qualifiedName);
 	}
 
 	getAttribute(qualifiedName: string): string | null {
@@ -10966,7 +10634,7 @@ export class Element extends Node implements globalThis.Element {
 			name = toASCIILowercase(name);
 		}
 		for (const attribute of slots.attributeList) {
-			if (attribute[kQualifiedName] === name) {
+			if (attribute._qualifiedName === name) {
 				return true;
 			}
 		}
@@ -11121,7 +10789,7 @@ export class Element extends Node implements globalThis.Element {
 
 	insertAdjacentHTML(position: InsertPosition, text: string): void {
 		const where = toASCIILowercase(String(position));
-		let context: Node;
+		let context: Element;
 		const slots = _(this);
 		switch (where) {
 			case "beforebegin":
@@ -11134,7 +10802,7 @@ export class Element extends Node implements globalThis.Element {
 					);
 				}
 				context = nodeTypeOf(parent) === ELEMENT_NODE
-					? parent
+					? parent as Element
 					: createElementInternal(slots.document, "body", HTML_NAMESPACE);
 				break;
 			}
@@ -11145,16 +10813,14 @@ export class Element extends Node implements globalThis.Element {
 			default:
 				throw domError("SyntaxError", `"${position}" is not a position`);
 		}
-		let element = context as Element;
 		if (
-			nodeTypeOf(element) !== ELEMENT_NODE ||
-			(isHTMLDocument(_(element).document) &&
-				_(element).localName === "html" &&
-				_(element).namespace === HTML_NAMESPACE)
+			isHTMLDocument(_(context).document) &&
+			_(context).localName === "html" &&
+			_(context).namespace === HTML_NAMESPACE
 		) {
-			element = createElementInternal(slots.document, "body", HTML_NAMESPACE);
+			context = createElementInternal(slots.document, "body", HTML_NAMESPACE);
 		}
-		const fragment = parseHTMLFragment(String(text), element);
+		const fragment = parseHTMLFragment(String(text), context);
 		switch (where) {
 			case "beforebegin":
 				preInsert(fragment, objectOf(slots.parent) as Node, this);
@@ -11243,7 +10909,7 @@ export class Element extends Node implements globalThis.Element {
 	}
 
 	/** An assigned slottable returns its slot instead of its parent. */
-	override [kGetTheParent](
+	override _getTheParent(
 		this: Slots<Element>,
 		_event: Event,
 	): EventTarget | null {
@@ -11251,7 +10917,7 @@ export class Element extends Node implements globalThis.Element {
 		return slots.assignedSlot ?? objectOf(slots.parent);
 	}
 
-	override [kInsertionSteps](this: Slots<Element>): void {
+	override _insertionSteps(this: Slots<Element>): void {
 		const root = getRoot(ownerOf(this));
 		if (nodeTypeOf(root) === DOCUMENT_NODE) {
 			addToIdMap(root as Document, ownerOf(this));
@@ -11277,7 +10943,7 @@ export class Element extends Node implements globalThis.Element {
 		}
 	}
 
-	override [kRemovingSteps](this: Slots<Element>, oldParent: Node): void {
+	override _removingSteps(this: Slots<Element>, oldParent: Node): void {
 		const root = getRoot(oldParent);
 		if (nodeTypeOf(root) === DOCUMENT_NODE) {
 			removeFromIdMap(root as Document, ownerOf(this));
@@ -11294,7 +10960,7 @@ export class Element extends Node implements globalThis.Element {
 		}
 	}
 
-	[kAttributeChangeSteps](
+	_attributeChangeSteps(
 		this: Slots<Element>,
 		localName: string,
 		oldValue: string | null,
@@ -11373,7 +11039,7 @@ export class Element extends Node implements globalThis.Element {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	override [kCloneSingle](this: Slots<Element>, document: Document): Node {
+	override _cloneSingle(this: Slots<Element>, document: Document): Node {
 		const slots = this;
 		const copy = createElementInternal(
 			document,
@@ -11632,17 +11298,19 @@ function toViewportRect(
 	element: Element | null,
 ): globalThis.DOMRect {
 	const attachedSlots = _(attached);
+	const {x, y, width, height} = _(rect as unknown as DOMRect).rectValues;
 	const scrolled =
 		element !== null &&
 		attachedSlots.extra.layout.isInFixedSpace(element)
-			? rect
-			: new DOMRect(
-				rect.x,
-				rect.y - attachedSlots.extra.framebuffer.scrollTop,
-				rect.width,
-				rect.height,
-			);
-	return toPixelRect(attached as unknown as Node, scrolled);
+			? 0
+			: attachedSlots.extra.framebuffer.scrollTop;
+	const cell = getCellSize(attached as unknown as globalThis.Node);
+	return new DOMRect(
+		x * cell.width,
+		(y - scrolled) * cell.height,
+		width * cell.width,
+		height * cell.height,
+	);
 }
 
 // Cells to the CSS pixels every geometry API reports in.
@@ -11704,13 +11372,8 @@ Object.defineProperties(Element.prototype, {
 // neighbouring counts merge into the larger, and none is needed at
 // either end.
 function getInnerText(element: Element): string {
-	const attached = getAttachedDocument(element);
-	if (attached === undefined || !element.isConnected) {
-		return element.textContent ?? "";
-	}
-	flushLayout(element);
-	const layout = _(attached).extra.layout;
-	if (!isElementRendered(layout, element)) {
+	const layout = getSettledLayout(element);
+	if (layout === undefined || !isElementRendered(layout, element)) {
 		return element.textContent ?? "";
 	}
 	const items: Array<string | number> = [];
@@ -11738,7 +11401,7 @@ function getInnerText(element: Element): string {
 
 function isElementRendered(layout: Layout, element: Element): boolean {
 	return (
-		getComputedValue(element, "display") === "contents" ||
+		cssom.getComputedValue(element, "display") === "contents" ||
 		layout.getRects(element).length > 0
 	);
 }
@@ -11751,7 +11414,8 @@ function collectRenderedText(
 	if (nodeTypeOf(node) === TEXT_NODE) {
 		const parent = node.parentElement as Element | null;
 		if (
-			parent === null || getComputedValue(parent, "visibility") === "visible"
+			parent === null ||
+			cssom.getComputedValue(parent, "visibility") === "visible"
 		) {
 			items.push(layout.getRenderedText(node as unknown as globalThis.Text));
 		}
@@ -11761,13 +11425,13 @@ function collectRenderedText(
 		return;
 	}
 	const element = node as Element;
-	const display = getComputedValue(element, "display");
+	const display = cssom.getComputedValue(element, "display");
 	if (display === "none") {
 		return;
 	}
 	const shown =
 		isElementRendered(layout, element) &&
-		getComputedValue(element, "visibility") === "visible";
+		cssom.getComputedValue(element, "visibility") === "visible";
 	const around = !shown
 		? 0
 		: localNameOf(element) === "p" && namespaceOf(element) === HTML_NAMESPACE
@@ -11781,7 +11445,7 @@ function collectRenderedText(
 		localNameOf(element) === "math" &&
 		namespaceOf(element) === MATHML_NAMESPACE
 	) {
-		items.push(linearizeMath(element as unknown as globalThis.Element));
+		items.push(layout.getMathText(element));
 	} else {
 		for (
 			let childSlots = _(element).firstChild;
@@ -11823,7 +11487,7 @@ function hasLaterSibling(element: Element, display: string): boolean {
 		next !== null;
 		next = next.nextElementSibling as Element | null
 	) {
-		if (getComputedValue(next, "display") === display) {
+		if (cssom.getComputedValue(next, "display") === display) {
 			return true;
 		}
 	}
@@ -12064,11 +11728,11 @@ export class HTMLElement extends Element {
 	}
 
 	get style(): globalThis.CSSStyleDeclaration {
-		return getInlineStyle(this);
+		return cssom.getInlineStyle(this);
 	}
 
 	set style(value: unknown) {
-		getInlineStyle(this).cssText = value == null ? "" : `${value}`;
+		cssom.getInlineStyle(this).cssText = value == null ? "" : `${value}`;
 	}
 
 	// Inherited. An element that sets no mode takes its parent's, and the
@@ -12289,11 +11953,6 @@ export class HTMLElement extends Element {
 		return "";
 	}
 
-	// HTML's "rendered text" respects display, collapses white space and
-	// carries the line breaks layout chose. This engine computes all of
-	// that but does not read it back here yet, so every element takes the
-	// path the standard gives an element that is not being rendered: its
-	// descendant text content.
 	get innerText(): string {
 		return getInnerText(this);
 	}
@@ -12421,7 +12080,7 @@ export class HTMLElement extends Element {
 			(innermost as HTMLElement).blur();
 			return;
 		}
-		const wasFocused = getInnermostActive(document) === this;
+		const wasFocused = innermost === this;
 		if (wasFocused) {
 			commitTextControl(this);
 		}
@@ -12433,8 +12092,8 @@ export class HTMLElement extends Element {
 		if (attached === undefined) {
 			return;
 		}
-		_(attached).extra.cascade.handleFocusChange(this, null);
-		_(attached).extra.framebuffer.invalidate();
+		cssom.handleFocusChange(_(attached).extra.cascade, this, null);
+		invalidate(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 		dispatchAsUserAgent(
 			this,
@@ -12508,14 +12167,14 @@ export class HTMLElement extends Element {
 	// was showing as, so it closes. It closes silently, because the author
 	// who changed the attribute is not asking to be told about the old
 	// popover.
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLElement, kAttributeChangeSteps).call(
+		superStep(HTMLElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -12536,8 +12195,8 @@ export class HTMLElement extends Element {
 
 	// The top layer holds nothing that is off the tree, and there is no page
 	// for the popover to be above anymore.
-	override [kRemovingSteps](this: Slots<HTMLElement>, oldParent: Node): void {
-		superStep(HTMLElement, kRemovingSteps).call(this, oldParent);
+	override _removingSteps(this: Slots<HTMLElement>, oldParent: Node): void {
+		superStep(HTMLElement, "_removingSteps").call(this, oldParent);
 		if (!isShowingPopover(ownerOf(this))) {
 			return;
 		}
@@ -12545,7 +12204,6 @@ export class HTMLElement extends Element {
 		getTopLayer(this.document).delete(ownerOf(this));
 		state.visibility = "hidden";
 		state.mode = null;
-		state.trigger = null;
 		state.previouslyFocused = null;
 		popoverStateChanged(ownerOf(this));
 	}
@@ -12578,7 +12236,6 @@ function runFocusingSteps(element: HTMLElement): void {
 	}
 	// Uses shadow-including connectedness. A node whose tree root is a
 	// shadow root is focusable when its host chain reaches the document.
-	// The node-tree root test rejected every element in a shadow tree.
 	if (isFocusableArea(element) && element.isConnected) {
 		_(document).extra.activeElement = element;
 		// Focusing the body moves nothing a Tab would start from.
@@ -12596,8 +12253,8 @@ function runFocusingSteps(element: HTMLElement): void {
 	// :focus rules match live and a focus move is not a mutation, so both
 	// elements' resolved styles are stale whether or not a listener changes
 	// anything.
-	_(attached).extra.cascade.handleFocusChange(previous, element);
-	_(attached).extra.framebuffer.invalidate();
+	cssom.handleFocusChange(_(attached).extra.cascade, previous, element);
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 	// An edit the user made in the control focus is leaving is committed
 	// first, so change fires before blur.
@@ -12819,14 +12476,14 @@ Object.defineProperties(HTMLElement.prototype, {
 	// The border widths, which only the cascade decides.
 	clientLeft: {
 		get(this: HTMLElement): number {
-			return pxFromCells(getBoxModel(this).borderLeftWidth, false, this);
+			return pxFromCells(cssom.getBoxModel(this).borderLeftWidth, false, this);
 		},
 		configurable: true,
 		enumerable: true,
 	},
 	clientTop: {
 		get(this: HTMLElement): number {
-			return pxFromCells(getBoxModel(this).borderTopWidth, true, this);
+			return pxFromCells(cssom.getBoxModel(this).borderTopWidth, true, this);
 		},
 		configurable: true,
 		enumerable: true,
@@ -13142,11 +12799,11 @@ export class SVGElement extends Element {
 	declare blur: globalThis.SVGElement["blur"];
 	declare focus: globalThis.SVGElement["focus"];
 	get style(): globalThis.CSSStyleDeclaration {
-		return getInlineStyle(this);
+		return cssom.getInlineStyle(this);
 	}
 
 	set style(value: unknown) {
-		getInlineStyle(this).cssText = value == null ? "" : `${value}`;
+		cssom.getInlineStyle(this).cssText = value == null ? "" : `${value}`;
 	}
 
 	override get className(): any {
@@ -13329,11 +12986,11 @@ class MathMLElement extends Element {
 	declare blur: globalThis.MathMLElement["blur"];
 	declare focus: globalThis.MathMLElement["focus"];
 	get style(): globalThis.CSSStyleDeclaration {
-		return getInlineStyle(this);
+		return cssom.getInlineStyle(this);
 	}
 
 	set style(value: unknown) {
-		getInlineStyle(this).cssText = value == null ? "" : `${value}`;
+		cssom.getInlineStyle(this).cssText = value == null ? "" : `${value}`;
 	}
 
 	get attributeStyleMap(): globalThis.StylePropertyMap {
@@ -14120,13 +13777,18 @@ function toCallback(
 	return value as (...args: unknown[]) => void;
 }
 
-function lookUpDefinition(
-	registry: CustomElementRegistry,
+// Every node has a registry. An element takes its document's when
+// created and the tree's when inserted. A shadow root takes its host's
+// unless the caller named another. A node created for a registry that
+// has not been assigned one yet has null, which matches no definition
+// until a registry claims it.
+function lookUpCustomElementDefinition(
+	registry: CustomElementRegistry | null,
 	namespace: string | null,
 	localName: string,
 	is: string | null,
 ): CustomElementDefinition | null {
-	if (namespace !== HTML_NAMESPACE) {
+	if (registry === null || namespace !== HTML_NAMESPACE) {
 		return null;
 	}
 	const registrySlots = _(registry);
@@ -14179,27 +13841,10 @@ function getConstructorDefinition(
 // shared by every window in the realm, but the names defined for them
 // are not, so two windows in one process, such as two terminal sessions,
 // each define their own elements.
-function createWindowRegistry(): CustomElementRegistry {
+export function createWindowRegistry(): CustomElementRegistry {
 	return constructInternal(() => new CustomElementRegistry());
 }
 
-// Every node has a registry. An element takes its document's when
-// created and the tree's when inserted. A shadow root takes its host's
-// unless the caller named another. A node created for a registry that
-// has not been assigned one yet has null, which matches no definition
-// until a registry claims it.
-function lookUpCustomElementDefinition(
-	registry: CustomElementRegistry | null,
-	namespace: string | null,
-	localName: string,
-	is: string | null,
-): CustomElementDefinition | null {
-	if (registry === null) {
-		return null;
-	}
-	return lookUpDefinition(registry, namespace, localName, is);
-}
-
 // Walks the node tree only. A shadow tree under an element keeps
 // whatever registry it was given, which is the point of scoping one.
 function associateRegistry(
@@ -14299,8 +13944,8 @@ function upgradeElement(
 function getUpgradeDefinition(
 	element: Element,
 ): CustomElementDefinition | null {
-	// A template's contents never upgrade. A connected element's root is a
-	// document, so only a detached one has to climb to find out.
+	// A connected element's root is a document, so only a detached one
+	// has to climb to find out.
 	const elementSlots = _(element);
 	if (!elementSlots.connected) {
 		const root = getRoot(element);
@@ -14419,15 +14064,15 @@ export class ShadowRoot
 	}
 
 	get styleSheets(): globalThis.StyleSheetList {
-		return getStyleSheets(this);
+		return cssom.getStyleSheets(this);
 	}
 
 	get adoptedStyleSheets(): globalThis.CSSStyleSheet[] {
-		return getAdoptedStyleSheets(this);
+		return cssom.getAdoptedStyleSheets(this);
 	}
 
 	set adoptedStyleSheets(value: globalThis.CSSStyleSheet[]) {
-		adoptStyleSheets(this, value);
+		cssom.adoptStyleSheets(this, value);
 	}
 
 	// Retargeted into this tree: the shadow-including ancestor of the
@@ -14598,7 +14243,7 @@ export class ShadowRoot
 
 	// Dispatch leaves a shadow tree through the host, unless the event was
 	// dispatched inside this tree and is not composed.
-	override [kGetTheParent](
+	override _getTheParent(
 		this: Slots<ShadowRoot>,
 		event: Event,
 	): EventTarget | null {
@@ -14614,7 +14259,7 @@ export class ShadowRoot
 		return this.extra.host;
 	}
 
-	override [kCloneSingle](_document: Document): Node {
+	override _cloneSingle(_document: Document): Node {
 		throw domError("NotSupportedError", "A shadow root cannot be cloned");
 	}
 }
@@ -14699,7 +14344,7 @@ function attachShadowRoot(
 	shadowSlots.extra.serializable = serializable;
 	shadowSlots.registry = registry;
 	elementSlots.shadowRoot = shadow;
-	styleShadowAttached(shadow);
+	cssom.styleShadowAttached(shadow);
 }
 
 // The same ShadowRoot an author's attachShadow builds, so slot
@@ -14851,6 +14496,10 @@ function assignSlottables(slot: HTMLSlotElement): void {
 		slottables.every((node, index) => node === assigned[index]);
 	if (!identical) {
 		signalASlotChange(slot);
+		const attached = getAttachedDocument(slot);
+		if (attached !== undefined) {
+			_(attached).extra.cascade.slotsChanged();
+		}
 	}
 	for (const previous of assigned) {
 		if (_(previous).assignedSlot === slot && !slottables.includes(previous)) {
@@ -15132,7 +14781,7 @@ class HTMLTemplateElement extends HTMLElement {
 		toggleAttributeOf(this, "shadowrootserializable", Boolean(value));
 	}
 
-	override [kAdoptingSteps](
+	override _adoptingSteps(
 		this: Slots<HTMLTemplateElement>,
 		_oldDocument: Document,
 	): void {
@@ -15143,7 +14792,7 @@ class HTMLTemplateElement extends HTMLElement {
 		}
 	}
 
-	override [kCloningSteps](
+	override _cloningSteps(
 		this: Slots<HTMLTemplateElement>,
 		copy: Node,
 		document: Document,
@@ -15200,6 +14849,18 @@ function parseURL(value: string, base: string): string | null {
 	}
 }
 
+// A URL attribute as its reflecting property reads it: resolved against
+// the document's base URL, the trimmed text when that fails, and "" when
+// the attribute is absent.
+function getURLAttribute(element: Element, attribute: string): string {
+	const value = attributeOf(element, attribute);
+	if (value === null) {
+		return "";
+	}
+	const trimmed = trimASCIIWhitespace(value);
+	return parseURL(trimmed, getDocumentBaseURL(_(element).document)) ?? trimmed;
+}
+
 // The href of the first base element that has one, resolved against the
 // document's URL. Falls back to the document's URL when there is no such
 // element or its href does not parse.
@@ -15302,13 +14963,7 @@ function installReflection(prototype: object, spec: ReflectSpec): void {
 			break;
 		case "url":
 			get = function (this: Element): string {
-				const value = attributeOf(this, attribute);
-				if (value === null) {
-					return "";
-				}
-				const trimmed = trimASCIIWhitespace(value);
-				return parseURL(trimmed, getDocumentBaseURL(_(this).document)) ??
-					trimmed;
+				return getURLAttribute(this, attribute);
 			};
 			set = function (this: Element, value: unknown): void {
 				setAttributeOf(this, attribute, String(value));
@@ -15505,12 +15160,7 @@ function createHyperlinkPart(
 const hyperlinkMembers: PropertyDescriptorMap = {
 	href: {
 		get(this: Element): string {
-			const value = attributeOf(this, "href");
-			if (value === null) {
-				return "";
-			}
-			const trimmed = trimASCIIWhitespace(value);
-			return parseURL(trimmed, getDocumentBaseURL(_(this).document)) ?? trimmed;
+			return getURLAttribute(this, "href");
 		},
 		set(this: Element, value: string): void {
 			setAttributeOf(this, "href", String(value));
@@ -15591,12 +15241,7 @@ const hyperlinkMembers: PropertyDescriptorMap = {
 	),
 	toString: {
 		value: function toString(this: Element): string {
-			const value = attributeOf(this, "href");
-			if (value === null) {
-				return "";
-			}
-			const trimmed = trimASCIIWhitespace(value);
-			return parseURL(trimmed, getDocumentBaseURL(_(this).document)) ?? trimmed;
+			return getURLAttribute(this, "href");
 		},
 		writable: true,
 		enumerable: true,
@@ -15861,7 +15506,7 @@ function invalidateReplaced(element: Element, reflow: boolean): void {
 			_(attached).extra.layout.invalidate(parent as unknown as Node);
 		}
 	}
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -16019,7 +15664,7 @@ class HTMLCanvasElement extends HTMLElement {
 				cellPixels: () => getImageCellSize(this as unknown as Node),
 				drawsPixels: () => _maybe(getAttachedDocument(this))?.extra.canvas !==
 					"none",
-				color: () => getComputedValue(this, "color"),
+				color: () => cssom.getComputedValue(this, "color"),
 				direction: () => getCanvasDirection(this),
 			});
 		} else {
@@ -16030,7 +15675,7 @@ class HTMLCanvasElement extends HTMLElement {
 
 	toBlob(
 		callback: globalThis.BlobCallback,
-		type?: string,
+		_type?: string,
 		_quality?: number,
 	): void {
 		if (typeof callback !== "function") {
@@ -16042,7 +15687,6 @@ class HTMLCanvasElement extends HTMLElement {
 		const bytes = bitmap === null || bitmap.width === 0 || bitmap.height === 0
 			? null
 			: encodePNG(bitmap);
-		void type;
 		setTimeout(() =>
 			callback(
 				bytes === null
@@ -16076,14 +15720,14 @@ class HTMLCanvasElement extends HTMLElement {
 		return noMediaPipeline("bitmap");
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLCanvasElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLCanvasElement, kAttributeChangeSteps).call(
+		superStep(HTMLCanvasElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -16101,7 +15745,9 @@ class HTMLCanvasElement extends HTMLElement {
 			const context = slots.extra.canvasContext;
 			if (context instanceof CanvasRenderingContext2D) {
 				clearCanvasText(context);
-				resetCanvasContext(context);
+				// A resize resets the context to its default state (HTML
+				// §4.12.5.1.1).
+				resetContextState(context);
 			}
 			slots.extra.canvasVersion++;
 			invalidateReplaced(ownerOf(this), true);
@@ -16111,13 +15757,13 @@ class HTMLCanvasElement extends HTMLElement {
 
 declareExtraSlots(HTMLCanvasElement);
 
-// The bitmap, made at the canvas's size when first needed.
-// Past MAX_IMAGE_PIXELS a canvas gets no bitmap and draws nothing, as a
-// browser's canvas does past its own limit, rather than failing to
-// allocate. A cell takes 18 bytes, so a cell grid stops sooner.
+// A cell takes 18 bytes, so a cell grid stops sooner than a bitmap does.
 const GRID_CELL_LIMIT = 1 << 22;
 
-// The bitmap, made at the canvas's size when first drawn on.
+// The bitmap, made at the canvas's size when first drawn on. Past
+// MAX_IMAGE_PIXELS a canvas gets no bitmap and draws nothing, as a
+// browser's canvas does past its own limit, rather than failing to
+// allocate.
 function getCanvasBitmap(canvas: HTMLCanvasElement): Bitmap {
 	const width = canvas.width;
 	const height = canvas.height;
@@ -16171,18 +15817,12 @@ function fitCanvasGrid(
 	}
 	const cells = new CellContext(new CellGrid(rows, cols), rows, cols, 0);
 	if (previous !== null) {
-		cells.drawGrid(previous.grid, 0, 0);
+		drawGrid(cells, previous.grid, 0, 0);
 	}
 	canvasSlots.extra.canvasGrid = cells;
 	return cells;
 }
 
-// Resizing a canvas resets its context to the default state (HTML
-// §4.12.5.1.1), which is what reset() does apart from clearing.
-function resetCanvasContext(context: CanvasRenderingContext2D): void {
-	resetContextState(context);
-}
-
 /**
  * Every <img> and <canvas> in a tree, shadow trees included, laid out
  * again: their natural sizes in cells changed with the cell's size.
@@ -16209,7 +15849,7 @@ export function relayoutReplacedElements(
 		}
 	};
 	visit(root);
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -16286,8 +15926,8 @@ interface HTMLDetailsElementExtra extends NodeExtra {
 
 interface HTMLDetailsElementSlots extends HTMLElementSlots {
 	extra: HTMLDetailsElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLDetailsElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLDetailsElement[typeof kSyncUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLDetailsElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLDetailsElement["_syncUAShadowTree"]>;
 }
 
 interface HTMLDetailsElement {
@@ -16306,7 +15946,7 @@ class HTMLDetailsElement extends HTMLElement {
 		slots.extra.content = null;
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLDetailsElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLDetailsElement>): void {
 		if (this.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
 			return;
@@ -16336,7 +15976,7 @@ class HTMLDetailsElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLDetailsElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLDetailsElement>): void {
 		const content = this.extra.content;
 		if (content === null) {
 			return;
@@ -16347,14 +15987,14 @@ class HTMLDetailsElement extends HTMLElement {
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLDetailsElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLDetailsElement, kAttributeChangeSteps).call(
+		superStep(HTMLDetailsElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -16593,25 +16233,25 @@ class HTMLDialogElement extends HTMLElement {
 
 	// Nothing off the tree can render above the document, and a detached
 	// dialog is no longer modal.
-	override [kRemovingSteps](
+	override _removingSteps(
 		this: Slots<HTMLDialogElement>,
 		oldParent: Node,
 	): void {
-		superStep(HTMLDialogElement, kRemovingSteps).call(this, oldParent);
+		superStep(HTMLDialogElement, "_removingSteps").call(this, oldParent);
 		getTopLayer(this.document).delete(ownerOf(this));
 	}
 
 	// Removing `open` by hand ends a modal dialog's modality too: it leaves
 	// the top layer, and the page behind it is no longer inert (HTML's
 	// dialog attribute change steps).
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLDialogElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLDialogElement, kAttributeChangeSteps).call(
+		superStep(HTMLDialogElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -16750,8 +16390,8 @@ export function isModalDialog(node: globalThis.Node): boolean {
 	);
 }
 
-function isConnectedNode(node: Node): boolean {
-	return _(node).connected;
+export function isConnectedNode(node: globalThis.Node): boolean {
+	return _(node as Node).connected;
 }
 
 class HTMLDirectoryElement extends HTMLElement {
@@ -17137,14 +16777,12 @@ function implicitlySubmit(input: HTMLInputElement): void {
 	}
 }
 
-const kResetControl = Symbol("put a control back to its default");
-
 function resetControl(control: Element): void {
 	editedSinceChange.delete(control);
 	setUserValidity(control, false);
-	const resettable = control as unknown as Record<symbol, () => void>;
-	if (typeof _(resettable)[kResetControl] === "function") {
-		_(resettable)[kResetControl]!();
+	const slots = _(control) as unknown as {_resetControl?: () => void};
+	if (typeof slots._resetControl === "function") {
+		slots._resetControl();
 	} else if (isFormAssociatedCustom(control)) {
 		enqueueCallbackReaction(control, "formResetCallback", []);
 	}
@@ -17230,124 +16868,14 @@ function createEntry(
 	return [key, file];
 }
 
-const kEntryList = Symbol("the entry list");
-
-interface EntryListFormData {
-	[kEntryList]: FormDataEntry[];
-}
-
-/**
- * The entry list a runtime without its own FormData falls back to. Every
- * runtime this engine supports has one, and its storage is what `fetch`
- * reads, so it is the base below whenever it exists.
- */
-class EntryListFormData {
-	constructor() {
-		this[kEntryList] = [];
-	}
-
-	append(name: string, value: string | Blob, filename?: string): void {
-		this[kEntryList].push(createEntry(name, value, filename));
-	}
-
-	delete(name: string): void {
-		const wanted = toScalarValueString(String(name));
-		this[kEntryList] = this[kEntryList].filter(([key]) => key !== wanted);
-	}
-
-	get(name: string): globalThis.FormDataEntryValue | null {
-		const wanted = toScalarValueString(String(name));
-		const found = this[kEntryList].find(([key]) => key === wanted);
-		return found === undefined ? null : found[1];
-	}
-
-	getAll(name: string): globalThis.FormDataEntryValue[] {
-		const wanted = toScalarValueString(String(name));
-		return this[kEntryList]
-			.filter(([key]) => key === wanted).map(([, value]) => value);
-	}
-
-	has(name: string): boolean {
-		const wanted = toScalarValueString(String(name));
-		return this[kEntryList].some(([key]) => key === wanted);
-	}
-
-	set(name: string, value: string | Blob, filename?: string): void {
-		const entry = createEntry(name, value, filename);
-		const entries = this[kEntryList];
-		const at = entries.findIndex(([key]) => key === entry[0]);
-		if (at === -1) {
-			entries.push(entry);
-			return;
-		}
-		entries[at] = entry;
-		this[kEntryList] = entries.filter(
-			(held, index) => index === at || held[0] !== entry[0],
-		);
-	}
-
-	forEach(
-		callbackfn: (
-			value: globalThis.FormDataEntryValue,
-			key: string,
-			parent: any,
-		) => void,
-		thisArg?: any,
-	): void {
-		for (let index = 0; index < this[kEntryList].length; index++) {
-			const [key, value] = this[kEntryList][index];
-			callbackfn.call(thisArg, value, key, this);
-		}
-	}
-
-	entries(): FormDataIterator<[string, globalThis.FormDataEntryValue]> {
-		return this[kEntryList]
-			.map(([key, value]): [string, globalThis.FormDataEntryValue] =>
-				[key, value])[Symbol.iterator]();
-	}
-
-	keys(): FormDataIterator<string> {
-		return this[kEntryList].map(([key]) => key)[Symbol.iterator]();
-	}
-
-	values(): FormDataIterator<globalThis.FormDataEntryValue> {
-		return this[kEntryList].map(
-			([, value]): globalThis.FormDataEntryValue => value,
-		)[Symbol.iterator]();
-	}
-
-	[Symbol.iterator](): FormDataIterator<
-		[string, globalThis.FormDataEntryValue]
-	> {
-		return this.entries();
-	}
-}
-
-const FormDataBase: new () => EntryListFormData =
-	typeof (globalThis as {
-		FormData?: unknown;
-	}).FormData === "function"
-		? (globalThis as unknown as {FormData: new () => EntryListFormData})
-			.FormData
-		: EntryListFormData;
-
-// A runtime stores a file under the filename its caller gave, or, in at
-// least one, under the name the file already had. The wire is right
-// either way; only reading an entry back differs, so the filenames are
-// kept here when the runtime reports the wrong one.
+// A runtime stores a file under the filename its caller gave, or, as Bun
+// does, under the name the file already had. The wire is right either
+// way; only reading an entry back differs, so the filenames are kept here
+// when the runtime reports the wrong one.
 const runtimeKeepsFilenames = ((): boolean => {
-	const Runtime = (globalThis as {FormData?: unknown}).FormData;
-	if (typeof Runtime !== "function") {
-		return true;
-	}
-	try {
-		const probe = new (Runtime as new () => globalThis.FormData)();
-		probe.append("k", new File(["x"], "given"), "wanted");
-		return (probe.get("k") as globalThis.File).name === "wanted";
-	} catch (error) {
-		void error;
-		return true;
-	}
+	const probe = new globalThis.FormData();
+	probe.append("k", new File(["x"], "given"), "wanted");
+	return (probe.get("k") as globalThis.File).name === "wanted";
 })();
 
 // One File per stored blob and name, so reading an entry twice gives one
@@ -17385,7 +16913,7 @@ interface FormData {
 	readonly [internals]: FormDataSlots;
 }
 
-class FormData extends FormDataBase {
+class FormData extends globalThis.FormData {
 	constructor(form?: HTMLFormElement, submitter?: HTMLElement | null) {
 		super();
 		seal(this, new.target, FormData);
@@ -17866,7 +17394,7 @@ function constructEntryList(
 class HTMLFormControlsCollection
 	extends (HTMLCollection as new (
 		...args: ConstructorParameters<typeof HTMLCollection>
-	) => Omit<HTMLCollection, "namedItem" | typeof kListNames>) {
+	) => Omit<HTMLCollection, "namedItem" | "_listNames">) {
 	constructor(compute: () => Element[], owner: Node | null = null) {
 		// The form attribute can associate a control anywhere in the tree, and
 		// what counts as a control depends on its attributes, so the list is
@@ -17894,7 +17422,7 @@ class HTMLFormControlsCollection
 		) as unknown as Element;
 	}
 
-	[kListNames](
+	_listNames(
 		this: Slots<HTMLFormControlsCollection>,
 		items: Node[],
 	): Map<string, Node> {
@@ -18179,8 +17707,8 @@ class HTMLIFrameElement extends HTMLElement {
 		return null;
 	}
 
-	override [kInsertionSteps](this: Slots<HTMLIFrameElement>): void {
-		superStep(HTMLIFrameElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLIFrameElement>): void {
+		superStep(HTMLIFrameElement, "_insertionSteps").call(this);
 		if (!ownerOf(this).isConnected) {
 			return;
 		}
@@ -18197,11 +17725,8 @@ class HTMLIFrameElement extends HTMLElement {
 		}, 0);
 	}
 
-	override [kRemovingSteps](
-		this: Slots<HTMLIFrameElement>,
-		parent: Node,
-	): void {
-		superStep(HTMLIFrameElement, kRemovingSteps).call(this, parent);
+	override _removingSteps(this: Slots<HTMLIFrameElement>, parent: Node): void {
+		superStep(HTMLIFrameElement, "_removingSteps").call(this, parent);
 		const slots = this;
 		slots.extra.contentDocument = null;
 		slots.extra.contentWindow = null;
@@ -18308,14 +17833,14 @@ interface HTMLImageElementExtra extends NodeExtra {
 
 interface HTMLImageElementSlots extends HTMLElementSlots {
 	extra: HTMLImageElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLImageElement[typeof kEnsureUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLImageElement["_ensureUAShadowTree"]>;
 }
 
-interface HTMLImageElement {
+export interface HTMLImageElement {
 	readonly [internals]: HTMLImageElementSlots;
 }
 
-class HTMLImageElement extends HTMLElement {
+export class HTMLImageElement extends HTMLElement {
 	declare alt: globalThis.HTMLImageElement["alt"];
 	declare referrerPolicy: globalThis.HTMLImageElement["referrerPolicy"];
 	declare name: globalThis.HTMLImageElement["name"];
@@ -18422,14 +17947,16 @@ class HTMLImageElement extends HTMLElement {
 		return state.status === "complete" || state.status === "broken";
 	}
 
-	// Deprecated members that report the rendered position. This engine
-	// implements them through the geometry surface instead.
+	// The border box's left and top edges from the document's origin, as
+	// CSSOM View defines these old members, or 0 for an image with no box.
 	get x(): number {
-		return 0;
+		const view = this.ownerDocument.defaultView;
+		return this.getBoundingClientRect().left + (view?.scrollX ?? 0);
 	}
 
 	get y(): number {
-		return 0;
+		const view = this.ownerDocument.defaultView;
+		return this.getBoundingClientRect().top + (view?.scrollY ?? 0);
 	}
 
 	decode(): Promise<void> {
@@ -18451,7 +17978,7 @@ class HTMLImageElement extends HTMLElement {
 	// as an inline element would, unless HTML's rendering rules keep it a
 	// box. Its UA shadow tree holds the text, built the first time it can
 	// be needed.
-	[kEnsureUAShadowTree]?(this: Slots<HTMLImageElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLImageElement>): void {
 		const alt = attributeOf(ownerOf(this), "alt") ?? "";
 		const slots = this;
 		const text = slots.extra.altText;
@@ -18473,18 +18000,18 @@ class HTMLImageElement extends HTMLElement {
 		appendChildOf(root, slots.extra.altText as unknown as globalThis.Text);
 	}
 
-	override [kInsertionSteps](this: Slots<HTMLImageElement>): void {
-		superStep(HTMLImageElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLImageElement>): void {
+		superStep(HTMLImageElement, "_insertionSteps").call(this);
 		if (this.extra.imageState.pending) {
 			updateImageData(ownerOf(this));
 		}
 	}
 
-	override [kAdoptingSteps](
+	override _adoptingSteps(
 		this: Slots<HTMLImageElement>,
 		oldDocument: Document,
 	): void {
-		superStep(HTMLImageElement, kAdoptingSteps).call(this, oldDocument);
+		superStep(HTMLImageElement, "_adoptingSteps").call(this, oldDocument);
 		// The fragment parser builds a <template>'s contents in the
 		// template's document and then moves them. A load that started
 		// there stops, and waits for a document with a window.
@@ -18496,14 +18023,14 @@ class HTMLImageElement extends HTMLElement {
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLImageElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLImageElement, kAttributeChangeSteps).call(
+		superStep(HTMLImageElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -18526,7 +18053,7 @@ class HTMLImageElement extends HTMLElement {
 
 declareExtraSlots(HTMLImageElement);
 
-function toImageDimension(value: number): number {
+export function toImageDimension(value: number): number {
 	const number = Math.trunc(Number(value));
 	return Number.isFinite(number) && number >= 0 && number <= 0x7fffffff
 		? number
@@ -18789,15 +18316,15 @@ export interface HTMLInputElementExtra extends NodeExtra {
 
 export interface HTMLInputElementSlots extends HTMLElementSlots {
 	extra: HTMLInputElementExtra;
-	[kUAValue]: Step<HTMLInputElement[typeof kUAValue]>;
-	[kUAValueText]: Step<HTMLInputElement[typeof kUAValueText]>;
-	[kSetUAValue]: Step<HTMLInputElement[typeof kSetUAValue]>;
-	[kUASelection]: Step<HTMLInputElement[typeof kUASelection]>;
-	[kSetUASelection]: Step<HTMLInputElement[typeof kSetUASelection]>;
-	[kResetControl]: Step<HTMLInputElement[typeof kResetControl]>;
-	[kUASelectionRange]: Step<HTMLInputElement[typeof kUASelectionRange]>;
-	[kEnsureUAShadowTree]: Step<HTMLInputElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLInputElement[typeof kSyncUAShadowTree]>;
+	_uaValue: Step<HTMLInputElement["_uaValue"]>;
+	_uaValueText: Step<HTMLInputElement["_uaValueText"]>;
+	_setUAValue: Step<HTMLInputElement["_setUAValue"]>;
+	_uaSelection: Step<HTMLInputElement["_uaSelection"]>;
+	_setUASelection: Step<HTMLInputElement["_setUASelection"]>;
+	_resetControl: Step<HTMLInputElement["_resetControl"]>;
+	_uaSelectionRange: Step<HTMLInputElement["_uaSelectionRange"]>;
+	_ensureUAShadowTree: Step<HTMLInputElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLInputElement["_syncUAShadowTree"]>;
 }
 
 export interface HTMLInputElement {
@@ -18967,7 +18494,7 @@ export class HTMLInputElement extends HTMLElement {
 				return;
 			}
 
-			const value = slots[kUAValue];
+			const value = slots._uaValue;
 			const {start, end, direction} = getSelectionRecord(this)!;
 			const anchor = direction === "backward" ? end : start;
 			const caret = direction === "backward" ? start : end;
@@ -19184,7 +18711,6 @@ export class HTMLInputElement extends HTMLElement {
 		);
 	}
 
-	// Only the types that render as a button can invoke a popover.
 	get popoverTargetElement(): Element | null {
 		return getAttributeElement(this, "popovertarget");
 	}
@@ -19303,14 +18829,14 @@ export class HTMLInputElement extends HTMLElement {
 					: type === "week" ? formatWeekString(value) : iso.slice(11, 19);
 	}
 
-	get [kUAValue](): string {
+	get _uaValue(): string {
 		const slots = this as unknown as Slots<HTMLInputElement>;
 		return getInputValueMode(ownerOf(slots).type) === "value"
 			? slots.extra.value
 			: "";
 	}
 
-	get [kUAValueText](): globalThis.Text | null {
+	get _uaValueText(): globalThis.Text | null {
 		return (this as unknown as Slots<HTMLInputElement>).extra.valueText;
 	}
 
@@ -19355,7 +18881,7 @@ export class HTMLInputElement extends HTMLElement {
 			throw new TypeError("setSelectionRange needs a start and an end");
 		}
 		requireSelectable(this);
-		_(this)[kSetUASelection]!(start ?? 0, end ?? 0, direction);
+		_(this)._setUASelection!(start ?? 0, end ?? 0, direction);
 	}
 
 	setRangeText(replacement: string): void;
@@ -19399,7 +18925,7 @@ export class HTMLInputElement extends HTMLElement {
 	// collapse it to the end. A control with no value of its own (a file
 	// input's filename list) has nothing a keystroke can write, as in a
 	// browser, where its UI accepts no typing.
-	[kSetUAValue]?(this: Slots<HTMLInputElement>, value: string): void {
+	_setUAValue?(this: Slots<HTMLInputElement>, value: string): void {
 		if (getInputValueMode(ownerOf(this).type) !== "value") {
 			return;
 		}
@@ -19421,7 +18947,7 @@ export class HTMLInputElement extends HTMLElement {
 	// throw for the rest. But the caret in an email or number text control is
 	// real, and the UA shadow tree behind the control edits through it. This is
 	// the same algorithm without the type check an author gets.
-	[kUASelection]?(this: Slots<HTMLInputElement>): {
+	_uaSelection?(this: Slots<HTMLInputElement>): {
 		start: number;
 		end: number;
 		direction: string;
@@ -19434,7 +18960,7 @@ export class HTMLInputElement extends HTMLElement {
 		};
 	}
 
-	[kSetUASelection]?(
+	_setUASelection?(
 		this: Slots<HTMLInputElement>,
 		start: number,
 		end: number,
@@ -19455,14 +18981,14 @@ export class HTMLInputElement extends HTMLElement {
 		);
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLInputElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLInputElement, kAttributeChangeSteps).call(
+		superStep(HTMLInputElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -19475,6 +19001,8 @@ export class HTMLInputElement extends HTMLElement {
 		const slots = this;
 		if (localName === "value" && !slots.extra.dirtyValue) {
 			slots.extra.value = sanitizeInputValue(ownerOf(this), value ?? "");
+			// What the control shows is its value, which just changed.
+			syncUAShadowTree(ownerOf(this));
 		} else if (localName === "checked" && !slots.extra.dirtyChecked) {
 			setCheckedness(ownerOf(this), value !== null);
 		} else if (
@@ -19483,10 +19011,11 @@ export class HTMLInputElement extends HTMLElement {
 				(localName === "min" || localName === "max"))
 		) {
 			slots.extra.value = sanitizeInputValue(ownerOf(this), slots.extra.value);
+			syncUAShadowTree(ownerOf(this));
 		}
 	}
 
-	override [kCloningSteps](this: Slots<HTMLInputElement>, copy: Node): void {
+	override _cloningSteps(this: Slots<HTMLInputElement>, copy: Node): void {
 		const clone = copy as HTMLInputElement;
 		const slots = this;
 		const cloneSlots = _(clone);
@@ -19496,7 +19025,7 @@ export class HTMLInputElement extends HTMLElement {
 		cloneSlots.extra.dirtyChecked = slots.extra.dirtyChecked;
 	}
 
-	[kResetControl]?(this: Slots<HTMLInputElement>): void {
+	_resetControl?(this: Slots<HTMLInputElement>): void {
 		const slots = this;
 		slots.extra.value = sanitizeInputValue(
 			ownerOf(this),
@@ -19509,11 +19038,11 @@ export class HTMLInputElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kUASelectionRange]?(this: Slots<HTMLInputElement>): globalThis.Range | null {
+	_uaSelectionRange?(this: Slots<HTMLInputElement>): globalThis.Range | null {
 		return getTextSelectionRange(ownerOf(this), this.extra.valueText);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLInputElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLInputElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			// A control that left the tree and came back keeps its tree. Only
@@ -19535,7 +19064,7 @@ export class HTMLInputElement extends HTMLElement {
 	// whether it is checked, which is state like any other: it is written
 	// here, where the state changes, so the frame that shows it is scheduled
 	// by the same mutation as every other change.
-	[kSyncUAShadowTree]?(this: Slots<HTMLInputElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLInputElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
@@ -19570,7 +19099,7 @@ export class HTMLInputElement extends HTMLElement {
 		if (!slots.extra.valueText) {
 			return;
 		}
-		const value = slots[kUAValue];
+		const value = slots._uaValue;
 		const placeholder = attributeOf(ownerOf(this), "placeholder") ?? "";
 		// A password puts one bullet per code unit into the shadow tree, never
 		// the real value. So what lays out, paints and can be selected is only
@@ -19628,7 +19157,7 @@ function insertTextControlText(
 	if (!text) {
 		return;
 	}
-	const value = _(textControl)[kUAValue];
+	const value = _(textControl)._uaValue;
 	const {start, end} = getSelectionRecord(textControl)!;
 	const next = value.slice(0, start) + text + value.slice(end);
 	if (textControl.type === "number" && !isFloatPrefix(next)) {
@@ -19672,6 +19201,7 @@ function legacyCanceledActivationBehavior(input: HTMLInputElement): void {
 	if (input.type === "checkbox") {
 		inputSlots.extra.indeterminate = inputSlots.extra.previouslyIndeterminate;
 		inputSlots.extra.checked = inputSlots.extra.previouslyChecked;
+		syncUAShadowTree(input);
 		return;
 	}
 	if (input.type !== "radio") {
@@ -19680,8 +19210,10 @@ function legacyCanceledActivationBehavior(input: HTMLInputElement): void {
 	const previous = inputSlots.extra.previousRadio;
 	inputSlots.extra.previousRadio = null;
 	inputSlots.extra.checked = false;
+	syncUAShadowTree(input);
 	if (previous !== null && getRadioGroup(input).includes(previous)) {
 		_(previous).extra.checked = true;
+		syncUAShadowTree(previous);
 	}
 }
 
@@ -19882,7 +19414,7 @@ function getSteppedValue(
 	const min = parseFloatingPoint(attributeOf(input, "min")?.trim() ?? "");
 	const max = parseFloatingPoint(attributeOf(input, "max")?.trim() ?? "");
 	const inputSlots = _(input);
-	const current = parseFloatingPoint(inputSlots[kUAValue]) ?? 0;
+	const current = parseFloatingPoint(inputSlots._uaValue) ?? 0;
 	const base = min ?? 0;
 
 	// The offset in grid units, rounded enough that a value the grid itself
@@ -19904,7 +19436,7 @@ function getSteppedValue(
 	const places = Math.max(
 		getDecimalPlaces(stepAttribute),
 		getDecimalPlaces(attributeOf(input, "min")),
-		getDecimalPlaces(inputSlots[kUAValue]),
+		getDecimalPlaces(inputSlots._uaValue),
 	);
 	return String(Number(next.toFixed(Math.min(places, 20))));
 }
@@ -20753,8 +20285,8 @@ class HTMLMetaElement extends HTMLElement {
 
 	// HTML §4.2.5.3: the Content-Security-Policy pragma runs when the
 	// element is inserted into a document as a child of its head.
-	override [kInsertionSteps](this: Slots<HTMLMetaElement>): void {
-		superStep(HTMLMetaElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLMetaElement>): void {
+		superStep(HTMLMetaElement, "_insertionSteps").call(this);
 		const content = attributeOf(ownerOf(this), "content");
 		if (
 			ownerOf(this).isConnected &&
@@ -20784,7 +20316,7 @@ function getGaugeGlyphs(host: Element, glyph: string): string {
 
 // What a canvas context's "inherit" direction resolves to.
 function getCanvasDirection(canvas: Element): "ltr" | "rtl" {
-	return getComputedValue(canvas, "direction") === "rtl" ? "rtl" : "ltr";
+	return cssom.getComputedValue(canvas, "direction") === "rtl" ? "rtl" : "ltr";
 }
 
 // A full-width track holding a bar whose width is the fraction filled.
@@ -20836,8 +20368,8 @@ interface HTMLMeterElementExtra extends NodeExtra {
 
 interface HTMLMeterElementSlots extends HTMLElementSlots {
 	extra: HTMLMeterElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLMeterElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLMeterElement[typeof kSyncUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLMeterElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLMeterElement["_syncUAShadowTree"]>;
 }
 
 interface HTMLMeterElement {
@@ -20918,7 +20450,7 @@ class HTMLMeterElement extends HTMLElement {
 		return getLabels(this);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLMeterElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLMeterElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
@@ -20933,7 +20465,7 @@ class HTMLMeterElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLMeterElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLMeterElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
@@ -20949,14 +20481,14 @@ class HTMLMeterElement extends HTMLElement {
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLMeterElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLMeterElement, kAttributeChangeSteps).call(
+		superStep(HTMLMeterElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -21087,8 +20619,6 @@ class HTMLOptGroupElement extends HTMLElement {
 	declare label: string;
 }
 
-const kSelectedness = Symbol("an option's selectedness");
-
 interface HTMLOptionElementExtra extends NodeExtra {
 	selectednessValue: boolean;
 	optionDirty: boolean;
@@ -21096,8 +20626,7 @@ interface HTMLOptionElementExtra extends NodeExtra {
 
 interface HTMLOptionElementSlots extends HTMLElementSlots {
 	extra: HTMLOptionElementExtra;
-	[kSelectedness]: Step<HTMLOptionElement[typeof kSelectedness]>;
-	[kSelectedness]: Step<HTMLOptionElement[typeof kSelectedness]>;
+	_selectedness: Step<HTMLOptionElement["_selectedness"]>;
 }
 
 interface HTMLOptionElement {
@@ -21160,21 +20689,21 @@ class HTMLOptionElement extends HTMLElement {
 		if (select !== null) {
 			askForAReset(select);
 		}
-		return _(this)[kSelectedness];
+		return _(this)._selectedness;
 	}
 
 	set selected(value: boolean) {
 		const slots = _(this);
 		slots.extra.optionDirty = true;
-		slots[kSelectedness] = Boolean(value);
+		slots._selectedness = Boolean(value);
 		const select = getSelect(this);
 		if (select === null) {
 			return;
 		}
-		if (slots[kSelectedness] && !hasAttributeOf(select, "multiple")) {
+		if (slots._selectedness && !hasAttributeOf(select, "multiple")) {
 			for (const option of getOptions(select)) {
 				if (option !== this) {
-					_(option)[kSelectedness] = false;
+					_(option)._selectedness = false;
 				}
 			}
 		}
@@ -21185,13 +20714,13 @@ class HTMLOptionElement extends HTMLElement {
 	// Selectedness is not an attribute and not part of the tree. The one
 	// live list that depends on it is the select's `selectedOptions`, which
 	// is notified here.
-	get [kSelectedness](): boolean {
+	get _selectedness(): boolean {
 		return (this as unknown as Slots<
 			HTMLOptionElement
 		>).extra.selectednessValue;
 	}
 
-	set [kSelectedness](value: boolean) {
+	set _selectedness(value: boolean) {
 		const slots = this as unknown as Slots<HTMLOptionElement>;
 		if (slots.extra.selectednessValue === value) {
 			return;
@@ -21200,18 +20729,18 @@ class HTMLOptionElement extends HTMLElement {
 		const select = getSelect(ownerOf(slots));
 		const selected = select === null ? null : _(select).extra.selectedOptions;
 		if (selected !== null) {
-			_(selected)[kSync]();
+			_(selected)._sync();
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLOptionElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLOptionElement, kAttributeChangeSteps).call(
+		superStep(HTMLOptionElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -21222,7 +20751,7 @@ class HTMLOptionElement extends HTMLElement {
 		if (
 			namespace === null && localName === "selected" && !slots.extra.optionDirty
 		) {
-			slots[kSelectedness] = value !== null;
+			slots._selectedness = value !== null;
 		}
 		const select = getSelect(ownerOf(this));
 		if (select !== null) {
@@ -21230,11 +20759,11 @@ class HTMLOptionElement extends HTMLElement {
 		}
 	}
 
-	override [kCloningSteps](this: Slots<HTMLOptionElement>, copy: Node): void {
+	override _cloningSteps(this: Slots<HTMLOptionElement>, copy: Node): void {
 		const clone = copy as HTMLOptionElement;
 		const slots = this;
 		const cloneSlots = _(clone);
-		cloneSlots[kSelectedness] = slots[kSelectedness];
+		cloneSlots._selectedness = slots._selectedness;
 		cloneSlots.extra.optionDirty = slots.extra.optionDirty;
 	}
 }
@@ -21378,7 +20907,7 @@ interface HTMLOutputElementExtra extends NodeExtra {
 
 interface HTMLOutputElementSlots extends HTMLElementSlots {
 	extra: HTMLOutputElementExtra;
-	[kResetControl]: Step<HTMLOutputElement[typeof kResetControl]>;
+	_resetControl: Step<HTMLOutputElement["_resetControl"]>;
 }
 
 interface HTMLOutputElement {
@@ -21461,7 +20990,7 @@ class HTMLOutputElement extends HTMLElement {
 		setCustomValidity(this, error);
 	}
 
-	[kResetControl]?(this: Slots<HTMLOutputElement>): void {
+	_resetControl?(this: Slots<HTMLOutputElement>): void {
 		const slots = this;
 		if (slots.extra.dirty) {
 			setDescendantText(ownerOf(this), slots.extra.stored);
@@ -21500,8 +21029,8 @@ interface HTMLProgressElementExtra extends NodeExtra {
 
 interface HTMLProgressElementSlots extends HTMLElementSlots {
 	extra: HTMLProgressElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLProgressElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLProgressElement[typeof kSyncUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLProgressElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLProgressElement["_syncUAShadowTree"]>;
 }
 
 interface HTMLProgressElement {
@@ -21545,7 +21074,7 @@ class HTMLProgressElement extends HTMLElement {
 		return getLabels(this);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLProgressElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLProgressElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
@@ -21560,7 +21089,7 @@ class HTMLProgressElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLProgressElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLProgressElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
@@ -21569,14 +21098,14 @@ class HTMLProgressElement extends HTMLElement {
 		setGaugeFill(slots.extra.bar!, position < 0 ? null : position);
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLProgressElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLProgressElement, kAttributeChangeSteps).call(
+		superStep(HTMLProgressElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -21664,11 +21193,11 @@ export interface HTMLSelectElementExtra extends NodeExtra {
 
 export interface HTMLSelectElementSlots extends HTMLElementSlots {
 	extra: HTMLSelectElementExtra;
-	[kUAValueText]: Step<HTMLSelectElement[typeof kUAValueText]>;
-	[kUASelection]: Step<HTMLSelectElement[typeof kUASelection]>;
-	[kResetControl]: Step<HTMLSelectElement[typeof kResetControl]>;
-	[kEnsureUAShadowTree]: Step<HTMLSelectElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLSelectElement[typeof kSyncUAShadowTree]>;
+	_uaValueText: Step<HTMLSelectElement["_uaValueText"]>;
+	_uaSelection: Step<HTMLSelectElement["_uaSelection"]>;
+	_resetControl: Step<HTMLSelectElement["_resetControl"]>;
+	_ensureUAShadowTree: Step<HTMLSelectElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLSelectElement["_syncUAShadowTree"]>;
 }
 
 export interface HTMLSelectElement {
@@ -21851,7 +21380,7 @@ export class HTMLSelectElement extends HTMLElement {
 		if (selected === null) {
 			selected = live(
 				new HTMLCollection(() =>
-					getOptions(this).filter((option) => _(option)[kSelectedness]), this),
+					getOptions(this).filter((option) => _(option)._selectedness), this),
 			) as HTMLCollectionOf<HTMLOptionElement>;
 			slots.extra.selectedOptions = selected;
 		}
@@ -21861,18 +21390,18 @@ export class HTMLSelectElement extends HTMLElement {
 
 	get selectedIndex(): number {
 		askForAReset(this);
-		return getOptions(this).findIndex((option) => _(option)[kSelectedness]);
+		return getOptions(this).findIndex((option) => _(option)._selectedness);
 	}
 
 	set selectedIndex(value: number) {
 		const index = toLong(value);
 		const options = getOptions(this);
 		for (let at = 0; at < options.length; at++) {
-			_(options[at])[kSelectedness] = false;
+			_(options[at])._selectedness = false;
 			_(options[at]).extra.optionDirty = true;
 		}
 		if (index >= 0 && index < options.length) {
-			_(options[index])[kSelectedness] = true;
+			_(options[index])._selectedness = true;
 		}
 		syncUAShadowTree(this);
 	}
@@ -21880,7 +21409,7 @@ export class HTMLSelectElement extends HTMLElement {
 	get value(): string {
 		askForAReset(this);
 		for (const option of getOptions(this)) {
-			if (_(option)[kSelectedness]) {
+			if (_(option)._selectedness) {
 				return option.value;
 			}
 		}
@@ -21893,11 +21422,11 @@ export class HTMLSelectElement extends HTMLElement {
 		let found = false;
 		for (const option of options) {
 			if (!found && option.value === wanted) {
-				_(option)[kSelectedness] = true;
+				_(option)._selectedness = true;
 				_(option).extra.optionDirty = true;
 				found = true;
 			} else {
-				_(option)[kSelectedness] = false;
+				_(option)._selectedness = false;
 			}
 		}
 		syncUAShadowTree(this);
@@ -21915,7 +21444,7 @@ export class HTMLSelectElement extends HTMLElement {
 		return getValidationMessage(this);
 	}
 
-	get [kUAValueText](): globalThis.Text | null {
+	get _uaValueText(): globalThis.Text | null {
 		return (this as unknown as Slots<HTMLSelectElement>).extra.valueText;
 	}
 
@@ -21982,20 +21511,20 @@ export class HTMLSelectElement extends HTMLElement {
 	// A select's selection record is always collapsed at the label's start, so
 	// the caret placement path can treat a select like a text control. The
 	// caret is the focus of the selection.
-	[kUASelection]?(): {start: number; end: number; direction: string} {
+	_uaSelection?(): {start: number; end: number; direction: string} {
 		return {start: 0, end: 0, direction: "none"};
 	}
 
-	[kResetControl]?(this: Slots<HTMLSelectElement>): void {
+	_resetControl?(this: Slots<HTMLSelectElement>): void {
 		for (const option of getOptions(ownerOf(this))) {
-			_(option)[kSelectedness] = hasAttributeOf(option, "selected");
+			_(option)._selectedness = hasAttributeOf(option, "selected");
 			_(option).extra.optionDirty = false;
 		}
 		askForAReset(ownerOf(this));
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLSelectElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLSelectElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			// Removed, the document's observer let go of it.
@@ -22033,11 +21562,11 @@ export class HTMLSelectElement extends HTMLElement {
 	// The dropdown is transient interaction state. Leaving the tree ends the
 	// interaction, the same as losing focus does. Removal also causes a focus
 	// loss, since focus cannot rest on an element off the tree.
-	override [kRemovingSteps](
+	override _removingSteps(
 		this: Slots<HTMLSelectElement>,
 		oldParent: Node,
 	): void {
-		superStep(HTMLSelectElement, kRemovingSteps).call(this, oldParent);
+		superStep(HTMLSelectElement, "_removingSteps").call(this, oldParent);
 		const slots = this;
 		if (slots.extra.pickerHighlight !== null) {
 			slots.extra.pickerHighlight = null;
@@ -22045,7 +21574,7 @@ export class HTMLSelectElement extends HTMLElement {
 		}
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLSelectElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLSelectElement>): void {
 		const slots = this;
 		const picker = slots.extra.picker;
 		if (!slots.extra.upgraded || picker === null) {
@@ -22072,8 +21601,8 @@ export class HTMLSelectElement extends HTMLElement {
 
 		syncPickerRows(ownerOf(this), picker);
 
-		// Anchor below the text control in DOCUMENT coordinates (the picker's
-		// containing block is the ICB), at least the text control's width
+		// Anchor below the select in DOCUMENT coordinates (the picker's
+		// containing block is the ICB), at least the select's width
 		// and as wide as its widest row, a grouped option's indent included.
 		const rect = attachedSlots.extra.layout.getRect(ownerOf(this));
 		if (rect) {
@@ -22316,7 +21845,7 @@ function getDisplaySize(select: HTMLSelectElement): number {
 // more than one option selected keeps only the last.
 function askForAReset(select: HTMLSelectElement): void {
 	const options = getOptions(select);
-	const selected = options.filter((option) => _(option)[kSelectedness]);
+	const selected = options.filter((option) => _(option)._selectedness);
 	if (
 		!hasAttributeOf(select, "multiple") &&
 		getDisplaySize(select) === 1 &&
@@ -22324,13 +21853,13 @@ function askForAReset(select: HTMLSelectElement): void {
 	) {
 		const first = options.find((option) => !isActuallyDisabled(option));
 		if (first !== undefined) {
-			_(first)[kSelectedness] = true;
+			_(first)._selectedness = true;
 		}
 		return;
 	}
 	if (selected.length >= 2 && !hasAttributeOf(select, "multiple")) {
 		for (let index = 0; index < selected.length - 1; index++) {
-			_(selected[index])[kSelectedness] = false;
+			_(selected[index])._selectedness = false;
 		}
 	}
 }
@@ -22361,7 +21890,7 @@ export class HTMLStyleElement extends HTMLElement {
 
 	/** Null outside a tree. */
 	get sheet(): CSSStyleSheet | null {
-		return styleElementSheet(this);
+		return cssom.styleElementSheet(this);
 	}
 
 	get disabled(): boolean {
@@ -22372,18 +21901,18 @@ export class HTMLStyleElement extends HTMLElement {
 		void _value;
 	}
 
-	override [kInsertionSteps](this: Slots<HTMLStyleElement>): void {
-		superStep(HTMLStyleElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLStyleElement>): void {
+		superStep(HTMLStyleElement, "_insertionSteps").call(this);
 		const slots = this;
 		_(slots.document).extra.styleElements =
 			_(slots.document).extra.styleElements + 1;
 	}
 
-	override [kRemovingSteps](
+	override _removingSteps(
 		this: Slots<HTMLStyleElement>,
 		oldParent: Node,
 	): void {
-		superStep(HTMLStyleElement, kRemovingSteps).call(this, oldParent);
+		superStep(HTMLStyleElement, "_removingSteps").call(this, oldParent);
 		const slots = this;
 		_(slots.document).extra.styleElements =
 			_(slots.document).extra.styleElements - 1;
@@ -22700,15 +22229,8 @@ function getChildElementsNamed(parent: Node, localName: string): Element[] {
 		nodeSlots !== null;
 		nodeSlots = nodeSlots.next) {
 		const node = objectOf(nodeSlots);
-		if (nodeTypeOf(node) !== ELEMENT_NODE) {
-			continue;
-		}
-		const element = node as Element;
-		if (
-			_(element).namespace === HTML_NAMESPACE &&
-			_(element).localName === localName
-		) {
-			found.push(element);
+		if (isHTMLElementNamed(node, localName)) {
+			found.push(node as Element);
 		}
 	}
 	return found;
@@ -22945,15 +22467,15 @@ export interface HTMLTextAreaElementExtra extends NodeExtra {
 
 export interface HTMLTextAreaElementSlots extends HTMLElementSlots {
 	extra: HTMLTextAreaElementExtra;
-	[kUAValue]: Step<HTMLTextAreaElement[typeof kUAValue]>;
-	[kUAValueText]: Step<HTMLTextAreaElement[typeof kUAValueText]>;
-	[kSetUAValue]: Step<HTMLTextAreaElement[typeof kSetUAValue]>;
-	[kUASelection]: Step<HTMLTextAreaElement[typeof kUASelection]>;
-	[kSetUASelection]: Step<HTMLTextAreaElement[typeof kSetUASelection]>;
-	[kResetControl]: Step<HTMLTextAreaElement[typeof kResetControl]>;
-	[kUASelectionRange]: Step<HTMLTextAreaElement[typeof kUASelectionRange]>;
-	[kEnsureUAShadowTree]: Step<HTMLTextAreaElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLTextAreaElement[typeof kSyncUAShadowTree]>;
+	_uaValue: Step<HTMLTextAreaElement["_uaValue"]>;
+	_uaValueText: Step<HTMLTextAreaElement["_uaValueText"]>;
+	_setUAValue: Step<HTMLTextAreaElement["_setUAValue"]>;
+	_uaSelection: Step<HTMLTextAreaElement["_uaSelection"]>;
+	_setUASelection: Step<HTMLTextAreaElement["_setUASelection"]>;
+	_resetControl: Step<HTMLTextAreaElement["_resetControl"]>;
+	_uaSelectionRange: Step<HTMLTextAreaElement["_uaSelectionRange"]>;
+	_ensureUAShadowTree: Step<HTMLTextAreaElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLTextAreaElement["_syncUAShadowTree"]>;
 }
 
 export interface HTMLTextAreaElement {
@@ -23021,7 +22543,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 				slots.extra.goalColumn = null;
 			}
 
-			const value = slots[kUAValue];
+			const value = slots._uaValue;
 			const {start, end, direction} = getSelectionRecord(this)!;
 			const backward = direction === "backward";
 			const caret = backward ? start : end;
@@ -23106,7 +22628,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 	}
 
 	get defaultValue(): string {
-		return getDescendantText(this);
+		return getChildText(this);
 	}
 
 	set defaultValue(value: string) {
@@ -23114,13 +22636,13 @@ export class HTMLTextAreaElement extends HTMLElement {
 	}
 
 	get value(): string {
-		return _(this)[kUAValue];
+		return _(this)._uaValue;
 	}
 
 	set value(value: string) {
 		editedSinceChange.delete(this);
 		const slots = _(this);
-		const previous = slots[kUAValue];
+		const previous = slots._uaValue;
 		slots.extra.value = normalizeNewlines(value === null ? "" : String(value));
 		slots.extra.dirty = true;
 		if (previous !== slots.extra.value) {
@@ -23187,14 +22709,14 @@ export class HTMLTextAreaElement extends HTMLElement {
 		return getValidationMessage(this);
 	}
 
-	get [kUAValue](): string {
+	get _uaValue(): string {
 		const slots = this as unknown as Slots<HTMLTextAreaElement>;
 		return slots.extra.dirty
 			? slots.extra.value
-			: normalizeNewlines(getDescendantText(ownerOf(slots)));
+			: normalizeNewlines(getChildText(ownerOf(slots) as Element));
 	}
 
-	get [kUAValueText](): globalThis.Text | null {
+	get _uaValueText(): globalThis.Text | null {
 		return (this as unknown as Slots<HTMLTextAreaElement>).extra.valueText;
 	}
 
@@ -23225,7 +22747,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		if (arguments.length < 2) {
 			throw new TypeError("setSelectionRange needs a start and an end");
 		}
-		_(this)[kSetUASelection]!(start ?? 0, end ?? 0, direction);
+		_(this)._setUASelection!(start ?? 0, end ?? 0, direction);
 	}
 
 	setRangeText(replacement: string): void;
@@ -23265,7 +22787,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 
 	// A user edit: sets the raw value and the dirty value flag, and leaves
 	// the selection to the edit that made it.
-	[kSetUAValue]?(this: Slots<HTMLTextAreaElement>, value: string): void {
+	_setUAValue?(this: Slots<HTMLTextAreaElement>, value: string): void {
 		const slots = this;
 		slots.extra.value = normalizeNewlines(value);
 		slots.extra.dirty = true;
@@ -23273,7 +22795,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 	}
 
 	// A textarea's selection is always its own. See the input's version.
-	[kUASelection]?(this: Slots<HTMLTextAreaElement>): {
+	_uaSelection?(this: Slots<HTMLTextAreaElement>): {
 		start: number;
 		end: number;
 		direction: string;
@@ -23286,7 +22808,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		};
 	}
 
-	[kSetUASelection]?(
+	_setUASelection?(
 		this: Slots<HTMLTextAreaElement>,
 		start: number,
 		end: number,
@@ -23298,7 +22820,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 			toUnsignedLong(start),
 			toUnsignedLong(end),
 			direction,
-			slots[kUAValue].length,
+			slots._uaValue.length,
 			(selection) => {
 				slots.extra.selectionStart = selection[0];
 				slots.extra.selectionEnd = selection[1];
@@ -23307,7 +22829,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		);
 	}
 
-	override [kCloningSteps](this: Slots<HTMLTextAreaElement>, copy: Node): void {
+	override _cloningSteps(this: Slots<HTMLTextAreaElement>, copy: Node): void {
 		const clone = copy as HTMLTextAreaElement;
 		const slots = this;
 		const cloneSlots = _(clone);
@@ -23315,20 +22837,20 @@ export class HTMLTextAreaElement extends HTMLElement {
 		cloneSlots.extra.dirty = slots.extra.dirty;
 	}
 
-	[kResetControl]?(this: Slots<HTMLTextAreaElement>): void {
+	_resetControl?(this: Slots<HTMLTextAreaElement>): void {
 		const slots = this;
 		slots.extra.value = "";
 		slots.extra.dirty = false;
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kUASelectionRange]?(
+	_uaSelectionRange?(
 		this: Slots<HTMLTextAreaElement>,
 	): globalThis.Range | null {
 		return getTextSelectionRange(ownerOf(this), this.extra.valueText);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLTextAreaElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLTextAreaElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
@@ -23359,13 +22881,13 @@ export class HTMLTextAreaElement extends HTMLElement {
 
 	// Placeholder visibility is real CSS (an inline display:none), not
 	// painter logic, so the normal pipeline never sees a hidden placeholder.
-	[kSyncUAShadowTree]?(this: Slots<HTMLTextAreaElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLTextAreaElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
 		}
 		const attached = getAttachedDocument(ownerOf(this))!;
-		const value = slots[kUAValue];
+		const value = slots._uaValue;
 		const placeholder = attributeOf(ownerOf(this), "placeholder") ?? "";
 		let changed = false;
 		if (slots.extra.valueText!.data !== value) {
@@ -23587,7 +23109,6 @@ class HTMLUListElement extends HTMLElement {
 interface PopoverState {
 	visibility: "hidden" | "showing";
 	mode: "auto" | null;
-	trigger: Element | null;
 	previouslyFocused: Element | null;
 	hiding: boolean;
 	toggleTask: {oldState: string; canceled: boolean} | null;
@@ -23604,7 +23125,6 @@ function getPopoverState(element: Element): PopoverState {
 		state = {
 			visibility: "hidden",
 			mode: null,
-			trigger: null,
 			previouslyFocused: null,
 			hiding: false,
 			toggleTask: null,
@@ -23679,8 +23199,8 @@ function stateChanged(element: Element, states: readonly string[]): void {
 	if (attached === undefined) {
 		return;
 	}
-	_(attached).extra.cascade.handleStateChange(element, states);
-	_(attached).extra.framebuffer.invalidate();
+	cssom.handleStateChange(_(attached).extra.cascade, element, states);
+	invalidate(_(attached).extra.framebuffer);
 	queueMicrotask(() => {
 		void _(attached).extra.render();
 	});
@@ -23822,7 +23342,6 @@ function showPopover(
 	const originallyFocused = documentSlots.extra.activeElement;
 	getTopLayer(document).add(element);
 	state.visibility = "showing";
-	state.trigger = source;
 	popoverFocusingSteps(element);
 	if (shouldRestoreFocus && getPopoverAttributeState(element) !== null) {
 		state.previouslyFocused = originallyFocused;
@@ -23898,7 +23417,6 @@ function hidePopover(
 		}
 	}
 	getTopLayer(document).delete(element);
-	state.trigger = null;
 	state.mode = null;
 	state.visibility = "hidden";
 	if (fireEvents) {
@@ -23956,22 +23474,6 @@ function hidePopoverStackUntil(
 	}
 }
 
-// Run by both light dismiss and an opening popover. With no hint stack,
-// this is just the auto stack's version.
-function hidePopoversUntil(
-	document: globalThis.Document,
-	endpoint: globalThis.Element | null,
-	focusPreviousElement: boolean,
-	fireEvents: boolean,
-): void {
-	hidePopoverStackUntil(
-		document as Document,
-		endpoint as Element | null,
-		focusPreviousElement,
-		fireEvents,
-	);
-}
-
 // The open auto popover a node belongs to, either by sitting inside it
 // in the flat tree or by being invoked from inside it. Returns the LAST
 // such popover in the stack, so everything above it is exactly what is
@@ -24408,7 +23910,12 @@ export function lightDismissRelease(
 	}
 	const document = _((target as Element)).document;
 	if (getTopmostAutoPopover(document) !== null) {
-		hidePopoversUntil(document, dismissAncestor, false, true);
+		hidePopoverStackUntil(
+			document as Document,
+			dismissAncestor as Element | null,
+			false,
+			true,
+		);
 	}
 }
 
@@ -24526,26 +24033,16 @@ function fullscreenChanged(element: Element): void {
 	_maybe(getAttachedDocument(element))?.extra.layout.invalidate(element);
 }
 
-// The alternate screen comes up holding whatever the terminal left in
-// it, so entering clears it and homes the cursor. The cursor is hidden
-// before the screen is touched, so it never blinks on the clear.
+// An element outside the document cannot go fullscreen: the Fullscreen
+// Standard fires fullscreenerror and rejects with a TypeError.
 function enterFullscreen(element: Element): void {
-	const stack = getFullscreenStack(_(element).document);
-	try {
-		if (!element.isConnected) {
-			const error = new Error("The element is not contained by a document.");
-			error.name = "InvalidStateError";
-			throw error;
-		}
-		stack.push(element);
-		fireFullscreenEvent("fullscreenchange", element);
-	} catch (error) {
-		if (stack[stack.length - 1] === element) {
-			stack.pop();
-		}
-		fireFullscreenEvent("fullscreenerror", element, {error: error as Error});
+	if (!element.isConnected) {
+		const error = new TypeError("The element is not in the document");
+		fireFullscreenEvent("fullscreenerror", element, {error});
 		throw error;
 	}
+	getFullscreenStack(_(element).document).push(element);
+	fireFullscreenEvent("fullscreenchange", element);
 }
 
 function getDatasetAttributeName(property: string): string {
@@ -24958,11 +24455,8 @@ function noValidityFlags(): ValidityFlags {
 	};
 }
 
-const kValidityFlags = Symbol("validity flags");
-
 interface ValidityStateSlots {
 	flags: () => ValidityFlags;
-	[kValidityFlags]: Step<ValidityState[typeof kValidityFlags]>;
 }
 
 interface ValidityState {
@@ -24992,10 +24486,6 @@ class ValidityState {
 		const flags = _(this).flags();
 		return !VALIDITY_FLAG_NAMES.some((name) => flags[name]);
 	}
-
-	get [kValidityFlags](): ValidityFlags {
-		return (this as unknown as Slots<ValidityState>).flags();
-	}
 }
 
 declareSealedRoot(ValidityState);
@@ -25003,7 +24493,7 @@ declareSealedRoot(ValidityState);
 for (const name of VALIDITY_FLAG_NAMES) {
 	Object.defineProperty(ValidityState.prototype, name, {
 		get(this: ValidityState): boolean {
-			return _(this)[kValidityFlags][name];
+			return _(this).flags()[name];
 		},
 		enumerable: true,
 		configurable: true,
@@ -25643,13 +25133,8 @@ function setCustomValidity(element: Element, error: string): void {
 function getValidityState(element: Element): ValidityState {
 	let state = validityStates.get(element);
 	if (state === undefined) {
-		const previous = internalConstruction;
-		internalConstruction = true;
-		try {
-			state = new ValidityState(() => getValidityFlags(element));
-		} finally {
-			internalConstruction = previous;
-		}
+		state = constructInternal(() =>
+			new ValidityState(() => getValidityFlags(element)));
 		validityStates.set(element, state);
 	}
 	return state;
@@ -25899,7 +25384,7 @@ function collectSelectValidity(
 		return;
 	}
 	const options = getOptions(select);
-	const selected = options.filter((option) => _(option)[kSelectedness]);
+	const selected = options.filter((option) => _(option)._selectedness);
 	if (selected.length === 0) {
 		flags.valueMissing = true;
 		return;
@@ -26174,7 +25659,7 @@ export function isInFlatTree(target: globalThis.Node): boolean {
 // The flat-tree hops: shadow content in its slot's place, and
 // pseudo-element nodes among the children they belong beside. Neither is
 // a link a node stores, so each hop computes its result. The engine
-// walks this tree through the three traversals exported below; the DOM's
+// walks this tree through the traversals exported below; the DOM's
 // own TreeWalker never does.
 
 function isElementOrText(node: Node): boolean {
@@ -26242,7 +25727,7 @@ export function *flatDescendants(
 // The flow is the flat tree seen through style: a `display: contents`
 // element is not a box, so the flow passes through it to its children.
 function isDisplayContents(node: globalThis.Node): boolean {
-	return getComputedValue(node as Element, "display") === "contents";
+	return cssom.getComputedValue(node as Element, "display") === "contents";
 }
 
 /**
@@ -26606,10 +26091,6 @@ interface ContentBox {
 	left: number;
 }
 
-// The observers' measuring hook, an internal step, which author code
-// must never see on an observer it holds.
-const kMeasure = Symbol("measure");
-
 // Keyed by document, not by a registry object, because the document is
 // what an observer can reach from the target it was given. That is why
 // `new ResizeObserver(callback)` needs only its callback.
@@ -26661,7 +26142,7 @@ interface ObserverSlots<TState, TEntry, TOptions> {
 	>;
 	// One entry per document the observer has a target in.
 	homes: Set<object>;
-	[kMeasure](
+	_measure(
 		target: globalThis.Element,
 		last: TState | null,
 		layout: Layout,
@@ -26737,7 +26218,7 @@ function checkObserver<TState, TEntry, TOptions>(
 ): void {
 	const entries: TEntry[] = [];
 	for (const [target, observation] of _(observer).targets) {
-		const result = _(observer)[kMeasure](
+		const result = _(observer)._measure(
 			target,
 			observation.last,
 			layout,
@@ -26793,7 +26274,7 @@ interface ResizeObserverSlots
 		ResizeObserverEntry,
 		ResizeObserverOptions
 	> {
-	[kMeasure]: Step<ResizeObserver[typeof kMeasure]>;
+	_measure: Step<ResizeObserver["_measure"]>;
 }
 
 interface ResizeObserver
@@ -26837,7 +26318,7 @@ class ResizeObserver {
 		disconnectObserver(this as unknown as AnyObserver);
 	}
 
-	[kMeasure](
+	_measure(
 		target: globalThis.Element,
 		last: ResizeSize | null,
 		layout: Layout,
@@ -26980,7 +26461,7 @@ function checkObserverMargin(margin: string, what: string): string {
 interface IntersectionObserverSlots
 	extends ObserverSlots<number, IntersectionObserverEntry, void> {
 	intersectionRoot: globalThis.Element | globalThis.Document | null;
-	[kMeasure]: Step<IntersectionObserver[typeof kMeasure]>;
+	_measure: Step<IntersectionObserver["_measure"]>;
 }
 
 interface IntersectionObserver {
@@ -27033,15 +26514,15 @@ class IntersectionObserver {
 		disconnectObserver(this as unknown as AnyObserver);
 	}
 
-	// Records are computed and delivered in the same pass (see the
-	// manager's flush), so nothing is ever queued undelivered and this is
+	// Records are computed and delivered in the same pass (see
+	// flushObservers()), so nothing is ever queued undelivered and this is
 	// always empty. It exists because the interface has it and code checks
 	// for it.
 	takeRecords(): IntersectionObserverEntry[] {
 		return [];
 	}
 
-	[kMeasure](
+	_measure(
 		this: Slots<IntersectionObserver>,
 		target: globalThis.Element,
 		last: number | null,
@@ -27141,8 +26622,7 @@ function applyRootMargin(
 
 // This is what the spec actually watches. An observation fires when
 // this CHANGES, so a target scrolling through `[0, 0.5, 1]` reports at
-// each step. Tracking only the boolean "is it intersecting" collapsed
-// all of those into one callback and made threshold arrays decorative.
+// each step, not once when it starts to intersect.
 function getThresholdIndex(
 	observer: IntersectionObserver,
 	ratio: number,
@@ -27186,14 +26666,6 @@ export function isDocumentElement(node: globalThis.Node): boolean {
 		slots.nodeType === ELEMENT_NODE;
 }
 
-function isHTMLDocument(document: Document): boolean {
-	return _(document).extra.type === "html";
-}
-
-/**
- * The event handler attributes installed on the prototype below, and the
- * ParentNode mixin from the tables.
- */
 export interface DocumentExtra extends NodeExtra {
 	// What an attached document renders through, set by attachDocument. A
 	// headless document has none and behaves as a document with no browsing
@@ -27242,7 +26714,6 @@ export interface DocumentExtra extends NodeExtra {
 	activeElement: Element | null;
 	defaultView: object | null;
 	styleElements: number;
-	children: HTMLCollection | null;
 	topLayer: Set<Element>;
 	// The reentrancy guards the popover algorithms keep on the document:
 	// one popover opening at a time, and a count of the ones closing under
@@ -27961,15 +27432,15 @@ export class Document extends Node implements globalThis.Document {
 	}
 
 	get styleSheets(): globalThis.StyleSheetList {
-		return getStyleSheets(this);
+		return cssom.getStyleSheets(this);
 	}
 
 	get adoptedStyleSheets(): globalThis.CSSStyleSheet[] {
-		return getAdoptedStyleSheets(this);
+		return cssom.getAdoptedStyleSheets(this);
 	}
 
 	set adoptedStyleSheets(value: globalThis.CSSStyleSheet[]) {
-		adoptStyleSheets(this, value);
+		cssom.adoptStyleSheets(this, value);
 	}
 
 	/** Parses declarative shadow roots too. */
@@ -28682,7 +28153,7 @@ export class Document extends Node implements globalThis.Document {
 
 	// A document's parent in the event path is its window, for every event
 	// but load.
-	override [kGetTheParent](
+	override _getTheParent(
 		this: Slots<Document>,
 		event: Event,
 	): EventTarget | null {
@@ -28692,7 +28163,7 @@ export class Document extends Node implements globalThis.Document {
 		return this.extra.defaultView as EventTarget | null;
 	}
 
-	override [kCloneSingle](this: Slots<Document>, _document: Document): Node {
+	override _cloneSingle(this: Slots<Document>, _document: Document): Node {
 		const copy = new Document();
 		copyDocumentState(ownerOf(this), copy);
 		return copy;
@@ -28782,15 +28253,10 @@ function getDocumentCollection(
 	let collection = collections.get(kind);
 	if (collection === undefined) {
 		collection = live(
-			new HTMLCollection(() => {
-				const found: Element[] = [];
-				for (const node of descendants(document)) {
-					if (nodeTypeOf(node) === ELEMENT_NODE && match(node as Element)) {
-						found.push(node as Element);
-					}
-				}
-				return found;
-			}, document, null, watched),
+			new HTMLCollection(() =>
+				getDescendantElements(document, []).filter(
+					match,
+				), document, null, watched),
 		);
 		collections.set(kind, collection);
 	}
@@ -28831,9 +28297,9 @@ function isAllNamed(element: Element, name: string): boolean {
 // also falsy and reports its typeof as "undefined", which no JavaScript
 // object can do, so here it is an ordinary collection.
 interface HTMLAllCollectionSlots extends LiveListSlots {
-	[kListMembers]: Step<HTMLAllCollection[typeof kListMembers]>;
-	[kListNames]: Step<HTMLAllCollection[typeof kListNames]>;
-	[kAttributeSync]: Step<HTMLAllCollection[typeof kAttributeSync]>;
+	_listMembers: Step<HTMLAllCollection["_listMembers"]>;
+	_listNames: Step<HTMLAllCollection["_listNames"]>;
+	_attributeSync: Step<HTMLAllCollection["_attributeSync"]>;
 }
 
 interface HTMLAllCollection extends LiveList {
@@ -28900,11 +28366,11 @@ class HTMLAllCollection {
 		);
 	}
 
-	[kListMembers](this: Slots<HTMLAllCollection>): Node[] {
+	_listMembers(this: Slots<HTMLAllCollection>): Node[] {
 		return getDescendantElements(this.owner as Document, []);
 	}
 
-	[kListNames](items: Node[]): Map<string, Node> {
+	_listNames(items: Node[]): Map<string, Node> {
 		const named = new Map<string, Node>();
 		for (const item of items) {
 			const element = item as Element;
@@ -28926,13 +28392,13 @@ class HTMLAllCollection {
 	}
 
 	// An id or name moves the named properties without moving a member.
-	[kAttributeSync](
+	_attributeSync(
 		this: Slots<HTMLAllCollection>,
 		element: Element,
 		localName: string,
 	): void {
 		if (localName !== "id" && localName !== "name") {
-			LiveList.prototype[kAttributeSync].call(this, element, localName);
+			LiveList.prototype._attributeSync.call(this, element, localName);
 			return;
 		}
 		if (this.exact) {
@@ -29109,7 +28575,7 @@ interface XMLDocument {
 }
 
 class XMLDocument extends Document {
-	override [kCloneSingle](this: Slots<XMLDocument>, _document: Document): Node {
+	override _cloneSingle(this: Slots<XMLDocument>, _document: Document): Node {
 		const copy = new XMLDocument();
 		copyDocumentState(ownerOf(this), copy);
 		return copy;
@@ -29788,6 +29254,12 @@ function isDocumentScroller(element: Element): boolean {
 
 const scrolledElements = new WeakMap<Document, Set<Element>>();
 
+// The scroll steps of "update the rendering": each box scrolled since the
+// last frame gets one "scroll" event, and the document one that bubbles
+// to the window, before the frame's callbacks run.
+const pendingScrollTargets = new WeakMap<Document, Set<Element>>();
+const reportedDocumentScrollTop = new WeakMap<Document, number>();
+
 // A write on an attached document rounds to whole cells (everything
 // paints on the cell grid, like the document scroll), clamps into the
 // range layout reports for the box, stores the value, and tells the
@@ -29796,12 +29268,6 @@ const scrolledElements = new WeakMap<Document, Set<Element>>();
 // run) stores the write unclamped; the caret-reveal code owns those
 // offsets and keeps them sane. On a headless document the write is
 // stored and read back, and nothing moves.
-// The scroll steps of "update the rendering": each box scrolled since the
-// last frame gets one "scroll" event, and the document one that bubbles
-// to the window, before the frame's callbacks run.
-const pendingScrollTargets = new WeakMap<Document, Set<Element>>();
-const reportedDocumentScrollTop = new WeakMap<Document, number>();
-
 function setScrollOffset(
 	element: Element,
 	axis: "left" | "top",
@@ -29849,7 +29315,7 @@ function setScrollOffset(
 	if (axis === "top") {
 		recordScrollShift(attached, document, element, next - previous);
 	} else {
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 	}
 	let pending = pendingScrollTargets.get(document);
 	if (pending === undefined) {
@@ -29987,7 +29453,7 @@ export function clampScrollOffsets(document: globalThis.Document): void {
 	}
 	if (changed) {
 		scrollShifts.delete(document as Document);
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 	}
 }
@@ -30005,7 +29471,7 @@ function recordScrollShift(
 		shift.delta += delta;
 	} else {
 		scrollShifts.delete(document);
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 	}
 }
 
@@ -30062,12 +29528,12 @@ function cloneNode(
 ): Node {
 	const nodeSlots = _(node);
 	const target = document ?? nodeSlots.document;
-	const copy = nodeSlots[kCloneSingle](target);
+	const copy = nodeSlots._cloneSingle(target);
 	const copySlots = _(copy);
 	if (nodeTypeOf(copy) === DOCUMENT_NODE) {
 		copySlots.document = copy as Document;
 	}
-	nodeSlots[kCloningSteps](copy, target, deep);
+	nodeSlots._cloningSteps(copy, target, deep);
 	if (nodeTypeOf(node) === ELEMENT_NODE) {
 		const shadow = _((node as Element)).shadowRoot;
 		if (shadow !== null && _(shadow).extra.clonable) {
@@ -31636,7 +31102,8 @@ function scheduleSelectionChange(document: Document): void {
 	// below. That guard drops the second move in a task but not its paint.
 	const attached = getAttachedDocument(document);
 	if (attached !== undefined) {
-		_(attached).extra.framebuffer.invalidate();
+		_(attached).extra.layout.selectionMoved = true;
+		requestFrame(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 	}
 	const documentSlots = _(document);
@@ -31754,6 +31221,25 @@ interface SelectionSlots {
 	direction: "forwards" | "backwards" | "directionless";
 }
 
+function collapseSelectionToEdge(selection: Selection, start: boolean): void {
+	const slots = _(selection);
+	const range = slots.range;
+	if (range === null) {
+		throw domError("InvalidStateError", "The selection has no range");
+	}
+	const rangeSlots = _(range);
+	const point: [Node, number] = start
+		? [rangeSlots.startNode, rangeSlots.startOffset]
+		: [rangeSlots.endNode, rangeSlots.endOffset];
+	associateSelectionRange(
+		selection,
+		createRangeBetween(selection, point, point),
+		point,
+		point,
+		slots.direction,
+	);
+}
+
 interface Selection {
 	readonly [internals]: SelectionSlots;
 }
@@ -32008,35 +31494,11 @@ class Selection implements globalThis.Selection {
 	}
 
 	collapseToStart(): void {
-		const slots = _(this);
-		const range = slots.range;
-		if (range === null) {
-			throw domError("InvalidStateError", "The selection has no range");
-		}
-		const point: [Node, number] = [_(range).startNode, _(range).startOffset];
-		associateSelectionRange(
-			this,
-			createRangeBetween(this, point, point),
-			point,
-			point,
-			slots.direction,
-		);
+		collapseSelectionToEdge(this, true);
 	}
 
 	collapseToEnd(): void {
-		const slots = _(this);
-		const range = slots.range;
-		if (range === null) {
-			throw domError("InvalidStateError", "The selection has no range");
-		}
-		const point: [Node, number] = [_(range).endNode, _(range).endOffset];
-		associateSelectionRange(
-			this,
-			createRangeBetween(this, point, point),
-			point,
-			point,
-			slots.direction,
-		);
+		collapseSelectionToEdge(this, false);
 	}
 
 	extend(node: Node, offset = 0): void {
@@ -32352,7 +31814,7 @@ function getBlockOf(node: Node): Element | null {
 		ancestor !== null;
 		ancestor = ancestor.parentElement as Element | null
 	) {
-		const display = getComputedValue(ancestor, "display");
+		const display = cssom.getComputedValue(ancestor, "display");
 		if (!display.startsWith("inline") && display !== "contents") {
 			return ancestor;
 		}
@@ -32484,8 +31946,6 @@ function getSelectionIndex(
 	return last;
 }
 
-// An offset on the seam between two nodes maps to the earlier node's
-// end, which is the same position as the later node's start.
 // An index where one text node ends and the next begins is a point in
 // either. The end of the earlier node is the default; a line start wants
 // the later one.
@@ -32583,11 +32043,6 @@ function getSelectionLine(lines: SelectionLine[], index: number): number {
 	return lines.length - 1;
 }
 
-function getCaretColumn(layout: Layout, point: [Node, number]): number | null {
-	const rect = layout.getCaretRect(point[0], point[1]);
-	return rect === null ? null : rect.x;
-}
-
 // Moving up from the first line or down from the last line goes to that
 // line's end, as a browser's arrow key does. The column is a screen
 // column and the target is a screen row, so the landing offset comes
@@ -32612,7 +32067,7 @@ function selectionLineMove(
 	if (target >= lines.length) {
 		return getSelectionPoint(run, lines[lines.length - 1].end);
 	}
-	const column = getCaretColumn(layout, from);
+	const column = layout.getCaretRect(from[0], from[1])?.x ?? null;
 	// Within the target line's own block. Scrolled out of its box, the
 	// line shares its rows with whatever covers them there, and a search of
 	// the whole document landed in that instead.
@@ -32720,7 +32175,9 @@ export function selectUnits(
 			return true;
 		}
 		const parent = flatParentElement(part.node);
-		const whiteSpace = parent === null ? "" : getWhiteSpace(parent as Element);
+		const whiteSpace = parent === null
+			? ""
+			: cssom.getWhiteSpace(parent as Element);
 		return /^(pre|pre-wrap|pre-line|break-spaces)$/.test(whiteSpace);
 	};
 	const [anchorStart, anchorEnd] = getUnitBounds(run.text, from, unit, isBreak);
@@ -33439,7 +32896,7 @@ function invalidateHighlights(document: Document): void {
 	if (attached === undefined) {
 		return;
 	}
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -33698,11 +33155,6 @@ function traverseIterator(
 	const iteratorSlots = _(iterator);
 	let node: Node | null = iteratorSlots.reference;
 	let before = iteratorSlots.pointerBefore;
-	const state = {
-		whatToShow: iteratorSlots.whatToShow,
-		filter: iteratorSlots.filter,
-		active: iteratorSlots.active,
-	};
 	for (;;) {
 		if (forward) {
 			if (!before) {
@@ -33723,7 +33175,7 @@ function traverseIterator(
 				before = true;
 			}
 		}
-		if (filterNode(state, node as Node) === FILTER_ACCEPT) {
+		if (filterNode(iteratorSlots, node as Node) === FILTER_ACCEPT) {
 			// A filter that removed the node it was filtering leaves the
 			// reference where the pre-removing steps put it. A node outside the
 			// root can never be the reference.
@@ -33783,7 +33235,6 @@ export interface TreeWalkerSlots {
 	whatToShow: number;
 	filter: NodeFilterInput;
 	active: {value: boolean};
-	[kState]: Step<TreeWalker[typeof kState]>;
 }
 
 export interface TreeWalker {
@@ -33824,19 +33275,6 @@ export class TreeWalker implements globalThis.TreeWalker {
 		_(this).current = node as Node;
 	}
 
-	get [kState](): {
-		whatToShow: number;
-		filter: NodeFilterInput;
-		active: {value: boolean};
-	} {
-		const slots = this as unknown as Slots<TreeWalker>;
-		return {
-			whatToShow: slots.whatToShow,
-			filter: slots.filter,
-			active: slots.active,
-		};
-	}
-
 	parentNode(): globalThis.Node | null {
 		return walkParent(this) as unknown as globalThis.Node | null;
 	}
@@ -33875,7 +33313,7 @@ function walkChildren(walk: TreeWalker, first: boolean): Node | null {
 		? objectOf(_(walkSlots.current).firstChild)
 		: objectOf(_(walkSlots.current).lastChild);
 	while (node !== null) {
-		const result = filterNode(walkSlots[kState], node);
+		const result = filterNode(walkSlots, node);
 		if (result === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
@@ -33913,8 +33351,7 @@ function walkChildren(walk: TreeWalker, first: boolean): Node | null {
 
 // DOM Standard, "traverse siblings". A walk rooted at a node never
 // visits that node's siblings. Returning one would escape the subtree
-// the walk was scoped to, which is how an empty inline element once
-// measured the width of the sibling after it.
+// the walk was scoped to.
 function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 	const walkSlots = _(walk);
 	let node = walkSlots.current;
@@ -33925,7 +33362,7 @@ function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 		let sibling = next ? objectOf(_(node).next) : objectOf(_(node).previous);
 		while (sibling !== null) {
 			node = sibling;
-			const result = filterNode(walkSlots[kState], node);
+			const result = filterNode(walkSlots, node);
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
 				return node;
@@ -33942,7 +33379,7 @@ function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 			return null;
 		}
 		node = parent;
-		if (filterNode(walkSlots[kState], node) === FILTER_ACCEPT) {
+		if (filterNode(walkSlots, node) === FILTER_ACCEPT) {
 			return null;
 		}
 	}
@@ -33953,9 +33390,7 @@ function walkParent(walk: TreeWalker): Node | null {
 	let node: Node | null = walkSlots.current;
 	while (node !== null && node !== walkSlots.root) {
 		node = objectOf(_(node).parent);
-		if (
-			node !== null && filterNode(walkSlots[kState], node) === FILTER_ACCEPT
-		) {
+		if (node !== null && filterNode(walkSlots, node) === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
 		}
@@ -33977,7 +33412,7 @@ function walkNext(walk: TreeWalker): Node | null {
 				break;
 			}
 			node = child;
-			result = filterNode(walkSlots[kState], node);
+			result = filterNode(walkSlots, node);
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
 				return node;
@@ -33999,7 +33434,7 @@ function walkNext(walk: TreeWalker): Node | null {
 			return null;
 		}
 		node = sibling;
-		result = filterNode(walkSlots[kState], node);
+		result = filterNode(walkSlots, node);
 		if (result === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
@@ -34014,7 +33449,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 		let sibling = objectOf(_(node).previous);
 		while (sibling !== null) {
 			node = sibling;
-			let result = filterNode(walkSlots[kState], node);
+			let result = filterNode(walkSlots, node);
 			for (;;) {
 				if (result === FILTER_REJECT) {
 					break;
@@ -34024,7 +33459,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 					break;
 				}
 				node = child;
-				result = filterNode(walkSlots[kState], node);
+				result = filterNode(walkSlots, node);
 			}
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
@@ -34037,7 +33472,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 			return null;
 		}
 		node = parent;
-		if (filterNode(walkSlots[kState], node) === FILTER_ACCEPT) {
+		if (filterNode(walkSlots, node) === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
 		}
@@ -34050,10 +33485,6 @@ Object.defineProperty(TreeWalker.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-// Hover is not a mutation and no attribute records it. The engine
-// writes it here as motion reports arrive, and the `:hover` resolver
-// reads it. Absent means nothing is hovered, because the document has no
-// motion reporting or the pointer left.
 const activeElements = new WeakMap<Document, Element>();
 
 /** Record the element a mouse button is held down on, for `:active`. */
@@ -34092,6 +33523,10 @@ export function isActive(element: Element): boolean {
 	return false;
 }
 
+// Hover is not a mutation and no attribute records it. The engine
+// writes it here as motion reports arrive, and the `:hover` resolver
+// reads it. Absent means nothing is hovered, because the document has no
+// motion reporting or the pointer left.
 const hoveredElements = new WeakMap<Document, Element>();
 
 /**
@@ -34789,14 +34224,14 @@ function createTreeAdapter(document: Document | null) {
 		},
 		getAttrList(element: Element): ParseAttribute[] {
 			return _(element).attributeList.map((attribute) => ({
-				name: attribute[kQualifiedName],
+				name: attribute._qualifiedName,
 				value: attribute.extra.value,
 				namespace: attribute.extra.namespace ?? undefined,
 				prefix: attribute.extra.prefix ?? undefined,
 			}));
 		},
 		getTagName(element: Element): string {
-			return _(element)[kQualifiedName];
+			return _(element)._qualifiedName;
 		},
 		getNamespaceURI(element: Element): string {
 			return _(element).namespace as string;
@@ -34947,10 +34382,11 @@ function attachDeclarativeShadowRoot(template: HTMLTemplateElement): boolean {
 	return true;
 }
 
-// Builds the one document of this realm. It carries the realm's
-// registry. Every document an author builds carries none until a
-// registry claims it, exactly like a document with no browsing context.
-function parseHTMLDocument(
+// Parses markup into a document carrying `registry`, which is none unless
+// the caller is making a window's or a frame's document. A document an
+// author builds carries none until a registry claims it, as one with no
+// browsing context does.
+export function parseHTMLDocument(
 	html: string,
 	url = "about:blank",
 	allowDeclarativeShadowRoots = true,
@@ -35687,7 +35123,10 @@ declareSealedRoot(DOMParser);
 // A well-formed document becomes the tree it describes. Anything else
 // becomes the spec's error document, whose root is a parsererror element
 // holding the failure.
-function parseXMLDocument(source: string, contentType: string): Document {
+export function parseXMLDocument(
+	source: string,
+	contentType: string,
+): Document {
 	const document = new XMLDocument();
 	const documentSlots = _(document);
 	documentSlots.extra.type = "xml";
@@ -35785,7 +35224,7 @@ function getAttributeSerializedName(attribute: Attr): string {
 	if (namespace === XLINK_NAMESPACE) {
 		return `xlink:${attributeSlots.extra.localName}`;
 	}
-	return attributeSlots[kQualifiedName];
+	return attributeSlots._qualifiedName;
 }
 
 // A shadow root is written out as the template the parser reads back,
@@ -35867,7 +35306,7 @@ function serializeNode(
 				namespace === MATHML_NAMESPACE ||
 				namespace === SVG_NAMESPACE
 					? _(element).localName
-					: _(element)[kQualifiedName];
+					: _(element)._qualifiedName;
 			let html = `<${tagName}`;
 			for (const attribute of _(element).attributeList) {
 				html += ` ${getAttributeSerializedName(objectOf(attribute))}="${escapeAttribute(attribute.extra.value)}"`;
@@ -36152,8 +35591,6 @@ for (const constructor of [HTMLBodyElement, HTMLFrameSetElement]) {
 	}
 }
 
-// State an attached document accepts only from its engine.
-
 // The lists with a listener, which are the only ones a viewport change
 // has anyone to tell. `matches` reads live, so a list without a listener
 // needs no bookkeeping and is the page's to drop. The resize path is the
@@ -36187,7 +35624,7 @@ class MediaQueryList extends EventTarget {
 		const attached = getAttachedDocument(_(this).mediaQueryDocument);
 		return (
 			attached !== undefined &&
-			_(attached).extra.cascade.mediaQueryMatches(this.media)
+			cssom.mediaQueryMatches(_(attached).extra.cascade, this.media)
 		);
 	}
 
@@ -36285,10 +35722,10 @@ export function syncMediaQueries(document: globalThis.Document): void {
 	}
 }
 
-/** What a TermDOM hands the document it draws. */
 /** How pixels reach the terminal, or "none" for not at all. */
 export type GraphicsSetting = "cells" | "none";
 
+/** What a TermDOM hands the document it draws. */
 export interface DocumentEngine {
 	layout: Layout;
 	cascade: Cascade;
@@ -36341,7 +35778,6 @@ export function attachDocument(
 	for (const type of ["input", "select", "change", "selectionchange"]) {
 		exchange.addEventListener(type, onTextControlEditEvent);
 	}
-	installEditing(exchange);
 	// One watcher per document, the engine displaying it.
 	getHoverCount(attached).onChange = () => render();
 	// The document owns the observer. Mutations fan out to the cascade, the
@@ -36398,7 +35834,7 @@ function onTextControlEditEvent(event: globalThis.Event): void {
 	_(attached).extra.pendingCaretReveal = target;
 	// A document scroll move and a caret move. No mutation record describes
 	// either.
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -36470,7 +35906,7 @@ export function scrollDocumentTo(
 	if (next === _(attached).extra.framebuffer.scrollTop) {
 		return;
 	}
-	_(attached).extra.framebuffer.scrollTo(next);
+	scrollTo(_(attached).extra.framebuffer, next);
 	void _(attached).extra.render();
 }
 
@@ -36571,7 +36007,7 @@ export function revealPendingCaret(document: globalThis.Document): void {
 	}
 	// Widened to the text control's edge when the caret is on its first or
 	// last row, so the border shows instead of a cropped box.
-	const boxModel = getBoxModel(element);
+	const boxModel = cssom.getBoxModel(element);
 	let revealTop = caretY;
 	let revealBottom = caretY + 1;
 	if (caretY <= Math.round(rect.top) + (boxModel.borderTopWidth || 0)) {
@@ -36590,7 +36026,7 @@ export function revealPendingCaret(document: globalThis.Document): void {
 				? revealBottom - (top + regionHeight)
 				: 0;
 	if (delta) {
-		attachedSlots.extra.framebuffer.scrollTo(top + delta);
+		scrollTo(attachedSlots.extra.framebuffer, top + delta);
 		// No mutation record describes a document scroll move.
 		void attachedSlots.extra.render();
 	}
@@ -36609,8 +36045,9 @@ function handleMutationRecords(
 		return;
 	}
 	// Any observed mutation can move a node in the flat tree. Drop the
-	// memoized composition links before anything reads through them.
-	_(attached).extra.layout.invalidateFrame();
+	// memoized composition links before anything reads through them. What
+	// the mutation changes on screen, layout finds as the boxes it moves.
+	_(attached).extra.layout.invalidateFrame(false);
 	// Attribute records whose value did not actually change are dropped
 	// before any handler sees them. Frameworks (and this repo's own
 	// examples) reassign className/style with identical values on every
@@ -36646,7 +36083,17 @@ function handleMutationRecords(
 			ensureUAShadowTrees(added);
 		}
 	}
-	_(attached).extra.cascade.handleMutations(relevant);
+	// A textarea nobody has edited shows its default value, which is its
+	// text children, so a change to them changes what it shows.
+	for (const record of relevant) {
+		const textarea = record.type === "childList"
+			? record.target
+			: record.type === "characterData" ? record.target.parentNode : null;
+		if (textarea instanceof HTMLTextAreaElement && !_(textarea).extra.dirty) {
+			syncUAShadowTree(textarea);
+		}
+	}
+	cssom.handleMutations(_(attached).extra.cascade, relevant);
 	_(attached).extra.layout.handleMutations(relevant);
 	focusAutofocusedNodes(relevant);
 	dropUnfocusableFocus(document);
@@ -36691,15 +36138,7 @@ export function runFocusFixup(document: globalThis.Document): void {
 // it, a move into an inert parent, display:none anywhere on its flat
 // chain) unfocuses it, including blur events and restyle.
 function dropUnfocusableFocus(document: Document): void {
-	let active = document.activeElement;
-	while (active !== null) {
-		const shadow = _((active as Element)).shadowRoot;
-		const inner = shadow?.activeElement ?? null;
-		if (inner === null) {
-			break;
-		}
-		active = inner;
-	}
+	const active = getFocusedElement(document);
 	if (active === null || active === document.body) {
 		return;
 	}
@@ -36710,7 +36149,7 @@ function dropUnfocusableFocus(document: Document): void {
 	) {
 		if (
 			hasAttributeOf(node, "inert") ||
-			getComputedValue(node as Element, "display") === "none"
+			cssom.getComputedValue(node as Element, "display") === "none"
 		) {
 			(active as globalThis.HTMLElement).blur();
 			return;
@@ -36736,6 +36175,57 @@ export function applyMutations(document: globalThis.Document): boolean {
 	return true;
 }
 
+/**
+ * Bring every connected form control's shadow tree up to its state. A
+ * control's tree is a function of its state, and each change of state
+ * redraws it as it lands. This is what keeps a frame right when one did
+ * not.
+ */
+export function syncFormControls(document: globalThis.Document): void {
+	const attached = getAttachedDocument(document);
+	if (attached === undefined) {
+		return;
+	}
+	for (const root of _(attached).extra.cascade.shadowRoots) {
+		if (isUAShadowTree(root) && root.host.isConnected) {
+			syncUAShadowTree(root.host as unknown as Element);
+		}
+	}
+}
+
+/**
+ * Checks, for tests, that every form control's shadow tree already shows
+ * its state when a frame starts, so no change of state went without
+ * redrawing it. Set, a control the frame's sync would change throws,
+ * naming it.
+ */
+export const controlCheck = {enabled: false, checked: 0};
+
+export function checkFormControls(document: globalThis.Document): void {
+	controlCheck.checked++;
+	const attached = getAttachedDocument(document);
+	if (attached === undefined) {
+		return;
+	}
+	const stale: string[] = [];
+	for (const root of _(attached).extra.cascade.shadowRoots) {
+		if (!isUAShadowTree(root) || !root.host.isConnected) {
+			continue;
+		}
+		const before = root.innerHTML;
+		syncUAShadowTree(root.host as unknown as Element);
+		if (root.innerHTML !== before) {
+			const host = root.host;
+			stale.push(`${host.localName}${host.id ? `#${host.id}` : ""}`);
+		}
+	}
+	if (stale.length > 0) {
+		throw new Error(
+			`A form control did not show its state: ${stale.slice(0, 8).join(", ")}`,
+		);
+	}
+}
+
 /**
  * Synchronously settle what a style read must see: pending mutations
  * delivered, so the cascade has dropped what they made stale. Layout is
@@ -36746,24 +36236,13 @@ export function flushStyle(node: globalThis.Node): boolean {
 	if (attached === undefined) {
 		return false;
 	}
-	const shaped = node as {nodeType?: number; ownerDocument?: object | null};
-	const document = (
-		shaped.nodeType === DOCUMENT_NODE ? node : shaped.ownerDocument
-	) as globalThis.Document;
-	const had = applyMutations(document);
+	const had = applyMutations(attached);
 	if (had) {
 		void _(attached).extra.render();
 	}
 	return had;
 }
 
-/**
- * Synchronously settle what a geometry read must see: pending mutations
- * delivered and layout brought up to date. A geometry read needs fresh
- * layout, not fresh pixels. Painting stays with the frame loop, but the
- * drain takes records from the observer callback that would have painted
- * them, so this requests the frame on the caller's behalf.
- */
 /**
  * Scrolls the boxes around an editing host's caret so the caret shows, as
  * a browser does after a key moves it or an edit lands.
@@ -36797,21 +36276,28 @@ export function revealPendingEditingCaret(document: globalThis.Document): void {
 	attachedSlots.extra.layout.revealCaret(node as Node, selection!.focusOffset);
 }
 
+// Offsets only leave their range when layout changes, since every scroll
+// clamps what it stores, so a flush after no solve has nothing to clamp.
+const clampedSolves = new WeakMap<object, number>();
+
+/**
+ * Synchronously settle what a geometry read must see: pending mutations
+ * delivered and layout brought up to date. A geometry read needs fresh
+ * layout, not fresh pixels. Painting stays with the frame loop, but the
+ * drain takes records from the observer callback that would have painted
+ * them, so this requests the frame on the caller's behalf.
+ */
 export function flushLayout(node: globalThis.Node): boolean {
+	const had = flushStyle(node);
 	const attached = getAttachedDocument(node);
-	if (attached === undefined) {
-		return false;
-	}
-	const shaped = node as {nodeType?: number; ownerDocument?: object | null};
-	const document = (
-		shaped.nodeType === DOCUMENT_NODE ? node : shaped.ownerDocument
-	) as globalThis.Document;
-	const had = applyMutations(document);
-	if (had) {
-		void _(attached).extra.render();
+	if (attached !== undefined) {
+		const layout = _(attached).extra.layout;
+		layout.performLayout();
+		if (clampedSolves.get(layout) !== layout.solves) {
+			clampedSolves.set(layout, layout.solves);
+			clampScrollOffsets(attached);
+		}
 	}
-	_(attached).extra.layout.performLayout();
-	clampScrollOffsets(document);
 	return had;
 }
 
@@ -36819,19 +36305,6 @@ export function hoverListenerCount(document: globalThis.Document): number {
 	return hoverListenerCounters.get(document as Document)?.count ?? 0;
 }
 
-// A document that has been adopted. It renders, and knows what it
-// renders through.
-type AttachedDocument = Document;
-
-function getAttachedDocument(
-	node: globalThis.Node,
-): AttachedDocument | undefined {
-	const document = _(node as Node).document;
-	return _(document).extra.exchange !== undefined
-		? (document as AttachedDocument)
-		: undefined;
-}
-
 /** The images and canvas options of the TermDOM drawing the node's document. */
 export function getGraphicsSettings(
 	node: globalThis.Node,
@@ -36842,24 +36315,6 @@ export function getGraphicsSettings(
 		: {images: _(attached).extra.images, canvas: _(attached).extra.canvas};
 }
 
-/** The cellSize option of the TermDOM drawing the node's document. */
-export function getCellSizeSetting(
-	node: globalThis.Node,
-): CellSizeSetting | undefined {
-	return _maybe(getAttachedDocument(node))?.extra.cellSize;
-}
-
-/**
- * One cell in the terminal's pixels, as the framebuffer drawing the
- * node's document has it, or null for a document no TermDOM draws.
- */
-export function getCellPixels(
-	node: globalThis.Node,
-): Readonly<{width: number; height: number}> | null {
-	return _maybe(getAttachedDocument(node))?.extra.framebuffer.cellPixels ??
-		null;
-}
-
 /** OSC 52 carries text and only text. */
 const CLIPBOARD_TEXT_TYPE = "text/plain";
 
@@ -36948,7 +36403,7 @@ Object.defineProperty(ClipboardItem.prototype, Symbol.toStringTag, {
 // travels in-band, including across SSH. Terminals without OSC 52 ignore
 // it, and there is no way to detect that, so the promise resolves when
 // the transport has the bytes. readText() queries the same way (OSC 52
-// with `?` as the payload) and resolves with the reply. writeTokenList() and
+// with `?` as the payload) and resolves with the reply. write() and
 // read() are the same two round trips over a ClipboardItem. This is an
 // EventTarget because the interface says so; nothing fires events at it.
 interface ClipboardSlots extends EventTargetSlots {
@@ -37221,7 +36676,7 @@ Object.defineProperty(Permissions.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-// The only one here is Location.ancestorOrigins, which is empty because
+// Only Location.ancestorOrigins makes one, and it is always empty, since
 // a terminal document is not in a frame.
 interface DOMStringListSlots {
 	strings: readonly string[];
@@ -37423,13 +36878,6 @@ function noNavigation(): DOMException {
 	);
 }
 
-// The window a document is attached to: an EventTarget whose members are the
-// browsing context's, implemented by the engine the document is attached to. A
-// window exists only when attached (a headless document has none), so the
-// members below may expect a mount, and degrade the way the document's own do
-// without one: a viewport of no size, a document scroll at the origin, a query
-// that matches nothing.
-
 // Keyed by the handle requestAnimationFrame returned, so
 // cancelAnimationFrame can cancel. The engine fires them once the frame
 // containing their pending mutations has been written.
@@ -37798,13 +37246,6 @@ function getNamedPropertyValue(
 	return collection;
 }
 
-/**
- * A terminal has one screen and no browsing context, so the window is a
- * plain object rather than a global. It exposes this file's interfaces,
- * the scrolling and sizing the display implements, and the handful of
- * APIs an author reaches for through `window`. The member types are the
- * host's, which is how a caller outside this file sees them.
- */
 // The runtime's clock and random source, which the window's Performance
 // and Crypto read through without handing the runtime's objects out.
 const runtimePerformance = globalThis.performance;
@@ -38159,6 +37600,18 @@ export interface Window {
 	readonly [internals]: WindowSlots;
 }
 
+/**
+ * A terminal has one screen and no browsing context, so the window is a
+ * plain object rather than a global. It exposes this file's interfaces,
+ * the scrolling and sizing the display implements, and the handful of
+ * APIs an author reaches for through `window`. The member types are the
+ * host's, which is how a caller outside this file sees them.
+ *
+ * A window exists only when its document is attached, so its members may
+ * expect a mount, and degrade the way the document's own do without one:
+ * a viewport of no size, a document scroll at the origin, a query that
+ * matches nothing.
+ */
 export class Window extends EventTarget {
 	[index: number]: Window;
 	declare getComputedStyle: (
@@ -38851,7 +38304,7 @@ export class Window extends EventTarget {
 		if (attached === undefined) {
 			return;
 		}
-		const event = createBeforeUnloadEvent();
+		const event = constructInternal(() => new BeforeUnloadEvent());
 		dispatchAsUserAgent(this, event);
 		if (event.defaultPrevented || event.returnValue !== "") {
 			return;
@@ -38908,7 +38361,7 @@ export class Window extends EventTarget {
 				crop ? sh : undefined,
 			) as unknown as globalThis.ImageBitmap;
 		// A Blob is decoded first; an image still loading is waited for.
-		if (typeof Blob !== "undefined" && image instanceof Blob) {
+		if (image instanceof Blob) {
 			return image.arrayBuffer()
 				.then((buffer) => decodeImageOffThread(new Uint8Array(buffer)))
 				.then((bitmap) => settle(new ImageBitmap(bitmap)));
@@ -39013,10 +38466,6 @@ export class Window extends EventTarget {
 	stop(): void {}
 }
 
-function createBeforeUnloadEvent(): BeforeUnloadEvent {
-	return constructInternal(() => new BeforeUnloadEvent());
-}
-
 // A window has both event handler mixins the HTML Standard gives it:
 // GlobalEventHandlers, shared with elements and documents, and
 // WindowEventHandlers, whose members exist as attributes whether or not
@@ -39052,7 +38501,7 @@ Object.defineProperty(HTMLFormElement.prototype, Symbol.iterator, {
 
 // The one place an interface joins the window. A class not listed here
 // is not visible to script, whatever this module exports.
-const platform = {
+export const platform = {
 	AbortController,
 	AbortSignal,
 	AbstractRange,
@@ -39220,13 +38669,10 @@ const platform = {
 	XMLDocument,
 } as const;
 
-// A window starts with its interfaces and the timers any script expects
-// to find. The display fills in the rest (sizing, scrolling, animation
-// frames, the clipboard) as it mounts the document.
 // The runtime's own, as the module found them. installGlobals() puts the
 // window's in their place, and the window's call these.
 // Bound, since a browser's throws when called on anything but its global.
-const runtime = {
+export const runtime = {
 	setTimeout,
 	clearTimeout,
 	setInterval: globalThis.setInterval.bind(globalThis),
@@ -39244,7 +38690,7 @@ const runtime = {
  * A platform object is refused, unless it is one HTML can serialize, and
  * that is copied.
  */
-function cloneStructured(value: unknown, context: string): any {
+export function cloneStructured(value: unknown, context: string): any {
 	return containsPlatformObject(value, new Set(), context)
 		? cloneWithPlatformObjects(value, new Map(), context)
 		: runtime.structuredClone(value);
@@ -39355,11 +38801,11 @@ function cloneWithPlatformObjects(
 	return copy;
 }
 
-const windowTimers = new WeakMap<
+export const windowTimers = new WeakMap<
 	object,
 	Map<number, ReturnType<typeof setTimeout>>
 >();
-const processTimers = new WeakMap<object, Record<string, unknown>>();
+export const processTimers = new WeakMap<object, Record<string, unknown>>();
 
 /**
  * The window's setTimeout and setInterval as installGlobals() puts them
@@ -39388,133 +38834,9 @@ export function clearWindowTimers(window: Window): void {
 	idle?.clear();
 }
 
-function buildWindow(document: Document): Window {
-	const window = new Window(document) as unknown as Record<string, unknown>;
-	// HTML reports an exception a timer or a microtask lets escape, as it
-	// does a listener's, and the page goes on. The runtime's own would end
-	// the process.
-	const guard = (handler: unknown, args: unknown[]): unknown =>
-		typeof handler !== "function"
-			? handler
-			: () => {
-				try {
-					(handler as (...args: unknown[]) => void)(...args);
-				} catch (error) {
-					reportError(error, document);
-				}
-			};
-	// The page's outstanding timers, which stop with the window, by the
-	// number HTML hands the page for each: the runtime's own handle is the
-	// runtime's object.
-	const timers = new Map<number, ReturnType<typeof setTimeout>>();
-	windowTimers.set(window, timers);
-	let lastTimerId = 0;
-	const clearTimer = (id: unknown) => {
-		const key = Number(id);
-		const handle = timers.get(key);
-		if (handle !== undefined) {
-			timers.delete(key);
-			runtime.clearTimeout(handle);
-		}
-	};
-	processTimers.set(window, {
-		setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) =>
-			runtime.setTimeout(guard(handler, args) as () => void, timeout),
-		setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) =>
-			runtime.setInterval(guard(handler, args) as () => void, timeout),
-	});
-	Object.assign(
-		window,
-		getWindowClasses(),
-		Object.fromEntries(getInterfaceObjects()),
-		{
-		// The platform's DOMException, which is the one the DOM and the CSSOM
-		// throw. A caller's `instanceof DOMException` has to match the class
-		// the engine builds its errors from.
-			DOMException,
-			setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) => {
-				const guarded = guard(handler, args);
-				const id = ++lastTimerId;
-				timers.set(
-					id,
-					runtime.setTimeout(
-						(typeof guarded === "function"
-							? () => {
-								timers.delete(id);
-								(guarded as () => void)();
-							}
-							: guarded) as () => void,
-						timeout,
-					),
-				);
-				return id;
-			},
-			clearTimeout: clearTimer,
-			setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) => {
-				const id = ++lastTimerId;
-				timers.set(
-					id,
-					runtime.setInterval(guard(handler, args) as () => void, timeout),
-				);
-				return id;
-			},
-			clearInterval: clearTimer,
-			queueMicrotask: (callback: unknown) => {
-				if (typeof callback !== "function") {
-					throw new TypeError("queueMicrotask needs a function");
-				}
-				runtime.queueMicrotask(guard(callback, []) as () => void);
-			},
-			atob: runtime.atob,
-			btoa: runtime.btoa,
-			fetch: runtime.fetch,
-			structuredClone: (
-				value: unknown,
-				options: StructuredSerializeOptions = {},
-			) =>
-				(options.transfer ?? []).length > 0
-					? runtime.structuredClone(value, options)
-					: cloneStructured(value, "execute 'structuredClone' on 'Window'"),
-		});
-	// HTML's legacy factory: new Image(width, height) is an <img> in this
-	// window's document.
-	const Image = function Image(this: unknown, width?: number, height?: number) {
-		if (new.target === undefined) {
-			throw new TypeError("Image is a constructor");
-		}
-		const image = document.createElement("img");
-		if (width !== undefined) {
-			setAttributeOf(image, "width", String(toImageDimension(width)));
-		}
-		if (height !== undefined) {
-			setAttributeOf(image, "height", String(toImageDimension(height)));
-		}
-		return image;
-	} as unknown as typeof HTMLImageElement;
-	Object.defineProperty(Image, "prototype", {
-		value: HTMLImageElement.prototype,
-	});
-	window.Image = Image;
-	window.window = window;
-	window.self = window;
-	for (const name of Object.keys(window)) {
-		const value = window[name];
-		if (typeof value === "function" && /^[a-z]/.test(name)) {
-			window[name] = windowMember(
-				window,
-				name,
-				value as (...args: never[]) => unknown,
-			);
-		}
-	}
-	prepareClasses(Object.values(getWindowClasses()));
-	startPendingImages(document as unknown as globalThis.Document);
-	return window as unknown as Window;
-}
-
 // Images the parser built before their document had a window wait for
 // one, and start here, once it does.
-function startPendingImages(
+export function startPendingImages(
 	root: globalThis.Document | globalThis.ShadowRoot,
 ): void {
 	for (const element of root.querySelectorAll("*")) {
@@ -39530,80 +38852,6 @@ function startPendingImages(
 	}
 }
 
-/**
- * Parse a document from markup and display it in a window of its own. An
- * XML content type parses as XML, which is what a frame whose src names a
- * .xml, .xhtml or .svg file holds.
- */
-// The classes a window exposes by name. Read when a window is made rather
-// than in the module's interface table: canvas.ts is part of the import
-// cycle through cssvalues, and a table built at module load would read
-// its classes before they exist when canvas.ts is the first module
-// imported.
-function getWindowClasses(): Record<string, Constructor> {
-	return {
-		...platform,
-		...CSSOM_INTERFACES,
-		CanvasGradient,
-		CanvasPattern,
-		CanvasRenderingContext2D,
-		ImageBitmap,
-		ImageData,
-		Path2D,
-	} as unknown as Record<string, Constructor>;
-}
-
-/** The names of the interfaces a window exposes. */
-export function getWindowInterfaceNames(): string[] {
-	return Object.keys(getWindowClasses());
-}
-
-// The window's interface objects, laid out before the first document is
-// made, so that every platform object has its unforgeable members.
-function getInterfaceObjects(): ReadonlyMap<string, Constructor> {
-	return installInterfaces(getWindowClasses());
-}
-
-export function createWindow(
-	source: string,
-	url?: string,
-	contentType = "text/html",
-): Window {
-	getInterfaceObjects();
-	if (contentType === "text/html") {
-		return buildWindow(
-			parseHTMLDocument(source, url, true, createWindowRegistry()),
-		);
-	}
-	const document = parseXMLDocument(source, contentType);
-	const documentSlots = _(document);
-	documentSlots.registry = createWindowRegistry();
-	if (url !== undefined) {
-		documentSlots.extra.documentURL = url;
-	}
-	return buildWindow(document);
-}
-
-export function isElement(node: Node): node is Element {
-	return _(node).nodeType === ELEMENT_NODE;
-}
-
-/** The node's nodeType, read without going through the page's binding. */
-export function nodeTypeOf(node: globalThis.Node): number {
-	return _(node as Node).nodeType;
-}
-
-/** The node's ownerDocument, read without going through its binding. */
-export function ownerDocumentOf(node: globalThis.Node): Document | null {
-	const document = _(node as Node).document;
-	return document === (node as unknown) ? null : document;
-}
-
-/** The element's localName, read without going through its binding. */
-export function localNameOf(element: globalThis.Element): string {
-	return _(element as Element).localName;
-}
-
 /** Node's appendChild, for the engine's own calls. */
 export function appendChildOf<T extends globalThis.Node>(
 	parent: globalThis.Node,
@@ -39630,7 +38878,7 @@ export function insertBeforeOf<T extends globalThis.Node>(
 }
 
 /** Node's removeChild, for the engine's own calls. */
-export function removeChildOf<T extends globalThis.Node>(
+function removeChildOf<T extends globalThis.Node>(
 	parent: globalThis.Node,
 	child: T,
 ): T {
@@ -39640,15 +38888,6 @@ export function removeChildOf<T extends globalThis.Node>(
 	) as unknown as T;
 }
 
-/** Node's contains, for the engine's own calls. */
-export function containsOf(
-	node: globalThis.Node,
-	other: globalThis.Node | null | undefined,
-): boolean {
-	return other != null &&
-		isInclusiveAncestor(node as unknown as Node, other as unknown as Node);
-}
-
 /** Element's setAttribute, for the engine's own calls. */
 export function setAttributeOf(
 	element: globalThis.Element,
@@ -39664,7 +38903,7 @@ export function setAttributeOf(
 	}
 	const string = value === null ? "null" : String(value);
 	for (const attribute of slots.attributeList) {
-		if (attribute[kQualifiedName] === name) {
+		if (attribute._qualifiedName === name) {
 			changeAttribute(objectOf(attribute), string);
 			return;
 		}
@@ -39675,7 +38914,7 @@ export function setAttributeOf(
 }
 
 /** Element's removeAttribute, for the engine's own calls. */
-export function removeAttributeOf(
+function removeAttributeOf(
 	element: globalThis.Element,
 	qualifiedName: string,
 ): void {
@@ -39687,7 +38926,7 @@ export function removeAttributeOf(
 }
 
 /** Element's toggleAttribute, for the engine's own calls. */
-export function toggleAttributeOf(
+function toggleAttributeOf(
 	element: globalThis.Element,
 	qualifiedName: string,
 	force?: boolean,
@@ -39716,33 +38955,6 @@ export function toggleAttributeOf(
 	return true;
 }
 
-/** The element's attribute's value, read without going through its binding. */
-export function attributeOf(
-	element: globalThis.Element,
-	qualifiedName: string,
-): string | null {
-	const attribute = getAttributeByName(element as Element, qualifiedName);
-	return attribute === null ? null : _(attribute).extra.value;
-}
-
-/** Whether the element has the attribute, without going through its binding. */
-export function hasAttributeOf(
-	element: globalThis.Element,
-	qualifiedName: string,
-): boolean {
-	return getAttributeByName(element as Element, qualifiedName) !== null;
-}
-
-/** The element's namespaceURI, read without going through its binding. */
-export function namespaceOf(element: globalThis.Element): string | null {
-	return _(element as Element).namespace;
-}
-
-export function parentElement(node: Node): Element | null {
-	const parent = objectOf(_(node).parent);
-	return parent !== null && isElement(parent) ? parent : null;
-}
-
 // Type-only exports of every class, so the lib.dom drift check can map
 // each one to the platform interface it implements.
 export type {
@@ -39822,7 +39034,6 @@ export type {
 	HTMLHRElement,
 	HTMLHtmlElement,
 	HTMLIFrameElement,
-	HTMLImageElement,
 	HTMLLegendElement,
 	HTMLLIElement,
 	HTMLMapElement,
@@ -39883,3 +39094,105 @@ export type {
 	DOMStringList,
 	Location,
 };
+
+/**
+ * The element a caret in `node` edits: the nearest ancestor-or-self whose
+ * contenteditable state is true, or the body of a designMode document.
+ */
+export function getEditingHost(
+	node: globalThis.Node | null,
+): globalThis.HTMLElement | null {
+	if (node === null) {
+		return null;
+	}
+	for (
+		let element = nodeTypeOf(node) === ELEMENT_NODE
+			? node as globalThis.Element
+			: node.parentElement; element !== null; element = element.parentElement
+	) {
+		const state = (element as globalThis.HTMLElement).contentEditable;
+		if (state === "true" || state === "plaintext-only") {
+			return element as globalThis.HTMLElement;
+		}
+		if (state === "false") {
+			return null;
+		}
+	}
+	const document = ownerDocumentOf(node);
+	const body = document === null ? null : document.body;
+	if (document === null || body === null || document.designMode !== "on") {
+		return null;
+	}
+	return containsOf(body, node) ? body : null;
+}
+
+// The policies a page stated for itself with <meta> in its head.
+const metaPolicyTexts = new WeakMap<object, string[]>();
+
+/**
+ * A `<meta http-equiv="Content-Security-Policy">` inserted as a child of
+ * a head (HTML §4.2.5.3): its policy holds for the document from then on,
+ * whatever later becomes of the element.
+ */
+function addDocumentPolicy(document: object, content: string): void {
+	const texts = metaPolicyTexts.get(document);
+	if (texts === undefined) {
+		metaPolicyTexts.set(document, [content]);
+	} else {
+		texts.push(content);
+	}
+}
+
+/** The policy texts the document's <meta> elements stated, in order. */
+export function getMetaPolicyTexts(document: object): readonly string[] {
+	return metaPolicyTexts.get(document) ?? [];
+}
+
+/**
+ * Gives a request its Fetch destination, such as "image", which a
+ * runtime's Request leaves empty.
+ */
+export function setRequestDestination(
+	request: Request,
+	destination: RequestDestination,
+): void {
+	Object.defineProperty(request, "destination", {
+		value: destination,
+		enumerable: true,
+		configurable: true,
+	});
+}
+
+setElementStates({
+	getHeadingLevel,
+	getMeterLevel,
+	getOpenAssignedSlot,
+	getPartNames,
+	getRangeMatch,
+	getShadowHost,
+	getUserValidityMatch,
+	getValidityMatch,
+	hasCustomState,
+	hasFocus,
+	hasFocusWithin,
+	isActive,
+	isActuallyDisabled,
+	isCheckedControl,
+	isDefaultControl,
+	isDefinedElement,
+	isFocusVisible,
+	isFormAssociatedCustom,
+	isFullscreenElement,
+	isHovered,
+	isHTMLNode,
+	isIndeterminateControl,
+	isInQuirksMode,
+	isMeterValue,
+	isModalDialog,
+	isOpenElement,
+	isPlaceholderShown,
+	isShowingPopover,
+	isTargetElement,
+	READONLY_INPUT_TYPES,
+	REQUIRED_INPUT_TYPES,
+});
diff --git a/src/internal/editing.ts b/src/internal/editing.ts
index ed758ed8..4140a8b1 100644
--- a/src/internal/editing.ts
+++ b/src/internal/editing.ts
@@ -11,16 +11,20 @@ import {getWhiteSpace} from "./cssom.ts";
 import {
 	appendChildOf,
 	constructInternal,
-	containsOf,
 	dispatchAsUserAgent,
+	getEditingHost,
 	getFocusedElement,
 	insertBeforeOf,
-	localNameOf,
-	nodeTypeOf,
-	ownerDocumentOf,
 	revealEditingCaret,
 } from "./dom.ts";
 import {getNextGraphemeBoundary, getPreviousGraphemeBoundary} from "./text.ts";
+import {
+	containsOf,
+	ELEMENT_NODE,
+	localNameOf,
+	nodeTypeOf,
+	TEXT_NODE,
+} from "./tree.ts";
 
 /** A caret or selection endpoint. */
 interface EditingPoint {
@@ -33,9 +37,6 @@ interface Motion {
 	forward: boolean;
 }
 
-const ELEMENT_NODE = 1;
-const TEXT_NODE = 3;
-
 const SPACE = " ";
 const NBSP = "\u00a0";
 
@@ -125,37 +126,6 @@ const ARROW_MOTIONS: Record<string, Motion> = {
 	End: {granularity: "lineboundary", forward: true},
 };
 
-/**
- * The element a caret in `node` edits: the nearest ancestor-or-self whose
- * contenteditable state is true, or the body of a designMode document.
- */
-export function getEditingHost(
-	node: globalThis.Node | null,
-): globalThis.HTMLElement | null {
-	if (node === null) {
-		return null;
-	}
-	for (
-		let element = asElement(node) ?? node.parentElement;
-		element !== null;
-		element = element.parentElement
-	) {
-		const state = (element as globalThis.HTMLElement).contentEditable;
-		if (state === "true" || state === "plaintext-only") {
-			return element as globalThis.HTMLElement;
-		}
-		if (state === "false") {
-			return null;
-		}
-	}
-	const document = ownerDocumentOf(node);
-	const body = document === null ? null : document.body;
-	if (document === null || body === null || document.designMode !== "on") {
-		return null;
-	}
-	return containsOf(body, node) ? body : null;
-}
-
 /**
  * Where the terminal cursor goes: the document selection's focus, when a
  * focused editing host holds it.
@@ -399,7 +369,9 @@ function getUneditableIsland(
 ): globalThis.Element | null {
 	let island: globalThis.Element | null = null;
 	for (
-		let element = asElement(node) ?? node.parentElement;
+		let element = nodeTypeOf(node) === ELEMENT_NODE
+			? node as globalThis.Element
+			: node.parentElement;
 		element !== null && element !== host;
 		element = element.parentElement
 	) {
@@ -1004,9 +976,9 @@ function getBlockContainer(
 	node: globalThis.Node,
 ): globalThis.Element {
 	for (
-		let element = asElement(node) ?? node.parentElement;
-		element !== null;
-		element = element.parentElement
+		let element = nodeTypeOf(node) === ELEMENT_NODE
+			? node as globalThis.Element
+			: node.parentElement; element !== null; element = element.parentElement
 	) {
 		if (element === host || BLOCK_TAGS.has(localNameOf(element))) {
 			return element;
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index cd2b49eb..59b1ed2e 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -9,9 +9,22 @@ import {
 	syncMediaQueries,
 	type Window,
 } from "./dom.ts";
-import type {Framebuffer} from "./framebuffer.ts";
-import type {Input} from "./input.ts";
-import type {Layout} from "./layout.ts";
+import {
+	adoptCellPixels,
+	flushProbes,
+	type Framebuffer,
+	repaintAll,
+	replaced,
+	resize,
+	scrolled,
+	wrappedRowsAbovePark,
+} from "./framebuffer.ts";
+import {dispatchInput, type Input} from "./input.ts";
+import {
+	adoptTerminalReordering,
+	invalidateTextMeasurement,
+	type Layout,
+} from "./layout.ts";
 import {_, type internals} from "./slots.ts";
 import {isControlByte, recordClusterAdvance} from "./text.ts";
 import {
@@ -181,8 +194,6 @@ function createModeQuery(mode: string): string {
 		: `\x1b[${parseInt(mode, 10)}$p`;
 }
 
-// C0, DEL and the C1 range. In untrusted text one would end the
-// sequence around it or start one of its own.
 // Every mode the engine sets, so teardown can reset what was engaged
 // (in this order) and the panic paths can reset the union. A mode
 // written anywhere else is a restore leak.
@@ -1048,11 +1059,6 @@ export class Exchange extends EventTarget {
 		return _(this).cursorDetectionPromise;
 	}
 
-	/** Leave the page's resize event to whoever handles terminalresize. */
-	deferResizeEvent(): void {
-		_(this).defersResize = true;
-	}
-
 	/**
 	 * A terminal is behind the transport and has not proven it never replies.
 	 */
@@ -1128,68 +1134,6 @@ export class Exchange extends EventTarget {
 		return CURSOR_QUERY;
 	}
 
-	/** Writes on change only. Teardown restores what was engaged. */
-	setDisplayType(name: ModeName, on: boolean): void {
-		const slots = _(this);
-		if (!slots.interactive || on === slots.engagedModes.has(name)) {
-			return;
-		}
-		if (on) {
-			slots.engagedModes.add(name);
-		} else {
-			slots.engagedModes.delete(name);
-		}
-		let output = on ? MODE_SPELLINGS[name].set : MODE_SPELLINGS[name].reset;
-		// tmux clears every mouse mode when any one of ?1000 to ?1003 is
-		// reset, so turning motion reporting off took the button mode with
-		// it and clicks stopped arriving. The base capture is asserted again.
-		if (
-			name === "motionReporting" &&
-			!on &&
-			slots.engagedModes.has("mouseCapture")
-		) {
-			output += MODE_SPELLINGS.mouseCapture.set;
-		}
-		void this.write(output);
-	}
-
-	/**
-	 * Resets every engaged mode without forgetting it, so the terminal is
-	 * the shell's while the program is suspended.
-	 */
-	releaseModes(): void {
-		const slots = _(this);
-		for (const name of MODE_RESTORE_ORDER) {
-			if (slots.engagedModes.has(name)) {
-				void this.write(MODE_SPELLINGS[name].reset);
-			}
-		}
-		if (slots.priorBidiMode === 1) {
-			void this.write(BIDI_IMPLICIT);
-		}
-	}
-
-	/** Sets every engaged mode again once a suspended program continues. */
-	reclaimModes(): void {
-		const slots = _(this);
-		if (slots.priorBidiMode === 1) {
-			void this.write(BIDI_EXPLICIT);
-		}
-		for (const name of MODE_RESTORE_ORDER) {
-			if (slots.engagedModes.has(name)) {
-				void this.write(MODE_SPELLINGS[name].set);
-			}
-		}
-	}
-
-	restoreEngagedModes(): void {
-		for (const name of MODE_RESTORE_ORDER) {
-			if (_(this).engagedModes.delete(name)) {
-				void this.write(MODE_SPELLINGS[name].reset);
-			}
-		}
-	}
-
 	write(output: string): Promise<void> {
 		// Probes taken while building one frame go out with it. A write ends
 		// the batch that can share a drift correction.
@@ -1207,331 +1151,6 @@ export class Exchange extends EventTarget {
 		return slots.lastWrite;
 	}
 
-	flush(): Promise<void> {
-		return _(this).lastWrite;
-	}
-
-	start(input: Input): void {
-		const slots = _(this);
-		if (slots.started) {
-			return;
-		}
-		slots.started = true;
-		slots.input = input;
-
-		// A transport that learns its size while it gets ready, as an SSH
-		// session does from its pty request, starts at that size.
-		const transport = slots.transport;
-		const framebuffer = slots.framebuffer;
-		if (
-			transport.cols !== framebuffer.cols || transport.rows !== framebuffer.rows
-		) {
-			terminalResized(this, transport.cols, transport.rows);
-		}
-
-		slots.reader = slots.transport.readable.getReader();
-		void readLoop(this, slots.reader);
-
-		slots.resizeReader = slots.transport.resizes.getReader();
-		void resizeLoop(this, slots.resizeReader);
-
-		void slots.transport.closed.then(() => {
-			if (!slots.disposed) {
-				slots.transportClosed = true;
-				this.dispatchEvent(constructInternal(() => new Event("terminalclose")));
-			}
-		});
-	}
-
-	initializeCursorDetection(): void {
-		const slots = _(this);
-		slots.cursorDetectionPromise = null;
-		if (slots.anchorDetectionEnabled) {
-			slots.cursorDetectionPromise = Promise.race([
-				this.detectAnchor().then(() => {}),
-				new Promise<void>((resolve) => setTimeout(resolve, QUERY_TIMEOUT_MS)),
-			])
-				.catch(() => {
-					slots.hasDetectedAnchor = false;
-				})
-				.finally(() => {
-					slots.cursorDetectionPromise = null;
-				});
-		}
-	}
-
-	/**
-	 * Ask for explicit bidi (mode 8 reset) and then ask what we got. The
-	 * diff hands the terminal single cells at absolute positions, which a
-	 * terminal reordering implicitly would scramble. A terminal that keeps
-	 * reordering anyway (1 or 3) is given logical order instead. Silence and
-	 * 0 mean no bidi, which is the contract explicit gives.
-	 */
-	async negotiateBidi(): Promise<void> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return;
-		}
-
-		const answer = await queryMode(this, "8", BIDI_EXPLICIT);
-		if (answer === null || answer === 0) {
-			return;
-		}
-		slots.priorBidiMode = answer;
-		if (answer === 1 || answer === 3) {
-			slots.layout.adoptTerminalReordering();
-		}
-	}
-
-	/**
-	 * What one cell measures in pixels. Silence leaves the guessed cell
-	 * standing, which is the contract an unanswered question gives
-	 * everywhere else here. A DA1 asked behind it ends the wait on a
-	 * terminal that does not answer. True when the cell changed.
-	 */
-	async negotiateCellPixels(): Promise<boolean> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return false;
-		}
-		let answered!: () => void;
-		const until = new Promise<void>((resolve) => (answered = resolve));
-		const cell = nextReply<"cell-size", {width: number; height: number} | null>(
-			this,
-			"cell-size",
-			{
-				ask: CELL_SIZE_QUERY,
-				timeoutMs: QUERY_TIMEOUT_MS,
-				absent: null,
-				until,
-				// A terminal with no window reports zeroes. That is not a cell.
-				read: ({width, height}) =>
-					width > 0 && height > 0 ? {width, height} : null,
-			},
-		);
-		void this.queryDeviceAttributes().then(answered);
-		const answer = await cell;
-		return (
-			answer !== null &&
-			!slots.disposed &&
-			slots.framebuffer.adoptCellPixels(answer.width, answer.height)
-		);
-	}
-
-	/**
-	 * The terminal's default background, as light or dark. Asked before
-	 * the cursor's position, which a terminal answers after it, so the
-	 * first frame's wait for the cursor covers this answer too.
-	 */
-	async negotiateColorScheme(): Promise<"light" | "dark" | null> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return null;
-		}
-		return await nextReply<"background", "light" | "dark" | null>(
-			this,
-			"background",
-			{
-				ask: BACKGROUND_QUERY,
-				timeoutMs: QUERY_TIMEOUT_MS,
-				absent: null,
-				read: ({red, green, blue}) => {
-					slots.terminalBackground =
-						(Math.round(red * 255) << 16) |
-						(Math.round(green * 255) << 8) |
-						Math.round(blue * 255);
-					return (
-						slots.colorScheme =
-							0.2126 * red + 0.7152 * green + 0.0722 * blue <
-						0.5
-								? "dark"
-								: "light"
-					);
-				},
-			},
-		);
-	}
-
-	/**
-	 * DA1, which every terminal answers, and answers after whatever it was
-	 * asked before: a marker that the questions ahead of it are settled.
-	 */
-	queryDeviceAttributes(): Promise<void> {
-		if (!_(this).interactive) {
-			return Promise.resolve();
-		}
-		return nextReply<"device-attributes", boolean>(this, "device-attributes", {
-			ask: DEVICE_ATTRIBUTES_QUERY,
-			timeoutMs: QUERY_TIMEOUT_MS,
-			absent: false,
-			read: () => true,
-		}).then(() => {});
-	}
-
-	/**
-	 * Whether the terminal shows 24-bit color, from what it says over the
-	 * wire. It does when it keeps a 24-bit color in its style, or answers
-	 * XTGETTCAP for RGB or Tc. tmux says neither, but converts 24-bit color
-	 * for whatever terminal it runs in, so it counts too. Anything else gets
-	 * 256 colors, which every terminal in use draws.
-	 */
-	async negotiateColorDepth(): Promise<ColorDepth> {
-		if (!_(this).interactive) {
-			return "256";
-		}
-		const ask = <K extends WireItem["kind"]>(
-			kind: K,
-			question: string,
-			read: (item: ReplyItem<K>) => boolean,
-		) =>
-			nextReply<K, boolean>(this, kind, {
-				ask: question,
-				timeoutMs: QUERY_TIMEOUT_MS,
-				absent: false,
-				read,
-				group: "color-depth",
-			});
-		const answers = await Promise.all([
-			ask(
-				"sgr-report",
-				RGB_PROBE,
-				({params}) => params !== null && RGB_STYLE.test(params),
-			),
-			ask(
-				"capability-report",
-				`\x1bP+q${RGB_CAPABILITY}\x1b\\`,
-				({known}) => known,
-			),
-			ask(
-				"capability-report",
-				`\x1bP+q${TC_CAPABILITY}\x1b\\`,
-				({known}) => known,
-			),
-			ask("secondary-attributes", SECONDARY_ATTRIBUTES_QUERY, ({params}) =>
-				TMUX_ATTRIBUTES.test(params)),
-		]);
-		return answers.includes(true) ? "rgb" : "256";
-	}
-
-	/** A terminal that answered a later question will not answer these. */
-	abandonColorDepthQuery(): void {
-		const pending = _(this).pendingReplies;
-		for (const entry of pending.filter(
-			(entry) => entry.group === "color-depth",
-		)) {
-			pending.splice(pending.indexOf(entry), 1);
-			entry.giveUp();
-		}
-	}
-
-	/** A terminal that answered a later question will not answer this. */
-	abandonColorSchemeQuery(): void {
-		const pending = _(this).pendingReplies;
-		const index = pending.findIndex((entry) => entry.kind === "background");
-		if (index !== -1) {
-			const [entry] = pending.splice(index, 1);
-			entry.giveUp();
-		}
-	}
-
-	/** A terminal without DECRQM may echo the request's final byte as text. */
-	scrubProbeEcho(): void {
-		if (!_(this).asking) {
-			return;
-		}
-		void this.write("\r" + LINE_ERASE);
-	}
-
-	/**
-	 * Mode 2027: measure by grapheme cluster, as getStringWidth does, rather
-	 * than per code point as wcwidth does. A terminal that does not know the
-	 * mode leaves our measurements as they are. Only whether it agrees
-	 * changes.
-	 */
-	async negotiateGraphemeClusters(): Promise<void> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return;
-		}
-
-		const answer = await queryMode(
-			this,
-			"?2027",
-			MODE_SPELLINGS.clusterWidths.set,
-		);
-		slots.graphemeClustersNegotiated = answer === 1 || answer === 3;
-		// The set went out with the query's own write. A terminal that ignored
-		// it must not see the reset, so only an agreed offer is engaged.
-		if (slots.graphemeClustersNegotiated) {
-			slots.engagedModes.add("clusterWidths");
-		}
-	}
-
-	/**
-	 * SGR 53, overline. No terminal advertises it, but one that draws it
-	 * keeps it in its style, and DECRQSS reports the style back. The
-	 * probe sets it, asks, and resets it in one write, so the terminal's
-	 * style is what it was. A terminal that says nothing draws none.
-	 */
-	async negotiateOverline(): Promise<boolean> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return false;
-		}
-		const answer = await nextReply<"sgr-report", boolean>(this, "sgr-report", {
-			ask: "\x1b[53m\x1bP$qm\x1b\\\x1b[55m",
-			timeoutMs: QUERY_TIMEOUT_MS,
-			absent: false,
-			read: ({params}) =>
-				params !== null && params.split(";").includes("53"),
-		});
-		slots.overlineNegotiated = answer;
-		return answer;
-	}
-
-	/**
-	 * DSR. The cursor row is the anchor. With `silence`, a terminal that
-	 * does not answer in time resolves to it, and the anchor stays.
-	 */
-	detectAnchor(silence?: number): Promise<number> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return Promise.reject(
-				new Error("Cannot detect cursor position: not interactive"),
-			);
-		}
-		// A cold start or a slow link can outlast a tighter window.
-		return nextReply(this, "cursor-report", {
-			ask: CURSOR_QUERY,
-			timeoutMs: QUERY_TIMEOUT_MS,
-			absent: silence,
-			sequence: slots.dsrSequence++,
-			// The 1-based row the command started on becomes the 0-based
-			// anchor.
-			read: ({row}) => {
-				slots.framebuffer.documentTop = row - 1;
-				slots.hasDetectedAnchor = true;
-				return row;
-			},
-		});
-	}
-
-	/** The 0-based cursor row, for the resize re-anchor. Rejects on timeout. */
-	queryCursorRow(): Promise<number> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return Promise.reject(new Error("not interactive"));
-		}
-		// Short, because the redraw should feel immediate, and a slow terminal
-		// falls back to the computed re-anchor.
-		return nextReply(this, "cursor-report", {
-			ask: CURSOR_QUERY,
-			timeoutMs: 200,
-			sequence: slots.dsrSequence++,
-			read: ({row}) => row - 1,
-		});
-	}
-
 	writeClipboard(text: string): Promise<void> {
 		return this.write(createClipboardEscape(text));
 	}
@@ -1557,60 +1176,6 @@ export class Exchange extends EventTarget {
 		});
 	}
 
-	clearScreen(): Promise<void> {
-		return this.write(SCREEN_CLEAR);
-	}
-
-	cursorToRow(row: number): Promise<void> {
-		return this.write(getRowStart(row));
-	}
-
-	eraseBelow(): Promise<void> {
-		return this.write(BELOW_ERASE);
-	}
-
-	/** Each line starts by erasing the rest of its row. */
-	writeLines(text: string): Promise<void> {
-		return this.write(
-			LINE_ERASE + text.replace(/\r\n(?!$)/g, "\r\n" + LINE_ERASE),
-		);
-	}
-
-	/**
-	 * Room below the anchor for `rows` comes from scrolling earlier output
-	 * into the scrollback, never from painting over it. Returns the screen
-	 * row the region starts at.
-	 */
-	reserveRows(rows: number): number {
-		const framebuffer = _(this).framebuffer;
-		const overflow = framebuffer.documentTop + rows - framebuffer.rows;
-		const push = overflow <= 0
-			? 0
-			: Math.min(overflow, framebuffer.documentTop);
-		if (push > 0) {
-			framebuffer.documentTop -= push;
-			// The scroll moves the cursor to the bottom row first. Hidden, or
-			// it shows there until the frame places it.
-			this.setDisplayType("cursorHidden", true);
-			void this.scrollUp(framebuffer.rows, push);
-			// The previous buffer is not shifted. Its rows are region-relative
-			// and the region top moved by exactly the scroll. A pending
-			// post-resize reset is screen-absolute and does shift.
-			framebuffer.scrolled(push);
-		}
-		return framebuffer.documentTop;
-	}
-
-	/**
-	 * The scroll is IND (ESC D) from the bottom row. A bare LF after an
-	 * absolute CUP does not scroll (tmux and xterm-headless both), and CSI n S
-	 * scrolls without adding the rows to xterm-headless's scrollback, which
-	 * would make this untestable.
-	 */
-	scrollUp(bottomRow: number, rows: number): Promise<void> {
-		return this.write(getRowStart(bottomRow) + SCROLL_STEP.repeat(rows));
-	}
-
 	/**
 	 * Hand the transport back. Cursor replies still owed are read for a
 	 * while first, because a reply after the tty is handed back is typed
@@ -1642,7 +1207,7 @@ export class Exchange extends EventTarget {
 			void this.write(BIDI_IMPLICIT);
 			slots.priorBidiMode = null;
 		}
-		this.restoreEngagedModes();
+		restoreEngagedModes(this);
 		slots.graphemeClustersNegotiated = false;
 		slots.overlineNegotiated = false;
 		abandonClipboardQuery(this);
@@ -1692,6 +1257,477 @@ export class Exchange extends EventTarget {
 	}
 }
 
+/** Leave the page's resize event to whoever handles terminalresize. */
+export function deferResizeEvent(exchange: Exchange): void {
+	_(exchange).defersResize = true;
+}
+
+/** Writes on change only. Teardown restores what was engaged. */
+export function setDisplayType(
+	exchange: Exchange,
+	name: ModeName,
+	on: boolean,
+): void {
+	const slots = _(exchange);
+	if (!slots.interactive || on === slots.engagedModes.has(name)) {
+		return;
+	}
+	if (on) {
+		slots.engagedModes.add(name);
+	} else {
+		slots.engagedModes.delete(name);
+	}
+	let output = on ? MODE_SPELLINGS[name].set : MODE_SPELLINGS[name].reset;
+	// tmux clears every mouse mode when any one of ?1000 to ?1003 is
+	// reset, so turning motion reporting off took the button mode with
+	// it and clicks stopped arriving. The base capture is asserted again.
+	if (
+		name === "motionReporting" && !on && slots.engagedModes.has("mouseCapture")
+	) {
+		output += MODE_SPELLINGS.mouseCapture.set;
+	}
+	void exchange.write(output);
+}
+
+/**
+ * Resets every engaged mode without forgetting it, so the terminal is
+ * the shell's while the program is suspended.
+ */
+export function releaseModes(exchange: Exchange): void {
+	const slots = _(exchange);
+	for (const name of MODE_RESTORE_ORDER) {
+		if (slots.engagedModes.has(name)) {
+			void exchange.write(MODE_SPELLINGS[name].reset);
+		}
+	}
+	if (slots.priorBidiMode === 1) {
+		void exchange.write(BIDI_IMPLICIT);
+	}
+}
+
+/** Sets every engaged mode again once a suspended program continues. */
+export function reclaimModes(exchange: Exchange): void {
+	const slots = _(exchange);
+	if (slots.priorBidiMode === 1) {
+		void exchange.write(BIDI_EXPLICIT);
+	}
+	for (const name of MODE_RESTORE_ORDER) {
+		if (slots.engagedModes.has(name)) {
+			void exchange.write(MODE_SPELLINGS[name].set);
+		}
+	}
+}
+
+export function restoreEngagedModes(exchange: Exchange): void {
+	for (const name of MODE_RESTORE_ORDER) {
+		if (_(exchange).engagedModes.delete(name)) {
+			void exchange.write(MODE_SPELLINGS[name].reset);
+		}
+	}
+}
+
+export function flushExchange(exchange: Exchange): Promise<void> {
+	return _(exchange).lastWrite;
+}
+
+export function startExchange(exchange: Exchange, input: Input): void {
+	const slots = _(exchange);
+	if (slots.started) {
+		return;
+	}
+	slots.started = true;
+	slots.input = input;
+
+	// A transport that learns its size while it gets ready, as an SSH
+	// session does from its pty request, starts at that size.
+	const transport = slots.transport;
+	const framebuffer = slots.framebuffer;
+	if (
+		transport.cols !== framebuffer.cols || transport.rows !== framebuffer.rows
+	) {
+		terminalResized(exchange, transport.cols, transport.rows);
+	}
+
+	slots.reader = slots.transport.readable.getReader();
+	void readLoop(exchange, slots.reader);
+
+	slots.resizeReader = slots.transport.resizes.getReader();
+	void resizeLoop(exchange, slots.resizeReader);
+
+	void slots.transport.closed.then(() => {
+		if (!slots.disposed) {
+			slots.transportClosed = true;
+			exchange.dispatchEvent(
+				constructInternal(() => new Event("terminalclose")),
+			);
+		}
+	});
+}
+
+export function initializeCursorDetection(exchange: Exchange): void {
+	const slots = _(exchange);
+	slots.cursorDetectionPromise = null;
+	if (slots.anchorDetectionEnabled) {
+		slots.cursorDetectionPromise = Promise.race([
+			detectAnchor(exchange).then(() => {}),
+			new Promise<void>((resolve) => setTimeout(resolve, QUERY_TIMEOUT_MS)),
+		])
+			.catch(() => {
+				slots.hasDetectedAnchor = false;
+			})
+			.finally(() => {
+				slots.cursorDetectionPromise = null;
+			});
+	}
+}
+
+/**
+ * Ask for explicit bidi (mode 8 reset) and then ask what we got. The
+ * diff hands the terminal single cells at absolute positions, which a
+ * terminal reordering implicitly would scramble. A terminal that keeps
+ * reordering anyway (1 or 3) is given logical order instead. Silence and
+ * 0 mean no bidi, which is the contract explicit gives.
+ */
+export async function negotiateBidi(exchange: Exchange): Promise<void> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return;
+	}
+
+	const answer = await queryMode(exchange, "8", BIDI_EXPLICIT);
+	if (answer === null || answer === 0) {
+		return;
+	}
+	slots.priorBidiMode = answer;
+	if (answer === 1 || answer === 3) {
+		adoptTerminalReordering(slots.layout);
+	}
+}
+
+/**
+ * What one cell measures in pixels. Silence leaves the guessed cell
+ * standing, which is the contract an unanswered question gives
+ * everywhere else here. A DA1 asked behind it ends the wait on a
+ * terminal that does not answer. True when the cell changed.
+ */
+export async function negotiateCellPixels(
+	exchange: Exchange,
+): Promise<boolean> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return false;
+	}
+	let answered!: () => void;
+	const until = new Promise<void>((resolve) => (answered = resolve));
+	const cell = nextReply<"cell-size", {width: number; height: number} | null>(
+		exchange,
+		"cell-size",
+		{
+			ask: CELL_SIZE_QUERY,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: null,
+			until,
+			// A terminal with no window reports zeroes. That is not a cell.
+			read: ({width, height}) =>
+				width > 0 && height > 0 ? {width, height} : null,
+		},
+	);
+	void queryDeviceAttributes(exchange).then(answered);
+	const answer = await cell;
+	return (
+		answer !== null &&
+		!slots.disposed &&
+		adoptCellPixels(slots.framebuffer, answer.width, answer.height)
+	);
+}
+
+/**
+ * The terminal's default background, as light or dark. Asked before
+ * the cursor's position, which a terminal answers after it, so the
+ * first frame's wait for the cursor covers this answer too.
+ */
+export async function negotiateColorScheme(
+	exchange: Exchange,
+): Promise<"light" | "dark" | null> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return null;
+	}
+	return await nextReply<"background", "light" | "dark" | null>(
+		exchange,
+		"background",
+		{
+			ask: BACKGROUND_QUERY,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: null,
+			read: ({red, green, blue}) => {
+				slots.terminalBackground =
+					(Math.round(red * 255) << 16) |
+					(Math.round(green * 255) << 8) |
+					Math.round(blue * 255);
+				return (
+					slots.colorScheme =
+						0.2126 * red + 0.7152 * green + 0.0722 * blue <
+					0.5
+							? "dark"
+							: "light"
+				);
+			},
+		},
+	);
+}
+
+/**
+ * DA1, which every terminal answers, and answers after whatever it was
+ * asked before: a marker that the questions ahead of it are settled.
+ */
+export function queryDeviceAttributes(exchange: Exchange): Promise<void> {
+	if (!_(exchange).interactive) {
+		return Promise.resolve();
+	}
+	return nextReply<"device-attributes", boolean>(
+		exchange,
+		"device-attributes",
+		{
+			ask: DEVICE_ATTRIBUTES_QUERY,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: false,
+			read: () => true,
+		},
+	).then(() => {});
+}
+
+/**
+ * Whether the terminal shows 24-bit color, from what it says over the
+ * wire. It does when it keeps a 24-bit color in its style, or answers
+ * XTGETTCAP for RGB or Tc. tmux says neither, but converts 24-bit color
+ * for whatever terminal it runs in, so it counts too. Anything else gets
+ * 256 colors, which every terminal in use draws.
+ */
+export async function negotiateColorDepth(
+	exchange: Exchange,
+): Promise<ColorDepth> {
+	if (!_(exchange).interactive) {
+		return "256";
+	}
+	const ask = <K extends WireItem["kind"]>(
+		kind: K,
+		question: string,
+		read: (item: ReplyItem<K>) => boolean,
+	) =>
+		nextReply<K, boolean>(exchange, kind, {
+			ask: question,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: false,
+			read,
+			group: "color-depth",
+		});
+	const answers = await Promise.all([
+		ask(
+			"sgr-report",
+			RGB_PROBE,
+			({params}) => params !== null && RGB_STYLE.test(params),
+		),
+		ask(
+			"capability-report",
+			`\x1bP+q${RGB_CAPABILITY}\x1b\\`,
+			({known}) => known,
+		),
+		ask(
+			"capability-report",
+			`\x1bP+q${TC_CAPABILITY}\x1b\\`,
+			({known}) => known,
+		),
+		ask("secondary-attributes", SECONDARY_ATTRIBUTES_QUERY, ({params}) =>
+			TMUX_ATTRIBUTES.test(params)),
+	]);
+	return answers.includes(true) ? "rgb" : "256";
+}
+
+/** A terminal that answered a later question will not answer these. */
+export function abandonColorDepthQuery(exchange: Exchange): void {
+	const pending = _(exchange).pendingReplies;
+	for (const entry of pending.filter(
+		(entry) => entry.group === "color-depth",
+	)) {
+		pending.splice(pending.indexOf(entry), 1);
+		entry.giveUp();
+	}
+}
+
+/** A terminal that answered a later question will not answer this. */
+export function abandonColorSchemeQuery(exchange: Exchange): void {
+	const pending = _(exchange).pendingReplies;
+	const index = pending.findIndex((entry) => entry.kind === "background");
+	if (index !== -1) {
+		const [entry] = pending.splice(index, 1);
+		entry.giveUp();
+	}
+}
+
+/** A terminal without DECRQM may echo the request's final byte as text. */
+export function scrubProbeEcho(exchange: Exchange): void {
+	if (!_(exchange).asking) {
+		return;
+	}
+	void exchange.write("\r" + LINE_ERASE);
+}
+
+/**
+ * Mode 2027: measure by grapheme cluster, as getStringWidth does, rather
+ * than per code point as wcwidth does. A terminal that does not know the
+ * mode leaves our measurements as they are. Only whether it agrees
+ * changes.
+ */
+export async function negotiateGraphemeClusters(
+	exchange: Exchange,
+): Promise<void> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return;
+	}
+
+	const answer = await queryMode(
+		exchange,
+		"?2027",
+		MODE_SPELLINGS.clusterWidths.set,
+	);
+	slots.graphemeClustersNegotiated = answer === 1 || answer === 3;
+	// The set went out with the query's own write. A terminal that ignored
+	// it must not see the reset, so only an agreed offer is engaged.
+	if (slots.graphemeClustersNegotiated) {
+		slots.engagedModes.add("clusterWidths");
+	}
+}
+
+/**
+ * SGR 53, overline. No terminal advertises it, but one that draws it
+ * keeps it in its style, and DECRQSS reports the style back. The
+ * probe sets it, asks, and resets it in one write, so the terminal's
+ * style is what it was. A terminal that says nothing draws none.
+ */
+export async function negotiateOverline(exchange: Exchange): Promise<boolean> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return false;
+	}
+	const answer = await nextReply<"sgr-report", boolean>(
+		exchange,
+		"sgr-report",
+		{
+			ask: "\x1b[53m\x1bP$qm\x1b\\\x1b[55m",
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: false,
+			read: ({params}) =>
+				params !== null && params.split(";").includes("53"),
+		},
+	);
+	slots.overlineNegotiated = answer;
+	return answer;
+}
+
+/**
+ * DSR. The cursor row is the anchor. With `silence`, a terminal that
+ * does not answer in time resolves to it, and the anchor stays.
+ */
+export function detectAnchor(
+	exchange: Exchange,
+	silence?: number,
+): Promise<number> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return Promise.reject(
+			new Error("Cannot detect cursor position: not interactive"),
+		);
+	}
+	// A cold start or a slow link can outlast a tighter window.
+	return nextReply(exchange, "cursor-report", {
+		ask: CURSOR_QUERY,
+		timeoutMs: QUERY_TIMEOUT_MS,
+		absent: silence,
+		sequence: slots.dsrSequence++,
+		// The 1-based row the command started on becomes the 0-based
+		// anchor.
+		read: ({row}) => {
+			slots.framebuffer.documentTop = row - 1;
+			slots.hasDetectedAnchor = true;
+			return row;
+		},
+	});
+}
+
+/** The 0-based cursor row, for the resize re-anchor. Rejects on timeout. */
+function queryCursorRow(exchange: Exchange): Promise<number> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return Promise.reject(new Error("not interactive"));
+	}
+	// Short, because the redraw should feel immediate, and a slow terminal
+	// falls back to the computed re-anchor.
+	return nextReply(exchange, "cursor-report", {
+		ask: CURSOR_QUERY,
+		timeoutMs: 200,
+		sequence: slots.dsrSequence++,
+		read: ({row}) => row - 1,
+	});
+}
+
+export function clearScreen(exchange: Exchange): Promise<void> {
+	return exchange.write(SCREEN_CLEAR);
+}
+
+export function cursorToRow(exchange: Exchange, row: number): Promise<void> {
+	return exchange.write(getRowStart(row));
+}
+
+export function eraseBelow(exchange: Exchange): Promise<void> {
+	return exchange.write(BELOW_ERASE);
+}
+
+/** Each line starts by erasing the rest of its row. */
+export function writeLines(exchange: Exchange, text: string): Promise<void> {
+	return exchange.write(
+		LINE_ERASE + text.replace(/\r\n(?!$)/g, "\r\n" + LINE_ERASE),
+	);
+}
+
+/**
+ * Room below the anchor for `rows` comes from scrolling earlier output
+ * into the scrollback, never from painting over it. Returns the screen
+ * row the region starts at.
+ */
+export function reserveRows(exchange: Exchange, rows: number): number {
+	const framebuffer = _(exchange).framebuffer;
+	const overflow = framebuffer.documentTop + rows - framebuffer.rows;
+	const push = overflow <= 0 ? 0 : Math.min(overflow, framebuffer.documentTop);
+	if (push > 0) {
+		framebuffer.documentTop -= push;
+		// The scroll moves the cursor to the bottom row first. Hidden, or
+		// it shows there until the frame places it.
+		setDisplayType(exchange, "cursorHidden", true);
+		void scrollUp(exchange, framebuffer.rows, push);
+		// The previous buffer is not shifted. Its rows are region-relative
+		// and the region top moved by exactly the scroll. A pending
+		// post-resize reset is screen-absolute and does shift.
+		scrolled(framebuffer, push);
+	}
+	return framebuffer.documentTop;
+}
+
+/**
+ * The scroll is IND (ESC D) from the bottom row. A bare LF after an
+ * absolute CUP does not scroll (tmux and xterm-headless both), and CSI n S
+ * scrolls without adding the rows to xterm-headless's scrollback, which
+ * would make this untestable.
+ */
+function scrollUp(
+	exchange: Exchange,
+	bottomRow: number,
+	rows: number,
+): Promise<void> {
+	return exchange.write(getRowStart(bottomRow) + SCROLL_STEP.repeat(rows));
+}
+
 function getRowStart(row: number): string {
 	return `\x1b[${row};1H`;
 }
@@ -1784,7 +1820,7 @@ function requestDeferredProbeFrame(session: Exchange): void {
 			return;
 		}
 		// Deferred probes go out with the next frame even if nothing changed.
-		sessionSlots.framebuffer.flushProbes();
+		flushProbes(sessionSlots.framebuffer);
 		requestRender(sessionSlots.window.document);
 	}, WIDTH_DEFERRAL_WAIT_MS);
 }
@@ -1876,8 +1912,8 @@ function settleWidthProbe(
 	// a screen that was never drawn. Drop it and paint again from the
 	// corrected measurements.
 	if (recordClusterAdvance(probe.cluster, advance)) {
-		sessionSlots.layout.invalidateTextMeasurement();
-		sessionSlots.framebuffer.repaintAll();
+		invalidateTextMeasurement(sessionSlots.layout);
+		repaintAll(sessionSlots.framebuffer);
 		requestRender(sessionSlots.window.document);
 	}
 }
@@ -1964,7 +2000,7 @@ function terminalResized(
 	const framebuffer = sessionSlots.framebuffer;
 	// A SIGWINCH with an unchanged size still redraws but fires no event.
 	const sizeChanged = width !== framebuffer.cols || height !== framebuffer.rows;
-	framebuffer.resize(height, width);
+	resize(framebuffer, height, width);
 	sessionSlots.layout.resize(width, height);
 	// A size change can flip any @media result and every vw/vh value.
 	sessionSlots.cascade.syncStylesheets();
@@ -1996,14 +2032,14 @@ function handleResize(session: Exchange): void {
 	const layout = sessionSlots.layout;
 	layout.performLayout();
 	const contentHeight = layout.documentPaintHeight();
-	const wrappedRowsAbove = framebuffer.wrappedRowsAbovePark(newWidth);
+	const wrappedRowsAbove = wrappedRowsAbovePark(framebuffer, newWidth);
 	const documentTop = framebuffer.documentTop;
 	const settling = sessionSlots.settlingResize;
 
 	// The frame now starts at startRow. Repaint it from there.
 	const redraw = (startRow: number) => {
 		framebuffer.documentTop = startRow;
-		framebuffer.replaced(startRow);
+		replaced(framebuffer, startRow);
 		requestRender(sessionSlots.window.document);
 
 		// The frame is placed by the screen reset. Cursor detection is
@@ -2030,8 +2066,7 @@ function handleResize(session: Exchange): void {
 	};
 
 	if (sessionSlots.anchorDetectionEnabled && wrappedRowsAbove !== null) {
-		session
-			.queryCursorRow()
+		queryCursorRow(session)
 			.then((cursorRow) => {
 				if (settling !== sessionSlots.settlingResize) {
 					return;
@@ -2122,11 +2157,11 @@ function dispatchQueuedItems(session: Exchange): void {
 					}
 					break;
 				}
-				input.dispatch([item]);
+				dispatchInput(input, [item]);
 				break;
 			case "mouse":
 			case "paste":
-				input.dispatch(item);
+				dispatchInput(input, item);
 				break;
 			default:
 				dispatchReply(session, item);
@@ -2395,7 +2430,7 @@ const STOP_CHECK = 50;
 const STOP_GRACE = 1000;
 
 // The size a terminal that reports none is taken to have, as a VT100's.
-export const DEFAULT_COLS = 80;
+const DEFAULT_COLS = 80;
 export const DEFAULT_ROWS = 24;
 
 /**
diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index 2cdc3308..12ccd3ad 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -1,8 +1,8 @@
 import {blendColor, getColorAlpha, TRANSPARENCY_UNIT} from "./cssvalues.ts";
 import type {ColorDepth, Exchange} from "./exchange.ts";
 import {
+	getGraphemes,
 	getStringWidth,
-	graphemeSegmenter,
 	isControlByte,
 	isWidthUncertain,
 	PRINTABLE_ASCII,
@@ -129,66 +129,61 @@ function getUnderlineCodes(style: UnderlineStyle): string[] {
 class FrameWriter {
 	colorDepth: ColorDepth;
 
-	out: string[];
+	out: string;
 
 	constructor(colorDepth: ColorDepth) {
 		this.colorDepth = colorDepth;
-		this.out = [];
+		this.out = "";
 	}
 
-	// Most takes hold one piece or none.
 	take(): string {
-		const out = this.out;
-		if (out.length === 0) {
-			return "";
-		}
-		const taken = out.length === 1 ? out[0] : out.join("");
-		out.length = 0;
+		const taken = this.out;
+		this.out = "";
 		return taken;
 	}
 
 	carriageReturn(): this {
-		this.out.push("\r");
+		this.out += "\r";
 		return this;
 	}
 
 	newLine(rows = 1): this {
-		this.out.push("\r\n".repeat(rows));
+		this.out += "\r\n".repeat(rows);
 		return this;
 	}
 
 	cursorTo(row: number, col: number): this {
-		this.out.push(`\x1b[${row};${col}H`);
+		this.out += `\x1b[${row};${col}H`;
 		return this;
 	}
 
 	cursorForward(columns: number): this {
-		this.out.push(`\x1b[${columns}C`);
+		this.out += `\x1b[${columns}C`;
 		return this;
 	}
 
 	cursorDown(rows: number): this {
-		this.out.push(`\x1b[${rows}B`);
+		this.out += `\x1b[${rows}B`;
 		return this;
 	}
 
 	saveCursor(): this {
-		this.out.push("\x1b7");
+		this.out += "\x1b7";
 		return this;
 	}
 
 	restoreCursor(): this {
-		this.out.push("\x1b8");
+		this.out += "\x1b8";
 		return this;
 	}
 
 	eraseToLineEnd(): this {
-		this.out.push("\x1b[K");
+		this.out += "\x1b[K";
 		return this;
 	}
 
 	eraseBelow(): this {
-		this.out.push("\x1b[J");
+		this.out += "\x1b[J";
 		return this;
 	}
 
@@ -197,41 +192,43 @@ class FrameWriter {
 	 * measures cursor moves from the top margin.
 	 */
 	setScrollRegion(top: number, bottom: number): this {
-		this.out.push(`\x1b[?6l\x1b[${top};${bottom}r`);
+		this.out += `\x1b[?6l\x1b[${top};${bottom}r`;
 		return this;
 	}
 
 	resetScrollRegion(): this {
-		this.out.push("\x1b[r");
+		this.out += "\x1b[r";
 		return this;
 	}
 
 	deleteLines(count: number): this {
-		this.out.push(`\x1b[${count}M`);
+		this.out += `\x1b[${count}M`;
 		return this;
 	}
 
 	insertLines(count: number): this {
-		this.out.push(`\x1b[${count}L`);
+		this.out += `\x1b[${count}L`;
 		return this;
 	}
 
 	resetStyle(): this {
-		this.out.push("\x1b[0m");
+		this.out += "\x1b[0m";
 		return this;
 	}
 
 	style(run: StyleSpan): this {
 		const escape = createStyleEscape(run, this.colorDepth);
-		if (escape !== "") {
-			this.out.push(escape);
-		}
+		this.out += escape;
 		return this;
 	}
 
 	text(glyphs: string): this {
-		if (PRINTABLE_ASCII.test(glyphs)) {
-			this.out.push(glyphs);
+		if (
+			glyphs.length === 1
+				? glyphs >= " " && glyphs <= "~"
+				: PRINTABLE_ASCII.test(glyphs)
+		) {
+			this.out += glyphs;
 			return this;
 		}
 		let safe = "";
@@ -244,7 +241,7 @@ class FrameWriter {
 			}
 			safe += char;
 		}
-		this.out.push(safe);
+		this.out += safe;
 		return this;
 	}
 }
@@ -757,60 +754,6 @@ export class CellGrid {
 		this.border = new Uint32Array(size);
 	}
 
-	clear(): void {
-		this.cluster.fill(0);
-		this.fg.fill(0);
-		this.bg.fill(0);
-		this.attrs.fill(0);
-		this.border.fill(0);
-	}
-
-	clearRange(start: number, end: number): void {
-		if (end <= start) {
-			return;
-		}
-		this.cluster.fill(0, start, end);
-		this.fg.fill(0, start, end);
-		this.bg.fill(0, start, end);
-		this.attrs.fill(0, start, end);
-		this.border.fill(0, start, end);
-	}
-
-	moveRange(dest: number, srcStart: number, srcEnd: number): void {
-		this.cluster.copyWithin(dest, srcStart, srcEnd);
-		this.fg.copyWithin(dest, srcStart, srcEnd);
-		this.bg.copyWithin(dest, srcStart, srcEnd);
-		this.attrs.copyWithin(dest, srcStart, srcEnd);
-		this.border.copyWithin(dest, srcStart, srcEnd);
-	}
-
-	copyFrom(
-		source: CellGrid,
-		{to, start, end}: {to: number; start: number; end: number},
-	): void {
-		this.cluster.set(source.cluster.subarray(start, end), to);
-		this.fg.set(source.fg.subarray(start, end), to);
-		this.bg.set(source.bg.subarray(start, end), to);
-		this.attrs.set(source.attrs.subarray(start, end), to);
-		this.border.set(source.border.subarray(start, end), to);
-	}
-
-	clone(): CellGrid {
-		const copy = new CellGrid(this.rows, this.cols);
-		copy.copyFrom(this, {to: 0, start: 0, end: this.rows * this.cols});
-		return copy;
-	}
-
-	bottomRows(rows: number): CellGrid {
-		const kept = new CellGrid(rows, this.cols);
-		kept.copyFrom(this, {
-			to: 0,
-			start: (this.rows - rows) * this.cols,
-			end: this.rows * this.cols,
-		});
-		return kept;
-	}
-
 	setCell(
 		index: number,
 		grapheme: string,
@@ -827,25 +770,7 @@ export class CellGrid {
 			((width < ATTR.WidthWide ? width : ATTR.WidthWide) << ATTR.WidthShift);
 		this.border[index] = 0;
 		if (width > 1) {
-			this.settleWide(index, width);
-		}
-	}
-
-	/**
-	 * A terminal draws a wide glyph over the columns after its own, so the
-	 * grid holds nothing there, as the screen does. A fill painted under the
-	 * glyph would otherwise stay in its second column, and when the glyph
-	 * goes, a frame painting the same fill there again skips a cell the
-	 * terminal blanked when the glyph was overwritten.
-	 */
-	settleWide(index: number, width: number): void {
-		const end = Math.min(
-			index + width,
-			index - (index % this.cols) + this.cols,
-		);
-		for (let covered = index + 1; covered < end; covered++) {
-			this.cluster[covered] = 0;
-			this.border[covered] = 0;
+			settleWide(this, index, width);
 		}
 	}
 
@@ -860,42 +785,127 @@ export class CellGrid {
 			(packAttrs(style) & ~ATTR.DoubleUnderline) | (1 << ATTR.WidthShift);
 		this.border[index] = border;
 	}
+}
 
-	setBlank(index: number): void {
-		this.cluster[index] = 0x20;
-		this.fg[index] = 0;
-		this.bg[index] = 0;
-		this.attrs[index] = 1 << ATTR.WidthShift;
-		this.border[index] = 0;
-	}
+export function clearGrid(grid: CellGrid): void {
+	grid.cluster.fill(0);
+	grid.fg.fill(0);
+	grid.bg.fill(0);
+	grid.attrs.fill(0);
+	grid.border.fill(0);
+}
 
-	setFrom(index: number, source: CellGrid, sourceIndex: number): void {
-		this.cluster[index] = source.cluster[sourceIndex];
-		this.fg[index] = source.fg[sourceIndex];
-		this.bg[index] = source.bg[sourceIndex];
-		this.attrs[index] = source.attrs[sourceIndex];
-		this.border[index] = source.border[sourceIndex];
+export function clearRange(grid: CellGrid, start: number, end: number): void {
+	if (end <= start) {
+		return;
 	}
+	grid.cluster.fill(0, start, end);
+	grid.fg.fill(0, start, end);
+	grid.bg.fill(0, start, end);
+	grid.attrs.fill(0, start, end);
+	grid.border.fill(0, start, end);
+}
 
-	widthAt(index: number): number {
-		const width = (this.attrs[index] & ATTR.WidthMask) >>> ATTR.WidthShift;
-		return width === ATTR.WidthWide
-			? getStringWidth(decodeGrapheme(this.cluster[index]))
-			: width;
-	}
+function moveRange(
+	grid: CellGrid,
+	dest: number,
+	srcStart: number,
+	srcEnd: number,
+): void {
+	grid.cluster.copyWithin(dest, srcStart, srcEnd);
+	grid.fg.copyWithin(dest, srcStart, srcEnd);
+	grid.bg.copyWithin(dest, srcStart, srcEnd);
+	grid.attrs.copyWithin(dest, srcStart, srcEnd);
+	grid.border.copyWithin(dest, srcStart, srcEnd);
+}
 
-	equalCells(index: number, other: CellGrid, otherIndex: number): boolean {
-		return (
-			this.cluster[index] === other.cluster[otherIndex] &&
-			this.fg[index] === other.fg[otherIndex] &&
-			this.bg[index] === other.bg[otherIndex] &&
-			(this.attrs[index] & ATTR.StyleMask) ===
-			(other.attrs[otherIndex] & ATTR.StyleMask) &&
-			this.border[index] === other.border[otherIndex]
-		);
+function copyGridFrom(
+	grid: CellGrid,
+	source: CellGrid,
+	{to, start, end}: {to: number; start: number; end: number},
+): void {
+	grid.cluster.set(source.cluster.subarray(start, end), to);
+	grid.fg.set(source.fg.subarray(start, end), to);
+	grid.bg.set(source.bg.subarray(start, end), to);
+	grid.attrs.set(source.attrs.subarray(start, end), to);
+	grid.border.set(source.border.subarray(start, end), to);
+}
+
+export function cloneGrid(grid: CellGrid): CellGrid {
+	const copy = new CellGrid(grid.rows, grid.cols);
+	copyGridFrom(copy, grid, {to: 0, start: 0, end: grid.rows * grid.cols});
+	return copy;
+}
+
+function bottomRows(grid: CellGrid, rows: number): CellGrid {
+	const kept = new CellGrid(rows, grid.cols);
+	copyGridFrom(kept, grid, {
+		to: 0,
+		start: (grid.rows - rows) * grid.cols,
+		end: grid.rows * grid.cols,
+	});
+	return kept;
+}
+
+/**
+ * A terminal draws a wide glyph over the columns after its own, so the
+ * grid holds nothing there, as the screen does. A fill painted under the
+ * glyph would otherwise stay in its second column, and when the glyph
+ * goes, a frame painting the same fill there again skips a cell the
+ * terminal blanked when the glyph was overwritten.
+ */
+function settleWide(grid: CellGrid, index: number, width: number): void {
+	const end = Math.min(index + width, index - (index % grid.cols) + grid.cols);
+	for (let covered = index + 1; covered < end; covered++) {
+		grid.cluster[covered] = 0;
+		grid.border[covered] = 0;
 	}
 }
 
+function setBlank(grid: CellGrid, index: number): void {
+	grid.cluster[index] = 0x20;
+	grid.fg[index] = 0;
+	grid.bg[index] = 0;
+	grid.attrs[index] = 1 << ATTR.WidthShift;
+	grid.border[index] = 0;
+}
+
+function setFrom(
+	grid: CellGrid,
+	index: number,
+	source: CellGrid,
+	sourceIndex: number,
+): void {
+	grid.cluster[index] = source.cluster[sourceIndex];
+	grid.fg[index] = source.fg[sourceIndex];
+	grid.bg[index] = source.bg[sourceIndex];
+	grid.attrs[index] = source.attrs[sourceIndex];
+	grid.border[index] = source.border[sourceIndex];
+}
+
+function widthAt(grid: CellGrid, index: number): number {
+	const width = (grid.attrs[index] & ATTR.WidthMask) >>> ATTR.WidthShift;
+	return width === ATTR.WidthWide
+		? getStringWidth(decodeGrapheme(grid.cluster[index]))
+		: width;
+}
+
+function equalCells(
+	grid: CellGrid,
+	index: number,
+	other: CellGrid,
+	otherIndex: number,
+): boolean {
+	return (
+		grid.cluster[index] === other.cluster[otherIndex] &&
+		grid.fg[index] === other.fg[otherIndex] &&
+		grid.bg[index] === other.bg[otherIndex] &&
+		(grid.attrs[index] & ATTR.StyleMask) ===
+		(other.attrs[otherIndex] & ATTR.StyleMask) &&
+		grid.border[index] === other.border[otherIndex]
+	);
+}
+
 function meetEdges(existing: number, incoming: number): number {
 	let met = 0;
 	for (const mask of BORDER_EDGE_MASKS) {
@@ -967,9 +977,23 @@ export function readCell(
 	};
 }
 
-function joinTouchingBorders(grid: CellGrid): void {
+// Returns the borders as painted, before joining, which a frame painted
+// over this one starts from. Given the rows a frame repainted and the
+// borders the last frame joined, only those rows and their neighbours
+// join again, and the rest keep what the last frame joined.
+function joinTouchingBorders(
+	grid: CellGrid,
+	ranges: Array<[number, number]> = [[0, grid.rows]],
+	joinedBefore: Uint32Array | null = null,
+): Uint32Array {
 	const {rows, cols, border} = grid;
 	const painted = border.slice();
+	if (joinedBefore !== null) {
+		border.set(joinedBefore);
+		for (const [from, to] of ranges) {
+			border.set(painted.subarray(from * cols, to * cols), from * cols);
+		}
+	}
 	// Which neighbour to look at for each edge of a cell, and which of that
 	// neighbour's edges would run into this one.
 	const REACHES: Array<{mask: number; step: number; from: number}> = [
@@ -979,7 +1003,14 @@ function joinTouchingBorders(grid: CellGrid): void {
 		{mask: BORDER_MASK.Right, step: 1, from: BORDER_MASK.Left},
 	];
 
-	for (let row = 0; row < rows; row++) {
+	for (const [from, to] of ranges) {
+		for (let row = from; row < to; row++) {
+			joinRow(row);
+		}
+	}
+	return painted;
+
+	function joinRow(row: number): void {
 		for (let col = 0; col < cols; col++) {
 			const index = row * cols + col;
 			const own = painted[index];
@@ -1056,7 +1087,7 @@ function getGridLine(grid: CellGrid, row: number, writer: FrameWriter): string {
 		// already covered by the glyph. Skip it, or the line grows a phantom
 		// space per wide character and shifts what follows.
 		if (encoding === 0) {
-			col += Math.max(1, grid.widthAt(index)) - 1;
+			col += Math.max(1, widthAt(grid, index)) - 1;
 		}
 	}
 
@@ -1071,7 +1102,7 @@ function getLineLength(grid: CellGrid, row: number): number {
 	for (let col = grid.cols - 1; col >= 0; col--) {
 		const index = rowStart + col;
 		if (grid.cluster[index] !== 0) {
-			return col + Math.max(1, grid.widthAt(index));
+			return col + Math.max(1, widthAt(grid, index));
 		}
 	}
 	return 0;
@@ -1116,6 +1147,15 @@ export class CellContext {
 	// The terminal's own background as packed RGB, where it has said, for
 	// a translucent color painted where nothing else is.
 	backdrop: number | null;
+	// The buffer rows a frame repaints, [top, bottom) for each band. Rows
+	// outside them keep what the last frame painted. One band of every row
+	// for a full frame.
+	bands: Array<[number, number]>;
+	// The band being painted. Writes outside it are dropped.
+	bandTop: number;
+	bandBottom: number;
+	// Whether the frame started from the last one.
+	partial: boolean;
 
 	constructor(
 		grid: CellGrid,
@@ -1126,341 +1166,381 @@ export class CellContext {
 		this.caret = null;
 		this.clipRect = null;
 		this.backdrop = null;
+		this.bands = [[0, rows]];
+		this.bandTop = 0;
+		this.bandBottom = rows;
+		this.partial = false;
 		this.grid = grid;
 		this.rows = rows;
 		this.cols = cols;
 		this.viewportOffset = viewportOffset;
 	}
 
-	setCaret(x: number, y: number): void {
-		this.caret = {col: x, row: y};
-	}
-
-	drawRect(
-		x: number,
-		y: number,
-		width: number,
-		height: number,
-		background: number | null | undefined | "default" | "inverse",
-	): void {
-		if (background == null) {
-			return;
-		}
-
-		// "default" clears the cells to the terminal's own background (CSS's
-		// Canvas system color), which still OVERWRITES whatever was painted
-		// underneath with an opaque box in the theme's color, whatever that
-		// theme is. "inverse" fills with SGR inverse instead. That is the
-		// Highlight/HighlightText system-color pair, swapping each cell's
-		// colors with no assumption about what they are.
-		// An opaque fill writes one cell everywhere it lands, so it is
-		// clipped once rather than cell by cell. A page's background fills
-		// the whole screen every frame.
-		if (
-			background !== "inverse" &&
-			(background === "default" || background < TRANSPARENCY_UNIT) &&
-			Number.isInteger(x) &&
-			Number.isInteger(y)
-		) {
-			const bg = background === "default" ? 0 : background & COLOR_MASK;
-			const clip = this.clipRect;
-			const offset = this.viewportOffset;
-			const top = Math.max(y, clip?.top ?? y, -offset);
-			const bottom = Math.min(
-				y + height,
-				clip?.bottom ?? y + height,
-				this.rows - offset,
-			);
-			const left = Math.max(x, clip?.left ?? x, 0);
-			const right = Math.min(x + width, clip?.right ?? x + width, this.cols);
-			const grid = this.grid;
-			const attrs = 1 << ATTR.WidthShift;
-			for (let row = top; row < bottom; row++) {
-				const start = (row + offset) * this.cols;
-				for (let index = start + left; index < start + right; index++) {
-					grid.cluster[index] = 0x20;
-					grid.fg[index] = 0;
-					grid.bg[index] = bg;
-					grid.attrs[index] = attrs;
-					grid.border[index] = 0;
-				}
-			}
-			return;
-		}
-
-		const style: CellStyle = background === "inverse"
-			? {inverse: true}
-			: {bg: background === "default" ? 0 : background};
-
-		for (let row = y; row < y + height; row++) {
-			for (let col = x; col < x + width; col++) {
-				setCell(this, row, col, " ", style);
-			}
-		}
-	}
-
 	measureText(text: string): TextMetrics {
 		if (PRINTABLE_ASCII.test(text)) {
 			return {width: text.length};
 		}
 		let width = 0;
-		for (const segment of graphemeSegmenter.segment(text)) {
-			width += getStringWidth(segment.segment);
+		for (const grapheme of getGraphemes(text)) {
+			width += getStringWidth(grapheme);
 		}
 		return {width};
 	}
+}
 
-	drawText(text: string, x: number, y: number, style?: CellStyle): void {
-		let currentX = x;
+/**
+ * The caret a frame shows: the one it painted, or, on a row a frame that
+ * repainted some rows left alone, the one the last frame showed.
+ */
+export function keptCaret(
+	context: CellContext,
+	previous: {col: number; row: number} | null,
+): {col: number; row: number} | null {
+	if (!context.partial || context.caret !== null || previous === null) {
+		return context.caret;
+	}
+	const row = previous.row + context.viewportOffset;
+	return context.bands.some(([top, end]) => row >= top && row < end)
+		? null
+		: previous;
+}
 
-		if (PRINTABLE_ASCII.test(text)) {
-			for (let i = 0; i < text.length; i++) {
-				if (currentX + 1 > this.cols) {
-					break;
-				}
-				setCell(this, y, currentX, text[i], style);
-				currentX++;
+export function setCaret(context: CellContext, x: number, y: number): void {
+	context.caret = {col: x, row: y};
+}
+
+export function drawRect(
+	context: CellContext,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	background: number | null | undefined | "default" | "inverse",
+): void {
+	if (background == null) {
+		return;
+	}
+
+	// "default" clears the cells to the terminal's own background (CSS's
+	// Canvas system color), which still OVERWRITES whatever was painted
+	// underneath with an opaque box in the theme's color, whatever that
+	// theme is. "inverse" fills with SGR inverse instead. That is the
+	// Highlight/HighlightText system-color pair, swapping each cell's
+	// colors with no assumption about what they are.
+	// An opaque fill writes one cell everywhere it lands, so it is
+	// clipped once rather than cell by cell. A page's background fills
+	// the whole screen every frame.
+	if (
+		background !== "inverse" &&
+		(background === "default" || background < TRANSPARENCY_UNIT) &&
+		Number.isInteger(x) &&
+		Number.isInteger(y)
+	) {
+		const bg = background === "default" ? 0 : background & COLOR_MASK;
+		const clip = context.clipRect;
+		const offset = context.viewportOffset;
+		const top = Math.max(y, clip?.top ?? y, context.bandTop - offset);
+		const bottom = Math.min(
+			y + height,
+			clip?.bottom ?? y + height,
+			context.bandBottom - offset,
+		);
+		const left = Math.max(x, clip?.left ?? x, 0);
+		const right = Math.min(x + width, clip?.right ?? x + width, context.cols);
+		const grid = context.grid;
+		const attrs = 1 << ATTR.WidthShift;
+		for (let row = top; row < bottom; row++) {
+			const start = (row + offset) * context.cols;
+			for (let index = start + left; index < start + right; index++) {
+				grid.cluster[index] = 0x20;
+				grid.fg[index] = 0;
+				grid.bg[index] = bg;
+				grid.attrs[index] = attrs;
+				grid.border[index] = 0;
 			}
-			return;
 		}
+		return;
+	}
 
-		for (const segment of graphemeSegmenter.segment(text)) {
-			const char = segment.segment;
+	const style: CellStyle = background === "inverse"
+		? {inverse: true}
+		: {bg: background === "default" ? 0 : background};
 
-			// Never write a control char to a cell. A cell is a column, and a
-			// control byte must be rejected before it takes one, or it survives
-			// to the output as a raw escape byte (injection from untrusted
-			// text).
-			if (isControlByte(char.codePointAt(0)!)) {
-				continue;
-			}
+	for (let row = y; row < y + height; row++) {
+		for (let col = x; col < x + width; col++) {
+			setCell(context, row, col, " ", style);
+		}
+	}
+}
 
-			const width = getStringWidth(char);
+export function drawText(
+	context: CellContext,
+	text: string,
+	x: number,
+	y: number,
+	style?: CellStyle,
+): void {
+	let currentX = x;
 
-			// A soft hyphen or a lone format character has no width and takes
-			// no cell. A cell holding one would send every walk over the row
-			// backwards.
-			if (width === 0) {
-				continue;
-			}
-			if (currentX + width > this.cols) {
+	if (PRINTABLE_ASCII.test(text)) {
+		for (let i = 0; i < text.length; i++) {
+			if (currentX + 1 > context.cols) {
 				break;
 			}
-
-			setCell(
-				this,
-				y,
-				currentX,
-				char.length > 1 ? char.replace(INVISIBLE_IN_CLUSTER, "") : char,
-				style,
-			);
-			currentX += width;
+			setCell(context, y, currentX, text[i], style);
+			currentX++;
 		}
+		return;
 	}
 
-	/**
-	 * Another grid's cells with its top left at (x, y). An empty cell
-	 * leaves what is under it, one with no background takes the
-	 * background under it, and one in the default foreground takes
-	 * `fallback.fg`.
-	 */
-	drawGrid(source: CellGrid, x: number, y: number, fallback?: CellStyle): void {
-		const grid = this.grid;
-		const fg = (fallback?.fg ?? 0) & COLOR_MASK;
-		for (let row = 0; row < source.rows; row++) {
-			for (let col = 0; col < source.cols; col++) {
-				const from = row * source.cols + col;
-				if (source.cluster[from] === 0) {
-					continue;
-				}
-				const index = getGuardedWriteIndex(this, y + row, x + col);
-				if (index < 0) {
-					continue;
-				}
-				const under = grid.cluster[index] !== 0 ? grid.bg[index] : 0;
-				grid.setFrom(index, source, from);
-				grid.settleWide(index, grid.widthAt(index));
-				if (grid.fg[index] === 0) {
-					grid.fg[index] = fg;
-				}
-				if (grid.bg[index] === 0) {
-					grid.bg[index] = under;
-				}
-			}
+	for (const char of getGraphemes(text)) {
+		// Never write a control char to a cell. A cell is a column, and a
+		// control byte must be rejected before it takes one, or it survives
+		// to the output as a raw escape byte (injection from untrusted
+		// text).
+		if (isControlByte(char.codePointAt(0)!)) {
+			continue;
 		}
-	}
 
-	drawDecoration(x: number, y: number, width: number, style: CellStyle): void {
-		// An edge across existing glyphs, which drawText cannot draw because it
-		// overwrites. The style's fg is the row's default. A cell with its own
-		// (::selection, ::placeholder, an authored color) keeps it.
-		const grid = this.grid;
-		const edgeBit =
-			(style.underline ? ATTR.Underline : 0) |
-			(style.overline ? ATTR.Overline : 0);
-		if (edgeBit === 0) {
-			return;
+		const width = getStringWidth(char);
+
+		// A soft hyphen or a lone format character has no width and takes
+		// no cell. A cell holding one would send every walk over the row
+		// backwards.
+		if (width === 0) {
+			continue;
 		}
-		for (let col = x; col < x + width; col++) {
-			const index = getGuardedWriteIndex(this, y, col);
+		if (currentX + width > context.cols) {
+			break;
+		}
+
+		setCell(
+			context,
+			y,
+			currentX,
+			char.length > 1 ? char.replace(INVISIBLE_IN_CLUSTER, "") : char,
+			style,
+		);
+		currentX += width;
+	}
+}
+
+/**
+ * Another grid's cells with its top left at (x, y). An empty cell
+ * leaves what is under it, one with no background takes the
+ * background under it, and one in the default foreground takes
+ * `fallback.fg`.
+ */
+export function drawGrid(
+	context: CellContext,
+	source: CellGrid,
+	x: number,
+	y: number,
+	fallback?: CellStyle,
+): void {
+	const grid = context.grid;
+	const fg = (fallback?.fg ?? 0) & COLOR_MASK;
+	for (let row = 0; row < source.rows; row++) {
+		for (let col = 0; col < source.cols; col++) {
+			const from = row * source.cols + col;
+			if (source.cluster[from] === 0) {
+				continue;
+			}
+			const index = getGuardedWriteIndex(context, y + row, x + col);
 			if (index < 0) {
 				continue;
 			}
-			if (grid.cluster[index] !== 0) {
-				let attrs = grid.attrs[index] | edgeBit;
-				if (style.dim !== undefined) {
-					attrs = style.dim ? attrs | ATTR.Dim : attrs & ~ATTR.Dim;
-				}
-				grid.attrs[index] = attrs;
-			} else {
-				grid.cluster[index] = 0x20;
-				grid.fg[index] = (style.fg ?? 0) & COLOR_MASK;
-				grid.bg[index] = 0;
-				grid.attrs[index] =
-					edgeBit | (style.dim ? ATTR.Dim : 0) | (1 << ATTR.WidthShift);
+			const under = grid.cluster[index] !== 0 ? grid.bg[index] : 0;
+			setFrom(grid, index, source, from);
+			settleWide(grid, index, widthAt(grid, index));
+			if (grid.fg[index] === 0) {
+				grid.fg[index] = fg;
+			}
+			if (grid.bg[index] === 0) {
+				grid.bg[index] = under;
 			}
-			// The edge replaces a box-drawing glyph with the space that cell
-			// measures as. An outline is a line of its own, not a junction.
-			grid.border[index] = 0;
 		}
 	}
+}
 
-	drawLine(
-		x1: number,
-		y1: number,
-		x2: number,
-		y2: number,
-		line: LineStyle,
-	): void {
-		// Axis-aligned, half-open. The stroke runs from the start cell toward
-		// the end coordinate and stops short of it, so a one-cell vertical is
-		// (x, y, x, y + 1) and equal points stroke nothing. That is also what
-		// disambiguates the axis of a one-cell line.
-		if ((x1 !== x2 && y1 !== y2) || (x1 === x2 && y1 === y2)) {
-			return;
-		}
-		const bits = LINE_BITS[line.style];
-		if (bits === 0) {
-			return;
-		}
-		const style: CellStyle | undefined = line.color != null
-			? {fg: line.color}
-			: undefined;
-		const rounded = BORDER_EDGE_STYLE.Rounded;
-
-		// Each cell records which way the stroke LEAVES it, and an end cell
-		// keeps only its inward half. The stroke enters and stops at center.
-		// Two lines meeting in a cell then join into the corner, the tee or the
-		// cross without either knowing the other exists. A "square" cap
-		// projects through its cell instead, for a free end. A "round" cap is
-		// recorded on the half-stroke, which is how a corner cell learns it
-		// curves.
-		if (y1 === y2) {
-			const a = Math.min(x1, x2);
-			const b = Math.max(x1, x2) - 1;
-			const capA = x1 <= x2 ? line.startCap : line.endCap;
-			const capB = x1 <= x2 ? line.endCap : line.startCap;
-			for (let col = a; col <= b; col++) {
-				let toRight = col < b || capB === "square" ? bits : 0;
-				let toLeft = col > a || capA === "square" ? bits : 0;
-				if (col === a && capA === "round") {
-					toRight |= rounded;
-				}
-				if (col === b && capB === "round") {
-					toLeft |= rounded;
-				}
-				setBorderCell(
-					this,
-					col,
-					y1,
-					(toRight << BORDER_SHIFT.Right) | (toLeft << BORDER_SHIFT.Left),
-					style,
-				);
+export function drawDecoration(
+	context: CellContext,
+	x: number,
+	y: number,
+	width: number,
+	style: CellStyle,
+): void {
+	// An edge across existing glyphs, which drawText cannot draw because it
+	// overwrites. The style's fg is the row's default. A cell with its own
+	// (::selection, ::placeholder, an authored color) keeps it.
+	const grid = context.grid;
+	const edgeBit =
+		(style.underline ? ATTR.Underline : 0) |
+		(style.overline ? ATTR.Overline : 0);
+	if (edgeBit === 0) {
+		return;
+	}
+	for (let col = x; col < x + width; col++) {
+		const index = getGuardedWriteIndex(context, y, col);
+		if (index < 0) {
+			continue;
+		}
+		if (grid.cluster[index] !== 0) {
+			let attrs = grid.attrs[index] | edgeBit;
+			if (style.dim !== undefined) {
+				attrs = style.dim ? attrs | ATTR.Dim : attrs & ~ATTR.Dim;
 			}
+			grid.attrs[index] = attrs;
 		} else {
-			const a = Math.min(y1, y2);
-			const b = Math.max(y1, y2) - 1;
-			const capA = y1 <= y2 ? line.startCap : line.endCap;
-			const capB = y1 <= y2 ? line.endCap : line.startCap;
-			for (let row = a; row <= b; row++) {
-				let down = row < b || capB === "square" ? bits : 0;
-				let up = row > a || capA === "square" ? bits : 0;
-				if (row === a && capA === "round") {
-					down |= rounded;
-				}
-				if (row === b && capB === "round") {
-					up |= rounded;
-				}
-				setBorderCell(
-					this,
-					x1,
-					row,
-					(down << BORDER_SHIFT.Bottom) | (up << BORDER_SHIFT.Top),
-					style,
-				);
-			}
+			grid.cluster[index] = 0x20;
+			grid.fg[index] = (style.fg ?? 0) & COLOR_MASK;
+			grid.bg[index] = 0;
+			grid.attrs[index] =
+				edgeBit | (style.dim ? ATTR.Dim : 0) | (1 << ATTR.WidthShift);
 		}
+		// The edge replaces a box-drawing glyph with the space that cell
+		// measures as. An outline is a line of its own, not a junction.
+		grid.border[index] = 0;
 	}
+}
 
-	drawBox(
-		x: number,
-		y: number,
-		width: number,
-		height: number,
-		sides: {
-			top?: LineStyle;
-			right?: LineStyle;
-			bottom?: LineStyle;
-			left?: LineStyle;
-			topLeft?: "round";
-			topRight?: "round";
-			bottomRight?: "round";
-			bottomLeft?: "round";
-		},
-	): void {
-		if (width < 1 || height < 1) {
-			return;
-		}
-		const r = x + width - 1;
-		const b = y + height - 1;
-		const cap = (
-			adjacent: LineStyle | undefined,
-			corner: "round" | undefined,
-		): "round" | "square" | undefined => (adjacent ? corner : "square");
-
-		// Verticals first. A corner cell's glyph spans two sides but holds one
-		// color, and the horizontal side's wins, which is the closest a cell
-		// gets to the browser's diagonal miter.
-		if (sides.left) {
-			this.drawLine(x, y, x, b + 1, {
-				...sides.left,
-				startCap: cap(sides.top, sides.topLeft),
-				endCap: cap(sides.bottom, sides.bottomLeft),
-			});
-		}
-		if (sides.right) {
-			this.drawLine(r, y, r, b + 1, {
-				...sides.right,
-				startCap: cap(sides.top, sides.topRight),
-				endCap: cap(sides.bottom, sides.bottomRight),
-			});
-		}
-		if (sides.top) {
-			this.drawLine(x, y, r + 1, y, {
-				...sides.top,
-				startCap: cap(sides.left, sides.topLeft),
-				endCap: cap(sides.right, sides.topRight),
-			});
-		}
-		// A 1-row box's bottom shares the top's row, and the top already drew
-		// it.
-		if (sides.bottom && !(b === y && sides.top)) {
-			this.drawLine(x, b, r + 1, b, {
-				...sides.bottom,
-				startCap: cap(sides.left, sides.bottomLeft),
-				endCap: cap(sides.right, sides.bottomRight),
-			});
+export function drawLine(
+	context: CellContext,
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+	line: LineStyle,
+): void {
+	// Axis-aligned, half-open. The stroke runs from the start cell toward
+	// the end coordinate and stops short of it, so a one-cell vertical is
+	// (x, y, x, y + 1) and equal points stroke nothing. That is also what
+	// disambiguates the axis of a one-cell line.
+	if ((x1 !== x2 && y1 !== y2) || (x1 === x2 && y1 === y2)) {
+		return;
+	}
+	const bits = LINE_BITS[line.style];
+	if (bits === 0) {
+		return;
+	}
+	const style: CellStyle | undefined = line.color != null
+		? {fg: line.color}
+		: undefined;
+	const rounded = BORDER_EDGE_STYLE.Rounded;
+
+	// Each cell records which way the stroke LEAVES it, and an end cell
+	// keeps only its inward half. The stroke enters and stops at center.
+	// Two lines meeting in a cell then join into the corner, the tee or the
+	// cross without either knowing the other exists. A "square" cap
+	// projects through its cell instead, for a free end. A "round" cap is
+	// recorded on the half-stroke, which is how a corner cell learns it
+	// curves.
+	if (y1 === y2) {
+		const a = Math.min(x1, x2);
+		const b = Math.max(x1, x2) - 1;
+		const capA = x1 <= x2 ? line.startCap : line.endCap;
+		const capB = x1 <= x2 ? line.endCap : line.startCap;
+		for (let col = a; col <= b; col++) {
+			let toRight = col < b || capB === "square" ? bits : 0;
+			let toLeft = col > a || capA === "square" ? bits : 0;
+			if (col === a && capA === "round") {
+				toRight |= rounded;
+			}
+			if (col === b && capB === "round") {
+				toLeft |= rounded;
+			}
+			setBorderCell(
+				context,
+				col,
+				y1,
+				(toRight << BORDER_SHIFT.Right) | (toLeft << BORDER_SHIFT.Left),
+				style,
+			);
 		}
+	} else {
+		const a = Math.min(y1, y2);
+		const b = Math.max(y1, y2) - 1;
+		const capA = y1 <= y2 ? line.startCap : line.endCap;
+		const capB = y1 <= y2 ? line.endCap : line.startCap;
+		for (let row = a; row <= b; row++) {
+			let down = row < b || capB === "square" ? bits : 0;
+			let up = row > a || capA === "square" ? bits : 0;
+			if (row === a && capA === "round") {
+				down |= rounded;
+			}
+			if (row === b && capB === "round") {
+				up |= rounded;
+			}
+			setBorderCell(
+				context,
+				x1,
+				row,
+				(down << BORDER_SHIFT.Bottom) | (up << BORDER_SHIFT.Top),
+				style,
+			);
+		}
+	}
+}
+
+export function drawBox(
+	context: CellContext,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	sides: {
+		top?: LineStyle;
+		right?: LineStyle;
+		bottom?: LineStyle;
+		left?: LineStyle;
+		topLeft?: "round";
+		topRight?: "round";
+		bottomRight?: "round";
+		bottomLeft?: "round";
+	},
+): void {
+	if (width < 1 || height < 1) {
+		return;
+	}
+	const r = x + width - 1;
+	const b = y + height - 1;
+	const cap = (
+		adjacent: LineStyle | undefined,
+		corner: "round" | undefined,
+	): "round" | "square" | undefined => (adjacent ? corner : "square");
+
+	// Verticals first. A corner cell's glyph spans two sides but holds one
+	// color, and the horizontal side's wins, which is the closest a cell
+	// gets to the browser's diagonal miter.
+	if (sides.left) {
+		drawLine(context, x, y, x, b + 1, {
+			...sides.left,
+			startCap: cap(sides.top, sides.topLeft),
+			endCap: cap(sides.bottom, sides.bottomLeft),
+		});
+	}
+	if (sides.right) {
+		drawLine(context, r, y, r, b + 1, {
+			...sides.right,
+			startCap: cap(sides.top, sides.topRight),
+			endCap: cap(sides.bottom, sides.bottomRight),
+		});
+	}
+	if (sides.top) {
+		drawLine(context, x, y, r + 1, y, {
+			...sides.top,
+			startCap: cap(sides.left, sides.topLeft),
+			endCap: cap(sides.right, sides.topRight),
+		});
+	}
+	// A 1-row box's bottom shares the top's row, and the top already drew
+	// it.
+	if (sides.bottom && !(b === y && sides.top)) {
+		drawLine(context, x, b, r + 1, b, {
+			...sides.bottom,
+			startCap: cap(sides.left, sides.bottomLeft),
+			endCap: cap(sides.right, sides.bottomRight),
+		});
 	}
 }
 
@@ -1479,8 +1559,8 @@ function getGuardedWriteIndex(
 ): number {
 	const terminalRow = row + context.viewportOffset;
 	if (
-		terminalRow < 0 ||
-		terminalRow >= context.rows ||
+		terminalRow < context.bandTop ||
+		terminalRow >= context.bandBottom ||
 		col < 0 ||
 		col >= context.cols
 	) {
@@ -1732,7 +1812,7 @@ function safeProbeCell(grid: CellGrid): {row: number; col: number} | null {
 			}
 			// A wide glyph covers its continuation column too, which the grid
 			// leaves empty. The span runs on across it.
-			col += border[index] > 0 ? 1 : Math.max(1, grid.widthAt(index));
+			col += border[index] > 0 ? 1 : Math.max(1, widthAt(grid, index));
 			if (
 				col - spanStart >= PROBE_RESIDUE_COLUMNS &&
 				spanStart + PROBE_RESIDUE_COLUMNS < cols
@@ -1882,7 +1962,7 @@ function generateANSI(
 				: decodeGrapheme(cluster[index]);
 			output += writer.text(glyph).take();
 
-			const width = grid.widthAt(index);
+			const width = widthAt(grid, index);
 
 			// Only clusters terminals disagree about are probed. The char test
 			// keeps ASCII from reaching isWidthUncertain, and a border glyph is
@@ -1949,6 +2029,15 @@ const GUESSED_CELL_PIXELS: Readonly<{width: number; height: number}> = {
 
 export class Framebuffer {
 	prev: CellGrid | null;
+	// The previous frame's borders before they were joined, and where it
+	// was painted from, so a frame that repaints some rows starts from it.
+	prevBorders: Uint32Array | null;
+	prevFrame: {
+		offset: number;
+		cursorRow: number | undefined;
+		caret: {col: number; row: number} | null;
+	} | null;
+
 	// The dropped grid, reused by the next frame of the same size.
 	spare: CellGrid | null;
 	diff: CellGrid | null;
@@ -1977,11 +2066,16 @@ export class Framebuffer {
 	writer: FrameWriter;
 	frameScroll: number;
 	dirty: boolean;
+	// Whether the next frame repaints every row, because something changed
+	// that names no rows of its own.
+	wholeDamage: boolean;
 
 	constructor(rows: number, cols: number, colorDepth: ColorDepth = "rgb") {
 		this.probesWaiting = false;
 		this.exchange = null;
 		this.prev = null;
+		this.prevBorders = null;
+		this.prevFrame = null;
 		this.spare = null;
 		this.diff = null;
 		this.pendingEnd = null;
@@ -2000,6 +2094,7 @@ export class Framebuffer {
 		this.cellSize = {...GUESSED_CELL_PIXELS};
 		this.frameScroll = 0;
 		this.dirty = true;
+		this.wholeDamage = true;
 		this.writer = new FrameWriter(colorDepth);
 	}
 
@@ -2052,133 +2147,6 @@ export class Framebuffer {
 		this.documentTopRow = row;
 	}
 
-	resize(rows: number, cols: number): void {
-		this.rowCount = rows;
-		this.colCount = cols;
-	}
-
-	rebind(colorDepth: ColorDepth): void {
-		this.writer = new FrameWriter(colorDepth);
-	}
-
-	scrollTo(row: number): void {
-		const next = Math.max(0, row);
-		this.frameScroll += next - this.scrollRow;
-		this.scrollRow = next;
-	}
-
-	/**
-	 * XTWINOPS answered. Whatever was painted against the guess repaints.
-	 * Whether the size changed, which images sized from it need to know.
-	 */
-	adoptCellPixels(width: number, height: number): boolean {
-		const cell = this.cellSize;
-		if (cell.width === width && cell.height === height) {
-			return false;
-		}
-		this.cellSize = {width, height};
-		this.invalidate();
-		return true;
-	}
-
-	invalidate(): void {
-		this.dirty = true;
-	}
-
-	/**
-	 * Whether shifting the whole width of rows `[top, end)` by `delta` costs
-	 * less than repainting the columns `[left, right)` that scrolled. The
-	 * shift drags the cells beside those columns too, and the diff has to put
-	 * them back. Both costs are read from the previous frame: a cell costs
-	 * its glyph and each color it changes from its left neighbour, which is
-	 * what the diff writes.
-	 */
-	insetShiftPays(
-		{delta, top, end, left, right}: {
-			delta: number;
-			top: number;
-			end: number;
-			left: number;
-			right: number;
-		},
-	): boolean {
-		const prev = this.prev;
-		if (prev === null || prev.cols !== this.colCount) {
-			return false;
-		}
-		const cols = prev.cols;
-		const cost = (index: number, col: number): number =>
-			1 +
-			(col > 0 && prev.fg[index] !== prev.fg[index - 1] ? 16 : 0) +
-			(col > 0 && prev.bg[index] !== prev.bg[index - 1] ? 16 : 0);
-		const bandEnd = Math.min(end, prev.rows);
-		let beside = 0;
-		let inside = 0;
-		for (let row = top; row < bandEnd; row++) {
-			const from = row + delta;
-			const vacated = from < top || from >= bandEnd;
-			for (let col = 0; col < cols; col++) {
-				const index = row * cols + col;
-				const source = from * cols + col;
-				if (col < left || col >= right) {
-					if (
-						vacated
-							? prev.cluster[index] !== 0
-							: !prev.equalCells(index, prev, source)
-					) {
-						beside += cost(index, col);
-					}
-				} else if (!vacated && !prev.equalCells(index, prev, source)) {
-					inside += cost(source, col);
-				}
-			}
-		}
-		return beside < inside;
-	}
-
-	wrappedRowsAbovePark(cols: number): number | null {
-		// The resize re-anchor asks the terminal where the cursor is after the
-		// rewrap and subtracts this to find the frame's new top row.
-		const grid = this.prev;
-		if (grid === null || this.prevContentHeight === 0 || cols <= 0) {
-			return null;
-		}
-		const limit = Math.min(this.park.row, this.prevContentHeight, grid.rows);
-		let wrapped = 0;
-		for (let row = 0; row < limit; row++) {
-			wrapped += Math.max(1, Math.ceil(getLineLength(grid, row) / cols));
-		}
-		return wrapped + Math.floor(this.park.col / cols);
-	}
-
-	replaced(fromRow = 0): void {
-		this.needsScreenReset = true;
-		this.resetAtRow = Math.max(0, fromRow);
-		this.hasSavedCursor = false;
-		this.repaintAll();
-	}
-
-	scrolled(rows: number): void {
-		if (this.needsScreenReset && rows > 0) {
-			this.resetAtRow = Math.max(0, this.resetAtRow - rows);
-		}
-	}
-
-	flushProbes(): void {
-		this.probesWaiting = true;
-	}
-
-	repaintAll(): void {
-		// After a resize DECRC no longer points where the content began, so
-		// the next frame homes, clears the visible screen (ED2, not ED3, which
-		// leaves the scrollback alone) and reprints.
-		this.spare = this.prev;
-		this.prev = null;
-		this.prevContentHeight = 0;
-		this.needsFullClear = true;
-		this.renderedLines.clear();
-	}
-
 	/**
 	 * A static rendering painted apart from the live frame, whose pending
 	 * scroll and repaint it leaves as they were. A file wants a bare
@@ -2202,463 +2170,715 @@ export class Framebuffer {
 		}
 		return lines.join(lineEnding) + lineEnding;
 	}
+}
 
-	beginFrame(
-		{offset, cursorRow: cursorPosition, regionRows, delta = 0, shift}: {
+export function resize(
+	framebuffer: Framebuffer,
+	rows: number,
+	cols: number,
+): void {
+	framebuffer.rowCount = rows;
+	framebuffer.colCount = cols;
+}
 
-			/** Rows the document scroll has scrolled, negative downward. */
-			offset: number;
+export function rebind(framebuffer: Framebuffer, colorDepth: ColorDepth): void {
+	framebuffer.writer = new FrameWriter(colorDepth);
+}
 
-			cursorRow?: number;
+export function scrollTo(framebuffer: Framebuffer, row: number): void {
+	const next = Math.max(0, row);
+	framebuffer.frameScroll += next - framebuffer.scrollRow;
+	framebuffer.scrollRow = next;
+}
 
-			/**
-		 * Rows past the terminal's height are printed with newlines, which is
-		 * what scrolls them into the scrollback where they stay readable (CSI n
-		 * S discards them). Only the last `rows` of them are kept as the previous
-		 * frame. They alone can still be redrawn.
-		 */
-			regionRows?: number;
+/**
+ * XTWINOPS answered. Whatever was painted against the guess repaints.
+ * Whether the size changed, which images sized from it need to know.
+ */
+export function adoptCellPixels(
+	framebuffer: Framebuffer,
+	width: number,
+	height: number,
+): boolean {
+	const cell = framebuffer.cellSize;
+	if (cell.width === width && cell.height === height) {
+		return false;
+	}
+	framebuffer.cellSize = {width, height};
+	invalidate(framebuffer);
+	return true;
+}
 
-			/** Rows the scroll moved since the last frame, positive downward. */
-			delta?: number;
+export function invalidate(framebuffer: Framebuffer): void {
+	framebuffer.dirty = true;
+	framebuffer.wholeDamage = true;
+}
 
-			/**
-		 * The buffer rows `delta` moved, `[top, end)`. A scrolling element's
-		 * port names its own rows here. The document scroll names none and takes the
-		 * whole region, which is the rows a document scroll spans.
-		 */
-			shift?: {top: number; end: number};
-		},
-	): CellContext {
-		const frameRows = Math.max(this.rowCount, regionRows ?? this.rowCount);
-		const overflowing = frameRows > this.rowCount;
-		const cols = this.colCount;
-		const next = takeGrid(this, frameRows, cols);
-
-		// A scroll is a rigid transform the terminal performs. DECSTBM pins the
-		// margins to the shifted rows (a shell prompt above stays outside
-		// them), and DL/IL move rows without touching the scrollback, unlike
-		// SU. The previous buffer shifts to match, so the diff emits only what
-		// the shift could not carry.
-		let scrollPrefix = "";
-		const regionTop = cursorPosition ?? 0;
-		const regionEnd = Math.min(regionRows ?? this.rowCount, this.rowCount);
-		const viewportTop = Math.max(0, shift ? shift.top : 0);
-		const bandEnd = Math.min(
-			this.prev?.rows ?? 0,
-			shift ? shift.end : regionEnd - regionTop,
-		);
-		const scrolling =
-			delta !== 0 &&
-			Math.abs(delta) < this.rowCount &&
-			bandEnd > viewportTop &&
-			this.prev !== null &&
-			// A rigid transform only makes sense between grids of one width.
-			this.prev.cols === cols &&
-			!overflowing &&
-			!this.needsScreenReset &&
-			!this.needsFullClear &&
-			cursorPosition !== undefined;
-		if (scrolling && this.prev) {
-			const prev = this.prev;
-			const start = viewportTop * cols;
-			const stop = bandEnd * cols;
-			const shift = Math.abs(delta) * cols;
-			if (shift >= stop - start) {
-				prev.clearRange(start, stop);
-			} else if (delta > 0) {
-				prev.moveRange(start, start + shift, stop);
-				prev.clearRange(stop - shift, stop);
-			} else {
-				prev.moveRange(start + shift, start, stop - shift);
-				prev.clearRange(start, start + shift);
-			}
-			const shiftedLines = new Set<number>();
-			for (const row of this.renderedLines) {
-				if (row < viewportTop || row >= bandEnd) {
-					shiftedLines.add(row);
-					continue;
-				}
-				const moved = row - delta;
-				if (moved >= viewportTop && moved < bandEnd) {
-					shiftedLines.add(moved);
+/** A frame is wanted, and whoever asks names the rows it changed. */
+export function requestFrame(framebuffer: Framebuffer): void {
+	framebuffer.dirty = true;
+}
+
+/**
+ * Whether shifting the whole width of rows `[top, end)` by `delta` costs
+ * less than repainting the columns `[left, right)` that scrolled. The
+ * shift drags the cells beside those columns too, and the diff has to put
+ * them back. Both costs are read from the previous frame: a cell costs
+ * its glyph and each color it changes from its left neighbour, which is
+ * what the diff writes.
+ */
+export function insetShiftPays(
+	framebuffer: Framebuffer,
+	{delta, top, end, left, right}: {
+		delta: number;
+		top: number;
+		end: number;
+		left: number;
+		right: number;
+	},
+): boolean {
+	const prev = framebuffer.prev;
+	if (prev === null || prev.cols !== framebuffer.colCount) {
+		return false;
+	}
+	const cols = prev.cols;
+	const cost = (index: number, col: number): number =>
+		1 +
+		(col > 0 && prev.fg[index] !== prev.fg[index - 1] ? 16 : 0) +
+		(col > 0 && prev.bg[index] !== prev.bg[index - 1] ? 16 : 0);
+	const bandEnd = Math.min(end, prev.rows);
+	let beside = 0;
+	let inside = 0;
+	for (let row = top; row < bandEnd; row++) {
+		const from = row + delta;
+		const vacated = from < top || from >= bandEnd;
+		for (let col = 0; col < cols; col++) {
+			const index = row * cols + col;
+			const source = from * cols + col;
+			if (col < left || col >= right) {
+				if (
+					vacated
+						? prev.cluster[index] !== 0
+						: !equalCells(prev, index, prev, source)
+				) {
+					beside += cost(index, col);
 				}
+			} else if (!vacated && !equalCells(prev, index, prev, source)) {
+				inside += cost(source, col);
 			}
-			this.renderedLines = shiftedLines;
-
-			// DECSTBM homes the cursor. The standard prefix always CUPs for
-			// this caller afterward.
-			const count = Math.abs(delta);
-			const bandRow = regionTop + viewportTop + 1;
-			const writer = this.writer;
-			writer.setScrollRegion(bandRow, regionTop + bandEnd).cursorTo(bandRow, 1);
-			if (delta > 0) {
-				writer.deleteLines(count);
-			} else {
-				writer.insertLines(count);
+		}
+	}
+	return beside < inside;
+}
+
+export function wrappedRowsAbovePark(
+	framebuffer: Framebuffer,
+	cols: number,
+): number | null {
+	// The resize re-anchor asks the terminal where the cursor is after the
+	// rewrap and subtracts this to find the frame's new top row.
+	const grid = framebuffer.prev;
+	if (grid === null || framebuffer.prevContentHeight === 0 || cols <= 0) {
+		return null;
+	}
+	const limit = Math.min(
+		framebuffer.park.row,
+		framebuffer.prevContentHeight,
+		grid.rows,
+	);
+	let wrapped = 0;
+	for (let row = 0; row < limit; row++) {
+		wrapped += Math.max(1, Math.ceil(getLineLength(grid, row) / cols));
+	}
+	return wrapped + Math.floor(framebuffer.park.col / cols);
+}
+
+export function replaced(framebuffer: Framebuffer, fromRow = 0): void {
+	framebuffer.needsScreenReset = true;
+	framebuffer.resetAtRow = Math.max(0, fromRow);
+	framebuffer.hasSavedCursor = false;
+	repaintAll(framebuffer);
+}
+
+export function scrolled(framebuffer: Framebuffer, rows: number): void {
+	if (framebuffer.needsScreenReset && rows > 0) {
+		framebuffer.resetAtRow = Math.max(0, framebuffer.resetAtRow - rows);
+	}
+}
+
+export function flushProbes(framebuffer: Framebuffer): void {
+	framebuffer.probesWaiting = true;
+}
+
+export function repaintAll(framebuffer: Framebuffer): void {
+	// After a resize DECRC no longer points where the content began, so
+	// the next frame homes, clears the visible screen (ED2, not ED3, which
+	// leaves the scrollback alone) and reprints.
+	framebuffer.spare = framebuffer.prev;
+	framebuffer.prev = null;
+	framebuffer.prevBorders = null;
+	framebuffer.prevFrame = null;
+	framebuffer.prevContentHeight = 0;
+	framebuffer.needsFullClear = true;
+	framebuffer.renderedLines.clear();
+}
+
+export function beginFrame(
+	framebuffer: Framebuffer,
+	{offset, cursorRow: cursorPosition, regionRows, delta = 0, shift, bands}: {
+
+		/** Rows the document scroll has scrolled, negative downward. */
+		offset: number;
+
+		cursorRow?: number;
+
+		/**
+	 * Rows past the terminal's height are printed with newlines, which is
+	 * what scrolls them into the scrollback where they stay readable (CSI n
+	 * S discards them). Only the last `rows` of them are kept as the previous
+	 * frame. They alone can still be redrawn.
+	 */
+		regionRows?: number;
+
+		/** Rows the scroll moved since the last frame, positive downward. */
+		delta?: number;
+
+		/**
+	 * The buffer rows `delta` moved, `[top, end)`. A scrolling element's
+	 * port names its own rows here. The document scroll names none and takes the
+	 * whole region, which is the rows a document scroll spans.
+	 */
+		shift?: {top: number; end: number};
+
+		/**
+	 * The buffer rows that changed, `[top, end)` each. The frame starts
+	 * from the last one and repaints only these, when nothing moved the
+	 * rest. Absent, every row repaints.
+	 */
+		bands?: Array<[number, number]>;
+	},
+): CellContext {
+	const frameRows = Math.max(
+		framebuffer.rowCount,
+		regionRows ?? framebuffer.rowCount,
+	);
+	const overflowing = frameRows > framebuffer.rowCount;
+	const cols = framebuffer.colCount;
+	const next = takeGrid(framebuffer, frameRows, cols);
+
+	// A scroll is a rigid transform the terminal performs. DECSTBM pins the
+	// margins to the shifted rows (a shell prompt above stays outside
+	// them), and DL/IL move rows without touching the scrollback, unlike
+	// SU. The previous buffer shifts to match, so the diff emits only what
+	// the shift could not carry.
+	let scrollPrefix = "";
+	const regionTop = cursorPosition ?? 0;
+	const regionEnd = Math.min(
+		regionRows ?? framebuffer.rowCount,
+		framebuffer.rowCount,
+	);
+	const viewportTop = Math.max(0, shift ? shift.top : 0);
+	const bandEnd = Math.min(
+		framebuffer.prev?.rows ?? 0,
+		shift ? shift.end : regionEnd - regionTop,
+	);
+	const scrolling =
+		delta !== 0 &&
+		Math.abs(delta) < framebuffer.rowCount &&
+		bandEnd > viewportTop &&
+		framebuffer.prev !== null &&
+		// A rigid transform only makes sense between grids of one width.
+		framebuffer.prev.cols === cols &&
+		!overflowing &&
+		!framebuffer.needsScreenReset &&
+		!framebuffer.needsFullClear &&
+		cursorPosition !== undefined;
+	if (scrolling && framebuffer.prev) {
+		const prev = framebuffer.prev;
+		const start = viewportTop * cols;
+		const stop = bandEnd * cols;
+		const shift = Math.abs(delta) * cols;
+		if (shift >= stop - start) {
+			clearRange(prev, start, stop);
+		} else if (delta > 0) {
+			moveRange(prev, start, start + shift, stop);
+			clearRange(prev, stop - shift, stop);
+		} else {
+			moveRange(prev, start + shift, start, stop - shift);
+			clearRange(prev, start, start + shift);
+		}
+		const shiftedLines = new Set<number>();
+		for (const row of framebuffer.renderedLines) {
+			if (row < viewportTop || row >= bandEnd) {
+				shiftedLines.add(row);
+				continue;
+			}
+			const moved = row - delta;
+			if (moved >= viewportTop && moved < bandEnd) {
+				shiftedLines.add(moved);
 			}
-			scrollPrefix = writer.resetScrollRegion().take();
 		}
+		framebuffer.renderedLines = shiftedLines;
 
-		const context = new CellContext(next, frameRows, cols, offset);
-		context.backdrop = this.exchange?.terminalBackground ?? null;
-		this.pendingEnd = (): string => {
-			const measurer = this.exchange !== null && isProbingUseful(this.exchange)
-				? this.exchange
+		// DECSTBM homes the cursor. The standard prefix always CUPs for
+		// this caller afterward.
+		const count = Math.abs(delta);
+		const bandRow = regionTop + viewportTop + 1;
+		const writer = framebuffer.writer;
+		writer.setScrollRegion(bandRow, regionTop + bandEnd).cursorTo(bandRow, 1);
+		if (delta > 0) {
+			writer.deleteLines(count);
+		} else {
+			writer.insertLines(count);
+		}
+		scrollPrefix = writer.resetScrollRegion().take();
+	}
+
+	const prevFrame = framebuffer.prevFrame;
+	const prevBorders = framebuffer.prevBorders;
+	const partial =
+		bands !== undefined &&
+		framebuffer.prev !== null &&
+		prevBorders !== null &&
+		prevFrame !== null &&
+		!scrolling &&
+		delta === 0 &&
+		!overflowing &&
+		framebuffer.prev.rows === frameRows &&
+		framebuffer.prev.cols === cols &&
+		prevFrame.offset === offset &&
+		prevFrame.cursorRow === cursorPosition &&
+		!framebuffer.needsScreenReset &&
+		!framebuffer.needsFullClear &&
+		!framebuffer.probesWaiting;
+
+	const context = new CellContext(next, frameRows, cols, offset);
+	context.backdrop = framebuffer.exchange?.terminalBackground ?? null;
+	if (partial) {
+		context.partial = true;
+		const prev = framebuffer.prev!;
+		next.cluster.set(prev.cluster);
+		next.fg.set(prev.fg);
+		next.bg.set(prev.bg);
+		next.attrs.set(prev.attrs);
+		next.border.set(prevBorders);
+		context.bands = [];
+		for (const [top, end] of bands) {
+			const from = Math.max(0, top);
+			const to = Math.min(frameRows, end);
+			if (from < to) {
+				clearRange(next, from * cols, to * cols);
+				context.bands.push([from, to]);
+			}
+		}
+	}
+	framebuffer.pendingEnd = (): string => {
+		const measurer =
+			framebuffer.exchange !== null &&
+			isProbingUseful(framebuffer.exchange)
+				? framebuffer.exchange
 				: undefined;
-			// The frame is complete. Join the borders whose strokes touch, so
-			// the diff below sees a junction appear even when only its
-			// neighbour changed.
-			joinTouchingBorders(next);
-
-			// Build the diff. A frame taller than the terminal is a growth
-			// frame. The rows below the fold have never been on screen, so
-			// there is nothing to diff against. Print all of it.
-			let diff = this.diff;
-			if (diff === null || diff.rows !== frameRows || diff.cols !== cols) {
-				diff = new CellGrid(frameRows, cols);
-				this.diff = diff;
-			} else {
-				diff.clear();
+		// The frame is complete. Join the borders whose strokes touch, so
+		// the diff below sees a junction appear even when only its
+		// neighbour changed.
+		// A frame painted over the last one changed only its bands, and the
+		// rows beside them where borders join.
+		const changedRows = partial
+			? context.bands.map(([top, end]): [number, number] => [
+				Math.max(0, top - 1),
+				Math.min(frameRows, end + 1),
+			])
+			: undefined;
+		const painted = joinTouchingBorders(
+			next,
+			changedRows,
+			partial ? framebuffer.prev!.border : null,
+		);
+		let unchangedRows: Uint8Array | null = null;
+		if (changedRows !== undefined) {
+			unchangedRows = new Uint8Array(frameRows).fill(1);
+			for (const [from, to] of changedRows) {
+				unchangedRows.fill(0, from, to);
 			}
+		}
 
-			const prev = this.prev;
-			const erasesDisputedRows =
-				this.exchange !== null && !this.exchange.clusterWidthsNegotiated();
-			if (prev === null || overflowing) {
-				diff.copyFrom(next, {to: 0, start: 0, end: frameRows * cols});
-			} else {
-				const prevRows = prev.rows;
-				const prevCols = prev.cols;
-				const aligned = prevCols === cols;
-
-				for (let row = 0; row < this.rowCount; row++) {
-					const nextRow = row * cols;
-					const prevRow = row * prevCols;
-					const rowInPrev = row < prevRows;
-
-					let col = 0;
-					if (aligned && rowInPrev) {
-						while (col < cols) {
-							const n = nextRow + col;
-							const p = prevRow + col;
-							if (
-								next.cluster[n] !== prev.cluster[p] ||
-								next.fg[n] !== prev.fg[p] ||
-								next.bg[n] !== prev.bg[p] ||
-								(next.attrs[n] & ATTR.StyleMask) !==
-								(prev.attrs[p] & ATTR.StyleMask) ||
-								next.border[n] !== prev.border[p]
-							) {
-								break;
-							}
-							col++;
-						}
-						if (col === cols) {
-							continue;
-						}
-						// A terminal that drew a cluster of the old row at another
-						// width than the engine measured has the rest of that row
-						// shifted. Cells rewritten after it would land beside the
-						// old ones, so the row is erased and written whole. A
-						// cluster of the new row is the same in reverse: a
-						// multiplexer that counts it wider than the terminal under
-						// it draws it never writes the extra column, and that
-						// column would keep the old row's glyph.
+		// Build the diff. A frame taller than the terminal is a growth
+		// frame. The rows below the fold have never been on screen, so
+		// there is nothing to diff against. Print all of it.
+		let diff = framebuffer.diff;
+		if (diff === null || diff.rows !== frameRows || diff.cols !== cols) {
+			diff = new CellGrid(frameRows, cols);
+			framebuffer.diff = diff;
+		} else {
+			clearGrid(diff);
+		}
+
+		const prev = framebuffer.prev;
+		const erasesDisputedRows =
+			framebuffer.exchange !== null &&
+			!framebuffer.exchange.clusterWidthsNegotiated();
+		if (prev === null || overflowing) {
+			copyGridFrom(diff, next, {to: 0, start: 0, end: frameRows * cols});
+		} else {
+			const prevRows = prev.rows;
+			const prevCols = prev.cols;
+			const aligned = prevCols === cols;
+
+			for (let row = 0; row < framebuffer.rowCount; row++) {
+				if (unchangedRows !== null && unchangedRows[row] === 1) {
+					continue;
+				}
+				const nextRow = row * cols;
+				const prevRow = row * prevCols;
+				const rowInPrev = row < prevRows;
+
+				let col = 0;
+				if (aligned && rowInPrev) {
+					while (col < cols) {
+						const n = nextRow + col;
+						const p = prevRow + col;
 						if (
-							erasesDisputedRows &&
-							hasDisputedCellBefore(prev, prevRow, cols, next, nextRow)
+							next.cluster[n] !== prev.cluster[p] ||
+							next.fg[n] !== prev.fg[p] ||
+							next.bg[n] !== prev.bg[p] ||
+							(next.attrs[n] & ATTR.StyleMask) !==
+							(prev.attrs[p] & ATTR.StyleMask) ||
+							next.border[n] !== prev.border[p]
 						) {
-							this.renderedLines.delete(row);
-							let empty = true;
-							for (let c = 0; c < cols; c++) {
-								if (next.cluster[nextRow + c] !== 0) {
-									diff.setFrom(nextRow + c, next, nextRow + c);
-									empty = false;
-								}
-							}
-							if (empty) {
-								diff.setBlank(nextRow);
+							break;
+						}
+						col++;
+					}
+					if (col === cols) {
+						continue;
+					}
+					// A terminal that drew a cluster of the old row at another
+					// width than the engine measured has the rest of that row
+					// shifted. Cells rewritten after it would land beside the
+					// old ones, so the row is erased and written whole. A
+					// cluster of the new row is the same in reverse: a
+					// multiplexer that counts it wider than the terminal under
+					// it draws it never writes the extra column, and that
+					// column would keep the old row's glyph.
+					if (
+						erasesDisputedRows &&
+						hasDisputedCellBefore(prev, prevRow, cols, next, nextRow)
+					) {
+						framebuffer.renderedLines.delete(row);
+						let empty = true;
+						for (let c = 0; c < cols; c++) {
+							if (next.cluster[nextRow + c] !== 0) {
+								setFrom(diff, nextRow + c, next, nextRow + c);
+								empty = false;
 							}
-							continue;
 						}
+						if (empty) {
+							setBlank(diff, nextRow);
+						}
+						continue;
 					}
+				}
 
-					for (; col < cols; col++) {
-						const n = nextRow + col;
-						const nextChar = next.cluster[n];
+				for (; col < cols; col++) {
+					const n = nextRow + col;
+					const nextChar = next.cluster[n];
 
-						if (!rowInPrev || col >= prevCols) {
-							if (nextChar !== 0) {
-								diff.setFrom(n, next, n);
-							}
-							continue;
+					if (!rowInPrev || col >= prevCols) {
+						if (nextChar !== 0) {
+							setFrom(diff, n, next, n);
 						}
+						continue;
+					}
 
-						const p = prevRow + col;
-						const prevChar = prev.cluster[p];
+					const p = prevRow + col;
+					const prevChar = prev.cluster[p];
 
-						if (prevChar === 0) {
-							if (nextChar !== 0) {
-								diff.setFrom(n, next, n);
-							}
-						} else if (nextChar === 0) {
-							// A cell the frame no longer paints has to be
-							// erased, not merely skipped. The terminal still
-							// shows the old glyph there.
-							diff.setBlank(n);
-						} else if (!next.equalCells(n, prev, p)) {
-							diff.setFrom(n, next, n);
+					if (prevChar === 0) {
+						if (nextChar !== 0) {
+							setFrom(diff, n, next, n);
 						}
+					} else if (nextChar === 0) {
+						// A cell the frame no longer paints has to be
+						// erased, not merely skipped. The terminal still
+						// shows the old glyph there.
+						setBlank(diff, n);
+					} else if (!equalCells(next, n, prev, p)) {
+						setFrom(diff, n, next, n);
 					}
 				}
 			}
+		}
 
-			// A reset frame redraws onto rows whose terminal content is
-			// unknown, because the previous buffer was dropped. Every region
-			// row must clear ITSELF. A row the new frame leaves blank gets a
-			// seeded space so generateANSI emits its \r\e[K line like any
-			// content row. Per-row erases instead of one ED from the home
-			// position matter in tmux, which preserves a fully-erased screen by
-			// pushing it into scrollback (the courtesy it extends to `clear`).
-			// The ED archived a copy of the old frame into the scrollback on
-			// every resize.
-			const resetFrame = this.needsScreenReset || this.needsFullClear;
-			if (resetFrame) {
-				// Buffer rows are region-relative (the anchor row is where the
-				// frame CUPs to). regionRows is a screen-absolute end. Seed
-				// exactly the region's rows. Seeding further would count blank
-				// screen rows as content and skew the park the resize re-anchor
-				// measures from.
-				const anchorRow = this.needsScreenReset
-					? this.resetAtRow
-					: (cursorPosition ?? 0);
-				const regionHeight = (regionRows ?? this.rowCount) - anchorRow;
-				const seedRows = Math.min(frameRows, this.rowCount, regionHeight);
-				for (let row = 0; row < seedRows; row++) {
-					const rowStart = row * cols;
-					let empty = true;
-					for (let col = 0; col < cols; col++) {
-						if (diff.cluster[rowStart + col] !== 0) {
-							empty = false;
-							break;
-						}
-					}
-					if (empty) {
-						diff.setBlank(rowStart);
+		// A reset frame redraws onto rows whose terminal content is
+		// unknown, because the previous buffer was dropped. Every region
+		// row must clear ITSELF. A row the new frame leaves blank gets a
+		// seeded space so generateANSI emits its \r\e[K line like any
+		// content row. Per-row erases instead of one ED from the home
+		// position matter in tmux, which preserves a fully-erased screen by
+		// pushing it into scrollback (the courtesy it extends to `clear`).
+		// The ED archived a copy of the old frame into the scrollback on
+		// every resize.
+		const resetFrame =
+			framebuffer.needsScreenReset || framebuffer.needsFullClear;
+		if (resetFrame) {
+			// Buffer rows are region-relative (the anchor row is where the
+			// frame CUPs to). regionRows is a screen-absolute end. Seed
+			// exactly the region's rows. Seeding further would count blank
+			// screen rows as content and skew the park the resize re-anchor
+			// measures from.
+			const anchorRow = framebuffer.needsScreenReset
+				? framebuffer.resetAtRow
+				: (cursorPosition ?? 0);
+			const regionHeight = (regionRows ?? framebuffer.rowCount) - anchorRow;
+			const seedRows = Math.min(frameRows, framebuffer.rowCount, regionHeight);
+			for (let row = 0; row < seedRows; row++) {
+				const rowStart = row * cols;
+				let empty = true;
+				for (let col = 0; col < cols; col++) {
+					if (diff.cluster[rowStart + col] !== 0) {
+						empty = false;
+						break;
 					}
 				}
+				if (empty) {
+					setBlank(diff, rowStart);
+				}
 			}
+		}
 
-			let hasContent = false;
+		let hasContent = false;
 
-			const diffCells = frameRows * cols;
-			for (let index = 0; index < diffCells; index++) {
-				if (diff.cluster[index] !== 0) {
-					hasContent = true;
-					break;
-				}
+		const diffCells = frameRows * cols;
+		for (let index = 0; index < diffCells; index++) {
+			if (diff.cluster[index] !== 0) {
+				hasContent = true;
+				break;
 			}
+		}
 
-			// Waiting probes go only under cells this same write paints over.
-			// A frame that diffs to nothing offers none, so the first
-			// contentful row re-emits verbatim: identical cells, no erase, and
-			// the probes go under them.
-			if (this.probesWaiting) {
-				this.probesWaiting = false;
-				if (measurer !== undefined && !hasContent) {
-					for (let row = 0; row < frameRows && !hasContent; row++) {
-						const rowStart = row * cols;
-						for (let col = 0; col < cols; col++) {
-							const index = rowStart + col;
-							if (next.cluster[index] !== 0) {
-								diff.setFrom(index, next, index);
-								hasContent = true;
-							}
+		// Waiting probes go only under cells this same write paints over.
+		// A frame that diffs to nothing offers none, so the first
+		// contentful row re-emits verbatim: identical cells, no erase, and
+		// the probes go under them.
+		if (framebuffer.probesWaiting) {
+			framebuffer.probesWaiting = false;
+			if (measurer !== undefined && !hasContent) {
+				for (let row = 0; row < frameRows && !hasContent; row++) {
+					const rowStart = row * cols;
+					for (let col = 0; col < cols; col++) {
+						const index = rowStart + col;
+						if (next.cluster[index] !== 0) {
+							setFrom(diff, index, next, index);
+							hasContent = true;
 						}
 					}
 				}
 			}
+		}
 
-			// A caret appearing, moving, or disappearing must emit a frame even
-			// when no cell changed. A blurred input leaves no visual diff, but
-			// the real cursor is sitting visible at the stale caret until a
-			// frame re-parks it.
-			const caret = context.caret;
-			const caretBufferRow = caret === null ? null : caret.row + offset;
-			const caretVisible =
-				caret !== null &&
-				caretBufferRow !== null &&
-				caretBufferRow >= 0 &&
-				caretBufferRow < this.rowCount &&
-				caret.col >= 0 &&
-				caret.col < this.colCount;
-			const caretStateChanged =
-				caretVisible !== this.lastCaretVisible ||
-				(caretVisible &&
-					(this.park.row !== caretBufferRow || this.park.col !== caret.col));
-			if (caretStateChanged) {
-				hasContent = true;
+		// A caret appearing, moving, or disappearing must emit a frame even
+		// when no cell changed. A blurred input leaves no visual diff, but
+		// the real cursor is sitting visible at the stale caret until a
+		// frame re-parks it.
+		context.caret = keptCaret(context, prevFrame?.caret ?? null);
+		const caret = context.caret;
+		const caretBufferRow = caret === null ? null : caret.row + offset;
+		const caretVisible =
+			caret !== null &&
+			caretBufferRow !== null &&
+			caretBufferRow >= 0 &&
+			caretBufferRow < framebuffer.rowCount &&
+			caret.col >= 0 &&
+			caret.col < framebuffer.colCount;
+		const caretStateChanged =
+			caretVisible !== framebuffer.lastCaretVisible ||
+			(caretVisible &&
+				(framebuffer.park.row !== caretBufferRow ||
+					framebuffer.park.col !== caret.col));
+		if (caretStateChanged) {
+			hasContent = true;
+		}
+		framebuffer.lastCaretVisible = caretVisible;
+
+		if (scrolling) {
+			hasContent = true;
+		}
+		// A repaint asked the screen to be cleared, and the frame that
+		// answers it must be written even with nothing to draw. Leaving
+		// fullscreen for an emptied document shows the rows the document
+		// held before it went fullscreen until something erases them.
+		if (framebuffer.needsFullClear) {
+			hasContent = true;
+		}
+
+		const writer = framebuffer.writer;
+		let prefix = scrollPrefix;
+		let frameStartRow: number | undefined;
+		if (hasContent) {
+			if (framebuffer.needsScreenReset) {
+				// After a resize the terminal rewrapped our frame and moved
+				// the cursor where DECRC cannot find it. The row our
+				// content starts at still holds, since what is above us
+				// does not reflow-grow. No home and no ED. That would wipe
+				// what is above us, and tmux archives a full-screen erase
+				// into the scrollback.
+				prefix += writer
+					.cursorTo(framebuffer.resetAtRow + 1, 1)
+					.saveCursor()
+					.take();
+				framebuffer.hasSavedCursor = true;
+				framebuffer.needsScreenReset = false;
+				framebuffer.needsFullClear = false;
+				frameStartRow = framebuffer.resetAtRow;
+			} else if (cursorPosition !== undefined) {
+				prefix += writer.cursorTo(cursorPosition + 1, 1).saveCursor().take();
+				framebuffer.hasSavedCursor = true;
+				frameStartRow = cursorPosition;
+			} else if (offset > 0) {
+				prefix += writer.cursorTo(offset + 1, 1).take();
+				frameStartRow = offset;
+			} else if (framebuffer.hasSavedCursor) {
+				prefix += writer.restoreCursor().saveCursor().take();
+			} else {
+				prefix += writer.saveCursor().take();
+				framebuffer.hasSavedCursor = true;
 			}
-			this.lastCaretVisible = caretVisible;
 
-			if (scrolling) {
-				hasContent = true;
-			}
-			// A repaint asked the screen to be cleared, and the frame that
-			// answers it must be written even with nothing to draw. Leaving
-			// fullscreen for an emptied document shows the rows the document
-			// held before it went fullscreen until something erases them.
-			if (this.needsFullClear) {
-				hasContent = true;
+			if (framebuffer.needsFullClear) {
+				prefix += writer.eraseBelow().take();
+				framebuffer.needsFullClear = false;
 			}
+		}
 
-			const writer = this.writer;
-			let prefix = scrollPrefix;
-			let frameStartRow: number | undefined;
-			if (hasContent) {
-				if (this.needsScreenReset) {
-					// After a resize the terminal rewrapped our frame and moved
-					// the cursor where DECRC cannot find it. The row our
-					// content starts at still holds, since what is above us
-					// does not reflow-grow. No home and no ED. That would wipe
-					// what is above us, and tmux archives a full-screen erase
-					// into the scrollback.
-					prefix += writer.cursorTo(this.resetAtRow + 1, 1).saveCursor().take();
-					this.hasSavedCursor = true;
-					this.needsScreenReset = false;
-					this.needsFullClear = false;
-					frameStartRow = this.resetAtRow;
-				} else if (cursorPosition !== undefined) {
-					prefix += writer.cursorTo(cursorPosition + 1, 1).saveCursor().take();
-					this.hasSavedCursor = true;
-					frameStartRow = cursorPosition;
-				} else if (offset > 0) {
-					prefix += writer.cursorTo(offset + 1, 1).take();
-					frameStartRow = offset;
-				} else if (this.hasSavedCursor) {
-					prefix += writer.restoreCursor().saveCursor().take();
-				} else {
-					prefix += writer.saveCursor().take();
-					this.hasSavedCursor = true;
-				}
+		const output = generateANSI(
+			diff,
+			writer,
+			framebuffer.renderedLines,
+			measurer,
+		);
 
-				if (this.needsFullClear) {
-					prefix += writer.eraseBelow().take();
-					this.needsFullClear = false;
-				}
+		let contentHeight = 0;
+		for (const row of framebuffer.renderedLines) {
+			if (row + 1 > contentHeight) {
+				contentHeight = row + 1;
 			}
+		}
 
-			const output = generateANSI(diff, writer, this.renderedLines, measurer);
-
-			let contentHeight = 0;
-			for (const row of this.renderedLines) {
-				if (row + 1 > contentHeight) {
-					contentHeight = row + 1;
-				}
+		// Rows the last frame painted below where this one ends still show
+		// what it left on them.
+		let staleOutput = "";
+		if (
+			framebuffer.hasSavedCursor &&
+			framebuffer.prevContentHeight > contentHeight
+		) {
+			writer.restoreCursor();
+			if (contentHeight > 0) {
+				writer.cursorDown(contentHeight);
 			}
-
-			// Rows the last frame painted below where this one ends still show
-			// what it left on them.
-			let staleOutput = "";
-			if (this.hasSavedCursor && this.prevContentHeight > contentHeight) {
-				writer.restoreCursor();
-				if (contentHeight > 0) {
-					writer.cursorDown(contentHeight);
+			staleOutput = writer.carriageReturn().eraseBelow().take();
+		} else if (
+			resetFrame &&
+			frameStartRow !== undefined &&
+			frameStartRow + contentHeight < framebuffer.rowCount
+		) {
+			// After a reset nothing below the content is trusted either,
+			// because the old frame may have been taller. Erase from the
+			// first row past the content. This is a PARTIAL erase, which no
+			// terminal treats as a screen clear worth archiving.
+			staleOutput = writer
+				.cursorTo(frameStartRow + contentHeight + 1, 1)
+				.eraseBelow()
+				.take();
+		}
+
+		// The two grids trade places. Of an overflowing frame only the rows
+		// still on screen are kept. The rest scrolled into the scrollback.
+		const retired = framebuffer.prev;
+		if (overflowing) {
+			framebuffer.prev = bottomRows(next, framebuffer.rowCount);
+			framebuffer.spare = next;
+			framebuffer.prevBorders = null;
+			framebuffer.prevFrame = null;
+		} else {
+			framebuffer.prev = next;
+			framebuffer.spare = retired;
+			framebuffer.prevBorders = painted;
+			framebuffer.prevFrame = {
+				offset,
+				cursorRow: cursorPosition,
+				caret: context.caret,
+			};
+		}
+		framebuffer.prevContentHeight = contentHeight;
+
+		// A diff leaves the cursor at the last changed cell, and a resize
+		// scrolls just enough to keep the cursor on screen, so the park is
+		// what wrappedRowsAbovePark re-anchors from. A caret parks the real
+		// cursor there, shown, because IME composition anchors at the real
+		// cursor.
+		let parkOutput = "";
+		if (hasContent && contentHeight > 0) {
+			if (caretVisible) {
+				framebuffer.park = {row: caretBufferRow, col: caret.col};
+				if (frameStartRow !== undefined) {
+					parkOutput = writer
+						.cursorTo(frameStartRow + caretBufferRow + 1, caret.col + 1)
+						.take();
+				} else if (framebuffer.hasSavedCursor) {
+					writer.restoreCursor().saveCursor();
+					if (caretBufferRow > 0) {
+						writer.cursorDown(caretBufferRow);
+					}
+					writer.carriageReturn();
+					if (caret.col > 0) {
+						writer.cursorForward(caret.col);
+					}
+					parkOutput = writer.take();
 				}
-				staleOutput = writer.carriageReturn().eraseBelow().take();
-			} else if (
-				resetFrame &&
-				frameStartRow !== undefined &&
-				frameStartRow + contentHeight < this.rowCount
-			) {
-				// After a reset nothing below the content is trusted either,
-				// because the old frame may have been taller. Erase from the
-				// first row past the content. This is a PARTIAL erase, which no
-				// terminal treats as a screen clear worth archiving.
-				staleOutput = writer
-					.cursorTo(frameStartRow + contentHeight + 1, 1)
-					.eraseBelow()
-					.take();
-			}
-
-			// The two grids trade places. Of an overflowing frame only the rows
-			// still on screen are kept. The rest scrolled into the scrollback.
-			const retired = this.prev;
-			if (overflowing) {
-				this.prev = next.bottomRows(this.rowCount);
-				this.spare = next;
 			} else {
-				this.prev = next;
-				this.spare = retired;
-			}
-			this.prevContentHeight = contentHeight;
-
-			// A diff leaves the cursor at the last changed cell, and a resize
-			// scrolls just enough to keep the cursor on screen, so the park is
-			// what wrappedRowsAbovePark re-anchors from. A caret parks the real
-			// cursor there, shown, because IME composition anchors at the real
-			// cursor.
-			let parkOutput = "";
-			if (hasContent && contentHeight > 0) {
-				if (caretVisible) {
-					this.park = {row: caretBufferRow, col: caret.col};
-					if (frameStartRow !== undefined) {
-						parkOutput = writer
-							.cursorTo(frameStartRow + caretBufferRow + 1, caret.col + 1)
-							.take();
-					} else if (this.hasSavedCursor) {
-						writer.restoreCursor().saveCursor();
-						if (caretBufferRow > 0) {
-							writer.cursorDown(caretBufferRow);
-						}
-						writer.carriageReturn();
-						if (caret.col > 0) {
-							writer.cursorForward(caret.col);
-						}
-						parkOutput = writer.take();
-					}
-				} else {
-					this.park = {row: Math.min(contentHeight, this.rowCount) - 1, col: 0};
-					if (frameStartRow !== undefined) {
-						// 0-based start + height = 1-based last row. The bottom
-						// margin caps it when the content overflows the screen.
-						const lastRow = Math.min(
-							frameStartRow + contentHeight,
-							this.rowCount,
-						);
-						parkOutput = writer.cursorTo(lastRow, 1).take();
-					} else if (this.hasSavedCursor) {
-						// No absolute row to name. Restore the saved content
-						// start, re-save it, and step down. CUD stops at the
-						// bottom margin, which is the content's visible bottom
-						// when it overflows.
-						writer.restoreCursor().saveCursor();
-						if (contentHeight > 1) {
-							writer.cursorDown(contentHeight - 1);
-						}
-						parkOutput = writer.carriageReturn().take();
+				framebuffer.park = {
+					row: Math.min(contentHeight, framebuffer.rowCount) - 1,
+					col: 0,
+				};
+				if (frameStartRow !== undefined) {
+					// 0-based start + height = 1-based last row. The bottom
+					// margin caps it when the content overflows the screen.
+					const lastRow = Math.min(
+						frameStartRow + contentHeight,
+						framebuffer.rowCount,
+					);
+					parkOutput = writer.cursorTo(lastRow, 1).take();
+				} else if (framebuffer.hasSavedCursor) {
+					// No absolute row to name. Restore the saved content
+					// start, re-save it, and step down. CUD stops at the
+					// bottom margin, which is the content's visible bottom
+					// when it overflows.
+					writer.restoreCursor().saveCursor();
+					if (contentHeight > 1) {
+						writer.cursorDown(contentHeight - 1);
 					}
+					parkOutput = writer.carriageReturn().take();
 				}
 			}
+		}
 
-			const frame = prefix + output + staleOutput + parkOutput;
-			return hasContent ? wrapSynchronized(frame) : frame;
-		};
-		return context;
-	}
+		const frame = prefix + output + staleOutput + parkOutput;
+		return hasContent ? wrapSynchronized(frame) : frame;
+	};
+	return context;
+}
 
-	endFrame(): string {
-		const end = this.pendingEnd;
-		if (end === null) {
-			throw new Error("endFrame without a begun frame");
-		}
-		this.pendingEnd = null;
-		const ansi = end();
-		this.frameScroll = 0;
-		this.dirty = false;
-		return ansi;
-	}
+export function endFrame(framebuffer: Framebuffer): string {
+	const end = framebuffer.pendingEnd;
+	if (end === null) {
+		throw new Error("endFrame without a begun frame");
+	}
+	framebuffer.pendingEnd = null;
+	const ansi = end();
+	framebuffer.frameScroll = 0;
+	framebuffer.dirty = false;
+	framebuffer.wholeDamage = false;
+	return ansi;
 }
 
 // Whether the old row or the new one holds a disputed cluster at or
@@ -2672,7 +2892,7 @@ function hasDisputedCellBefore(
 	nextRow: number,
 ): boolean {
 	let last = cols - 1;
-	while (last >= 0 && next.equalCells(nextRow + last, prev, prevRow + last)) {
+	while (last >= 0 && equalCells(next, nextRow + last, prev, prevRow + last)) {
 		last--;
 	}
 	for (let col = 0; col <= last; col++) {
@@ -2690,7 +2910,7 @@ function takeGrid(screen: Framebuffer, rows: number, cols: number): CellGrid {
 	const spare = screen.spare;
 	if (spare !== null && spare.rows === rows && spare.cols === cols) {
 		screen.spare = null;
-		spare.clear();
+		clearGrid(spare);
 		return spare;
 	}
 	return new CellGrid(rows, cols);
diff --git a/src/internal/gradients.ts b/src/internal/gradients.ts
index 509fdda5..f48b97f7 100644
--- a/src/internal/gradients.ts
+++ b/src/internal/gradients.ts
@@ -11,7 +11,7 @@ import {
 	parseColor,
 	toCellColor,
 } from "./cssvalues.ts";
-import type {CellContext} from "./framebuffer.ts";
+import {type CellContext, drawRect} from "./framebuffer.ts";
 
 /**
  * Where a stop sits: CSS pixels, a percentage of the gradient line, a
@@ -430,14 +430,14 @@ export function renderGradient(
 		for (let col = 0; col < cols; col++) {
 			const color = colorAt(col + 0.5 - startX, 0);
 			if (color !== null) {
-				ctx.drawRect(left + col, top, 1, rows, color);
+				drawRect(ctx, left + col, top, 1, rows, color);
 			}
 		}
 	} else if (dx === 0) {
 		for (let row = 0; row < rows; row++) {
 			const color = colorAt(0, (row + 0.5) * aspect - startY);
 			if (color !== null) {
-				ctx.drawRect(left, top + row, cols, 1, color);
+				drawRect(ctx, left, top + row, cols, 1, color);
 			}
 		}
 	} else {
@@ -446,7 +446,7 @@ export function renderGradient(
 			for (let col = 0; col < cols; col++) {
 				const color = colorAt(col + 0.5 - startX, y);
 				if (color !== null) {
-					ctx.drawRect(left + col, top + row, 1, 1, color);
+					drawRect(ctx, left + col, top + row, 1, 1, color);
 				}
 			}
 		}
diff --git a/src/internal/images.ts b/src/internal/images.ts
index 6a746138..529f4d3d 100644
--- a/src/internal/images.ts
+++ b/src/internal/images.ts
@@ -12,7 +12,6 @@
  * and the canvas and the painter read it back through the registry at
  * the bottom.
  */
-import {DOMException} from "./dom.ts";
 import type {CellGrid} from "./framebuffer.ts";
 import {clearTimeout, setTimeout} from "./timers.ts";
 
@@ -2172,7 +2171,7 @@ export async function readImageResponse(
  * which ends the decode with it, or the decode here stops at its next
  * yield, and the image fails.
  */
-let decodeTimeout = 10_000;
+const decodeTimeout = 10_000;
 // A worker with nothing to do is ended, so it keeps the runtime alive for
 // a second at most.
 const WORKER_IDLE_MS = 1_000;
@@ -2230,11 +2229,6 @@ export function setDecodeWorkerURL(url: URL | null): void {
 	}
 }
 
-/** How long a decode may take before it is stopped. */
-export function setDecodeTimeout(ms: number): void {
-	decodeTimeout = ms;
-}
-
 /**
  * Decode on a worker thread, where the runtime has one, so a large image
  * does not stall the page. Where no worker starts, the decode runs here,
diff --git a/src/internal/input.ts b/src/internal/input.ts
index 311351c2..927b5bae 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -1,15 +1,20 @@
-import {type Cascade, getComputedValue, pxFromCells} from "./cssom.ts";
 import {
-	attributeOf,
+	type Cascade,
+	getComputedValue,
+	handleActiveChange,
+	handleFocusChange,
+	handleHoverChange,
+} from "./cssom.ts";
+import {
 	commitRangeThumb,
 	constructInternal,
-	containsOf,
 	dispatchAsUserAgent,
 	elementAtDocumentPoint,
 	flatParentElement,
 	flushLayout,
 	type FocusStartingPoint,
 	getActiveElement,
+	getEditingHost,
 	getFocusedElement,
 	getKeyboardActivation,
 	getPointerState,
@@ -19,17 +24,14 @@ import {
 	getTextControlValueText,
 	getUnitBounds,
 	handleCloseRequest,
-	hasAttributeOf,
 	HTMLInputElement,
 	HTMLLabelElement,
 	HTMLTextAreaElement,
 	lightDismissPress,
 	lightDismissRelease,
-	localNameOf,
 	lockDataTransfer,
 	MOUSE_POINTER_ID,
 	moveRangeThumb,
-	nodeTypeOf,
 	placeTextControlCaret,
 	requestRender,
 	runControlDefaultAction,
@@ -45,10 +47,18 @@ import {
 	topmostModalDialog,
 	type Window,
 } from "./dom.ts";
-import {getEditingHost, requestEditingInsert} from "./editing.ts";
+import {requestEditingInsert} from "./editing.ts";
 import type {WireKey, WireMouse, WirePaste} from "./exchange.ts";
-import type {Framebuffer} from "./framebuffer.ts";
+import {type Framebuffer, repaintAll, requestFrame} from "./framebuffer.ts";
 import type {Layout} from "./layout.ts";
+import {
+	attributeOf,
+	containsOf,
+	hasAttributeOf,
+	localNameOf,
+	nodeTypeOf,
+} from "./tree.ts";
+import {pxFromCells} from "./units.ts";
 
 // The keys a terminal names, with the legacy keyCode plenty of code
 // still reads. Also the list of names that are physical key identities.
@@ -438,116 +448,118 @@ export class Input {
 	}
 
 	dispose(): void {}
+}
 
-	dispatch(item: WireKey[] | WireMouse | WirePaste): void {
-		// Pseudo-state and the selection move with no mutation record.
-		this.framebuffer.invalidate();
-		if (Array.isArray(item)) {
-			deliverKeys(this, item);
-			return;
-		}
-		if (item.kind === "mouse") {
-			deliverMouseReport(this, item);
-			return;
-		}
-		deliverPaste(this, item.text);
+export function dispatchInput(
+	input: Input,
+	item: WireKey[] | WireMouse | WirePaste,
+): void {
+	// Pseudo-state and the selection move with no mutation record. Each
+	// names the rows it changes.
+	requestFrame(input.framebuffer);
+	if (Array.isArray(item)) {
+		deliverKeys(input, item);
+		return;
 	}
+	if (item.kind === "mouse") {
+		deliverMouseReport(input, item);
+		return;
+	}
+	deliverPaste(input, item.text);
+}
 
-	/**
-	 * One hit-test at the last reported position, at the start of the frame.
-	 */
-	resolvePendingHover(): void {
-		const pending = this.pendingHover;
-		if (pending === null) {
-			return;
-		}
-		this.pendingHover = null;
-		const {x, y, shiftKey, altKey, ctrlKey} = pending;
-		processPendingPointerCapture(this);
-		const buttons = getPointerState(this.document).buttons;
-		const target =
-			getPointerState(this.document).active ??
-			(elementAtDocumentPoint(this.document, x, y, null) || this.document.body);
-		const previous = this.hoverElement;
-		const init = {
-			button: 0,
-			buttons,
-			...getClientPoint(this, x, y),
-			...getScreenPoint(this, x, y),
-			shiftKey,
-			altKey,
-			ctrlKey,
+/**
+ * One hit-test at the last reported position, at the start of the frame.
+ */
+export function resolvePendingHover(input: Input): void {
+	const pending = input.pendingHover;
+	if (pending === null) {
+		return;
+	}
+	input.pendingHover = null;
+	const {x, y, shiftKey, altKey, ctrlKey} = pending;
+	processPendingPointerCapture(input);
+	const buttons = getPointerState(input.document).buttons;
+	const target =
+		getPointerState(input.document).active ??
+		(elementAtDocumentPoint(input.document, x, y, null) || input.document.body);
+	const previous = input.hoverElement;
+	const init = {
+		button: 0,
+		buttons,
+		...getClientPoint(input, x, y),
+		...getScreenPoint(input, x, y),
+		shiftKey,
+		altKey,
+		ctrlKey,
+	};
+	if (target !== previous) {
+		input.hoverElement = target;
+		setHoveredElement(input.document, target);
+		handleHoverChange(input.cascade, previous, target);
+		const getChain = (element: Element | null): Element[] => {
+			const chain: Element[] = [];
+			for (
+				let node: Element | null = element; node; node = flatParentElement(node)
+			) {
+				chain.push(node);
+			}
+			return chain;
 		};
-		if (target !== previous) {
-			this.hoverElement = target;
-			setHoveredElement(this.document, target);
-			this.cascade.handleHoverChange(previous, target);
-			const getChain = (element: Element | null): Element[] => {
-				const chain: Element[] = [];
-				for (
-					let node: Element | null = element;
-					node;
-					node = flatParentElement(node)
-				) {
-					chain.push(node);
-				}
-				return chain;
+		const previousChain = getChain(previous);
+		const targetChain = getChain(target);
+		const previousSet = new Set(previousChain);
+		const targetSet = new Set(targetChain);
+		const leaving = previousChain.filter((node) => !targetSet.has(node));
+		const entering = targetChain.filter((node) => !previousSet.has(node));
+		// Pointer Events' order, then UI Events' compatibility mouse
+		// events in the same order: out, leave (exited element up), over,
+		// enter (outermost entered ancestor down), then the move.
+		for (const kind of ["pointer", "mouse"] as const) {
+			const fire = (type: string, node: Element, extra: object): void => {
+				dispatchMouseLike(input, kind, `${kind}${type}`, node, {
+					...init,
+					...extra,
+				});
 			};
-			const previousChain = getChain(previous);
-			const targetChain = getChain(target);
-			const previousSet = new Set(previousChain);
-			const targetSet = new Set(targetChain);
-			const leaving = previousChain.filter((node) => !targetSet.has(node));
-			const entering = targetChain.filter((node) => !previousSet.has(node));
-			// Pointer Events' order, then UI Events' compatibility mouse
-			// events in the same order: out, leave (exited element up), over,
-			// enter (outermost entered ancestor down), then the move.
-			for (const kind of ["pointer", "mouse"] as const) {
-				const fire = (type: string, node: Element, extra: object): void => {
-					dispatchMouseLike(this, kind, `${kind}${type}`, node, {
-						...init,
-						...extra,
-					});
-				};
-				if (previous !== null) {
-					fire("out", previous, {
-						bubbles: true,
-						cancelable: true,
-						composed: true,
-						relatedTarget: target,
-					});
-					for (const node of leaving) {
-						fire("leave", node, {relatedTarget: target});
-					}
-				}
-				fire("over", target, {
+			if (previous !== null) {
+				fire("out", previous, {
 					bubbles: true,
 					cancelable: true,
 					composed: true,
-					relatedTarget: previous,
+					relatedTarget: target,
 				});
-				for (let i = entering.length - 1; i >= 0; i--) {
-					fire("enter", entering[i], {relatedTarget: previous});
+				for (const node of leaving) {
+					fire("leave", node, {relatedTarget: target});
 				}
 			}
-		}
-		if (!pending.quiet) {
-			const last = this.lastMouse;
-			const moveInit = {
-				...init,
-				...getMovement(this, x, y, last),
+			fire("over", target, {
 				bubbles: true,
 				cancelable: true,
 				composed: true,
-			};
-			dispatchMouseLike(this, "pointer", "pointermove", target, {
-				...moveInit,
-				button: -1,
+				relatedTarget: previous,
 			});
-			dispatchMouseLike(this, "mouse", "mousemove", target, moveInit);
-			this.lastMouse = {x, y};
+			for (let i = entering.length - 1; i >= 0; i--) {
+				fire("enter", entering[i], {relatedTarget: previous});
+			}
 		}
 	}
+	if (!pending.quiet) {
+		const last = input.lastMouse;
+		const moveInit = {
+			...init,
+			...getMovement(input, x, y, last),
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+		};
+		dispatchMouseLike(input, "pointer", "pointermove", target, {
+			...moveInit,
+			button: -1,
+		});
+		dispatchMouseLike(input, "mouse", "mousemove", target, moveInit);
+		input.lastMouse = {x, y};
+	}
 }
 
 // Every pointer event the mouse fires carries the same pointer. A
@@ -1162,7 +1174,7 @@ function setPressed(input: Input, target: Element | null): void {
 		return;
 	}
 	setActiveElement(document, target);
-	input.cascade.handleActiveChange(previous, target);
+	handleActiveChange(input.cascade, previous, target);
 	requestRender(document);
 }
 
@@ -1185,7 +1197,7 @@ function dispatchPress(
 	input.popoverPressTarget = lightDismissPress(target);
 	input.textControlDragAnchor = null;
 	if (setDocumentFocusVisible(input.document, false)) {
-		input.cascade.handleFocusChange(getFocusedElement(input.document));
+		handleFocusChange(input.cascade, getFocusedElement(input.document));
 		requestRender(input.document);
 	}
 	const mousedown = constructInternal(() =>
@@ -1382,7 +1394,7 @@ function dispatchKey(input: Input, stroke: WireKey): void {
 	const keyCode = getLegacyKeyCode(keyName);
 
 	if (setDocumentFocusVisible(input.document, true)) {
-		input.cascade.handleFocusChange(getFocusedElement(input.document));
+		handleFocusChange(input.cascade, getFocusedElement(input.document));
 		requestRender(input.document);
 	}
 
@@ -1432,7 +1444,7 @@ function dispatchKey(input: Input, stroke: WireKey): void {
 		// A terminal program's redraw, for a screen stray output scribbled
 		// on: clear what shows and paint the whole document again.
 		if (keyName === "l" && ctrlKey && !altKey && !shiftKey && !metaKey) {
-			input.framebuffer.repaintAll();
+			repaintAll(input.framebuffer);
 			requestRender(input.document);
 		}
 		if (keyName === "z" && ctrlKey && !altKey && !shiftKey && !metaKey) {
diff --git a/src/internal/inspector.ts b/src/internal/inspector.ts
index 2dfe0fa5..401ea630 100644
--- a/src/internal/inspector.ts
+++ b/src/internal/inspector.ts
@@ -1,5 +1,5 @@
-// Node's inspect hook, so console.log(element) shows markup rather than a
-// text control dump. Importing the module installs the hooks.
+// Node's and Deno's inspect hooks, so console.log(element) shows markup
+// rather than a text control dump. Importing the module installs the hooks.
 import {
 	Comment,
 	Document,
@@ -8,9 +8,9 @@ import {
 	Element,
 	type Node,
 	NodeList,
-	nodeTypeOf,
 	Text,
 } from "./dom.ts";
+import {nodeTypeOf} from "./tree.ts";
 
 const colors = {
 	attr: "\x1b[36m",
@@ -119,13 +119,11 @@ function inspectElement(
 		"track",
 		"wbr",
 	];
+	output += `${c.tag}>${c.reset}`;
 	if (selfClosing.includes(tagName)) {
-		output += `${c.tag}>${c.reset}`;
 		return output;
 	}
 
-	output += `${c.tag}>${c.reset}`;
-
 	if (currentDepth < maxDepth && element.childNodes.length > 0) {
 		const childrenStr = formatChildren(element, {
 			...options,
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 33bb0b53..c5ab2dde 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -6,7 +6,6 @@ import {
 	getCellBlockMargin,
 	getCellBlockSize,
 	getCellPadding,
-	getCellSize,
 	getComputedValue,
 	getDeclaredDisplay,
 	getWhiteSpace as getElementWhiteSpace,
@@ -14,16 +13,15 @@ import {
 	getTabSize,
 	getUsedOverflow,
 	hasLayoutOrPaintContainment,
-	pxFromCells,
+	readStyleAgain,
+	recordStyleReads,
 	toCellBorder,
 	toCellLength,
 	toWholeCells,
-	UNIT_CELL,
 	usedValuesChanged,
 } from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
-	attributeOf,
 	DOMRectList,
 	flatChildren,
 	flatDescendants,
@@ -34,12 +32,11 @@ import {
 	getAddedNodes,
 	getScrollOffset,
 	getShadowRoot,
+	isConnectedNode,
 	isDocumentElement,
 	isInFlatTree,
 	isModalDialog,
 	isShadowIncludingAncestor,
-	localNameOf,
-	nodeTypeOf,
 	pseudoElementCount,
 	renderedTopLayer,
 	type Window,
@@ -50,10 +47,18 @@ import {
 	createStyle,
 	type Edge,
 	type FlexDirection,
+	forgetLayout,
+	getChildIndex,
+	getComputedGridTracks,
+	getComputedHeight,
+	getComputedWidth,
+	getDrawnColumns,
 	type Gutter,
+	insertChild,
 	isContainingBlock,
 	type Justify,
 	LayoutNode,
+	type Measure,
 	type PositionType,
 	resolveValue,
 	shareStyleEdges,
@@ -69,6 +74,7 @@ import {
 	getMathCellRects,
 	isMathRoot,
 	layoutMath,
+	linearizeMath,
 	type MathBox,
 } from "./mathml.ts";
 import {
@@ -86,6 +92,8 @@ import {
 	toVisualOrder,
 	writeClusterWidths,
 } from "./text.ts";
+import {attributeOf, localNameOf, nodeTypeOf} from "./tree.ts";
+import {getCellSize, pxFromCells, UNIT_CELL} from "./units.ts";
 
 type Position = "static" | "relative" | "absolute" | "fixed" | "sticky";
 
@@ -136,6 +144,7 @@ export type Display =
 	"inline-block" |
 	"inline-flex" |
 	"inline-grid" |
+	"inline-table" |
 	"flex" |
 	"grid" |
 	"list-item" |
@@ -158,6 +167,7 @@ const DISPLAYS = new Set<string>([
 	"inline-block",
 	"inline-flex",
 	"inline-grid",
+	"inline-table",
 	"flex",
 	"grid",
 	"list-item",
@@ -184,6 +194,15 @@ const TABLE_DISPLAYS = new Set<string>([
 	"table-caption",
 ]);
 
+const BLOCKIFIED_TABLE_PARTS = new Set<Display>([
+	"table-header-group",
+	"table-footer-group",
+	"table-row-group",
+	"table-caption",
+	"table-row",
+	"table-cell",
+]);
+
 // display has two axes (css-display-3 §2), and blockification (§2.7) changes
 // only the OUTER one. An absolutely positioned inline-grid sits on rows of its
 // own and is still a grid inside. So the outer question (is this box on a line)
@@ -212,9 +231,37 @@ function getLayoutDisplay(element: Element): Display {
 	return DISPLAYS.has(value) ? (value as Display) : "block";
 }
 
+// An inline-block flex item's measure returns a border-box size, so its
+// layout node must not add padding and border again on the cross axis (a
+// bordered textarea in a flex row came out too tall). The main axis is
+// masked by flex sizing. The node then holds none on those edges, though
+// the box has them.
+function getMaskedEdges(element: Element): readonly Edge[] {
+	if (getLayoutDisplay(element) !== "inline-block" || !hasFlexParent(element)) {
+		return [];
+	}
+	const direction = getComputedValue(
+		boxParentElement(element)!,
+		"flex-direction",
+	);
+	return direction === "column" || direction === "column-reverse"
+		? ["left", "right"]
+		: ["top", "bottom"];
+}
+
+function applyTableContainer(style: Style, element: Element): void {
+	style.displayType = "table";
+	style.borderCollapse =
+		getComputedValue(element, "border-collapse") === "collapse";
+	style.tableLayoutFixed =
+		getComputedValue(element, "table-layout") === "fixed";
+}
+
 // A box that sits on a line whole, measured as one opaque unit.
 export function isAtomicInline(display: Display): boolean {
-	return display === "inline-block" || display === "inline-grid";
+	return display === "inline-block" ||
+		display === "inline-grid" ||
+		display === "inline-table";
 }
 
 // About a display value. For a node, ask isInlineLevel.
@@ -589,13 +636,16 @@ function shouldCollapseWhitespaceTextNode(textNode: Text): boolean {
 
 // css-flexbox-1 §4: an anonymous item of collapsible white space is not
 // rendered, or multi-line markup's indentation eats gap and
-// justify-content space.
-function isSuppressedFlexWhitespace(text: Text): boolean {
+// justify-content space. Nor is one in a table, a row group or a row
+// (CSS2 §17.2.1, rule 1), so any run left there has content, which an
+// anonymous cell holds.
+function isSuppressedWhitespace(text: Text): boolean {
 	const parent = boxParentElement(text);
 	if (!parent) {
 		return false;
 	}
-	if (!hasItemChildren(getLayoutDisplay(parent))) {
+	const display = getLayoutDisplay(parent);
+	if (!hasItemChildren(display) && !isTableInternal(display)) {
 		return false;
 	}
 	if (isSpacePreserving(getElementWhiteSpace(parent))) {
@@ -710,11 +760,7 @@ function applyMinMax(style: Style, element: Element): void {
 	style.maxHeight = read("max-height", true);
 	// A scroll container's content scrolls rather than sizes it, so its
 	// automatic minimum is zero (css-flexbox-1 §4.5, css-grid-2 §6.6).
-	const overflow = getComputedValue(element, "overflow");
-	if (
-		isScrollingOverflow(getComputedValue(element, "overflow-x") || overflow) ||
-		isScrollingOverflow(getComputedValue(element, "overflow-y") || overflow)
-	) {
+	if (isScrollContainer(element)) {
 		for (const key of ["minWidth", "minHeight"] as const) {
 			if (style[key].unit === "auto" || style[key].unit === "undefined") {
 				style[key] = toValue(0);
@@ -1006,7 +1052,16 @@ interface Styling {
 const stylings = new WeakMap<LayoutNode, Styling>();
 
 interface Extent {
-	// The rows the subtree can paint, in absolute document rows. Absolutely
+	// The root its rows are counted from: the document's, or the one an
+	// inline-block lays its own content out under, whose rows start at 0.
+	frame: LayoutNode;
+	// The box's own top, in absolute rows of its frame, and its left edge
+	// and size, which a repaint compares to find what moved.
+	origin: number;
+	left: number;
+	width: number;
+	height: number;
+	// The rows the subtree can paint, in rows of its frame. Absolutely
 	// positioned children push it outside the box.
 	top: number;
 	bottom: number;
@@ -1014,6 +1069,9 @@ interface Extent {
 	// ones, and display:none ones, whose result.top is never updated. The
 	// children are sorted by extent top only when this is 0.
 	unstackedChildren: number;
+	// Whether the children's extents never move up, top or bottom, in
+	// document order, so a binary search can find the ones on some rows.
+	rowOrdered: boolean;
 	// Where the box and its scrollable overflow reach, from the box's own
 	// origin: its border box, and past it the lines it measures and the
 	// boxes it holds, unless it clips them (css-overflow-3 §2.2). A fixed
@@ -1030,20 +1088,74 @@ interface Extent {
 
 // Written after every solve, and read by the painter's row culling for
 // every child, so the records are kept and rewritten rather than remade.
+// A subtree roundToGrid left alone keeps its record while its top holds.
 const extents = new WeakMap<LayoutNode, Extent>();
 
+// The lines a measured box painted at the last paint extents, to tell a
+// box laid out again into the same lines from one whose text changed.
+const lineRecords = new WeakMap<LayoutNode, BreakResult>();
+
 function computePaintExtents(
 	layout: Layout,
 	node: LayoutNode,
+	originLeft: number,
 	originTop: number,
+	settled = false,
+	fixed = false,
+	frame = node,
 ): Extent {
-	const top = originTop + node.result.top;
+	const top = originTop + node.grid.top;
+	const left = originLeft + node.grid.left;
 	let extent = extents.get(node);
+	if (
+		settled &&
+		extent !== undefined &&
+		extent.origin === top &&
+		extent.frame === frame
+	) {
+		return extent;
+	}
+	fixed ||= node.style.positionType === "fixed";
+	let moved = false;
+	if (layout.collecting) {
+		const lines = node.measure === null
+			? undefined
+			: getMeasuredLines(layout, node);
+		const shifted =
+			extent === undefined || extent.origin !== top || extent.left !== left;
+		const resized =
+			extent !== undefined &&
+			(extent.width !== getComputedWidth(node) ||
+				extent.height !== getComputedHeight(node));
+		moved =
+			node.lostChild ||
+			((shifted || resized) &&
+				(layout.restyledForPaint.has(node.owner as Element) ||
+					paintsOwnBox(layout, node))) ||
+			(node.measure !== null &&
+				(shifted ||
+					(!settled &&
+						!node.settled &&
+						!isSameLines(node, lineRecords.get(node), lines))));
+		if (lines !== undefined) {
+			lineRecords.set(node, lines);
+		}
+	}
+	node.lostChild = false;
+	if (moved && layout.collecting && extent !== undefined) {
+		addDamage(layout, node, extent.top, extent.bottom, fixed);
+	}
 	if (extent === undefined) {
 		extent = {
+			frame,
+			origin: top,
+			left: 0,
+			width: 0,
+			height: 0,
 			top,
 			bottom: top,
 			unstackedChildren: 0,
+			rowOrdered: true,
 			overflowRight: 0,
 			overflowBottom: 0,
 			scrollRight: null,
@@ -1052,10 +1164,10 @@ function computePaintExtents(
 		extents.set(node, extent);
 	}
 	let highest = top;
-	let lowest = top + node.getComputedHeight();
+	let lowest = top + getComputedHeight(node);
 	let unstacked = 0;
-	let right = node.getComputedWidth();
-	let bottom = node.getComputedHeight();
+	let right = getComputedWidth(node);
+	let bottom = getComputedHeight(node);
 	const lines = node.style.clipsOverflow || node.measure === null
 		? undefined
 		: getMeasuredLines(layout, node);
@@ -1064,6 +1176,14 @@ function computePaintExtents(
 			right,
 			node.style.border.left + node.result.padding.left + lines.maxLineWidth,
 		);
+		// An inline-block on a line paints its content, which can reach past
+		// its own box and the line.
+		const contentTop = top + node.style.border.top + node.result.padding.top;
+		for (const [reach, overflow] of getInlineBlockReaches(layout, lines)) {
+			highest = Math.min(highest, contentTop + reach);
+			lowest = Math.max(lowest, contentTop + overflow);
+			bottom = Math.max(bottom, contentTop - top + overflow);
+		}
 	}
 	const clips = node.style.clipsOverflow;
 	let scrollRight: number | null = 0;
@@ -1079,8 +1199,24 @@ function computePaintExtents(
 				node.style.border.top + node.result.padding.top + own.totalHeight;
 		}
 	}
+	let rowOrdered = true;
+	let previousTop = -Infinity;
+	let previousBottom = -Infinity;
 	for (const child of node.children) {
-		const childExtent = computePaintExtents(layout, child, top);
+		const childExtent = computePaintExtents(
+			layout,
+			child,
+			left,
+			top,
+			settled || node.settled,
+			fixed,
+			frame,
+		);
+		if (childExtent.top < previousTop || childExtent.bottom < previousBottom) {
+			rowOrdered = false;
+		}
+		previousTop = childExtent.top;
+		previousBottom = childExtent.bottom;
 		if (clips && scrollBottom !== null && child.style.displayType !== "none") {
 			if (scrollRight !== null) {
 				scrollRight =
@@ -1089,12 +1225,12 @@ function computePaintExtents(
 						? null
 						: Math.max(
 							scrollRight,
-							child.result.left + childExtent.overflowRight,
+							child.grid.left + childExtent.overflowRight,
 						);
 			}
 			scrollBottom = Math.max(
 				scrollBottom,
-				child.result.top + childExtent.overflowBottom,
+				child.grid.top + childExtent.overflowBottom,
 			);
 		}
 		if (
@@ -1114,13 +1250,22 @@ function computePaintExtents(
 			child.style.displayType !== "none" &&
 			child.style.positionType !== "fixed"
 		) {
-			right = Math.max(right, child.result.left + childExtent.overflowRight);
-			bottom = Math.max(bottom, child.result.top + childExtent.overflowBottom);
+			right = Math.max(right, child.grid.left + childExtent.overflowRight);
+			bottom = Math.max(bottom, child.grid.top + childExtent.overflowBottom);
 		}
 	}
+	extent.frame = frame;
+	extent.origin = top;
+	extent.left = left;
+	extent.width = getComputedWidth(node);
+	extent.height = getComputedHeight(node);
 	extent.top = highest;
 	extent.bottom = lowest;
+	if (moved && layout.collecting) {
+		addDamage(layout, node, highest, lowest, fixed);
+	}
 	extent.unstackedChildren = unstacked;
+	extent.rowOrdered = rowOrdered;
 	extent.overflowRight = right;
 	extent.overflowBottom = bottom;
 	extent.scrollRight = clips ? scrollRight : null;
@@ -1128,6 +1273,37 @@ function computePaintExtents(
 	return extent;
 }
 
+// The rows each inline-block on these lines paints, from the top of the
+// lines: its content box's, reaching as far as what it lays out does.
+function *getInlineBlockReaches(
+	layout: Layout,
+	lines: BreakResult,
+	from = 0,
+): Generator<[number, number]> {
+	for (const line of lines.lines) {
+		for (const segment of line.segments) {
+			const leaf = segment.leaf;
+			if (leaf.type !== "inline-block") {
+				continue;
+			}
+			const top =
+				from +
+				line.y +
+				segment.dy +
+				leaf.boxModel.borderTopWidth +
+				leaf.boxModel.paddingTop;
+			const context = layout.boxes.get(leaf.node)?.independentFormattingContext;
+			const extent = context ? extents.get(context) : undefined;
+			if (extent !== undefined) {
+				yield [top + extent.top, top + extent.bottom];
+			} else if (leaf.breakResult !== undefined) {
+				yield [top, top + leaf.breakResult.totalHeight];
+				yield *getInlineBlockReaches(layout, leaf.breakResult, top);
+			}
+		}
+	}
+}
+
 function styleLayoutNode(
 	element: Element,
 	layoutNode: LayoutNode,
@@ -1332,24 +1508,9 @@ function styleLayoutNodeProperties(
 		applyLegacyAlignment(style, element, display, parentIsFlex);
 	}
 
-	// An inline-block flex item's measure returns a border-box size, so
-	// the layout node must not add padding+border again on the cross axis (a
-	// bordered textarea in a flex row came out too tall). The main axis is
-	// masked by flex sizing.
-	if (display === "inline-block" && hasFlexParent(element)) {
-		const direction = getComputedValue(
-			boxParentElement(element)!,
-			"flex-direction",
-		);
-		const crossEdges: readonly Edge[] =
-			direction === "column" ||
-			direction === "column-reverse"
-				? ["left", "right"]
-				: ["top", "bottom"];
-		for (const edge of crossEdges) {
-			style.padding[edge] = toValue(0);
-			style.border[edge] = 0;
-		}
+	for (const edge of getMaskedEdges(element)) {
+		style.padding[edge] = toValue(0);
+		style.border[edge] = 0;
 	}
 
 	// Item properties are consulted only inside a flex or grid container,
@@ -1415,19 +1576,21 @@ function styleLayoutNodeProperties(
 		}
 	}
 
-	if (display === "none") {
+	// An absolutely positioned part of a table is a block (css2 §9.7). It
+	// leaves the table, and lays out as any positioned box does.
+	const outOfFlow =
+		getPosition(element) === "absolute" || getPosition(element) === "fixed";
+	if (outOfFlow && BLOCKIFIED_TABLE_PARTS.has(display)) {
+		style.displayType = "block";
+	} else if (display === "none") {
 		style.displayType = "none";
 	} else if (display === "grid" || display === "inline-grid") {
 		style.displayType = "grid";
 		applyGridContainer(style, element);
 	} else if (display === "flex") {
 		style.displayType = "flex";
-	} else if (display === "table") {
-		style.displayType = "table";
-		style.borderCollapse =
-			getComputedValue(element, "border-collapse") === "collapse";
-		style.tableLayoutFixed =
-			getComputedValue(element, "table-layout") === "fixed";
+	} else if (display === "table" || display === "inline-table") {
+		applyTableContainer(style, element);
 	} else if (display === "table-header-group") {
 		style.displayType = "table-header-group";
 	} else if (display === "table-footer-group") {
@@ -1534,6 +1697,10 @@ function styleNode(
 ): void {
 	const wasHidden = layoutNode.style.displayType === "none";
 	styleLayoutNode(element, layoutNode, layout.positionedElements, layout.pass);
+	const context = layout.boxes.get(element)?.independentFormattingContext;
+	if (context) {
+		styleContextRoot(element, context);
+	}
 	// Turning on display:none makes the whole subtree box-less, and every
 	// path that restyles a box passes through here.
 	if (!wasHidden && layoutNode.style.displayType === "none") {
@@ -1549,8 +1716,10 @@ function styleNode(
 
 // `node` is a DOM node's principal box. `anonymous` is one contiguous
 // run of inline-level flow children of a block container (CSS2
-// §9.2.1.1), belonging to no DOM node at all.
-type BoxKind = "node" | "anonymous";
+// §9.2.1.1), belonging to no DOM node at all. `table` is the anonymous
+// table around table parts a container that is no table holds (CSS2
+// §17.2.1).
+type BoxKind = "node" | "anonymous" | "table";
 
 // A box either is LAID OUT (it has a layout node the solver sized) or
 // is a run MEMBER whose geometry lives in the break result of the run
@@ -1575,6 +1744,10 @@ export class Box {
 	// Null until a derivation has run, which is not the same as none.
 	children: Box[] | null;
 	heads: Map<Node, Box> | null;
+	// The anonymous table each of a container's children falls in, for
+	// those that fall in one. The children stay in the container's list,
+	// in order, and their layout nodes hang from the table's.
+	tables: Map<Box, Box> | null;
 
 	// An inline broken around a block-level box lays out none of its own
 	// content. The fragments and the block between them are the container's
@@ -1607,6 +1780,7 @@ export class Box {
 		this.members = [];
 		this.children = null;
 		this.heads = null;
+		this.tables = null;
 		this.broken = false;
 		this.holdsFragments = false;
 		this.layoutNode = null;
@@ -1679,7 +1853,7 @@ function getContainerBox(layout: Layout, container: Element): Box {
 			}
 		} else if (nodeTypeOf(child) !== child.TEXT_NODE) {
 			continue;
-		} else if (isSuppressedFlexWhitespace(child as Text)) {
+		} else if (isSuppressedWhitespace(child as Text)) {
 			continue;
 		}
 		if (run === null) {
@@ -1709,6 +1883,7 @@ function getContainerBox(layout: Layout, container: Element): Box {
 	for (let i = runCount; i < previous.length; i++) {
 		dropAnonymousBox(layout, previous[i]);
 	}
+	box.tables = wrapStrayTableParts(container, box, children);
 
 	// The walk flattens a dissolved element and never names it, so a box
 	// it held under an earlier display would outlive the change. A display:
@@ -1721,6 +1896,100 @@ function getContainerBox(layout: Layout, container: Element): Box {
 	return box;
 }
 
+const TABLE_PARTS = new Set<Display>([
+	"table-row",
+	"table-row-group",
+	"table-header-group",
+	"table-footer-group",
+	"table-cell",
+	"table-caption",
+	"table-column",
+	"table-column-group",
+]);
+
+// Consecutive table parts in a container that is no table, row group
+// or row share one anonymous table, with the white space and the boxless
+// elements between them (CSS2 §17.2.1, rule 3). The table's own layout
+// wraps a cell or stray content in the anonymous row and cell around it.
+// Matched by ordinal, as runs are.
+function wrapStrayTableParts(
+	container: Element,
+	box: Box,
+	children: Box[],
+): Map<Box, Box> | null {
+	const previous = box.tables === null ? [] : [...new Set(box.tables.values())];
+	const display = getLayoutDisplay(container);
+	let tables: Map<Box, Box> | null = null;
+	let count = 0;
+	if (!hasItemChildren(display) && !isTableInternal(display)) {
+		let table: Box | null = null;
+		let between: Box[] = [];
+		for (const child of children) {
+			if (child.kind === "node" && isTablePart(child.node!)) {
+				if (table === null) {
+					table = previous[count] ?? new Box("table", null, box);
+					count++;
+				}
+				tables ??= new Map();
+				for (const each of [...between, child]) {
+					tables.set(each, table);
+				}
+				between = [];
+			} else if (table !== null && isPassedOver(container, child)) {
+				between.push(child);
+			} else {
+				table = null;
+				between = [];
+			}
+		}
+	}
+	for (let i = count; i < previous.length; i++) {
+		dropTableBox(previous[i]);
+	}
+	return tables;
+}
+
+function isTablePart(node: Node): boolean {
+	return nodeTypeOf(node) === node.ELEMENT_NODE &&
+		!isOutOfFlow(node) &&
+		TABLE_PARTS.has(getUsedDisplay(node as Element));
+}
+
+function isTableInternal(display: Display): boolean {
+	return display === "table" ||
+		display === "inline-table" ||
+		display === "table-row" ||
+		display === "table-row-group" ||
+		display === "table-header-group" ||
+		display === "table-footer-group";
+}
+
+// What stays inside an anonymous table between two of its parts: white
+// space, which renders nothing there, and elements that take no place.
+function isPassedOver(container: Element, child: Box): boolean {
+	if (child.kind === "anonymous") {
+		return !isSpacePreserving(getElementWhiteSpace(container)) &&
+			child.members.every((member) =>
+				nodeTypeOf(member) === member.TEXT_NODE &&
+				COLLAPSIBLE_ONLY.test((member as Text).data),
+			);
+	}
+	const node = child.node;
+	return node !== null &&
+		nodeTypeOf(node) === node.ELEMENT_NODE &&
+		(getLayoutDisplay(node as Element) === "none" || isOutOfFlow(node));
+}
+
+// The parts go back under the container, or another table, when it next
+// places them.
+function dropTableBox(box: Box): void {
+	const wrapper = box.layoutNode;
+	if (wrapper !== null) {
+		wrapper.parent?.removeChild(wrapper);
+		box.layoutNode = null;
+	}
+}
+
 function getPrincipalBox(
 	layout: Layout,
 	node: Node,
@@ -1759,6 +2028,7 @@ function dropLayoutNode(layout: Layout, node: Node): void {
 		layoutNode.removeChild(layoutNode.children[0]);
 	}
 	layout.measureNodes.delete(layoutNode);
+	forgetReads(layoutNode);
 	untrackNode(layout, node);
 }
 
@@ -1788,6 +2058,7 @@ function dropAnonymousBox(layout: Layout, box: Box): void {
 	}
 	layoutNode.parent?.removeChild(layoutNode);
 	layout.measureNodes.delete(layoutNode);
+	forgetReads(layoutNode);
 	layout.anonymousBoxes.delete(layoutNode);
 	layoutNode.owner = null;
 }
@@ -1837,7 +2108,7 @@ function getBoxEntry(layout: Layout, node: Node): Box | null {
 }
 
 function getOwnLayoutNode(layout: Layout, box: Box): LayoutNode | null {
-	if (box.kind === "anonymous") {
+	if (box.kind !== "node") {
 		return box.layoutNode;
 	}
 	return box.node === null ? null : (layout.nodeMap.get(box.node) ?? null);
@@ -1887,9 +2158,45 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 		return;
 	}
 
-	const children = getContainerBox(layout, container).children!;
+	const containerBox = getContainerBox(layout, container);
+	const children = containerBox.children!;
 	let index = 0;
+	let table: Box | null = null;
+	let partIndex = 0;
 	for (const entry of children) {
+		const wrapping = containerBox.tables?.get(entry) ?? null;
+		if (wrapping !== table) {
+			if (table !== null) {
+				dropUnplacedParts(table.layoutNode!, partIndex);
+			}
+			table = wrapping;
+			partIndex = 0;
+			if (table !== null) {
+				placeTableBox(containerFlex, table, index);
+				index++;
+			}
+		}
+		if (table !== null) {
+			const wrapper = table.layoutNode!;
+			if (entry.kind === "anonymous") {
+				dropAnonymousBox(layout, entry);
+				continue;
+			}
+			const node = entry.node!;
+			const kept = layout.nodeMap.get(node);
+			if (kept?.parent !== wrapper || isTouched(layout, node)) {
+				addNode(layout, node, wrapper, null);
+			}
+			const layoutNode = layout.nodeMap.get(node);
+			if (!isOutOfFlow(node) && layoutNode?.parent === wrapper) {
+				if (wrapper.children[partIndex] !== layoutNode) {
+					wrapper.removeChild(layoutNode);
+					insertChild(wrapper, layoutNode, partIndex);
+				}
+				partIndex++;
+			}
+			continue;
+		}
 		if (entry.kind === "anonymous") {
 			let layoutNode = entry.layoutNode;
 			// A flex or grid item measured as a run is that item's box. In a
@@ -1913,8 +2220,12 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 				if (styledFrom) {
 					styleLayoutNode(styledFrom, layoutNode, layout.positionedElements);
 				}
-				layoutNode.measure = (width, widthSpace, placing) =>
-					measureInlineRun(layout, entry, width, widthSpace, placing);
+				layoutNode.measure = recordReads(
+					layout,
+					layoutNode,
+					(width, widthSpace, placing, left) =>
+						measureInlineRun(layout, entry, width, widthSpace, placing, left),
+				);
 				layout.measureNodes.add(layoutNode);
 				layout.anonymousBoxes.set(layoutNode, entry);
 				layoutNode.owner = entry.head;
@@ -1923,7 +2234,7 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 			}
 			if (containerFlex.children[index] !== layoutNode) {
 				layoutNode.parent?.removeChild(layoutNode);
-				containerFlex.insertChild(layoutNode, index);
+				insertChild(containerFlex, layoutNode, index);
 			}
 			index++;
 			syncRunMembers(layout, entry);
@@ -1948,12 +2259,16 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 			// the position is decided here, with the whole list available.
 			if (containerFlex.children[index] !== layoutNode) {
 				containerFlex.removeChild(layoutNode);
-				containerFlex.insertChild(layoutNode, index);
+				insertChild(containerFlex, layoutNode, index);
 			}
 			index++;
 		}
 	}
 
+	if (table !== null) {
+		dropUnplacedParts(table.layoutNode!, partIndex);
+	}
+
 	// Children the box list does not name, left past its end by the
 	// reordering above. A node that moved under a display:none ancestor is
 	// never re-placed, and a container that kept it would go on laying it
@@ -1968,6 +2283,36 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 	}
 }
 
+function placeTableBox(
+	containerFlex: LayoutNode,
+	table: Box,
+	index: number,
+): void {
+	let wrapper = table.layoutNode;
+	if (!wrapper) {
+		wrapper = new LayoutNode();
+		const style = createStyle();
+		style.displayType = "table";
+		wrapper.style = style;
+		table.layoutNode = wrapper;
+	}
+	if (containerFlex.children[index] !== wrapper) {
+		wrapper.parent?.removeChild(wrapper);
+		insertChild(containerFlex, wrapper, index);
+	}
+}
+
+function dropUnplacedParts(wrapper: LayoutNode, count: number): void {
+	for (let i = wrapper.children.length - 1; i >= count; i--) {
+		const child = wrapper.children[i];
+		const node = child.owner as Node | undefined;
+		if (node && isOutOfFlow(node)) {
+			continue;
+		}
+		wrapper.removeChild(child);
+	}
+}
+
 // One run measures the members as a single unit, so no box under them
 // is laid out. This is also the only path that finds an out-of-flow box
 // written among them.
@@ -1981,9 +2326,13 @@ function syncRunMembers(layout: Layout, run: Box): void {
 			addNode(layout, element, null);
 			continue;
 		}
-		if (!layout.boxes.get(element)?.independentFormattingContext) {
-			dropLayoutNode(layout, element);
-		}
+		// Whether it lays its content out under a root of its own, and as
+		// what, follows its display as it is now.
+		syncIndependentFormattingContext(layout, element);
+		// A member is measured by its run, and has no box of its own for a
+		// node to describe. One left from an earlier shape answers for where
+		// the element was.
+		dropLayoutNode(layout, element);
 		dropRunContent(layout, element);
 	}
 }
@@ -2110,6 +2459,7 @@ function addNode(
 		if (stale && stale.parent === parentLayoutNode) {
 			parentLayoutNode.removeChild(stale);
 			layout.measureNodes.delete(stale);
+			forgetReads(stale);
 			untrackNode(layout, node);
 		}
 		return;
@@ -2159,7 +2509,8 @@ function addNode(
 					currentParent.removeChild(existingLayoutNode);
 				}
 				// Appended. The container's box list decides the order.
-				parentLayoutNode.insertChild(
+				insertChild(
+					parentLayoutNode,
 					existingLayoutNode,
 					parentLayoutNode.children.length,
 				);
@@ -2219,18 +2570,19 @@ function addElementNode(
 		return;
 	} else if (isReplacedBox(element)) {
 		layoutNode.measuresText = false;
-		layoutNode.measure = (width, widthSpace) =>
-			measureReplaced(element, width, widthSpace);
+		layoutNode.measure = recordReads(layout, layoutNode, (width, widthSpace) =>
+			measureReplaced(element, width, widthSpace),
+		);
 		layout.measureNodes.add(layoutNode);
 		if (parentLayoutNode) {
 			placeChild(parentLayoutNode, layoutNode, flexIndex);
 		}
 		return;
 	} else if (isMathRoot(element)) {
-		layoutNode.measure = () => {
+		layoutNode.measure = recordReads(layout, layoutNode, () => {
 			const box = measureMath(layout, element);
 			return {width: box.width, height: box.height};
-		};
+		});
 		layout.measureNodes.add(layoutNode);
 		if (parentLayoutNode) {
 			placeChild(parentLayoutNode, layoutNode, flexIndex);
@@ -2238,8 +2590,12 @@ function addElementNode(
 		return;
 	} else if (asRun) {
 		const box = getPrincipalBox(layout, element);
-		layoutNode.measure = (width, widthSpace, placing) =>
-			measureInlineRun(layout, box, width, widthSpace, placing);
+		layoutNode.measure = recordReads(
+			layout,
+			layoutNode,
+			(width, widthSpace, placing, left) =>
+				measureInlineRun(layout, box, width, widthSpace, placing, left),
+		);
 		layout.measureNodes.add(layoutNode);
 
 		if (layoutNode && parentLayoutNode) {
@@ -2304,7 +2660,7 @@ function addTextNode(
 		return;
 	}
 
-	if (isSuppressedFlexWhitespace(text)) {
+	if (isSuppressedWhitespace(text)) {
 		return;
 	}
 
@@ -2322,11 +2678,15 @@ function addTextNode(
 	}
 
 	const own = getPrincipalBox(layout, text);
-	layoutNode.measure = (width, widthSpace, placing) =>
-		measureInlineRun(layout, own, width, widthSpace, placing);
+	layoutNode.measure = recordReads(
+		layout,
+		layoutNode,
+		(width, widthSpace, placing, left) =>
+			measureInlineRun(layout, own, width, widthSpace, placing, left),
+	);
 	layout.measureNodes.add(layoutNode);
 
-	parentLayoutNode.insertChild(layoutNode, parentLayoutNode.children.length);
+	insertChild(parentLayoutNode, layoutNode, parentLayoutNode.children.length);
 }
 
 // Sees THROUGH an inline wrapping block-level content (CSS2 §9.2.1.1).
@@ -2357,6 +2717,10 @@ function flowChildren(
 	return into;
 }
 
+// The box each independent formatting context's root lays content out
+// for, which places the root's rows on a line of its own frame.
+const contextHosts = new WeakMap<LayoutNode, Element>();
+
 // An inline-block is measured as ONE unit by its run, and a run ends at
 // a block-level box, so block content inside it is laid out by the box's
 // own measurement. Only the run that placed the box knows its content
@@ -2367,16 +2731,24 @@ function syncIndependentFormattingContext(
 ): void {
 	const box = getPrincipalBox(layout, element);
 	const display = getLayoutDisplay(element);
-	// An inline-grid always lays its own content out, because a line cannot
-	// contain a grid piecemeal. An inline-block does so only once it holds a
-	// block-level box. Never a plain inline: it is broken instead, and
-	// taking its content here would steal back the container's boxes.
+	// An inline-grid or inline-table always lays its own content out,
+	// because a line cannot contain a grid or a table piecemeal. An
+	// inline-block does so only once it holds a block-level box. Never a
+	// plain inline: it is broken instead, and taking its content here would
+	// steal back the container's boxes.
 	const grid = display === "inline-grid";
+	const table = display === "inline-table";
+	// Only a run's measure lays the root out, so a box no run measures, as
+	// an out-of-flow one, lays its content out on its own node.
 	if (
 		!establishesIndependentFormattingContext(element) ||
-		(!grid && !hasBlockLevelBox(element))
+		!isMeasuredAsRun(element) ||
+		(!grid && !table && !hasBlockLevelBox(element))
 	) {
-		dropIndependentFormattingContext(box);
+		if (box.independentFormattingContext) {
+			dropIndependentFormattingContext(box);
+			invalidateOutOfFlowDescendants(layout, element);
+		}
 		return;
 	}
 
@@ -2384,13 +2756,46 @@ function syncIndependentFormattingContext(
 	if (!root) {
 		root = new LayoutNode();
 		box.independentFormattingContext = root;
+		contextHosts.set(root, element);
+		// What it holds moves under another root, so an out-of-flow box among
+		// it may no longer reach its containing block from where it hangs.
+		invalidateOutOfFlowDescendants(layout, element);
+		// A change inside, a restyle no run records, leaves the box's
+		// measure answering with the old size unless the box hears of it.
+		root.onStale = () => {
+			layout.staleHosts.add(element);
+		};
+	}
+	styleContextRoot(element, root);
+
+	for (const child of flowContent(element)) {
+		if (
+			nodeTypeOf(child) === child.ELEMENT_NODE ||
+			nodeTypeOf(child) === child.TEXT_NODE
+		) {
+			addNode(layout, child, root);
+		}
+	}
+
+	// The measure laying this root out may be running right now. Its boxes
+	// have to be in it before that measure returns.
+	if (layout.dirtyRunContainers.has(element)) {
+		syncContainerRuns(layout, element);
 	}
-	// The root IS the box's formatting context, so it gets the display and
-	// the grid container properties. The element's own node is the run's.
+}
+
+// The root IS the box's formatting context, so it gets the display and
+// the grid or table container properties, from the element as it is now.
+// The element's own node is the run's.
+function styleContextRoot(element: Element, root: LayoutNode): void {
+	const display = getLayoutDisplay(element);
 	const style = createStyle();
 	style.blockFormattingContext = true;
-	style.displayType = grid ? "grid" : "block";
-	if (grid) {
+	style.displayType = "block";
+	if (display === "inline-table") {
+		applyTableContainer(style, element);
+	} else if (display === "inline-grid") {
+		style.displayType = "grid";
 		applyGridContainer(style, element);
 		const gaps: Array<[string, Gutter]> = [
 			["row-gap", "row"],
@@ -2407,21 +2812,6 @@ function syncIndependentFormattingContext(
 	}
 	root.style = style;
 	root.invalidate();
-
-	for (const child of flowContent(element)) {
-		if (
-			nodeTypeOf(child) === child.ELEMENT_NODE ||
-			nodeTypeOf(child) === child.TEXT_NODE
-		) {
-			addNode(layout, child, root);
-		}
-	}
-
-	// The measure laying this root out may be running right now. Its boxes
-	// have to be in it before that measure returns.
-	if (layout.dirtyRunContainers.has(element)) {
-		syncContainerRuns(layout, element);
-	}
 }
 
 function dropIndependentFormattingContext(box: Box): void {
@@ -2462,6 +2852,10 @@ function dropContainerBoxes(layout: Layout, element: Element): void {
 				dropAnonymousBox(layout, child);
 			}
 		}
+		for (const table of new Set(box.tables?.values())) {
+			dropTableBox(table);
+		}
+		box.tables = null;
 		box.children = null;
 		box.heads = null;
 	}
@@ -2497,10 +2891,12 @@ function dropRunContent(layout: Layout, element: Element): void {
 	}
 }
 
-// Retire the boxes of elements the enumeration saw THROUGH (dissolved,
-// or broken around a block). Neither generates a box, and one left in
-// place is laid out from a shape the container no longer has. Only
-// those elements are descended into.
+// Retire the boxes of elements the enumeration saw THROUGH: dissolved
+// ones, and inline boxes, which a block inside breaks. A dissolved one
+// generates no box, and one left in place is laid out from a shape the
+// container no longer has. The walk descends where the enumeration
+// does, into every inline box, since one that held a block before this
+// derivation may hold none now.
 function dropSteppedOver(layout: Layout, parent: Element): void {
 	for (const child of flatChildren(parent)) {
 		if (nodeTypeOf(child) !== child.ELEMENT_NODE) {
@@ -2508,7 +2904,7 @@ function dropSteppedOver(layout: Layout, parent: Element): void {
 		}
 		const element = child as Element;
 		const dissolves = isDisplayContents(element);
-		if (!dissolves && !layout.boxes.get(element)?.broken) {
+		if (!dissolves && !isInlineBox(element)) {
 			continue;
 		}
 		// addNode drops the box of a box-less element.
@@ -2562,6 +2958,14 @@ function isHiddenByAncestor(node: Node): boolean {
 	return false;
 }
 
+function getLayoutRoot(node: LayoutNode): LayoutNode {
+	let root = node;
+	while (root.parent !== null) {
+		root = root.parent;
+	}
+	return root;
+}
+
 // Coordinates under an independent formatting context start at the box that owns
 // it: the ancestor whose root the node was actually laid out under, not the
 // nearest one. An out-of-flow descendant hangs from its containing block
@@ -2610,12 +3014,12 @@ function placeChild(
 	index: number,
 ): void {
 	if (child.parent === parent) {
-		if (parent.getChildIndex(child) === index) {
+		if (getChildIndex(parent, child) === index) {
 			return;
 		}
 		parent.removeChild(child);
 	}
-	parent.insertChild(child, index);
+	insertChild(parent, child, index);
 }
 
 function trackNode(
@@ -2631,6 +3035,7 @@ function untrackNode(layout: Layout, domNode: Node): void {
 	const layoutNode = layout.nodeMap.get(domNode);
 	if (layoutNode) {
 		layoutNode.owner = null;
+		forgetReads(layoutNode);
 	}
 	// The lines are the product of the layout node that is being removed,
 	// and would describe a box that no longer exists.
@@ -2793,6 +3198,7 @@ function invalidateNode(layout: Layout, node: Node): void {
 
 			if (!node.isConnected) {
 				layout.measureNodes.delete(layoutNode);
+				forgetReads(layoutNode);
 				untrackNode(layout, node);
 			} else {
 				// Kept for performLayout's re-add sweep, but restyled. A
@@ -3079,11 +3485,19 @@ interface LineResult {
 			// The direction the characters were reordered into. Null in logical
 			// order (no bidi on the line, or a terminal that reorders for itself).
 			visualBase: "ltr" | "rtl" | null;
+
+			// An atomic inline's top below the line's, and its height, as
+			// vertical-align puts it on the line. Zero for anything else.
+			dy: number;
+			height: number;
 		}
 	>;
 	y: number;
 	width: number;
 	height: number;
+	// The row the line's text sits on, below the line's top: its baseline,
+	// which an atomic inline taller above it pushes down.
+	textTop: number;
 }
 
 export interface BreakResult {
@@ -3215,6 +3629,10 @@ function getPrefixWidths(
 	return widths;
 }
 
+// Set while a run is measured when its content's size depends on the
+// width the run is given other than through where its lines break.
+let readsLineWidth = false;
+
 // Only the placing measurement's lines become the box's. A probe's are
 // a result about a box nothing was laid out in, and painting them
 // rendered a stretched item at its narrowest.
@@ -3224,8 +3642,20 @@ function measureInlineRun(
 	width: number,
 	widthSpace: AvailableSpace,
 	placing: boolean,
+	left: number,
 ): Size {
-	const breakResult = breakNodes(layout, box, width, widthSpace);
+	const outer = readsLineWidth;
+	// The block the lines are indented in: the run's container, or for a
+	// box measured as a run of its own, the box's element.
+	const block = box.parent !== null
+		? box.container
+		: box.node !== null && nodeTypeOf(box.node) === box.node.ELEMENT_NODE
+		? (box.node as Element)
+		: box.node === null ? null : flatParentElement(box.node);
+	readsLineWidth = block !== null && hasPercentage(block, ["text-indent"]);
+	const breakResult = breakNodes(layout, box, width, widthSpace, left);
+	const widthDependent = readsLineWidth;
+	readsLineWidth = outer || widthDependent;
 	if (Number.isFinite(width)) {
 		breakResult.containerWidth = width;
 	}
@@ -3243,11 +3673,20 @@ function measureInlineRun(
 			? Math.max(breakResult.maxLineWidth, width)
 			: breakResult.maxLineWidth,
 		height: breakResult.totalHeight,
+		columns: widthSpace !== "indefinite" && width > 0
+			? getDrawnColumns(left, width)
+			: undefined,
+		wrapped: breakResult.wrapped === true,
+		lineColumns: Math.round(breakResult.maxLineWidth),
+		widthDependent,
 	};
 }
 
 // The <math> element a node is inside, itself included.
-function getEnclosingMath(node: Node): Element | null {
+function getEnclosingMath(layout: Layout, node: Node): Element | null {
+	if (!layout.laidOutMath) {
+		return null;
+	}
 	for (
 		let element: Element | null = nodeTypeOf(node) === node.ELEMENT_NODE
 			? (node as Element)
@@ -3265,6 +3704,7 @@ function getEnclosingMath(node: Node): Element | null {
 function measureMath(layout: Layout, element: Element): MathBox {
 	const box = layoutMath(element, !isInlineDisplay(getUsedDisplay(element)));
 	layout.mathBoxes.set(element, box);
+	layout.laidOutMath = true;
 	return box;
 }
 
@@ -3346,6 +3786,25 @@ function collectLeafNodes(
 	return leafNodes;
 }
 
+const ATOMIC_WIDTH_PROPERTIES = [
+	"width",
+	"min-width",
+	"max-width",
+	"margin-left",
+	"margin-right",
+	"padding-left",
+	"padding-right",
+];
+
+function hasPercentage(
+	element: Element,
+	properties: readonly string[],
+): boolean {
+	return properties.some((property) =>
+		getComputedValue(element, property).includes("%"),
+	);
+}
+
 function collectLeaves(
 	layout: Layout,
 	root: Node,
@@ -3391,6 +3850,14 @@ function collectLeaves(
 		} else if (nodeTypeOf(node) === node.ELEMENT_NODE) {
 			const element = node as Element;
 			const display = getLayoutDisplay(element);
+			// A box sized whole on the line takes a percentage of the line's
+			// width however it is sized, and with no width takes it as auto.
+			if (
+				isAtomicInline(display) &&
+				hasPercentage(element, ATOMIC_WIDTH_PROPERTIES)
+			) {
+				readsLineWidth = true;
+			}
 
 			if (getLayoutDisplay(element) === "none" || isOutOfFlow(element)) {
 				// Neither occupies run space nor interrupts the run. Before the
@@ -3445,7 +3912,7 @@ function collectLeaves(
 					syncIndependentFormattingContext(layout, element);
 				}
 
-				const boxModel = getBoxModel(element);
+				const boxModel = {...getBoxModel(element)};
 
 				// getBoxModel carries only absolute widths. A percentage
 				// resolves here against the run's available width, which is
@@ -3464,7 +3931,7 @@ function collectLeaves(
 					) {
 						boxModel.width = Math.max(
 							0,
-							Math.round((widthValue.percentage / 100) * availableWidth),
+							(widthValue.percentage / 100) * availableWidth,
 						);
 					}
 				}
@@ -3614,9 +4081,9 @@ function collectLeaves(
 							: Number.NaN,
 						contentHeightMode === "definite" ? contentHeight : Number.NaN,
 					);
-					computePaintExtents(layout, independentFormattingContext, 0);
-					finalContentWidth = independentFormattingContext.getComputedWidth();
-					finalContentHeight = independentFormattingContext.getComputedHeight();
+					computePaintExtents(layout, independentFormattingContext, 0, 0);
+					finalContentWidth = getComputedWidth(independentFormattingContext);
+					finalContentHeight = getComputedHeight(independentFormattingContext);
 				} else {
 					const contentStart = flatFirstRenderableChild(element);
 					if (contentStart) {
@@ -3788,6 +4255,7 @@ function breakNodes(
 	source: Box,
 	width: number,
 	widthSpace: AvailableSpace,
+	left = NaN,
 ): BreakResult {
 	// An `indefinite` request is indefinite (NaN), so percentages in
 	// the content cannot resolve. Any definite request, an `shrink-to-fit` 0
@@ -3816,12 +4284,13 @@ function breakNodes(
 
 	// A width of 0 is a real constraint, the min-content probe. Treated as
 	// unlimited it returned max-content, making min-content zero
-	// everywhere. A line fits a width when both round to the same cells,
-	// since its pieces are drawn at whole columns: a fraction of a margin
-	// does not wrap the word after it.
+	// everywhere. A line fits the whole columns its box is drawn across,
+	// since its pieces are drawn at whole columns too: a fraction of a
+	// margin does not wrap the word after it, and a box 30.5 cells wide
+	// drawn across 30 columns does not take a line of 31.
 	const maxWidth = widthSpace === "indefinite"
 		? Number.MAX_SAFE_INTEGER
-		: width > 0 ? Math.round(width) + 0.4999 : width;
+		: width > 0 ? getDrawnColumns(left, width) + 0.4999 : width;
 
 	const processedContent = processWhitespace(layout, leafNodes);
 	// `pre` suppresses wrapping as `nowrap` does. Treating it as wrappable
@@ -4088,8 +4557,8 @@ function processWhitespace(
 
 		// Never the newline a <br> contributes. That is a forced break, and
 		// trimming it dropped the blank line `<br>text` opens with.
-		const leading = text.match(/^[^\S\n]*/)?.[0].length || 0;
-		const trailing = text.match(/[^\S\n]*$/)?.[0].length || 0;
+		const leading = text.match(/^[ \t\r\f]*/)?.[0].length || 0;
+		const trailing = text.match(/[ \t\r\f]*$/)?.[0].length || 0;
 		const trimStart = Math.min(leading, guardStart);
 		const trimmedEnd = Math.max(text.length - trailing, guardEnd);
 
@@ -4343,21 +4812,7 @@ function buildLines(
 		}
 
 		if (lineNodes.length > 0) {
-			// Whole rows: a line is drawn on rows.
-			const lineHeight = Math.round(
-				Math.max(
-					...lineNodes.map((n) =>
-						n.leaf.type === "inline-block"
-							? n.leaf.contentHeight +
-						n.leaf.boxModel.paddingTop +
-						n.leaf.boxModel.paddingBottom +
-						n.leaf.boxModel.borderTopWidth +
-						n.leaf.boxModel.borderBottomWidth
-							: 1,
-					),
-					1,
-				),
-			);
+			const {lineHeight, textTop} = placeOnLine(layout, lineNodes);
 
 			// css2 §10.8.1: a line is as tall as the line-height of its block
 			// and of the text on it, with the leading split above and below.
@@ -4389,6 +4844,7 @@ function buildLines(
 				y: currentY + Math.floor(leading / 2),
 				height: lineHeight,
 				width: bestBreakWidth,
+				textTop,
 			});
 
 			currentY += lineHeight + leading;
@@ -4405,6 +4861,126 @@ function buildLines(
 	return {lines, wrapped, height: currentY};
 }
 
+// css2 §10.8: each box on a line is placed by its vertical-align, text on
+// the line's baseline and an atomic inline with its baseline on it, and
+// the line is as tall as what reaches furthest above the baseline and
+// below it. In whole rows: text is a row, with the baseline its bottom.
+function placeOnLine(
+	layout: Layout,
+	segments: LineResult["segments"],
+): {lineHeight: number; textTop: number} {
+	let above = 1;
+	let below = 0;
+	const atomics: Array<{
+		segment: LineResult["segments"][number];
+		height: number;
+		baseline: number;
+		align: string;
+	}> = [];
+	for (const segment of segments) {
+		if (segment.leaf.type !== "inline-block") {
+			continue;
+		}
+		const leaf = segment.leaf;
+		const height = Math.round(
+			leaf.contentHeight +
+				leaf.boxModel.paddingTop +
+				leaf.boxModel.paddingBottom +
+				leaf.boxModel.borderTopWidth +
+				leaf.boxModel.borderBottomWidth,
+		);
+		const align = getComputedValue(leaf.node, "vertical-align");
+		const baseline = getAtomicBaseline(layout, leaf, height);
+		atomics.push({segment, height, baseline, align});
+		if (align !== "top" && align !== "bottom" && align !== "middle") {
+			above = Math.max(above, baseline);
+			below = Math.max(below, height - baseline);
+		}
+	}
+	let lineHeight = above + below;
+	for (const {height} of atomics) {
+		lineHeight = Math.max(lineHeight, height);
+	}
+	for (const {segment, height, baseline, align} of atomics) {
+		segment.height = height;
+		segment.dy = align === "top"
+			? 0
+			: align === "bottom"
+			? lineHeight - height
+			: align === "middle"
+			? Math.floor((lineHeight - height) / 2)
+			: above - baseline;
+	}
+	return {lineHeight, textTop: above - 1};
+}
+
+// The rows from an atomic inline's top through the row its baseline is
+// the bottom of (css2 §10.8.1): an inline-table's, an inline-grid's or an
+// inline-flex's first line, an inline-block's last when it shows its
+// content past its edges, and otherwise, a replaced box's included, its
+// bottom edge.
+function getAtomicBaseline(
+	layout: Layout,
+	leaf: InlineBlockLeaf,
+	height: number,
+): number {
+	const element = leaf.node;
+	const display = getLayoutDisplay(element);
+	const first =
+		display === "inline-table" ||
+		display === "inline-grid" ||
+		display === "inline-flex";
+	if (
+		isReplacedBox(element) ||
+		(!first &&
+			(getComputedValue(element, "overflow-x") !== "visible" ||
+				getComputedValue(element, "overflow-y") !== "visible"))
+	) {
+		return height;
+	}
+	const inset = leaf.boxModel.borderTopWidth + leaf.boxModel.paddingTop;
+	const context = layout.boxes.get(element)?.independentFormattingContext;
+	const line = context
+		? getLineInTree(layout, context, first)
+		: leaf.breakResult === undefined || leaf.breakResult.lines.length === 0
+		? null
+		: first ? leaf.breakResult.lines[0].y : leaf.breakResult.lines.at(-1)!.y;
+	return line === null
+		? height
+		: Math.min(height, Math.max(1, Math.round(inset + line + 1)));
+}
+
+// The top of the first or last line laid out in a tree, from its root's
+// top, depth first through the boxes in flow.
+function getLineInTree(
+	layout: Layout,
+	node: LayoutNode,
+	first: boolean,
+): number | null {
+	const children = first ? node.children : [...node.children].reverse();
+	for (const child of children) {
+		if (
+			child.style.displayType === "none" ||
+			child.style.positionType === "absolute" ||
+			child.style.positionType === "fixed"
+		) {
+			continue;
+		}
+		const lines = child.measure === null
+			? undefined
+			: getMeasuredLines(layout, child);
+		const line = lines !== undefined && lines.lines.length > 0
+			? (first ? lines.lines[0] : lines.lines.at(-1)!).y +
+				child.style.border.top +
+				child.result.padding.top
+			: getLineInTree(layout, child, first);
+		if (line !== null) {
+			return child.grid.top + line;
+		}
+	}
+	return null;
+}
+
 // The rows a line-height asks for: as many as it is times the text's font
 // size, rounded down, and at least one. A terminal draws every glyph one row
 // tall whatever its size, so the ratio is what carries the spacing the
@@ -4617,14 +5193,7 @@ function getScrollOwner(layout: Layout, node: LayoutNode): Element | null {
 
 function scrollsContent(layout: Layout, node: LayoutNode): boolean {
 	const element = getScrollOwner(layout, node);
-	if (element === null) {
-		return false;
-	}
-	const overflow = getComputedValue(element, "overflow");
-	return (
-		isScrollingOverflow(getComputedValue(element, "overflow-y") || overflow) ||
-		isScrollingOverflow(getComputedValue(element, "overflow-x") || overflow)
-	);
+	return element !== null && isScrollContainer(element);
 }
 
 // A sticky box is laid out in flow and then moved, as far as the box it
@@ -4643,9 +5212,10 @@ function getStickyShift(
 	let x = 0;
 	let y = 0;
 	let scroller: LayoutNode | null = null;
-	for (let current = node; current.parent !== null; current = current.parent) {
-		x += current.result.left;
-		y += current.result.top;
+	let current = node;
+	for (; current.parent !== null; current = current.parent) {
+		x += current.grid.left;
+		y += current.grid.top;
 		if (current !== node && current.style.positionType === "sticky") {
 			const shift = getStickyShift(layout, current);
 			x += shift.x;
@@ -4656,15 +5226,60 @@ function getStickyShift(
 			break;
 		}
 	}
+	// Past an inline-block's own root the walk goes on from the
+	// inline-block, which places the root's rows in its own frame. Both it
+	// and the scroller are read where they are drawn, and the scroller's
+	// own offset undone, so the position counts as the scroller's do.
+	let crossedScroller: Element | null = null;
+	let crossedRect: DOMRect | null = null;
+	if (scroller === null && current !== layout.initialBlock) {
+		const host = contextHosts.get(current);
+		const hostRect = host === undefined ? null : layout.getRect(host);
+		if (host === undefined || hostRect === null) {
+			return {x: 0, y: 0};
+		}
+		const hostBox = getBoxModel(host);
+		x += hostRect.x + hostBox.borderLeftWidth + hostBox.paddingLeft;
+		y += hostRect.y + hostBox.borderTopWidth + hostBox.paddingTop;
+		for (
+			let outer = flatParentElement(host);
+			outer !== null;
+			outer = flatParentElement(outer)
+		) {
+			if (isScrollContainer(outer) && !isRootBox(layout, outer)) {
+				crossedRect = layout.getRect(outer);
+				crossedScroller = crossedRect === null ? null : outer;
+				break;
+			}
+		}
+		if (crossedScroller !== null) {
+			x += getScrollOffset(crossedScroller, "left") - crossedRect!.x;
+			y += getScrollOffset(crossedScroller, "top") - crossedRect!.y;
+		}
+	}
 	let portLeft = 0;
 	let portTop: number;
 	let portWidth: number;
 	let portHeight: number;
-	if (scroller === null) {
+	if (crossedScroller !== null) {
+		const box = getBoxModel(crossedScroller);
+		portLeft =
+			(box.borderLeftWidth || 0) + getScrollOffset(crossedScroller, "left");
+		portTop =
+			(box.borderTopWidth || 0) + getScrollOffset(crossedScroller, "top");
+		portWidth =
+			crossedRect!.width -
+			(box.borderLeftWidth || 0) -
+			(box.borderRightWidth || 0);
+		portHeight =
+			crossedRect!.height -
+			(box.borderTopWidth || 0) -
+			(box.borderBottomWidth || 0);
+	} else if (scroller === null) {
 		// scrollY is CSS pixels: a whole number of rows, each a cell tall.
 		const window = layout.window;
 		portTop = window.scrollY / getCellSize(window.document).height;
-		portWidth = layout.initialBlock.result.width;
+		portWidth = layout.initialBlock.grid.width;
 		portHeight = layout.initialBlock.style.height.value;
 	} else {
 		const element = scroller.owner as Element;
@@ -4672,26 +5287,26 @@ function getStickyShift(
 		portLeft = (box.borderLeftWidth || 0) + getScrollOffset(element, "left");
 		portTop = (box.borderTopWidth || 0) + getScrollOffset(element, "top");
 		portWidth =
-			scroller.result.width -
+			scroller.grid.width -
 			(box.borderLeftWidth || 0) -
 			(box.borderRightWidth || 0);
 		portHeight =
-			scroller.result.height -
+			scroller.grid.height -
 			(box.borderTopWidth || 0) -
 			(box.borderBottomWidth || 0);
 	}
 	// The box the sticky one flows in bounds the shift: its content box,
 	// or everything it scrolls when it is the scroller itself.
-	const parentX = x - node.result.left;
-	const parentY = y - node.result.top;
+	const parentX = x - node.grid.left;
+	const parentY = y - node.grid.top;
 	const owner = parent.owner as Node | undefined;
 	const edges = owner && nodeTypeOf(owner) === owner.ELEMENT_NODE
 		? getBoxModel(owner as Element)
 		: null;
 	let left = parentX + (edges?.borderLeftWidth || 0);
 	let top = parentY + (edges?.borderTopWidth || 0);
-	let right = parentX + parent.result.width - (edges?.borderRightWidth || 0);
-	let bottom = parentY + parent.result.height - (edges?.borderBottomWidth || 0);
+	let right = parentX + parent.grid.width - (edges?.borderRightWidth || 0);
+	let bottom = parentY + parent.grid.height - (edges?.borderBottomWidth || 0);
 	const scrolled = parent === scroller
 		? layout.getScrollExtent(owner as Element)
 		: null;
@@ -4707,7 +5322,7 @@ function getStickyShift(
 	return {
 		x: stickyShiftAlong(
 			x,
-			node.result.width,
+			node.grid.width,
 			portLeft,
 			portWidth,
 			left,
@@ -4717,7 +5332,7 @@ function getStickyShift(
 		),
 		y: stickyShiftAlong(
 			y,
-			node.result.height,
+			node.grid.height,
 			portTop,
 			portHeight,
 			top,
@@ -4762,17 +5377,20 @@ function stickyShiftAlong(
 // in-flow box is contained by its parent, so every ancestor is in the
 // chain. An absolute box is contained by the nearest positioned or
 // containing ancestor, so the scrollers below that leave it alone. A
-// fixed box is contained by the viewport, so none of them move it.
+// fixed box is contained by the viewport, so none of them move it. A
+// sticky shift comes from the finished layout, so a solve still running
+// goes without it.
 function getScrollShift(
 	layout: Layout,
 	layoutNode: LayoutNode,
+	solving: boolean,
 ): {x: number; y: number} {
 	let x = 0;
 	let y = 0;
 	let current: LayoutNode | null = layoutNode;
 	while (current !== null) {
 		const type: PositionType = current.style.positionType;
-		if (type === "sticky") {
+		if (type === "sticky" && !solving) {
 			const shift = getStickyShift(layout, current);
 			x += shift.x;
 			y += shift.y;
@@ -4791,10 +5409,14 @@ function getScrollShift(
 		if (next === null) {
 			break;
 		}
-		const scroller = getScrollOwner(layout, next);
-		if (scroller !== null) {
-			x -= getScrollOffset(scroller, "left");
-			y -= getScrollOffset(scroller, "top");
+		const owner = next.owner as Node | undefined;
+		if (owner && nodeTypeOf(owner) === owner.ELEMENT_NODE) {
+			const left = getScrollOffset(owner as Element, "left");
+			const top = getScrollOffset(owner as Element, "top");
+			if ((left !== 0 || top !== 0) && !isRootBox(layout, owner as Element)) {
+				x -= left;
+				y -= top;
+			}
 		}
 		current = next;
 	}
@@ -4803,10 +5425,12 @@ function getScrollShift(
 
 // Document-space geometry: the layout position under what scrolling has
 // done to it. Applied in this one function so paint, getRect,
-// hit-testing and Range geometry all inherit it at once.
+// hit-testing and Range geometry all inherit it at once. In whole cells,
+// or, for a solve still running, as layout writes it.
 function getAbsolutePosition(
 	layout: Layout,
 	layoutNode: LayoutNode,
+	solving = false,
 ): {x: number; y: number} {
 	let x = 0;
 	let y = 0;
@@ -4815,10 +5439,11 @@ function getAbsolutePosition(
 		current;
 		current = current.parent
 	) {
-		x += current.result.left;
-		y += current.result.top;
+		const place = solving ? current.result : current.grid;
+		x += place.left;
+		y += place.top;
 	}
-	const shift = getScrollShift(layout, layoutNode);
+	const shift = getScrollShift(layout, layoutNode, solving);
 	return {x: x + shift.x, y: y + shift.y};
 }
 
@@ -4925,9 +5550,12 @@ function hitTestInFlow(
 			) {
 				return null;
 			}
-			const node = layout.getLayoutNode(element);
-			const extent = node === null ? undefined : layout.paintExtent(node);
-			if (extent === undefined || y < extent.top || y >= extent.bottom) {
+			// A box measured on a line is covered by the line's extent. With no
+			// extent counted in document rows, nothing is ruled out.
+			const node =
+				getLayoutNode(layout, element) ?? getBox(layout, element)?.layoutNode;
+			const extent = node ? paintExtent(node, layout.initialBlock) : undefined;
+			if (extent !== undefined && (y < extent.top || y >= extent.bottom)) {
 				return null;
 			}
 		}
@@ -4936,9 +5564,9 @@ function hitTestInFlow(
 	// long list is not walked whole for every pointer move. Paint extents
 	// are unscrolled document rows, so only an unscrolled element asks.
 	const candidates =
-		layout.scrolledAncestorRows(element) === 0 &&
+		scrolledAncestorRows(layout, element) === 0 &&
 		getScrollOffset(element, "top") === 0
-			? layout.getVisibleChildren(element, y, y + 1)
+			? getVisibleChildren(layout, element, y, y + 1)
 			: null;
 	const children: Element[] = [];
 	for (const child of candidates ?? flowContent(element)) {
@@ -4982,8 +5610,14 @@ function getStaticPosition(
 		return null;
 	}
 
-	const origin = getAbsolutePosition(layout, containerNode);
-	const containingOrigin = getAbsolutePosition(layout, containingBlock);
+	// Positions count from the root of the tree a node is in, the
+	// document's or an inline-block's own, and one from another root says
+	// nothing about where this box would be.
+	if (getLayoutRoot(containerNode) !== getLayoutRoot(containingBlock)) {
+		return null;
+	}
+	const origin = getAbsolutePosition(layout, containerNode, true);
+	const containingOrigin = getAbsolutePosition(layout, containingBlock, true);
 	const offsetLeft = origin.x - containingOrigin.x;
 	const offsetTop = origin.y - containingOrigin.y;
 	const contentLeft =
@@ -5011,7 +5645,7 @@ function getStaticPosition(
 	if (entry?.kind === "anonymous") {
 		const runNode = entry.layoutNode;
 		if (runNode) {
-			const runOrigin = getAbsolutePosition(layout, runNode);
+			const runOrigin = getAbsolutePosition(layout, runNode, true);
 			const cursor = getInlineCursorBefore(entry, element);
 			return {
 				left: runOrigin.x - containingOrigin.x + cursor.x,
@@ -5024,7 +5658,11 @@ function getStaticPosition(
 	const index = children.indexOf(entry ?? getPrincipalBox(layout, element));
 	for (let i = index - 1; i >= 0; i--) {
 		const previous = children[i];
-		const previousNode = getOwnLayoutNode(layout, previous);
+		// A table part takes its place in the anonymous table around it.
+		const previousNode = getOwnLayoutNode(
+			layout,
+			box.tables?.get(previous) ?? previous,
+		);
 		if (
 			!previousNode ||
 			previousNode.parent !== containerNode ||
@@ -5037,7 +5675,9 @@ function getStaticPosition(
 			top:
 				offsetTop +
 				previousNode.result.top +
-				previousNode.getComputedHeight() +
+				(!Number.isNaN(previousNode.result.height)
+					? previousNode.result.height
+					: 0) +
 				previousNode.result.margin.bottom,
 		};
 	}
@@ -5070,7 +5710,7 @@ function getInlineCursorBefore(
 					(segment.leaf.type === "inline-block"
 						? segment.leaf.boxModel.marginRight
 						: 0),
-				y: line.y,
+				y: line.y + line.textTop,
 			};
 		}
 	}
@@ -5127,6 +5767,8 @@ function getNodesInRange(
 					dataStart,
 					dataEnd,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			} else if (item.leafNode.type === "inline-block") {
 				// The placeholder advances by the margin box, so the line fits it
@@ -5152,6 +5794,8 @@ function getNodesInRange(
 					dataStart: 0,
 					dataEnd: 0,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			} else if (item.leafNode.type === "edge") {
 				width = getEdgeWidth(item.leafNode);
@@ -5165,6 +5809,8 @@ function getNodesInRange(
 					dataStart: 0,
 					dataEnd: 0,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			} else if (item.leafNode.type === "br") {
 				nodes.push({
@@ -5177,6 +5823,8 @@ function getNodesInRange(
 					dataStart: 0,
 					dataEnd: 0,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			}
 
@@ -5265,6 +5913,9 @@ export class Layout {
 	// Each <math> element's last laid-out box. Written by whichever
 	// measurement placed the element and read back by the painter.
 	mathBoxes: WeakMap<Element, MathBox>;
+	// Whether any <math> was ever laid out, so a page without one never
+	// searches an element's ancestors for it.
+	laidOutMath: boolean;
 
 	// The reverse of Box.layoutNode, and the registry the sweeps that must
 	// reach every box (resize, pruning, disposal) walk. Strong, because
@@ -5293,16 +5944,54 @@ export class Layout {
 	// Counts layout passes, so a node styled in this pass is not styled
 	// again when a container re-adds it.
 	pass: number;
+	// Counts the passes that solved the tree, so a reader can tell whether
+	// geometry changed since it last looked.
+	solves: number;
+	// The rows the next frame repaints, [top, bottom, fixed] in document
+	// rows, or in viewport rows for a box in fixed space. Every row
+	// repaints when wholeDamage is set. collecting is set while the paint
+	// extents of the document, not of a box's own formatting context, are
+	// written, which is when moved boxes add their rows.
+	damage: Array<[number, number, boolean]>;
+	wholeDamage: boolean;
+	collecting: boolean;
+	// Elements whose style changed with no layout change, and whether the
+	// selection moved. Their rows are found once layout is current.
+	restyledForPaint: Map<Element, object | null>;
+	// Every element restyled since the last layout, for the measures that
+	// read it.
+	restyledSinceLayout: Set<Element>;
+	// Boxes whose own formatting context went stale, so that their measure,
+	// which lays it out, is answered again.
+	staleHosts: Set<Element>;
+	selectionMoved: boolean;
+	// The rows each sticky box painted at the last solve, shift included.
+	// A shift moves a box's rows with no change to its rect, and only a
+	// solve or a scroll changes one, so a solve compares them.
+	stickyRows: Map<LayoutNode, StickyRows>;
+	// The rows the selection covered at the last frame, from its ends.
+	selectionRows: [number, number] | null;
 
 	constructor(window: Window, width: number, height: number) {
 		this.geometryMoved = false;
 		this.pass = 0;
+		this.solves = 0;
+		this.damage = [];
+		this.wholeDamage = true;
+		this.collecting = false;
+		this.restyledForPaint = new Map();
+		this.restyledSinceLayout = new Set();
+		this.staleHosts = new Set();
+		this.selectionMoved = false;
+		this.stickyRows = new Map();
+		this.selectionRows = null;
 		this.positionedElements = new Set<Element>();
 		this.terminalReordersText = false;
 		this.rectTextIndices =
 			new WeakMap<object, Map<Node, TextFragmentEntry[]>>();
 		this.boxes = new WeakMap<Node, Box>();
 		this.mathBoxes = new WeakMap<Element, MathBox>();
+		this.laidOutMath = false;
 		this.derivedContainers = new WeakSet<Element>();
 		this.anonymousBoxes = new Map<LayoutNode, Box>();
 		this.dirtyRunContainers = new Set<Element>();
@@ -5319,9 +6008,12 @@ export class Layout {
 		this.touched = new Set<Node>();
 		this.measureNodes = new Set<LayoutNode>();
 
+		// The initial containing block is a formatting context of its own, so
+		// the root element's margins stay inside it rather than escaping to
+		// nothing.
 		const root = new LayoutNode();
-		root.style.flexDirection = "column";
-		root.style.alignItems = "stretch";
+		root.style.displayType = "block";
+		root.style.blockFormattingContext = true;
 		root.style.width = toValue(width);
 		root.style.height = toValue(height);
 		this.initialBlock = root;
@@ -5339,23 +6031,6 @@ export class Layout {
 		return this.geometryMoved;
 	}
 
-	adoptTerminalReordering(): void {
-		if (this.terminalReordersText) {
-			this.invalidate();
-			return;
-		}
-		this.terminalReordersText = true;
-		// Every measured line was built for the other contract.
-		this.invalidateTextMeasurement();
-	}
-
-	invalidateTextMeasurement(): void {
-		this.invalidate();
-		for (const layoutNode of this.measureNodes) {
-			layoutNode.invalidate();
-		}
-	}
-
 	// The engine keeps no copy of the size. The root it sizes here is the
 	// copy, and the document holds the one everything else reads.
 	resize(width: number, height: number): void {
@@ -5372,10 +6047,6 @@ export class Layout {
 		this.performLayout();
 	}
 
-	framePainted(): void {
-		this.geometryMoved = false;
-	}
-
 	performLayout(): void {
 		this.pass++;
 		// Built on the first pass, not at construction. The engine is
@@ -5386,6 +6057,7 @@ export class Layout {
 		// The cascade has finished for this frame, so the boxes it unsettled
 		// can be resolved against the current styles.
 		applyRestyles(this);
+		flushStaleHosts(this);
 		// Every mutation path dirties the tree on its way in, so a clean tree
 		// cannot be hiding a disconnection, and even the pruning sweep below is
 		// not worth paying.
@@ -5456,6 +6128,10 @@ export class Layout {
 			}
 		}
 
+		// The boxes added above may have joined a box's own formatting
+		// context.
+		flushStaleHosts(this);
+
 		// A clean root means the previous layout is still exact. Recomputing
 		// would be a full-tree relayout per frame for an animation repainting
 		// one span.
@@ -5468,7 +6144,31 @@ export class Layout {
 		// viewport units against it.
 		const root = this.initialBlock;
 		root.performLayout(root.style.width.value, root.style.height.value);
-		computePaintExtents(this, root, 0);
+		// A context that went stale while the solve ran and was not laid out
+		// after, as one whose box's measure was already answered, is laid out
+		// now. One its own measure rebuilt is laid out already.
+		for (let pass = 0; pass < 2 && this.staleHosts.size > 0; pass++) {
+			const hosts = [...this.staleHosts];
+			this.staleHosts.clear();
+			let again = false;
+			for (const host of hosts) {
+				const context = this.boxes.get(host)?.independentFormattingContext;
+				if (host.isConnected && context?.stale) {
+					invalidateHost(this, host);
+					again = true;
+				}
+			}
+			if (!again) {
+				break;
+			}
+			root.performLayout(root.style.width.value, root.style.height.value);
+		}
+		this.staleHosts.clear();
+		this.collecting = !this.wholeDamage;
+		computePaintExtents(this, root, 0, 0);
+		damageShiftedStickyBoxes(this);
+		this.collecting = false;
+		this.solves++;
 	}
 
 	dispose(): void {
@@ -5485,83 +6185,13 @@ export class Layout {
 		this.dirtyRunContainers = new Set();
 	}
 
-	// Membership gates. A positioned inline run member owns no box of its
-	// own, and no layer would ever paint it, so it stays with its run.
-	hoistedToLayer(element: Element): boolean {
-		return isPositioned(element) && this.positionedElements.has(element);
-	}
-
-	// The children whose paint extent could intersect rows [top, bottom),
-	// found by binary search. Culling a long list cost O(total children)
-	// per frame instead of O(visible). Null when the search cannot be
-	// trusted (children[] not sorted by extent top), in which case callers
-	// walk every child.
-	getVisibleChildren(
-		element: Element,
-		top: number,
-		bottom: number,
-	): Node[] | null {
-		const layoutNode = this.nodeMap.get(element);
-		if (
-			!layoutNode ||
-			// A measure-function leaf never decomposes into layout children, so
-			// empty children[] means "not decomposed," not "nothing to paint."
-			layoutNode.measure !== null ||
-			extents.get(layoutNode)?.unstackedChildren !== 0 ||
-			layoutNode.style.displayType !== "block" ||
-			// Cheap proxy for "every DOM child has exactly one children[]
-			// entry". A run member owns no layout node, and a pseudo-element is a
-			// box-tree child with no childNodes entry. Uncounted, an element
-			// whose one child is text and whose ::before heads the run collides
-			// at one and one, and the fast path paints the pseudo alone.
-			element.childNodes.length + pseudoElementCount(element) !==
-			layoutNode.children.length ||
-			// A host's childNodes are its LIGHT children, unrelated to the
-			// composed ones the layout tree holds. The counts collide by
-			// accident. Hosts always take the walker.
-			getShadowRoot(element) !== null ||
-			// A broken inline's boxes are children[] entries whose DOM node
-			// lives a level DOWN. `<span>a<div/><span>c</span></span>d<input>`
-			// collides at three and three, and the fast path dropped the text
-			// and the input after the fragments.
-			this.boxes.get(element)?.holdsFragments === true
-		) {
+	gridTracks(element: Element, rows: boolean): number[] | null {
+		const layoutNode = getContainerLayoutNode(this, element);
+		if (!layoutNode) {
 			return null;
 		}
-
-		const children = layoutNode.children;
-		let lo = 0;
-		let hi = children.length;
-		while (lo < hi) {
-			const mid = (lo + hi) >>> 1;
-			if (extents.get(children[mid])!.bottom <= top) {
-				lo = mid + 1;
-			} else {
-				hi = mid;
-			}
-		}
-
-		const result: Node[] = [];
-		for (let i = lo; i < children.length; i++) {
-			const child = children[i];
-			if (extents.get(child)!.top >= bottom) {
-				break;
-			}
-			const domNode = child.owner as Node | undefined;
-			if (domNode) {
-				result.push(domNode);
-			}
-		}
-		return result;
-	}
-
-	gridTracks(element: Element, rows: boolean): number[] | null {
-		const layoutNode = getContainerLayoutNode(this, element);
-		if (!layoutNode) {
-			return null;
-		}
-		return layoutNode.getComputedGridTracks(rows)?.sizes ?? null;
-	}
+		return getComputedGridTracks(layoutNode, rows)?.sizes ?? null;
+	}
 
 	// The root box's height extended to cover top-layer boxes, which
 	// contribute nothing to the flow's height. A picker opening at the
@@ -5592,56 +6222,6 @@ export class Layout {
 		return height;
 	}
 
-	/** The cells a <math> element paints, laid out if no pass has yet. */
-	getMathBox(element: Element): MathBox {
-		return this.mathBoxes.get(element) ?? measureMath(this, element);
-	}
-
-	// Where a <math> element's cells start, in document coordinates: its
-	// content box, with the cells placed in it by text-align.
-	getMathOrigin(element: Element): {x: number; y: number} | null {
-		const rect = this.getRect(element);
-		if (rect === null) {
-			return null;
-		}
-		const box = this.getMathBox(element);
-		const model = getBoxModel(element);
-		const contentWidth =
-			Math.round(rect.width) -
-			model.borderLeftWidth -
-			model.borderRightWidth -
-			model.paddingLeft -
-			model.paddingRight;
-		return {
-			x:
-				Math.round(rect.left) +
-				model.borderLeftWidth +
-				model.paddingLeft +
-				getMathAlignOffset(
-					contentWidth - box.width,
-					getComputedValue(element, "text-align"),
-				),
-			y: Math.round(rect.top) + model.borderTopWidth + model.paddingTop,
-		};
-	}
-
-	// The rectangles of the cells inside a <math> element that render a
-	// node's text, in document coordinates.
-	getMathNodeRects(math: Element, node: Node): DOMRect[] {
-		const origin = this.getMathOrigin(math);
-		if (origin === null) {
-			return [];
-		}
-		return getMathCellRects(this.getMathBox(math), node).map((rect) =>
-			new this.domRect(
-				origin.x + rect.x,
-				origin.y + rect.y,
-				rect.width,
-				rect.height,
-			),
-		);
-	}
-
 	contentRect(element: Element): DOMRect | null {
 		const rect = this.getRect(element);
 		if (!rect) {
@@ -5661,6 +6241,18 @@ export class Layout {
 			top = border.top + padding.top;
 			right = border.right + padding.right;
 			bottom = border.bottom + padding.bottom;
+			// Edges its measure counts in its size are not on its node.
+			const masked = getMaskedEdges(element);
+			if (masked.length > 0) {
+				const box = getBoxModel(element);
+				if (masked.includes("top")) {
+					top = (box.borderTopWidth || 0) + (box.paddingTop || 0);
+					bottom = (box.borderBottomWidth || 0) + (box.paddingBottom || 0);
+				} else {
+					left = (box.borderLeftWidth || 0) + (box.paddingLeft || 0);
+					right = (box.borderRightWidth || 0) + (box.paddingRight || 0);
+				}
+			}
 		} else {
 			const box = getBoxModel(element);
 			left = (box.borderLeftWidth || 0) + (box.paddingLeft || 0);
@@ -5851,15 +6443,6 @@ export class Layout {
 		);
 	}
 
-	// Paint extents are cached in unscrolled layout rows, so viewport culling
-	// of a scrolled subtree compares against the viewport moved by this amount
-	// rather than recomputing extents per scroll.
-	scrolledAncestorRows(element: Element): number {
-		const layoutNode =
-			this.nodeMap.get(element) ?? runLayoutNode(this, element);
-		return layoutNode ? -getScrollShift(this, layoutNode).y : 0;
-	}
-
 	getRect(element: Element): DOMRect | null {
 		const display = getLayoutDisplay(element);
 
@@ -5870,9 +6453,9 @@ export class Layout {
 		}
 
 		// An element inside <math> covers the cells that render its text.
-		const math = getEnclosingMath(element);
+		const math = getEnclosingMath(this, element);
 		if (math !== null && math !== element) {
-			const rects = this.getMathNodeRects(math, element);
+			const rects = getMathNodeRects(this, math, element);
 			return rects.length === 0 ? null : unionRects(this, rects);
 		}
 
@@ -5896,11 +6479,9 @@ export class Layout {
 			}
 
 			// An empty inline gets a zero-width rect at its position, as in a
-			// browser. The block fallback below returns the layout node's
-			// width, which for an empty inline is its containing block's, and
-			// `<div style="width:30ch"><span></span></div>` measured the span
-			// at 30 columns. inline-block keeps the fallback, since its node IS
-			// its box.
+			// browser. The block fallback below would give it the layout node's
+			// width, which for an empty inline is its containing block's.
+			// inline-block keeps the fallback, since its node IS its box.
 			if (display === "inline") {
 				const elementLayoutNode = runLayoutNode(this, element);
 				if (elementLayoutNode) {
@@ -5908,8 +6489,8 @@ export class Layout {
 					return new this.domRect(position.x, position.y, 0, 0);
 				}
 				// An empty inline that does not open its run still has a place:
-				// the cursor the line had reached. Null put the `span` in
-				// `<div>ab<span></span>cd</div>` at 0 rather than 2.
+				// the cursor the line had reached, so the span in
+				// `<div>ab<span></span>cd</div>` sits at 2.
 				const run = getBox(this, element);
 				if (run?.layoutNode) {
 					const origin = getAbsolutePosition(this, run.layoutNode);
@@ -5938,15 +6519,15 @@ export class Layout {
 		return new this.domRect(
 			x,
 			y,
-			layoutNode.getComputedWidth(),
-			layoutNode.getComputedHeight(),
+			getComputedWidth(layoutNode),
+			getComputedHeight(layoutNode),
 		);
 	}
 
 	getRects(node: Node): DOMRect[] {
-		const math = getEnclosingMath(node);
+		const math = getEnclosingMath(this, node);
 		if (math !== null && math !== node) {
-			return this.getMathNodeRects(math, node);
+			return getMathNodeRects(this, math, node);
 		}
 		// Everything but true inline content is an atomic box with one rect,
 		// inline-block included. An <input> has no text runs at all, and
@@ -5969,7 +6550,7 @@ export class Layout {
 	// line.
 	getRangeRects(range: Range): DOMRect[] {
 		if (!range.collapsed) {
-			return this.getRangeSpans(range).map((run) => run.rect);
+			return getRangeSpans(this, range).map((run) => run.rect);
 		}
 		const caret = this.getCaretRect(range.startContainer, range.startOffset);
 		return caret === null ? [] : [caret];
@@ -6007,25 +6588,6 @@ export class Layout {
 			: getCaretRectInFragment(this, point[0], point[1]);
 	}
 
-	// The text lets a caller repaint the run in the selection style.
-	// getRangeRects is this without the text.
-	getRangeSpans(range: Range): Array<{rect: DOMRect; text: string}> {
-		if (range.collapsed) {
-			return [];
-		}
-		const runs: Array<{rect: DOMRect; text: string}> = [];
-		for (const textNode of rangeTextNodes(this, range)) {
-			const from = range.startContainer === textNode ? range.startOffset : 0;
-			const to = range.endContainer === textNode
-				? range.endOffset
-				: textNode.data.length;
-			if (to > from) {
-				runs.push(...getSelectionSpans(this, textNode, from, to));
-			}
-		}
-		return runs;
-	}
-
 	// One text node's share of the work above. A highlight narrows its
 	// ranges to the node it is painting over, and has no live range to
 	// hand getRangeSpans.
@@ -6037,48 +6599,16 @@ export class Layout {
 		return to > from ? getSelectionSpans(this, textNode, from, to) : [];
 	}
 
-	// The offsets the cells above actually cover, since a cell holds a
-	// whole cluster.
-	snapToClusters(
-		textNode: Text,
-		from: number,
-		to: number,
-	): {from: number; to: number} {
-		let start = from;
-		let end = to;
-		const whiteSpace = getWhiteSpace(textNode);
-		for (const fragment of this.lineFragments(textNode)) {
-			const {text, offsets} = renderWhiteSpaceOffsets(
-				textNode.data.slice(fragment.startOffset, fragment.endOffset),
-				whiteSpace,
-			);
-			const clusterStarts = getClusterStarts(text);
-			for (let i = 0; i < text.length; i++) {
-				const dataOffset = fragment.startOffset + getDataOffset(offsets, i);
-				if (dataOffset < from || dataOffset >= to) {
-					continue;
-				}
-				const before = clusterStarts.at(i);
-				start = Math.min(
-					start,
-					fragment.startOffset + getDataOffset(offsets, before),
-				);
-				const after = clusterStarts.after(i + 1);
-				end = Math.max(
-					end,
-					after < text.length
-						? fragment.startOffset + getDataOffset(offsets, after)
-						: fragment.endOffset,
-				);
-			}
-		}
-		return {from: start, to: end};
-	}
-
 	// The text a text node's boxes show, in logical order, as innerText
 	// reads it: white space processed, case transformed, and a preserved
 	// newline between two lines kept. A soft wrap is no break, and the
 	// space it swallowed is a space again.
+	// The one-line text of a <math> element, for innerText. The DOM asks
+	// here rather than importing the MathML layout, which reads the DOM.
+	getMathText(element: Element): string {
+		return linearizeMath(element);
+	}
+
 	getRenderedText(textNode: Text): string {
 		const data = textNode.data;
 		const whiteSpace = getWhiteSpace(textNode);
@@ -6184,12 +6714,12 @@ export class Layout {
 		clampToNearestLine = false,
 	): {node: Text; offset: number} | null {
 		// Math has no text runs. Its cells know what text they render.
-		const math = getEnclosingMath(root);
+		const math = getEnclosingMath(this, root);
 		if (math !== null) {
-			const origin = this.getMathOrigin(math);
+			const origin = getMathOrigin(this, math);
 			return origin === null
 				? null
-				: findMathPosition(this.getMathBox(math), x - origin.x, y - origin.y);
+				: findMathPosition(getMathBox(this, math), x - origin.x, y - origin.y);
 		}
 		let best: {node: Text; offset: number; distance: number} | null = null;
 		let nearest: {node: Text; fragment: LineFragment; rows: number} | null =
@@ -6240,105 +6770,6 @@ export class Layout {
 		return {node: nearest.node, offset: found.offset};
 	}
 
-	// Positioned elements under their nearest stacking-context ancestor,
-	// bucketed into the CSS paint layers: negative-z, z:auto/0, positive-z.
-	// Walks only the positioned registry, so O(positioned x depth) per
-	// frame, never O(document). The painter walks these forward and
-	// hit-testing in reverse.
-	collectStackingLayers(
-		topLayer: Set<Element>,
-	): Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}> {
-		const layers = new Map<
-			Element,
-			{neg: Element[]; zero: Element[]; pos: Element[]}
-		>();
-		// A stray frame can fire after the window is torn down.
-		const body = this.window.document?.body;
-		if (!body) {
-			return layers;
-		}
-		for (const element of this.positionedElements) {
-			if (!element.isConnected || element === body) {
-				continue;
-			}
-			// Painted above everything.
-			if (topLayer.has(element)) {
-				continue;
-			}
-			// The registry is a superset. Re-check before trusting membership.
-			if (!isPositioned(element)) {
-				continue;
-			}
-			let root: Element = body;
-			for (
-				let ancestor = flatParentElement(element);
-				ancestor;
-				ancestor = flatParentElement(ancestor)
-			) {
-				if (isStackingContext(ancestor)) {
-					root = ancestor;
-					break;
-				}
-			}
-			let bucket = layers.get(root);
-			if (!bucket) {
-				bucket = {neg: [], zero: [], pos: []};
-				layers.set(root, bucket);
-			}
-			const z = getZIndexValue(element);
-			if (z === "auto" || z === 0) {
-				bucket.zero.push(element);
-			} else if (z < 0) {
-				bucket.neg.push(element);
-			} else {
-				bucket.pos.push(element);
-			}
-		}
-		// 4: b follows a.
-		const treeOrder = (a: Element, b: Element) =>
-			a.compareDocumentPosition(b) & 4 ? -1 : 1;
-		for (const bucket of layers.values()) {
-			const byZ = (a: Element, b: Element) => {
-				const za = getZIndexValue(a) as number;
-				const zb = getZIndexValue(b) as number;
-				return za !== zb ? za - zb : treeOrder(a, b);
-			};
-			bucket.neg.sort(byZ);
-			bucket.zero.sort(treeOrder);
-			bucket.pos.sort(byZ);
-		}
-		return layers;
-	}
-
-	/**
-	 * The viewport rows covered by fixed boxes as wide as the viewport, as
-	 * [top, bottom) pairs: a header or a status bar the document scrolls
-	 * under.
-	 */
-	fullWidthFixedRows(cols: number): Array<[number, number]> {
-		const rows: Array<[number, number]> = [];
-		for (const element of this.positionedElements) {
-			if (
-				!element.isConnected ||
-				getPosition(element) !== "fixed" ||
-				!this.isInFixedSpace(element)
-			) {
-				continue;
-			}
-			const rect = this.getRect(element);
-			if (
-				rect === null ||
-				rect.height <= 0 ||
-				Math.round(rect.left) > 0 ||
-				Math.round(rect.left + rect.width) < cols
-			) {
-				continue;
-			}
-			rows.push([Math.round(rect.top), Math.round(rect.top + rect.height)]);
-		}
-		return rows;
-	}
-
 	// The inverse of the paint order collectStackingLayers produces. A
 	// positioned box is probed at its CONTEXT, not through its parents, so a
 	// box hanging outside its parent's rect is still clickable.
@@ -6349,7 +6780,7 @@ export class Layout {
 		topLayer: Set<Element>,
 		documentScrollTop: number,
 	): Element | null {
-		const layers = this.collectStackingLayers(topLayer);
+		const layers = collectStackingLayers(this, topLayer);
 		const document = this.window.document;
 		if (!document?.body) {
 			return null;
@@ -6385,13 +6816,16 @@ export class Layout {
 	// The observer drain calls this once per mutation batch. The cascade calls
 	// it for style changes no record describes. Every entry that moves geometry
 	// announces it here, and the pass itself moves nothing unannounced.
-	invalidateFrame(): void {
+	invalidateFrame(whole = true): void {
 		const document = this.rootElement.ownerDocument;
 		if (document === null) {
 			return;
 		}
 		usedValuesChanged(document);
 		this.geometryMoved = true;
+		if (whole) {
+			this.wholeDamage = true;
+		}
 	}
 
 	// A node re-enumerates its whole subtree, because run membership may
@@ -6437,10 +6871,28 @@ export class Layout {
 
 	// A chain reaching a fixed box puts the geometry in viewport space
 	// rather than document space.
+	// Read from the boxes, whose position type is a field, rather than
+	// from every ancestor's computed style. A box laid out in an
+	// inline-block's own context has no parent past it, and the elements
+	// answer from there.
 	isInFixedSpace(element: Element): boolean {
-		for (
-			let el: Element | null = element; el; el = flatParentElement(el)
-		) {
+		let box: Element | null = element;
+		while (box !== null && !this.nodeMap.has(box)) {
+			box = flatParentElement(box);
+		}
+		let node = box === null ? undefined : this.nodeMap.get(box);
+		for (; node !== undefined; node = node.parent ?? undefined) {
+			if (node.style.positionType === "fixed") {
+				return true;
+			}
+			if (node.parent === null && node !== this.initialBlock) {
+				break;
+			}
+		}
+		if (node === undefined) {
+			return false;
+		}
+		for (let el: Element | null = element; el; el = flatParentElement(el)) {
 			if (getPosition(el) === "fixed") {
 				return true;
 			}
@@ -6448,33 +6900,939 @@ export class Layout {
 		return false;
 	}
 
-	/** The layout node an element's principal box was laid out as, if any. */
-	getLayoutNode(element: Element): LayoutNode | null {
-		return this.nodeMap.get(element) ?? null;
+	/** The principal box of an element, or null before its container derived one. */
+	getBox(element: Element): Box | null {
+		return this.boxes.get(element) ?? null;
 	}
+}
 
-	/** The rows a node's subtree can paint, in document rows. */
-	paintExtent(node: LayoutNode): Extent | undefined {
-		return extents.get(node);
+export function adoptTerminalReordering(layout: Layout): void {
+	if (layout.terminalReordersText) {
+		layout.invalidate();
+		return;
 	}
+	layout.terminalReordersText = true;
+	// Every measured line was built for the other contract.
+	invalidateTextMeasurement(layout);
+}
 
-	/**
-	 * The box whose lines a layout node lays out, when it is a run's. Null
-	 * for a principal box's node.
-	 */
-	getRun(node: LayoutNode): Box | null {
-		const owner = node.owner as Node | null;
-		if (owner === null) {
+export function invalidateTextMeasurement(layout: Layout): void {
+	layout.invalidate();
+	for (const layoutNode of layout.measureNodes) {
+		layoutNode.invalidate();
+	}
+}
+
+// A sticky box's extent holds its descendants', so its rows before and
+// after cover everything its shift moved. One an inline-block lays out
+// moves only within the box it flows in, inside the inline-block, so the
+// inline-block's rows cover it.
+function damageShiftedStickyBoxes(layout: Layout): void {
+	const before = layout.stickyRows;
+	const after = new Map<LayoutNode, StickyRows>();
+	for (const element of layout.positionedElements) {
+		const node = layout.nodeMap.get(element);
+		if (node?.style.positionType !== "sticky") {
+			continue;
+		}
+		const rows = getStickyRows(layout, node);
+		if (rows === "unknown") {
+			layout.wholeDamage = true;
+			layout.collecting = false;
+			continue;
+		}
+		if (rows === null) {
+			continue;
+		}
+		after.set(node, rows);
+		const old = before.get(node);
+		if (
+			old === undefined ||
+			old.top !== rows.top ||
+			old.bottom !== rows.bottom ||
+			old.shift !== rows.shift
+		) {
+			pushDamage(layout, rows.top, rows.bottom, rows.fixed);
+			if (old !== undefined) {
+				pushDamage(layout, old.top, old.bottom, old.fixed);
+			}
+		}
+		before.delete(node);
+	}
+	for (const old of before.values()) {
+		pushDamage(layout, old.top, old.bottom, old.fixed);
+	}
+	layout.stickyRows = after;
+}
+
+interface StickyRows {
+	top: number;
+	bottom: number;
+	fixed: boolean;
+	shift: number;
+}
+
+// The document rows a sticky box paints on, and its shift. Null for one
+// that shows nowhere, and "unknown" for one whose rows no extent in the
+// document's rows covers.
+function getStickyRows(
+	layout: Layout,
+	node: LayoutNode,
+): StickyRows | null | "unknown" {
+	let root: LayoutNode = node;
+	for (; root.parent !== null; root = root.parent) {
+		if (root.style.displayType === "none") {
+			return null;
+		}
+	}
+	const shift = getStickyShift(layout, node).y;
+	if (root === layout.initialBlock) {
+		const extent = paintExtent(node, layout.initialBlock);
+		if (extent === undefined) {
 			return null;
 		}
-		const box = getBox(this, owner);
-		return box !== null && box.layoutNode === node ? box : null;
+		const moved = getScrollShift(layout, node, false).y;
+		return {
+			top: extent.top + moved,
+			bottom: extent.bottom + moved,
+			fixed: isInFixedSpace(node),
+			shift,
+		};
+	}
+	const host = contextHosts.get(root);
+	if (host === undefined || !host.isConnected) {
+		return null;
+	}
+	const hostNode =
+		getLayoutNode(layout, host) ?? getBox(layout, host)?.layoutNode;
+	const extent = hostNode
+		? paintExtent(hostNode, layout.initialBlock)
+		: undefined;
+	if (!hostNode || extent === undefined) {
+		return "unknown";
+	}
+	const moved = getScrollShift(layout, hostNode, false).y;
+	return {
+		top: extent.top + moved,
+		bottom: extent.bottom + moved,
+		fixed: isInFixedSpace(hostNode),
+		shift,
+	};
+}
+
+function isInFixedSpace(node: LayoutNode): boolean {
+	for (let current: LayoutNode | null = node;
+		current;
+		current = current.parent) {
+		if (current.style.positionType === "fixed") {
+			return true;
+		}
 	}
+	return false;
+}
 
-	/** The principal box of an element, or null before its container derived one. */
-	getBox(element: Element): Box | null {
-		return this.boxes.get(element) ?? null;
+export function framePainted(layout: Layout): void {
+	layout.geometryMoved = false;
+	layout.damage = [];
+	layout.wholeDamage = false;
+	layout.restyledForPaint.clear();
+	layout.selectionMoved = false;
+}
+
+// Past this many moved boxes a frame repaints whole, which is cheaper
+// than merging them, and bounds what a document never painted keeps.
+const MAX_DAMAGE = 64;
+
+function addDamage(
+	layout: Layout,
+	node: LayoutNode,
+	top: number,
+	bottom: number,
+	fixed: boolean,
+): void {
+	const shift = getScrollShift(layout, node, false).y;
+	pushDamage(layout, top + shift, bottom + shift, fixed);
+}
+
+function pushDamage(
+	layout: Layout,
+	top: number,
+	bottom: number,
+	fixed: boolean,
+): void {
+	if (!layout.collecting || bottom <= top) {
+		return;
+	}
+	if (layout.damage.length >= MAX_DAMAGE) {
+		layout.wholeDamage = true;
+		layout.collecting = false;
+		layout.damage = [];
+		return;
 	}
+	layout.damage.push([top, bottom, fixed]);
+}
+
+function isSameLines(
+	node: LayoutNode,
+	a: BreakResult | undefined,
+	b: BreakResult | undefined,
+): boolean {
+	if (a === b) {
+		return true;
+	}
+	if (
+		a === undefined ||
+		b === undefined ||
+		a.lines.length !== b.lines.length ||
+		(a.containerWidth !== b.containerWidth && !isStartAligned(node))
+	) {
+		return false;
+	}
+	for (let index = 0; index < a.lines.length; index++) {
+		const x = a.lines[index];
+		const y = b.lines[index];
+		if (
+			x.y !== y.y ||
+			x.width !== y.width ||
+			x.height !== y.height ||
+			x.segments.length !== y.segments.length
+		) {
+			return false;
+		}
+		for (let at = 0; at < x.segments.length; at++) {
+			const p = x.segments[at];
+			const q = y.segments[at];
+			if (
+				!isSameLeaf(p.leaf, q.leaf) ||
+				p.x !== q.x ||
+				p.width !== q.width ||
+				p.processedText !== q.processedText ||
+				p.dataStart !== q.dataStart ||
+				p.dataEnd !== q.dataEnd ||
+				p.visualBase !== q.visualBase
+			) {
+				return false;
+			}
+		}
+	}
+	return true;
+}
+
+// Leaves are made again whenever a run breaks. An inline-block lays its
+// content out apart, so a line holding one never counts as the same.
+function isSameLeaf(a: Leaf, b: Leaf): boolean {
+	if (a.type !== b.type || a.node !== b.node || a.type === "inline-block") {
+		return false;
+	}
+	if (a.type === "edge") {
+		const edge = b as EdgeLeaf;
+		return a.side === edge.side &&
+			a.margin === edge.margin &&
+			a.border === edge.border &&
+			a.padding === edge.padding;
+	}
+	return true;
+}
+
+// Whether a box's lines start at its left edge whatever width they broke
+// against, so that width alone moves none of them.
+function isStartAligned(node: LayoutNode): boolean {
+	const owner = node.owner as Node | null;
+	const element = owner === null
+		? null
+		: nodeTypeOf(owner) === owner.ELEMENT_NODE
+		? (owner as Element)
+		: flatParentElement(owner);
+	if (element === null || getComputedValue(element, "direction") === "rtl") {
+		return false;
+	}
+	const align = CSSValues.getLineAlignment(
+		getComputedValue(element, "text-align"),
+	);
+	return align !== "center" &&
+		align !== "right" &&
+		align !== "end" &&
+		!getComputedValue(element, "text-indent").includes("%");
+}
+
+// Whether a box draws anything of its own that its size or place decides:
+// a fill, a border, an outline, a marker, a clip. One that draws nothing
+// changes no cell by moving, and what it holds reports its own moves.
+function paintsOwnBox(layout: Layout, node: LayoutNode): boolean {
+	const owner = node.owner as Node | null;
+	// A run paints its lines from its origin, whatever its size.
+	if (owner === null || getRun(layout, node) !== null) {
+		return false;
+	}
+	if (nodeTypeOf(owner) !== owner.ELEMENT_NODE) {
+		return false;
+	}
+	const element = owner as Element;
+	const style = node.style;
+	if (
+		style.clipsOverflow ||
+		style.border.top !== 0 ||
+		style.border.right !== 0 ||
+		style.border.bottom !== 0 ||
+		style.border.left !== 0 ||
+		(style.displayType !== "block" &&
+			style.displayType !== "flex" &&
+			style.displayType !== "grid") ||
+		isReplacedBox(element) ||
+		isMathRoot(element) ||
+		layout.getBox(element)?.fragments
+	) {
+		return true;
+	}
+	const fill = getComputedValue(element, "background-color");
+	return !(fill === "transparent" || fill === "rgba(0, 0, 0, 0)") ||
+		getComputedValue(element, "background-image") !== "none" ||
+		getComputedValue(element, "outline-style") !== "none" ||
+		getComputedValue(element, "box-shadow") !== "none" ||
+		getComputedValue(element, "display") === "list-item";
+}
+
+/**
+ * Checks each frame's layout against a solve from nothing, for tests:
+ * every box where a solve that forgot every cache would place it. Run at
+ * every frame, not every solve, since a change that wrongly asks for no
+ * solve leaves the last one standing. Set, a box placed elsewhere throws,
+ * naming the boxes.
+ */
+export const layoutCheck = {enabled: false, checked: 0};
+
+// Every box of the document's tree and of the formatting contexts boxes
+// in it lay out for themselves.
+function forEachLayoutNode(
+	layout: Layout,
+	visit: (node: LayoutNode) => void,
+): void {
+	const walk = (node: LayoutNode): void => {
+		visit(node);
+		for (const child of node.children) {
+			walk(child);
+		}
+		const owner = node.owner as Node | null;
+		if (owner !== null && nodeTypeOf(owner) === owner.ELEMENT_NODE) {
+			const context = layout.boxes.get(owner as Element)
+				?.independentFormattingContext;
+			if (context) {
+				walk(context);
+			}
+		}
+	};
+	walk(layout.initialBlock);
+}
+
+// The tree is one: every child names the node that holds it, no node is
+// held twice, and every node that hangs from another is reachable from
+// the root, so no box is laid out where nothing paints it. A box belongs
+// to a connected element that generates one.
+function checkTreeShape(layout: Layout): string[] {
+	const problems: string[] = [];
+	const seen = new Set<LayoutNode>();
+	const name = (node: LayoutNode): string => {
+		const owner = node.owner as Node | null;
+		return owner === null
+			? "anonymous"
+			: nodeTypeOf(owner) === owner.ELEMENT_NODE
+			? (owner as Element).localName +
+				((owner as Element).id ? `#${(owner as Element).id}` : "")
+			: "#text";
+	};
+	const visit = (node: LayoutNode): void => {
+		if (seen.has(node)) {
+			problems.push(`${name(node)} held twice`);
+		}
+		seen.add(node);
+		for (const child of node.children) {
+			if (child.parent !== node) {
+				problems.push(`${name(child)} names another parent`);
+			}
+			visit(child);
+		}
+	};
+	// The root, and the formatting context of every box that lays its own
+	// content out, which a run measures and no parent holds.
+	visit(layout.initialBlock);
+	const document = layout.rootElement.ownerDocument!;
+	for (const each of flatDescendants(document.documentElement!)) {
+		if (nodeTypeOf(each) !== each.ELEMENT_NODE) {
+			continue;
+		}
+		const context = layout.boxes.get(each as Element)
+			?.independentFormattingContext;
+		if (context && !seen.has(context)) {
+			visit(context);
+		}
+	}
+	for (const [domNode, node] of layout.nodeMap) {
+		if (node.parent !== null && !seen.has(node)) {
+			problems.push(`${name(node)} hangs where the root cannot reach`);
+		}
+		if (node.parent === null && !seen.has(node) && flatIsConnected(domNode)) {
+			problems.push(`${name(node)} is held by no box`);
+		}
+		if (
+			seen.has(node) &&
+			nodeTypeOf(domNode) === domNode.ELEMENT_NODE &&
+			isOutOfFlow(domNode) &&
+			getPosition(domNode as Element) !== "fixed"
+		) {
+			const containingBlock = getContainingBlockLayoutNode(
+				layout,
+				domNode as Element,
+			);
+			if (
+				containingBlock !== null &&
+				!isReachableFrom(node.parent, containingBlock)
+			) {
+				problems.push(
+					`${name(node)} hangs out of its containing block's reach`,
+				);
+			}
+		}
+		if (
+			seen.has(node) &&
+			nodeTypeOf(domNode) === domNode.ELEMENT_NODE &&
+			isDisplayContents(domNode as Element)
+		) {
+			problems.push(`${name(node)} has a box and generates none`);
+		}
+		if (seen.has(node) && !flatIsConnected(domNode)) {
+			problems.push(`${name(node)} has a box and is not in the document`);
+		}
+	}
+	return problems;
+}
+
+export function checkLayoutFromScratch(layout: Layout): void {
+	layoutCheck.checked++;
+	const shape = checkTreeShape(layout);
+	if (shape.length > 0) {
+		throw new Error(
+			`The layout tree is malformed: ${shape.slice(0, 8).join("; ")}`,
+		);
+	}
+	const document = layout.window.document;
+	const elements = [...document.querySelectorAll("*")] as Element[];
+	const describe = (): string[] => elements.map((element) => {
+		const rect = layout.getRect(element);
+		return rect === null
+			? "none"
+			: `${rect.x},${rect.y} ${rect.width}x${rect.height}`;
+	});
+	const before = describe();
+	// The frame's own damage stands: the check repaints nothing.
+	const damage = [...layout.damage];
+	const wholeDamage = layout.wholeDamage;
+	const geometryMoved = layout.geometryMoved;
+	// Every box derived again and styled again, then solved with nothing
+	// remembered.
+	layout.invalidate();
+	forEachLayoutNode(layout, forgetLayout);
+	layout.performLayout();
+	layout.damage = damage;
+	layout.wholeDamage = wholeDamage;
+	layout.geometryMoved = geometryMoved;
+	const after = describe();
+	const differences: string[] = [];
+	for (let index = 0; index < elements.length; index++) {
+		if (before[index] !== after[index]) {
+			const element = elements[index];
+			differences.push(
+				`${element.localName}${element.id ? `#${element.id}` : ""} ${
+					before[index]
+				}, from nothing ${after[index]}`,
+			);
+		}
+	}
+	if (differences.length > 0) {
+		throw new Error(
+			`A layout differs from one from nothing at ${
+				differences.slice(0, 8).join("; ")
+			}`,
+		);
+	}
+}
+
+// A box whose own formatting context went stale lays it out again in its
+// measure, which is what is invalidated.
+function flushStaleHosts(layout: Layout): void {
+	for (const host of layout.staleHosts) {
+		invalidateHost(layout, host);
+	}
+	layout.staleHosts.clear();
+}
+
+// The box's own node when it has one, a block in a flex or grid
+// container, and the run that measures it when it sits on a line.
+function invalidateHost(layout: Layout, host: Element): void {
+	if (!host.isConnected) {
+		return;
+	}
+	layout.nodeMap.get(host)?.invalidate();
+	invalidateEnclosingMeasure(layout, host);
+}
+
+function isInFixedBox(node: LayoutNode): boolean {
+	for (let at: LayoutNode | null = node; at !== null; at = at.parent) {
+		if (at.style.positionType === "fixed") {
+			return true;
+		}
+	}
+	return false;
+}
+
+// The rows from the first end of the selection to the last, or null
+// when an end has no caret position to measure.
+function getSelectionRows(layout: Layout): [number, number] | null {
+	const selection = layout.window.document.getSelection();
+	if (selection === null || selection.rangeCount === 0) {
+		return null;
+	}
+	let top = Infinity;
+	let bottom = -Infinity;
+	for (let index = 0; index < selection.rangeCount; index++) {
+		const range = selection.getRangeAt(index);
+		for (const [node, offset] of [
+			[range.startContainer, range.startOffset],
+			[range.endContainer, range.endOffset],
+		] as const) {
+			const rect = layout.getCaretRect(node, offset);
+			if (rect === null) {
+				return null;
+			}
+			top = Math.min(top, Math.floor(rect.y));
+			bottom = Math.max(bottom, Math.ceil(rect.y + Math.max(rect.height, 1)));
+		}
+	}
+	return [top, bottom];
+}
+
+/**
+ * The buffer rows the next frame must repaint, merged into bands, or
+ * undefined when every row must. offset turns document rows into buffer
+ * rows, as the frame's viewport offset does.
+ */
+export function takeDamageBands(
+	layout: Layout,
+	offset: number,
+	paintsAsBefore: (element: Element, key: object) => boolean | "whole",
+): Array<[number, number]> | undefined {
+	const selectionRows = getSelectionRows(layout);
+	const previousSelection = layout.selectionRows;
+	layout.selectionRows = selectionRows;
+	if (layout.wholeDamage) {
+		return undefined;
+	}
+	const rows: Array<[number, number]> = [];
+	const add = (top: number, bottom: number, fixed: boolean): void => {
+		rows.push(fixed ? [top, bottom] : [top + offset, bottom + offset]);
+	};
+	for (const [top, bottom, fixed] of layout.damage) {
+		add(top, bottom, fixed);
+	}
+	for (const [element, key] of layout.restyledForPaint) {
+		if (!element.isConnected) {
+			continue;
+		}
+		const same = key === null ? false : paintsAsBefore(element, key);
+		if (same === "whole") {
+			return undefined;
+		}
+		if (same) {
+			continue;
+		}
+		let box: Element | null = element;
+		while (box !== null && !layout.nodeMap.has(box)) {
+			box = flatParentElement(box);
+		}
+		let node = box === null ? undefined : layout.nodeMap.get(box);
+		// A box an inline-block lays out in its own context has rows counted
+		// from that context. The inline-block's own rows hold them.
+		while (
+			box !== null &&
+			node !== undefined &&
+			getExtentFrame(node) !== layout.initialBlock
+		) {
+			box = getEnclosingIndependentFormattingContext(
+				layout,
+				getBoxParentElement(box),
+			);
+			node = box === null ? undefined : layout.nodeMap.get(box);
+		}
+		const extent = node === undefined
+			? undefined
+			: paintExtent(node, layout.initialBlock);
+		if (node === undefined || extent === undefined) {
+			return undefined;
+		}
+		const shift = getScrollShift(layout, node, false).y;
+		add(extent.top + shift, extent.bottom + shift, isInFixedBox(node));
+	}
+	if (layout.selectionMoved) {
+		if (selectionRows === null || previousSelection === null) {
+			return undefined;
+		}
+		for (const [top, bottom] of [previousSelection, selectionRows]) {
+			add(top, bottom, false);
+			add(top, bottom, true);
+		}
+	}
+	// A row beside a change can change too: a border there joins the
+	// changed one, and an outline reaches past its box.
+	rows.sort((a, b) => a[0] - b[0]);
+	const bands: Array<[number, number]> = [];
+	for (const [top, bottom] of rows) {
+		const from = top - 1;
+		const to = bottom + 1;
+		const last = bands.at(-1);
+		if (last !== undefined && from <= last[1]) {
+			last[1] = Math.max(last[1], to);
+		} else {
+			bands.push([from, to]);
+		}
+	}
+	return bands;
+}
+
+// Membership gates. A positioned inline run member owns no box of its
+// own, and no layer would ever paint it, so it stays with its run.
+export function hoistedToLayer(layout: Layout, element: Element): boolean {
+	return isPositioned(element) && layout.positionedElements.has(element);
+}
+
+// The children whose paint extent could intersect rows [top, bottom),
+// found by binary search. Culling a long list cost O(total children)
+// per frame instead of O(visible). Null when the search cannot be
+// trusted (children[] not sorted by extent top), in which case callers
+// walk every child.
+function getVisibleChildren(
+	layout: Layout,
+	element: Element,
+	top: number,
+	bottom: number,
+): Node[] | null {
+	const layoutNode = layout.nodeMap.get(element);
+	if (
+		!layoutNode ||
+		// A measure-function leaf never decomposes into layout children, so
+		// empty children[] means "not decomposed," not "nothing to paint."
+		layoutNode.measure !== null ||
+		paintExtent(layoutNode, layout.initialBlock)?.unstackedChildren !== 0 ||
+		layoutNode.style.displayType !== "block" ||
+		// Cheap proxy for "every DOM child has exactly one children[]
+		// entry". A run member owns no layout node, and a pseudo-element is a
+		// box-tree child with no childNodes entry. Uncounted, an element
+		// whose one child is text and whose ::before heads the run collides
+		// at one and one, and the fast path paints the pseudo alone.
+		element.childNodes.length + pseudoElementCount(element) !==
+		layoutNode.children.length ||
+		// A host's childNodes are its LIGHT children, unrelated to the
+		// composed ones the layout tree holds. The counts collide by
+		// accident. Hosts always take the walker.
+		getShadowRoot(element) !== null ||
+		// A broken inline's boxes are children[] entries whose DOM node
+		// lives a level DOWN. `<span>a<div/><span>c</span></span>d<input>`
+		// collides at three and three, and the fast path dropped the text
+		// and the input after the fragments.
+		layout.boxes.get(element)?.holdsFragments === true
+	) {
+		return null;
+	}
+
+	const children = layoutNode.children;
+	let lo = 0;
+	let hi = children.length;
+	while (lo < hi) {
+		const mid = (lo + hi) >>> 1;
+		if (extents.get(children[mid])!.bottom <= top) {
+			lo = mid + 1;
+		} else {
+			hi = mid;
+		}
+	}
+
+	const result: Node[] = [];
+	for (let i = lo; i < children.length; i++) {
+		const child = children[i];
+		if (extents.get(child)!.top >= bottom) {
+			break;
+		}
+		const domNode = child.owner as Node | undefined;
+		if (domNode) {
+			result.push(domNode);
+		}
+	}
+	return result;
+}
+
+/** The cells a <math> element paints, laid out if no pass has yet. */
+export function getMathBox(layout: Layout, element: Element): MathBox {
+	return layout.mathBoxes.get(element) ?? measureMath(layout, element);
+}
+
+// Where a <math> element's cells start, in document coordinates: its
+// content box, with the cells placed in it by text-align.
+function getMathOrigin(
+	layout: Layout,
+	element: Element,
+): {x: number; y: number} | null {
+	const rect = layout.getRect(element);
+	if (rect === null) {
+		return null;
+	}
+	const box = getMathBox(layout, element);
+	const model = getBoxModel(element);
+	const contentWidth =
+		Math.round(rect.width) -
+		model.borderLeftWidth -
+		model.borderRightWidth -
+		model.paddingLeft -
+		model.paddingRight;
+	return {
+		x:
+			Math.round(rect.left) +
+			model.borderLeftWidth +
+			model.paddingLeft +
+			getMathAlignOffset(
+				contentWidth - box.width,
+				getComputedValue(element, "text-align"),
+			),
+		y: Math.round(rect.top) + model.borderTopWidth + model.paddingTop,
+	};
+}
+
+// The rectangles of the cells inside a <math> element that render a
+// node's text, in document coordinates.
+function getMathNodeRects(
+	layout: Layout,
+	math: Element,
+	node: Node,
+): DOMRect[] {
+	const origin = getMathOrigin(layout, math);
+	if (origin === null) {
+		return [];
+	}
+	return getMathCellRects(getMathBox(layout, math), node).map((rect) =>
+		new layout.domRect(
+			origin.x + rect.x,
+			origin.y + rect.y,
+			rect.width,
+			rect.height,
+		),
+	);
+}
+
+// Paint extents are cached in unscrolled layout rows, so viewport culling
+// of a scrolled subtree compares against the viewport moved by this amount
+// rather than recomputing extents per scroll.
+export function scrolledAncestorRows(layout: Layout, element: Element): number {
+	const layoutNode =
+		layout.nodeMap.get(element) ?? runLayoutNode(layout, element);
+	return layoutNode ? -getScrollShift(layout, layoutNode, false).y : 0;
+}
+
+// The text lets a caller repaint the run in the selection style.
+// getRangeRects is this without the text.
+function getRangeSpans(
+	layout: Layout,
+	range: Range,
+): Array<{rect: DOMRect; text: string}> {
+	if (range.collapsed) {
+		return [];
+	}
+	const runs: Array<{rect: DOMRect; text: string}> = [];
+	for (const textNode of rangeTextNodes(layout, range)) {
+		const from = range.startContainer === textNode ? range.startOffset : 0;
+		const to = range.endContainer === textNode
+			? range.endOffset
+			: textNode.data.length;
+		if (to > from) {
+			runs.push(...getSelectionSpans(layout, textNode, from, to));
+		}
+	}
+	return runs;
+}
+
+// The offsets the cells above actually cover, since a cell holds a
+// whole cluster.
+export function snapToClusters(
+	layout: Layout,
+	textNode: Text,
+	from: number,
+	to: number,
+): {from: number; to: number} {
+	let start = from;
+	let end = to;
+	const whiteSpace = getWhiteSpace(textNode);
+	for (const fragment of layout.lineFragments(textNode)) {
+		const {text, offsets} = renderWhiteSpaceOffsets(
+			textNode.data.slice(fragment.startOffset, fragment.endOffset),
+			whiteSpace,
+		);
+		const clusterStarts = getClusterStarts(text);
+		for (let i = 0; i < text.length; i++) {
+			const dataOffset = fragment.startOffset + getDataOffset(offsets, i);
+			if (dataOffset < from || dataOffset >= to) {
+				continue;
+			}
+			const before = clusterStarts.at(i);
+			start = Math.min(
+				start,
+				fragment.startOffset + getDataOffset(offsets, before),
+			);
+			const after = clusterStarts.after(i + 1);
+			end = Math.max(
+				end,
+				after < text.length
+					? fragment.startOffset + getDataOffset(offsets, after)
+					: fragment.endOffset,
+			);
+		}
+	}
+	return {from: start, to: end};
+}
+
+// Positioned elements under their nearest stacking-context ancestor,
+// bucketed into the CSS paint layers: negative-z, z:auto/0, positive-z.
+// Walks only the positioned registry, so O(positioned x depth) per
+// frame, never O(document). The painter walks these forward and
+// hit-testing in reverse.
+export function collectStackingLayers(
+	layout: Layout,
+	topLayer: Set<Element>,
+): Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}> {
+	const layers = new Map<
+		Element,
+		{neg: Element[]; zero: Element[]; pos: Element[]}
+	>();
+	// A stray frame can fire after the window is torn down.
+	const body = layout.window.document?.body;
+	if (!body) {
+		return layers;
+	}
+	for (const element of layout.positionedElements) {
+		if (!element.isConnected || element === body) {
+			continue;
+		}
+		// Painted above everything.
+		if (topLayer.has(element)) {
+			continue;
+		}
+		// The registry is a superset. Re-check before trusting membership.
+		if (!isPositioned(element)) {
+			continue;
+		}
+		let root: Element = body;
+		for (
+			let ancestor = flatParentElement(element);
+			ancestor;
+			ancestor = flatParentElement(ancestor)
+		) {
+			if (isStackingContext(ancestor)) {
+				root = ancestor;
+				break;
+			}
+		}
+		let bucket = layers.get(root);
+		if (!bucket) {
+			bucket = {neg: [], zero: [], pos: []};
+			layers.set(root, bucket);
+		}
+		const z = getZIndexValue(element);
+		if (z === "auto" || z === 0) {
+			bucket.zero.push(element);
+		} else if (z < 0) {
+			bucket.neg.push(element);
+		} else {
+			bucket.pos.push(element);
+		}
+	}
+	// 4: b follows a.
+	const treeOrder = (a: Element, b: Element) =>
+		a.compareDocumentPosition(b) & 4 ? -1 : 1;
+	for (const bucket of layers.values()) {
+		const byZ = (a: Element, b: Element) => {
+			const za = getZIndexValue(a) as number;
+			const zb = getZIndexValue(b) as number;
+			return za !== zb ? za - zb : treeOrder(a, b);
+		};
+		bucket.neg.sort(byZ);
+		bucket.zero.sort(treeOrder);
+		bucket.pos.sort(byZ);
+	}
+	return layers;
+}
+
+/**
+ * The viewport rows covered by fixed boxes as wide as the viewport, as
+ * [top, bottom) pairs: a header or a status bar the document scrolls
+ * under.
+ */
+export function fullWidthFixedRows(
+	layout: Layout,
+	cols: number,
+): Array<[number, number]> {
+	const rows: Array<[number, number]> = [];
+	for (const element of layout.positionedElements) {
+		if (
+			!element.isConnected ||
+			getPosition(element) !== "fixed" ||
+			!layout.isInFixedSpace(element)
+		) {
+			continue;
+		}
+		const rect = layout.getRect(element);
+		if (
+			rect === null ||
+			rect.height <= 0 ||
+			Math.round(rect.left) > 0 ||
+			Math.round(rect.left + rect.width) < cols
+		) {
+			continue;
+		}
+		rows.push([Math.round(rect.top), Math.round(rect.top + rect.height)]);
+	}
+	return rows;
+}
+
+/** The layout node an element's principal box was laid out as, if any. */
+export function getLayoutNode(
+	layout: Layout,
+	element: Element,
+): LayoutNode | null {
+	return layout.nodeMap.get(element) ?? null;
+}
+
+/** The rows a node's subtree can paint, in document rows. */
+// The extent, when its rows are counted in the frame the caller counts
+// in. Rows of another frame mean nothing there, so there is none.
+export function paintExtent(
+	node: LayoutNode,
+	frame: LayoutNode,
+): Extent | undefined {
+	const extent = extents.get(node);
+	return extent?.frame === frame ? extent : undefined;
+}
+
+// The root a node's extent counts from, once it has one.
+export function getExtentFrame(node: LayoutNode): LayoutNode | undefined {
+	return extents.get(node)?.frame;
+}
+
+/**
+ * The box whose lines a layout node lays out, when it is a run's. Null
+ * for a principal box's node.
+ */
+export function getRun(layout: Layout, node: LayoutNode): Box | null {
+	const owner = node.owner as Node | null;
+	if (owner === null) {
+		return null;
+	}
+	const box = getBox(layout, owner);
+	return box !== null && box.layoutNode === node ? box : null;
 }
 
 // "auto" stays distinct from 0. It paints in the same layer but does
@@ -6541,6 +7899,7 @@ function pruneDisconnectedNodes(layout: Layout): void {
 		}
 
 		layout.measureNodes.delete(layoutNode);
+		forgetReads(layoutNode);
 		untrackNode(layout, node);
 		layout.invalidatedNodes.delete(node);
 	}
@@ -6551,7 +7910,93 @@ function pruneDisconnectedNodes(layout: Layout): void {
 // now generates is derived where every box is derived.
 // Measures are dropped after every restyle has dropped its enumerations,
 // as handleMutations does with records.
+// The style values each box's measure last read, by the element read,
+// and the boxes that read each element. A measure's result is a function
+// of what it read, so it stands until one of those reads differently.
+const measureReads =
+	new WeakMap<LayoutNode, Map<Element, Map<string, string>>>();
+const measureReaders = new WeakMap<Element, Set<LayoutNode>>();
+
+// The readers are registered once the measure has returned, and only
+// while the layout still measures the box: a measure can drop its own box
+// on the way, and a reader dropped would be held by every element it read.
+function recordReads(
+	layout: Layout,
+	node: LayoutNode,
+	measure: Measure,
+): Measure {
+	return (width, widthSpace, placing, left) => {
+		const reads = new Map<Element, Map<string, string>>();
+		// Reads come in runs on one element.
+		let lastElement: Element | null = null;
+		let lastReads: Map<string, string> | undefined;
+		const size = recordStyleReads((element, read, value) => {
+			if (element !== lastElement) {
+				lastElement = element;
+				lastReads = reads.get(element);
+				if (lastReads === undefined) {
+					lastReads = new Map();
+					reads.set(element, lastReads);
+				}
+			}
+			lastReads!.set(read, value);
+		}, () => measure(width, widthSpace, placing, left));
+		forgetReads(node);
+		if (layout.measureNodes.has(node)) {
+			for (const element of reads.keys()) {
+				let readers = measureReaders.get(element);
+				if (readers === undefined) {
+					readers = new Set();
+					measureReaders.set(element, readers);
+				}
+				readers.add(node);
+			}
+			measureReads.set(node, reads);
+		}
+		return size;
+	};
+}
+
+// A box that leaves takes its reads with it, so no element it read keeps
+// it.
+function forgetReads(node: LayoutNode): void {
+	for (const element of measureReads.get(node)?.keys() ?? []) {
+		measureReaders.get(element)?.delete(node);
+	}
+	measureReads.delete(node);
+}
+
+// Every measure that read the element and would read it differently now
+// measures again.
+function invalidateMeasureReaders(element: Element): void {
+	const readers = measureReaders.get(element);
+	if (readers === undefined) {
+		return;
+	}
+	for (const node of readers) {
+		const reads = measureReads.get(node)?.get(element);
+		if (reads === undefined) {
+			readers.delete(node);
+			continue;
+		}
+		for (const [read, value] of reads) {
+			if (readStyleAgain(element, read) !== value) {
+				node.invalidate();
+				break;
+			}
+		}
+	}
+}
+
 function applyRestyles(layout: Layout): void {
+	// What a measure read is checked first, whatever the restyle changed,
+	// a property the cascade calls paint-only included.
+	for (const element of layout.restyledSinceLayout) {
+		if (flatIsConnected(element)) {
+			invalidateMeasureReaders(element);
+		}
+	}
+	layout.restyledSinceLayout.clear();
 	const measured = new Set<Element>();
 	while (layout.restyled.size > 0) {
 		const restyled = [...layout.restyled];
@@ -6575,6 +8020,14 @@ function applyRestyles(layout: Layout): void {
 				pseudoElementCount(element) === 0
 					? probeLayoutStyle(element)
 					: null;
+			// A box that starts or stops being positioned starts or stops
+			// containing its absolute descendants.
+			if (
+				probe !== null &&
+				probe.style.positionType !== layoutNode!.style.positionType
+			) {
+				invalidateOutOfFlowDescendants(layout, element);
+			}
 			if (probe !== null) {
 				// A restyle that left every property layout reads as it was (a
 				// color, a decoration) changes no box and no measurement, and
@@ -6620,6 +8073,10 @@ function applyRestyles(layout: Layout): void {
 			measured.add(element);
 			touchChildren(layout, element);
 			invalidateChildDerivation(layout, element);
+			// Whether it lays its content out under a root of its own follows
+			// its display, and a node kept through the change keeps no root it
+			// no longer has.
+			syncIndependentFormattingContext(layout, element);
 			if (layout.boxes.get(element)?.children) {
 				invalidateContainerBoxes(layout, element);
 				// An element that becomes a flex container, or stops being one,
@@ -6732,6 +8189,12 @@ function invalidateForRecord(
 		measured.add(target);
 		return;
 	}
+	measured.add(target);
+	// A tree that has left the document holds no boxes. Inserted again, it
+	// is derived whole from the record that brings it back.
+	if (!isConnectedNode(target)) {
+		return;
+	}
 	// The removed nodes are already detached, so the container is reached
 	// through the target rather than through them.
 	if (nodeTypeOf(target) === target.ELEMENT_NODE) {
@@ -6739,8 +8202,7 @@ function invalidateForRecord(
 	}
 	// A member gaining or losing a descendant changes no box list (the
 	// member is still there, holding more or less), so the box measuring it
-	// is notified directly.
-	measured.add(target);
+	// is notified directly, above.
 	for (const node of getAddedNodes(record)) {
 		invalidateSubtreeDerivation(layout, node);
 	}
@@ -6876,6 +8338,7 @@ function getInlineBlockRect(layout: Layout, element: Element): DOMRect | null {
 			hop.segment.leaf.boxModel.borderLeftWidth;
 		originY +=
 			hop.line.y +
+			hop.segment.dy +
 			hop.segment.leaf.boxModel.paddingTop +
 			hop.segment.leaf.boxModel.borderTopWidth;
 		if (hop.segment.leaf.breakResult) {
@@ -6895,11 +8358,7 @@ function getInlineBlockRect(layout: Layout, element: Element): DOMRect | null {
 	// a box heads in a block is not its box.
 	const ownLayoutNode = descended ? undefined : runLayoutNode(layout, element);
 	const anonymous = ownLayoutNode && layout.anonymousBoxes.get(ownLayoutNode);
-	const height = getAtomicHeight(
-		element,
-		target.segment.leaf,
-		target.line.height,
-	);
+	const height = target.segment.height;
 	if (ownLayoutNode && (!anonymous || anonymous.styledFrom === element)) {
 		const {x, y} = getDocumentPosition(layout, element, ownLayoutNode);
 		return new layout.domRect(x, y, target.segment.width, height);
@@ -6908,36 +8367,12 @@ function getInlineBlockRect(layout: Layout, element: Element): DOMRect | null {
 		originX +
 		getLineStart(alignContainer, breakResult, target.line) +
 			target.segment.x,
-		originY + target.line.y,
+		originY + target.line.y + target.segment.dy,
 		target.segment.width,
 		height,
 	);
 }
 
-/**
- * An atomic inline's height on its line. An inline-block fills the line,
- * as this engine lays lines out, but an image or a canvas is as tall as
- * its own content, so a taller neighbor does not stretch its pixels.
- */
-export function getAtomicHeight(
-	element: Element,
-	leaf: InlineBlockLeaf,
-	lineHeight: number,
-): number {
-	if (!isReplacedBox(element)) {
-		return lineHeight;
-	}
-	const box = leaf.boxModel;
-	return Math.min(
-		lineHeight,
-		leaf.contentHeight +
-		box.paddingTop +
-		box.paddingBottom +
-			box.borderTopWidth +
-		box.borderBottomWidth,
-	);
-}
-
 function rangeTextNodes(layout: Layout, range: Range): Text[] {
 	const root = range.commonAncestorContainer;
 	if (nodeTypeOf(root) === root.TEXT_NODE) {
@@ -7341,9 +8776,14 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 											visualBase: nestedSegment.visualBase,
 											rect: new layout.domRect(
 												containerX + segment.x + paddingLeft + nestedSegment.x,
-												containerY + line.y + paddingTop + nestedLine.y,
+												containerY +
+													line.y +
+													segment.dy +
+													paddingTop +
+													nestedLine.y +
+													nestedLine.textTop,
 												nestedSegment.width,
-												nestedLine.height,
+												nestedLine.height - nestedLine.textTop,
 											),
 										});
 									} else if (
@@ -7377,10 +8817,13 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 															innerSegment.x,
 															containerY +
 															line.y +
+															segment.dy +
 															paddingTop +
 															nestedLine.y +
+															nestedSegment.dy +
 															nestedPaddingTop +
-															innerLine.y,
+															innerLine.y +
+															innerLine.textTop,
 															innerSegment.width,
 															innerLine.height,
 														),
@@ -7472,6 +8915,7 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 							segment.leaf.boxModel.borderLeftWidth;
 						accumulatedOffsetY +=
 							line.y +
+							segment.dy +
 							segment.leaf.boxModel.paddingTop +
 							segment.leaf.boxModel.borderTopWidth;
 						if (segment.leaf.breakResult) {
@@ -7605,9 +9049,9 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 
 		const rect = new layout.domRect(
 			containerX + minX + alignOffset + indent,
-			containerY + line.y,
+			containerY + line.y + line.textTop,
 			maxX - minX,
-			line.height,
+			line.height - line.textTop,
 		);
 		rectTexts.push({
 			rect,
@@ -7637,7 +9081,7 @@ function getDocumentContentHeight(engine: Layout): number {
 function getDocumentOverflowBottom(engine: Layout): number {
 	const root = engine.nodeMap.get(engine.rootElement);
 	const extent = root ? extents.get(root) : undefined;
-	return extent ? Math.ceil(root!.result.top + extent.overflowBottom) : 0;
+	return extent ? Math.ceil(root!.grid.top + extent.overflowBottom) : 0;
 }
 
 function measureScrollExtent(
@@ -7683,15 +9127,14 @@ function measureScrollExtent(
 					child.measure !== null &&
 						getMeasuredLines(layout, child) === undefined
 						? null
-						: Math.max(right, child.result.left + reach.overflowRight);
+						: Math.max(right, child.grid.left + reach.overflowRight);
 			}
-			bottom = Math.max(bottom, child.result.top + reach.overflowBottom);
+			bottom = Math.max(bottom, child.grid.top + reach.overflowBottom);
 		}
 	}
-	const clientWidth =
-		layoutNode.getComputedWidth() - border.left - border.right;
+	const clientWidth = getComputedWidth(layoutNode) - border.left - border.right;
 	const clientHeight =
-		layoutNode.getComputedHeight() - border.top - border.bottom;
+		getComputedHeight(layoutNode) - border.top - border.bottom;
 	return {
 		width: right === null
 			? null
@@ -7790,13 +9233,7 @@ function revealRectInScrollPorts(
 		ancestor && !isRootBox(engine, ancestor);
 		ancestor = flatParentElement(ancestor)
 	) {
-		const overflow = getComputedValue(ancestor, "overflow");
-		if (
-			isScrollingOverflow(
-				getComputedValue(ancestor, "overflow-y") || overflow,
-			) ||
-			isScrollingOverflow(getComputedValue(ancestor, "overflow-x") || overflow)
-		) {
+		if (isScrollContainer(ancestor)) {
 			revealInPort(engine, getRect(), ancestor, block, inline);
 		}
 	}
@@ -7836,3 +9273,13 @@ function revealInPort(
 function isScrollingOverflow(overflow: string): boolean {
 	return overflow === "auto" || overflow === "scroll" || overflow === "hidden";
 }
+
+// Whether either axis clips its content into a scroll port. A longhand
+// left unset takes the shorthand's value.
+function isScrollContainer(element: Element): boolean {
+	const overflow = getComputedValue(element, "overflow");
+	return (
+		isScrollingOverflow(getComputedValue(element, "overflow-x") || overflow) ||
+		isScrollingOverflow(getComputedValue(element, "overflow-y") || overflow)
+	);
+}
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 185babee..491f2b89 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -72,15 +72,29 @@ export type Sizing = "none" | "min-content" | "max-content" | "fit-content";
 export interface Size {
 	width: number;
 	height: number;
+	// For text: the whole columns its lines broke to, whether one ended
+	// where nothing forced it to, and how many columns the widest takes.
+	// Another place for the box matters only to text these say it would
+	// break differently.
+	columns?: number;
+	wrapped?: boolean;
+	lineColumns?: number;
+	// Whether the content resolved a percentage against the width given,
+	// so that measured at another request it would not be the same.
+	widthDependent?: boolean;
 }
 
 // `placing` is true for the measurement that places the box and
 // false for the sizing probes before it. Only the placing one may keep
 // its line breaks.
-type Measure = (
+// left is the absolute left edge of the content box, unrounded, as the
+// box was last placed, so text can break against the whole columns it is
+// drawn across. NaN before the box is first placed.
+export type Measure = (
 	width: number,
 	widthSpace: AvailableSpace,
 	placing: boolean,
+	left: number,
 ) => Size;
 
 // The origin of CSS 2 §10.3.7's hypothetical box, in the containing
@@ -469,6 +483,12 @@ export class LayoutNode {
 	cachedSizes: Array<CachedSize | null> | null;
 	cachedLayout: CachedSize | null;
 
+	// Whether the subtree's size depends on the width it is offered other
+	// than through where its lines break: a percentage that resolves
+	// against it, or that an unbounded probe takes as auto. Such a size is
+	// reused only for the request it answered.
+	widthDependent: boolean;
+
 	// A baseline-aligned table cell's content moves down this far, to its
 	// row's baseline. Set by the table before the cell is placed.
 	cellBaselineShift: number;
@@ -488,6 +508,32 @@ export class LayoutNode {
 	// width it is given, and rounds both edges as a block does.
 	measuresText: boolean;
 
+	// The unrounded origin roundToGrid last gave the children, NaN once the
+	// node is laid out again. Their rounded results stand while it holds.
+	gridLeft: number;
+	gridTop: number;
+	// Whether the last roundToGrid left the children as they were.
+	settled: boolean;
+	// The box's place in its parent and its size in whole cells, which
+	// roundToGrid writes from result and nothing else does. Layout reads
+	// only result, which only layout writes, so no value it reads was ever
+	// rounded. rawAbsoluteLeft sums result's left edges down from the root:
+	// the text in a box breaks against the columns it says the box is drawn
+	// across.
+	grid: {left: number; top: number; width: number; height: number};
+	rawAbsoluteLeft: number;
+	// What the last measure broke the box's text to: the width it was
+	// given, and the Size fields that say whether another edge would break
+	// it differently.
+	measuredWidth: number;
+	measured: Size | null;
+	// Whether a child left since the last paint extents, whose rows then
+	// show nothing it painted.
+	lostChild: boolean;
+	// Called when the tree this node roots goes stale. The root of a box's
+	// own formatting context tells the box, whose measure lays it out.
+	onStale: (() => void) | null;
+
 	constructor() {
 		this.children = [];
 		this.parent = null;
@@ -496,11 +542,21 @@ export class LayoutNode {
 		this.staticPositionFn = null;
 		this.stale = true;
 		this.cachedSizes = null;
+		this.widthDependent = false;
 		this.cachedLayout = null;
 		this.cellBaselineShift = 0;
 		this.owner = null;
 		this.measuresText = true;
 		this.outOfFlowCount = 0;
+		this.gridLeft = NaN;
+		this.gridTop = NaN;
+		this.settled = false;
+		this.grid = {left: 0, top: 0, width: 0, height: 0};
+		this.rawAbsoluteLeft = NaN;
+		this.measuredWidth = NaN;
+		this.measured = null;
+		this.lostChild = false;
+		this.onStale = null;
 		this.currentStyle = createStyle();
 		this.result = createResult();
 	}
@@ -511,14 +567,24 @@ export class LayoutNode {
 		return this.currentStyle;
 	}
 
+	// A child's size depends on what its parent lays it out as, a row in
+	// a table or a box in a block, so another display drops what the
+	// children kept.
 	set style(style: Style) {
 		const change =
 			Number(isOutOfFlowType(style.positionType)) -
 			Number(isOutOfFlowType(this.currentStyle.positionType));
+		const relaid = style.displayType !== this.currentStyle.displayType;
 		this.currentStyle = style;
 		if (change !== 0) {
 			countOutOfFlow(this, change);
 		}
+		if (relaid) {
+			for (const child of this.children) {
+				child.stale = true;
+			}
+			this.invalidate();
+		}
 	}
 
 	get holdsOutOfFlow(): boolean {
@@ -543,20 +609,12 @@ export class LayoutNode {
 		this.invalidate();
 	}
 
-	insertChild(child: LayoutNode, index: number): void {
-		child.parent = this;
-		this.children.splice(index, 0, child);
-		if (child.outOfFlowCount !== 0) {
-			countOutOfFlow(this, child.outOfFlowCount);
-		}
-		invalidateAncestors(this);
-	}
-
 	removeChild(child: LayoutNode): void {
 		const index = this.children.indexOf(child);
 		if (index !== -1) {
 			this.children.splice(index, 1);
 			child.parent = null;
+			this.lostChild = true;
 			if (child.outOfFlowCount !== 0) {
 				countOutOfFlow(this, -child.outOfFlowCount);
 			}
@@ -564,38 +622,11 @@ export class LayoutNode {
 		}
 	}
 
-	// Searches from the tail. Callers mostly ask about the child they just
-	// appended.
-	getChildIndex(child: LayoutNode): number {
-		return this.children.lastIndexOf(child);
-	}
-
 	invalidate(): void {
 		this.stale = true;
 		invalidateAncestors(this);
 	}
 
-	getComputedGridTracks(
-		rows: boolean,
-	): {sizes: number[]; offset: number} | null {
-		const sizes = rows ? this.result.gridRows : this.result.gridColumns;
-		if (!sizes) {
-			return null;
-		}
-		return {
-			sizes,
-			offset: rows ? this.result.gridRowOffset : this.result.gridColumnOffset,
-		};
-	}
-
-	getComputedWidth(): number {
-		return !Number.isNaN(this.result.width) ? this.result.width : 0;
-	}
-
-	getComputedHeight(): number {
-		return !Number.isNaN(this.result.height) ? this.result.height : 0;
-	}
-
 	performLayout(ownerWidth: number, ownerHeight: number): void {
 		const width = resolveValue(this.style.width, ownerWidth);
 		const height = resolveValue(this.style.height, ownerHeight);
@@ -631,11 +662,99 @@ export class LayoutNode {
 			true,
 		);
 
-		roundToGrid(this, 0, 0);
+		// Text measured at an edge it did not land on breaks again where it
+		// landed. A box placed at a whole cell, as most are, never does.
+		for (let pass = 0; pass < 3; pass++) {
+			const misplaced: LayoutNode[] = [];
+			roundToGrid(this, 0, 0, misplaced);
+			if (misplaced.length === 0 || pass === 2) {
+				break;
+			}
+			for (const node of misplaced) {
+				node.invalidate();
+			}
+			layoutNode(
+				this,
+				availableWidth,
+				availableHeight,
+				widthSpace,
+				!Number.isNaN(availableHeight) ? "definite" : "indefinite",
+				ownerWidth,
+				ownerHeight,
+				true,
+			);
+		}
 		this.stale = false;
 	}
 }
 
+/**
+ * Forgets what the node remembers between solves: its cached results,
+ * the places it was rounded and measured at. A solve after this is a
+ * solve from nothing.
+ */
+export function forgetLayout(node: LayoutNode): void {
+	node.stale = true;
+	node.cachedLayout = null;
+	node.cachedSizes = null;
+	node.gridLeft = NaN;
+	node.gridTop = NaN;
+	node.settled = false;
+	node.rawAbsoluteLeft = NaN;
+	node.measuredWidth = NaN;
+	node.measured = null;
+}
+
+// What a node kept was for the parent it was laid out under.
+export function insertChild(
+	layoutNode: LayoutNode,
+	child: LayoutNode,
+	index: number,
+): void {
+	child.parent = layoutNode;
+	child.stale = true;
+	layoutNode.children.splice(index, 0, child);
+	if (child.outOfFlowCount !== 0) {
+		countOutOfFlow(layoutNode, child.outOfFlowCount);
+	}
+	invalidateAncestors(layoutNode);
+}
+
+// Searches from the tail. Callers mostly ask about the child they just
+// appended.
+export function getChildIndex(
+	layoutNode: LayoutNode,
+	child: LayoutNode,
+): number {
+	return layoutNode.children.lastIndexOf(child);
+}
+
+export function getComputedGridTracks(
+	layoutNode: LayoutNode,
+	rows: boolean,
+): {sizes: number[]; offset: number} | null {
+	const sizes = rows
+		? layoutNode.result.gridRows
+		: layoutNode.result.gridColumns;
+	if (!sizes) {
+		return null;
+	}
+	return {
+		sizes,
+		offset: rows
+			? layoutNode.result.gridRowOffset
+			: layoutNode.result.gridColumnOffset,
+	};
+}
+
+export function getComputedWidth(layoutNode: LayoutNode): number {
+	return layoutNode.grid.width;
+}
+
+export function getComputedHeight(layoutNode: LayoutNode): number {
+	return layoutNode.grid.height;
+}
+
 // The values and edge records nodes share. Most boxes have one of a few
 // margins, paddings, insets, borders and gaps, nearly all zero or unset,
 // and a node's style is never written once the node holds it. So a
@@ -844,9 +963,15 @@ function countOutOfFlow(start: LayoutNode, change: number): void {
 }
 
 function invalidateAncestors(start: LayoutNode): void {
-	for (let node: LayoutNode | null = start; node; node = node.parent) {
+	let node = start;
+	for (;;) {
 		node.stale = true;
+		if (node.parent === null) {
+			break;
+		}
+		node = node.parent;
 	}
+	node.onStale?.();
 }
 
 function resolveFlexGrow(node: LayoutNode): number {
@@ -1126,7 +1251,14 @@ function layoutMeasuredContent(
 		return;
 	}
 
-	const measured = node.measure!(innerWidth, widthSpace, placing);
+	const measured = node.measure!(
+		innerWidth,
+		widthSpace,
+		placing,
+		getContentLeft(node),
+	);
+	node.measuredWidth = innerWidth;
+	node.measured = measured;
 
 	const width = widthSpace === "definite"
 		? availableWidth - marginRow
@@ -2538,6 +2670,14 @@ interface TableRow {
 
 // Visual order: header groups first and footer groups last, wherever they
 // were written.
+// A positioned box hangs from its containing block wherever it sits in
+// the tree, and takes no cell of the table it is in.
+function getInFlowCells(row: LayoutNode): LayoutNode[] {
+	return row.children.some((cell) => isOutOfFlowType(cell.style.positionType))
+		? row.children.filter((cell) => !isOutOfFlowType(cell.style.positionType))
+		: row.children;
+}
+
 function collectTableRows(table: LayoutNode): {
 	rows: TableRow[];
 	captions: LayoutNode[];
@@ -2573,9 +2713,12 @@ function collectTableRows(table: LayoutNode): {
 		groups.push(group);
 		anonymous = null;
 		for (const child of group.children) {
+			if (isOutOfFlowType(child.style.positionType)) {
+				continue;
+			}
 			if (child.style.displayType === "table-row") {
 				anonymous = null;
-				into.push({node: child, group, cells: child.children});
+				into.push({node: child, group, cells: getInFlowCells(child)});
 			} else {
 				collectStray(child, group, into);
 			}
@@ -2588,7 +2731,11 @@ function collectTableRows(table: LayoutNode): {
 			child.style.displayType === "none" ||
 			isOutOfFlowType(child.style.positionType)
 		) {
-			zeroLayout(child);
+			// A positioned child is its containing block's to lay out, and
+			// zeroing it here would wipe what that layout placed.
+			if (!isOutOfFlowType(child.style.positionType)) {
+				zeroLayout(child);
+			}
 			continue;
 		}
 
@@ -2616,7 +2763,7 @@ function collectTableRows(table: LayoutNode): {
 				collectGroup(child, body);
 				break;
 			case "table-row":
-				body.push({node: child, group: null, cells: child.children});
+				body.push({node: child, group: null, cells: getInFlowCells(child)});
 				break;
 			default:
 				collectStray(child, null, body);
@@ -2701,14 +2848,16 @@ function stackAnonymousCell(
 	return height + below;
 }
 
-// An element only. The white space between a row's cells is a run of
-// text the row holds too, and it renders nothing (css-tables-3 §3.3).
+// Anything in a row but a cell: an element, a run of text, and a row,
+// a group or a table, which the anonymous cell then holds in a table of
+// its own (CSS2 §17.2.1). The white space between a row's cells never
+// reaches a table as a run (css-tables-3 §3.3).
 function isAnonymousCellContent(node: LayoutNode): boolean {
 	const type = node.style.displayType;
 	const owner = node.owner as {nodeType?: number} | null;
-	return owner?.nodeType === 1 &&
+	return (owner?.nodeType === 1 || owner?.nodeType === 3) &&
 		type !== "none" &&
-		!type.startsWith("table") &&
+		type !== "table-cell" &&
 		!isOutOfFlowType(node.style.positionType);
 }
 
@@ -3364,21 +3513,40 @@ function layoutTable(
 	// its group.
 	const gridTop = topPaddingBorder + captionHeight;
 
+	// A group spans its own rows, which are consecutive, and a row in one
+	// is placed from the group's top.
+	const firstRows = new Map<LayoutNode, number>();
+	const lastRows = new Map<LayoutNode, number>();
+	rows.forEach((row, index) => {
+		if (row.group !== null) {
+			if (!firstRows.has(row.group)) {
+				firstRows.set(row.group, index);
+			}
+			lastRows.set(row.group, index);
+		}
+	});
 	for (const group of groups) {
+		const first = firstRows.get(group);
+		group.gridLeft = NaN;
 		group.result.left = leftPaddingBorder;
 		group.result.width = contentWidth;
-		group.result.top = gridTop;
-		group.result.height = gridHeight;
+		group.result.top = gridTop + (first === undefined ? 0 : rowStart(first));
+		group.result.height = first === undefined
+			? 0
+			: spanHeight(first, lastRows.get(group)! - first + 1);
 	}
 
 	const rowLeft = (row: TableRow) => row.group ? 0 : leftPaddingBorder;
 	const rowTop = (row: TableRow, index: number) =>
-		row.group ? rowStart(index) : gridTop + rowStart(index);
+		row.group
+			? rowStart(index) - rowStart(firstRows.get(row.group)!)
+			: gridTop + rowStart(index);
 
 	rows.forEach((row, index) => {
 		if (row.node === null) {
 			return;
 		}
+		row.node.gridLeft = NaN;
 		row.node.result.left = rowLeft(row);
 		row.node.result.top = rowTop(row, index);
 		row.node.result.width = contentWidth;
@@ -3420,6 +3588,18 @@ function layoutTable(
 		cell.node.result.left = left + columnStart(cell.column);
 		cell.node.result.top = top;
 	}
+
+	// A positioned table or part of one contains the absolute boxes in it,
+	// as any positioned box does. The table lays its groups and rows out
+	// itself, so it lays out theirs too.
+	for (const part of [node, ...groups, ...rows.map((row) => row.node)]) {
+		if (part === null || (part !== node && !isContainingBlock(part.style))) {
+			continue;
+		}
+		for (const child of getOutOfFlowDescendants(part, false)) {
+			layoutAbsoluteChild(part, child, ownerWidth, ownerHeight);
+		}
+	}
 }
 
 // css-grid-2 §12.2.
@@ -5613,8 +5793,8 @@ function layoutBlock(
 	// so each is measured once at the width it keeps.
 	// While the width is being found, a child's percentage of it is
 	// cyclic and counts as auto (css-sizing-3 §5.2.1). Read against the
-	// probe, `width: 100%` turned every probe into a definite width of
-	// its own, and nested tables were laid out again for each.
+	// probe, `width: 100%` would make every probe a definite width of its
+	// own and lay nested tables out again for each.
 	let borderBoxWidth: number;
 	if (widthSpace === "definite") {
 		borderBoxWidth = availableWidth - marginRow;
@@ -5794,6 +5974,15 @@ function layoutNode(
 	ownerHeight: number,
 	placing: boolean,
 ): void {
+	// A container may lay out a descendant without laying out the boxes
+	// between, as a table does its cells, so every box above it rounds again.
+	for (
+		let above = node.parent;
+		above !== null && !Number.isNaN(above.gridLeft);
+		above = above.parent
+	) {
+		above.gridLeft = NaN;
+	}
 	// css-sizing-4 §5: the open axis follows a settled (`definite`) one
 	// through the ratio. With both settled the ratio yields. Margins come
 	// off the settled request and back onto the derived one. min/max on the
@@ -5852,13 +6041,16 @@ function layoutNode(
 							isSameConstraint(cached.ownerHeight, ownerHeight))) &&
 					cached.width >= 0 &&
 					cached.height >= 0 &&
-					isCachedSizeValid(
-						cached.widthSpace,
-						cached.availableWidth - marginRow,
-						cached.width,
-						widthSpace,
-						availableWidth - marginRow,
-					) &&
+					(node.widthDependent
+						? cached.widthSpace === widthSpace &&
+							isSameConstraint(cached.availableWidth, availableWidth)
+						: isCachedSizeValid(
+							cached.widthSpace,
+							cached.availableWidth - marginRow,
+							cached.width,
+							widthSpace,
+							availableWidth - marginRow,
+						)) &&
 					isCachedSizeValid(
 						cached.heightSpace,
 						cached.availableHeight - marginColumn,
@@ -5897,6 +6089,11 @@ function layoutNode(
 	);
 
 	node.ownerFree = isOwnerFree(node);
+	node.widthDependent = node.measure !== null
+		? node.measured?.widthDependent === true
+		: node.children.some((child) =>
+			child.widthDependent || usesPercent(child.style),
+		);
 	// An entry already in the slot is written over rather than replaced. A
 	// node laid out every frame would otherwise leave one behind each time.
 	const write = (entry: CachedSize | null): CachedSize => {
@@ -5973,6 +6170,7 @@ function layoutNodeImpl(
 	ownerHeight: number,
 	placing: boolean,
 ): void {
+	node.gridLeft = NaN;
 	node.result.padding.left = getPadding(node, "left", ownerWidth);
 	node.result.padding.top = getPadding(node, "top", ownerWidth);
 	node.result.padding.right = getPadding(node, "right", ownerWidth);
@@ -6117,37 +6315,76 @@ function getPadding(node: LayoutNode, edge: Edge, ownerWidth: number): number {
 // position is the difference of two rounded edges too, so text inside a
 // fractional padding starts where a marker beside it ends. A leaf that
 // measures text ceils its trailing edge so the text never gets less room
-// than it measured.
+// than it measured. A node not laid out since, under the same origin,
+// keeps the children it rounded before.
 function roundToGrid(
 	node: LayoutNode,
-	absoluteLeft: number,
-	absoluteTop: number,
+	parentLeft: number,
+	parentTop: number,
+	misplaced: LayoutNode[],
 ): void {
-	const nodeLeft = node.result.left;
-	const nodeTop = node.result.top;
-	const nodeWidth = !Number.isNaN(node.result.width) ? node.result.width : 0;
-	const nodeHeight = !Number.isNaN(node.result.height) ? node.result.height : 0;
-
-	const absLeft = absoluteLeft + nodeLeft;
-	const absTop = absoluteTop + nodeTop;
-	const absRight = absLeft + nodeWidth;
-	const absBottom = absTop + nodeHeight;
-
+	const absLeft = parentLeft + node.result.left;
+	const absTop = parentTop + node.result.top;
+	node.rawAbsoluteLeft = absLeft;
+	if (node.measure !== null && breaksElsewhere(node)) {
+		misplaced.push(node);
+	}
+	const width = !Number.isNaN(node.result.width) ? node.result.width : 0;
+	const height = !Number.isNaN(node.result.height) ? node.result.height : 0;
 	const isText = node.measure !== null && node.measuresText;
 
-	node.result.left =
-		roundValue(absLeft, false, false) - roundValue(absoluteLeft, false, false);
-	node.result.top =
-		roundValue(absTop, false, false) - roundValue(absoluteTop, false, false);
+	node.grid.left =
+		roundValue(absLeft, false, false) - roundValue(parentLeft, false, false);
+	node.grid.top =
+		roundValue(absTop, false, false) - roundValue(parentTop, false, false);
+	node.grid.width =
+		roundValue(absLeft + width, isText, false) -
+		roundValue(absLeft, isText, false);
+	node.grid.height =
+		roundValue(absTop + height, isText, false) -
+		roundValue(absTop, isText, false);
+
+	node.settled = absLeft === node.gridLeft && absTop === node.gridTop;
+	if (node.settled) {
+		return;
+	}
+	node.gridLeft = absLeft;
+	node.gridTop = absTop;
+	for (const child of node.children) {
+		roundToGrid(child, absLeft, absTop, misplaced);
+	}
+}
 
-	node.result.width =
-		roundValue(absRight, isText, false) - roundValue(absLeft, isText, false);
-	node.result.height =
-		roundValue(absBottom, isText, false) - roundValue(absTop, isText, false);
+function getContentLeft(node: LayoutNode): number {
+	return node.rawAbsoluteLeft +
+		node.style.border.left +
+		node.result.padding.left;
+}
 
-	for (const child of node.children) {
-		roundToGrid(child, absLeft, absTop);
+// Whether text measured before its box landed where it did would break
+// into other lines there: its lines no longer fit the columns it is drawn
+// across, or it wrapped and may fit more of them.
+function breaksElsewhere(node: LayoutNode): boolean {
+	const measured = node.measured;
+	if (measured === null || measured.columns === undefined) {
+		return false;
+	}
+	const columns = getDrawnColumns(getContentLeft(node), node.measuredWidth);
+	return columns !== measured.columns &&
+		(measured.wrapped === true || measured.lineColumns! > columns);
+}
+
+/**
+ * How many columns a width starting at an unrounded edge is drawn
+ * across, as roundToGrid snaps a box's edges to the nearest cell. An edge
+ * not yet known is taken to be at a whole cell.
+ */
+export function getDrawnColumns(left: number, width: number): number {
+	if (Number.isNaN(left)) {
+		return roundValue(width, false, false);
 	}
+	return roundValue(left + width, false, false) -
+		roundValue(left, false, false);
 }
 
 function roundValue(
diff --git a/src/internal/mathml.ts b/src/internal/mathml.ts
index c5faaaa0..cf8c21a9 100644
--- a/src/internal/mathml.ts
+++ b/src/internal/mathml.ts
@@ -5,8 +5,10 @@
  * the block and inline engines place, and what the painter blits.
  */
 
-import {getCellSize, getComputedValue, resolveLength} from "./cssom.ts";
+import {getComputedValue, resolveLength} from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
+import type {CellStyle} from "./framebuffer.ts";
+import {getStringWidth, graphemeSegmenter} from "./text.ts";
 import {
 	attributeOf,
 	containsOf,
@@ -15,9 +17,8 @@ import {
 	MATHML_NAMESPACE,
 	namespaceOf,
 	nodeTypeOf,
-} from "./dom.ts";
-import type {CellStyle} from "./framebuffer.ts";
-import {getStringWidth, graphemeSegmenter} from "./text.ts";
+} from "./tree.ts";
+import {getCellSize} from "./units.ts";
 
 // ---------------------------------------------------------------------
 // The operator dictionary
@@ -590,11 +591,7 @@ export function layoutMath(element: Element, display: boolean): MathBox {
 	return layoutRow(getLayoutChildren(element), element, context);
 }
 
-export function createEmptyBox(
-	width: number,
-	height = 1,
-	baseline = 0,
-): MathBox {
+function createEmptyBox(width: number, height = 1, baseline = 0): MathBox {
 	const cells: MathCell[][] = [];
 	for (let row = 0; row < height; row++) {
 		cells.push(blankRow(width));
@@ -786,7 +783,7 @@ export function getMathCellRects(
 	return rects;
 }
 
-export function getDescent(box: MathBox): number {
+function getDescent(box: MathBox): number {
 	return box.height - box.baseline - 1;
 }
 
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 11a4d68e..0c51ab75 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -1,11 +1,12 @@
 import {
 	type Cascade,
+	declaredPseudoProperties,
 	establishesFixedContainingBlock,
 	getBoxModel,
 	getCellBorderWidths,
-	getCellSize,
 	getComputedValue,
 	getDeclaredDisplay,
+	getMarkerContent,
 	getTabSize,
 	getUsedOverflow,
 	getWhiteSpace,
@@ -15,7 +16,6 @@ import {
 } from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
-	containsOf,
 	flatParentElement,
 	flowContent,
 	getCanvasTextRuns,
@@ -30,17 +30,24 @@ import {
 	getTopLayer,
 	hasPaintedHighlights,
 	HTMLElement,
-	nodeTypeOf,
 	renderedTopLayer,
 	takesTextCursor,
 	type Window,
 } from "./dom.ts";
 import {getEditingCaretPoint} from "./editing.ts";
-import type {
+import {
 	CellContext,
-	CellStyle,
-	Framebuffer,
-	LineStyle,
+	CellGrid,
+	type CellStyle,
+	drawBox,
+	drawDecoration,
+	drawRect,
+	drawText,
+	type Framebuffer,
+	insetShiftPays,
+	keptCaret,
+	type LineStyle,
+	setCaret,
 } from "./framebuffer.ts";
 import {
 	type Gradient,
@@ -52,19 +59,32 @@ import {
 	applyTextTransform,
 	type Box,
 	type BreakResult,
+	collectStackingLayers,
 	type Display,
-	getAtomicHeight,
+	fullWidthFixedRows,
+	getExtentFrame,
+	getLayoutNode,
 	getLineAlignOffset,
 	getLineIndent,
+	getMathBox,
+	getRun,
 	hasItemParent,
+	hoistedToLayer,
 	type InlineBlockLeaf,
 	isAtomicInline,
 	isPositioned,
 	isStackingContext,
 	type Layout,
+	paintExtent,
 	renderTextFragment,
+	scrolledAncestorRows,
+	snapToClusters,
 } from "./layout.ts";
-import type {LayoutNode} from "./layoutsolver.ts";
+import {
+	getComputedHeight,
+	getComputedWidth,
+	type LayoutNode,
+} from "./layoutsolver.ts";
 import {
 	getMathAlignOffset,
 	isBlankCell,
@@ -73,6 +93,8 @@ import {
 } from "./mathml.ts";
 import {isReplacedBox, renderReplaced} from "./replaced.ts";
 import {getStringWidth} from "./text.ts";
+import {containsOf, nodeTypeOf} from "./tree.ts";
+import {getCellSize} from "./units.ts";
 
 // Edges, not origin and size. An unclipped axis is +-Infinity, and an
 // edge computed from an infinite origin and size is NaN.
@@ -181,6 +203,12 @@ interface PaintStyle {
 	shiftY: number;
 	contentInsetX: number;
 	contentInsetY: number;
+	// What else the painter reads from the element's style, so two paint
+	// styles that match paint alike.
+	others: string;
+	// The counters the element sets, which number markers and content
+	// after it, not its own cells.
+	counters: string;
 }
 
 interface BorderPaint {
@@ -194,6 +222,42 @@ interface BorderPaint {
 	bottomLeft?: "round";
 }
 
+const PAINTED_ELSEWHERE = [
+	"z-index",
+	"position",
+	"text-overflow",
+	"list-style-type",
+	"list-style-position",
+	"list-style-image",
+	"outline-offset",
+	"caret-color",
+	"direction",
+	"text-align",
+	"text-indent",
+];
+
+/**
+ * Whether the element paints as it did under the style key it had, so a
+ * restyle that changed nothing it draws repaints no rows. False when the
+ * old style was never painted to compare, and "whole" when its counters
+ * changed, which renumber what comes after it.
+ */
+export function paintsAsBefore(
+	painter: Painter,
+	element: Element,
+	key: object,
+): boolean | "whole" {
+	const before = paintStyles.get(key);
+	if (before === undefined || painter.cascade.getStyleKey(element) === null) {
+		return false;
+	}
+	const after = getPaintStyle(painter, element);
+	if (before.counters !== after.counters) {
+		return "whole";
+	}
+	return JSON.stringify(before) === JSON.stringify(after);
+}
+
 function readPaintStyle(element: Element): PaintStyle {
 	const color = getComputedValue(element, "color");
 	const backgroundColor = getComputedValue(element, "background-color");
@@ -303,6 +367,12 @@ function readPaintStyle(element: Element): PaintStyle {
 	const gradient = getGradient(element);
 	const model = getBoxModel(element);
 	return {
+		others: PAINTED_ELSEWHERE.map((property) =>
+			getComputedValue(element, property),
+		).join("\0"),
+		counters: ["counter-reset", "counter-increment", "counter-set"]
+			.map((property) => getComputedValue(element, property))
+			.join("\0"),
 		// Whole cells, as layout rounds the content edge.
 		contentInsetX: Math.round(model.paddingLeft + model.borderLeftWidth),
 		contentInsetY: Math.round(model.paddingTop + model.borderTopWidth),
@@ -429,8 +499,11 @@ export class Painter {
 	topLayer: Set<Element>;
 	// Each list marker paints at most once per frame.
 	renderedOutsideMarkers: WeakSet<Element>;
-	// Paint extents are cached in unscrolled rows. A scrolled subtree
-	// paints this many rows higher, so culling shifts the viewport instead.
+	// Paint extents are cached in unscrolled rows of a frame: the
+	// document's, or an inline-block's own root's. The band is culled
+	// against them in the frame being painted, which a scrolled subtree
+	// paints this many rows higher than it counts.
+	frame: LayoutNode;
 	scrolledRows: number;
 	highlightedText: Map<Text, HighlightRun[]>;
 	highlightStyles: Map<Element, Map<string, HighlightPaint | null>>;
@@ -445,6 +518,7 @@ export class Painter {
 		framebuffer: Framebuffer,
 	) {
 		this.renderedOutsideMarkers = new WeakSet<Element>();
+		this.frame = layout.initialBlock;
 		this.scrolledRows = 0;
 		this.highlightedText = new Map();
 		this.highlightStyles = new Map();
@@ -456,136 +530,200 @@ export class Painter {
 		this.framebuffer = framebuffer;
 		this.topLayer = getTopLayer(document) as unknown as Set<Element>;
 	}
+}
 
-	/**
-	 * The buffer rows a journalled element scroll covers, or null when the
-	 * terminal cannot shift them. DECSTBM margins are horizontal, so a scroll
-	 * shift is the region's full width or nothing. Content overlapping the
-	 * shift is dragged along and the diff repairs it. A box narrower than the
-	 * terminal shifts only when repairing what lies beside it costs less than
-	 * repainting the box.
-	 */
-	resolveScrollShift(
-		regionHeight: number,
-		record: {element: Element; delta: number} | null,
-	): {delta: number; top: number; end: number} | null {
-		const framebuffer = this.framebuffer;
-		const layout = this.layout;
-		if (
-			record === null ||
-			record.delta === 0 ||
-			// One scroll shift per frame. The document scroll's region already
-			// contains this box.
-			framebuffer.journal.frameScroll !== 0 ||
-			hasPaintedHighlights(this.document) ||
-			!record.element.isConnected
-		) {
-			return null;
-		}
-		const rect = layout.getRect(record.element);
-		if (rect === null) {
-			return null;
-		}
+/**
+ * The buffer rows a journalled element scroll covers, or null when the
+ * terminal cannot shift them. DECSTBM margins are horizontal, so a scroll
+ * shift is the region's full width or nothing. Content overlapping the
+ * shift is dragged along and the diff repairs it. A box narrower than the
+ * terminal shifts only when repairing what lies beside it costs less than
+ * repainting the box.
+ */
+export function resolveScrollShift(
+	painter: Painter,
+	regionHeight: number,
+	record: {element: Element; delta: number} | null,
+): {delta: number; top: number; end: number} | null {
+	const framebuffer = painter.framebuffer;
+	const layout = painter.layout;
+	if (
+		record === null ||
+		record.delta === 0 ||
+		// One scroll shift per frame. The document scroll's region already
+		// contains this box.
+		framebuffer.journal.frameScroll !== 0 ||
+		hasPaintedHighlights(painter.document) ||
+		!record.element.isConnected
+	) {
+		return null;
+	}
+	const rect = layout.getRect(record.element);
+	if (rect === null) {
+		return null;
+	}
 
-		// The scroll port is the padding box.
-		const border = getCellBorderWidths(record.element);
-		const left = rect.left + border.left;
-		const right = rect.left + rect.width - border.right;
-
-		// Layout rows are document rows. Buffer rows are the document
-		// scroll's. A fixed box is laid out in viewport rows and the paint
-		// cancels the document scroll for it.
-		const lift = layout.isInFixedSpace(record.element)
-			? 0
-			: framebuffer.scrollTop;
-		const top = Math.max(0, Math.round(rect.top + border.top) - lift);
-		const end = Math.min(
-			regionHeight,
-			Math.round(rect.top + rect.height - border.bottom) - lift,
-		);
-		if (end - top <= Math.abs(record.delta)) {
-			return null;
+	// The scroll port is the padding box.
+	const border = getCellBorderWidths(record.element);
+	const left = rect.left + border.left;
+	const right = rect.left + rect.width - border.right;
+
+	// Layout rows are document rows. Buffer rows are the document
+	// scroll's. A fixed box is laid out in viewport rows and the paint
+	// cancels the document scroll for it.
+	const lift = layout.isInFixedSpace(record.element)
+		? 0
+		: framebuffer.scrollTop;
+	const top = Math.max(0, Math.round(rect.top + border.top) - lift);
+	const end = Math.min(
+		regionHeight,
+		Math.round(rect.top + rect.height - border.bottom) - lift,
+	);
+	if (end - top <= Math.abs(record.delta)) {
+		return null;
+	}
+	const delta = record.delta;
+	if (
+		(left > 0 || right < framebuffer.cols) &&
+		!insetShiftPays(framebuffer, {delta, top, end, left, right})
+	) {
+		return null;
+	}
+	return {delta, top, end};
+}
+
+/**
+ * The rows a document scroll shifts: the region, less the full-width
+ * fixed bars at its top and bottom edges, which stay where they are on
+ * screen. Null when no bar trims it.
+ */
+export function resolveDocumentScrollBand(
+	painter: Painter,
+	regionHeight: number,
+	delta: number,
+): {delta: number; top: number; end: number} | null {
+	const bars = fullWidthFixedRows(painter.layout, painter.framebuffer.cols);
+	if (bars.length === 0) {
+		return null;
+	}
+	let top = 0;
+	let end = regionHeight;
+	for (let trimmed = true; trimmed;) {
+		trimmed = false;
+		for (const [barTop, barBottom] of bars) {
+			if (barTop <= top && barBottom > top) {
+				top = barBottom;
+				trimmed = true;
+			}
+			if (barTop < end && barBottom >= end) {
+				end = barTop;
+				trimmed = true;
+			}
 		}
-		const delta = record.delta;
+	}
+	if ((top === 0 && end === regionHeight) || end - top <= Math.abs(delta)) {
+		return null;
+	}
+	return {delta, top, end};
+}
+
+export function paint(painter: Painter, ctx: CellContext): void {
+	painter.highlightedText = collectHighlightedText(painter.document);
+	painter.paintedText.clear();
+	painter.highlightStyles = new Map();
+	const layers = collectStackingLayers(painter.layout, painter.topLayer);
+	// From the body, the root stacking context's content. A body that
+	// is inline, inline-block or display: contents puts its content in
+	// the root element's boxes rather than its own, so painting starts
+	// at the root.
+	const document = painter.document;
+	const bodyDisplay = getDeclaredDisplay(document.body as Element);
+	const fromRoot =
+		document.documentElement !== null &&
+		(bodyDisplay === "contents" || bodyDisplay.startsWith("inline"));
+	const root = (fromRoot ? document.documentElement : document.body) as Element;
+	const rendered = renderedTopLayer(painter.document) as unknown as Element[];
+	for (const [top, bottom] of ctx.bands) {
+		ctx.bandTop = top;
+		ctx.bandBottom = bottom;
+		paintBand(painter, ctx, root, rendered, layers);
+	}
+}
+
+/**
+ * Checks a frame that repainted only some rows against one painted
+ * whole, for tests. Set, a frame that differs throws, naming the cells,
+ * and checked counts the frames compared.
+ */
+export const partialFrameCheck = {enabled: false, checked: 0};
+
+export function checkPartialFrame(
+	painter: Painter,
+	ctx: CellContext,
+	previousCaret: {col: number; row: number} | null,
+): void {
+	partialFrameCheck.checked++;
+	const whole = new CellContext(
+		new CellGrid(ctx.rows, ctx.cols),
+		ctx.rows,
+		ctx.cols,
+		ctx.viewportOffset,
+	);
+	whole.backdrop = ctx.backdrop;
+	paint(painter, whole);
+	const differences: string[] = [];
+	const a = ctx.grid;
+	const b = whole.grid;
+	for (let index = 0; index < a.cluster.length; index++) {
 		if (
-			(left > 0 || right < framebuffer.cols) &&
-			!framebuffer.insetShiftPays({delta, top, end, left, right})
+			a.cluster[index] !== b.cluster[index] ||
+			a.fg[index] !== b.fg[index] ||
+			a.bg[index] !== b.bg[index] ||
+			a.attrs[index] !== b.attrs[index] ||
+			a.border[index] !== b.border[index]
 		) {
-			return null;
-		}
-		return {delta, top, end};
-	}
-
-	/**
-	 * The rows a document scroll shifts: the region, less the full-width
-	 * fixed bars at its top and bottom edges, which stay where they are on
-	 * screen. Null when no bar trims it.
-	 */
-	resolveDocumentScrollBand(
-		regionHeight: number,
-		delta: number,
-	): {delta: number; top: number; end: number} | null {
-		const bars = this.layout.fullWidthFixedRows(this.framebuffer.cols);
-		if (bars.length === 0) {
-			return null;
-		}
-		let top = 0;
-		let end = regionHeight;
-		for (let trimmed = true; trimmed;) {
-			trimmed = false;
-			for (const [barTop, barBottom] of bars) {
-				if (barTop <= top && barBottom > top) {
-					top = barBottom;
-					trimmed = true;
-				}
-				if (barTop < end && barBottom >= end) {
-					end = barTop;
-					trimmed = true;
-				}
-			}
-		}
-		if ((top === 0 && end === regionHeight) || end - top <= Math.abs(delta)) {
-			return null;
+			differences.push(
+				`row ${Math.floor(index / ctx.cols)} col ${index % ctx.cols}`,
+			);
 		}
-		return {delta, top, end};
 	}
-
-	paint(ctx: CellContext): void {
-		this.renderedOutsideMarkers = new WeakSet<Element>();
-		this.scrolledRows = 0;
-		this.highlightedText = collectHighlightedText(this.document);
-		this.paintedText.clear();
-		this.highlightStyles = new Map();
-		const layers = this.layout.collectStackingLayers(this.topLayer);
-		// From the body, the root stacking context's content. A body that
-		// is inline, inline-block or display: contents puts its content in
-		// the root element's boxes rather than its own, so painting starts
-		// at the root.
-		const document = this.document;
-		const bodyDisplay = getDeclaredDisplay(document.body as Element);
-		const fromRoot =
-			document.documentElement !== null &&
-			(bodyDisplay === "contents" || bodyDisplay.startsWith("inline"));
-		renderStackingContext(
-			this,
-			(fromRoot ? document.documentElement : document.body) as Element,
-			ctx,
-			layers,
+	const caret = keptCaret(ctx, previousCaret);
+	if (JSON.stringify(caret) !== JSON.stringify(whole.caret)) {
+		differences.push(
+			`caret ${JSON.stringify(caret)}, whole ${JSON.stringify(whole.caret)}`,
 		);
-		const rendered = renderedTopLayer(this.document) as unknown as Element[];
-		for (const element of rendered) {
-			const previousClip = ctx.clipRect;
-			ctx.clipRect = null;
-			// Entered from outside its ancestor chain, so seed the culling
-			// shift.
-			this.scrolledRows = this.layout.scrolledAncestorRows(element);
-			try {
-				renderBackdrop(element, ctx);
-				renderStackingContext(this, element, ctx, layers);
-			} finally {
-				ctx.clipRect = previousClip;
-				this.scrolledRows = 0;
-			}
+	}
+	if (differences.length > 0) {
+		throw new Error(
+			`A frame repainting rows ${JSON.stringify(ctx.bands)} differs from ` +
+				`a whole one at ${differences.slice(0, 8).join(", ")}`,
+		);
+	}
+}
+
+function paintBand(
+	painter: Painter,
+	ctx: CellContext,
+	root: Element,
+	rendered: Element[],
+	layers: Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}>,
+): void {
+	painter.renderedOutsideMarkers = new WeakSet<Element>();
+	painter.frame = painter.layout.initialBlock;
+	painter.scrolledRows = 0;
+	renderStackingContext(painter, root, ctx, layers);
+	for (const element of rendered) {
+		const previousClip = ctx.clipRect;
+		ctx.clipRect = null;
+		// Entered from outside its ancestor chain, so seed the culling
+		// shift.
+		painter.scrolledRows = scrolledAncestorRows(painter.layout, element);
+		try {
+			renderBackdrop(element, ctx);
+			renderStackingContext(painter, element, ctx, layers);
+		} finally {
+			ctx.clipRect = previousClip;
+			painter.scrolledRows = 0;
 		}
 	}
 }
@@ -612,7 +750,7 @@ function renderBackdrop(element: Element, ctx: CellContext): void {
 		return;
 	}
 	// The viewport in document coordinates.
-	ctx.drawRect(0, -ctx.viewportOffset, ctx.cols, ctx.rows, fill);
+	drawRect(ctx, 0, -ctx.viewportOffset, ctx.cols, ctx.rows, fill);
 }
 
 // CSS layer order: the root's box, negative-z contexts, in-flow
@@ -637,7 +775,7 @@ function renderStackingContext(
 		const previousScrolled = painter.scrolledRows;
 		ctx.clipRect = getPositionedClip(painter, element, root, contextClip);
 		// Entered from its stacking context, not its ancestor chain.
-		painter.scrolledRows = painter.layout.scrolledAncestorRows(element);
+		painter.scrolledRows = scrolledAncestorRows(painter.layout, element);
 		// Fixed space cancels the document scroll for the whole subtree. An
 		// absolute box inside a fixed bar moves with it.
 		if (painter.layout.isInFixedSpace(element)) {
@@ -675,7 +813,7 @@ function paintEntry(
 	afterOwnBox?: () => void,
 ): void {
 	const layout = painter.layout;
-	const node = layout.getLayoutNode(element);
+	const node = getLayoutNode(layout, element);
 	if (node === null) {
 		return;
 	}
@@ -683,7 +821,46 @@ function paintEntry(
 	if (rect === null) {
 		return;
 	}
-	paintBlock(painter, element, node, {x: rect.x, y: rect.y}, ctx, afterOwnBox);
+	const paint = () =>
+		paintBlock(
+			painter,
+			element,
+			node,
+			{x: rect.x, y: rect.y},
+			ctx,
+			afterOwnBox,
+		);
+	// A box an inline-block lays out has its extents counted from that
+	// box's own root, so the band is counted from there too, as it is when
+	// the inline-block paints its content.
+	const frame = getExtentFrame(node);
+	const extent = frame === undefined ? undefined : paintExtent(node, frame);
+	if (
+		frame === undefined || extent === undefined || frame === layout.initialBlock
+	) {
+		paint();
+		return;
+	}
+	paintInFrame(painter, frame, extent.origin - Math.round(rect.y), paint);
+}
+
+// Paint with the band counted in another frame's rows.
+function paintInFrame(
+	painter: Painter,
+	frame: LayoutNode,
+	scrolledRows: number,
+	paint: () => void,
+): void {
+	const previousFrame = painter.frame;
+	const previousScrolled = painter.scrolledRows;
+	painter.frame = frame;
+	painter.scrolledRows = scrolledRows;
+	try {
+		paint();
+	} finally {
+		painter.frame = previousFrame;
+		painter.scrolledRows = previousScrolled;
+	}
 }
 
 function isOutsideViewport(
@@ -692,12 +869,12 @@ function isOutsideViewport(
 	node: LayoutNode,
 	element: Element | null,
 ): boolean {
-	const extent = painter.layout.paintExtent(node);
+	const extent = paintExtent(node, painter.frame);
 	if (extent === undefined) {
 		return false;
 	}
-	const top = -ctx.viewportOffset + painter.scrolledRows;
-	const bottom = top + ctx.rows;
+	const top = -ctx.viewportOffset + painter.scrolledRows + ctx.bandTop;
+	const bottom = top + ctx.bandBottom - ctx.bandTop;
 	if (extent.bottom > top && extent.top < bottom) {
 		return false;
 	}
@@ -724,8 +901,8 @@ function paintBlock(
 	const rect: Rect = {
 		left: origin.x,
 		top: origin.y,
-		width: node.getComputedWidth(),
-		height: node.getComputedHeight(),
+		width: getComputedWidth(node),
+		height: getComputedHeight(node),
 	};
 	paintBox(painter, style, [rect], rect, ctx);
 	if (style.visible) {
@@ -740,7 +917,7 @@ function paintBlock(
 
 	if (isReplacedBox(element)) {
 		paintReplaced(element, style, rect, ctx);
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 
@@ -749,13 +926,13 @@ function paintBlock(
 		if (style.visible) {
 			renderMath(painter, element, rect, ctx);
 		}
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 	paintContent(painter, element, style, rect, ctx, (origin) => {
 		paintNodes(painter, node, origin, ctx);
 	});
-	paintOutline(painter, element, style, rect, ctx);
+	paintOutline(element, style, rect, ctx);
 }
 
 function paintContent(
@@ -822,18 +999,14 @@ function paintContent(
 			// The box lays its content out from 0, so what the viewport shows
 			// of it is counted from where it paints, not from the document.
 			const top = origin.y + style.contentInsetY;
-			const scrolled = painter.scrolledRows;
-			painter.scrolledRows = -top;
-			try {
+			paintInFrame(painter, context, -top, () =>
 				paintNodes(
 					painter,
 					context,
 					{x: origin.x + style.contentInsetX, y: top},
 					ctx,
-				);
-			} finally {
-				painter.scrolledRows = scrolled;
-			}
+				),
+			);
 		} else {
 			paintLayoutChildren(origin);
 		}
@@ -926,7 +1099,7 @@ function paintOverflowMarkers(
 			continue;
 		}
 		if (markers.left !== "" && span.left < clip.left) {
-			ctx.drawText(markers.left, clip.left, row, style.cell);
+			drawText(ctx, markers.left, clip.left, row, style.cell);
 		}
 		if (
 			markers.right !== "" &&
@@ -934,7 +1107,7 @@ function paintOverflowMarkers(
 			Number.isFinite(clip.right)
 		) {
 			const width = ctx.measureText(markers.right).width;
-			ctx.drawText(markers.right, clip.right - width, row, style.cell);
+			drawText(ctx, markers.right, clip.right - width, row, style.cell);
 		}
 	}
 }
@@ -957,20 +1130,22 @@ function paintNodes(
 	const layout = painter.layout;
 	for (const child of visibleChildren(painter, ctx, node)) {
 		const owner = child.owner as Node | null;
+		const childOrigin = {
+			x: origin.x + child.grid.left,
+			y: origin.y + child.grid.top,
+		};
+		// An anonymous table paints nothing of its own, only its parts.
 		if (owner === null) {
+			paintNodes(painter, child, childOrigin, ctx);
 			continue;
 		}
-		const childOrigin = {
-			x: origin.x + child.result.left,
-			y: origin.y + child.result.top,
-		};
-		const run = layout.getRun(child);
+		const run = getRun(layout, child);
 		if (run !== null) {
 			paintRun(painter, run, childOrigin, ctx);
 		} else if (
 			nodeTypeOf(owner) === owner.ELEMENT_NODE &&
 			(owner instanceof HTMLElement || isMathRoot(owner)) &&
-			!layout.hoistedToLayer(owner as Element)
+			!hoistedToLayer(layout, owner as Element)
 		) {
 			paintBlock(painter, owner as Element, child, childOrigin, ctx);
 		}
@@ -984,15 +1159,15 @@ function visibleChildren(
 ): LayoutNode[] {
 	const layout = painter.layout;
 	const children = node.children;
-	const top = -ctx.viewportOffset + painter.scrolledRows;
-	const bottom = top + ctx.rows;
-	const extent = layout.paintExtent(node);
+	const top = -ctx.viewportOffset + painter.scrolledRows + ctx.bandTop;
+	const bottom = top + ctx.bandBottom - ctx.bandTop;
+	const extent = paintExtent(node, painter.frame);
 	const owner = node.owner as Node | null;
 	if (
 		extent === undefined ||
 		extent.unstackedChildren !== 0 ||
+		!extent.rowOrdered ||
 		node.measure !== null ||
-		node.style.displayType !== "block" ||
 		(owner !== null &&
 			nodeTypeOf(owner) === owner.ELEMENT_NODE &&
 			layout.getBox(owner as Element)?.holdsFragments === true)
@@ -1003,7 +1178,7 @@ function visibleChildren(
 	let hi = children.length;
 	while (lo < hi) {
 		const mid = (lo + hi) >>> 1;
-		const childExtent = layout.paintExtent(children[mid]);
+		const childExtent = paintExtent(children[mid], painter.frame);
 		if (childExtent !== undefined && childExtent.bottom <= top) {
 			lo = mid + 1;
 		} else {
@@ -1012,7 +1187,7 @@ function visibleChildren(
 	}
 	const visible: LayoutNode[] = [];
 	for (let i = lo; i < children.length; i++) {
-		const childExtent = layout.paintExtent(children[i]);
+		const childExtent = paintExtent(children[i], painter.frame);
 		if (childExtent !== undefined && childExtent.top >= bottom) {
 			break;
 		}
@@ -1033,7 +1208,8 @@ function paintBox(
 	}
 	if (style.fill !== null) {
 		for (const fragment of fragments) {
-			ctx.drawRect(
+			drawRect(
+				ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top),
 				Math.round(fragment.width),
@@ -1057,7 +1233,8 @@ function paintBox(
 		}
 	}
 	if (style.border !== null) {
-		ctx.drawBox(
+		drawBox(
+			ctx,
 			Math.round(rect.left),
 			Math.round(rect.top),
 			Math.round(rect.width),
@@ -1071,14 +1248,17 @@ function paintBox(
 // box's fragments, so an inline broken across lines is marked along
 // its own text on each line and not across the union of them.
 function paintOutline(
-	painter: Painter,
 	element: Element,
 	style: PaintStyle,
 	rect: Rect,
 	ctx: CellContext,
 	fragments: readonly Rect[] = [rect],
 ): void {
-	if (!style.visible || style.outlineColor === null) {
+	// A box paints only the rows it covers, which is what its extent
+	// says, so one with no height has no row to ring.
+	if (
+		!style.visible || style.outlineColor === null || Math.round(rect.height) < 1
+	) {
 		return;
 	}
 	const color = style.outlineColor;
@@ -1087,7 +1267,7 @@ function paintOutline(
 		const ring =
 			(line: LineStyle["style"] | undefined): LineStyle | undefined =>
 				line && {style: line, color};
-		ctx.drawBox(
+		drawBox(ctx,
 			Math.round(rect.left),
 			Math.round(rect.top),
 			Math.round(rect.width),
@@ -1105,13 +1285,16 @@ function paintOutline(
 		);
 	} else {
 		for (const fragment of fragments) {
-			ctx.drawDecoration(
+			if (Math.round(fragment.height) < 1) {
+				continue;
+			}
+			drawDecoration(ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top),
 				Math.round(fragment.width),
 				{overline: true, fg: color},
 			);
-			ctx.drawDecoration(
+			drawDecoration(ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top + fragment.height) - 1,
 				Math.round(fragment.width),
@@ -1176,7 +1359,7 @@ function setCaretAt(
 	const lift = painter.layout.isInFixedSpace(element)
 		? painter.framebuffer.scrollTop
 		: 0;
-	ctx.setCaret(x, y + lift);
+	setCaret(ctx, x, y + lift);
 }
 
 // A run's lines, from the box that broke them. The origin is the run's
@@ -1242,11 +1425,10 @@ function paintMember(
 	const element = node as Element;
 	const leaf = run.leaves.get(element);
 	if (leaf !== undefined) {
-		const height = getAtomicHeight(element, leaf.leaf, leaf.rect.height);
-		paintAtomic(painter, element, leaf.leaf, {...leaf.rect, height}, ctx);
+		paintAtomic(painter, element, leaf.leaf, leaf.rect, ctx);
 		return;
 	}
-	if (painter.layout.hoistedToLayer(element)) {
+	if (hoistedToLayer(painter.layout, element)) {
 		return;
 	}
 	paintInline(painter, element, run, ctx);
@@ -1273,7 +1455,7 @@ function paintInline(
 		paintMember(painter, child, run, ctx);
 	}
 	if (rect !== null) {
-		paintOutline(painter, element, style, rect, ctx, fragments);
+		paintOutline(element, style, rect, ctx, fragments);
 	}
 }
 
@@ -1291,7 +1473,7 @@ function paintInlineBorder(
 	const first = fragments[0];
 	const last = fragments[fragments.length - 1];
 	if (style.border.left) {
-		ctx.drawBox(
+		drawBox(ctx,
 			Math.round(first.left),
 			Math.round(first.top),
 			1,
@@ -1300,7 +1482,7 @@ function paintInlineBorder(
 		);
 	}
 	if (style.border.right) {
-		ctx.drawBox(
+		drawBox(ctx,
 			Math.round(last.left + last.width) - 1,
 			Math.round(last.top),
 			1,
@@ -1351,14 +1533,14 @@ function paintAtomic(
 
 	if (isReplacedBox(element)) {
 		paintReplaced(element, style, rect, ctx);
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 	if (isMathRoot(element)) {
 		if (style.visible) {
 			renderMath(painter, element, rect, ctx);
 		}
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 	paintContent(painter, element, style, rect, ctx, (origin) => {
@@ -1378,7 +1560,7 @@ function paintAtomic(
 			);
 		}
 	});
-	paintOutline(painter, element, style, rect, ctx);
+	paintOutline(element, style, rect, ctx);
 }
 
 function resolveRun(
@@ -1463,9 +1645,9 @@ function resolveRun(
 				const shift = getShift(leaf.node);
 				const rect = {
 					left: lineX + segment.x + shift.x,
-					top: lineY + shift.y,
+					top: lineY + segment.dy + shift.y,
 					width: segment.width,
-					height: line.height,
+					height: segment.height,
 				};
 				run.leaves.set(leaf.node, {rect, leaf});
 				coverAncestors(boxLines, leaf.node, container, lineY, rect);
@@ -1475,9 +1657,9 @@ function resolveRun(
 				const shift = getShift(leaf.node);
 				const rect = {
 					left: lineX + segment.x + shift.x,
-					top: lineY + shift.y,
+					top: lineY + line.textTop + shift.y,
 					width: segment.width,
-					height: line.height,
+					height: line.height - line.textTop,
 				};
 				coverAncestors(boxLines, leaf.node, container, lineY, rect);
 				const margin = Math.max(0, leaf.margin);
@@ -1492,9 +1674,9 @@ function resolveRun(
 			const shift = getShift(textNode);
 			const rect = {
 				left: span.left + shift.x,
-				top: lineY + shift.y,
+				top: lineY + line.textTop + shift.y,
 				width: span.right - span.left,
-				height: line.height,
+				height: line.height - line.textTop,
 			};
 			let fragments = run.texts.get(textNode);
 			if (fragments === undefined) {
@@ -1592,7 +1774,8 @@ function paintText(
 			continue;
 		}
 		painted = true;
-		ctx.drawText(
+		drawText(
+			ctx,
 			applyTextTransform(text, style.textTransform),
 			Math.round(fragment.rect.left),
 			Math.round(fragment.rect.top),
@@ -1633,7 +1816,7 @@ function renderOutsideMarker(
 	}
 	painter.renderedOutsideMarkers.add(element);
 
-	const markerContent = painter.cascade.getMarkerContent(element);
+	const markerContent = getMarkerContent(painter.cascade, element);
 	if (!markerContent) {
 		return;
 	}
@@ -1641,27 +1824,7 @@ function renderOutsideMarker(
 	// Cells, not code units. "日本 " is 3 characters and 5 cells.
 	const markerWidth = ctx.measureText(markerContent).width;
 
-	const markerColor =
-		getComputedValue(element, "color", "::marker") ||
-		getComputedValue(element, "color");
-	const {bold: markerBold, dim: markerDim} = resolveFontWeight(
-		getComputedValue(element, "font-weight", "::marker"),
-	);
-	const markerItalic =
-		getComputedValue(element, "font-style", "::marker") === "italic";
-	const markerUnderline = CSSValues.parseTextDecorationLine(
-		getComputedValue(element, "text-decoration-line", "::marker"),
-	).underline;
-
-	const markerTextStyle = {
-		fg: markerColor && markerColor !== "initial"
-			? CSSValues.numberFromCSSColor(markerColor)
-			: undefined,
-		bold: markerBold,
-		dim: markerDim,
-		italic: markerItalic,
-		underline: markerUnderline,
-	};
+	const markerTextStyle = getMarkerTextStyle(painter, element);
 
 	// Outside the content box, as css-lists-3 §3.3 places it. A marker
 	// that would start before the first column is clipped away whole,
@@ -1673,7 +1836,40 @@ function renderOutsideMarker(
 	if (markerX < 0) {
 		return;
 	}
-	ctx.drawText(markerContent, markerX, Math.round(rect.top), markerTextStyle);
+	drawText(ctx, markerContent, markerX, Math.round(rect.top), markerTextStyle);
+}
+
+// A marker's text style, by the object its element's style keeps until it
+// changes.
+const markerTextStyles = new WeakMap<object, CellStyle>();
+
+function getMarkerTextStyle(painter: Painter, element: Element): CellStyle {
+	const key = painter.cascade.getStyleKey(element);
+	const known = key === null ? undefined : markerTextStyles.get(key);
+	if (known !== undefined) {
+		return known;
+	}
+	const color =
+		getComputedValue(element, "color", "::marker") ||
+		getComputedValue(element, "color");
+	const {bold, dim} = resolveFontWeight(
+		getComputedValue(element, "font-weight", "::marker"),
+	);
+	const style: CellStyle = {
+		fg: color && color !== "initial"
+			? CSSValues.numberFromCSSColor(color)
+			: undefined,
+		bold,
+		dim,
+		italic: getComputedValue(element, "font-style", "::marker") === "italic",
+		underline: CSSValues.parseTextDecorationLine(
+			getComputedValue(element, "text-decoration-line", "::marker"),
+		).underline,
+	};
+	if (key !== null) {
+		markerTextStyles.set(key, style);
+	}
+	return style;
 }
 
 // A focused editing host parks the cursor at the document selection's
@@ -1720,7 +1916,7 @@ function renderMath(
 	rect: Rect,
 	ctx: CellContext,
 ): void {
-	const box = painter.layout.getMathBox(element);
+	const box = getMathBox(painter.layout, element);
 	const boxModel = getBoxModel(element);
 	const contentWidth =
 		Math.round(rect.width) -
@@ -1744,7 +1940,7 @@ function renderMath(
 		for (const cell of box.cells[row]) {
 			const style = getMathCellStyle(painter, cell, selections);
 			if (!isBlankCell(cell) || style !== cell.style) {
-				ctx.drawText(cell.text, x, top + row, style ?? undefined);
+				drawText(ctx, cell.text, x, top + row, style ?? undefined);
 			}
 			x += cell.width;
 		}
@@ -1913,7 +2109,7 @@ function readHighlightStyle(
 	name: string,
 ): HighlightPaint | null {
 	const pseudo = `::highlight(${name})`;
-	const declared = painter.cascade.declaredPseudoProperties(element, pseudo);
+	const declared = declaredPseudoProperties(painter.cascade, element, pseudo);
 	const parent = flatParentElement(element);
 	const inherited = parent === null
 		? null
@@ -2088,7 +2284,7 @@ function renderTextHighlights(
 			const paint = getHighlightStyle(painter, parent, run.name);
 			if (paint !== null) {
 				layers.push({
-					...painter.layout.snapToClusters(textNode, run.from, run.to),
+					...snapToClusters(painter.layout, textNode, run.from, run.to),
 					paint,
 				});
 			}
@@ -2099,7 +2295,7 @@ function renderTextHighlights(
 		const paint = readSelectionStyle(selected.selectionParent);
 		if (paint !== null) {
 			layers.push({
-				...painter.layout.snapToClusters(textNode, selected.from, selected.to),
+				...snapToClusters(painter.layout, textNode, selected.from, selected.to),
 				paint,
 			});
 		}
@@ -2118,7 +2314,8 @@ function renderTextHighlights(
 			continue;
 		}
 		for (const run of painter.layout.getTextSpans(textNode, from, to)) {
-			ctx.drawText(
+			drawText(
+				ctx,
 				applyTextTransform(run.text, textTransform),
 				run.rect.x,
 				run.rect.y,
diff --git a/src/internal/replaced.ts b/src/internal/replaced.ts
index dbd58ff7..504784ff 100644
--- a/src/internal/replaced.ts
+++ b/src/internal/replaced.ts
@@ -14,18 +14,16 @@
  * are cells.
  */
 import {type CanvasTextRun, halfBlockCell} from "./canvas.ts";
-import {
-	getBoxModel,
-	getCellSize,
-	getComputedValue,
-	getImageCellSize,
-	toCellLength,
-} from "./cssom.ts";
+import {getBoxModel, getComputedValue, toCellLength} from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
 	CellContext,
 	CellGrid,
 	type CellStyle,
+	cloneGrid,
+	drawBox,
+	drawGrid,
+	drawText,
 	settleBorders,
 } from "./framebuffer.ts";
 import {
@@ -39,6 +37,7 @@ import {
 	sampleBitmap,
 } from "./images.ts";
 import {getStringWidth} from "./text.ts";
+import {getCellSize, getImageCellSize} from "./units.ts";
 
 /**
  * Whether the element lays out as a replaced element. An image that is
@@ -458,7 +457,7 @@ function getBitmapCells(
 				under,
 			);
 			if (half !== null) {
-				cells.drawText(half.char, col, row, half.style);
+				drawText(cells, half.char, col, row, half.style);
 			}
 		}
 	}
@@ -478,7 +477,7 @@ function getSettledGrid(
 	if (cached?.version === content.version) {
 		return cached.grid;
 	}
-	const grid = source.clone();
+	const grid = cloneGrid(source);
 	settleBorders(grid);
 	settledGrids.set(source, {version: content.version, grid});
 	return grid;
@@ -545,7 +544,8 @@ export function renderReplaced(
 		if (content.kind === "text") {
 			drawPlaceholder(content.text, left, top, cols, rows, ctx, style);
 		} else if (content.kind === "grid") {
-			ctx.drawGrid(
+			drawGrid(
+				ctx,
 				getSettledGrid(content, content.fit(cols, rows)),
 				left,
 				top,
@@ -554,7 +554,8 @@ export function renderReplaced(
 		} else if (cols * rows * 2 <= MAX_IMAGE_PIXELS) {
 			// Past the limit the pixels a box samples are more than an image
 			// may hold, and like a canvas past it, the box shows nothing.
-			ctx.drawGrid(
+			drawGrid(
+				ctx,
 				getBitmapCells(element, content, cols, rows, under),
 				left,
 				top,
@@ -593,17 +594,17 @@ function drawPlaceholder(
 	style: CellStyle,
 ): void {
 	if (cols < 3 || rows < 3) {
-		ctx.drawText(fitText(text, cols), left, top, style);
+		drawText(ctx, fitText(text, cols), left, top, style);
 		return;
 	}
 	const side = {style: "solid" as const, color: style.fg};
-	ctx.drawBox(left, top, cols, rows, {
+	drawBox(ctx, left, top, cols, rows, {
 		top: side,
 		right: side,
 		bottom: side,
 		left: side,
 	});
-	ctx.drawText(fitText(text, cols - 2), left + 1, top + 1, style);
+	drawText(ctx, fitText(text, cols - 2), left + 1, top + 1, style);
 }
 
 // The text cut to `width` columns, with an ellipsis where it was cut.
@@ -674,7 +675,7 @@ function paintTextRuns(
 			continue;
 		}
 		const {r, g, b} = run.color;
-		ctx.drawText(run.text, left + col, top + row, {
+		drawText(ctx, run.text, left + col, top + row, {
 			fg: CSSValues.toCellColor(
 				(Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b),
 			),
diff --git a/src/internal/resources.ts b/src/internal/resources.ts
index 927f4c0b..7db7544c 100644
--- a/src/internal/resources.ts
+++ b/src/internal/resources.ts
@@ -7,7 +7,12 @@
  * Each redirect is checked against the policy again and followed on the
  * network. Only a document that is itself a file: URL loads file: URLs.
  */
-import {createFetchEvent, DOMException, getFetchResponse} from "./dom.ts";
+import {
+	createFetchEvent,
+	getFetchResponse,
+	getMetaPolicyTexts,
+	setRequestDestination,
+} from "./dom.ts";
 import {splitOnASCIIWhitespace} from "./text.ts";
 
 // A load goes to the global fetch, so a program that replaces it to mock
@@ -25,28 +30,13 @@ export function isWindowFetch(value: unknown): boolean {
 	return typeof value === "function" && windowFetches.has(value);
 }
 
-export function networkFetch(request: Request): Promise<Response> {
+function networkFetch(request: Request): Promise<Response> {
 	const current = globalThis.fetch;
 	return isWindowFetch(current) ? runtimeFetch(request) : current(request);
 }
 
 export {ExtendableEvent, FetchEvent, type FetchEventInit} from "./dom.ts";
 
-/**
- * Gives a request its Fetch destination, such as "image", which a
- * runtime's Request leaves empty.
- */
-export function setRequestDestination(
-	request: Request,
-	destination: RequestDestination,
-): void {
-	Object.defineProperty(request, "destination", {
-		value: destination,
-		enumerable: true,
-		configurable: true,
-	});
-}
-
 /** What a load knows of what asked for it. */
 interface RequestContext {
 	// The element that asked, where a policy violation is reported.
@@ -325,30 +315,22 @@ function whileNotAborted<T>(
 	});
 }
 
-// The policies a page stated for itself with <meta> in its head.
-const documentPolicies = new WeakMap<object, ContentSecurityPolicy[]>();
-
-/**
- * A `<meta http-equiv="Content-Security-Policy">` inserted as a child of
- * a head (HTML §4.2.5.3): its policy holds for the document from then on,
- * whatever later becomes of the element. A meta policy cannot report,
- * frame or sandbox, so those directives are dropped.
- */
-export function addDocumentPolicy(document: object, content: string): void {
-	const policy = parseContentSecurityPolicy(content);
-	for (const directive of ["report-uri", "frame-ancestors", "sandbox"]) {
-		policy.directives.delete(directive);
-	}
-	const policies = documentPolicies.get(document);
-	if (policies === undefined) {
-		documentPolicies.set(document, [policy]);
-	} else {
-		policies.push(policy);
-	}
-}
+const metaPolicies = new Map<string, ContentSecurityPolicy>();
 
+// The policies a page stated for itself with <meta> in its head. A meta
+// policy cannot report, frame or sandbox, so those directives are dropped.
 function getDocumentPolicies(document: object): ContentSecurityPolicy[] {
-	return documentPolicies.get(document) ?? [];
+	return getMetaPolicyTexts(document).map((content) => {
+		let policy = metaPolicies.get(content);
+		if (policy === undefined) {
+			policy = parseContentSecurityPolicy(content);
+			for (const directive of ["report-uri", "frame-ancestors", "sandbox"]) {
+				policy.directives.delete(directive);
+			}
+			metaPolicies.set(content, policy);
+		}
+		return policy;
+	});
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/internal/slots.ts b/src/internal/slots.ts
index 17184625..b62a59c7 100644
--- a/src/internal/slots.ts
+++ b/src/internal/slots.ts
@@ -10,8 +10,8 @@
  * through `_()`.
  *
  * The record's prototype mirrors the object's class chain. The internal
- * steps and defaults a class defines under symbol keys move there from
- * the public prototype, and run with the record as `this`, so a step
+ * steps and defaults a class defines under names that start with "_"
+ * move there from the public prototype, and run with the record as `this`, so a step
  * reads its own slots without a lookup. `ownerOf()` gives it the object.
  *
  * A family, such as every element, makes its records one way instead:
@@ -92,17 +92,11 @@ class Slot extends Stamp {
 	}
 }
 
-const WELL_KNOWN_SYMBOLS = new Set<symbol>(
-	Object.getOwnPropertyNames(Symbol)
-		.map((name) => (Symbol as unknown as Record<string, unknown>)[name])
-		.filter((value): value is symbol => typeof value === "symbol"),
-);
-
 const hiddenPrototypes = new Map<Constructor, object>();
 const roots = new Map<Constructor, Constructor>();
 const superSteps = new Map<
 	Constructor,
-	Map<symbol, (this: object, ...args: unknown[]) => unknown>
+	Map<string, (this: object, ...args: unknown[]) => unknown>
 >();
 const recordTypes = new Map<Constructor, new () => SlotRecord>();
 
@@ -114,7 +108,7 @@ interface Family {
 		steps: object,
 		extra: object | null,
 	) => SlotRecord;
-	dispatched: Set<symbol>;
+	dispatched: Set<string>;
 }
 
 interface FamilyPlan {
@@ -451,7 +445,7 @@ function getFamily(familyRoot: Constructor, root: Constructor): Family {
 // A step a class below the family's root defines is found through the
 // record's table, since the record's prototype is the family's.
 function addDispatchers(family: Family, hidden: object): void {
-	for (const key of Object.getOwnPropertySymbols(hidden)) {
+	for (const key of internalKeys(hidden)) {
 		if (family.dispatched.has(key)) {
 			continue;
 		}
@@ -471,7 +465,7 @@ function addDispatchers(family: Family, hidden: object): void {
 		} else {
 			Object.defineProperty(family.prototype, key, {
 				value(this: SlotRecord, ...args: unknown[]): unknown {
-					const step = (this[kSteps] as Record<symbol, unknown>)[key] as
+					const step = (this[kSteps] as Record<string, unknown>)[key] as
 						((...stepArgs: unknown[]) => unknown) | undefined;
 					return step === undefined ? undefined : step.apply(this, args);
 				},
@@ -639,7 +633,7 @@ export function isSealed(value: object): boolean {
  */
 export function superStep(
 	type: Constructor,
-	key: symbol,
+	key: string,
 ): (this: object, ...args: unknown[]) => unknown {
 	let steps = superSteps.get(type);
 	if (steps === undefined) {
@@ -657,17 +651,17 @@ export function superStep(
 }
 
 /** The internal step `key` as `type` defines or inherits it. */
-export function hiddenMember(
+function hiddenMember(
 	type: Constructor,
-	key: symbol,
+	key: string,
 ): (this: object, ...args: unknown[]) => unknown {
 	const hidden = hiddenPrototype(type, roots.get(type) ?? rootOf(type) ?? type);
-	const member = (hidden as Record<symbol, unknown>)[key];
+	const member = (hidden as Record<string, unknown>)[key];
 	return member as (this: object, ...args: unknown[]) => unknown;
 }
 
 /**
- * Moves the symbol-keyed members a module added to public prototypes
+ * Moves the internal members a module added to public prototypes
  * after their classes were first constructed. Called once the modules
  * have loaded.
  */
@@ -711,22 +705,21 @@ function hiddenPrototype(type: Constructor, root: Constructor): object {
 	return hidden;
 }
 
-function isMovable(key: symbol): boolean {
-	return !WELL_KNOWN_SYMBOLS.has(key) && Symbol.keyFor(key) === undefined;
+// No Web IDL member's name starts with "_", so none of these is one a
+// page should see.
+function internalKeys(object: object): string[] {
+	return Object.getOwnPropertyNames(object)
+		.filter((key) => key.startsWith("_"));
 }
 
 function hasMovableMembers(prototype: object): boolean {
-	return Object.getOwnPropertySymbols(prototype).some(isMovable);
+	return internalKeys(prototype).length > 0;
 }
 
 function moveMembers(prototype: object, hidden: object): void {
-	for (const key of Object.getOwnPropertySymbols(prototype)) {
-		if (!isMovable(key)) {
-			continue;
-		}
-
+	for (const key of internalKeys(prototype)) {
 		const descriptor = Object.getOwnPropertyDescriptor(prototype, key)!;
 		Object.defineProperty(hidden, key, descriptor);
-		delete (prototype as Record<symbol, unknown>)[key];
+		delete (prototype as Record<string, unknown>)[key];
 	}
 }
diff --git a/src/internal/text.ts b/src/internal/text.ts
index fee0f773..cdf224d6 100644
--- a/src/internal/text.ts
+++ b/src/internal/text.ts
@@ -27,11 +27,17 @@ export function splitOnASCIIWhitespace(value: string): string[] {
 	return trimmed === "" ? [] : trimmed.split(/[\t\n\f\r ]+/);
 }
 
-const ASCII_UPPER = /[A-Z]/;
-
 // What HTML and CSS case-fold with. Never the locale.
 export function toASCIILowercase(value: string): string {
-	if (!ASCII_UPPER.test(value)) {
+	let upper = false;
+	for (let i = 0; i < value.length; i++) {
+		const code = value.charCodeAt(i);
+		if (code >= 65 && code <= 90) {
+			upper = true;
+			break;
+		}
+	}
+	if (!upper) {
 		return value;
 	}
 	return value.replace(/[A-Z]/g, (character) =>
@@ -96,6 +102,20 @@ export const PRINTABLE_ASCII = /^[\x20-\x7e]*$/;
 // Bounded, so a stream of unique strings (a logger) cannot grow it.
 const widthCache = new LRUCache<string, number>(2 ** 14);
 
+const graphemeCache = new LRUCache<string, string[]>(2 ** 12);
+
+// The same array for the same short text, so a caller must not change it.
+export function getGraphemes(text: string): string[] {
+	let graphemes = graphemeCache.get(text);
+	if (graphemes === undefined) {
+		graphemes = Array.from(graphemeSegmenter.segment(text), (s) => s.segment);
+		if (text.length <= 256) {
+			graphemeCache.set(text, graphemes);
+		}
+	}
+	return graphemes;
+}
+
 // Advances the attached terminal reported that disagree with the tables
 // (Terminal.app advances ☀️ one cell and ⛅️ two, and no rule separates
 // them). Not a cache: a measurement of the one terminal, written once,
@@ -226,7 +246,7 @@ function getGraphemeWidth(cluster: string): number {
 
 	const code = cluster.codePointAt(0)!;
 
-	if (code < 32 || (code >= 0x7f && code < 0xa0)) {
+	if (isControlByte(code)) {
 		return 0;
 	}
 
diff --git a/src/internal/tree.ts b/src/internal/tree.ts
new file mode 100644
index 00000000..31235529
--- /dev/null
+++ b/src/internal/tree.ts
@@ -0,0 +1,249 @@
+/**
+ * The node tree as the engine reads it: node types, namespaces, the links
+ * between nodes and an element's attributes, read straight from their
+ * slots. Nothing here builds or changes a tree, so every module that walks
+ * one can import it without importing the DOM.
+ */
+import type {Attr, AttributeSlots, Document, Element, Node} from "./dom.ts";
+import type {Exchange} from "./exchange.ts";
+import {
+	_,
+	_maybe,
+	objectOf,
+	rememberObject,
+	type Slots,
+	slotsOf,
+} from "./slots.ts";
+import {toASCIILowercase} from "./text.ts";
+import type {CellSizeSetting} from "./units.ts";
+
+export const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+export const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
+export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+export const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
+export const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
+export const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+
+export const ELEMENT_NODE = 1;
+export const ATTRIBUTE_NODE = 2;
+export const TEXT_NODE = 3;
+export const CDATA_SECTION_NODE = 4;
+export const ENTITY_REFERENCE_NODE = 5;
+export const ENTITY_NODE = 6;
+export const PROCESSING_INSTRUCTION_NODE = 7;
+export const COMMENT_NODE = 8;
+export const DOCUMENT_NODE = 9;
+export const DOCUMENT_TYPE_NODE = 10;
+export const DOCUMENT_FRAGMENT_NODE = 11;
+export const NOTATION_NODE = 12;
+
+export function getRoot(node: Node): Node {
+	return _(node).treeRoot;
+}
+
+export function isInclusiveAncestor(ancestor: Node, node: Node): boolean {
+	let current: Node | null = node;
+	while (current !== null) {
+		if (current === ancestor) {
+			return true;
+		}
+		current = objectOf(_(current).parent);
+	}
+	return false;
+}
+
+/** The next node in tree order, or null once the walk leaves the root. */
+export function nextInTree(node: Node, root: Node): Node | null {
+	const nodeSlots = slotsOf(node);
+	if (nodeSlots.firstChild !== null) {
+		return rememberObject(nodeSlots.firstChild);
+	}
+	// The root is compared, not looked up, so a walk that calls this for
+	// every node keeps the node it is on in the lookup cache.
+	let current: Slots<Node> | null = nodeSlots;
+	while (current !== null && objectOf(current) !== root) {
+		if (current.next !== null) {
+			return rememberObject(current.next);
+		}
+		current = current.parent;
+	}
+	return null;
+}
+
+export function nextSlotsInTree(
+	node: Slots<Node>,
+	root: Slots<Node>,
+): Slots<Node> | null {
+	if (node.firstChild !== null) {
+		return node.firstChild;
+	}
+	let current: Slots<Node> | null = node;
+	while (current !== null && current !== root) {
+		if (current.next !== null) {
+			return current.next;
+		}
+		current = current.parent;
+	}
+	return null;
+}
+
+export function getParentNode(node: Node): Node | null {
+	return objectOf(_(node).parent);
+}
+
+export function getFirstChildNode(node: Node): Node | null {
+	return objectOf(_(node).firstChild);
+}
+
+export function getNextSiblingNode(node: Node): Node | null {
+	return objectOf(_(node).next);
+}
+
+export function getPreviousSiblingNode(node: Node): Node | null {
+	return objectOf(_(node).previous);
+}
+
+export function getElementChildren(parent: Node): Element[] {
+	const elements: Element[] = [];
+	for (let nodeSlots = _(parent).firstChild;
+		nodeSlots !== null;
+		nodeSlots = nodeSlots.next) {
+		const node = objectOf(nodeSlots);
+		if (nodeTypeOf(node) === ELEMENT_NODE) {
+			elements.push(node as Element);
+		}
+	}
+	return elements;
+}
+
+/**
+ * An element's attributes, as their slots, for engine code that reads
+ * them. `attributes` would build a live NamedNodeMap to hand out.
+ */
+export function getAttributeList(
+	element: globalThis.Element,
+): readonly AttributeSlots[] {
+	return _(element as Element).attributeList;
+}
+
+export function getAttributeByName(
+	element: Element,
+	qualifiedName: string,
+): Attr | null {
+	let name = qualifiedName;
+	const elementSlots = _(element);
+	if (
+		elementSlots.namespace === HTML_NAMESPACE &&
+		isHTMLDocument(elementSlots.document)
+	) {
+		name = toASCIILowercase(name);
+	}
+	for (const attribute of elementSlots.attributeList) {
+		if (attribute._qualifiedName === name) {
+			return objectOf(attribute);
+		}
+	}
+	return null;
+}
+
+export function isHTMLDocument(document: Document): boolean {
+	return _(document).extra.type === "html";
+}
+
+export function isElement(node: Node): node is Element {
+	return _(node).nodeType === ELEMENT_NODE;
+}
+
+/** The node's nodeType, read without going through the page's binding. */
+export function nodeTypeOf(node: globalThis.Node): number {
+	return _(node as Node).nodeType;
+}
+
+/** The node's ownerDocument, read without going through its binding. */
+export function ownerDocumentOf(node: globalThis.Node): Document | null {
+	const document = _(node as Node).document;
+	return document === (node as unknown) ? null : document;
+}
+
+/** The element's localName, read without going through its binding. */
+export function localNameOf(element: globalThis.Element): string {
+	return _(element as Element).localName;
+}
+
+/** Node's contains, for the engine's own calls. */
+export function containsOf(
+	node: globalThis.Node,
+	other: globalThis.Node | null | undefined,
+): boolean {
+	return other != null &&
+		isInclusiveAncestor(node as unknown as Node, other as unknown as Node);
+}
+
+/** The element's attribute's value, read without going through its binding. */
+export function attributeOf(
+	element: globalThis.Element,
+	qualifiedName: string,
+): string | null {
+	const attribute = getAttributeByName(element as Element, qualifiedName);
+	return attribute === null ? null : _(attribute).extra.value;
+}
+
+/** Whether the element has the attribute, without going through its binding. */
+export function hasAttributeOf(
+	element: globalThis.Element,
+	qualifiedName: string,
+): boolean {
+	return getAttributeByName(element as Element, qualifiedName) !== null;
+}
+
+/** The element's namespaceURI, read without going through its binding. */
+export function namespaceOf(element: globalThis.Element): string | null {
+	return _(element as Element).namespace;
+}
+
+export function parentElement(node: Node): Element | null {
+	const parent = objectOf(_(node).parent);
+	return parent !== null && isElement(parent) ? parent : null;
+}
+
+/** The terminal behind a document, while it is attached to one. */
+export function getDocumentExchange(
+	document: globalThis.Document | null,
+): Exchange | null {
+	if (document === null) {
+		return null;
+	}
+	const attached = getAttachedDocument(document as unknown as Document);
+	return attached === undefined ? null : _(attached).extra.exchange;
+}
+
+// A document that has been adopted. It renders, and knows what it
+// renders through.
+export type AttachedDocument = Document;
+
+export function getAttachedDocument(
+	node: globalThis.Node,
+): AttachedDocument | undefined {
+	const document = _(node as Node).document;
+	return _(document).extra.exchange !== undefined
+		? (document as AttachedDocument)
+		: undefined;
+}
+
+/** The cellSize option of the TermDOM drawing the node's document. */
+export function getCellSizeSetting(
+	node: globalThis.Node,
+): CellSizeSetting | undefined {
+	return _maybe(getAttachedDocument(node))?.extra.cellSize;
+}
+
+/**
+ * One cell in the terminal's pixels, as the framebuffer drawing the
+ * node's document has it, or null for a document no TermDOM draws.
+ */
+export function getCellPixels(
+	node: globalThis.Node,
+): Readonly<{width: number; height: number}> | null {
+	return _maybe(getAttachedDocument(node))?.extra.framebuffer.cellPixels ??
+		null;
+}
diff --git a/src/internal/units.ts b/src/internal/units.ts
new file mode 100644
index 00000000..2ab7ae70
--- /dev/null
+++ b/src/internal/units.ts
@@ -0,0 +1,68 @@
+/**
+ * What one terminal cell measures in CSS pixels, per document. Layout
+ * counts cells; everything a page writes or reads counts CSS pixels. At
+ * the default unit size the two are the same number.
+ */
+import {getCellPixels, getCellSizeSetting} from "./tree.ts";
+
+export interface CellSize {
+	width: number;
+	height: number;
+}
+
+export const UNIT_CELL: Readonly<CellSize> = {width: 1, height: 1};
+
+/**
+ * How the page's lengths map to cells: one CSS pixel a cell, the
+ * terminal's pixels once it reports them, or a size the program gives.
+ */
+export type CellSizeSetting = "unit" | "auto" | Readonly<CellSize>;
+
+export function getCellSize(node: Node | null | undefined): Readonly<CellSize> {
+	const setting = node ? getCellSizeSetting(node) : undefined;
+	if (setting === undefined || setting === "unit") {
+		return UNIT_CELL;
+	}
+	return setting === "auto" ? getCellPixels(node!)! : setting;
+}
+
+/**
+ * The cell an image's pixels divide by. An image's pixels are CSS
+ * pixels, so this is the page's cell. Under the unit cell that would be
+ * a cell per pixel, so the screen's cell stands in. A document no TermDOM
+ * draws has no screen, and draws no image.
+ */
+export function getImageCellSize(
+	node: Node | null | undefined,
+): Readonly<CellSize> {
+	const page = getCellSize(node);
+	if (page !== UNIT_CELL) {
+		return page;
+	}
+	return (node && getCellPixels(node)) ?? page;
+}
+
+/**
+ * CSS pixels along one axis as cells, fractions kept. Layout rounds the
+ * edges of the boxes it places, not each length, so lengths that add up
+ * still add up.
+ */
+export function cellsFromPx(
+	px: number,
+	vertical: boolean,
+	node: Node | null | undefined,
+): number {
+	const cell = getCellSize(node);
+	const size = vertical ? cell.height : cell.width;
+	return px / size;
+}
+
+/** Cells along one axis as CSS pixels. */
+export function pxFromCells(
+	cells: number,
+	vertical: boolean,
+	node: Node | null | undefined,
+): number {
+	const cell = getCellSize(node);
+	return cells * (vertical ? cell.height : cell.width);
+}
diff --git a/src/internal/webidl.ts b/src/internal/webidl.ts
index 4688ccec..0f1e97f0 100644
--- a/src/internal/webidl.ts
+++ b/src/internal/webidl.ts
@@ -125,10 +125,7 @@ function parseCheck(
 const lineages = new Map<Constructor, Set<Constructor>>();
 
 /** Whether objects `type` makes implement `owner`'s interface. */
-export function implementsInterface(
-	type: Constructor,
-	owner: Constructor,
-): boolean {
+function implementsInterface(type: Constructor, owner: Constructor): boolean {
 	let lineage = lineages.get(type);
 	if (lineage === undefined) {
 		lineage = new Set();
@@ -845,6 +842,27 @@ export function installInterfaces(
 	return interfaceObjects;
 }
 
+// Every window wraps the same operations, so each is parsed once.
+const windowOperations = new Map<string, Member | null>();
+
+function getWindowOperation(name: string): Member | null {
+	let member = windowOperations.get(name);
+	if (member === undefined) {
+		const text = DOM_INTERFACES.Window?.members.find(([key]) => key === name);
+		if (text === undefined || !text[1].startsWith("o")) {
+			member = null;
+		} else {
+			const classes = new Map<string, Constructor>();
+			for (const [type, interfaceName] of interfaceNames) {
+				classes.set(interfaceName, type);
+			}
+			member = parseMember(text[1], classes);
+		}
+		windowOperations.set(name, member);
+	}
+	return member;
+}
+
 /**
  * `implementation` as the member `name` of `window`, with the checks
  * Window's operation of that name makes. Called without an object, as a
@@ -855,15 +873,10 @@ export function windowMember(
 	name: string,
 	implementation: (...args: never[]) => unknown,
 ): (...args: unknown[]) => unknown {
-	const text = DOM_INTERFACES.Window?.members.find(([key]) => key === name);
-	if (text === undefined || !text[1].startsWith("o")) {
+	const member = getWindowOperation(name);
+	if (member === null) {
 		return implementation as (...args: unknown[]) => unknown;
 	}
-	const classes = new Map<string, Constructor>();
-	for (const [type, interfaceName] of interfaceNames) {
-		classes.set(interfaceName, type);
-	}
-	const member = parseMember(text[1], classes);
 	const wrapper = {
 		[name](this: unknown, ...args: unknown[]): unknown {
 			if (this != null && this !== window) {
diff --git a/src/internal/window.ts b/src/internal/window.ts
new file mode 100644
index 00000000..128a18e6
--- /dev/null
+++ b/src/internal/window.ts
@@ -0,0 +1,215 @@
+/**
+ * A window: the document's interfaces put together on one object, the
+ * DOM's, the CSSOM's and the canvas's, with the timers and the rest a
+ * script expects to find. It is built above all of them, so none of them
+ * has to import another to be on it.
+ */
+import {
+	CanvasGradient,
+	CanvasPattern,
+	CanvasRenderingContext2D,
+	ImageBitmap,
+	ImageData,
+	Path2D,
+} from "./canvas.ts";
+import {CSSOM_INTERFACES} from "./cssom.ts";
+import {
+	cloneStructured,
+	createWindowRegistry,
+	type Document,
+	DOMException,
+	HTMLImageElement,
+	parseHTMLDocument,
+	parseXMLDocument,
+	platform,
+	processTimers,
+	reportError,
+	runtime,
+	setAttributeOf,
+	startPendingImages,
+	toImageDimension,
+	Window,
+	windowTimers,
+} from "./dom.ts";
+import {_, prepareClasses} from "./slots.ts";
+import type {setTimeout} from "./timers.ts";
+import {type Constructor, installInterfaces, windowMember} from "./webidl.ts";
+
+// A window starts with its interfaces and the timers any script expects
+// to find. The display fills in the rest (sizing, scrolling, animation
+// frames, the clipboard) as it mounts the document.
+export function buildWindow(document: Document): Window {
+	const window = new Window(document) as unknown as Record<string, unknown>;
+	// HTML reports an exception a timer or a microtask lets escape, as it
+	// does a listener's, and the page goes on. The runtime's own would end
+	// the process.
+	const guard = (handler: unknown, args: unknown[]): unknown =>
+		typeof handler !== "function"
+			? handler
+			: () => {
+				try {
+					(handler as (...args: unknown[]) => void)(...args);
+				} catch (error) {
+					reportError(error, document);
+				}
+			};
+	// The page's outstanding timers, which stop with the window, by the
+	// number HTML hands the page for each: the runtime's own handle is the
+	// runtime's object.
+	const timers = new Map<number, ReturnType<typeof setTimeout>>();
+	windowTimers.set(window, timers);
+	let lastTimerId = 0;
+	const clearTimer = (id: unknown) => {
+		const key = Number(id);
+		const handle = timers.get(key);
+		if (handle !== undefined) {
+			timers.delete(key);
+			runtime.clearTimeout(handle);
+		}
+	};
+	processTimers.set(window, {
+		setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) =>
+			runtime.setTimeout(guard(handler, args) as () => void, timeout),
+		setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) =>
+			runtime.setInterval(guard(handler, args) as () => void, timeout),
+	});
+	Object.assign(
+		window,
+		getWindowClasses(),
+		Object.fromEntries(getInterfaceObjects()),
+		{
+		// The platform's DOMException, which is the one the DOM and the CSSOM
+		// throw. A caller's `instanceof DOMException` has to match the class
+		// the engine builds its errors from.
+			DOMException,
+			setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) => {
+				const guarded = guard(handler, args);
+				const id = ++lastTimerId;
+				timers.set(
+					id,
+					runtime.setTimeout(
+						(typeof guarded === "function"
+							? () => {
+								timers.delete(id);
+								(guarded as () => void)();
+							}
+							: guarded) as () => void,
+						timeout,
+					),
+				);
+				return id;
+			},
+			clearTimeout: clearTimer,
+			setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) => {
+				const id = ++lastTimerId;
+				timers.set(
+					id,
+					runtime.setInterval(guard(handler, args) as () => void, timeout),
+				);
+				return id;
+			},
+			clearInterval: clearTimer,
+			queueMicrotask: (callback: unknown) => {
+				if (typeof callback !== "function") {
+					throw new TypeError("queueMicrotask needs a function");
+				}
+				runtime.queueMicrotask(guard(callback, []) as () => void);
+			},
+			atob: runtime.atob,
+			btoa: runtime.btoa,
+			fetch: runtime.fetch,
+			structuredClone: (
+				value: unknown,
+				options: StructuredSerializeOptions = {},
+			) =>
+				(options.transfer ?? []).length > 0
+					? runtime.structuredClone(value, options)
+					: cloneStructured(value, "execute 'structuredClone' on 'Window'"),
+		});
+	// HTML's legacy factory: new Image(width, height) is an <img> in this
+	// window's document.
+	const Image = function Image(this: unknown, width?: number, height?: number) {
+		if (new.target === undefined) {
+			throw new TypeError("Image is a constructor");
+		}
+		const image = document.createElement("img");
+		if (width !== undefined) {
+			setAttributeOf(image, "width", String(toImageDimension(width)));
+		}
+		if (height !== undefined) {
+			setAttributeOf(image, "height", String(toImageDimension(height)));
+		}
+		return image;
+	} as unknown as typeof HTMLImageElement;
+	Object.defineProperty(Image, "prototype", {
+		value: HTMLImageElement.prototype,
+	});
+	window.Image = Image;
+	window.window = window;
+	window.self = window;
+	for (const name of Object.keys(window)) {
+		const value = window[name];
+		if (typeof value === "function" && /^[a-z]/.test(name)) {
+			window[name] = windowMember(
+				window,
+				name,
+				value as (...args: never[]) => unknown,
+			);
+		}
+	}
+	prepareClasses(Object.values(getWindowClasses()));
+	startPendingImages(document as unknown as globalThis.Document);
+	return window as unknown as Window;
+}
+
+// The classes a window exposes by name. Read when a window is made rather
+// than in the module's interface table: canvas.ts is part of the import
+// cycle through cssvalues, and a table built at module load would read
+// its classes before they exist when canvas.ts is the first module
+// imported.
+let windowClasses: Readonly<Record<string, Constructor>> | null = null;
+
+export function getWindowClasses(): Readonly<Record<string, Constructor>> {
+	windowClasses ??= {
+		...platform,
+		...CSSOM_INTERFACES,
+		CanvasGradient,
+		CanvasPattern,
+		CanvasRenderingContext2D,
+		ImageBitmap,
+		ImageData,
+		Path2D,
+	} as unknown as Record<string, Constructor>;
+	return windowClasses;
+}
+
+// The window's interface objects, laid out before the first document is
+// made, so that every platform object has its unforgeable members.
+export function getInterfaceObjects(): ReadonlyMap<string, Constructor> {
+	return installInterfaces(getWindowClasses());
+}
+
+/**
+ * Parse a document from markup and display it in a window of its own. An
+ * XML content type parses as XML, which is what a frame whose src names a
+ * .xml, .xhtml or .svg file holds.
+ */
+export function createWindow(
+	source: string,
+	url?: string,
+	contentType = "text/html",
+): Window {
+	getInterfaceObjects();
+	if (contentType === "text/html") {
+		return buildWindow(
+			parseHTMLDocument(source, url, true, createWindowRegistry()),
+		);
+	}
+	const document = parseXMLDocument(source, contentType);
+	const documentSlots = _(document);
+	documentSlots.registry = createWindowRegistry();
+	if (url !== undefined) {
+		documentSlots.extra.documentURL = url;
+	}
+	return buildWindow(document);
+}
diff --git a/tests/__snapshots__/email-fixtures.test.ts.snap b/tests/__snapshots__/email-fixtures.test.ts.snap
index 6d15a599..7bb4385c 100644
--- a/tests/__snapshots__/email-fixtures.test.ts.snap
+++ b/tests/__snapshots__/email-fixtures.test.ts.snap
@@ -40,7 +40,7 @@ exports[`email fixture: calendar-rtl.html 1`] = `
 6: 61-90 #1a73e8`;
 
 exports[`email fixture: card-percent-cell.html 1`] = `
-           xxxxxxxxx xxxxxxx xx xxxx                     xxxxxxxx xx xxxx xxxxxx xxxxxxxx
+           xxxxxxxxx xxxxxxx xx xxxx                     xxxxxxxx xx xxxx xxxxxx xxxxxxxx
 
 
 
@@ -55,6 +55,7 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 
 
 
+
            xxxxxx xx xxx xxxxxx xx xxxxxxxxx xxxx xxxxxxxxxx
 
            xxx xx xxxx xxx xxxxx xxxx xxxxx xx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxx xxxx
@@ -78,7 +79,7 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 
             ╭──────────────────────────────────────────────────────────────────────────╮
             │                                                                          │
-            │                          xxxxxx xx xxxxxxxxxx xx                         │
+            │                         xxxxxx xx xxxxxxxxxx xx                          │
             │                                                                          │
             │                                                                          │
             ╰──────────────────────────────────────────────────────────────────────────╯
@@ -246,9 +247,7 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 36: 7-93 #ffffff
 36: 93-100 #f5f5f5
 37: 0-7 #f5f5f5
-37: 7-12 #ffffff
-37: 12-88 #1b16b2
-37: 88-93 #ffffff
+37: 7-93 #ffffff
 37: 93-100 #f5f5f5
 38: 0-7 #f5f5f5
 38: 7-12 #ffffff
@@ -276,7 +275,9 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 42: 88-93 #ffffff
 42: 93-100 #f5f5f5
 43: 0-7 #f5f5f5
-43: 7-93 #ffffff
+43: 7-12 #ffffff
+43: 12-88 #1b16b2
+43: 88-93 #ffffff
 43: 93-100 #f5f5f5
 44: 0-7 #f5f5f5
 44: 7-93 #ffffff
@@ -284,9 +285,9 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 45: 0-7 #f5f5f5
 45: 7-93 #ffffff
 45: 93-100 #f5f5f5
-46: 0-1 #f5f5f5
-46: 1-99 #303345
-46: 99-100 #f5f5f5
+46: 0-7 #f5f5f5
+46: 7-93 #ffffff
+46: 93-100 #f5f5f5
 47: 0-1 #f5f5f5
 47: 1-99 #303345
 47: 99-100 #f5f5f5
@@ -445,7 +446,10 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 98: 99-100 #f5f5f5
 99: 0-1 #f5f5f5
 99: 1-99 #303345
-99: 99-100 #f5f5f5`;
+99: 99-100 #f5f5f5
+100: 0-1 #f5f5f5
+100: 1-99 #303345
+100: 99-100 #f5f5f5`;
 
 exports[`email fixture: ghost-article.html 1`] = `
 
@@ -495,6 +499,7 @@ exports[`email fixture: ghost-article.html 1`] = `
 
 
 
+
                                     xxxxxxx xx xxxxxxxx xxxxxxxx
 
                    xxxxxx x xxxx xxxxxx xx xx xxxxxx xx xxx xxxxxx xx xxx xxxxxxx
@@ -511,6 +516,14 @@ exports[`email fixture: ghost-article.html 1`] = `
 
 
 
+
+                            xxxx xxxx xxxx                xxxx xxxx xxxx
+
+
+
+                                                xxxxx
+
+
        ──────────────────────────────────────────────────────────────────────────────────────
 
 
@@ -617,13 +630,13 @@ exports[`email fixture: ghost-article.html 1`] = `
 51: 0-100 #faf9f5
 52: 0-100 #faf9f5
 53: 0-100 #faf9f5
-54: 0-44 #faf9f5
-54: 44-57 #191a16
-54: 57-100 #faf9f5
+54: 0-100 #faf9f5
 55: 0-44 #faf9f5
 55: 44-57 #191a16
 55: 57-100 #faf9f5
-56: 0-100 #faf9f5
+56: 0-44 #faf9f5
+56: 44-57 #191a16
+56: 57-100 #faf9f5
 57: 0-100 #faf9f5
 58: 0-100 #faf9f5
 59: 0-100 #faf9f5
@@ -683,7 +696,16 @@ exports[`email fixture: ghost-article.html 1`] = `
 113: 0-100 #faf9f5
 114: 0-100 #faf9f5
 115: 0-100 #faf9f5
-116: 0-100 #faf9f5`;
+116: 0-100 #faf9f5
+117: 0-100 #faf9f5
+118: 0-100 #faf9f5
+119: 0-100 #faf9f5
+120: 0-100 #faf9f5
+121: 0-100 #faf9f5
+122: 0-100 #faf9f5
+123: 0-100 #faf9f5
+124: 0-100 #faf9f5
+125: 0-100 #faf9f5`;
 
 exports[`email fixture: inline-block-button.html 1`] = `
 
@@ -709,6 +731,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
 
 
+
 
 
                                        XXXXXXXXXX XXX XXXXXXX
@@ -733,7 +756,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
                                                  ╭──────────────────────╮
                                                  │                      │
-                               GET TICKETS       │     WATCH ONLINE     │
+                               GET TICKETS       │     WATCH ONLINE     │
                                                  │                      │
                                                  ╰──────────────────────╯
 
@@ -809,6 +832,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
 
 
+
                                        xxxxxxx xxxxxx xx xxxx
 
                 xxxxx xxx xxx xx xxxx xxxx xxxx xxxxxxxxx xxx xxxxxxx xxxxx xxxxxxx
@@ -842,6 +866,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
 
 
+
                                      XXXXX XXXX XX XX XXX XXXXX
 
                                        xxx xxxxxx xxxxxxxxxx
@@ -904,7 +929,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 4: 7-93 #ffffff
 4: 93-100 #e7e9ed
 5: 0-7 #e7e9ed
-5: 7-93 #1c2127
+5: 7-93 #ab2914
 5: 93-100 #e7e9ed
 6: 0-7 #e7e9ed
 6: 7-93 #1c2127
@@ -985,7 +1010,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 31: 7-93 #1c2127
 31: 93-100 #e7e9ed
 32: 0-7 #e7e9ed
-32: 7-93 #ffffff
+32: 7-93 #1c2127
 32: 93-100 #e7e9ed
 33: 0-7 #e7e9ed
 33: 7-93 #ffffff
@@ -1015,9 +1040,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 41: 7-93 #ffffff
 41: 93-100 #e7e9ed
 42: 0-7 #e7e9ed
-42: 7-20 #ffffff
-42: 20-80 #600820
-42: 80-93 #ffffff
+42: 7-93 #ffffff
 42: 93-100 #e7e9ed
 43: 0-7 #e7e9ed
 43: 7-20 #ffffff
@@ -1030,12 +1053,12 @@ exports[`email fixture: inline-block-button.html 1`] = `
 44: 80-93 #ffffff
 44: 93-100 #e7e9ed
 45: 0-7 #e7e9ed
-45: 7-93 #ffffff
+45: 7-20 #ffffff
+45: 20-80 #600820
+45: 80-93 #ffffff
 45: 93-100 #e7e9ed
 46: 0-7 #e7e9ed
-46: 7-26 #ffffff
-46: 26-47 #600820
-46: 47-93 #ffffff
+46: 7-93 #ffffff
 46: 93-100 #e7e9ed
 47: 0-7 #e7e9ed
 47: 7-26 #ffffff
@@ -1058,7 +1081,9 @@ exports[`email fixture: inline-block-button.html 1`] = `
 50: 47-93 #ffffff
 50: 93-100 #e7e9ed
 51: 0-7 #e7e9ed
-51: 7-93 #ffffff
+51: 7-26 #ffffff
+51: 26-47 #600820
+51: 47-93 #ffffff
 51: 93-100 #e7e9ed
 52: 0-7 #e7e9ed
 52: 7-93 #ffffff
@@ -1073,7 +1098,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 55: 7-93 #ffffff
 55: 93-100 #e7e9ed
 56: 0-7 #e7e9ed
-56: 7-93 #1c2127
+56: 7-93 #ffffff
 56: 93-100 #e7e9ed
 57: 0-7 #e7e9ed
 57: 7-93 #1c2127
@@ -1102,7 +1127,9 @@ exports[`email fixture: inline-block-button.html 1`] = `
 65: 0-7 #e7e9ed
 65: 7-93 #1c2127
 65: 93-100 #e7e9ed
-66: 0-100 #e7e9ed
+66: 0-7 #e7e9ed
+66: 7-93 #1c2127
+66: 93-100 #e7e9ed
 67: 0-100 #e7e9ed
 68: 0-100 #e7e9ed
 69: 0-100 #e7e9ed
@@ -1158,11 +1185,9 @@ exports[`email fixture: inline-block-button.html 1`] = `
 119: 0-100 #e7e9ed
 120: 0-100 #e7e9ed
 121: 0-100 #e7e9ed
-122: 0-7 #e7e9ed
-122: 7-93 #f6e3dd
-122: 93-100 #e7e9ed
+122: 0-100 #e7e9ed
 123: 0-7 #e7e9ed
-123: 7-93 #f6e3dd
+123: 7-93 #ab2914
 123: 93-100 #e7e9ed
 124: 0-7 #e7e9ed
 124: 7-93 #f6e3dd
@@ -1186,14 +1211,10 @@ exports[`email fixture: inline-block-button.html 1`] = `
 130: 7-93 #f6e3dd
 130: 93-100 #e7e9ed
 131: 0-7 #e7e9ed
-131: 7-19 #f6e3dd
-131: 19-81 #ffffff
-131: 81-93 #f6e3dd
+131: 7-93 #f6e3dd
 131: 93-100 #e7e9ed
 132: 0-7 #e7e9ed
-132: 7-19 #f6e3dd
-132: 19-81 #ffffff
-132: 81-93 #f6e3dd
+132: 7-93 #f6e3dd
 132: 93-100 #e7e9ed
 133: 0-7 #e7e9ed
 133: 7-19 #f6e3dd
@@ -1222,16 +1243,12 @@ exports[`email fixture: inline-block-button.html 1`] = `
 137: 93-100 #e7e9ed
 138: 0-7 #e7e9ed
 138: 7-19 #f6e3dd
-138: 19-44 #ffffff
-138: 44-57 #1c2127
-138: 57-81 #ffffff
+138: 19-81 #ffffff
 138: 81-93 #f6e3dd
 138: 93-100 #e7e9ed
 139: 0-7 #e7e9ed
 139: 7-19 #f6e3dd
-139: 19-44 #ffffff
-139: 44-57 #1c2127
-139: 57-81 #ffffff
+139: 19-81 #ffffff
 139: 81-93 #f6e3dd
 139: 93-100 #e7e9ed
 140: 0-7 #e7e9ed
@@ -1243,12 +1260,16 @@ exports[`email fixture: inline-block-button.html 1`] = `
 140: 93-100 #e7e9ed
 141: 0-7 #e7e9ed
 141: 7-19 #f6e3dd
-141: 19-81 #ffffff
+141: 19-44 #ffffff
+141: 44-57 #1c2127
+141: 57-81 #ffffff
 141: 81-93 #f6e3dd
 141: 93-100 #e7e9ed
 142: 0-7 #e7e9ed
 142: 7-19 #f6e3dd
-142: 19-81 #ffffff
+142: 19-44 #ffffff
+142: 44-57 #1c2127
+142: 57-81 #ffffff
 142: 81-93 #f6e3dd
 142: 93-100 #e7e9ed
 143: 0-7 #e7e9ed
@@ -1267,20 +1288,20 @@ exports[`email fixture: inline-block-button.html 1`] = `
 145: 81-93 #f6e3dd
 145: 93-100 #e7e9ed
 146: 0-7 #e7e9ed
-146: 7-93 #f6e3dd
+146: 7-19 #f6e3dd
+146: 19-81 #ffffff
+146: 81-93 #f6e3dd
 146: 93-100 #e7e9ed
 147: 0-7 #e7e9ed
-147: 7-93 #f6e3dd
+147: 7-19 #f6e3dd
+147: 19-81 #ffffff
+147: 81-93 #f6e3dd
 147: 93-100 #e7e9ed
 148: 0-7 #e7e9ed
-148: 7-39 #f6e3dd
-148: 39-60 #600820
-148: 60-93 #f6e3dd
+148: 7-93 #f6e3dd
 148: 93-100 #e7e9ed
 149: 0-7 #e7e9ed
-149: 7-39 #f6e3dd
-149: 39-60 #600820
-149: 60-93 #f6e3dd
+149: 7-93 #f6e3dd
 149: 93-100 #e7e9ed
 150: 0-7 #e7e9ed
 150: 7-39 #f6e3dd
@@ -1288,10 +1309,14 @@ exports[`email fixture: inline-block-button.html 1`] = `
 150: 60-93 #f6e3dd
 150: 93-100 #e7e9ed
 151: 0-7 #e7e9ed
-151: 7-93 #f6e3dd
+151: 7-39 #f6e3dd
+151: 39-60 #600820
+151: 60-93 #f6e3dd
 151: 93-100 #e7e9ed
 152: 0-7 #e7e9ed
-152: 7-93 #f6e3dd
+152: 7-39 #f6e3dd
+152: 39-60 #600820
+152: 60-93 #f6e3dd
 152: 93-100 #e7e9ed
 153: 0-7 #e7e9ed
 153: 7-93 #f6e3dd
@@ -1300,13 +1325,13 @@ exports[`email fixture: inline-block-button.html 1`] = `
 154: 7-93 #f6e3dd
 154: 93-100 #e7e9ed
 155: 0-7 #e7e9ed
-155: 7-93 #ffffff
+155: 7-93 #f6e3dd
 155: 93-100 #e7e9ed
 156: 0-7 #e7e9ed
-156: 7-93 #ffffff
+156: 7-93 #f6e3dd
 156: 93-100 #e7e9ed
 157: 0-7 #e7e9ed
-157: 7-93 #ffffff
+157: 7-93 #ab2914
 157: 93-100 #e7e9ed
 158: 0-7 #e7e9ed
 158: 7-93 #ffffff
@@ -1348,28 +1373,28 @@ exports[`email fixture: inline-block-button.html 1`] = `
 170: 7-93 #ffffff
 170: 93-100 #e7e9ed
 171: 0-7 #e7e9ed
-171: 7-37 #ffffff
-171: 37-62 #600820
-171: 62-93 #ffffff
+171: 7-93 #ffffff
 171: 93-100 #e7e9ed
 172: 0-7 #e7e9ed
-172: 7-37 #ffffff
-172: 37-62 #600820
-172: 62-93 #ffffff
+172: 7-93 #ffffff
 172: 93-100 #e7e9ed
 173: 0-7 #e7e9ed
-173: 7-37 #ffffff
-173: 37-62 #600820
-173: 62-93 #ffffff
+173: 7-93 #ffffff
 173: 93-100 #e7e9ed
 174: 0-7 #e7e9ed
-174: 7-93 #ffffff
+174: 7-37 #ffffff
+174: 37-62 #600820
+174: 62-93 #ffffff
 174: 93-100 #e7e9ed
 175: 0-7 #e7e9ed
-175: 7-93 #ffffff
+175: 7-37 #ffffff
+175: 37-62 #600820
+175: 62-93 #ffffff
 175: 93-100 #e7e9ed
 176: 0-7 #e7e9ed
-176: 7-93 #ffffff
+176: 7-37 #ffffff
+176: 37-62 #600820
+176: 62-93 #ffffff
 176: 93-100 #e7e9ed
 177: 0-7 #e7e9ed
 177: 7-93 #ffffff
@@ -1381,13 +1406,13 @@ exports[`email fixture: inline-block-button.html 1`] = `
 179: 7-93 #ffffff
 179: 93-100 #e7e9ed
 180: 0-7 #e7e9ed
-180: 7-93 #1c2127
+180: 7-93 #ffffff
 180: 93-100 #e7e9ed
 181: 0-7 #e7e9ed
-181: 7-93 #1c2127
+181: 7-93 #ffffff
 181: 93-100 #e7e9ed
 182: 0-7 #e7e9ed
-182: 7-93 #1c2127
+182: 7-93 #ffffff
 182: 93-100 #e7e9ed
 183: 0-7 #e7e9ed
 183: 7-93 #1c2127
@@ -1428,17 +1453,26 @@ exports[`email fixture: inline-block-button.html 1`] = `
 195: 0-7 #e7e9ed
 195: 7-93 #1c2127
 195: 93-100 #e7e9ed
-196: 0-100 #e7e9ed
-197: 0-100 #e7e9ed
-198: 0-100 #e7e9ed
+196: 0-7 #e7e9ed
+196: 7-93 #1c2127
+196: 93-100 #e7e9ed
+197: 0-7 #e7e9ed
+197: 7-93 #1c2127
+197: 93-100 #e7e9ed
+198: 0-7 #e7e9ed
+198: 7-93 #1c2127
+198: 93-100 #e7e9ed
 199: 0-100 #e7e9ed
 200: 0-100 #e7e9ed
 201: 0-100 #e7e9ed
 202: 0-100 #e7e9ed
 203: 0-100 #e7e9ed
-204: 0-100 #ffffff
-205: 0-100 #ffffff
-206: 0-100 #ffffff`;
+204: 0-100 #e7e9ed
+205: 0-100 #e7e9ed
+206: 0-100 #e7e9ed
+207: 0-100 #ffffff
+208: 0-100 #ffffff
+209: 0-100 #ffffff`;
 
 exports[`email fixture: inline-code.html 1`] = `
 
@@ -2194,7 +2228,7 @@ exports[`email fixture: notes-digest-row.html 1`] = `
                  │            xxxx xxxx xxxxx xxx xxxxxxxxx xxxxxx xx xxxxxx      │
                  │            xxxx x xxxxxxx xxxx xx xxxxxxx x xxxxxxx xxx        │
                  │            xxxxxxxxxxx xxx xxxxx xxx xxxx xxxx xxxxxx xxxx     │
-                 │            xx xxx xx xxxxxxx xxxxxxxxxx xxx xxx xxxx xxxxx     │
+                 │            xx xxx xx xxxxxxx xxxxxxxxxx xxx xxx xxxx xxxxx     │
                  │            xxxxx xx xxx xxxxxxx xxxxxxxx xx xxxxx xx xx        │
                  │            xxxxxx xxxxx xx xxxxx xxx xxxxxxxxx xxxxx           │
                  │            xxxxxxxx xxxxxxxxxx xxxx xxxxx xxxxxx xxxx xxx      │
@@ -2520,11 +2554,11 @@ exports[`email fixture: post-buttons-mention.html 1`] = `
            xxx xxxxxxxx xxxx xxxx xxx xxxxxxxx xxx xxxxxxxxxxxxxxxx xx xxxxx xxxxxxxxx xx
            xxxxx xxxxxxxxx xx xxx xxxxx xxxxxxxxxx xxx xxxxxxxx xx xxxxxx xx xxx xxxxxxxx
            xx xxxxxxxxx xx xxxxxxx xx xxxxx xxxx xxx xxxx xx xxxxxxxxxx xx xx xxxxx xxxxx
-           xxxxxx xxxxx xxxxxxxxxx xxxx xxxxxxxxxx xxxx xxxx xxxx xxxxx xxx xxxxx xxxxxxxx
-           xxxx xxxxxxxx xxxxxxxx xxxx x xxxxxxxxxxx xx xxxx xxxxx xxxxxxxx xx xxxxx xxx
-           xxxxxxxxx xx xxxx xxxxxxx xxxxxxx xxxx xxxxx xxxxxxx xx xxxx xxxx xxx xxxx
-           xxxxxxxxxx xxxx xx xxxx xxxxx xxx xxxxx xxx xxxx xxxxxx xxx xxxxxx xxx xxxxxxxx
-           xx xxxxxxxxxx xxxx xx xxx xxxxxxxxxxx
+           xxxxxx xxxxx xxxxxxxxxx xxxx xxxxxxxxxx xxxx xxxx xxxx xxxxx xxx xxxxx
+           xxxxxxxx xxxx xxxxxxxx xxxxxxxx xxxx x xxxxxxxxxxx xx xxxx xxxxx xxxxxxxx xx
+           xxxxx xxx xxxxxxxxx xx xxxx xxxxxxx xxxxxxx xxxx xxxxx xxxxxxx xx xxxx xxxx
+           xxx xxxx xxxxxxxxxx xxxx xx xxxx xxxxx xxx xxxxx xxx xxxx xxxxxx xxx xxxxxx
+           xxx xxxxxxxx xx xxxxxxxxxx xxxx xx xxx xxxxxxxxxxx
 
            xx xxxx xx xxxxxxx xxx xxxxxxxx xx xxxxx xxxx xxxxx xx xxxxxxxxx xxxxxx
            xxxxxxxxx xxx xxxx xxxxxxxxxxx xxxxxxxxxx xxx xxxxxxx xxxxxxxx xxxxx xx
@@ -2540,8 +2574,8 @@ exports[`email fixture: post-buttons-mention.html 1`] = `
                 xxxxxxx xxx xxxxxxxxxxx xx x xxxxxxxxxxx xxxxx xxxxxxx xxx xxxxxxx
                 xxxxxxxx xxxxxxx xxxxx xxxxxxxxxx xxx xxxxxxxx xxxxxxxxxx xxxxxxx
                 xxxxxxx xxxxx xx xxxxxxx xxxxxxxxx xxxxxx xx xxxxxx xxx xxxxxxxxx
-                xxxxxxx xxx xxxxxxxxxx xxx xxxx xxxxx xxxxxxxxxxx xx xxxxxxxx xxxxxxx
-                xx xxxxx xxxxx
+                xxxxxxx xxx xxxxxxxxxx xxx xxxx xxxxx xxxxxxxxxxx xx xxxxxxxx
+                xxxxxxx xx xxxxx xxxxx
 
 
                                              xxxxx xxxx
diff --git a/tests/__snapshots__/inline-block.test.ts.snap b/tests/__snapshots__/inline-block.test.ts.snap
index 7438ff69..dfca17d0 100644
--- a/tests/__snapshots__/inline-block.test.ts.snap
+++ b/tests/__snapshots__/inline-block.test.ts.snap
@@ -73,8 +73,8 @@ exports[`inline-block with explicit width 1`] = `   [38;2;255;25
 `;
 
 exports[`inline-block with height 1`] = `TallNormal                              
-                                        
-                                        
+                                        
+                                        
                                         
                                         
                                         
diff --git a/tests/ansi-fixtures.ts b/tests/ansi-fixtures.ts
index 0c60ef98..7712eb56 100644
--- a/tests/ansi-fixtures.ts
+++ b/tests/ansi-fixtures.ts
@@ -7,8 +7,19 @@
  * that alters a single byte fails the fixture test.
  */
 import type {ColorDepth} from "../src/internal/exchange.ts";
-import {type CellStyle, Framebuffer} from "../src/internal/framebuffer.ts";
-import type {CellContext} from "../src/internal/framebuffer.ts";
+import {
+	type CellContext,
+	type CellStyle,
+	drawBox,
+	drawDecoration,
+	drawRect,
+	drawText,
+	Framebuffer,
+	repaintAll,
+	replaced,
+	setCaret,
+	wrappedRowsAbovePark,
+} from "../src/internal/framebuffer.ts";
 import {renderFrame, renderStatic} from "./test-utils.js";
 
 export interface Scenario {
@@ -57,8 +68,8 @@ function attributeSweep(colorDepth: ColorDepth): string {
 	);
 	return renderFrame(framebuffer, {offset: 0}, (ctx) => {
 		EVERY_ATTRIBUTE.forEach(([label, style], row) => {
-			ctx.drawText(label.padEnd(12), 0, row, style);
-			ctx.drawText("Sample", 14, row, style);
+			drawText(ctx, label.padEnd(12), 0, row, style);
+			drawText(ctx, "Sample", 14, row, style);
 		});
 	});
 }
@@ -75,20 +86,20 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(4, 40, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("AB", 0, 0, {bold: true, underline: true, fg: 0xff0000});
-				ctx.drawText("CD", 2, 0, {underline: true, fg: 0xff0000});
-				ctx.drawText("EF", 4, 0, {
+				drawText(ctx, "AB", 0, 0, {bold: true, underline: true, fg: 0xff0000});
+				drawText(ctx, "CD", 2, 0, {underline: true, fg: 0xff0000});
+				drawText(ctx, "EF", 4, 0, {
 					underline: true,
 					underlineStyle: "double",
 					fg: 0xff0000,
 				});
-				ctx.drawText("GH", 6, 0, {underline: true, fg: 0xff0000});
-				ctx.drawText("IJ", 8, 0, {fg: 0xff0000});
-				ctx.drawText("KL", 10, 0, {});
-				ctx.drawText("MN", 12, 0, {inverse: true, blink: true, dim: true});
-				ctx.drawText("OP", 14, 0, {strikethrough: true, overline: true});
-				ctx.drawText("QR", 16, 0, {italic: true, bg: 0x008000});
-				ctx.drawText("ST", 18, 0);
+				drawText(ctx, "GH", 6, 0, {underline: true, fg: 0xff0000});
+				drawText(ctx, "IJ", 8, 0, {fg: 0xff0000});
+				drawText(ctx, "KL", 10, 0, {});
+				drawText(ctx, "MN", 12, 0, {inverse: true, blink: true, dim: true});
+				drawText(ctx, "OP", 14, 0, {strikethrough: true, overline: true});
+				drawText(ctx, "QR", 16, 0, {italic: true, bg: 0x008000});
+				drawText(ctx, "ST", 18, 0);
 			});
 		},
 	},
@@ -97,16 +108,16 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(8, 30, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("CJK 日本語 end", 0, 0);
-				ctx.drawText("emoji 👍🏽 end", 0, 1);
-				ctx.drawText("zwj 👨‍👩‍👧‍👦 end", 0, 2);
-				ctx.drawText("flag 🇯🇵 end", 0, 3);
-				ctx.drawText("combining éxá end", 0, 4);
-				ctx.drawText("styled 日本", 0, 5, {fg: 0xff0000, bold: true});
+				drawText(ctx, "CJK 日本語 end", 0, 0);
+				drawText(ctx, "emoji 👍🏽 end", 0, 1);
+				drawText(ctx, "zwj 👨‍👩‍👧‍👦 end", 0, 2);
+				drawText(ctx, "flag 🇯🇵 end", 0, 3);
+				drawText(ctx, "combining éxá end", 0, 4);
+				drawText(ctx, "styled 日本", 0, 5, {fg: 0xff0000, bold: true});
 				// A wide glyph at the very last usable column, and one that does
 				// not fit at all.
-				ctx.drawText("日", 28, 6);
-				ctx.drawText("日", 29, 7);
+				drawText(ctx, "日", 28, 6);
+				drawText(ctx, "日", 29, 7);
 			});
 		},
 	},
@@ -118,18 +129,18 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(4, 20, "rgb");
 			let out = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("ab日本cd", 0, 0);
-				ctx.drawText("日本日本", 0, 1);
+				drawText(ctx, "ab日本cd", 0, 0);
+				drawText(ctx, "日本日本", 0, 1);
 			});
 			out += "|";
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("abxycd", 0, 0);
-				ctx.drawText("日xy日本", 0, 1);
+				drawText(ctx, "abxycd", 0, 0);
+				drawText(ctx, "日xy日本", 0, 1);
 			});
 			out += "|";
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("ab日本cd", 0, 0);
-				ctx.drawText("日本日本", 0, 1);
+				drawText(ctx, "ab日本cd", 0, 0);
+				drawText(ctx, "日本日本", 0, 1);
 			});
 			return out;
 		},
@@ -139,38 +150,38 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(9, 24, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(0, 0, 6, 3, {
+				drawBox(ctx, 0, 0, 6, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(5, 0, 6, 3, {
+				drawBox(ctx, 5, 0, 6, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(0, 2, 6, 3, {
+				drawBox(ctx, 0, 2, 6, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(5, 2, 6, 3, {
+				drawBox(ctx, 5, 2, 6, 3, {
 					top: {style: "double"},
 					right: {style: "double"},
 					bottom: {style: "double"},
 					left: {style: "double"},
 				});
-				ctx.drawBox(12, 0, 8, 5, {
+				drawBox(ctx, 12, 0, 8, 5, {
 					top: {style: "solid", color: 0x00ff00},
 					right: {style: "solid", color: 0x0000ff},
 					bottom: {style: "solid", color: 0xffff00},
 					left: {style: "solid", color: 0xff00ff},
 				});
-				ctx.drawBox(0, 5, 10, 4, {left: {style: "solid"}});
-				ctx.drawBox(12, 5, 10, 4, {
+				drawBox(ctx, 0, 5, 10, 4, {left: {style: "solid"}});
+				drawBox(ctx, 12, 5, 10, 4, {
 					top: {style: "dashed"},
 					right: {style: "dotted"},
 					bottom: {style: "groove"},
@@ -178,8 +189,8 @@ export const scenarios: Scenario[] = [
 					topLeft: "round",
 					bottomLeft: "round",
 				});
-				ctx.drawText("A1", 1, 1);
-				ctx.drawText("B2", 6, 3);
+				drawText(ctx, "A1", 1, 1);
+				drawText(ctx, "B2", 6, 3);
 			});
 		},
 	},
@@ -188,12 +199,12 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(6, 20, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawRect(0, 0, 20, 2, 0x202020);
-				ctx.drawText("selected text", 1, 0);
-				ctx.drawRect(1, 0, 8, 1, "inverse");
-				ctx.drawRect(0, 3, 10, 1, "default");
-				ctx.drawRect(0, 4, 10, 1, null);
-				ctx.drawText("under", 0, 5, {fg: 0x00ff00});
+				drawRect(ctx, 0, 0, 20, 2, 0x202020);
+				drawText(ctx, "selected text", 1, 0);
+				drawRect(ctx, 1, 0, 8, 1, "inverse");
+				drawRect(ctx, 0, 3, 10, 1, "default");
+				drawRect(ctx, 0, 4, 10, 1, null);
+				drawText(ctx, "under", 0, 5, {fg: 0x00ff00});
 			});
 		},
 	},
@@ -206,14 +217,14 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(5, 20, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawRect(0, 0, 12, 1, 0x004000);
-				ctx.drawText("over", 2, 0, {fg: 0xffff00, bold: true});
-				ctx.drawRect(0, 1, 12, 1, 0x400000);
-				ctx.drawText("own", 2, 1, {bg: 0x000040});
-				ctx.drawText("\u0301abc", 0, 2);
-				ctx.drawText("a\u0301bc", 0, 3);
+				drawRect(ctx, 0, 0, 12, 1, 0x004000);
+				drawText(ctx, "over", 2, 0, {fg: 0xffff00, bold: true});
+				drawRect(ctx, 0, 1, 12, 1, 0x400000);
+				drawText(ctx, "own", 2, 1, {bg: 0x000040});
+				drawText(ctx, "\u0301abc", 0, 2);
+				drawText(ctx, "a\u0301bc", 0, 3);
 				// Inheritance reads the cell under the write, not the style run.
-				ctx.drawText("\u0301x", 0, 4, {italic: true});
+				drawText(ctx, "\u0301x", 0, 4, {italic: true});
 			});
 		},
 	},
@@ -225,12 +236,12 @@ export const scenarios: Scenario[] = [
 			const framebuffer = new Framebuffer(6, 24, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				ctx.clipRect = {left: 4, top: -Infinity, right: 12, bottom: Infinity};
-				ctx.drawText("horizontally bounded", 0, 0);
+				drawText(ctx, "horizontally bounded", 0, 0);
 				ctx.clipRect = {left: -Infinity, top: 2, right: Infinity, bottom: 4};
-				ctx.drawText("dropped by the row clip", 0, 1);
-				ctx.drawText("kept by the row clip", 0, 2);
+				drawText(ctx, "dropped by the row clip", 0, 1);
+				drawText(ctx, "kept by the row clip", 0, 2);
 				ctx.clipRect = null;
-				ctx.drawText("tail", 0, 5);
+				drawText(ctx, "tail", 0, 5);
 			});
 		},
 	},
@@ -241,24 +252,24 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(4, 20, "rgb");
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("a short line", 0, 0);
-				ctx.drawText("日本語 wide and long", 0, 1);
-				ctx.drawText("x", 0, 2);
-				ctx.drawText("last", 0, 3);
+				drawText(ctx, "a short line", 0, 0);
+				drawText(ctx, "日本語 wide and long", 0, 1);
+				drawText(ctx, "x", 0, 2);
+				drawText(ctx, "last", 0, 3);
 			});
 			const before = [20, 10, 7, 5].map((cols) =>
-				framebuffer.wrappedRowsAbovePark(cols),
+				wrappedRowsAbovePark(framebuffer, cols),
 			);
 			// A caret park moves the measurement point.
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("a short line", 0, 0);
-				ctx.drawText("日本語 wide and long", 0, 1);
-				ctx.drawText("x", 0, 2);
-				ctx.drawText("last", 0, 3);
-				ctx.setCaret(3, 1);
+				drawText(ctx, "a short line", 0, 0);
+				drawText(ctx, "日本語 wide and long", 0, 1);
+				drawText(ctx, "x", 0, 2);
+				drawText(ctx, "last", 0, 3);
+				setCaret(ctx, 3, 1);
 			});
 			const after = [20, 10, 7, 5].map((cols) =>
-				framebuffer.wrappedRowsAbovePark(cols),
+				wrappedRowsAbovePark(framebuffer, cols),
 			);
 			return JSON.stringify({before, after});
 		},
@@ -268,10 +279,14 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(5, 20, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("boxed", 0, 1, {fg: 0xff0000, bold: true});
-				ctx.drawDecoration(0, 1, 12, {underline: true, fg: 0x5fafff});
-				ctx.drawText("over", 0, 3, {italic: true});
-				ctx.drawDecoration(0, 3, 12, {overline: true, fg: 0x5fafff, dim: true});
+				drawText(ctx, "boxed", 0, 1, {fg: 0xff0000, bold: true});
+				drawDecoration(ctx, 0, 1, 12, {underline: true, fg: 0x5fafff});
+				drawText(ctx, "over", 0, 3, {italic: true});
+				drawDecoration(ctx, 0, 3, 12, {
+					overline: true,
+					fg: 0x5fafff,
+					dim: true,
+				});
 			});
 		},
 	},
@@ -281,14 +296,15 @@ export const scenarios: Scenario[] = [
 			const framebuffer = new Framebuffer(6, 24, "rgb");
 			let out = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				for (let row = 0; row < 6; row++) {
-					ctx.drawText(`row ${row} content`, 0, row);
+					drawText(ctx, `row ${row} content`, 0, row);
 				}
 			});
 			out += "|";
 			// One cell changes.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				for (let row = 0; row < 6; row++) {
-					ctx.drawText(
+					drawText(
+						ctx,
 						row === 3 ? "row X content" : `row ${row} content`,
 						0,
 						row,
@@ -299,7 +315,8 @@ export const scenarios: Scenario[] = [
 			// Nothing changes.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				for (let row = 0; row < 6; row++) {
-					ctx.drawText(
+					drawText(
+						ctx,
 						row === 3 ? "row X content" : `row ${row} content`,
 						0,
 						row,
@@ -309,7 +326,7 @@ export const scenarios: Scenario[] = [
 			out += "|";
 			// Content shrinks, leaving stale rows to clear.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("row 0 content", 0, 0);
+				drawText(ctx, "row 0 content", 0, 0);
 			});
 			return out;
 		},
@@ -320,7 +337,7 @@ export const scenarios: Scenario[] = [
 			const framebuffer = new Framebuffer(10, 24, "rgb");
 			const paint = (top: number) => (ctx: CellContext) => {
 				for (let row = 0; row < 10; row++) {
-					ctx.drawText(`line ${top + row}`.padEnd(12), 0, row, {
+					drawText(ctx, `line ${top + row}`.padEnd(12), 0, row, {
 						fg: (top + row) % 2 === 0 ? 0x00ff00 : undefined,
 					});
 				}
@@ -361,19 +378,19 @@ export const scenarios: Scenario[] = [
 				{offset: 0, cursorRow: 0, regionRows: 9},
 				(ctx) => {
 					for (let row = 0; row < 9; row++) {
-						ctx.drawText(`L${row}`, 0, row);
+						drawText(ctx, `L${row}`, 0, row);
 					}
 				},
 			);
 			out += "|";
-			framebuffer.replaced(2);
+			replaced(framebuffer, 2);
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("after reset", 0, 0);
+				drawText(ctx, "after reset", 0, 0);
 			});
 			out += "|";
-			framebuffer.repaintAll();
+			repaintAll(framebuffer);
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("after clear", 0, 0);
+				drawText(ctx, "after clear", 0, 0);
 			});
 			return out;
 		},
@@ -383,18 +400,18 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(6, 20, "rgb");
 			let out = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("value", 0, 0);
-				ctx.setCaret(5, 0);
+				drawText(ctx, "value", 0, 0);
+				setCaret(ctx, 5, 0);
 			});
 			out += "|";
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("value!", 0, 0);
-				ctx.setCaret(6, 0);
+				drawText(ctx, "value!", 0, 0);
+				setCaret(ctx, 6, 0);
 			});
 			out += "|";
 			// Caret goes away: the frame still emits, to re-park the cursor.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("value!", 0, 0);
+				drawText(ctx, "value!", 0, 0);
 			});
 			return out;
 		},
@@ -404,19 +421,19 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(8, 24, "rgb");
 			return renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("visible row", 0, 0);
+				drawText(ctx, "visible row", 0, 0);
 				ctx.clipRect = {left: 2, top: 1, right: 10, bottom: 3};
-				ctx.drawText("clipped horizontally", 0, 1);
-				ctx.drawText("also clipped", 0, 2);
-				ctx.drawText("outside the clip", 0, 3);
-				ctx.drawBox(0, 1, 14, 3, {
+				drawText(ctx, "clipped horizontally", 0, 1);
+				drawText(ctx, "also clipped", 0, 2);
+				drawText(ctx, "outside the clip", 0, 3);
+				drawBox(ctx, 0, 1, 14, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
 				ctx.clipRect = null;
-				ctx.drawText("unclipped again", 0, 4);
+				drawText(ctx, "unclipped again", 0, 4);
 			});
 		},
 	},
@@ -425,21 +442,21 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(6, 30, "rgb");
 			let out = renderStatic(framebuffer, {rows: 5}, (ctx) => {
-				ctx.drawText("plain", 0, 0);
-				ctx.drawText("styled", 0, 1, {fg: 0xff0000, bold: true});
-				ctx.drawText("日本語 wide", 0, 2);
-				ctx.drawBox(0, 3, 8, 2, {
+				drawText(ctx, "plain", 0, 0);
+				drawText(ctx, "styled", 0, 1, {fg: 0xff0000, bold: true});
+				drawText(ctx, "日本語 wide", 0, 2);
+				drawBox(ctx, 0, 3, 8, 2, {
 					top: {style: "solid", color: 0x00ff00},
 					right: {style: "solid", color: 0x00ff00},
 					bottom: {style: "solid", color: 0x00ff00},
 					left: {style: "solid", color: 0x00ff00},
 				});
-				ctx.drawText("👍 tail", 10, 3);
+				drawText(ctx, "👍 tail", 10, 3);
 			});
 			out += "|";
 			out += renderStatic(framebuffer, {rows: 2, lineEnding: "\r\n"}, (ctx) => {
-				ctx.drawText("crlf", 0, 0);
-				ctx.drawText("lines", 0, 1);
+				drawText(ctx, "crlf", 0, 0);
+				drawText(ctx, "lines", 0, 1);
 			});
 			return out;
 		},
diff --git a/tests/ansi.test.ts b/tests/ansi.test.ts
index 7a28c96c..544b5d6b 100644
--- a/tests/ansi.test.ts
+++ b/tests/ansi.test.ts
@@ -1,9 +1,15 @@
 import {describe, expect, test} from "@b9g/libuild/test";
 
 import {
+	beginFrame,
 	type CellContext,
+	drawBox,
+	drawLine,
+	drawRect,
+	drawText,
 	Framebuffer,
 	type LineStyle,
+	repaintAll,
 } from "../src/internal/framebuffer.ts";
 import {renderFrame, stripControlCodes} from "./test-utils.js";
 
@@ -14,10 +20,10 @@ describe("cells through the pen", () => {
 		const family = "\u{1f468}\u200d\u{1f469}\u200d\u{1f467}";
 		const framebuffer = new Framebuffer(1, 8);
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText(family, 0, 0);
-			ctx.drawText("é", 2, 0);
-			ctx.drawText("\u{1f1ef}\u{1f1f5}", 3, 0);
-			ctx.drawText("日", 5, 0);
+			drawText(ctx, family, 0, 0);
+			drawText(ctx, "é", 2, 0);
+			drawText(ctx, "\u{1f1ef}\u{1f1f5}", 3, 0);
+			drawText(ctx, "日", 5, 0);
 		});
 
 		expect(output).toContain(family);
@@ -33,9 +39,9 @@ describe("cells through the pen", () => {
 		const family = "\u{1f468}\u200d\u{1f469}\u200d\u{1f467}";
 		const framebuffer = new Framebuffer(1, 20);
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("M\u200c\u200ba\u200cr\u034fk", 0, 0);
-			ctx.drawText("e\u200dt", 5, 0);
-			ctx.drawText(family, 8, 0);
+			drawText(ctx, "M\u200c\u200ba\u200cr\u034fk", 0, 0);
+			drawText(ctx, "e\u200dt", 5, 0);
+			drawText(ctx, family, 8, 0);
 		});
 
 		expect(stripControlCodes(output)).toContain("Mark");
@@ -47,7 +53,7 @@ describe("cells through the pen", () => {
 
 	test("measureText and the layout agree on widths", () => {
 		const framebuffer = new Framebuffer(1, 10);
-		const context = framebuffer.beginFrame({offset: 0});
+		const context = beginFrame(framebuffer, {offset: 0});
 		expect(
 			context.measureText("\u{1f468}\u200d\u{1f469}\u200d\u{1f467}")
 				.width,
@@ -65,7 +71,7 @@ describe("Framebuffer", () => {
 
 			// Test basic drawing functionality
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("X", 0, 0);
+				drawText(ctx, "X", 0, 0);
 			});
 
 			expect(output).toContain("X");
@@ -75,9 +81,9 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10, "ansi");
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("X", 0, 0, {fg: 0xcd0000});
-				ctx.drawText("Y", 1, 0, {fg: 0xff0000});
-				ctx.drawText("Z", 2, 0, {bg: 0x7f7f7f});
+				drawText(ctx, "X", 0, 0, {fg: 0xcd0000});
+				drawText(ctx, "Y", 1, 0, {fg: 0xff0000});
+				drawText(ctx, "Z", 2, 0, {bg: 0x7f7f7f});
 			});
 
 			expect(output).toContain("\x1b[31mX");
@@ -91,7 +97,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Hello", 1, 2);
+				drawText(ctx, "Hello", 1, 2);
 			});
 
 			expect(output).toContain("Hello");
@@ -101,7 +107,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawRect(0, 0, 3, 2, 0xff0000);
+				drawRect(ctx, 0, 0, 3, 2, 0xff0000);
 			});
 
 			// Should contain background color ANSI codes
@@ -112,7 +118,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("Test", 0, 0);
+				drawText(ctx, "Test", 0, 0);
 			});
 
 			// Should contain cursor positioning for offset
@@ -125,7 +131,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Test", 0, 0);
+				drawText(ctx, "Test", 0, 0);
 			});
 
 			// Should hide cursor and enable sync mode. The cursor stays hidden
@@ -140,14 +146,14 @@ describe("Framebuffer", () => {
 
 			// First frame
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("First", 0, 0);
+				drawText(ctx, "First", 0, 0);
 			});
 
-			framebuffer.repaintAll();
+			repaintAll(framebuffer);
 
 			// Second frame should render everything (no diff)
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Second", 0, 0);
+				drawText(ctx, "Second", 0, 0);
 			});
 
 			expect(output).toContain("Second");
@@ -163,11 +169,11 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(10, 40);
 
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Initial", 0, 0);
+				drawText(ctx, "Initial", 0, 0);
 			});
 
 			const output = renderFrame(framebuffer, {offset: 3}, (ctx) => {
-				ctx.drawText("Scrolled", 0, 0);
+				drawText(ctx, "Scrolled", 0, 0);
 			});
 
 			expect(output).not.toContain("\x1b[3S");
@@ -179,11 +185,11 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(10, 40);
 
 			renderFrame(framebuffer, {offset: 3}, (ctx) => {
-				ctx.drawText("Initial", 0, 0);
+				drawText(ctx, "Initial", 0, 0);
 			});
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Scrolled", 0, 0);
+				drawText(ctx, "Scrolled", 0, 0);
 			});
 
 			expect(output).not.toContain("\x1b[3T");
@@ -196,12 +202,12 @@ describe("Framebuffer", () => {
 
 			// Frame 1
 			renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("Frame1", 0, 0);
+				drawText(ctx, "Frame1", 0, 0);
 			});
 
 			// Frame 2 with same offset
 			const output = renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("Frame2", 0, 1);
+				drawText(ctx, "Frame2", 0, 1);
 			});
 
 			expect(output).not.toContain("S");
@@ -225,14 +231,14 @@ describe("Framebuffer", () => {
 
 			// First frame
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Hello", 0, 0);
-				ctx.drawText("World", 1, 0);
+				drawText(ctx, "Hello", 0, 0);
+				drawText(ctx, "World", 1, 0);
 			});
 
 			// Second frame - only change second line
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Hello", 0, 0); // Same
-				ctx.drawText("Test", 1, 0); // Changed
+				drawText(ctx, "Hello", 0, 0); // Same
+				drawText(ctx, "Test", 1, 0); // Changed
 			});
 
 			// Should contain new content but not duplicate unchanged content
@@ -265,7 +271,7 @@ describe("glyphs where lines meet", () => {
 
 	test("two lines turning in a cell make its corner", () => {
 		const output = glyphs(3, 6, (ctx) => {
-			ctx.drawBox(0, 0, 3, 3, {
+			drawBox(ctx, 0, 0, 3, 3, {
 				top: solid,
 				right: solid,
 				bottom: solid,
@@ -278,18 +284,18 @@ describe("glyphs where lines meet", () => {
 
 	test("a line ending on another's run makes the tee", () => {
 		const output = glyphs(3, 8, (ctx) => {
-			ctx.drawLine(0, 0, 0, 3, solid); // a wall
-			ctx.drawLine(0, 1, 4, 1, solid); // a rule leaving it rightward
+			drawLine(ctx, 0, 0, 0, 3, solid); // a wall
+			drawLine(ctx, 0, 1, 4, 1, solid); // a rule leaving it rightward
 		});
 		expect(output).toContain("├───");
 		const inverted = glyphs(3, 8, (ctx) => {
-			ctx.drawLine(4, 0, 4, 3, solid);
-			ctx.drawLine(0, 1, 5, 1, solid);
+			drawLine(ctx, 4, 0, 4, 3, solid);
+			drawLine(ctx, 0, 1, 5, 1, solid);
 		});
 		expect(inverted).toContain("───┤");
 		const down = glyphs(3, 8, (ctx) => {
-			ctx.drawLine(0, 0, 5, 0, solid);
-			ctx.drawLine(2, 0, 2, 3, solid);
+			drawLine(ctx, 0, 0, 5, 0, solid);
+			drawLine(ctx, 2, 0, 2, 3, solid);
 		});
 		expect(down).toContain("─┬─");
 		expect(down).not.toContain("┼");
@@ -297,16 +303,16 @@ describe("glyphs where lines meet", () => {
 
 	test("two lines crossing make the cross", () => {
 		const output = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 1, 5, 1, solid);
-			ctx.drawLine(2, 0, 2, 3, solid);
+			drawLine(ctx, 0, 1, 5, 1, solid);
+			drawLine(ctx, 2, 0, 2, 3, solid);
 		});
 		expect(output).toContain("─┼─");
 	});
 
 	test("a line is its line, and its ends still draw", () => {
 		const output = glyphs(2, 6, (ctx) => {
-			ctx.drawLine(0, 0, 2, 0, solid);
-			ctx.drawLine(4, 0, 4, 2, solid);
+			drawLine(ctx, 0, 0, 2, 0, solid);
+			drawLine(ctx, 4, 0, 4, 2, solid);
 		});
 		expect(output).toContain("──");
 		expect(output).toContain("│");
@@ -314,8 +320,8 @@ describe("glyphs where lines meet", () => {
 
 	test("the style is the line's", () => {
 		const output = glyphs(2, 8, (ctx) => {
-			ctx.drawLine(0, 0, 3, 0, {style: "double"});
-			ctx.drawLine(4, 0, 7, 0, {style: "dashed"});
+			drawLine(ctx, 0, 0, 3, 0, {style: "double"});
+			drawLine(ctx, 4, 0, 7, 0, {style: "dashed"});
 		});
 		expect(output).toContain("═");
 		expect(output).toContain("╌");
@@ -323,23 +329,23 @@ describe("glyphs where lines meet", () => {
 
 	test("a round cap bends the corner, not the run", () => {
 		const output = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 0, 3, 0, {style: "solid", startCap: "round"});
-			ctx.drawLine(0, 0, 0, 3, {style: "solid", startCap: "round"});
+			drawLine(ctx, 0, 0, 3, 0, {style: "solid", startCap: "round"});
+			drawLine(ctx, 0, 0, 0, 3, {style: "solid", startCap: "round"});
 		});
 		expect(output).toContain("╭──");
 
 		// The dashes are the border style's; only the turn bends.
 		const dashed = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 0, 3, 0, {style: "dashed", endCap: "round"});
-			ctx.drawLine(2, 0, 2, 3, {style: "dashed", startCap: "round"});
+			drawLine(ctx, 0, 0, 3, 0, {style: "dashed", endCap: "round"});
+			drawLine(ctx, 2, 0, 2, 3, {style: "dashed", startCap: "round"});
 		});
 		expect(dashed).toContain("╮");
 
 		// Unicode draws no rounded double corner, so the radius cannot
 		// reach one.
 		const double = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 2, 3, 2, {style: "double", startCap: "round"});
-			ctx.drawLine(0, 0, 0, 3, {style: "double", endCap: "round"});
+			drawLine(ctx, 0, 2, 3, 2, {style: "double", startCap: "round"});
+			drawLine(ctx, 0, 0, 0, 3, {style: "double", endCap: "round"});
 		});
 		expect(double).toContain("╚══");
 	});
@@ -351,7 +357,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -369,7 +375,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
@@ -388,14 +394,14 @@ describe("Border Drawing", () => {
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				// Draw two overlapping rectangles to create border intersections
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
 
-				ctx.drawBox(2, 0, 4, 3, {
+				drawBox(ctx, 2, 0, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -417,13 +423,13 @@ describe("Border Drawing", () => {
 			// page's verticals, which take the connecting stub: ├ and ┤, as a
 			// browser's touching one-pixel lines would draw.
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(0, 0, 10, 5, {
+				drawBox(ctx, 0, 0, 10, 5, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(1, 2, 8, 1, {top: {style: "solid"}});
+				drawBox(ctx, 1, 2, 8, 1, {top: {style: "solid"}});
 			});
 
 			expect(output).toContain("├────────┤");
@@ -436,13 +442,13 @@ describe("Border Drawing", () => {
 			// parallel strokes, which meet nothing head-on. No junction forms
 			// -- the seam stays ┐┌, the way two browser boxes stay two boxes.
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(0, 0, 4, 3, {
+				drawBox(ctx, 0, 0, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(4, 0, 4, 3, {
+				drawBox(ctx, 4, 0, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -459,7 +465,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawBox(0, 0, 3, 2, {
+				drawBox(ctx, 0, 0, 3, 2, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -476,7 +482,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "double"},
 					right: {style: "double"},
 					bottom: {style: "double"},
@@ -494,7 +500,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {});
+				drawBox(ctx, 1, 1, 4, 3, {});
 			});
 
 			// Should not contain any border patterns
@@ -505,7 +511,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid", color: 0xff0000},
 					right: {style: "solid", color: 0xff0000},
 					bottom: {style: "solid", color: 0xff0000},
@@ -523,7 +529,7 @@ describe("Border Drawing", () => {
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				// Draw border that extends beyond viewport
-				ctx.drawBox(0, 0, 10, 10, {
+				drawBox(ctx, 0, 0, 10, 10, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -544,15 +550,15 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(4, 8);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(1, 0, 6, 4, {
+			drawBox(ctx, 1, 0, 6, 4, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 			// Fill inside to ensure proper spacing
-			ctx.drawText("    ", 2, 1);
-			ctx.drawText("    ", 2, 2);
+			drawText(ctx, "    ", 2, 1);
+			drawText(ctx, "    ", 2, 2);
 		});
 
 		// Strip control codes but keep ANSI colors for testing
@@ -568,7 +574,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw border
-			ctx.drawBox(1, 1, 6, 3, {
+			drawBox(ctx, 1, 1, 6, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -576,7 +582,7 @@ describe("Border Integration", () => {
 			});
 
 			// Add text inside border
-			ctx.drawText("Hi", 2, 2);
+			drawText(ctx, "Hi", 2, 2);
 		});
 
 		expect(output).toContain("┌────┐"); // Complete top border
@@ -589,10 +595,10 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Fill background
-			ctx.drawRect(1, 1, 4, 3, 0x00ff00);
+			drawRect(ctx, 1, 1, 4, 3, 0x00ff00);
 
 			// Draw border on top
-			ctx.drawBox(1, 1, 4, 3, {
+			drawBox(ctx, 1, 1, 4, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -608,7 +614,7 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 7);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 5, 4, {
+			drawBox(ctx, 0, 0, 5, 4, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -627,7 +633,7 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 8);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 6, 4, {
+			drawBox(ctx, 0, 0, 6, 4, {
 				top: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
@@ -647,9 +653,9 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(3, 10);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("Hello", 0, 0);
-			ctx.drawText("World", 0, 1);
-			ctx.drawText("Test", 0, 2);
+			drawText(ctx, "Hello", 0, 0);
+			drawText(ctx, "World", 0, 1);
+			drawText(ctx, "Test", 0, 2);
 		});
 
 		// Strip control codes but keep ANSI colors for testing
@@ -671,7 +677,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// First box
-			ctx.drawBox(0, 0, 5, 4, {
+			drawBox(ctx, 0, 0, 5, 4, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -679,7 +685,7 @@ describe("Border Integration", () => {
 			});
 
 			// Second box overlapping
-			ctx.drawBox(2, 2, 5, 4, {
+			drawBox(ctx, 2, 2, 5, 4, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -702,11 +708,11 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 10);
 
 		// Clear previous buffer to ensure output
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw a simple box that fits in viewport
-			ctx.drawBox(1, 1, 3, 3, {
+			drawBox(ctx, 1, 1, 3, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -730,18 +736,18 @@ describe("Border Integration", () => {
 
 		// First render to establish baseline
 		renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("Line 1", 0, 0);
-			ctx.drawText("Line 2", 0, 1);
-			ctx.drawText("Line 3", 0, 2);
-			ctx.drawText("Line 4", 0, 3);
+			drawText(ctx, "Line 1", 0, 0);
+			drawText(ctx, "Line 2", 0, 1);
+			drawText(ctx, "Line 3", 0, 2);
+			drawText(ctx, "Line 4", 0, 3);
 		});
 
 		// Second render with minimal changes
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("Line 1", 0, 0);
-			ctx.drawText("Line TWO", 0, 1); // Changed
-			ctx.drawText("Line 3", 0, 2);
-			ctx.drawText("Line 4", 0, 3);
+			drawText(ctx, "Line 1", 0, 0);
+			drawText(ctx, "Line TWO", 0, 1); // Changed
+			drawText(ctx, "Line 3", 0, 2);
+			drawText(ctx, "Line 4", 0, 3);
 		});
 
 		// The framebuffer optimizes by only updating changed content
@@ -756,20 +762,20 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 8);
 
 		// Clear any previous state
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw box
-			ctx.drawBox(0, 0, 8, 5, {
+			drawBox(ctx, 0, 0, 8, 5, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 			// Add text inside
-			ctx.drawText(" TEST ", 1, 1);
-			ctx.drawText(" BOX  ", 1, 2);
-			ctx.drawText(" HERE ", 1, 3);
+			drawText(ctx, " TEST ", 1, 1);
+			drawText(ctx, " BOX  ", 1, 2);
+			drawText(ctx, " HERE ", 1, 3);
 		});
 
 		// Check that we have a complete box with text
@@ -784,14 +790,14 @@ describe("Border Integration", () => {
 	test("renders collapsed table borders - 2x2 grid", () => {
 		const framebuffer = new Framebuffer(5, 9);
 
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Simulate CSS collapsed table borders by drawing each cell's borders
 			// This should create proper junctions where borders meet
 
 			// Cell (0,0) - top-left
-			ctx.drawBox(0, 0, 5, 3, {
+			drawBox(ctx, 0, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -799,7 +805,7 @@ describe("Border Integration", () => {
 			});
 
 			// Cell (0,1) - top-right
-			ctx.drawBox(4, 0, 5, 3, {
+			drawBox(ctx, 4, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -807,7 +813,7 @@ describe("Border Integration", () => {
 			});
 
 			// Cell (1,0) - bottom-left
-			ctx.drawBox(0, 2, 5, 3, {
+			drawBox(ctx, 0, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -815,7 +821,7 @@ describe("Border Integration", () => {
 			});
 
 			// Cell (1,1) - bottom-right
-			ctx.drawBox(4, 2, 5, 3, {
+			drawBox(ctx, 4, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -823,10 +829,10 @@ describe("Border Integration", () => {
 			});
 
 			// Add cell content
-			ctx.drawText("A1", 1, 1);
-			ctx.drawText("B1", 5, 1);
-			ctx.drawText("A2", 1, 3);
-			ctx.drawText("B2", 5, 3);
+			drawText(ctx, "A1", 1, 1);
+			drawText(ctx, "B1", 5, 1);
+			drawText(ctx, "A2", 1, 3);
+			drawText(ctx, "B2", 5, 3);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -843,12 +849,12 @@ describe("Border Integration", () => {
 	test("renders collapsed table borders - mixed border styles", () => {
 		const framebuffer = new Framebuffer(3, 11);
 
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Test border merging with different styles
 			// Left cell with solid borders
-			ctx.drawBox(0, 0, 6, 3, {
+			drawBox(ctx, 0, 0, 6, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -856,7 +862,7 @@ describe("Border Integration", () => {
 			});
 
 			// Right cell with double borders (should merge with solid)
-			ctx.drawBox(5, 0, 6, 3, {
+			drawBox(ctx, 5, 0, 6, 3, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -864,8 +870,8 @@ describe("Border Integration", () => {
 			});
 
 			// Add content to differentiate the cells
-			ctx.drawText("Sol", 1, 1);
-			ctx.drawText("Dbl", 6, 1);
+			drawText(ctx, "Sol", 1, 1);
+			drawText(ctx, "Dbl", 6, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -880,28 +886,28 @@ describe("Border Integration", () => {
 	test("renders collapsed table borders - header and data rows", () => {
 		const framebuffer = new Framebuffer(5, 13); // 3 columns x 4 chars + 1 = 13 width
 
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Simulate a typical HTML table with header and data rows
 			// For collapsed borders, cells share borders at their edges
 
 			// Header row cells (row 0-2)
-			ctx.drawBox(0, 0, 5, 3, {
+			drawBox(ctx, 0, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(4, 0, 5, 3, {
+			drawBox(ctx, 4, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(8, 0, 5, 3, {
+			drawBox(ctx, 8, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -909,21 +915,21 @@ describe("Border Integration", () => {
 			});
 
 			// Data row cells (row 2-4, sharing top border with header cells)
-			ctx.drawBox(0, 2, 5, 3, {
+			drawBox(ctx, 0, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(4, 2, 5, 3, {
+			drawBox(ctx, 4, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(8, 2, 5, 3, {
+			drawBox(ctx, 8, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -931,12 +937,12 @@ describe("Border Integration", () => {
 			});
 
 			// Cell content - placed inside the cells (max 3 chars per cell)
-			ctx.drawText("Nam", 1, 1);
-			ctx.drawText("Age", 5, 1);
-			ctx.drawText("Cty", 9, 1);
-			ctx.drawText("Jon", 1, 3);
-			ctx.drawText("25", 5, 3);
-			ctx.drawText("NYC", 9, 3);
+			drawText(ctx, "Nam", 1, 1);
+			drawText(ctx, "Age", 5, 1);
+			drawText(ctx, "Cty", 9, 1);
+			drawText(ctx, "Jon", 1, 3);
+			drawText(ctx, "25", 5, 3);
+			drawText(ctx, "NYC", 9, 3);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -949,10 +955,10 @@ describe("Border Integration", () => {
 
 	test("renders simple single cell with border", () => {
 		const framebuffer = new Framebuffer(4, 6);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(1, 1, 4, 2, {
+			drawBox(ctx, 1, 1, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -969,16 +975,16 @@ describe("Border Integration", () => {
 
 	test("renders double border box", () => {
 		const framebuffer = new Framebuffer(5, 8);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(1, 1, 6, 3, {
+			drawBox(ctx, 1, 1, 6, 3, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
 				left: {style: "double"},
 			});
-			ctx.drawText("Test", 2, 2);
+			drawText(ctx, "Test", 2, 2);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -991,11 +997,11 @@ describe("Border Integration", () => {
 
 	test("renders partial borders - top and left only", () => {
 		const framebuffer = new Framebuffer(4, 6);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 5, 3, {top: {style: "solid"}, left: {style: "solid"}});
-			ctx.drawText("Part", 1, 1);
+			drawBox(ctx, 0, 0, 5, 3, {top: {style: "solid"}, left: {style: "solid"}});
+			drawText(ctx, "Part", 1, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -1012,11 +1018,11 @@ describe("Border Integration", () => {
 		// the end rows too. Skipping them is what cut a blockquote's border
 		// off at its first and last row.
 		const framebuffer = new Framebuffer(5, 8);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 6, 4, {left: {style: "solid"}});
-			ctx.drawText("Quote", 2, 1);
+			drawBox(ctx, 0, 0, 6, 4, {left: {style: "solid"}});
+			drawText(ctx, "Quote", 2, 1);
 		});
 
 		// includes, not startsWith: the reset frame's erase sequence survives
@@ -1028,18 +1034,18 @@ describe("Border Integration", () => {
 
 	test("renders L-shaped table border pattern", () => {
 		const framebuffer = new Framebuffer(4, 7);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Top row - 2 cells
-			ctx.drawBox(0, 0, 4, 2, {
+			drawBox(ctx, 0, 0, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(3, 0, 4, 2, {
+			drawBox(ctx, 3, 0, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -1047,7 +1053,7 @@ describe("Border Integration", () => {
 			});
 
 			// Bottom left cell only
-			ctx.drawBox(0, 1, 4, 2, {
+			drawBox(ctx, 0, 1, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -1067,11 +1073,11 @@ describe("Border Integration", () => {
 
 	test("renders mixed border styles in adjacent cells", () => {
 		const framebuffer = new Framebuffer(3, 9);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Solid border cell
-			ctx.drawBox(0, 0, 3, 3, {
+			drawBox(ctx, 0, 0, 3, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -1079,7 +1085,7 @@ describe("Border Integration", () => {
 			});
 
 			// Double border cell
-			ctx.drawBox(2, 0, 3, 3, {
+			drawBox(ctx, 2, 0, 3, 3, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -1087,16 +1093,16 @@ describe("Border Integration", () => {
 			});
 
 			// Heavy border cell
-			ctx.drawBox(4, 0, 3, 3, {
+			drawBox(ctx, 4, 0, 3, 3, {
 				top: {style: "groove"},
 				right: {style: "groove"},
 				bottom: {style: "groove"},
 				left: {style: "groove"},
 			});
 
-			ctx.drawText("S", 1, 1);
-			ctx.drawText("D", 3, 1);
-			ctx.drawText("H", 5, 1);
+			drawText(ctx, "S", 1, 1);
+			drawText(ctx, "D", 3, 1);
+			drawText(ctx, "H", 5, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -1109,11 +1115,11 @@ describe("Border Integration", () => {
 
 	test("renders nested borders", () => {
 		const framebuffer = new Framebuffer(7, 11); // Wider to accommodate text
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Outer border
-			ctx.drawBox(0, 0, 9, 7, {
+			drawBox(ctx, 0, 0, 9, 7, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -1121,16 +1127,16 @@ describe("Border Integration", () => {
 			});
 
 			// Inner border
-			ctx.drawBox(2, 2, 5, 3, {
+			drawBox(ctx, 2, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawText("Out", 1, 1);
-			ctx.drawText("In", 3, 3);
-			ctx.drawText("Out", 5, 5); // Moved left by 2 to avoid overlap
+			drawText(ctx, "Out", 1, 1);
+			drawText(ctx, "In", 3, 3);
+			drawText(ctx, "Out", 5, 5); // Moved left by 2 to avoid overlap
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -1145,7 +1151,7 @@ describe("Border Integration", () => {
 
 	test("renders grid layout - 3x3 table", () => {
 		const framebuffer = new Framebuffer(7, 11);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw 3x3 grid of cells
@@ -1154,14 +1160,14 @@ describe("Border Integration", () => {
 					const x = col * 3;
 					const y = row * 2;
 
-					ctx.drawBox(x, y, 4, 3, {
+					drawBox(ctx, x, y, 4, 3, {
 						top: {style: "solid"},
 						right: {style: "solid"},
 						bottom: {style: "solid"},
 						left: {style: "solid"},
 					});
 
-					ctx.drawText(`${row + 1}${col + 1}`, x + 1, y + 1);
+					drawText(ctx, `${row + 1}${col + 1}`, x + 1, y + 1);
 				}
 			}
 		});
@@ -1177,18 +1183,18 @@ describe("Border Integration", () => {
 
 	test("renders borders with background colors", () => {
 		const framebuffer = new Framebuffer(3, 7);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawRect(1, 0, 5, 3, 0x00ff00);
-			ctx.drawBox(1, 0, 5, 3, {
+			drawRect(ctx, 1, 0, 5, 3, 0x00ff00);
+			drawBox(ctx, 1, 0, 5, 3, {
 				top: {style: "solid", color: 0xff0000},
 				right: {style: "solid", color: 0xff0000},
 				bottom: {style: "solid", color: 0xff0000},
 				left: {style: "solid", color: 0xff0000},
 			});
 
-			ctx.drawText("Col", 2, 1);
+			drawText(ctx, "Col", 2, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
diff --git a/tests/cell-size.test.ts b/tests/cell-size.test.ts
index 3ed937ce..37b63180 100644
--- a/tests/cell-size.test.ts
+++ b/tests/cell-size.test.ts
@@ -661,3 +661,35 @@ test("an overflow: hidden box at a fractional column keeps its child's left bord
 	]);
 	dom.dispose();
 });
+
+// A box whose edges fall at half cells is drawn across the whole columns
+// its rounded edges span, and its text breaks to those, not to its width
+// rounded. Under an 8px margin at 16px cells, a 30.5 cell box is drawn
+// 30 columns wide, and a line of 31 crossed its border.
+test("text breaks to the columns a box at a half cell is drawn across", () => {
+	for (const [margin, lines] of [
+		[
+			"8px",
+			["│Lecture on the Connexion of   │", "│the Physical Sciences at the  │"],
+		],
+		[
+			"0",
+			[
+				"│Lecture on the Connexion of the│",
+				"│Physical Sciences at the hall  │",
+			],
+		],
+	] as const) {
+		const {dom} = make({width: 16, height: 32}, 100, 40);
+		dom.document.body.style.margin = "0";
+		dom.document.body.innerHTML =
+			`<div style="margin: ${margin}">` +
+			"<div style=\"width: 520px; border: 1px solid\"><div>Lecture on the " +
+			"Connexion of the Physical Sciences at the hall</div></div></div>";
+		expect(
+			dom.renderANSI().replace(/\x1b\[[0-9;]*m/g, "").split("\n").slice(1, 3)
+				.map((line) => line.trim()),
+		).toEqual([...lines]);
+		dom.dispose();
+	}
+});
diff --git a/tests/constraint-validation.test.ts b/tests/constraint-validation.test.ts
index d7401577..951817a7 100644
--- a/tests/constraint-validation.test.ts
+++ b/tests/constraint-validation.test.ts
@@ -4,7 +4,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 function input(markup: string): HTMLInputElement {
 	const window =
diff --git a/tests/counters.test.ts b/tests/counters.test.ts
new file mode 100644
index 00000000..c70b3f4c
--- /dev/null
+++ b/tests/counters.test.ts
@@ -0,0 +1,198 @@
+/**
+ * Counters as css-lists-3 §4.4 counts them: an element inherits the
+ * counters of its parent and of its previous sibling, at the values the
+ * element before it in tree order left them, then applies its own
+ * counter-reset, counter-increment and counter-set. The expected text is
+ * what a browser shows for the same page.
+ */
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+async function render(
+	css: string,
+	html: string,
+	change?: (document: any) => void,
+): Promise<string[]> {
+	const terminal = new MockProcess({cols: 30, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.head.innerHTML = `<style>${css}</style>`;
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	if (change) {
+		change(dom.document);
+		await nextFrame(dom);
+	}
+	const lines = terminal.getScreenContents()
+		.split("\n")
+		.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd())
+		.filter((line) => line !== "");
+	dom.dispose();
+	return lines;
+}
+
+const NUMBERED =
+	"body { counter-reset: n } .n { counter-increment: n } " +
+	".n::before { content: counter(n) \". \" }";
+
+test("siblings count on from one another", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div class=n>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a counter takes its value from the element just before", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div><div class=n>a</div><div class=n>b</div></div>" +
+				"<div class=n>c</div>",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a reset reaches the siblings after it", async () => {
+	expect(
+		await render(
+			NUMBERED + " .r { counter-reset: n 10 }",
+			"<div class=n>a</div><div class=r>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "b", "11. c"]);
+});
+
+test("a counter made inside a sibling stays inside it", async () => {
+	expect(
+		await render(
+			".r { counter-reset: m 5 } .m::before { content: counter(m) \" \" }",
+			"<div><div class=r>a</div></div><div class=m>b</div>",
+		),
+	).toEqual(["a", "0 b"]);
+});
+
+test("counter-set sets the value the next step counts from", async () => {
+	expect(
+		await render(
+			NUMBERED + " .s { counter-set: n 7 }",
+			"<div class=n>a</div><div class=s>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "b", "8. c"]);
+});
+
+test("a box not shown does not count", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div class=n style=\"display: none\">b</div>" +
+				"<div class=n>c</div>",
+		),
+	).toEqual(["1. a", "2. c"]);
+});
+
+test("a counter declared later renumbers what follows it", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div id=b>b</div><div class=n>c</div>",
+			(document) => document.getElementById("b").classList.add("n"),
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a box shown again counts again", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div id=b class=n style=\"display: none\">b</div>" +
+				"<div class=n>c</div>",
+			(document) => document.getElementById("b").style.display = "block",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a parent hidden and shown again counts its children again", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div id=p style=\"display: none\">" +
+				"<div class=n>b</div></div><div class=n>c</div>",
+			(document) => document.getElementById("p").style.display = "block",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a list item's value sets the list-item counter", async () => {
+	expect(
+		await render(
+			"li::marker { content: counter(list-item) \") \" } " +
+				"ol { list-style-position: inside; padding: 0 }",
+			"<ol start=4><li>a</li><li value=9>b</li><li>c</li></ol>",
+		),
+	).toEqual(["4) a", "9) b", "10) c"]);
+});
+
+test("a ::before counts, as its element's first child", async () => {
+	expect(
+		await render(
+			"body { counter-reset: section } " +
+				"h2::before { counter-increment: section; " +
+				"content: counter(section) \". \" } h2 { margin: 0 }",
+			"<h2>a</h2><h2>b</h2><h2>c</h2>",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a ::after counts, as its element's last child", async () => {
+	expect(
+		await render(
+			NUMBERED + " .a::after { counter-increment: n 10; content: \"\" }",
+			"<div class=n>a</div><div class=a>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "b", "12. c"]);
+});
+
+test("counters() joins every counter of the name in scope", async () => {
+	expect(
+		await render(
+			"ol { counter-reset: item; list-style: none; padding: 0 } " +
+				"li { counter-increment: item } " +
+				"li::before { content: counters(item, \".\") \" \" }",
+			"<ol><li>a<ol><li>b</li><li>c</li></ol></li><li>d</li></ol>",
+		),
+	).toEqual(["1 a", "1.1 b", "1.2 c", "2 d"]);
+});
+
+test("a string that spells counter() is only text", async () => {
+	expect(
+		await render(
+			NUMBERED + " .s::before { content: \"counter(n) \" }",
+			"<div class=s>a</div>",
+		),
+	).toEqual(["counter(n) a"]);
+});
+
+test("a counter passes through a shadow tree and a slot", async () => {
+	const terminal = new MockProcess({cols: 30, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.head.innerHTML = `<style>${NUMBERED}</style>`;
+	dom.document.body.innerHTML =
+		"<div class=n>a</div><div id=host><div class=n slot=s>b</div></div>" +
+		"<div class=n>c</div>";
+	const root =
+		dom.document.getElementById("host")!.attachShadow({mode: "open"});
+	root.innerHTML =
+		"<style>.n { counter-increment: n } " +
+		".n::before { content: counter(n) \". \" }</style>" +
+		"<div class=n>inner</div><slot name=s></slot>";
+	await nextFrame(dom);
+	await nextFrame(dom);
+	const lines = terminal.getScreenContents()
+		.split("\n")
+		.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd())
+		.filter((line) => line !== "");
+	expect(lines).toEqual(["1. a", "2. inner", "3. b", "4. c"]);
+	dom.dispose();
+});
diff --git a/tests/cssom.test.ts b/tests/cssom.test.ts
index b81dfcbb..7ecc2f30 100644
--- a/tests/cssom.test.ts
+++ b/tests/cssom.test.ts
@@ -547,3 +547,57 @@ test("text the CSS parsers cannot judge passes through as authored", () => {
 
 	dom.dispose();
 });
+
+test("an @import or @namespace out of its place at the top of a sheet is dropped", () => {
+	const {dom} = makeDOM();
+	const names = (text: string): string[] => {
+		const style = dom.document.createElement("style");
+		style.textContent = text;
+		dom.document.head.append(style);
+		const rules = [...style.sheet!.cssRules].map((rule) =>
+			rule.constructor.name);
+		style.remove();
+		return rules;
+	};
+	expect(names("a {} @import url(x.css); @namespace url(y); b {}"))
+		.toEqual(["CSSStyleRule", "CSSStyleRule"]);
+	expect(names("@namespace url(y); @import url(x.css);"))
+		.toEqual(["CSSNamespaceRule"]);
+	expect(names("@layer a; @import url(x.css); @namespace url(y);"))
+		.toEqual(["CSSLayerStatementRule", "CSSImportRule", "CSSNamespaceRule"]);
+	expect(names("@import url(x.css); @layer a; @namespace url(y);"))
+		.toEqual(["CSSImportRule", "CSSLayerStatementRule"]);
+	expect(names("@media all { @import url(x.css); @namespace url(y); }"))
+		.toEqual(["CSSMediaRule"]);
+	dom.dispose();
+});
+
+test("a namespace prefix declared after a style rule does not apply", async () => {
+	const {dom} = makeDOM("<p>text</p>");
+	const style = dom.document.createElement("style");
+	style.textContent =
+		"@namespace h url(http://www.w3.org/1999/xhtml); h|p { color: red } " +
+		"b {} @namespace q url(http://www.w3.org/1999/xhtml); q|p { color: blue }";
+	dom.document.head.append(style);
+	await nextFrame(dom);
+	expect(
+		dom.document.defaultView!.getComputedStyle(
+			dom.document.querySelector("p")!,
+		).color,
+	).toBe("rgb(255, 0, 0)");
+	expect(style.sheet!.cssRules.length).toBe(3);
+	dom.dispose();
+});
+
+test("a type selector matches its element through the rules filed by name", () => {
+	const {dom} = makeDOM(
+		"<style>p { color: red } foreignObject { color: blue }</style>" +
+			"<p class=x>text</p><svg><foreignObject id=f></foreignObject></svg>",
+	);
+	const view = dom.document.defaultView!;
+	const color = (selector: string): string =>
+		view.getComputedStyle(dom.document.querySelector(selector)!).color;
+	expect(color("p")).toBe("rgb(255, 0, 0)");
+	expect(color("#f")).toBe("rgb(0, 0, 255)");
+	dom.dispose();
+});
diff --git a/tests/document-mode.test.ts b/tests/document-mode.test.ts
index 5ad5eba8..b83b16b1 100644
--- a/tests/document-mode.test.ts
+++ b/tests/document-mode.test.ts
@@ -523,3 +523,18 @@ test("hit-testing finds text in the root's boxes when the body is inline", async
 		.toBe(true);
 	dom.dispose();
 });
+
+test("an element outside the document cannot go fullscreen", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 8});
+	const dom = new TermDOM({transport: terminal.transport});
+	await nextFrame(dom);
+	const heard: string[] = [];
+	dom.document.addEventListener("fullscreenerror", (event) =>
+		heard.push(event.type));
+	const stage = dom.document.createElement("div");
+	await expect(stage.requestFullscreen()).rejects.toThrow(TypeError);
+	await new Promise((resolve) => setTimeout(resolve, 0));
+	expect(heard).toEqual(["fullscreenerror"]);
+	expect(dom.document.fullscreenElement).toBe(null);
+	dom.dispose();
+});
diff --git a/tests/dom-dispatch.test.ts b/tests/dom-dispatch.test.ts
index b8129e81..e7a02614 100644
--- a/tests/dom-dispatch.test.ts
+++ b/tests/dom-dispatch.test.ts
@@ -10,7 +10,8 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Document} from "../src/internal/dom.ts";
+import type {Document} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The interfaces script sees are a window's, so the events the tests
 // dispatch are built with a window's constructors.
diff --git a/tests/dom-misc.test.ts b/tests/dom-misc.test.ts
index 74158bf3..742d8f5e 100644
--- a/tests/dom-misc.test.ts
+++ b/tests/dom-misc.test.ts
@@ -5,7 +5,8 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Document, HTMLElement} from "../src/internal/dom.ts";
+import {type Document, HTMLElement} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The realm the tests reach constructors through: a window of this DOM
 // exposes them, as the platform does.
diff --git a/tests/dom.test.ts b/tests/dom.test.ts
index abb7d173..198c8146 100644
--- a/tests/dom.test.ts
+++ b/tests/dom.test.ts
@@ -10,7 +10,6 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {
-	createWindow,
 	type Document,
 	CustomEvent as DOMCustomEvent,
 	Event as DOMEvent,
@@ -20,6 +19,7 @@ import {
 	Text,
 	Window,
 } from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The door a test document comes through. The parser is the one that hands
 // a document the realm's custom element registry, as it does the engine's.
diff --git a/tests/element-from-point-shadow.test.ts b/tests/element-from-point-shadow.test.ts
index 6434b8ed..954586de 100644
--- a/tests/element-from-point-shadow.test.ts
+++ b/tests/element-from-point-shadow.test.ts
@@ -27,3 +27,34 @@ test("elementFromPoint retargets against the tree it is asked from", async () =>
 	]);
 	dom.dispose();
 });
+
+test("elementFromPoint finds a box an inline-block lays out low on the page", async () => {
+	const dom = new TermDOM({
+		transport: new MockProcess({cols: 40, rows: 12}).transport,
+	});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>" +
+		"<span style=\"display: inline-block\"><div id=list>" +
+		"<div id=a>first</div><div id=b>second</div></div></span>";
+	await nextFrame(dom);
+	expect(document.elementFromPoint(1, 6)!.id).toBe("a");
+	expect(document.elementFromPoint(1, 7)!.id).toBe("b");
+	dom.dispose();
+});
+
+test("elementFromPoint finds content that overflows an inline-block", async () => {
+	const dom = new TermDOM({
+		transport: new MockProcess({cols: 40, rows: 12}).transport,
+	});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>" +
+		"<span style=\"display: inline-block\"><div style=\"height: 1px\">" +
+		"<div id=a>first</div><div id=b>second</div><div id=c>third</div>" +
+		"</div></span>";
+	await nextFrame(dom);
+	expect(document.elementFromPoint(1, 7)!.id).toBe("b");
+	expect(document.elementFromPoint(1, 8)!.id).toBe("c");
+	dom.dispose();
+});
diff --git a/tests/exchange-events.test.ts b/tests/exchange-events.test.ts
index 27784aa1..93f62fbb 100644
--- a/tests/exchange-events.test.ts
+++ b/tests/exchange-events.test.ts
@@ -1,7 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {MockProcess, nextFrame, until} from "./test-utils";
 
 function filler(rows: number): string {
diff --git a/tests/flex.test.ts b/tests/flex.test.ts
index b2a582d9..825be7f0 100644
--- a/tests/flex.test.ts
+++ b/tests/flex.test.ts
@@ -1,6 +1,12 @@
 import {describe, expect, test} from "@b9g/libuild/test";
 
-import {LayoutNode, toValue} from "../src/internal/layoutsolver.ts";
+import {
+	getComputedHeight,
+	getComputedWidth,
+	insertChild,
+	LayoutNode,
+	toValue,
+} from "../src/internal/layoutsolver.ts";
 
 /**
  * Spec tests for the layout engine, driven directly rather than through the
@@ -25,7 +31,7 @@ function node(): LayoutNode {
 
 function box(parent: LayoutNode, index = parent.children.length): LayoutNode {
 	const child = node();
-	parent.insertChild(child, index);
+	insertChild(parent, child, index);
 	return child;
 }
 
@@ -36,10 +42,10 @@ function rect(n: LayoutNode): {
 	height: number;
 } {
 	return {
-		left: n.result.left,
-		top: n.result.top,
-		width: n.getComputedWidth(),
-		height: n.getComputedHeight(),
+		left: n.grid.left,
+		top: n.grid.top,
+		width: getComputedWidth(n),
+		height: getComputedHeight(n),
 	};
 }
 
diff --git a/tests/form-associated.test.ts b/tests/form-associated.test.ts
index 08b5c6d8..cae7490a 100644
--- a/tests/form-associated.test.ts
+++ b/tests/form-associated.test.ts
@@ -1,6 +1,6 @@
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 test("a form-associated custom element is disabled by its attribute or a fieldset, and says so", () => {
 	const window = createWindow("<!DOCTYPE html><body></body>");
diff --git a/tests/formdata.test.ts b/tests/formdata.test.ts
index 68f4cb37..b8941ec2 100644
--- a/tests/formdata.test.ts
+++ b/tests/formdata.test.ts
@@ -1,6 +1,6 @@
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 test("a FormData holds its entries in order and reads them back by name", () => {
 	const window = createWindow("<!DOCTYPE html><body></body>");
diff --git a/tests/fuzz-pages.ts b/tests/fuzz-pages.ts
new file mode 100644
index 00000000..54a5116e
--- /dev/null
+++ b/tests/fuzz-pages.ts
@@ -0,0 +1,527 @@
+/**
+ * Pages and changes for tests/incremental.test.ts, kept apart so a
+ * failing seed can be replayed and shrunk outside the test runner. A
+ * change is chosen as an action naming its target by id, so the same
+ * actions replay on a fresh page.
+ */
+import {TermDOM} from "../src/index.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+export const COLS = 60;
+export const ROWS = 30;
+// Cells 7 by 15 pixels put pixel lengths on fractions of a cell.
+export const CELL = {width: 7, height: 15};
+
+export interface Page {
+	name: string;
+	head: string;
+	body: string;
+	classes: string[];
+	styles: Array<[string, (random: Random) => string]>;
+	attributes: Array<[string, (random: Random) => string]>;
+	// Rules a change can add to or take from the page's own sheet.
+	rules: string[];
+}
+
+const LAYOUT: Page = {
+	name: "layout",
+	head: `<style id=sheet>
+	.row { display: flex; gap: 1ch }
+	.col { display: flex; flex-direction: column }
+	.grid { display: grid; grid-template-columns: 1fr 2fr }
+	.box { border: 1px solid; padding: 0 3px }
+	.bg { background-color: rgb(20, 40, 60) }
+	.b { font-weight: bold }
+	.hide { display: none }
+	.wide { width: 60% }
+	.m { margin-left: 10px }
+	.abs { position: absolute; top: 20px; right: 3px }
+	.ib { display: inline-block; border: 1px solid }
+	.center { text-align: center }
+	.n { counter-increment: n }
+	.n::before { content: counter(n) ". " }
+</style>`,
+	body: `<div id=root style="counter-reset: n">
+	<p id=p0>Some text <span id=s0>span</span> and more words here</p>
+	<div id=f class=row><div id=f0 class=box>one</div><div id=f1>two words</div><div id=f2 class=bg>three</div></div>
+	<div id=g class=grid><div id=g0>cell a</div><div id=g1>cell b has longer text that may wrap</div></div>
+	<ol id=l><li id=l0>first</li><li id=l1 class=n>second</li><li id=l2>third</li></ol>
+	<table id=t><tr><td id=t0 class=box>x</td><td id=t1>y y</td></tr></table>
+	<p id=p1>inline <span id=ib class=ib>block</span> tail of the line</p>
+	<div id=c class=col><div id=c0>above</div><div id=c1 class=n>below</div></div>
+</div>`,
+	classes: [
+		"row",
+		"col",
+		"grid",
+		"box",
+		"bg",
+		"b",
+		"hide",
+		"wide",
+		"m",
+		"abs",
+		"ib",
+		"center",
+		"n",
+	],
+	styles: [
+		["margin-left", (r: Random): string => `${r.int(25)}px`],
+		["margin-top", (r: Random): string => `${r.int(40)}px`],
+		["padding-top", (r: Random): string => `${r.int(30)}px`],
+		["width", (r: Random): string => `${10 + r.int(90)}%`],
+		["width", (r: Random): string => `${20 + r.int(300)}px`],
+		[
+			"color",
+			(r: Random): string => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`,
+		],
+		[
+			"background-color",
+			(r: Random): string => r.pick(["transparent", "rgb(90, 0, 0)"]),
+		],
+		[
+			"display",
+			(r: Random): string =>
+				r.pick(["block", "none", "flex", "inline-block", "inline"]),
+		],
+		["order", (r: Random): string => String(r.int(3))],
+		[
+			"flex-direction",
+			(r: Random): string => r.pick(["row", "column", "row-reverse"]),
+		],
+		["text-align", (r: Random): string => r.pick(["left", "center", "right"])],
+		[
+			"position",
+			(r: Random): string => r.pick(["static", "relative", "absolute"]),
+		],
+		["top", (r: Random): string => `${r.int(30)}px`],
+		["visibility", (r: Random): string => r.pick(["visible", "hidden"])],
+		[
+			"border",
+			(r: Random): string => r.pick(["none", "1px solid", "1px double"]),
+		],
+		["z-index", (r: Random): string => String(r.int(3))],
+		["outline", (r: Random): string => r.pick(["none", "1px solid"])],
+	],
+	attributes: [],
+	rules: [],
+};
+
+const FLOW: Page = {
+	name: "flow",
+	head: `<style id=sheet>
+	.scroll { overflow: auto; height: 60px }
+	.clip { overflow: hidden; height: 30px }
+	.contents { display: contents }
+	.sticky { position: sticky; top: 0; background-color: rgb(0, 0, 90) }
+	.fixed { position: fixed; bottom: 0; left: 0 }
+	.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px }
+	.grid3 { display: grid; grid-template-columns: repeat(3, 1fr) }
+	.span2 { grid-column: span 2 }
+	.before::before { content: "[" attr(data-x) "] " }
+	.upper { text-transform: uppercase }
+	.rtl { direction: rtl }
+	.indent { text-indent: 2ch }
+	.nowrap { white-space: nowrap }
+	.pre { white-space: pre }
+	.box { border: 1px solid }
+</style>`,
+	body: `<div id=root>
+	<div id=s class=scroll><p id=s0 class=sticky>sticky head</p><p id=s1>one</p><p id=s2>two</p><p id=s3>three</p><p id=s4>four</p></div>
+	<div id=e class=ell>a long line of text that the box cuts with an ellipsis</div>
+	<div id=k class=contents><span id=k0>contents child</span><p id=k1>block in contents</p></div>
+	<div id=gr class=grid3><div id=g0>a</div><div id=g1 class=span2>b</div><div id=g2>c</div><div id=g3 class=box>d</div></div>
+	<p id=bf class=before data-x=1>before text</p>
+	<input id=in value="field text">
+	<textarea id=ta>area text</textarea>
+	<div id=fx class=fixed>fixed bar</div>
+	<pre id=pr>pre  formatted
+   text</pre>
+</div>`,
+	classes: [
+		"scroll",
+		"clip",
+		"contents",
+		"sticky",
+		"fixed",
+		"ell",
+		"grid3",
+		"span2",
+		"before",
+		"upper",
+		"rtl",
+		"indent",
+		"nowrap",
+		"pre",
+		"box",
+	],
+	styles: [
+		["height", (r: Random): string => `${15 + r.int(90)}px`],
+		["width", (r: Random): string => `${30 + r.int(70)}%`],
+		["overflow", (r: Random): string => r.pick(["visible", "hidden", "auto"])],
+		[
+			"white-space",
+			(r: Random): string => r.pick(["normal", "nowrap", "pre", "pre-wrap"]),
+		],
+		["direction", (r: Random): string => r.pick(["ltr", "rtl"])],
+		["text-transform", (r: Random): string => r.pick(["none", "uppercase"])],
+		[
+			"grid-column",
+			(r: Random): string => r.pick(["auto", "span 2", "1 / 3", "3"]),
+		],
+		[
+			"display",
+			(r: Random): string =>
+				r.pick(["block", "contents", "none", "grid", "inline"]),
+		],
+		["margin-top", (r: Random): string => `${r.int(40)}px`],
+		[
+			"color",
+			(r: Random): string => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`,
+		],
+		["position", (r: Random): string => r.pick(["static", "sticky", "fixed"])],
+		["text-indent", (r: Random): string => `${r.int(5)}ch`],
+	],
+	attributes: [
+		["data-x", (r: Random): string => String(r.int(99))],
+		[
+			"value",
+			(r: Random): string =>
+				r.pick(["", "new value", "a much longer field value"]),
+		],
+		["rows", (r: Random): string => String(1 + r.int(4))],
+	],
+	rules: [
+		".rule-a { color: rgb(200, 0, 0) }",
+		"p { margin: 1px 0 }",
+		".before::before { content: \"<\" attr(data-x) \"> \" }",
+	],
+};
+
+// What boxes that lay out their own content hold: a sticky box in an
+// inline-block in a scroller, held against the scroller's bottom with no
+// scrolling, content past an inline-block's own height, an inline-table,
+// counters ::before steps, and cells with no table around them.
+const CONTEXTS: Page = {
+	name: "contexts",
+	head: `<style id=sheet>
+	.ib { display: inline-block }
+	.scroll { overflow: auto; height: 60px }
+	.stick { position: sticky; bottom: 0; background-color: rgb(0, 0, 90) }
+	.rel { position: relative; top: 5px }
+	.abs { position: absolute; right: 0 }
+	.short { height: 15px }
+	.it { display: inline-table }
+	.row { display: table-row }
+	.cell { display: table-cell }
+	.n::before { counter-increment: n; content: counter(n) ". " }
+	.box { border: 1px solid }
+</style>`,
+	body: `<div id=root style="counter-reset: n">
+	<div id=s class=scroll><span id=ib class=ib><div id=b0>head text</div><div id=st class=stick>stuck foot</div><div id=b1>one</div><div id=b2>two</div><div id=b3>three</div><div id=b4>four</div><div id=b5>five</div></span></div>
+	<p id=p0>before <span id=ib2 class=ib><div id=o class=short><div id=o0>first</div><div id=o1>second</div></div></span> after</p>
+	<p id=p1>table <span id=it class=it><span id=r0 class=row><span id=c0 class=cell>a</span><span id=c1 class=cell>bb</span></span></span> tail</p>
+	<div id=h0 class=n>heading</div><div id=h1 class=n>heading</div>
+	<div id=cells><div id=d0 class=cell>x</div><div id=d1 class=cell>yy</div></div>
+</div>`,
+	classes: [
+		"ib",
+		"scroll",
+		"stick",
+		"rel",
+		"abs",
+		"short",
+		"it",
+		"row",
+		"cell",
+		"n",
+		"box",
+	],
+	styles: [
+		["height", (r: Random): string => `${15 + r.int(90)}px`],
+		["width", (r: Random): string => `${20 + r.int(80)}%`],
+		[
+			"display",
+			(r: Random): string =>
+				r.pick([
+					"block",
+					"inline-block",
+					"inline-table",
+					"table-cell",
+					"table-row",
+					"none",
+				]),
+		],
+		[
+			"position",
+			(r: Random): string =>
+				r.pick(["static", "relative", "sticky", "absolute"]),
+		],
+		["bottom", (r: Random): string => `${r.int(30)}px`],
+		["margin-top", (r: Random): string => `${r.int(40)}px`],
+		["overflow", (r: Random): string => r.pick(["visible", "hidden", "auto"])],
+	],
+	attributes: [],
+	rules: [
+		".n::before { content: counter(n) \" \" }",
+		".ib { border: 1px solid }",
+	],
+};
+
+export const PAGES = [LAYOUT, FLOW, CONTEXTS];
+
+export const WORDS = [
+	"alpha",
+	"be",
+	"gamma delta",
+	"e",
+	"zeta eta theta",
+	"iota",
+];
+
+export class Random {
+	state: number;
+	constructor(seed: number) {
+		this.state = seed;
+	}
+
+	next(): number {
+		this.state = (this.state + 0x6d2b79f5) | 0;
+		let t = this.state;
+		t = Math.imul(t ^ (t >>> 15), t | 1);
+		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	}
+
+	int(max: number): number {
+		return Math.floor(this.next() * (max + 1));
+	}
+
+	pick<T>(items: readonly T[]): T {
+		return items[Math.floor(this.next() * items.length)];
+	}
+}
+
+export type Action =
+	{kind: "class"; id: string; token: string} |
+	{kind: "style"; id: string; property: string; value: string} |
+	{kind: "attribute"; id: string; name: string; value: string} |
+	{kind: "text"; id: string; words: string} |
+	{
+		kind: "insert";
+		parent: string;
+		tag: string;
+		id: string;
+		words: string;
+		before: number;
+	} |
+	{kind: "remove"; id: string} |
+	{kind: "rule"; rule: string};
+
+export function mount(): {dom: TermDOM; terminal: MockProcess} {
+	const terminal = new MockProcess({cols: COLS, rows: ROWS});
+	const dom = new TermDOM({transport: terminal.transport, cellSize: CELL});
+	return {dom, terminal};
+}
+
+// Every element under the root gets an id, so an action can name it.
+export function setUp(document: any, page: Page): void {
+	document.head.innerHTML = page.head;
+	document.body.innerHTML = page.body;
+	let count = 0;
+	for (const element of document.getElementById("root").querySelectorAll("*")) {
+		if (!element.id) {
+			element.id = `k${count++}`;
+		}
+	}
+}
+
+export function choose(
+	document: any,
+	page: Page,
+	random: Random,
+): Action | null {
+	const root = document.getElementById("root");
+	const elements = [...root.querySelectorAll("*")];
+	const element: any = elements.length > 0 ? random.pick(elements) : root;
+	switch (random.int(page.attributes.length > 0 ? 7 : 5)) {
+		case 0:
+			return {kind: "class", id: element.id, token: random.pick(page.classes)};
+		case 1:
+		case 2: {
+			const [property, value] = random.pick(page.styles);
+			return {kind: "style", id: element.id, property, value: value(random)};
+		}
+		case 3:
+			return {kind: "text", id: element.id, words: random.pick(WORDS)};
+		case 4: {
+			const tag = random.pick(["p", "span", "div", "li", "b"]);
+			const id = `x${random.int(9999)}`;
+			const words = random.pick(WORDS);
+			const parent: any = random.pick([root, ...elements]);
+			const before = random.int(parent.childNodes.length);
+			return {kind: "insert", parent: parent.id, tag, id, words, before};
+		}
+		case 5:
+			return element === root ? null : {kind: "remove", id: element.id};
+		case 6: {
+			const [name, value] = random.pick(page.attributes);
+			return {kind: "attribute", id: element.id, name, value: value(random)};
+		}
+		default:
+			return page.rules.length > 0
+				? {kind: "rule", rule: random.pick(page.rules)}
+				: null;
+	}
+}
+
+export function apply(document: any, action: Action): void {
+	switch (action.kind) {
+		case "class":
+			document.getElementById(action.id)?.classList.toggle(action.token);
+			return;
+		case "style":
+			document.getElementById(action.id)?.style
+				.setProperty(action.property, action.value);
+			return;
+		case "attribute":
+			document
+				.getElementById(action.id)
+				?.setAttribute(action.name, action.value);
+			return;
+		case "text": {
+			const element = document.getElementById(action.id);
+			if (!element) {
+				return;
+			}
+			const text = [...element.childNodes].find((node: any) =>
+				node.nodeType === 3 && node.data.trim() !== "",
+			);
+			if (text) {
+				(text as any).data = action.words;
+			} else {
+				element.append(action.words);
+			}
+			return;
+		}
+		case "insert": {
+			const parent = document.getElementById(action.parent);
+			if (!parent || document.getElementById(action.id)) {
+				return;
+			}
+			const added = document.createElement(action.tag);
+			added.id = action.id;
+			added.textContent = action.words;
+			parent.insertBefore(added, parent.childNodes[action.before] ?? null);
+			return;
+		}
+		case "remove":
+			document.getElementById(action.id)?.remove();
+			return;
+		case "rule": {
+			// A rule present is taken out, and one absent is added.
+			const sheet = document.getElementById("sheet");
+			const text: string = sheet.textContent;
+			sheet.textContent = text.includes(action.rule)
+				? text.replace(action.rule, "")
+				: `${text}\n${action.rule}`;
+			return;
+		}
+	}
+}
+
+export function record(
+	page: Page,
+	seed: number,
+	steps: number,
+): Promise<Action[]> {
+	return (async () => {
+		const random = new Random(seed);
+		const {dom} = mount();
+		setUp(dom.document, page);
+		await nextFrame(dom);
+		const actions: Action[] = [];
+		for (let step = 0; step < steps; step++) {
+			const action = choose(dom.document, page, random);
+			if (action) {
+				actions.push(action);
+				apply(dom.document, action);
+			}
+		}
+		dom.dispose();
+		return actions;
+	})();
+}
+
+export function rects(document: any): string[] {
+	return [...document.querySelectorAll("*")].map((element: any) => {
+		const r = element.getBoundingClientRect();
+		return `${element.localName}#${element.id} ${r.x},${r.y} ${r.width}x${r.height}`;
+	});
+}
+
+// A copy of the page's nodes, not its markup, which the parser would
+// rearrange where the changes put an element it would not.
+export async function fresh(
+	page: any,
+): Promise<{screen: string; rects: string[]}> {
+	const {dom, terminal} = mount();
+	dom.document.documentElement.replaceChildren(
+		...[...page.documentElement.childNodes].map((node: any) =>
+			dom.document.importNode(node, true),
+		),
+	);
+	await nextFrame(dom);
+	const result = {
+		screen: terminal.getScreenContents(),
+		rects: rects(dom.document),
+	};
+	dom.dispose();
+	return result;
+}
+
+/**
+ * Where the page, changed a frame at a time, first stops matching the
+ * same page rendered fresh: the actions up to that point and what
+ * differs, or null when it never does.
+ */
+export async function firstMismatch(
+	page: Page,
+	actions: Action[],
+): Promise<string | null> {
+	const {dom, terminal} = mount();
+	setUp(dom.document, page);
+	await nextFrame(dom);
+	for (let index = 0; index < actions.length; index++) {
+		apply(dom.document, actions[index]);
+		await nextFrame(dom);
+		const expected = await fresh(dom.document);
+		const got = rects(dom.document);
+		const screen = terminal.getScreenContents();
+		const differences: string[] = [];
+		for (let i = 0; i < Math.max(got.length, expected.rects.length); i++) {
+			if (got[i] !== expected.rects[i]) {
+				differences.push(`rect ${got[i]}, fresh ${expected.rects[i]}`);
+			}
+		}
+		const rows = screen.split("\n");
+		const freshRows = expected.screen.split("\n");
+		for (let i = 0; i < rows.length; i++) {
+			if (rows[i] !== freshRows[i]) {
+				differences.push(
+					`row ${i} ${JSON.stringify(rows[i])}, fresh ${
+						JSON.stringify(freshRows[i])
+					}`,
+				);
+			}
+		}
+		if (differences.length > 0) {
+			dom.dispose();
+			return `${page.name} after ${
+				JSON.stringify(actions.slice(0, index + 1))
+			}\n${differences.slice(0, 12).join("\n")}`;
+		}
+	}
+	dom.dispose();
+	return null;
+}
diff --git a/tests/highlights.test.ts b/tests/highlights.test.ts
index 34b8f076..0b208145 100644
--- a/tests/highlights.test.ts
+++ b/tests/highlights.test.ts
@@ -111,7 +111,7 @@ test("the registry is a map, and re-registering a name moves it last", () => {
 	expect([...registry.keys()]).toEqual(["second", "first"]);
 
 	const names: string[] = [];
-	registry.forEach((value: unknown, key: string, parent: unknown) => {
+	registry.forEach((_value: unknown, key: string, parent: unknown) => {
 		names.push(key);
 		expect(parent).toBe(registry);
 	});
diff --git a/tests/images.test.ts b/tests/images.test.ts
index 6429ccbd..c9f12547 100644
--- a/tests/images.test.ts
+++ b/tests/images.test.ts
@@ -13,6 +13,7 @@ import {expect, test} from "@b9g/libuild/test";
 import {
 	type Bitmap,
 	decodeImage,
+	decodeImageForPage,
 	decodeImageOffThread,
 	encodePNG,
 	keepAtMost,
@@ -23,7 +24,6 @@ import {
 	resolveImageURL,
 	retainDecoder,
 	sampleBitmap,
-	setDecodeTimeout,
 	setDecodeWorkerURL,
 	sniffImageType,
 } from "../src/internal/images.ts";
@@ -495,7 +495,6 @@ withWorker(
 	"an image past its time fails alone, and the images behind it decode",
 	async () => {
 		try {
-			setDecodeTimeout(1000);
 			setDecodeWorkerURL(
 				fakeWorker(`if (data.bytes.byteLength !== 1) ${ANSWER};`),
 			);
@@ -506,12 +505,11 @@ withWorker(
 					decodeImageOffThread(bytesOf("png-rgb.png")),
 				]),
 			).toEqual([
-				"The image took more than 1000 ms to decode",
+				"The image took more than 10000 ms to decode",
 				"1 wide",
 				"1 wide",
 			]);
 		} finally {
-			setDecodeTimeout(10_000);
 			setDecodeWorkerURL(null);
 		}
 	},
@@ -521,7 +519,6 @@ withWorker(
 	"a decode aborted while it waits is dropped, and the line moves on",
 	async () => {
 		try {
-			setDecodeTimeout(1000);
 			setDecodeWorkerURL(
 				fakeWorker(`if (data.bytes.byteLength !== 1) ${ANSWER};`),
 			);
@@ -541,7 +538,7 @@ withWorker(
 			];
 			abort.abort(new Error("The source changed"));
 			expect(await outcomes(decodes)).toEqual([
-				"The image took more than 1000 ms to decode",
+				"The image took more than 10000 ms to decode",
 				"The source changed",
 				"1 wide",
 			]);
@@ -550,7 +547,6 @@ withWorker(
 				decodeImageOffThread(bytesOf("png-rgb.png"), abort.signal),
 			).rejects.toThrow("The source changed");
 		} finally {
-			setDecodeTimeout(10_000);
 			setDecodeWorkerURL(null);
 		}
 	},
@@ -627,15 +623,9 @@ test("a decode on this thread stops past its time", async () => {
 		data[i] = (i * 2654435761) >>> 24;
 	}
 	const png = encodePNG({width, height: width, data});
-	try {
-		setDecodeTimeout(0);
-		await expect(decodeImageOffThread(png)).rejects.toThrow("too long");
-		setDecodeTimeout(10_000);
-		const bitmap = await decodeImageOffThread(png);
-		expect(bitmap.naturalWidth ?? bitmap.width).toBe(width);
-	} finally {
-		setDecodeTimeout(10_000);
-	}
+	await expect(decodeImageForPage(png, Date.now())).rejects.toThrow("too long");
+	const bitmap = await decodeImageOffThread(png);
+	expect(bitmap.naturalWidth ?? bitmap.width).toBe(width);
 });
 
 test("an image past MAX_KEPT_PIXELS is kept averaged down, with its natural size", () => {
diff --git a/tests/img.test.ts b/tests/img.test.ts
index b997715d..f6151ac0 100644
--- a/tests/img.test.ts
+++ b/tests/img.test.ts
@@ -270,7 +270,9 @@ test("an image sits on a line with the text around it", async () => {
 	await nextFrame(dom);
 	// A frame drawn while it loaded showed its wider loading box, whose
 	// last cell was erased.
-	expect(rowText(terminal, 0).trimEnd()).toBe("before ▄▄ after");
+	// Its bottom edge is its baseline, which the text sits on.
+	expect(rowText(terminal, 0).trimEnd()).toBe("       ▄▄");
+	expect(rowText(terminal, 1).trimEnd()).toBe("before ▄▄ after");
 	// The image's computed display stays inline, as in a browser.
 	expect(
 		dom.window.getComputedStyle(document.querySelector("img")!).display,
diff --git a/tests/import-graph.test.ts b/tests/import-graph.test.ts
new file mode 100644
index 00000000..3ff065ed
--- /dev/null
+++ b/tests/import-graph.test.ts
@@ -0,0 +1,78 @@
+/**
+ * No module of the engine imports, at run time, a module that imports it
+ * back. A cycle decides which module finishes loading first by whoever
+ * the application reaches first, and a class that extends one from the
+ * other side of a cycle is undefined when its module runs. Type-only
+ * imports erase, so they may point anywhere.
+ */
+import {readdirSync, readFileSync} from "node:fs";
+import {dirname, join, normalize} from "node:path";
+import {fileURLToPath} from "node:url";
+
+import {expect, test} from "@b9g/libuild/test";
+
+const src = join(dirname(fileURLToPath(import.meta.url)), "..", "src");
+
+function modules(directory: string): string[] {
+	return readdirSync(directory, {withFileTypes: true}).flatMap((entry) => {
+		const path = join(directory, entry.name);
+		if (entry.isDirectory()) {
+			return modules(path);
+		}
+		return path.endsWith(".ts") ? [path] : [];
+	});
+}
+
+function runtimeImports(file: string): string[] {
+	const text = readFileSync(file, "utf8");
+	const found: string[] = [];
+	const statements =
+		/^(?:import|export)\s+(type\s+)?([^;]*?)\s+from\s+"(\.[^"]+)";/gms;
+	for (const [, typeOnly, clause, specifier] of text.matchAll(statements)) {
+		if (typeOnly) {
+			continue;
+		}
+		const named = clause.match(/\{([^}]*)\}/);
+		const rest = clause.replace(/\{[^}]*\}/, "").replace(/,/g, "").trim();
+		if (named && rest === "") {
+			const members = named[1].split(",").map((member) => member.trim())
+				.filter(Boolean);
+			if (members.every((member) => member.startsWith("type "))) {
+				continue;
+			}
+		}
+		found.push(normalize(join(dirname(file), specifier)));
+	}
+	return found;
+}
+
+test("no module of the engine imports one that imports it back", () => {
+	const graph = new Map(
+		modules(src).map((file) => [file, runtimeImports(file)]),
+	);
+	const cycles: string[] = [];
+	const state = new Map<string, "visiting" | "done">();
+	const stack: string[] = [];
+	const visit = (file: string): void => {
+		state.set(file, "visiting");
+		stack.push(file);
+		for (const next of graph.get(file) ?? []) {
+			if (state.get(next) === "visiting") {
+				const loop = stack.slice(stack.indexOf(next)).concat(next);
+				cycles.push(
+					loop.map((path) => path.slice(src.length + 1)).join(" -> "),
+				);
+			} else if (!state.has(next) && graph.has(next)) {
+				visit(next);
+			}
+		}
+		stack.pop();
+		state.set(file, "done");
+	};
+	for (const file of graph.keys()) {
+		if (!state.has(file)) {
+			visit(file);
+		}
+	}
+	expect(cycles).toEqual([]);
+});
diff --git a/tests/import-order.test.ts b/tests/import-order.test.ts
index 980b5cab..4682bd1b 100644
--- a/tests/import-order.test.ts
+++ b/tests/import-order.test.ts
@@ -1,12 +1,11 @@
 /**
- * cssvalues, cssselectors, dom and cssom form an import cycle, so whichever
- * of them an application reaches first is evaluated before the others'
- * tables exist. A module-level constant that calls across the cycle throws
+ * An application can reach cssvalues before anything else of the engine,
+ * and a module-level constant that needs a module not yet evaluated throws
  * a TDZ ReferenceError for that first importer and nobody else, which is
  * why the entry point never saw it.
  *
- * The import is the whole test: nothing else here reaches the cycle, so
- * cssvalues is the module that evaluates it.
+ * The import is the whole test: nothing else here is imported, so
+ * cssvalues is the first module evaluated.
  */
 import {expect, test} from "@b9g/libuild/test";
 
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
new file mode 100644
index 00000000..3a891234
--- /dev/null
+++ b/tests/incremental.test.ts
@@ -0,0 +1,193 @@
+/**
+ * Whatever a page went through, what it shows must be what the same
+ * page shows freshly rendered. Every cache layout, style and paint keep
+ * across frames is a way for the first to drift from the second: a box
+ * not laid out again, rows not repainted, a style or a measure read from
+ * before a change. Each run applies seeded random changes to a page
+ * built from the features those caches cover, and after every change
+ * compares the screen and every element's rect with a fresh render of
+ * the page's markup. Cells are 7 by 15 pixels, so lengths in pixels
+ * fall on fractions of a cell.
+ */
+import {expect, test} from "@b9g/libuild/test";
+
+import {
+	firstMismatch,
+	fresh,
+	mount,
+	PAGES,
+	record,
+	rects,
+} from "./fuzz-pages.ts";
+import {nextFrame} from "./test-utils.ts";
+
+const [LAYOUT, FLOW] = PAGES;
+
+for (const page of PAGES) {
+	for (let seed = 1; seed <= 24; seed++) {
+		test(`seeded changes to the ${page.name} page render as a fresh page does: seed ${seed}`, async () => {
+			expect(await firstMismatch(page, await record(page, seed, 12))).toBe(
+				null,
+			);
+		});
+	}
+}
+
+// Seeds that once found a bug, run as long as they did then: a grid cell
+// rounded again from rounded values (1012, 1066, 1093), restyles inside
+// an inline-block repainting rows counted from its own top (1020, 1193,
+// 1200, 1260), an inline-block's width its measure did not hear of
+// (1481), a positioned row group zeroed by its table when stray content
+// joined it (1140), a positioned row's absolute cell (1941), an
+// absolute row placed from rounded offsets (2029), and a row made an
+// inline-block whose percentage width a cached size did not hear of
+// (1637, 2045).
+for (const seed of [
+	1012,
+	1020,
+	1066,
+	1093,
+	1140,
+	1193,
+	1200,
+	1260,
+	1481,
+	1637,
+	1941,
+	2029,
+	2045,
+]) {
+	test(`seeded changes to the layout page render as a fresh page does: seed ${seed}`, async () => {
+		expect(await firstMismatch(LAYOUT, await record(LAYOUT, seed, 25))).toBe(
+			null,
+		);
+	});
+}
+
+// The same for the flow page: an input's shown value its attributes set
+// (3006), a class restyling a form control's shadow children (3003), a
+// sticky box asked for its shift in the middle of a solve (3130), and a
+// sticky shift moving rows its rect did not (3134, 3262).
+for (const seed of [3003, 3006, 3130, 3134, 3262]) {
+	test(`seeded changes to the flow page render as a fresh page does: seed ${seed}`, async () => {
+		expect(await firstMismatch(FLOW, await record(FLOW, seed, 25))).toBe(null);
+	});
+}
+
+// Each change, applied a frame apart, against the page drawn fresh after
+// each one.
+async function replay(
+	html: string,
+	changes: Array<(document: any) => void>,
+): Promise<void> {
+	const {dom, terminal} = mount();
+	dom.document.head.innerHTML = LAYOUT.head;
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	for (const [index, apply] of changes.entries()) {
+		apply(dom.document);
+		await nextFrame(dom);
+		const expected = await fresh(dom.document);
+		expect(`after change ${index}\n${rects(dom.document).join("\n")}`)
+			.toBe(`after change ${index}\n${expected.rects.join("\n")}`);
+		expect(`after change ${index}\n${terminal.getScreenContents()}`)
+			.toBe(`after change ${index}\n${expected.screen}`);
+	}
+	dom.dispose();
+}
+
+test("a cell taken out of flow leaves its table", async () => {
+	await replay(
+		"<table id=t><tr><td id=a class=box>x</td><td>y y</td></tr></table>",
+		[(document) => document.getElementById("a").style.position = "absolute"],
+	);
+});
+
+test("a positioned row group keeps its positioned cells laid out", async () => {
+	await replay(
+		"<table id=t><tbody id=g><tr><td id=a>x</td><td id=b>y y</td></tr>" +
+			"</tbody></table>",
+		[
+			(document) => document.getElementById("b").classList.add("abs"),
+			(document) => document.getElementById("g").classList.add("abs"),
+			(document) => document.getElementById("t").append("stray"),
+		],
+	);
+});
+
+test("an inline-block grows with a child made wider", async () => {
+	await replay(
+		"<div id=f class=row><div id=a class=box>one</div><div>two</div></div>",
+		[
+			(document) => document.getElementById("f").classList.add("ib"),
+			(document) => document.getElementById("a").style.width = "87px",
+		],
+	);
+});
+
+test("an inline-block lays out a block put inside its inline content", async () => {
+	await replay("<div class=col><div id=c>above</div></div>", [
+		(document) => {
+			const span = document.createElement("span");
+			span.id = "s";
+			span.textContent = "gamma delta";
+			document.getElementById("c").prepend(span);
+		},
+		(document) => document.getElementById("c").classList.add("ib"),
+		(document) => {
+			const p = document.createElement("p");
+			p.textContent = "e";
+			document.getElementById("s").append(p);
+		},
+	]);
+});
+
+test("a flex item made an inline-block takes the width it is given", async () => {
+	await replay("<div class=row><div>one</div><div id=a>two words</div></div>", [
+		(document) => document.getElementById("a").classList.add("ib"),
+		(document) => document.getElementById("a").style.width = "23%",
+	]);
+});
+
+test("an untouched textarea shows the text children it is given", async () => {
+	await replay("<textarea id=a>area text</textarea>", [
+		(document) => document.getElementById("a").firstChild.data = "alpha",
+		(document) => document.getElementById("a").append(" beta"),
+		(document) => {
+			const span = document.createElement("span");
+			span.textContent = "not its text";
+			document.getElementById("a").prepend(span);
+		},
+	]);
+});
+
+test("a row made a containing block lays out its positioned cell", async () => {
+	await replay("<table><tr id=r><td>x</td><td id=b>y y</td></tr></table>", [
+		(document) => document.getElementById("b").classList.add("abs"),
+		(document) => document.getElementById("r").style.position = "relative",
+	]);
+});
+
+test("a block in an inline that dissolves leaves no box behind", async () => {
+	await replay("<div><span>inline<p id=p>block</p></span></div>", [
+		(document) => document.getElementById("p").style.display = "contents",
+	]);
+});
+
+test("a positioned cell in an inline-block paints on the rows it is on", async () => {
+	await replay(
+		"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>" +
+			"<div>6</div><div>7</div><div>8</div><table id=t><tbody id=g><tr><td class=box>x</td>" +
+			"<td id=b>y y</td></tr></tbody></table>",
+		[
+			(document) => document.getElementById("t").style.display = "inline-block",
+			(document) => document.getElementById("b").style.position = "relative",
+			(document) => {
+				const block = document.createElement("div");
+				block.textContent = "e";
+				document.getElementById("b").prepend(block);
+			},
+			(document) => document.getElementById("g").style.marginTop = "24px",
+		],
+	);
+});
diff --git a/tests/inline-block.test.ts b/tests/inline-block.test.ts
index 3894040a..6a5891c1 100644
--- a/tests/inline-block.test.ts
+++ b/tests/inline-block.test.ts
@@ -574,3 +574,57 @@ test("whitespace between columns takes no room at font-size 0", () => {
 	}
 	dom.dispose();
 });
+
+// css2 §10.8.1: an atomic inline sits with its baseline on the line's, so
+// the text beside it lines up with its last line of text, an
+// inline-table's first, or the bottom edge of a box that clips.
+async function lineRows(html: string): Promise<string[]> {
+	const terminal = new MockProcess({cols: 30, rows: 6});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	const rows = terminal.getPlainText()
+		.split("\n")
+		.map((line) => line.replace(/\s+$/, ""))
+		.filter((line) => line !== "");
+	dom.dispose();
+	return rows;
+}
+
+test("text beside an inline-block sits on its last line", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-block\"><div>one</div>" +
+				"<div>two</div></span> after",
+		),
+	).toEqual(["       one", "before two after"]);
+});
+
+test("vertical-align: top puts an inline-block's top on the line's", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-block; vertical-align: top\">" +
+				"<div>one</div><div>two</div></span> after",
+		),
+	).toEqual(["before one after", "       two"]);
+});
+
+test("text beside an inline-table sits on its first row", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-table\">" +
+				"<span style=\"display: table-row\"><span style=\"display: table-cell\">" +
+				"one</span></span><span style=\"display: table-row\">" +
+				"<span style=\"display: table-cell\">two</span></span></span> after",
+		),
+	).toEqual(["before one after", "       two"]);
+});
+
+test("text beside an inline-block that clips sits on its bottom edge", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-block; overflow: hidden\">" +
+				"<div>one</div><div>two</div><div>three</div></span> after",
+		),
+	).toEqual(["       one", "       two", "before three after"]);
+});
diff --git a/tests/inspector.test.ts b/tests/inspector.test.ts
index 65b9be7d..ad5c0491 100644
--- a/tests/inspector.test.ts
+++ b/tests/inspector.test.ts
@@ -4,7 +4,8 @@ import {inspect} from "node:util";
 
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Element} from "../src/internal/dom.ts";
+import type {Element} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 function asElement(value: unknown): Element {
 	return value as Element;
diff --git a/tests/layout-invalidation.test.ts b/tests/layout-invalidation.test.ts
index 4c5c93ff..b0580a37 100644
--- a/tests/layout-invalidation.test.ts
+++ b/tests/layout-invalidation.test.ts
@@ -509,7 +509,8 @@ test("a block arriving under a box that measures as a unit rebuilds it", async (
 	const host = document.getElementById("s")!;
 	host.insertBefore(block, host.firstChild);
 	await nextFrame(dom);
-	expect(lines().slice(0, 2)).toEqual(["NB", "A"]);
+	// The inline-block's baseline is its last line, which the text sits on.
+	expect(lines().slice(0, 2)).toEqual(["N", "AB"]);
 
 	dom.dispose();
 });
@@ -852,3 +853,64 @@ test("many children of one container changed in one frame all repaint", async ()
 	}
 	dom.dispose();
 });
+
+test("a subtree changed while out of the document lays out its changes when it returns", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<div id=box><p id=a>first</p><p>second</p></div><p>after</p>";
+	await nextFrame(dom);
+	const box = document.getElementById("box")!;
+	box.remove();
+	await nextFrame(dom);
+	expect(dom.renderANSI()).not.toContain("first");
+	box.querySelector("#a")!.textContent = "changed and much longer";
+	const span = document.createElement("span");
+	span.textContent = "added";
+	box.prepend(span);
+	box.lastElementChild!.remove();
+	document.body.prepend(box);
+	await nextFrame(dom);
+	const lines = dom.renderANSI().split("\n").map((line) =>
+		line.replace(/\x1b\[[0-9;:]*m/g, "").trimEnd());
+	expect(lines.slice(0, 3)).toEqual([
+		"added",
+		"changed and much longer",
+		"after",
+	]);
+	dom.dispose();
+});
+
+test("pseudo-elements built while a tree is detached show once it is inserted", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<style>.tag::before { content: '> ' } .warm { color: red }</style>";
+	await nextFrame(dom);
+	const box = document.createElement("div");
+	const list = document.createElement("ul");
+	box.append(list);
+	const item = document.createElement("li");
+	item.textContent = "item";
+	list.append(item);
+	const tag = document.createElement("p");
+	tag.className = "tag";
+	tag.textContent = "tagged";
+	box.append(tag);
+	const warm = document.createElement("div");
+	warm.className = "warm";
+	const moved = document.createElement("span");
+	moved.textContent = "moved";
+	box.append(moved);
+	warm.append(moved);
+	box.append(warm);
+	document.body.append(box);
+	await nextFrame(dom);
+	const text = terminal.getPlainText();
+	expect(text).toContain("• item");
+	expect(text).toContain("> tagged");
+	expect(text).toContain("moved");
+	dom.dispose();
+});
diff --git a/tests/line-clearing.test.ts b/tests/line-clearing.test.ts
index f7e69add..afd17b1f 100644
--- a/tests/line-clearing.test.ts
+++ b/tests/line-clearing.test.ts
@@ -1,7 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {drawText, Framebuffer, replaced} from "../src/internal/framebuffer.ts";
 import {MockProcess, nextFrame, renderFrame} from "./test-utils.js";
 
 test("line clearing removes terminal artifacts from previous commands", async () => {
@@ -144,7 +144,7 @@ test("a screen reset clears stale rows without a screen-qualifying erase", async
 			{offset: 0, cursorRow: 0, regionRows: 5},
 			(ctx) => {
 				for (let i = 0; i < 5; i++) {
-					ctx.drawText(`stale row ${i}`, 0, i);
+					drawText(ctx, `stale row ${i}`, 0, i);
 				}
 			},
 		),
@@ -153,13 +153,13 @@ test("a screen reset clears stale rows without a screen-qualifying erase", async
 
 	// The resize path resets the screen; the new frame is shorter and leaves
 	// row 1 blank.
-	framebuffer.replaced(0);
+	replaced(framebuffer, 0);
 	const out = renderFrame(
 		framebuffer,
 		{offset: 0, cursorRow: 0, regionRows: 3},
 		(ctx) => {
-			ctx.drawText("fresh top", 0, 0);
-			ctx.drawText("fresh mid", 0, 2);
+			drawText(ctx, "fresh top", 0, 0);
+			drawText(ctx, "fresh mid", 0, 2);
 		},
 	);
 	expect(out).not.toContain("\x1b[2J");
diff --git a/tests/margin-collapsing.test.ts b/tests/margin-collapsing.test.ts
index 708e5ac7..d7c4832a 100644
--- a/tests/margin-collapsing.test.ts
+++ b/tests/margin-collapsing.test.ts
@@ -251,3 +251,17 @@ test("a trailing self-collapsing child pushes the gap outside its parent", async
 	expect(after.top - wrap.bottom).toBe(2);
 	dom.dispose();
 });
+
+// The root element's margins collapse with nothing (css2 §8.3.1): not its
+// children's, and not out of the initial containing block, which has
+// nowhere to put them.
+test("the root element's margins stay its own", async () => {
+	const {dom} = await layout(
+		"<p id=\"p\" style=\"margin: 0\">x</p>",
+		"<style>html { margin-top: 2px } body { margin: 3px 0 0 }</style>",
+	);
+	const html = getRect(dom, dom.document.documentElement);
+	const p = getRect(dom, dom.document.getElementById("p")!);
+	expect([html.top, p.top]).toEqual([2, 5]);
+	dom.dispose();
+});
diff --git a/tests/mathml.test.ts b/tests/mathml.test.ts
index 47e3f03e..9b1e2e6b 100644
--- a/tests/mathml.test.ts
+++ b/tests/mathml.test.ts
@@ -5,7 +5,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {
 	captureRawOutput,
 	inputDispatched,
diff --git a/tests/membrane.test.ts b/tests/membrane.test.ts
index 872d2c86..215fbe2e 100644
--- a/tests/membrane.test.ts
+++ b/tests/membrane.test.ts
@@ -1,17 +1,12 @@
 /**
  * What a page, or the program embedding TermDOM, can reach holds nothing of
- * the engine's: no symbol-keyed state or steps on any object or prototype
- * but the runtime's own. Where the runtime has a class, the page gets it;
- * where it has none, the sealed one stands in.
+ * the engine's: no internal state or steps on any object or prototype but
+ * the runtime's own. Where the runtime has a class, the page gets it.
  */
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {
-	SealedAbortController,
-	SealedAbortSignal,
-	SealedDOMException,
-} from "../src/internal/dom.ts";
+import {SealedAbortController, SealedAbortSignal} from "../src/internal/dom.ts";
 import {MockProcess} from "./test-utils.js";
 
 function create(html = ""): TermDOM {
@@ -153,28 +148,6 @@ test("a window's DOMException is the runtime's where the runtime has one", () =>
 	dom.dispose();
 });
 
-test("the sealed DOMException is an Error with WebIDL's members", () => {
-	const dom = create();
-	const DOMException =
-		SealedDOMException as unknown as typeof globalThis.DOMException;
-	const error = new DOMException("gone", "NotFoundError");
-	expect(error).toBeInstanceOf(Error);
-	expect(Object.getPrototypeOf(DOMException.prototype)).toBe(Error.prototype);
-	expect([error.name, error.message, error.code]).toEqual([
-		"NotFoundError",
-		"gone",
-		8,
-	]);
-	expect(new DOMException().name).toBe("Error");
-	expect(new DOMException("x", "Unlisted").code).toBe(0);
-	expect([DOMException.NOT_FOUND_ERR, error.NOT_FOUND_ERR]).toEqual([8, 8]);
-	expect(String(error)).toBe("NotFoundError: gone");
-	expect(Object.prototype.toString.call(error)).toBe("[object DOMException]");
-	const name = Object.getOwnPropertyDescriptor(DOMException.prototype, "name")!;
-	expect(() => name.get!.call({})).toThrow(TypeError);
-	dom.dispose();
-});
-
 function document(dom: TermDOM): Document {
 	return dom.document;
 }
diff --git a/tests/mouse.test.ts b/tests/mouse.test.ts
index 0d38e8b7..4e6c3e94 100644
--- a/tests/mouse.test.ts
+++ b/tests/mouse.test.ts
@@ -13,15 +13,15 @@ const ENABLE = "\x1b[?1002h\x1b[?1006h";
 const DISABLE = "\x1b[?1006l\x1b[?1002l";
 
 /** Feed bytes as the terminal would, and wait for the read side to see them. */
-function send(proc: MockProcess, data: string): Promise<void> {
+async function send(proc: MockProcess, data: string): Promise<void> {
 	(proc.stdin as unknown as {emit(e: string, d: Buffer): void}).emit(
 		"data",
 		Buffer.from(data),
 	);
+	await inputDispatched();
 	// The frame the input asks for starts in the next task, and writes in
 	// the one after.
-	return new Promise((resolve) =>
-		setTimeout(() => setTimeout(resolve, 0), 0));
+	await new Promise((resolve) => setTimeout(() => setTimeout(resolve, 0), 0));
 }
 
 function makeDocumentModeApp(lines = 30): {
diff --git a/tests/offset-geometry.test.ts b/tests/offset-geometry.test.ts
index b1f2ebbe..4a38addb 100644
--- a/tests/offset-geometry.test.ts
+++ b/tests/offset-geometry.test.ts
@@ -235,3 +235,17 @@ test("offsetParent walks the flat tree and answers only shadow-including ancesto
 	expect(fixed.offsetParent).toBe(null);
 	dom.dispose();
 });
+
+test("an image's x and y are its box's edges from the document's origin", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML =
+		"<p>line</p><p>aa <img width=8 height=16 alt=x></p>";
+	await nextFrame(dom);
+	const image = dom.document.querySelector("img")!;
+	const rect = image.getBoundingClientRect();
+	expect([image.x, image.y]).toEqual([rect.left, rect.top]);
+	expect([image.x, image.y]).not.toEqual([0, 0]);
+	expect(new dom.window.Image().x).toBe(0);
+	dom.dispose();
+});
diff --git a/tests/partial-repaint.test.ts b/tests/partial-repaint.test.ts
new file mode 100644
index 00000000..e898a797
--- /dev/null
+++ b/tests/partial-repaint.test.ts
@@ -0,0 +1,399 @@
+/**
+ * A frame repaints only the rows that changed, and every way a page can
+ * change has to name its rows. Each test makes one change after a first
+ * frame and holds the result to two oracles: the partial-frame check,
+ * which paints the frame whole beside it, and the terminal itself, whose
+ * screen must not change when the page is then repainted from scratch.
+ * The tests also count the frames the check compared, so a change that
+ * repaints whole cannot pass for one that repaints rows.
+ */
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {invalidate, repaintAll} from "../src/internal/framebuffer.ts";
+import {partialFrameCheck} from "../src/internal/painter.ts";
+import {_} from "../src/internal/slots.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+async function repaint(
+	html: string,
+	change: (document: any, window: any) => void | Promise<void>,
+	{head = "", cols = 40, rows = 12} = {},
+): Promise<{partial: number; terminal: MockProcess; dom: TermDOM}> {
+	const terminal = new MockProcess({cols, rows});
+	const dom = new TermDOM({transport: terminal.transport});
+	if (head) {
+		dom.document.head.innerHTML = head;
+	}
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	await nextFrame(dom);
+	const before = partialFrameCheck.checked;
+	await change(dom.document, dom.window);
+	await nextFrame(dom);
+	const partial = partialFrameCheck.checked - before;
+
+	const shown = terminal.getScreenContents();
+	const slots = _(dom as any) as any;
+	repaintAll(slots.framebuffer);
+	invalidate(slots.framebuffer);
+	await nextFrame(dom);
+	expect(shown).toBe(terminal.getScreenContents());
+	return {partial, terminal, dom};
+}
+
+const lines = (count: number, prefix = "line") =>
+	Array.from({length: count}, (_, i) => `<p>${prefix} ${i}</p>`).join("");
+
+test("a z-index swap repaints the boxes it reorders", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) +
+			"<div id=a style=\"position: absolute; top: 5px; left: 2px; " +
+			"z-index: 1; background: red\">aaaa</div>" +
+			"<div id=b style=\"position: absolute; top: 5px; left: 4px; " +
+			"z-index: 2; background: blue\">bbbb</div>",
+		(document) => {
+			document.getElementById("a").style.zIndex = "3";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("visibility hides a word in place", async () => {
+	const {partial, dom} = await repaint(
+		lines(4) + "<p>keep <span id=s>this</span> word</p>",
+		(document) => {
+			document.getElementById("s").style.visibility = "hidden";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an outline drawn outside its box repaints the rows it reaches", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) + "<div id=d style=\"margin: 2px 4px\">boxed</div>" + lines(3),
+		(document) => {
+			const d = document.getElementById("d");
+			d.style.outline = "1px solid";
+			d.style.outlineOffset = "1px";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an inherited color reaches every descendant's rows", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<div id=d><p>one <b>two</b></p><p>three</p></div>",
+		(document) => {
+			document.getElementById("d").style.color = "rgb(0, 128, 0)";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a custom property on the root recolors text deep below it", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<div><p><span class=c>deep</span></p></div>",
+		(document) => {
+			document.documentElement.style.setProperty("--c", "rgb(255, 0, 0)");
+		},
+		{
+			head: "<style>:root { --c: rgb(0, 0, 255) } .c { color: var(--c) }</style>",
+		},
+	);
+	dom.dispose();
+});
+
+test("an ordered list renumbers below an item taken out", async () => {
+	const {dom} = await repaint(
+		"<ol>" +
+		Array.from({length: 5}, (_, i) => `<li id=i${i}>item</li>`).join("") +
+		"</ol>",
+		(document) => {
+			document.getElementById("i1").remove();
+		},
+	);
+	dom.dispose();
+});
+
+test("an ordered list renumbers when its start changes", async () => {
+	const {dom} = await repaint(
+		"<ol id=o><li>a</li><li>b</li><li>c</li></ol>",
+		(document) => {
+			document.getElementById("o").setAttribute("start", "7");
+		},
+	);
+	dom.dispose();
+});
+
+test("generated content follows the attribute it reads", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<p id=p data-n=\"1\">count</p>",
+		(document) => {
+			document.getElementById("p").setAttribute("data-n", "2");
+		},
+		{head: "<style>#p::before { content: attr(data-n) \" \" }</style>"},
+	);
+	dom.dispose();
+});
+
+test("text edited to the same length repaints its row", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) + "<p id=p>abcdef</p>" + lines(3),
+		(document) => {
+			document.getElementById("p").firstChild.data = "uvwxyz";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an input's value set by property repaints the field", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<input id=i value=old>",
+		(document) => {
+			document.getElementById("i").value = "new value";
+		},
+	);
+	dom.dispose();
+});
+
+test("the last child leaving a box of fixed height clears its rows", async () => {
+	const {partial, dom} = await repaint(
+		"<div style=\"height: 6px\"><p>first</p><p id=last>last</p></div>" +
+			lines(2),
+		(document) => {
+			document.getElementById("last").remove();
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a plain box hidden with display: none clears its text", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<div id=d><p>gone</p><p>soon</p></div>" + lines(2),
+		(document) => {
+			document.getElementById("d").style.display = "none";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a border removed beside another unjoins their corners", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) +
+			"<div style=\"display: flex\"><div id=a style=\"border: 1px solid\">" +
+			"a</div><div style=\"border: 1px solid\">b</div></div>" +
+		lines(2),
+		(document) => {
+			document.getElementById("a").style.border = "none";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a selection made from script highlights, then collapses", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<p id=p>select these words</p>" + lines(2),
+		async (document, window) => {
+			const range = document.createRange();
+			range.setStart(document.getElementById("p").firstChild, 7);
+			range.setEnd(document.getElementById("p").firstChild, 12);
+			window.getSelection().addRange(range);
+		},
+	);
+	dom.dispose();
+});
+
+test("a highlight registered and removed repaints its text", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<p id=p>highlight me</p>",
+		(document, window) => {
+			const range = document.createRange();
+			range.selectNodeContents(document.getElementById("p"));
+			window.CSS.highlights.set("mark", new window.Highlight(range));
+		},
+		{head: "<style>::highlight(mark) { background-color: yellow }</style>"},
+	);
+	dom.dispose();
+});
+
+test("a canvas drawn on repaints its cells", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<canvas id=c width=80 height=48></canvas>",
+		(document) => {
+			const ctx = document.getElementById("c").getContext("2d");
+			ctx.fillStyle = "red";
+			ctx.fillRect(0, 0, 40, 24);
+		},
+	);
+	dom.dispose();
+});
+
+test("a table cell's background repaints the cell", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<table><tr><td id=c>a</td><td>b</td></tr></table>",
+		(document) => {
+			document.getElementById("c").style.background = "blue";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an inline-block's text changes inside its line", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) +
+		"<p>before <span id=s style=\"display: inline-block; " +
+			"border: 1px solid\">box</span> after</p>",
+		(document) => {
+			document.getElementById("s").firstChild.data = "bix";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("text-align moves a block's lines without moving the block", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<p id=p>centered later</p>" + lines(2),
+		(document) => {
+			document.getElementById("p").style.textAlign = "center";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a class that bolds a word repaints its row", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) + "<p>one <span id=s>two</span> three</p>",
+		(document) => {
+			document.getElementById("s").className = "b";
+		},
+		{head: "<style>.b { font-weight: bold }</style>"},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a fixed bar changes while the document is scrolled", async () => {
+	const {dom} = await repaint(
+		"<div id=bar style=\"position: fixed; top: 0; left: 0; " +
+			"background: navy\">bar one</div>" +
+		lines(40),
+		async (document, window) => {
+			window.scrollTo(0, 10);
+			await nextFrame({window, document});
+			document.getElementById("bar").firstChild.data = "bar two";
+		},
+	);
+	dom.dispose();
+});
+
+test("a sticky header in a scrolled box keeps its place", async () => {
+	const {dom} = await repaint(
+		"<div id=s style=\"height: 6px; overflow: auto\">" +
+			"<div style=\"position: sticky; top: 0; background: navy\">head</div>" +
+			lines(20) +
+		"</div>",
+		(document) => {
+			document.getElementById("s").scrollTop = 4;
+		},
+	);
+	dom.dispose();
+});
+
+test("a transition repaints each of its frames", async () => {
+	const {dom} = await repaint(
+		lines(2) +
+		"<p id=p style=\"transition: color 50ms linear; " +
+			"color: rgb(0, 0, 0)\">fading</p>",
+		async (document, window) => {
+			document.getElementById("p").style.color = "rgb(255, 255, 255)";
+			for (let i = 0; i < 4; i++) {
+				await nextFrame({window, document});
+			}
+		},
+	);
+	dom.dispose();
+});
+
+test("a counter set on one element renumbers the ones after it", async () => {
+	const {dom} = await repaint(
+		"<div id=a class=n>a</div><div class=n>b</div><div class=n>c</div>",
+		(document) => {
+			document.getElementById("a").style.counterIncrement = "n 5";
+		},
+		{
+			head:
+				"<style>body { counter-reset: n } .n { counter-increment: n } " +
+				".n::before { content: counter(n) \" \" }</style>",
+		},
+	);
+	dom.dispose();
+});
+
+test("a sticky header moves when the box it sticks in shrinks", async () => {
+	const {partial, dom} = await repaint(
+		"<div style=\"display: flex; flex-direction: column; height: 20px; " +
+			"gap: 3px\"><div style=\"flex: 1\"><div style=\"position: sticky; " +
+			"top: 0; background: navy\">head</div></div><div id=q>q</div></div>" +
+			"<div style=\"height: 40px\"></div>",
+		async (document, window) => {
+			window.scrollTo(0, 6);
+			await nextFrame({window, document});
+			document.getElementById("q").innerHTML = "q<br>".repeat(12);
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a box that stops painting as it moves clears its old rows", async () => {
+	const {partial, dom} = await repaint(
+		lines(6) +
+			"<div id=bar class=tall style=\"position: fixed; bottom: 0; " +
+			"left: 0\">bar</div>",
+		(document) => {
+			document.getElementById("bar").classList.remove("tall");
+		},
+		{head: "<style>.tall { top: 0; background: navy }</style>"},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an outlined box with no height paints no row", async () => {
+	const {partial, dom} = await repaint(
+		"<div>one</div><div id=p>text</div><div>between</div>" +
+			"<div style=\"outline: 1px solid\"></div><div>after</div>",
+		(document) => {
+			document.getElementById("p").textContent = "changed";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a change in what overflows an inline-block repaints its rows", async () => {
+	const {partial, dom} = await repaint(
+		lines(6) +
+		"<span style=\"display: inline-block\">" +
+			"<div style=\"height: 1px\"><div>first</div><div>second</div>" +
+			"<div id=c>third</div></div></span>" +
+		lines(3, "after"),
+		(document) => {
+			document.getElementById("c").textContent = "changed";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
diff --git a/tests/selection-modify.test.ts b/tests/selection-modify.test.ts
index 97519715..44925ae0 100644
--- a/tests/selection-modify.test.ts
+++ b/tests/selection-modify.test.ts
@@ -8,7 +8,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {MockProcess, nextFrame} from "./test-utils.js";
 
 // The door a test document comes through: a document of this DOM, in the
diff --git a/tests/selectors.test.ts b/tests/selectors.test.ts
index d71f290a..7bd716f6 100644
--- a/tests/selectors.test.ts
+++ b/tests/selectors.test.ts
@@ -12,7 +12,6 @@ import {expect, test} from "@b9g/libuild/test";
 import {TermDOM} from "../src/index.ts";
 import {parseSelectorList} from "../src/internal/cssselectors.ts";
 import {
-	createWindow,
 	type Document,
 	DOMException,
 	type Element,
@@ -20,6 +19,7 @@ import {
 	setDocumentFocusVisible,
 	setHoveredElement,
 } from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {MockProcess, nextFrame} from "./test-utils.js";
 
 function tree(html: string, url = "about:blank"): Document {
diff --git a/tests/serialization.test.ts b/tests/serialization.test.ts
index 99beb1f6..5e84754f 100644
--- a/tests/serialization.test.ts
+++ b/tests/serialization.test.ts
@@ -10,7 +10,8 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Document} from "../src/internal/dom.ts";
+import type {Document} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The door a test document comes through. The parser is the one that hands
 // a document the realm's custom element registry, as it does the engine's.
diff --git a/tests/shadow-dom.test.ts b/tests/shadow-dom.test.ts
index 7f22bc3b..546f3aa5 100644
--- a/tests/shadow-dom.test.ts
+++ b/tests/shadow-dom.test.ts
@@ -11,7 +11,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {
 	findCollector,
 	inputDispatched,
diff --git a/tests/sticky-position.test.ts b/tests/sticky-position.test.ts
index 2240bda2..27b2ff2e 100644
--- a/tests/sticky-position.test.ts
+++ b/tests/sticky-position.test.ts
@@ -161,3 +161,23 @@ test("an absolute box ignores a scroller outside its containing block", async ()
 	expect(dom.document.elementFromPoint(1, 2)).toBe(tag);
 	dom.dispose();
 });
+
+test("a sticky heading an inline-block lays out holds the scroller around it", async () => {
+	const terminal = new MockProcess({cols: 30, rows: 8});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML =
+		"<div>top</div><div id=\"pane\" style=\"height:4px;overflow-y:auto\">" +
+		"<span style=\"display:inline-block\">" +
+		makeSections(5) +
+		"</span></div>";
+	await nextFrame(dom);
+	dom.document.getElementById("pane")!.scrollTop = 2;
+	await nextFrame(dom);
+	const rows = terminal.getVisibleText().split("\n");
+	expect(rows[1]).toContain("Heading 0");
+	expect(rows[2]).toContain("s0 row 2");
+	expect(dom.document.getElementById("h0")!.getBoundingClientRect().top).toBe(
+		1,
+	);
+	dom.dispose();
+});
diff --git a/tests/style-caches.test.ts b/tests/style-caches.test.ts
new file mode 100644
index 00000000..0ca4e363
--- /dev/null
+++ b/tests/style-caches.test.ts
@@ -0,0 +1,208 @@
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {getBoxModel, getDeclaredDisplay} from "../src/internal/cssom.ts";
+import {MockProcess, nextFrame} from "./test-utils.js";
+
+async function mount(html: string): Promise<{dom: TermDOM; document: any}> {
+	const terminal = new MockProcess({cols: 40, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	return {dom, document: dom.document};
+}
+
+test("the box model is the same object until the element's style changes", async () => {
+	const {dom, document} =
+		await mount("<div id=a style=\"padding: 0 2px\">a</div><div id=b>b</div>");
+	const a = document.getElementById("a");
+	const first = getBoxModel(a);
+	expect(getBoxModel(a)).toBe(first);
+	document.getElementById("b").style.color = "red";
+	await nextFrame(dom);
+	expect(getBoxModel(a)).toBe(first);
+	dom.dispose();
+});
+
+test("the box model follows an inline style change", async () => {
+	const {dom, document} =
+		await mount("<div id=a style=\"padding-left: 2px\">a</div>");
+	const a = document.getElementById("a");
+	expect(getBoxModel(a).paddingLeft).toBe(2);
+	a.style.paddingLeft = "5px";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(5);
+	a.removeAttribute("style");
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft === 0).toBe(true);
+	dom.dispose();
+});
+
+test("the box model follows a class that changes which rule matches", async () => {
+	const {dom, document} = await mount(
+		"<style>.wide { margin-left: 4px; border: 1px solid }</style><div id=a>a</div>",
+	);
+	const a = document.getElementById("a");
+	expect([getBoxModel(a).marginLeft, getBoxModel(a).borderLeftWidth])
+		.toEqual([0, 0]);
+	a.classList.add("wide");
+	await nextFrame(dom);
+	expect([getBoxModel(a).marginLeft, getBoxModel(a).borderLeftWidth])
+		.toEqual([4, 1]);
+	a.classList.remove("wide");
+	await nextFrame(dom);
+	expect([getBoxModel(a).marginLeft, getBoxModel(a).borderLeftWidth])
+		.toEqual([0, 0]);
+	dom.dispose();
+});
+
+test("the box model follows a stylesheet edited in place", async () => {
+	const {dom, document} = await mount(
+		"<style id=s>div { padding-left: 1px }</style><div id=a>a</div>",
+	);
+	const a = document.getElementById("a");
+	expect(getBoxModel(a).paddingLeft).toBe(1);
+	document.getElementById("s").textContent = "div { padding-left: 3px }";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(3);
+	const sheet = document.getElementById("s").sheet;
+	sheet.cssRules[0].style.paddingLeft = "6px";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(6);
+	dom.dispose();
+});
+
+test("the box model follows an inherited font size its lengths are in", async () => {
+	const {dom, document} = await mount(
+		"<div id=p style=\"font-size: 2px\"><div id=a style=\"padding-left: 1em\">a</div></div>",
+	);
+	const a = document.getElementById("a");
+	expect(getBoxModel(a).paddingLeft).toBe(2);
+	document.getElementById("p").style.fontSize = "3px";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(3);
+	dom.dispose();
+});
+
+test("the declared display follows a class and an edited stylesheet", async () => {
+	const {dom, document} = await mount(
+		"<style id=s>.row { display: flex }</style><span id=a>a</span>",
+	);
+	const a = document.getElementById("a");
+	expect(getDeclaredDisplay(a)).toBe("inline");
+	a.className = "row";
+	await nextFrame(dom);
+	expect(getDeclaredDisplay(a)).toBe("flex");
+	document.getElementById("s").textContent = ".row { display: grid }";
+	await nextFrame(dom);
+	expect(getDeclaredDisplay(a)).toBe("grid");
+	a.removeAttribute("class");
+	await nextFrame(dom);
+	expect(getDeclaredDisplay(a)).toBe("inline");
+	dom.dispose();
+});
+
+test("a list marker's color follows its ::marker rule", async () => {
+	const {dom, document} = await mount(
+		"<style id=s>li::marker { color: rgb(0, 128, 0) }</style><ul><li>item</li></ul>",
+	);
+	const bulletColor = (): string => {
+		const output = dom.renderANSI();
+		const bullet = output.indexOf("•");
+		return output.slice(0, bullet);
+	};
+	expect(bulletColor()).toContain("38;2;0;128;0");
+	document.getElementById("s").textContent =
+		"li::marker { color: rgb(255, 0, 0) }";
+	await nextFrame(dom);
+	expect(bulletColor()).toContain("38;2;255;0;0");
+	document.querySelector("li").style.fontWeight = "bold";
+	document.getElementById("s").textContent =
+		"li::marker { color: rgb(0, 0, 255) }";
+	await nextFrame(dom);
+	expect(bulletColor()).toContain("38;2;0;0;255");
+	dom.dispose();
+});
+
+test("a list marker's text follows a ::marker rule added after the first frame", async () => {
+	const {dom, document} =
+		await mount("<style id=s></style><ul><li>item</li></ul>");
+	expect(dom.renderANSI()).toContain("•");
+	document.getElementById("s").textContent = "li::marker { content: '> ' }";
+	await nextFrame(dom);
+	expect(dom.renderANSI()).toContain("> item");
+	document.getElementById("s").textContent =
+		"ul li::marker { content: '- ' } li::marker { content: '* ' } " +
+		"@layer a { ul li::marker { content: '+ ' } }";
+	await nextFrame(dom);
+	expect(dom.renderANSI()).toContain("- item");
+	dom.dispose();
+});
+
+test("appending a child leaves its earlier siblings' styles alone", async () => {
+	const {dom, document} =
+		await mount("<div id=log><div id=first><span>a</span></div></div>");
+	const first = document.getElementById("first");
+	const span = first.firstElementChild;
+	const boxes = [getBoxModel(first), getBoxModel(span)];
+	const next = document.createElement("div");
+	next.textContent = "b";
+	document.getElementById("log").append(next);
+	await nextFrame(dom);
+	expect([getBoxModel(first), getBoxModel(span)]).toEqual(boxes);
+	expect(getBoxModel(first)).toBe(boxes[0]);
+	expect(getBoxModel(span)).toBe(boxes[1]);
+	dom.dispose();
+});
+
+test("a sibling rule that reaches descendants follows a child placed first", async () => {
+	const {dom, document} = await mount(
+		"<style>li:first-child span { padding-left: 2px }</style>" +
+			"<ul><li id=a><span id=sa>a</span></li></ul>",
+	);
+	expect(getBoxModel(document.getElementById("sa")).paddingLeft).toBe(2);
+	const b = document.createElement("li");
+	b.innerHTML = "<span id=sb>b</span>";
+	document.querySelector("ul").prepend(b);
+	await nextFrame(dom);
+	expect(getBoxModel(document.getElementById("sb")).paddingLeft).toBe(2);
+	expect(getBoxModel(document.getElementById("sa")).paddingLeft === 0)
+		.toBe(true);
+	dom.dispose();
+});
+
+test("only a details element's first summary is its marker", async () => {
+	const {dom, document} =
+		await mount("<details><summary id=old>old</summary>body</details>");
+	const view = dom.window;
+	const display = (id: string): string =>
+		view.getComputedStyle(document.getElementById(id)).display;
+	expect(display("old")).toBe("list-item");
+	const summary = document.createElement("summary");
+	summary.id = "new";
+	summary.textContent = "new";
+	document.querySelector("details").prepend(summary);
+	await nextFrame(dom);
+	expect([display("new"), display("old")]).toEqual(["list-item", "block"]);
+	dom.dispose();
+});
+
+test("generated content renumbers when an enclosing element's counter changes", async () => {
+	const {dom, document} = await mount(
+		"<style>body { counter-reset: n } .n { counter-increment: n } " +
+			"#c::before { content: counter(n) \". \" }</style>" +
+			"<div id=a><div id=b class=n><div id=c class=n>c</div></div></div>",
+	);
+	const text = () => dom.renderANSI().replace(/\x1b\[[0-9;]*m/g, "");
+	expect(text()).toContain("2. c");
+	document.getElementById("a").className = "n";
+	await nextFrame(dom);
+	expect(text()).toContain("3. c");
+	document.getElementById("b").style.counterIncrement = "n 5";
+	await nextFrame(dom);
+	expect(text()).toContain("7. c");
+	document.getElementById("a").className = "";
+	await nextFrame(dom);
+	expect(text()).toContain("6. c");
+	dom.dispose();
+});
diff --git a/tests/stylesheet.test.ts b/tests/stylesheet.test.ts
index a8c39a12..762f077c 100644
--- a/tests/stylesheet.test.ts
+++ b/tests/stylesheet.test.ts
@@ -1,6 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
+import {getBoxModel} from "../src/internal/cssom.ts";
 import {
 	getPseudoHost,
 	getPseudoName,
@@ -622,3 +623,49 @@ test(":has() restyles its anchor, its siblings and what it styles below when a c
 	expect(color(".title")).toBe("rgb(1, 2, 3)");
 	termdom.dispose();
 });
+
+test("a :has() that reads only down the tree restyles a changed item's ancestors, not the items before it", async () => {
+	const terminal = new MockProcess();
+	const termdom = new TermDOM({transport: terminal.transport});
+	const {document} = termdom;
+	document.body.innerHTML =
+		"<style>li:has(.on) { color: rgb(255, 0, 0); }</style><ul>" +
+		Array.from({length: 5}, (_, i) => `<li><span id=s${i}>${i}</span></li>`)
+			.join("") +
+		"</ul>";
+	await nextFrame(termdom);
+	const items = [...document.querySelectorAll("li")];
+	const before = items.map((item) => getBoxModel(item));
+	document.getElementById("s3")!.classList.add("on");
+	await nextFrame(termdom);
+	const after = items.map((item) => getBoxModel(item));
+	// The box model is kept until its element restyles.
+	expect(after.map((model, i) => model === before[i])).toEqual([
+		true,
+		true,
+		true,
+		false,
+		true,
+	]);
+	expect(termdom.window.getComputedStyle(items[3]).color)
+		.toBe("rgb(255, 0, 0)");
+	termdom.dispose();
+});
+
+// A sheet can come in inside what is added, a <style> in an added head,
+// and is synced as one added alone. An input beside it once settled the
+// styles before the sheet was read.
+test("a style element inside an added subtree applies its rules", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	await nextFrame(dom);
+	const head = dom.document.createElement("head");
+	head.innerHTML = "<style>.w { width: 10px }</style>";
+	const body = dom.document.createElement("body");
+	body.innerHTML = "<div id=d class=w>x</div><input value=v>";
+	dom.document.documentElement.replaceChildren(head, body);
+	await nextFrame(dom);
+	expect(dom.document.getElementById("d")!.getBoundingClientRect().width)
+		.toBe(10);
+	dom.dispose();
+});
diff --git a/tests/tables.test.ts b/tests/tables.test.ts
index 373c9a96..6e8142ac 100644
--- a/tests/tables.test.ts
+++ b/tests/tables.test.ts
@@ -838,3 +838,81 @@ test("table-layout:fixed does nothing to a table whose width is auto", async ()
 	expect(box("table").width).toBeLessThan(10);
 	dom.dispose();
 });
+
+// CSS 2.1 §17.2.1, rule 3: table parts a block holds are wrapped in an
+// anonymous table, one for each unbroken sequence, so cells sit side by
+// side and stray rows share their columns.
+test("cells in a block share an anonymous table", async () => {
+	const {box, rows, dom} = await render(
+		"<div><div id=a style=\"display: table-cell\">a</div>" +
+			"<div id=b style=\"display: table-cell\">bb</div></div><p>after</p>",
+	);
+	expect(box("#a").top).toBe(box("#b").top);
+	expect(box("#b").left).toBe(box("#a").left + box("#a").width);
+	expect(rows[0]).toBe("abb");
+	dom.dispose();
+});
+
+test("rows in a block share the columns of one anonymous table", async () => {
+	const row = (a: string, b: string, id: string) =>
+		`<div style="display: table-row"><div style="display: table-cell">${a}` +
+		`</div><div id=${id} style="display: table-cell">${b}</div></div>`;
+	const {box, dom} = await render(
+		"<div>" +
+		row("a", "x", "first") +
+		"\n  " +
+		row("cccc", "y", "second") +
+			"</div>",
+	);
+	expect(box("#first").left).toBe(box("#second").left);
+	dom.dispose();
+});
+
+test("text a script puts in a table gets a row of its own", async () => {
+	const {box, dom, document} =
+		await render("<table id=t><tbody id=g><tr><td>x</td></tr></tbody></table>");
+	document.getElementById("t")!.append("loose");
+	await nextFrame(dom);
+	const group = box("#g");
+	expect(box("#t").height).toBe(group.height + 1);
+	expect(dom.document.body.textContent).toContain("loose");
+	dom.dispose();
+});
+
+test("a row group spans its own rows", async () => {
+	const {box, dom} = await render(
+		"<table><thead id=h><tr><td>h</td></tr></thead>" +
+			"<tbody id=b><tr><td>one</td></tr><tr><td>two</td></tr></tbody></table>",
+	);
+	expect(box("#h").height).toBe(box("tr", 0).height);
+	expect(box("#b").top).toBe(box("tr", 1).top);
+	expect(box("#b").height).toBe(
+		box("tr", 2).top + box("tr", 2).height - box("tr", 1).top,
+	);
+	dom.dispose();
+});
+
+test("an absolute box after an anonymous table starts below it", async () => {
+	const {box, dom} = await render(
+		"<div style=\"position: relative\">" +
+			"<div id=a style=\"display: table-cell\">a</div>" +
+			"<div style=\"display: table-cell\">bb</div>" +
+			"<span id=abs style=\"position: absolute\">X</span></div>",
+	);
+	expect(box("#abs").top).toBe(box("#a").top + box("#a").height);
+	dom.dispose();
+});
+
+test("an inline-table sits on the line with the text around it", async () => {
+	const {box, dom} = await render(
+		"<p>before <span id=t style=\"display: inline-table\">" +
+			"<span style=\"display: table-row\">" +
+			"<span id=a style=\"display: table-cell\">a</span>" +
+			"<span id=b style=\"display: table-cell\">bb</span></span></span>" +
+			" after</p>",
+	);
+	expect(box("#t").top).toBe(box("p").top);
+	expect(box("#t").left).toBe("before ".length);
+	expect(box("#b").left).toBe(box("#a").left + box("#a").width);
+	dom.dispose();
+});
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 6a5b91ef..55059188 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -12,11 +12,31 @@ import {
 	type TerminalTransport,
 	transportFromProcess,
 } from "../src/index.ts";
-import {framePainted} from "../src/internal/dom.ts";
+import {styleCheck} from "../src/internal/cssom.ts";
+import {controlCheck, framePainted} from "../src/internal/dom.ts";
 import type {ColorDepth} from "../src/internal/exchange.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	beginFrame,
+	drawText,
+	endFrame,
+	Framebuffer,
+} from "../src/internal/framebuffer.ts";
+import {layoutCheck} from "../src/internal/layout.ts";
+import {partialFrameCheck} from "../src/internal/painter.ts";
 import {getStringWidth} from "../src/internal/text.ts";
 
+// A frame that repaints only the rows that changed must match one painted
+// whole, and every test's frames are held to that.
+partialFrameCheck.enabled = true;
+// And every solve must place each box where a solve that forgot every
+// cache would.
+layoutCheck.enabled = true;
+// And every style value served must be what the cascade resolves with
+// every cache dropped.
+styleCheck.enabled = true;
+// And every form control must show its state before a frame redraws it.
+controlCheck.enabled = true;
+
 const {Terminal} = xtermPkg;
 type Terminal = InstanceType<typeof Terminal>;
 
@@ -346,7 +366,7 @@ export class MockProcess extends EventEmitter implements ProcessLike {
 			this.terminal.cols,
 			this.colorDepth,
 		);
-		const context = framebuffer.beginFrame({offset: 0});
+		const context = beginFrame(framebuffer, {offset: 0});
 
 		for (let row = 0; row < this.terminal.rows; row++) {
 			const line = buffer.getLine(buffer.viewportY + row);
@@ -374,7 +394,7 @@ export class MockProcess extends EventEmitter implements ProcessLike {
 				// color modes carry over, so defaults stay the terminal's own.
 				const hasExplicitFg = cell.getFgColorMode() !== 0;
 				const hasExplicitBg = cell.getBgColorMode() !== 0;
-				context.drawText(chars, outputCol, row, {
+				drawText(context, chars, outputCol, row, {
 					fg: hasExplicitFg ? cell.getFgColor() : undefined,
 					bg: hasExplicitBg ? cell.getBgColor() : undefined,
 					bold: !!cell.isBold(),
@@ -390,7 +410,7 @@ export class MockProcess extends EventEmitter implements ProcessLike {
 
 		// The frame emitter withholds the final row's line ending (the screen
 		// has nothing below it); the oracle's callers split on lines.
-		return stripControlCodes(framebuffer.endFrame() + "\r\n");
+		return stripControlCodes(endFrame(framebuffer) + "\r\n");
 	}
 }
 
@@ -489,13 +509,13 @@ export function stripControlCodes(ansi: string): string {
  * is a caller with one painter and one frame.
  */
 export function renderFrame(
-	renderer: {beginFrame(options: any): any; endFrame(): string},
-	options: {offset: number} & Record<string, unknown>,
+	renderer: Framebuffer,
+	options: Parameters<typeof beginFrame>[1],
 	draw: (ctx: any) => void,
 ): string {
-	const context = renderer.beginFrame(options);
+	const context = beginFrame(renderer, options);
 	draw(context);
-	return renderer.endFrame();
+	return endFrame(renderer);
 }
 
 /** The same, for a frame that stands alone. */
diff --git a/tests/textarea.test.ts b/tests/textarea.test.ts
index 645d13cb..76650a1a 100644
--- a/tests/textarea.test.ts
+++ b/tests/textarea.test.ts
@@ -162,6 +162,30 @@ test("the caret parks at the content origin of an empty textarea", async () => {
 	dom.dispose();
 });
 
+// In a flex row the textarea's measure counts its border in its height,
+// and its layout node holds no border on that axis. Its content box is
+// still inside the border.
+test("the caret parks inside the border of an empty textarea in a flex row", async () => {
+	const terminal = new MockProcess({rows: 8, cols: 40});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.attach();
+	await new Promise((r) => setTimeout(r, 0));
+	const {document} = dom;
+	document.body.innerHTML =
+		"<style>body { margin: 0; }</style><div>line one</div>" +
+		"<div style=\"display: flex\"><div>Body</div><textarea rows=\"2\">" +
+		"</textarea></div>";
+	document.querySelector("textarea")!.focus();
+	await nextFrame(dom);
+	await nextFrame(dom);
+
+	// Border row 1, content row 2; "Body", border and padding, column 6.
+	const buffer = (terminal as any).terminal.buffer.active;
+	expect(buffer.cursorY).toBe(2);
+	expect(buffer.cursorX).toBe(6);
+	dom.dispose();
+});
+
 test("the caret parks at the multiline position; arrows move between lines", async () => {
 	const terminal = new MockProcess({rows: 8, cols: 40});
 	const dom = new TermDOM({transport: terminal.transport});
diff --git a/tests/user-select.test.ts b/tests/user-select.test.ts
index 87aff0b2..20b8395c 100644
--- a/tests/user-select.test.ts
+++ b/tests/user-select.test.ts
@@ -118,8 +118,8 @@ test("toString is the rendered text, not the range's DOM text", async () => {
 	await nextFrame(dom);
 
 	await type(terminal, press(1, 1));
-	await type(terminal, drag(39, 5));
-	await type(terminal, release(39, 5));
+	await type(terminal, drag(39, 6));
+	await type(terminal, release(39, 6));
 	await nextFrame(dom);
 	const text = dom.window.getSelection()!.toString();
 	expect(text).toContain("sum");
diff --git a/tests/webidl.test.ts b/tests/webidl.test.ts
index fb56f131..328e5ad1 100644
--- a/tests/webidl.test.ts
+++ b/tests/webidl.test.ts
@@ -6,6 +6,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
+import {DOM_INTERFACES} from "../src/generated/domidl.ts";
 import {TermDOM} from "../src/index.ts";
 
 function setup(): {window: any; document: any} {
@@ -212,3 +213,32 @@ test("an Illegal invocation carries no cause", () => {
 		expect((error as Error).cause).toBe(undefined);
 	}
 });
+
+test("no interface a page can reach shows an internal member", () => {
+	const {window} = setup();
+	const shown: string[] = [];
+	for (const name of Object.getOwnPropertyNames(window)) {
+		const value = window[name];
+		if (typeof value !== "function" || !/^[A-Z]/.test(name)) {
+			continue;
+		}
+		for (const target of [value, value.prototype]) {
+			if (target == null) {
+				continue;
+			}
+			for (const key of Object.getOwnPropertyNames(target)) {
+				if (key.startsWith("_")) {
+					shown.push(`${name}.${key}`);
+				}
+			}
+		}
+	}
+	expect(shown).toEqual([]);
+});
+
+test("no member the specs name starts with an underscore, which internal steps use", () => {
+	const named = Object.entries(DOM_INTERFACES).flatMap(([name, idl]) =>
+		idl.members.map(([key]) => `${name}.${key}`))
+		.filter((member) => member.split(".")[1].startsWith("_"));
+	expect(named).toEqual([]);
+});
diff --git a/tests/whitespace.test.ts b/tests/whitespace.test.ts
index f673296a..786a564e 100644
--- a/tests/whitespace.test.ts
+++ b/tests/whitespace.test.ts
@@ -792,3 +792,27 @@ test("a nowrap span keeps itself whole and lets the paragraph wrap", () => {
 		.toEqual(["affirmed the suit against", "Jack Poulson was without merit."]);
 	dom.dispose();
 });
+
+// U+00A0 is not collapsible white space (css-text-3 §4.1.1), so a line
+// holding only one is not empty. Outlook writes every blank line as
+// <p class=MsoNormal><o:p>&nbsp;</o:p></p>.
+test("a paragraph holding only a non-breaking space is one line tall", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	const paragraph = (inner: string) => `<p style="margin: 0">${inner}</p>`;
+	for (const inner of [
+		"&nbsp;",
+		"<span>&nbsp;</span>",
+		"<o:p>&nbsp;</o:p>",
+		" &nbsp; ",
+	]) {
+		dom.document.body.innerHTML =
+			paragraph("a") + paragraph(inner) + paragraph("b");
+		await nextFrame(dom);
+		expect(
+			[...dom.document.querySelectorAll("p")]
+				.map((p) => p.getBoundingClientRect().height),
+		).toEqual([1, 1, 1]);
+	}
+	dom.dispose();
+});
diff --git a/tests/wide-cluster.test.ts b/tests/wide-cluster.test.ts
index 47bbb69e..f43082e0 100644
--- a/tests/wide-cluster.test.ts
+++ b/tests/wide-cluster.test.ts
@@ -1,16 +1,21 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	beginFrame,
+	drawText,
+	endFrame,
+	Framebuffer,
+} from "../src/internal/framebuffer.ts";
 import {MockProcess, nextFrame, stripControlCodes} from "./test-utils.js";
 
 test("a cell written inside a wide cluster's span is dropped, not emitted", () => {
 	const framebuffer = new Framebuffer(2, 12, "rgb");
-	const ctx = framebuffer.beginFrame({offset: 0});
-	ctx.drawText("काा", 2, 0);
-	ctx.drawText("ab", 3, 0);
-	ctx.drawText("cd", 6, 0);
-	const frame = stripControlCodes(framebuffer.endFrame());
+	const ctx = beginFrame(framebuffer, {offset: 0});
+	drawText(ctx, "काा", 2, 0);
+	drawText(ctx, "ab", 3, 0);
+	drawText(ctx, "cd", 6, 0);
+	const frame = stripControlCodes(endFrame(framebuffer));
 	expect(frame).toContain("काा");
 	expect(frame).toContain("cd");
 	expect(frame).not.toContain("a");
@@ -35,14 +40,14 @@ test("text that replaces wide characters on a fill rewrites every column", () =>
 	// written, so a frame may skip neither.
 	const framebuffer = new Framebuffer(1, 20, "rgb");
 	const white = {bg: 0x1000000 | 0xffffff, fg: 0x1000000};
-	let ctx = framebuffer.beginFrame({offset: 0});
-	ctx.drawText(" ".repeat(20), 0, 0, white);
-	ctx.drawText("日本語のテキストです", 0, 0, white);
-	framebuffer.endFrame();
-	ctx = framebuffer.beginFrame({offset: 0});
-	ctx.drawText(" ".repeat(20), 0, 0, white);
-	ctx.drawText("a", 0, 0, white);
-	const update = framebuffer.endFrame();
+	let ctx = beginFrame(framebuffer, {offset: 0});
+	drawText(ctx, " ".repeat(20), 0, 0, white);
+	drawText(ctx, "日本語のテキストです", 0, 0, white);
+	endFrame(framebuffer);
+	ctx = beginFrame(framebuffer, {offset: 0});
+	drawText(ctx, " ".repeat(20), 0, 0, white);
+	drawText(ctx, "a", 0, 0, white);
+	const update = endFrame(framebuffer);
 	expect(update).not.toMatch(/\x1b\[\d*C/);
 	expect(update.replace(/\x1b(?:\[[?\d;]*[A-Za-z]|[78])|\r/g, "")).toBe(
 		"a" + " ".repeat(19),
diff --git a/tests/width-measurement.test.ts b/tests/width-measurement.test.ts
index 8513dc86..281f1e4f 100644
--- a/tests/width-measurement.test.ts
+++ b/tests/width-measurement.test.ts
@@ -15,7 +15,12 @@ import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
 import type {Exchange} from "../src/internal/exchange.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	beginFrame,
+	drawText,
+	endFrame,
+	Framebuffer,
+} from "../src/internal/framebuffer.ts";
 import {getStringWidth, recordClusterAdvance} from "../src/internal/text.ts";
 import {
 	captureRawOutput,
@@ -132,11 +137,11 @@ function emit(
 ): string {
 	const framebuffer = new Framebuffer(rows, cols, "rgb");
 	framebuffer.measurer = measurer;
-	const context = framebuffer.beginFrame({offset: 0});
+	const context = beginFrame(framebuffer, {offset: 0});
 	for (const [index, cluster] of cells) {
-		context.drawText(cluster, index % cols, Math.floor(index / cols));
+		drawText(context, cluster, index % cols, Math.floor(index / cols));
 	}
-	return framebuffer.endFrame();
+	return endFrame(framebuffer);
 }
 
 function settle(ms = 60): Promise<void> {
diff --git a/tests/window-named-access.test.ts b/tests/window-named-access.test.ts
index e6511bd1..8abfce87 100644
--- a/tests/window-named-access.test.ts
+++ b/tests/window-named-access.test.ts
@@ -5,7 +5,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 function open(html: string): {window: any; document: any} {
 	const window = createWindow(html) as any;
diff --git a/tests/zero-width.test.ts b/tests/zero-width.test.ts
index 59486a6c..22f0dbe8 100644
--- a/tests/zero-width.test.ts
+++ b/tests/zero-width.test.ts
@@ -5,7 +5,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {drawText, Framebuffer} from "../src/internal/framebuffer.ts";
 import {renderStatic} from "./test-utils.js";
 
 test("a zero-width cluster takes no cell and the line still ends", () => {
@@ -14,7 +14,7 @@ test("a zero-width cluster takes no cell and the line still ends", () => {
 		framebuffer,
 		{rows: 1, lineEnding: "\n"},
 		(ctx) => {
-			ctx.drawText("a­b​c", 0, 0);
+			drawText(ctx, "a­b​c", 0, 0);
 		},
 	);
 	expect(output.replace(/\x1b\[[0-9;]*m/g, "")).toBe("abc\n");
diff --git a/tsconfig.json b/tsconfig.json
index 98c2ac55..9dd4e8d2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,9 +19,11 @@
     "strict": true,
     "skipLibCheck": true,
     "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noImplicitOverride": true
   },
-  "include": ["src", "tests", "fuzz", "examples", "scripts"],
+  "include": ["src", "tests", "fuzz", "examples", "scripts", "bench", "node_modules/@b9g/libuild/litest.d.ts"],
 	// The drift ledger instantiates every class against lib.dom, which is
 	// twenty seconds and a gigabyte the ordinary typecheck does not need.
 	// scripts/lib-dom-drift.ts checks it in a program of its own.