@react-x11/components 0.8.0 → 0.10.0

package/dist/html/node.js

@@ -39,19 +39,25 @@
 import { registerElement, registeredElements } from 'react-x11/host';
 import { Node } from 'react-x11/node';
 import { codePointAtOffset, codeUnitOffsets } from '../internal/text.js';
-import { attr, HtmlSource, isElement, tagOf } from './dom.js';
+import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
 import { Cascade } from './css/cascade.js';
-import { parseStylesheet } from './css/parse.js';
+import { mediaMatches, parseStylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
-import { buildBoxes } from './layout/boxes.js';
+import { buildBoxes, CONTENT_IMAGES } from './layout/boxes.js';
 import { layoutDocument } from './layout/block.js';
+import { TextLayoutCache } from './layout/cache.js';
+import { shapingSafe } from './layout/shaping.js';
+import { SurfaceCache } from './surfaces.js';
+import { inlineDecoration, runFor } from './layout/inline.js';
 // Through the inline module rather than a second cache: the offsets table for
 // a layout is built once, on the first selection that needs it.
-import { layoutOffsets as layoutOffsetsOf } from './layout/inline.js';
+import { documentOffsetOf, layoutOffsetOf, layoutOffsets as layoutOffsetsOf, } from './layout/inline.js';
 import { lineBands as bandsFor } from '../richtext/runs.js';
-import { paintDocument, queryChildIndex } from './paint.js';
+import { clipsOverflow, containingBlockOf, hasRect, holds, holdsAbsolute, paintDocument, queryChildIndex, } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
 import { ResourceStore } from './resources.js';
+import { WebFonts } from './fonts.js';
+import { resolveUrl, UrlResolver } from './url.js';
 /** The element name — registration key, `node.kind` and JSX tag alike. */
 export const ELEMENT = 'htmlview';
 export function registerHtmlView() {
@@ -62,10 +68,35 @@ export function registerHtmlView() {
         // `source` and `look` are this element's own vocabulary and neither is a
         // style name today; declaring them keeps the DEV flat-style-prop
         // assertion honest if core's vocabulary grows underneath us.
-        semanticNames: ['source', 'look', 'stylesheet', 'complete'],
+        semanticNames: [
+            'source',
+            'look',
+            'stylesheet',
+            'charset',
+            'complete',
+            'baseUrl',
+        ],
         childrenAllowed: false,
     });
 }
