@react-x11/components 0.11.0 → 0.12.0

package/dist/html/node.js

@@ -43,17 +43,17 @@ import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
 import { Cascade } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
-import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, LINE_BOX_RAISES, SHIFTED_LINES, } from './layout/boxes.js';
-import { layoutDocument } from './layout/block.js';
+import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, } from './layout/boxes.js';
+import { layoutDocument, retranslate, transformed } from './layout/block.js';
 import { TextLayoutCache } from './layout/cache.js';
 import { shapingSafe } from './layout/shaping.js';
-import { SurfaceCache } from './surfaces.js';
+import { SurfaceCache, newSurface } from './surfaces.js';
 import { faceExtentOf, 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 { documentOffsetOf, layoutOffsetOf, layoutOffsets as layoutOffsetsOf, } from './layout/inline.js';
 import { lineBands as bandsFor } from '../richtext/runs.js';
-import { clipsOverflow, containingBlockOf, hasRect, holds, holdsAbsolute, paintDocument, queryChildIndex, } from './paint.js';
+import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, paintDocument, queryChildIndex, stackLayers, } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
 import { ResourceStore } from './resources.js';
 import { WebFonts } from './fonts.js';
@@ -118,6 +118,8 @@ export class HtmlViewNode extends Node {
     _sheetsRead = null;
     /** Blurred shadows, drawn once each. */
     _shadowCache = null;
+    /** Whether the backend was found to have no offscreen surface. */
+    _noSurface = false;
     _cascade = null;
     _tree = null;
     /** The faces `_warmFaces` has asked the font matcher for, and of which
@@ -315,14 +317,16 @@ export class HtmlViewNode extends Node {
      */
     _requestBackgrounds(tree) {
         for (const box of tree.backgrounds) {
-            if (!box.el)
+            // a pseudo-element's are its element's
+            const element = box.el ?? GENERATED_FROM.get(box);
+            if (!element)
                 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 });
+                    this._resources.request({ url, kind: 'image', element });
                 }
             }
             const border = box.style.borderImage.source;
@@ -330,9 +334,15 @@ export class HtmlViewNode extends Node {
                 this._resources.request({
                     url: border,
                     kind: 'image',
-                    element: box.el,
+                    element,
                 });
             }
+            // and each mask layer's, which is an image as a background's is
+            for (const url of box.style.mask.images) {
+                if (typeof url === 'string') {
+                    this._resources.request({ url, kind: 'image', element });
+                }
+            }
         }
         // and every image generated content names, which is only known there
         // too
@@ -548,6 +558,58 @@ export class HtmlViewNode extends Node {
         }
         return true;
     }