+/** How many widths' sizes a document keeps (`HtmlViewNode._sizeAt`): the
+ *  two a frame of a resize asks, and a little slack for a drag that turns
+ *  back. */
+const SIZES_KEPT = 4;
+/**
+ * A size in the whole pixels core lays out in, rounded up — less the float
+ * noise a sum of Yoga's single-precision positions carries: a page exactly
+ * `100vh` tall came to 737.0000076 under a 737-pixel viewport, and a
+ * rounding that took it for 738 scrolled it by a pixel under a scrollbar.
+ */
+function wholePixels(n) {
+    return Math.max(0, Math.ceil(n - 1 / 64));
+}
+/** How deep `@import`s are followed: an import in an import in an import is
+ *  a stylesheet; sixteen of them is a loop that changes its URL each time. */
+const MAX_IMPORT_DEPTH = 16;
+/** A scheme at the start: an absolute URL, a base that means something. */
+const ABSOLUTE_URL = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
 /** What changed, and therefore how far back up the pipeline to go. */
 var Stale;
 (function (Stale) {
@@ -77,14 +108,43 @@ var Stale;
 })(Stale || (Stale = {}));
 export class HtmlViewNode extends Node {
     _source = new HtmlSource();
+    /** Where the document's relative URLs resolve: its `<base href>` against
+     *  the `baseUrl` prop, or the prop, or nowhere (`url.ts`). */
+    _urls = new UrlResolver();
     _resources;
+    /** The families the document's `@font-face` rules declare (`fonts.ts`). */
+    _webFonts;
+    /** The sheets the last restyle read, and the cascade built from them. */
+    _sheetsRead = null;
+    /** Blurred shadows, drawn once each. */
+    _shadowCache = null;
     _cascade = null;
     _tree = null;
+    /** The faces `_warmFaces` has asked the font matcher for, and of which
+     *  fonts. */
+    _warmedFaces = new Set();
+    _warmedFor = null;
     _stale = Stale.Everything;
-    _laidOutAt = -1;
+    /** The width the document was last laid out at. Not `_laidOutAt`: core's
+     *  `Node` has a method of that name, which a field would hide. */
+    _laidOutWidth = -1;
     _mediaBand = -1;
+    /** The viewport the box tree's styles were computed at, for the ones
+     *  that read it (`vw`, `vh`). */
+    _styledWidth = -1;
+    _styledHeight = -1;
     _documentHeight = 0;
     _documentWidth = 0;
+    /** The viewport height the document was last laid out under, and whether
+     *  that layout read it (`LayoutResult.readsViewportHeight`). */
+    _laidOutUnder = -1;
+    _layoutReadsViewport = false;
+    /** Whether core is asking for this element's size right now — inside
+     *  its layout pass, where a node must not ask to be measured again. */
+    _measuring = false;
+    /** What the document came to at the widths it was last laid out at, while
+     *  nothing a layout reads has changed (`_sizeAt`). */
+    _sizes = new Map();
     _textPoints = null;
     /** Whether code points and code units are the same index — true unless
      *  the text carries surrogate pairs. null until checked. */
@@ -95,12 +155,23 @@ export class HtmlViewNode extends Node {
     _reportedDomRevision = -1;
     constructor(props, app) {
         super(ELEMENT, props, app);
-        this._resources = new ResourceStore((request) => this._props().onResource?.(request) ?? null, () => {
-            // A late resource changes intrinsic sizes, so the box tree is what
-            // has to be rebuilt — not merely repainted. An image that arrives
-            // after first paint is the ordinary case, not an error path.
+        const ask = (request) => this._props().onResource?.(request) ?? null;
+        this._resources = new ResourceStore(ask, (what) => {
+            // A late stylesheet is a new cascade: its rules, what it imports,
+            // the faces it declares. A late image changes intrinsic sizes, so
+            // the box tree is what has to be rebuilt — not merely repainted.
+            // Either arriving after first paint is the ordinary case, not an
+            // error path: a host on a network answers every request that way.
+            this._invalidate(what === 'stylesheet' ? Stale.Style : Stale.Boxes);
+        }, this._urls);
+        this._webFonts = new WebFonts(app, ask, () => {
+            // A face arrived: the family lists change, so the styles do, and
+            // every text layout kept from before was set in the face it
+            // replaces — under the same list, where a family of the document's
+            // had loaded one weight and now has another.
+            this._layouts = null;
             this._invalidate(Stale.Boxes);
-        });
+        }, 'sans-serif');
         this._read();
     }
     _props() {
@@ -181,8 +252,24 @@ export class HtmlViewNode extends Node {
             props.onDocument?.(this._source.document);
             this._reportedDomRevision = props.domRevision ?? 0;
         }
+        this._updateBase();
         this._sweep();
     }
+    /**
+     * The document's base URL: its first `<base href>`, resolved against the
+     * `baseUrl` prop, or the prop — and only an absolute one, since a relative
+     * base resolves nothing. Everything resolved against the old one is
+     * stale when it moves, the sheets' URLs with it, so the cascade is.
+     */
+    _updateBase() {
+        const given = this._props().baseUrl || null;
+        const href = this._source.facts().base;
+        let base = href ? resolveUrl(href, given) : given;
+        if (base && !ABSOLUTE_URL.test(base))
+            base = null;
+        if (this._urls.setBase(base))
+            this._invalidate(Stale.Style);
+    }
     /**
      * Hand the document's own declarations to the host: every `<script>` once,
      * and every resource that has not been asked for.
@@ -211,7 +298,7 @@ export class HtmlViewNode extends Node {
         }
         for (const el of facts.resources) {
             const tag = tagOf(el);
-            const url = tag === 'link' ? attr(el, 'href') : attr(el, 'src');
+            const url = tag === 'link' ? attr(el, 'href') : imageUrlOf(el);
             if (!url)
                 continue;
             this._resources.request({
@@ -221,75 +308,356 @@ export class HtmlViewNode extends Node {
             });
         }
     }
+    /**
+     * Ask for every `background-image` the styles name. Known only once the
+     * cascade has run, where an `<img>` is known from the markup; the store
+     * asks once a URL, so a tree built again asks nothing new.
+     */
+    _requestBackgrounds(tree) {
+        for (const box of tree.backgrounds) {
+            if (!box.el)
+                continue;
+            // each layer's, where there is more than one
+            for (const url of box.style.backgroundImages ?? [
+                box.style.backgroundImage,
+            ]) {
+                if (typeof url === 'string') {
+                    this._resources.request({ url, kind: 'image', element: box.el });
+                }
+            }
+            const border = box.style.borderImage.source;
+            if (typeof border === 'string') {
+                this._resources.request({
+                    url: border,
+                    kind: 'image',
+                    element: box.el,
+                });
+            }
+        }
+        // and every image generated content names, which is only known there
+        // too
+        for (const { url, element } of tree.contentImages) {
+            this._resources.request({ url, kind: 'image', element });
+        }
+    }
+    /** Whether an image generated content names arrived as it was asked for,
+     *  the tree built without its size: a host that answers at once is told
+     *  nothing later, where an `<img>` is asked for before the build. */
+    _contentImagesArrived(tree) {
+        for (const { url, sized } of tree.contentImages) {
+            if (!sized && this._resources.imageSize(url))
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Ask the font matcher for the faces the document's text is set in, as
+     * soon as its boxes say which and while its layout is still ahead. A face
+     * nothing had warmed was a synchronous fc-match inside that layout: the
+     * benchmark report's `th`, at 600, waited 38 ms before its first paint.
+     * One child answers every face a call names, off the event loop (ntk's
+     * `FontManager#prewarm`), and a layout reaching a face still on its way
+     * takes the answer rather than asking again. Each face is asked once, by
+     * the family, weight and style the layout hands the engine.
+     */
+    _warmFaces(tree) {
+        const fonts = this._fonts();
+        if (typeof fonts?.prewarm !== 'function')
+            return;
+        if (this._warmedFor !== fonts) {
+            this._warmedFor = fonts;
+            this._warmedFaces.clear();
+        }
+        let faces = null;
+        for (const style of tree.textStyles) {
+            const key = `${style.fontFamily}|${style.fontWeight}|${style.fontStyle}`;
+            if (this._warmedFaces.has(key))
+                continue;
+            this._warmedFaces.add(key);
+            faces ??= new Map();
+            let named = faces.get(style.fontFamily);
+            if (!named)
+                faces.set(style.fontFamily, (named = []));
+            named.push({ weight: style.fontWeight, style: style.fontStyle });
+        }
+        if (faces)
+            for (const [family, named] of faces)
+                fonts.prewarm(family, named);
+    }
     /** Rebuild the cascade — the document's sheets plus the host's. */
     _restyle(width) {
         const props = this._props();
         const look = this._deviceLook();
-        const sheets = [uaStylesheet(look)];
-        let order = 0;
+        const documentBase = this._urls.base;
+        // What the sheets are read from, in order: a `<style>`'s text or a
+        // fetched `<link>`'s, and after them the host's — each with the URL its
+        // own relative URLs resolve against: the document's for a `<style>`,
+        // the sheet's own for a `<link>`.
+        const read = [];
         for (const ref of this._source.facts().sheets) {
-            const text = ref.kind === 'inline'
-                ? ref.text
-                : this._resources.stylesheetText(ref.href);
+            // A sheet handed over as bytes that names no encoding of its own is in
+            // its referrer's: a `<link charset>`, then the document's (CSS 2.1
+            // 4.4), and an import is in the encoding of the sheet importing it.
+            const linked = ref.kind === 'inline'
+                ? null
+                : this._resources.stylesheet(ref.href, [
+                    attr(ref.element, 'charset') || undefined,
+                    props.charset,
+                ]);
+            const text = ref.kind === 'inline' ? ref.text : linked?.text;
             if (!text)
                 continue;
-            const sheet = parseStylesheet(text, order);
-            order += sheet.rules.length + 1;
-            // `@import` is a resource like any other, and its rules sit *before*
-            // the importing sheet's — so a fetched import is spliced in ahead.
-            for (const url of sheet.imports) {
-                this._resources.request({
-                    url,
-                    kind: 'stylesheet',
-                    element: ref.element,
-                });
-                const imported = this._resources.stylesheetText(url);
-                if (imported) {
-                    const parsed = parseStylesheet(imported, order);
-                    order += parsed.rules.length + 1;
-                    sheets.push(parsed);
-                }
-            }
-            sheets.push(sheet);
+            const encoding = linked ? linked.encoding : props.charset;
+            const base = ref.kind === 'inline'
+                ? documentBase
+                : this._resources.sheetBase(ref.href);
+            read.push({ text, encoding, element: ref.element, base });
         }
         const extra = props.stylesheet;
-        for (const text of Array.isArray(extra) ? extra : extra ? [extra] : []) {
-            const sheet = parseStylesheet(text, order);
-            order += sheet.rules.length + 1;
-            sheets.push(sheet);
+        const extras = Array.isArray(extra) ? extra : extra ? [extra] : [];
+        const fonts = this._fonts();
+        // Sheets that read as they did last time are the same rules: an append
+        // to a streamed document, or a width across a `@media` breakpoint,
+        // restyles the elements without parsing a framework's stylesheet again
+        // or indexing its thousand rules again.
+        const kept = this._sheetsRead;
+        let faces;
+        if (kept &&
+            kept.look === look &&
+            kept.scale === this._scale &&
+            kept.fonts === fonts &&
+            this._sameSheets(kept, read, extras)) {
+            this._cascade = kept.cascade;
+            kept.cascade.viewportWidth = width;
+            kept.cascade.viewportHeight = this._viewportHeight();
+            faces = kept.faces;
+        }
+        else {
+            const sheets = [uaStylesheet(look)];
+            const imports = [];
+            faces = [];
+            let order = 0;
+            const layers = new Map();
+            // A sheet takes its place in the cascade's order once everything it
+            // imports has taken theirs: `@import` is a resource like any other,
+            // and an imported sheet's rules sit *before* the importing sheet's
+            // (CSS 2.1 6.4.1), or an imported rule would win a tie against the
+            // sheet importing it.
+            const place = (sheet, element) => {
+                for (const rule of sheet.rules)
+                    rule.order = order++;
+                order += 1;
+                sheets.push(sheet);
+                for (const rule of sheet.fontFaces)
+                    faces.push({ rule, element });
+            };
+            for (const { text, encoding, element, base } of read) {
+                const sheet = parseStylesheet(text, 0, layers, base);
+                const seen = [];
+                this._placeImports(sheet, encoding, element, layers, seen, place);
+                imports.push(seen);
+                place(sheet, element);
+            }
+            for (const text of extras) {
+                const sheet = parseStylesheet(text, order, layers);
+                order += sheet.rules.length + 1;
+                sheets.push(sheet);
+            }
+            this._cascade = new Cascade(sheets, look, width, this._viewportHeight(), this._scale, fonts ? (family, size) => xHeightOf(fonts, family, size) : null, fonts ? (family, size) => zeroWidthOf(fonts, family, size) : null, fonts ? (family, size) => normalLineOf(fonts, family, size) : null, faces.length ? this._webFonts : null);
+            this._sheetsRead = {
+                look,
+                scale: this._scale,
+                fonts,
+                texts: read.map((r) => r.text),
+                encodings: read.map((r) => r.encoding),
+                bases: read.map((r) => r.base),
+                imports,
+                extras,
+                faces,
+                cascade: this._cascade,
+            };
         }
-        this._cascade = new Cascade(sheets, look, width, this._viewportHeight(), this._scale);
+        // The faces this width and scheme declare: a `@font-face` may sit in a
+        // `@media` block like any rule.
+        const cssWidth = width / this._scale;
+        this._webFonts.setFallback(look.fontFamily);
+        this._webFonts.setFaces(faces.filter((f) => mediaMatches(f.rule.media, cssWidth, look.colorScheme)));
         this._cascade.setPointer({
             hovered: new Set(this._hovered),
             active: EMPTY_SET,
         });
         this._mediaBand = this._cascade.mediaBand(width);
     }
+    /**
+     * Place what a sheet imports, and what each of those imports, depth
+     * first — asking for each through the seam, as a parse of the sheet has
+     * to. `seen` records every import read, in order, which is what tells the
+     * next restyle whether the sheets read the same (`_sameSheets`). A sheet
+     * that imports itself, or one of the sheets importing it, is read once.
+     */
+    _placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set()) {
+        for (const url of sheet.imports) {
+            this._resources.request({ url, kind: 'stylesheet', element });
+            const fetched = this._resources.stylesheet(url, [encoding]);
+            const base = this._resources.sheetBase(url);
+            seen.push({ url, text: fetched?.text ?? null, base });
+            const key = base ?? url;
+            if (!fetched || depth >= MAX_IMPORT_DEPTH || chain.has(key))
+                continue;
+            const imported = parseStylesheet(fetched.text, 0, layers, base);
+            chain.add(key);
+            this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain);
+            chain.delete(key);
+            place(imported, element);
+        }
+    }
+    /** Whether the sheets read the same as the ones `kept` was built from,
+     *  down to what each imports — asking for the imports again, as a parse
+     *  of the sheet would have. */
+    _sameSheets(kept, read, extras) {
+        if (read.length !== kept.texts.length)
+            return false;
+        if (extras.length !== kept.extras.length)
+            return false;
+        for (let i = 0; i < extras.length; i += 1) {
+            if (extras[i] !== kept.extras[i])
+                return false;
+        }
+        for (let i = 0; i < read.length; i += 1) {
+            const r = read[i];
+            if (r.text !== kept.texts[i] ||
+                r.encoding !== kept.encodings[i] ||
+                r.base !== kept.bases[i]) {
+                return false;
+            }
+            // The encodings an import falls back to are its importer's, which
+            // only a parse knows; the text an import decoded to under them is what
+            // was kept, and bytes that decode differently now are a new sheet.
+            for (const { url, text, base } of kept.imports[i]) {
+                this._resources.request({
+                    url,
+                    kind: 'stylesheet',
+                    element: r.element,
+                });
+                const fetched = this._resources.stylesheet(url, [r.encoding]);
+                if ((fetched?.text ?? null) !== text)
+                    return false;
+                if (this._resources.sheetBase(url) !== base)
+                    return false;
+            }
+        }
+        return true;
+    }
     _viewportHeight() {
-        // The viewport a `vh` resolves against is the window's, not the
-        // document's — a document taller than the window does not make `100vh`
-        // taller with it.
+        // The viewport a `vh` resolves against is the one the document is seen
+        // through, not the document — a document taller than it does not make
+        // `100vh` taller with it. That is the box that scrolls the element,
+        // where one does: a browser's page area, below its tab strip and its
+        // toolbar, where `100vh` measured by the window put a page's footer the
+        // toolbar's height below the fold. The window, where nothing scrolls it.
+        for (let node = this.parent; node; node = node.parent) {
+            // `Scrollable`'s, and not every node's: asked the way core asks it
+            const scroller = node;
+            if (!scroller.isScroller?.())
+                continue;
+            const height = node.contentBox().height;
+            if (height > 0)
+                return height;
+            break;
+        }
         const root = this.root;
         const height = root?.abs?.height;
         return height && height > 0 ? height : 600;
     }
     _fonts() {
         const fonts = this.app?.fonts;
-        return fonts ?? null;
+        // a face the engine cannot shape from costs its characters, not the
+        // document (`shaping.ts`)
+        return fonts ? shapingSafe(fonts) : null;
+    }
+    /** The text layouts the last pass made, for this one to reuse. */
+    _layouts = null;
+    /** The fonts a layout pass lays text out with: the engine's, through the
+     *  layouts the pass before made (`TextLayoutCache`). */
+    _layoutFonts() {
+        const fonts = this._fonts();
+        if (!fonts)
+            return null;
+        if (this._layouts?.engine !== fonts)
+            this._layouts = new TextLayoutCache(fonts);
+        this._layouts.begin();
+        return this._layouts.fonts;
     }
-    /** Bring the pipeline up to date for a width. */
+    /**
+     * Bring the pipeline up to date for a width — or, where that throws, leave
+     * the document blank. From a paint a throw is the application's end, for
+     * a document it did not write: a stack a thousand nested elements run
+     * down, or a limit of the text engine's or the server's that one more
+     * document finds. Reported once for each thing that went wrong, and tried
+     * again only when something changes, or the width does.
+     */
     _prepare(width) {
         const target = Math.max(1, Math.floor(width));
+        if (this._failedAt === target && this._stale === Stale.Nothing)
+            return;
+        try {
+            this._update(target);
+            this._failedAt = -1;
+        }
+        catch (error) {
+            this._fail(error, target);
+        }
+    }
+    /** The width the pipeline threw at, until something changes (`_prepare`). */
+    _failedAt = -1;
+    _failures = null;
+    _fail(error, width) {
+        this._tree = null;
+        this._stale = Stale.Nothing;
+        this._failedAt = width;
+        this._laidOutWidth = -1;
+        this._documentWidth = 0;
+        this._documentHeight = 0;
+        const message = String(error?.stack ?? error);
+        this._failures ??= new Set();
+        if (this._failures.has(message))
+            return;
+        this._failures.add(message);
+        const g = globalThis;
+        if (g.process?.env?.NODE_ENV === 'production')
+            return;
+        g.console?.error('@react-x11/components: <Html> could not lay out or paint its ' +
+            `document, and leaves it blank.\n${message}`);
+    }
+    _update(target) {
         const props = this._props();
         if ((props.domRevision ?? 0) !== this._reportedDomRevision) {
             this._reportedDomRevision = props.domRevision ?? 0;
             this._source.touch();
+            this._updateBase();
             this._sweep();
             if (this._stale < Stale.Style)
                 this._stale = Stale.Style;
         }
-        if (this._stale === Stale.Nothing && this._laidOutAt === target)
+        // A document that reads its viewport's height — a `vh`, a percentage
+        // height on the root, a box placed against the initial containing block
+        // — is laid out again when that height moves. One that reads none, which
+        // is most, goes on skipping layout when the window only grew taller.
+        const viewport = this._viewportHeight();
+        const viewportMoved = viewport !== this._laidOutUnder && this._readsViewportHeight();
+        // the sizes other widths came to were read from what just changed
+        if (this._stale !== Stale.Nothing || viewportMoved)
+            this._sizes.clear();
+        if (this._stale === Stale.Nothing &&
+            this._laidOutWidth === target &&
+            !viewportMoved) {
             return;
+        }
+        // Nothing but the viewport: the size core laid this element out at came
+        // from a layout under the old one, and nothing else will tell it so.
+        const onlyViewport = this._stale === Stale.Nothing && this._laidOutWidth === target;
+        const wasWidth = this._documentWidth;
+        const wasHeight = this._documentHeight;
         if (this._stale >= Stale.Style || !this._cascade) {
             this._restyle(target);
             this._stale = Math.max(this._stale, Stale.Boxes);
@@ -305,28 +673,74 @@ export class HtmlViewNode extends Node {
         if (!cascade)
             return;
         cascade.viewportWidth = target;
-        cascade.viewportHeight = this._viewportHeight();
+        cascade.viewportHeight = viewport;
+        // A `vw` or a `vh` is a number by the time a style holds it, so the
+        // styles computed for another viewport are wrong for this one: built
+        // again, where some style reads the side that moved. A document that
+        // reads neither — most — goes on skipping the cascade on a resize.
+        if (this._stale < Stale.Boxes &&
+            ((cascade.readsViewportWidth && this._styledWidth !== target) ||
+                (cascade.readsViewportHeight && this._styledHeight !== viewport))) {
+            this._stale = Stale.Boxes;
+        }
         if (this._stale >= Stale.Boxes || !this._tree) {
             const look = this._deviceLook();
-            this._tree = buildBoxes(this._source.document, {
+            const build = () => buildBoxes(this._source.document, {
                 cascade,
                 scale: this._scale,
-                imageSize: (el) => this._resources.imageSize(attr(el, 'src') ?? ''),
+                imageSize: (el) => this._resources.imageSize(imageUrlOf(el) ?? ''),
+                urlSize: (url) => this._resources.imageSize(url),
                 controlSize: (el, kind, style) => measureControl(el, kind, style, this._fonts(), look),
             });
+            this._tree = build();
+            this._styledWidth = target;
+            this._styledHeight = viewport;
+            this._requestBackgrounds(this._tree);
+            let again = this._contentImagesArrived(this._tree);
+            // the faces the styles just asked for, of the families the document
+            // loads itself — which, answered at once, change the styles asking
+            if (this._webFonts.request(this._tree.text)) {
+                this._layouts = null;
+                again = true;
+            }
+            if (again)
+                this._tree = build();
+            this._warmFaces(this._tree);
             this._textPoints = null;
             this._pointsAreUnits = null;
-            this._laidOutAt = -1;
+            this._laidOutWidth = -1;
         }
         if (this._tree &&
-            (this._laidOutAt !== target || this._stale >= Stale.Layout)) {
-            const result = layoutDocument(this._tree, this._fonts(), target, this._viewportHeight());
+            (this._laidOutWidth !== target ||
+                viewportMoved ||
+                this._stale >= Stale.Layout)) {
+            const result = layoutDocument(this._tree, this._layoutFonts(), target, viewport);
             this._documentWidth = result.width;
             this._documentHeight = result.height;
-            this._laidOutAt = target;
+            this._laidOutWidth = target;
+            this._laidOutUnder = viewport;
+            this._layoutReadsViewport = result.readsViewportHeight;
+            this._sizes.delete(target);
+            this._sizes.set(target, { width: result.width, height: result.height });
+            if (this._sizes.size > SIZES_KEPT) {
+                this._sizes.delete(this._sizes.keys().next().value);
+            }
             this._reportControls();
         }
         this._stale = Stale.Nothing;
+        // Read after core's layout pass — the viewport is the box around this
+        // one, whose new height only that pass decides — so it is a paint that
+        // finds it moved, and the next frame that measures this element again.
+        // Inside a measure the answer already is the new size.
+        if (onlyViewport &&
+            !this._measuring &&
+            (this._documentWidth !== wasWidth || this._documentHeight !== wasHeight)) {
+            this.invalidateMeasure('content');
+        }
+    }
+    /** Whether the document as laid out reads its viewport's height. */
+    _readsViewportHeight() {
+        return (this._layoutReadsViewport || this._cascade?.readsViewportHeight === true);
     }
     _reportControls() {
         const tree = this._tree;
@@ -344,6 +758,16 @@ export class HtmlViewNode extends Node {
                 y: r.y / s,
                 width: r.width / s,
                 height: r.height / s,
+                ...(r.bare && {
+                    bare: {
+                        ...r.bare,
+                        x: r.bare.x / s,
+                        y: r.bare.y / s,
+                        width: r.bare.width / s,
+                        height: r.bare.height / s,
+                        fontSize: r.bare.fontSize / s,
+                    },
+                }),
             });
         if (sameRects(rects, this._controls))
             return;
@@ -362,17 +786,57 @@ export class HtmlViewNode extends Node {
      */
     measureContent({ width }) {
         const offered = Number.isFinite(width) ? width : 800;
-        this._prepare(offered);
+        this._measuring = true;
+        let size;
+        try {
+            size = this._sizeAt(offered);
+        }
+        finally {
+            this._measuring = false;
+        }
+        // core takes finite numbers only, and throws on any other from the
+        // layout — a document of lengths no clamp foresaw is none too tall
+        const finite = (n) => (Number.isFinite(n) ? n : 0);
         return {
-            width: Math.ceil(Math.min(this._documentWidth, offered)),
-            height: Math.ceil(this._documentHeight),
+            width: wholePixels(Math.min(finite(size.width), offered)),
+            height: wholePixels(finite(size.height)),
         };
     }
+    /**
+     * The size the document comes to at `width`.
+     *
+     * Core asks a leaf for its height at the width it was measured at as well
+     * as at the one it has now (`probeHeightFloors`), to learn whether a
+     * relayout changed what the leaf needs — so every frame of a resize asks
+     * two widths, and the boxes hold one. Laying the document out at the old
+     * width to answer, and then at the new one again for the pass after, was
+     * three whole passes a frame. The size a width came to is kept instead,
+     * and answers until anything a layout reads changes: the source, the
+     * styles, a resource, the viewport height. Nothing but a size comes from
+     * it — paint and the text accessors read the boxes, which are only ever
+     * laid out for real (`_prepare`).
+     */
+    _sizeAt(width) {
+        const target = Math.max(1, Math.floor(width));
+        if (target !== this._laidOutWidth &&
+            this._stale === Stale.Nothing &&
+            (this._props().domRevision ?? 0) === this._reportedDomRevision &&
+            (!this._readsViewportHeight() ||
+                this._viewportHeight() === this._laidOutUnder)) {
+            const known = this._sizes.get(target);
+            if (known)
+                return known;
+        }
+        this._prepare(width);
+        return { width: this._documentWidth, height: this._documentHeight };
+    }
     applyProps(nextProps, prevProps) {
         super.applyProps(nextProps, prevProps);
         const next = nextProps;
         const prev = prevProps;
-        if (next.look !== prev.look || next.stylesheet !== prev.stylesheet) {
+        if (next.look !== prev.look ||
+            next.stylesheet !== prev.stylesheet ||
+            next.charset !== prev.charset) {
             this._invalidate(Stale.Style);
         }
         if (next.source !== prev.source || next.complete !== prev.complete) {
@@ -381,10 +845,19 @@ export class HtmlViewNode extends Node {
         else if ((next.domRevision ?? 0) !== (prev.domRevision ?? 0)) {
             this._invalidate(Stale.Style);
         }
+        else if ((next.baseUrl ?? null) !== (prev.baseUrl ?? null)) {
+            // the same document somewhere else: every URL in it is another one
+            this._updateBase();
+            this._sweep();
+        }
     }
     destroySubtree() {
         this._resources.destroy();
+        this._webFonts.destroy();
         this._source.destroy();
+        this._shadowCache?.destroy();
+        this._shadowCache = null;
+        this._sheetsRead = null;
         this._tree = null;
         this._cascade = null;
         super.destroySubtree();
@@ -482,27 +955,106 @@ export class HtmlViewNode extends Node {
     // event's `x`/`y` carry and what `useLinkClicks` and an application's
     // handler hand over — and are the one place the two units meet on the way
     // in. `_toDocument` multiplies.
-    /** The link under a logical window point, if any. Not part of the
-     *  selection seam: core deliberately left hover and `cursorAt` out of
-     *  #291, so following a link stays this package's. */
+    /** The link under a logical window point, if any — resolved against the
+     *  document's base where it has one. Not part of the selection seam: core
+     *  deliberately left hover and `cursorAt` out of #291, so following a
+     *  link stays this package's. */
     hrefAtPoint(x, y) {
         const el = this.elementAtPoint(x, y);
         let node = el;
         while (node) {
             const href = attr(node, 'href');
-            if (href && (tagOf(node) === 'a' || tagOf(node) === 'area'))
-                return href;
+            if (href && (tagOf(node) === 'a' || tagOf(node) === 'area')) {
+                return this._urls.resolve(href);
+            }
             node = isElement(node.parent) ? node.parent : null;
         }
         return null;
     }
+    /** The URL the document's relative URLs resolve against, or null where
+     *  it has none (`_updateBase`). */
+    get documentBase() {
+        return this._urls.base;
+    }
+    /**
+     * Where an element is, in document coordinates: logical pixels from this
+     * element's top left, the space the scroll offset of a box around it is
+     * in — so scrolling to a fragment is `scrollTo({ y: rect.y })`. A block's
+     * border box. An inline element's fragments, from its first line to its
+     * last, each across its text, the inline-blocks and inline boxes' edges
+     * it holds, and its own padding and border where it starts or ends — its
+     * border box across, as `getBoundingClientRect` is (CSSOM View 6.1) — and
+     * as tall as its lines; or where its text would start when it has none,
+     * as `<a name>` has none. Null for an element with no box — `display:
+     * none`, or not in the document.
+     */
+    elementRect(element) {
+        this._prepare(this.abs.width || 1);
+        const tree = this._tree;
+        if (!tree)
+            return null;
+        const box = boxFor(tree.root, element);
+        if (!box)
+            return null;
+        let rect = null;
+        if (box.kind !== 'inline' && box.kind !== 'text') {
+            rect = { x: box.x, y: box.y, width: box.width, height: box.height };
+        }
+        else {
+            const bands = [];
+            if (box.subtreeTextEnd > box.subtreeTextStart) {
+                collectBands(tree.root, box.subtreeTextStart, box.subtreeTextEnd, 0, 0, bands);
+            }
+            if (box.kind === 'inline')
+                fragmentReach(box, bands);
+            for (const band of bands)
+                rect = rect ? unionRect(rect, band) : band;
+            if (!rect) {
+                // an empty subtree's range is `[0, 0)`, wherever it stands: where
+                // its text would be is where the text after it starts
+                const caret = caretAt(tree.root, textAfter(tree.root, box));
+                if (!caret)
+                    return null;
+                rect = { x: caret.x, y: caret.y, width: 0, height: caret.height };
+            }
+        }
+        const s = this._scale;
+        return {
+            x: rect.x / s,
+            y: rect.y / s,
+            width: rect.width / s,
+            height: rect.height / s,
+        };
+    }
     /** The deepest element whose box contains a logical window point. */
     elementAtPoint(x, y) {
         const tree = this._tree;
         if (!tree)
             return null;
         const local = this._toDocument(x, y);
-        return deepestAt(tree.root, local.x, local.y);
+        return deepestAt(tree, local.x, local.y);
+    }
+    /**
+     * The cursor for a point of this element's, in device pixels: what core
+     * asks a drawn element as the pointer moves over it (`cursorAt`,
+     * react-x11#757). The `cursor` the document's styles give what is under
+     * it — a link's `pointer`, the user-agent sheet's — and where they say
+     * nothing, text's I-beam over text and the arrow elsewhere, as a browser
+     * shows them. The arrow is named rather than left to null: null lets
+     * core fall through to the element's `defaultCursor`, which is the
+     * I-beam on a selectable surface, and every `<Html>` is one.
+     */
+    cursorAt(x, y) {
+        const tree = this._tree;
+        if (!tree)
+            return null;
+        const hit = { text: false };
+        const el = deepestAt(tree, x - this.abs.x, y - this.abs.y, hit);
+        const cursor = el ? tree.styles.get(el)?.style.cursor : null;
+        // a keyword; a `url()` this cannot load falls back, as its list would
+        if (cursor && cursor !== 'auto' && /^[a-z-]+$/.test(cursor))
+            return cursor;
+        return hit.text ? 'text' : 'default';
     }
     /**
      * The pointer moved, to a logical window point. Returns true when the
@@ -522,19 +1074,233 @@ export class HtmlViewNode extends Node {
         }
         if (sameChain(chain, this._hovered))
             return false;
+        const was = this._hovered;
         this._hovered = chain;
         cascade.setPointer({ hovered: new Set(chain), active: EMPTY_SET });
-        this._invalidate(Stale.Boxes);
+        this._restyleHover(was, chain);
         return true;
     }
     clearHover() {
         if (!this._hovered.length)
             return false;
+        const was = this._hovered;
         this._hovered = [];
         this._cascade?.setPointer({ hovered: new Set(), active: EMPTY_SET });
-        this._invalidate(Stale.Boxes);
+        this._restyleHover(was, []);
         return true;
     }
+    /** The hovered chain moved: restyle where it did, or the document. */
+    _restyleHover(was, now) {
+        const done = this._hoverInPlace(was, now);
+        if (done === 'painted')
+            this.invalidate(false, this, 'props');
+        else if (done === false)
+            this._invalidate(Stale.Boxes);
+    }
+    /**
+     * A pointer move restyled where it happened, when all it changed is ink.
+     *
+     * A move to another element is a change to the cascade, and the pipeline
+     * answers one by building every box again and laying the document out:
+     * 270 ms on X11 and twice that on Cocoa for a Wikipedia article, on every
+     * link the pointer crossed. But the rules a page writes for `:hover`
+     * nearly all change a colour, an underline, a background or a border's
+     * colour — 77 of that article's 79 — and those move nothing. So:
+     *
+     *  - Only an element whose hover state flipped and that a compound testing
+     *    the pointer could match can change (`Cascade.hoverTouches`), with its
+     *    subtree, and its later siblings where a sibling combinator follows.
+     *    A move between two paragraphs under `a:hover` touches nothing.
+     *  - Those are styled again from their parents. Where anything but ink
+     *    differs (`PAINT_ONLY`), or a box is not the element's own — an
+     *    anonymous or a pseudo-element box, a marker, a control — this is
+     *    not the move to take.
+     *  - The boxes take their new styles, and each layout of their text is
+     *    made again from the runs it was made from (`TextLayoutCache.inputsOf`)
+     *    with the new ink (`runFor`), where its geometry comes out the same.
+     *
+     * Everything is checked before anything is changed. 'none' where nothing
+     * could change, 'painted' where it was restyled here, false where the
+     * document has to be built again.
+     */
+    _hoverInPlace(was, now) {
+        const cascade = this._cascade;
+        const tree = this._tree;
+        const layouts = this._layouts;
+        if (!cascade || !tree || !layouts || !cascade.hoverLocal)
+            return false;
+        if (this._stale !== Stale.Nothing || this._laidOutWidth < 0)
+            return false;
+        const before = new Set(was);
+        const after = new Set(now);
+        const roots = [];
+        // and the elements a `:has()` testing the pointer may flip, which
+        // are around the ones that changed; the chains are ancestor chains,
+        // so the deepest that changed on each side is where to look from
+        const flipped = (el, other) => {
+            if (other.has(el))
+                return;
+            if (cascade.hoverTouches(el))
+                roots.push(el);
+        };
+        for (const el of was)
+            flipped(el, after);
+        for (const el of now)
+            flipped(el, before);
+        const deepest = (chain, other) => {
+            const el = chain[0];
+            if (el && !other.has(el))
+                cascade.hoverAnchors(el, roots);
+        };
+        deepest(was, after);
+        deepest(now, before);
+        if (!roots.length)
+            return 'none';
+        // what may restyle: the roots' subtrees, which inherit from them and a
+        // descendant combinator reaches, and their later siblings' too where a
+        // sibling combinator follows a compound that tests the pointer
+        const reach = new Set();
+        const collect = (el) => {
+            const stack = [el];
+            while (stack.length) {
+                const at = stack.pop();
+                if (reach.has(at))
+                    continue;
+                reach.add(at);
+                if (reach.size > HOVER_RESTYLE_LIMIT)
+                    return false;
+                for (const child of at.children)
+                    if (isElement(child))
+                        stack.push(child);
+            }
+            return true;
+        };
+        for (const root of roots) {
+            if (!collect(root))
+                return false;
+            if (!cascade.hoverSiblings)
+                continue;
+            for (let s = root.nextSibling; s; s = s.nextSibling) {
+                if (isElement(s) && !collect(s))
+                    return false;
+            }
+        }
+        // styled again from their parents, a parent first
+        const fresh = new Map();
+        const changed = new Map();
+        let refused = false;
+        const styleOf = (el) => {
+            const kept = tree.styles.get(el);
+            if (!kept)
+                return null;
+            if (!reach.has(el))
+                return kept.style;
+            const done = fresh.get(el);
+            if (done)
+                return done;
+            // an element at the top of the document is styled from the box above
+            // it all, as the builder styled it (`BoxBuilder.run`)
+            const parent = isElement(el.parent) ? el.parent : null;
+            const parentStyle = parent ? styleOf(parent) : tree.root.style;
+            if (!parentStyle) {
+                refused = true;
+                return null;
+            }
+            const style = cascade.styleFor(el, parentStyle, kept.inFlex);
+            fresh.set(el, style);
+            const diff = inkOnly(kept.style, style);
+            if (diff === false)
+                refused = true;
+            else if (diff)
+                changed.set(el, style);
+            return style;
+        };
+        for (const el of reach) {
+            styleOf(el);
+            if (refused)
+                return false;
+        }
+        if (!changed.size)
+            return 'none';
+        for (const el of changed.keys()) {
+            const tag = tagOf(el);
+            // their backgrounds are the canvas's
+            if (tag === 'html' || tag === 'body')
+                return false;
+        }
+        // the boxes: each changed element's own, and nothing that takes its
+        // style from one without being it
+        const fonts = layouts.fonts;
+        const restyled = [];
+        const redecorated = [];
+        const walk = [tree.root];
+        while (walk.length) {
+            const box = walk.pop();
+            for (const child of box.children)
+                walk.push(child);
+            const owner = box.el ?? nearestElement(box);
+            if (!owner)
+                continue;
+            const style = changed.get(owner);
+            if (!style)
+                continue;
+            const kept = tree.styles.get(owner);
+            // an anonymous box, a pseudo-element, a marker, a control: a style
+            // derived from the element's, or drawn from it somewhere else
+            if (!box.el || box.style !== kept.style)
+                return false;
+            if (box.marker || box.replaced !== 'none')
+                return false;
+            restyled.push([box, style]);
+            if (box.kind === 'inline') {
+                const decoration = inlineDecoration(fonts, box, style);
+                if ((decoration === null) !== (box.decoration === null)) {
+                    // a rounded box with a background is laid out with its edges
+                    if (style.borderRadius.some((r) => r !== 0))
+                        return false;
+                }
+                if (decoration !== box.decoration)
+                    redecorated.push([box, decoration]);
+            }
+        }
+        // the text: each layout holding a run of a changed element's, made
+        // again with its new ink, where it comes out the same shape
+        const relaid = new Map();
+        const texts = [];
+        walk.push(tree.root);
+        while (walk.length) {
+            const box = walk.pop();
+            for (const child of box.children)
+                walk.push(child);
+            if (!box.lines)
+                continue;
+            for (const line of box.lines) {
+                for (const text of line.texts) {
+                    texts.push(text);
+                    if (relaid.has(text.layout))
+                        continue;
+                    const next = reinked(text, layouts, changed, tree.styles);
+                    if (next === false)
+                        return false;
+                    relaid.set(text.layout, next);
+                }
+            }
+        }
+        // and only now, all of it
+        for (const [box, style] of restyled)
+            box.style = style;
+        for (const [box, decoration] of redecorated)
+            box.decoration = decoration;
+        for (const text of texts) {
+            const next = relaid.get(text.layout);
+            if (next)
+                text.layout = next;
+        }
+        for (const [el, style] of changed) {
+            tree.styles.set(el, { style, inFlex: tree.styles.get(el).inFlex });
+        }
+        return 'painted';
+    }
     /** The document, for an application that wants to read or change it. */
     get document() {
         return this._source.document;
@@ -548,6 +1314,7 @@ export class HtmlViewNode extends Node {
      */
     touchDocument() {
         this._source.touch();
+        this._updateBase();
         this._sweep();
         this._invalidate(Stale.Style);
     }
@@ -598,20 +1365,86 @@ export class HtmlViewNode extends Node {
                 damage = { x: 0, y: 0, width: window.width, height: window.height };
             }
         }
+        try {
+            this._paint(ctx, tree, range, damage);
+        }
+        catch (error) {
+            this._fail(error, this._laidOutWidth);
+        }
+    }
+    _paint(ctx, tree, range, damage) {
         paintDocument(ctx, tree, {
             originX: this.abs.x,
             originY: this.abs.y,
+            // the root's background covers the whole element, not only the
+            // document: an element grown past its content is canvas too
+            canvas: this.abs,
             scale: this._scale,
             damage,
             selection: range
                 ? { start: this._toUnits(range.start), end: this._toUnits(range.end) }
                 : null,
             selectionColor: this.selectionColor,
-            imageFor: (box) => box.el ? this._resources.image(attr(box.el, 'src') ?? '') : null,
+            imageFor: (box) => {
+                const url = box.el ? imageUrlOf(box.el) : CONTENT_IMAGES.get(box);
+                return url === undefined ? null : this._resources.image(url);
+            },
+            backgroundImageFor: (url) => {
+                const image = this._resources.image(url);
+                const size = image ? this._resources.imageSize(url) : null;
+                return image && size ? { image, ...size } : null;
+            },
+            cached: (key, width, height, draw) => (this._shadowCache ??= new SurfaceCache(this.app)).get(key, width, height, draw),
         });
     }
 }
 const EMPTY_SET = new Set();
+/** The first box an element made, depth first. */
+function boxFor(root, element) {
+    const stack = [root];
+    while (stack.length) {
+        const box = stack.pop();
+        if (box.el === element)
+            return box;
+        for (let i = box.children.length - 1; i >= 0; i -= 1) {
+            stack.push(box.children[i]);
+        }
+    }
+    return null;
+}
+/** Where the document's text goes on after a box with none: the start of
+ *  the next text in document order, or the end of the last before it. */
+function textAfter(root, target) {
+    const stack = [root];
+    let passed = false;
+    let before = 0;
+    while (stack.length) {
+        const box = stack.pop();
+        if (box === target) {
+            passed = true;
+            continue;
+        }
+        if (box.kind === 'text' && box.textEnd > box.textStart) {
+            if (passed)
+                return box.textStart;
+            before = box.textEnd;
+        }
+        for (let i = box.children.length - 1; i >= 0; i -= 1) {
+            stack.push(box.children[i]);
+        }
+    }
+    return before;
+}
+function unionRect(a, b) {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    return {
+        x,
+        y,
+        width: Math.max(a.x + a.width, b.x + b.width) - x,
+        height: Math.max(a.y + a.height, b.y + b.height) - y,
+    };
+}
 function textOf(el) {
     let out = '';
     for (const child of el.children) {
@@ -638,12 +1471,24 @@ function sameRects(a, b) {
             p.x !== q.x ||
             p.y !== q.y ||
             p.width !== q.width ||
-            p.height !== q.height) {
+            p.height !== q.height ||
+            !sameBare(p.bare, q.bare)) {
             return false;
         }
     }
     return true;
 }
+function sameBare(a, b) {
+    if (!a || !b)
+        return a === b;
+    return (a.x === b.x &&
+        a.y === b.y &&
+        a.width === b.width &&
+        a.height === b.height &&
+        a.color === b.color &&
+        a.fontFamily === b.fontFamily &&
+        a.fontSize === b.fontSize);
+}
 // --- walks over the laid-out tree -------------------------------------------
 /** Distance from a coordinate to an interval, zero inside it. */
 function axisDistance(v, lo, span) {
@@ -683,7 +1528,7 @@ function nearestText(box, x, y) {
             const units = offsets.length
                 ? offsets[Math.max(0, Math.min(local, offsets.length - 1))]
                 : local;
-            best = text.textStart + Math.max(0, units - text.layoutStart);
+            best = Math.max(text.textStart, documentOffsetOf(text, units));
         }
     };
     const visit = (node) => {
@@ -797,7 +1642,7 @@ function caretAt(box, units) {
                     if (units < text.textStart || units > text.textEnd)
                         continue;
                     const offsets = layoutOffsetsOf(text.layout);
-                    const layoutUnits = text.layoutStart + (units - text.textStart);
+                    const layoutUnits = layoutOffsetOf(text, units);
                     const caret = text.layout.caretPosition(codePointAtOffset(offsets, layoutUnits));
                     found = { x: text.drawX + caret.x, y: line.y, height: line.height };
                     return;
@@ -818,6 +1663,60 @@ function caretAt(box, units) {
 /** Every band a document range covers, in window coordinates. The subtree
  *  text ranges prune the walk to the boxes the range actually crosses, so a
  *  drag's small range costs its own paragraphs; only Ctrl+A pays for all. */
+/**
+ * What an inline box reaches on each line besides its text, as `out`
+ * rectangles as tall as the line: its own padding and border where it
+ * starts or ends there — its edge less its margin, which is outside it —
+ * and the inline-blocks and inline boxes' edges inside it, whole. The rest
+ * of its border box across, which its text alone missed: a padded link was
+ * as wide as its words (`elementRect`).
+ */
+function fragmentReach(box, out) {
+    let block = box.parent;
+    while (block && !block.lines)
+        block = block.parent;
+    if (!block?.lines)
+        return;
+    const inside = (b) => {
+        for (let at = b; at && at !== block; at = at.parent) {
+            if (at === box)
+                return true;
+        }
+        return false;
+    };
+    const rtl = box.style.direction === 'rtl';
+    for (const line of block.lines) {
+        let left = Infinity;
+        let right = -Infinity;
+        for (const edge of line.edges ?? []) {
+            if (edge.box === box) {
+                // the element's `direction` says which side its start is on, as
+                // paint reads it (`paintInlineBoxes`)
+                const onLeft = (edge.side === 'start') !== rtl;
+                left = Math.min(left, onLeft ? edge.x + box.marginLeft : edge.x);
+                right = Math.max(right, onLeft ? edge.x + edge.width : edge.x + edge.width - box.marginRight);
+            }
+            else if (inside(edge.box)) {
+                left = Math.min(left, edge.x);
+                right = Math.max(right, edge.x + edge.width);
+            }
+        }
+        for (const placed of line.atomics) {
+            if (!inside(placed.box))
+                continue;
+            left = Math.min(left, placed.x - placed.box.marginLeft);
+            right = Math.max(right, placed.x + placed.box.width + placed.box.marginRight);
+        }
+        if (right > left) {
+            out.push({
+                x: left,
+                y: line.y,
+                width: right - left,
+                height: line.height,
+            });
+        }
+    }
+}
 function collectBands(box, from, to, dx, dy, out) {
     if (box.subtreeTextEnd <= box.subtreeTextStart)
         return;
@@ -850,7 +1749,7 @@ function collectBands(box, from, to, dx, dy, out) {
                     if (b <= a)
                         continue;
                     const offsets = layoutOffsetsOf(text.layout);
-                    for (const band of bandsFor(text.layout, natural, offsets, text.layoutStart + (a - text.textStart), text.layoutStart + (b - text.textStart))) {
+                    for (const band of bandsFor(text.layout, natural, offsets, layoutOffsetOf(text, a), layoutOffsetOf(text, b, true))) {
                         out.push({
                             x: dx + band.x + text.drawX,
                             y: dy + line.y,
@@ -869,10 +1768,105 @@ function collectBands(box, from, to, dx, dy, out) {
         collectBands(child, from, to, dx, dy, out);
     }
 }
+/** The layers of a hit test, in the order CSS paints them within a
+ *  context (`deepestAt`). */
+const HIT_NEGATIVE = -1;
+const HIT_BLOCK = 0;
+const HIT_FLOAT = 1;
+const HIT_INLINE = 2;
+const HIT_POSITIONED = 3;
 /** The deepest element box containing a document-space point. */
-function deepestAt(box, x, y) {
+function deepestAt(tree, x, y, 
+/** Told whether what was found was found under text: a run's, rather
+ *  than a box's. */
+hit) {
+    const box = tree.root;
     let found = box.el;
-    const visit = (node) => {
+    let foundKey = [];
+    let viaText = false;
+    // What is under a point is what was painted there last (CSS 2.1 Appendix
+    // E): within a context, an in-flow block's own box, then a float over it,
+    // then a line's text and atomics, then a positioned box — and a float, an
+    // atomic or a positioned box paints its own content whole in its turn,
+    // those layers again inside it. So a hit carries the layers down to it,
+    // and takes the place of the one before where those come after them, or
+    // tie: an infobox floated out of one section hangs over the next, whose
+    // own box took every link in it, and a skin that puts the article in a
+    // `position: relative` box put all of it in one layer. Positioned boxes
+    // are painted in `z-index` order and then the document's (`byZIndex`),
+    // the negative ones under the flow: the Zen Garden's `›` has
+    // `z-index: 3` over the bar the "View All Designs" link fills after it.
+    const take = (el, key, text) => {
+        if (compareKeys(key, foundKey) < 0)
+            return;
+        found = el;
+        foundKey = key;
+        viaText = text;
+    };
+    // A box is walked into wherever it draws — its reach, overflow and all
+    // (`computePaintBounds`) — and named only where its own rectangle is. A
+    // page's `html, body { height: 100% }` is one viewport tall and its
+    // article overflows it, and a walk that went no further than a box's own
+    // rectangle found nothing below the first screen: once Wikipedia was
+    // scrolled, no link lit up. One whose reach is not known yet — before its
+    // first paint — is walked into at its rectangle, as before.
+    //
+    // A box that clips what overflows it hides what it holds past its edge —
+    // but not the positioned boxes whose containing block is outside it (CSS
+    // 2.1 11.1.1), which paint puts off until its clip ends
+    // (`paintPositioned`). So past the edge the walk goes on only into a box
+    // that holds positioned ones, carrying the clips the point is outside
+    // of, and names nothing until a positioned box escapes them all: the
+    // Zen Garden's archive links are absolute `<li>`s in an `overflow:
+    // hidden` list with no height of its own, and not one of them could be
+    // hovered or pressed.
+    const enter = (child, context, clipped) => {
+        const style = child.style;
+        if (style.position !== 'static' ||
+            (child.parent?.kind === 'flex' && typeof style.zIndex === 'number')) {
+            // a flex item with a `z-index` is layered unpositioned (`layered`)
+            const z = style.zIndex === 'auto' ? 0 : style.zIndex;
+            context = [...context, z < 0 ? HIT_NEGATIVE : HIT_POSITIONED, z];
+        }
+        else if (style.float !== 'none')
+            context = [...context, HIT_FLOAT];
+        if (clipped.length !== 0 && child.outOfFlow) {
+            const containing = containingBlockOf(child);
+            clipped = containing
+                ? clipped.filter((clip) => holds(clip, containing))
+                : [];
+        }
+        const inside = x >= child.x &&
+            x < child.x + child.width &&
+            y >= child.y &&
+            y < child.y + child.height;
+        const own = inside && hasRect(child);
+        if (!own) {
+            const reach = child.boundsY;
+            const known = Number.isFinite(reach) &&
+                (child.boundsWidth > 0 || child.boundsHeight > 0);
+            if (!known) {
+                if (!inside)
+                    return;
+            }
+            else if (x < child.boundsX ||
+                x >= child.boundsX + child.boundsWidth ||
+                y < reach ||
+                y >= reach + child.boundsHeight) {
+                return;
+            }
+            if (clipsOverflow(child)) {
+                if (!holdsAbsolute(child))
+                    return;
+                clipped = [...clipped, child];
+            }
+        }
+        if (own && child.el && clipped.length === 0) {
+            take(child.el, [...context, HIT_BLOCK], false);
+        }
+        visit(child, context, clipped);
+    };
+    const visit = (node, context, clipped) => {
         // The paint index answers a point query too — the wide level of a flat
         // document is the root's child list, and a hit test that walked all of
         // it would run per pointer move once hover is in the picture.
@@ -882,43 +1876,26 @@ function deepestAt(box, x, y) {
         for (const child of candidates) {
             if (child.kind === 'text' || child.kind === 'break')
                 continue;
-            if (x >= child.x &&
-                x < child.x + child.width &&
-                y >= child.y &&
-                y < child.y + child.height) {
-                if (child.el)
-                    found = child.el;
-                visit(child);
-            }
+            enter(child, context, clipped);
         }
         if (node.paintIndex && node.positionedPaint) {
             for (const child of node.positionedPaint) {
-                if (x >= child.x &&
-                    x < child.x + child.width &&
-                    y >= child.y &&
-                    y < child.y + child.height) {
-                    if (child.el)
-                        found = child.el;
-                    visit(child);
-                }
+                enter(child, context, clipped);
             }
         }
         if (node.lines) {
             for (const line of node.lines) {
                 for (const placed of line.atomics) {
-                    if (x >= placed.box.x &&
-                        x < placed.box.x + placed.box.width &&
-                        y >= placed.box.y &&
-                        y < placed.box.y + placed.box.height) {
-                        if (placed.box.el)
-                            found = placed.box.el;
-                        visit(placed.box);
-                    }
+                    enter(placed.box, [...context, HIT_INLINE], clipped);
                 }
                 // An inline box has no box of its own — its extent is the runs on
                 // this line — so the element under a point inside a paragraph is
-                // found from the run rather than from a rectangle.
-                if (y >= line.y && y < line.y + line.height) {
+                // found from the run rather than from a rectangle: from where its
+                // text sits in the document, whose text boxes know their element.
+                // Not from the run itself, whose layout may be one an earlier parse
+                // made (`TextLayoutCache`), and which an engine may hand back with
+                // nothing on it but its extent.
+                if (clipped.length === 0 && y >= line.y && y < line.y + line.height) {
                     for (const text of line.texts) {
                         const natural = text.layout.lines[text.layoutLine];
                         if (!natural)
@@ -926,10 +1903,9 @@ function deepestAt(box, x, y) {
                         for (const run of natural.runs) {
                             const left = text.drawX + natural.x + run.x;
                             if (x >= left && x < left + run.width) {
-                                const owner = run.span
-                                    ?.element;
+                                const owner = ownerOf(tree.textBoxes, text.spans.documentAt(run.start));
                                 if (owner)
-                                    found = owner;
+                                    take(owner, [...context, HIT_INLINE], true);
                             }
                         }
                     }
@@ -937,7 +1913,264 @@ function deepestAt(box, x, y) {
             }
         }
     };
-    visit(box);
+    visit(box, [], []);
+    if (hit)
+        hit.text = viaText;
     return found;
 }
+/** Paint order between two hits' layers, outermost first: negative where
+ *  `a` was painted under `b`. */
+function compareKeys(a, b) {
+    const n = Math.min(a.length, b.length);
+    for (let i = 0; i < n; i += 1)
+        if (a[i] !== b[i])
+            return a[i] - b[i];
+    return a.length - b.length;
+}
+// --- a pointer move restyled where it happened (`_hoverInPlace`) -----------
+/** How many elements a pointer move restyles in place before the document
+ *  is built again instead: a link's subtree is a handful, and a compound
+ *  that matches a container reaches everything in it. */
+const HOVER_RESTYLE_LIMIT = 300;
+/**
+ * The computed properties a pointer move may change in place: ink, which
+ * moves nothing. A background colour is drawn inside the box it colours
+ * and a border's colour on the border it has; `box-shadow`, `text-shadow`
+ * and an outline's width reach past it, where the paint index has already
+ * looked, and a background image has to be fetched.
+ */
+const PAINT_ONLY = new Set([
+    'color',
+    'textFillColor',
+    'cursor',
+    'backgroundColor',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'outlineColor',
+    'textDecorationLine',
+    'textDecorationColor',
+    'textDecorationStyle',
+    'textDecorationThickness',
+    'textUnderlineOffset',
+    'underline',
+    'underlineStyle',
+    'underlineThickness',
+    'underlineOffset',
+    'lineThrough',
+]);
+/** The fields of a run its ink is: what `runFor` takes from `PAINT_ONLY`. */
+const INK_FIELDS = [
+    'color',
+    'underline',
+    'underlineStyle',
+    'underlineOffset',
+    'underlineThickness',
+    'strike',
+];
+/** The fields of a run its shape is, which ink never changes. */
+const FACE_FIELDS = [
+    'family',
+    'size',
+    'weight',
+    'style',
+    'letterSpacing',
+    'features',
+];
+/** Whether two styles differ in ink alone: true where they do, null where
+ *  they do not differ, false where something else does. Custom properties
+ *  are read through the properties that use them. */
+function inkOnly(was, now) {
+    const a = was;
+    const b = now;
+    let ink = false;
+    for (const key in b) {
+        if (key === 'custom' || sameValue(a[key], b[key]))
+            continue;
+        if (!PAINT_ONLY.has(key))
+            return false;
+        ink = true;
+    }
+    return ink ? true : null;
+}
+/** Structural equality for a computed value: a number, a string, or the
+ *  plain objects and arrays a length or a shadow list is. */
+function sameValue(x, y) {
+    if (x === y)
+        return true;
+    if (typeof x === 'number' && typeof y === 'number') {
+        return Number.isNaN(x) && Number.isNaN(y);
+    }
+    if (!x || !y || typeof x !== 'object' || typeof y !== 'object')
+        return false;
+    if (Array.isArray(x) !== Array.isArray(y))
+        return false;
+    const a = x;
+    const b = y;
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    for (const key of keys)
+        if (!sameValue(a[key], b[key]))
+            return false;
+    return true;
+}
+/** The element an anonymous box takes its style from: its nearest
+ *  ancestor's that has one. */
+function nearestElement(box) {
+    for (let at = box.parent; at; at = at.parent)
+        if (at.el)
+            return at.el;
+    return null;
+}
+/**
+ * `text`'s layout made again with the ink of the elements a pointer move
+ * restyled: from the runs it was made from, each of a changed element's
+ * given the ink its new style makes (`runFor`) and nothing else. Null where
+ * none of its runs is theirs; false where that cannot be told — a run this
+ * cannot place in the document, one some other pass inked (a first line's),
+ * or a layout that comes out another shape.
+ */
+function reinked(text, layouts, changed, styles) {
+    const spans = text.spans;
+    const ownerAt = (offset) => spans.boxAt ? (spans.boxAt(offset)?.el ?? null) : null;
+    const inputs = layouts.inputsOf(text.layout);
+    if (!inputs || !spans.boxAt) {
+        // not one this could make again: none of its text may be theirs
+        for (const line of text.layout.lines) {
+            for (const run of line.runs) {
+                const owner = spans.boxAt ? ownerAt(run.start) : null;
+                if (!spans.boxAt || (owner && changed.has(owner)))
+                    return false;
+            }
+        }
+        return null;
+    }
+    let runs = null;
+    let offset = 0;
+    const content = inputs.content;
+    for (let i = 0; i < content.length; i += 1) {
+        const run = content[i];
+        const length = run.text.length;
+        const owner = length ? ownerAt(offset) : null;
+        const style = owner ? changed.get(owner) : undefined;
+        if (owner && style) {
+            if (ownerAt(offset + length - 1) !== owner)
+                return false;
+            const was = runFor(run.text, styles.get(owner).style);
+            const now = runFor(run.text, style);
+            for (const f of FACE_FIELDS)
+                if (!sameValue(was[f], now[f]))
+                    return false;
+            let next = null;
+            for (const f of INK_FIELDS) {
+                // a run that is not what its style made — a first line's colour
+                if (!sameValue(run[f], was[f]))
+                    return false;
+                if (sameValue(was[f], now[f]))
+                    continue;
+                next ??= { ...run };
+                if (now[f] === undefined)
+                    delete next[f];
+                else
+                    next[f] = now[f];
+            }
+            if (next) {
+                runs ??= content.slice();
+                runs[i] = next;
+            }
+        }
+        offset += length;
+    }
+    if (!runs)
+        return null;
+    const layout = layouts.fonts.layout(runs, inputs.style, inputs.options);
+    return sameShape(text.layout, layout) ? layout : false;
+}
+/** Whether two layouts put the same text in the same places: ink aside,
+ *  the same layout. */
+function sameShape(a, b) {
+    if (a.width !== b.width || a.height !== b.height)
+        return false;
+    if (a.lines.length !== b.lines.length)
+        return false;
+    for (let i = 0; i < a.lines.length; i += 1) {
+        const x = a.lines[i];
+        const y = b.lines[i];
+        if (x.x !== y.x ||
+            x.y !== y.y ||
+            x.width !== y.width ||
+            x.height !== y.height ||
+            x.baseline !== y.baseline ||
+            x.ascent !== y.ascent ||
+            x.descent !== y.descent ||
+            x.start !== y.start ||
+            x.end !== y.end ||
+            x.runs.length !== y.runs.length) {
+            return false;
+        }
+        for (let j = 0; j < x.runs.length; j += 1) {
+            const r = x.runs[j];
+            const t = y.runs[j];
+            if (r.x !== t.x ||
+                r.width !== t.width ||
+                r.start !== t.start ||
+                r.end !== t.end) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+/** The element whose text holds a document index: the text box around it,
+ *  found by bisecting the boxes in document order. */
+function ownerOf(boxes, index) {
+    let lo = 0;
+    let hi = boxes.length - 1;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (boxes[mid].textStart <= index)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    const box = boxes[lo];
+    return box && index >= box.textStart && index < box.textEnd ? box.el : null;
+}
+/** The advance of a font's "0" at a size, laid out: null where the engine
+ *  cannot lay it out. */
+function zeroWidthOf(fonts, family, size) {
+    try {
+        return fonts.layout([{ text: '0', family, size }], { family, size }, {})
+            .width;
+    }
+    catch {
+        return null;
+    }
+}
+/** A font's own line height at a size, as the engine reports it: null
+ *  where it cannot say. */
+function normalLineOf(fonts, family, size) {
+    try {
+        const line = fonts.match(family, { size }).metrics(size).lineHeight;
+        return line > 0 ? line : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** A font's x-height at a size, as the engine reports it: null where the
+ *  face states none, or the engine does not say. */
+function xHeightOf(fonts, family, size) {
+    try {
+        const metrics = fonts.match(family, { size }).metrics(size);
+        const x = metrics.xHeight;
+        // NaN where the face states none, which is a number
+        return typeof x === 'number' && x > 0 ? x : null;
+    }
+    catch {
+        return null;
+    }
+}
 //# sourceMappingURL=node.js.map