+    /**
+     * The viewport the document is seen through, in window coordinates: the
+     * content box of the pane that scrolls the element, where one does —
+     * what `position: fixed` and a fixed background are placed against, as
+     * a browser places them against its page area. Null where nothing
+     * scrolls it, and the element is its own.
+     */
+    _viewport() {
+        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 box = node.contentBox();
+            return box.width > 0 && box.height > 0 ? box : null;
+        }
+        return null;
+    }
+    /**
+     * What the document draws fixed to the viewport of the pane that scrolls
+     * it, for that pane's scroll blit to repaint rather than copy with the
+     * text (react-x11's `viewportFixedRects`): the whole viewport where a
+     * fixed background shows through it, which makes a scroll a repaint, and
+     * where each fixed box is drawn. Null for a document with neither, and
+     * where nothing scrolls the element.
+     */
+    viewportFixedRects() {
+        const tree = this._tree;
+        const viewport = tree && this._viewport();
+        if (!tree || !viewport)
+            return null;
+        if (hasFixedBackground(tree))
+            return [viewport];
+        const boxes = FIXED_BOXES.get(tree);
+        if (!boxes)
+            return null;
+        // laid out against the viewport at the document's top, and drawn at the
+        // viewport (`atViewport`)
+        const root = tree.root;
+        const out = [];
+        for (const box of boxes) {
+            if (!(box.boundsWidth > 0 && box.boundsHeight > 0))
+                continue;
+            out.push({
+                x: viewport.x + box.boundsX - root.x,
+                y: viewport.y + box.boundsY - root.y,
+                width: box.boundsWidth,
+                height: box.boundsHeight,
+            });
+        }
+        return out.length ? out : null;
+    }
     _viewportHeight() {
         // 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
@@ -1002,29 +1064,52 @@ export class HtmlViewNode extends Node {
         }
         else {
             const bands = [];
-            // an inline box's fragments are on the lines of the block it is laid
-            // out in, and no text of a float or a positioned box inside it — on
-            // lines of their own — is one of them (CSSOM View 6.1): a list item
-            // made inline around an absolute link measured as the link
-            let block = box.parent;
-            while (block && !block.lines)
-                block = block.parent;
-            if (box.subtreeTextEnd > box.subtreeTextStart) {
-                if (box.kind === 'inline' && block?.lines) {
-                    lineBands(block.lines, box.subtreeTextStart, box.subtreeTextEnd, 0, 0, bands);
-                }
-                else {
-                    collectBands(tree.root, box.subtreeTextStart, box.subtreeTextEnd, 0, 0, bands);
-                }
+            const fonts = this._layouts?.fonts ?? null;
+            // an inline box broken around the blocks in it is its pieces, a box
+            // of the element's each (CSS 2.1 9.2.1.1), and its fragments are
+            // theirs; and on the lines between them it has a fragment around each
+            // block, across the box the block is in and as tall as its border
+            // box, as a browser's has — Blink's block-in-inline, Gecko's split
+            // inline's anonymous block. A list item made inline around a block
+            // link measured as the empty edge after it
+            for (const piece of piecesOf(tree.root, box)) {
+                inlineBands(tree.root, piece, fonts, bands);
             }
-            if (box.kind === 'inline') {
-                fragmentReach(box, bands);
-                const fonts = this._layouts?.fonts;
-                if (fonts)
-                    fragmentHeights(box, bands, fonts);
+            for (const block of (box.cut ? CUT_BLOCKS.get(box) : null) ?? []) {
+                const around = block.parent;
+                if (!around)
+                    continue;
+                bands.push({
+                    x: around.contentX,
+                    y: block.y,
+                    width: around.contentWidth,
+                    height: block.height,
+                });
             }
             for (const band of bands)
                 rect = rect ? unionRect(rect, band) : band;
+            if (!rect) {
+                // on no line, where its block has none: text set at no size takes
+                // no room and gets no box, and CSS puts it on lines of no height
+                // at the block's top (9.4.2), as a browser measures it — nothing,
+                // where the block's content starts. Where the text after it
+                // starts was the next text that took room, elsewhere in the
+                // document: the Zen Garden's 170 hides a heading at `font-size:
+                // 0`, and an `<abbr>` in it measured as the end of the paragraph
+                // above it
+                let block = box.parent;
+                while (block && block.kind === 'inline')
+                    block = block.parent;
+                if (block && !block.lines?.length) {
+                    const rtl = block.style.direction === 'rtl';
+                    rect = {
+                        x: rtl ? block.contentX + block.contentWidth : block.contentX,
+                        y: block.contentY,
+                        width: 0,
+                        height: 0,
+                    };
+                }
+            }
             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
@@ -1048,7 +1133,20 @@ export class HtmlViewNode extends Node {
         if (!tree)
             return null;
         const local = this._toDocument(x, y);
-        return deepestAt(tree, local.x, local.y);
+        return deepestAt(tree, local.x, local.y, undefined, this._fixedShift());
+    }
+    /** How far a box fixed to the viewport is drawn from where it was laid
+     *  out, in the document's pixels: the scroll of the pane the element is
+     *  in (`atViewport`). Null where nothing scrolls it. */
+    _fixedShift() {
+        const tree = this._tree;
+        const viewport = tree && FIXED_BOXES.has(tree) && this._viewport();
+        if (!tree || !viewport)
+            return null;
+        return {
+            x: viewport.x - this.abs.x - tree.root.x,
+            y: viewport.y - this.abs.y - tree.root.y,
+        };
     }
     /**
      * The cursor for a point of this element's, in device pixels: what core
@@ -1065,7 +1163,7 @@ export class HtmlViewNode extends Node {
         if (!tree)
             return null;
         const hit = { text: false };
-        const el = deepestAt(tree, x - this.abs.x, y - this.abs.y, hit);
+        const el = deepestAt(tree, x - this.abs.x, y - this.abs.y, hit, this._fixedShift());
         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))
@@ -1107,10 +1205,8 @@ export class HtmlViewNode extends Node {
     }
     /** 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)
+        // a restyle in place names what it repainted (`_hoverInPlace`)
+        if (this._hoverInPlace(was, now) === false)
             this._invalidate(Stale.Boxes);
     }
     /**
@@ -1205,6 +1301,11 @@ export class HtmlViewNode extends Node {
         const fresh = new Map();
         const changed = new Map();
         let refused = false;
+        // what changed beyond ink (`hoverChange`): how far some box's ink
+        // reaches, the order its layer paints in, where one is
+        let reaches = false;
+        let reorders = false;
+        const moving = new Set();
         const styleOf = (el) => {
             const kept = tree.styles.get(el);
             if (!kept)
@@ -1224,11 +1325,18 @@ export class HtmlViewNode extends Node {
             }
             const style = cascade.styleFor(el, parentStyle, kept.inFlex);
             fresh.set(el, style);
-            const diff = inkOnly(kept.style, style);
+            const diff = hoverChange(kept.style, style);
             if (diff === false)
                 refused = true;
-            else if (diff)
+            else if (diff) {
                 changed.set(el, style);
+                if (diff.reach)
+                    reaches = true;
+                if (diff.order)
+                    reorders = true;
+                if (diff.move)
+                    moving.add(el);
+            }
             return style;
         };
         for (const el of reach) {
@@ -1262,10 +1370,14 @@ export class HtmlViewNode extends Node {
                 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
+            // derived from the element's, or drawn from it somewhere else — a
+            // widget mounted beside the document takes its look from it. An
+            // image, a drawing or a rule is drawn here, from its box, like any.
             if (!box.el || box.style !== kept.style)
                 return false;
-            if (box.marker || box.replaced !== 'none')
+            if (box.marker || WIDGETS.has(box.replaced))
+                return false;
+            if (moving.has(owner) && !movable(box, kept.style, style))
                 return false;
             restyled.push([box, style]);
             if (box.kind === 'inline') {
@@ -1302,11 +1414,29 @@ export class HtmlViewNode extends Node {
                 }
             }
         }
+        // what each box drew before, to be repainted with what it draws after
+        const inks = [];
+        for (const [box] of restyled) {
+            const ink = inkOf(box);
+            if (ink)
+                inks.push(ink);
+        }
         // and only now, all of it
-        for (const [box, style] of restyled)
+        const moved = [];
+        for (const [box, style] of restyled) {
+            const was = box.style;
             box.style = style;
-        for (const [box, decoration] of redecorated)
+            if (moving.has(box.el))
+                moved.push([box, was]);
+        }
+        for (const [box, decoration] of redecorated) {
+            // what is inside it keeps which boxes around it paint, and this is
+            // one more or one fewer of them
+            if ((decoration === null) !== (box.decoration === null)) {
+                forgetDecoratedAncestors(box);
+            }
             box.decoration = decoration;
+        }
         for (const text of texts) {
             const next = relaid.get(text.layout);
             if (next)
@@ -1315,8 +1445,72 @@ export class HtmlViewNode extends Node {
         for (const [el, style] of changed) {
             tree.styles.set(el, { style, inFlex: tree.styles.get(el).inFlex });
         }
+        // A box that moved moves what is in it, as layout moved it the first
+        // time (`applyRelativeOffsets`), and a later layout moves it the same
+        // way; where it reached the document's end, before or after, the
+        // document's height may have changed with it, which only a layout says.
+        let relayout = false;
+        for (const [box, was] of moved) {
+            const before = box.boundsY + box.boundsHeight;
+            retranslate(box, was);
+            tree.relative = true;
+            if (before >= this._documentHeight)
+                relayout = true;
+        }
+        // how far the boxes' ink reaches, and the order their layers paint in,
+        // as layout leaves them (`layoutDocument`)
+        if (reaches || reorders || moved.length) {
+            computePaintBounds(tree.root, tree.movedInline);
+            if (tree.negative)
+                hoistNegative(tree.root);
+            stackLayers(tree.root);
+        }
+        for (const [box] of moved) {
+            if (box.boundsY + box.boundsHeight >= this._documentHeight) {
+                relayout = true;
+            }
+        }
+        if (moved.length)
+            this._reportControls();
+        if (relayout) {
+            this._invalidate(Stale.Layout);
+            return 'painted';
+        }
+        for (const [box] of restyled) {
+            const ink = inkOf(box);
+            if (ink)
+                inks.push(ink);
+        }
+        this._repaintInk(inks);
         return 'painted';
     }
+    /**
+     * Repaint the document where `inks` are, in its own coordinates: the ink
+     * of the boxes a hover restyled, before and after. Past a handful of rects
+     * the damage is one around them all, which is what core would make of
+     * them anyway.
+     */
+    _repaintInk(inks) {
+        if (!inks.length)
+            return;
+        const x = this.abs.x;
+        const y = this.abs.y;
+        const place = (r) => ({
+            x: Math.floor(x + r.x),
+            y: Math.floor(y + r.y),
+            width: Math.ceil(r.width) + 1,
+            height: Math.ceil(r.height) + 1,
+        });
+        if (inks.length > 6) {
+            let all = inks[0];
+            for (const r of inks)
+                all = unionRect(all, r);
+            this.invalidate(false, place(all), 'props');
+            return;
+        }
+        for (const r of inks)
+            this.invalidate(false, place(r), 'props');
+    }
     /** The document, for an application that wants to read or change it. */
     get document() {
         return this._source.document;
@@ -1388,6 +1582,16 @@ export class HtmlViewNode extends Node {
             this._fail(error, this._laidOutWidth);
         }
     }
+    /** A surface for the painter to draw a masked element on, asked of the
+     *  backend until it is found to have none. */
+    _surface(width, height) {
+        if (this._noSurface)
+            return null;
+        const surface = newSurface(this.app, width, height);
+        if (!surface)
+            this._noSurface = true;
+        return surface;
+    }
     _paint(ctx, tree, range, damage) {
         paintDocument(ctx, tree, {
             originX: this.abs.x,
@@ -1395,6 +1599,7 @@ export class HtmlViewNode extends Node {
             // the root's background covers the whole element, not only the
             // document: an element grown past its content is canvas too
             canvas: this.abs,
+            viewport: this._viewport() ?? undefined,
             scale: this._scale,
             damage,
             selection: range
@@ -1410,11 +1615,34 @@ export class HtmlViewNode extends Node {
                 const size = image ? this._resources.imageSize(url) : null;
                 return image && size ? { image, ...size } : null;
             },
+            surface: (width, height) => this._surface(width, height),
             cached: (key, width, height, draw) => (this._shadowCache ??= new SurfaceCache(this.app)).get(key, width, height, draw),
         });
     }
 }
 const EMPTY_SET = new Set();
+/** Whether a tree has a background fixed to the viewport: an image a box
+ *  names (`tree.backgrounds`), or the canvas's image or gradient — the
+ *  root's, or the body's it paints, which the root box stands in for where
+ *  the markup has neither element. */
+function hasFixedBackground(tree) {
+    for (const box of tree.backgrounds) {
+        if (box.style.backgroundAttachment === 'fixed')
+            return true;
+    }
+    const root = tree.root;
+    const body = root.children.find((child) => child.el?.name === 'body');
+    for (const box of body ? [root, body] : [root]) {
+        const style = box.style;
+        if (style.backgroundAttachment === 'fixed' &&
+            (style.backgroundImage ||
+                style.backgroundImages ||
+                style.backgroundGradient)) {
+            return true;
+        }
+    }
+    return false;
+}
 /** The first box an element made, depth first. */
 function boxFor(root, element) {
     const stack = [root];
@@ -1428,6 +1656,83 @@ function boxFor(root, element) {
     }
     return null;
 }
+/**
+ * An inline element's boxes: the one it has, or where a block in it broke
+ * it (`breakAround`), each piece, in document order.
+ */
+function piecesOf(root, first) {
+    // the first piece is cut at its end where there are more
+    if (first.kind !== 'inline' || !(first.cut & 2))
+        return [first];
+    const pieces = [];
+    const stack = [root];
+    while (stack.length) {
+        const box = stack.pop();
+        if (box.el === first.el && box.kind === 'inline')
+            pieces.push(box);
+        for (let i = box.children.length - 1; i >= 0; i -= 1) {
+            stack.push(box.children[i]);
+        }
+    }
+    return pieces;
+}
+/**
+ * The bands of one inline box's fragments, or a text's: on the lines of
+ * the block it is laid out in, and no text of a float or a positioned box
+ * inside it — on lines of their own — is one of them (CSSOM View 6.1): a
+ * list item made inline around an absolute link measured as the link.
+ * Each across its text, the inline-blocks and inline boxes' edges it holds
+ * and its own padding and border where it starts or ends there, and as
+ * tall as its border box.
+ */
+function inlineBands(root, box, fonts, out) {
+    // its own, apart from any other piece's: `fragmentHeights` makes each of
+    // the bands it is handed as tall as this box on that band's line
+    const bands = [];
+    let block = box.parent;
+    while (block && !block.lines)
+        block = block.parent;
+    if (box.subtreeTextEnd > box.subtreeTextStart) {
+        if (box.kind === 'inline' && block?.lines) {
+            lineBands(block.lines, box.subtreeTextStart, box.subtreeTextEnd, 0, 0, bands, true);
+        }
+        else {
+            collectBands(root, box.subtreeTextStart, box.subtreeTextEnd, 0, 0, bands);
+        }
+    }
+    if (box.kind === 'inline') {
+        fragmentReach(box, bands);
+        if (fonts)
+            fragmentHeights(box, bands, fonts);
+        // where `position: relative` on it or an inline box around it moved
+        // it, all of it (CSS 2.1 9.4.3), as `getBoundingClientRect` has it
+        // (CSSOM View 6.1): the bands are where the lines put it, and a link
+        // moved 120px down measured on its line, as wide as from where it was
+        // laid out to where it was drawn
+        const { x, y } = relativeOffsetOf(box);
+        if (x || y) {
+            for (const band of bands) {
+                band.x += x;
+                band.y += y;
+            }
+        }
+    }
+    out.push(...bands);
+}
+/** How far an inline box and the inline boxes around it moved it by their
+ *  relative offsets (`INLINE_OFFSETS`). */
+function relativeOffsetOf(box) {
+    let x = 0;
+    let y = 0;
+    for (let at = box; at?.kind === 'inline'; at = at.parent) {
+        const offset = INLINE_OFFSETS.get(at);
+        if (offset) {
+            x += offset.x;
+            y += offset.y;
+        }
+    }
+    return { x, y };
+}
 /** 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) {
@@ -1488,6 +1793,7 @@ function sameRects(a, b) {
             p.y !== q.y ||
             p.width !== q.width ||
             p.height !== q.height ||
+            p.opacity !== q.opacity ||
             !sameBare(p.bare, q.bare)) {
             return false;
         }
@@ -1503,7 +1809,8 @@ function sameBare(a, b) {
         a.height === b.height &&
         a.color === b.color &&
         a.fontFamily === b.fontFamily &&
-        a.fontSize === b.fontSize);
+        a.fontSize === b.fontSize &&
+        a.chevron === b.chevron);
 }
 // --- walks over the laid-out tree -------------------------------------------
 /** Distance from a coordinate to an interval, zero inside it. */
@@ -1768,7 +2075,10 @@ function fragmentHeights(box, bands, fonts) {
     }
 }
 /** The bands of a text range on one block's own lines. */
-function lineBands(lines, from, to, dx, dy, out) {
+function lineBands(lines, from, to, dx, dy, out, 
+/** Where the lines put the text, not where a relative offset moved it
+ *  (`TEXT_SHIFTS`): what an inline box's own offset is added to. */
+laidOut = false) {
     // First line whose text can reach `from`, by binary search over the
     // sorted text starts; stop at the first line past `to`.
     let lo = 0;
@@ -1794,11 +2104,37 @@ function lineBands(lines, from, to, dx, dy, out) {
                 if (b <= a)
                     continue;
                 const offsets = layoutOffsetsOf(text.layout);
+                const moved = laidOut ? (TEXT_SHIFTS.get(text)?.x ?? 0) : 0;
+                // The spaces a line ends on are removed (CSS Text 3, 4.1.2), and
+                // take no room on it: the engine sets them past its line's content,
+                // where a caret after them goes, and a band that took them in made
+                // a link that ends a line a space wider than Chrome's. So the text
+                // a line ends with is measured no further than its content.
+                const ends = endsLine(line, text, natural);
                 for (const band of bandsFor(text.layout, natural, offsets, layoutOffsetOf(text, a), layoutOffsetOf(text, b, true))) {
+                    let left = band.x;
+                    let right = band.x + band.width;
+                    if (ends) {
+                        left = Math.max(left, natural.x);
+                        right = Math.max(left, Math.min(right, natural.x + natural.width));
+                    }
+                    out.push({
+                        x: dx + left + text.drawX - moved,
+                        y: dy + line.y,
+                        width: right - left,
+                        height: line.height,
+                    });
+                }
+                // the spaces `pre-wrap` keeps that the line ends on, which have no
+                // run: the engine hung them past the line (`LineText.hung`)
+                for (const space of text.hung ?? []) {
+                    const at = documentOffsetOf(text, space.at);
+                    if (at < a || at >= b)
+                        continue;
                     out.push({
-                        x: dx + band.x + text.drawX,
+                        x: dx + space.x + text.drawX - moved,
                         y: dy + line.y,
-                        width: band.width,
+                        width: space.width,
                         height: line.height,
                     });
                 }
@@ -1806,6 +2142,18 @@ function lineBands(lines, from, to, dx, dy, out) {
         }
     }
 }
+/** Whether a line's text is where the line ends: its last, with nothing
+ *  placed after it — an inline-block or an image past its content. */
+function endsLine(line, text, natural) {
+    if (line.texts[line.texts.length - 1] !== text)
+        return false;
+    const right = text.drawX + natural.x + natural.width;
+    for (const placed of line.atomics) {
+        if (placed.x >= right - 0.01)
+            return false;
+    }
+    return true;
+}
 function collectBands(box, from, to, dx, dy, out) {
     if (box.subtreeTextEnd <= box.subtreeTextStart)
         return;
@@ -1831,7 +2179,11 @@ const HIT_POSITIONED = 3;
 function deepestAt(tree, x, y, 
 /** Told whether what was found was found under text: a run's, rather
  *  than a box's. */
-hit) {
+hit, 
+/** How far a box fixed to the viewport is drawn from where it was laid
+ *  out (`HtmlViewNode._fixedShift`): the point is taken back by it in
+ *  there, as paint moved the box by it (`atViewport`). */
+fixedShift = null) {
     const box = tree.root;
     let found = box.el;
     let foundKey = [];
@@ -1872,7 +2224,25 @@ hit) {
     // 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.
+    let atViewport = false;
     const enter = (child, context, clipped) => {
+        if (!fixedShift || atViewport || !fixedToViewport(child)) {
+            enterAt(child, context, clipped);
+            return;
+        }
+        x -= fixedShift.x;
+        y -= fixedShift.y;
+        atViewport = true;
+        try {
+            enterAt(child, context, clipped);
+        }
+        finally {
+            x += fixedShift.x;
+            y += fixedShift.y;
+            atViewport = false;
+        }
+    };
+    const enterAt = (child, context, clipped) => {
         const style = child.style;
         if (style.position !== 'static' ||
             (child.parent?.kind === 'flex' && typeof style.zIndex === 'number')) {
@@ -2030,21 +2400,112 @@ const FACE_FIELDS = [
     '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) {
+/** The replaced boxes that are controls (`BoxTree.controls`, `controls.ts`):
+ *  a widget mounted beside the document, or a button whose press it reports. */
+const WIDGETS = new Set([
+    'input',
+    'textarea',
+    'select',
+    'button',
+    'checkbox',
+    'radio',
+]);
+/** What only moves how far a box's ink reaches: a shadow, and an outline's
+ *  size, which take no room (CSS Backgrounds 3, 7.1; CSS UI 4, 3). */
+const INK_REACH = new Set([
+    'boxShadow',
+    'outlineStyle',
+    'outlineWidth',
+    'outlineOffset',
+]);
+/**
+ * How two styles of one element differ, for a restyle in place: null where
+ * they do not, a `HoverChange` where every difference is ink, how far ink
+ * reaches, a `z-index` that stays a stacking context's, or a translation —
+ * none of which moves anything but the box and what it holds (CSS
+ * Transforms 1: a transform does not affect layout) — and false where
+ * anything else differs.
+ */
+function hoverChange(was, now) {
     const a = was;
     const b = now;
-    let ink = false;
+    let change = null;
     for (const key in b) {
         if (key === 'custom' || sameValue(a[key], b[key]))
             continue;
-        if (!PAINT_ONLY.has(key))
+        change ??= { reach: false, order: false, move: false };
+        if (PAINT_ONLY.has(key))
+            continue;
+        if (INK_REACH.has(key)) {
+            change.reach = true;
+            continue;
+        }
+        if (key === 'zIndex') {
+            // one stacking context either way, with nothing hoisted below the
+            // flow (`hoistNegative`): only its place among its layers changes
+            const z0 = a[key];
+            const z1 = b[key];
+            if (typeof z0 !== 'number' || typeof z1 !== 'number')
+                return false;
+            if (z0 < 0 || z1 < 0)
+                return false;
+            change.order = true;
+            continue;
+        }
+        if (key === 'transformTranslate' || key === 'translate') {
+            change.move = true;
+            continue;
+        }
+        return false;
+    }
+    return change;
+}
+/**
+ * Whether a box can take a new translation where it is: a box of its own
+ * rather than an inline one, whose text is what moves; and the same
+ * containing block and stacking context for what is in it, which a
+ * transform makes a box (CSS Transforms 1, 2) — so either transformed
+ * before and after, or already positioned with a `z-index`, and holding
+ * nothing fixed, which only a transform takes in.
+ */
+function movable(box, was, now) {
+    if (box.kind === 'inline')
+        return false;
+    if (transformed(was) === transformed(now))
+        return true;
+    if (was.position === 'static')
+        return false;
+    if (typeof was.zIndex !== 'number' || typeof now.zIndex !== 'number') {
+        return false;
+    }
+    const stack = [...box.children];
+    while (stack.length) {
+        const at = stack.pop();
+        if (at.style.position === 'fixed')
             return false;
-        ink = true;
+        for (const child of at.children)
+            stack.push(child);
     }
-    return ink ? true : null;
+    return true;
+}
+/** Where a box draws, in document coordinates: its ink bounds, or for an
+ *  inline box or a run of text, which are drawn on their block's lines and
+ *  have none of their own, the block's. */
+function inkOf(box) {
+    let at = box;
+    while (at && (at.kind === 'text' || at.kind === 'break' || !hasRect(at))) {
+        at = at.parent;
+    }
+    if (!at || at.boundsY === Infinity)
+        return null;
+    if (!(at.boundsWidth > 0 && at.boundsHeight > 0))
+        return null;
+    return {
+        x: at.boundsX,
+        y: at.boundsY,
+        width: at.boundsWidth,
+        height: at.boundsHeight,
+    };
 }
 /** Structural equality for a computed value: a number, a string, or the
  *  plain objects and arrays a length or a shadow list is. */