@react-x11/components 0.11.0 → 0.13.0

package/src/html/node.ts

@@ -50,8 +50,14 @@ import type { Element } from 'domhandler';
 import { codePointAtOffset, codeUnitOffsets } from '../internal/text.js';
 import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
 import type { Document } from './dom.js';
-import { Cascade } from './css/cascade.js';
-import type { MetricFace } from './css/cascade.js';
+import {
+  Cascade,
+  HOVER_FOLLOWED,
+  HOVER_PSEUDO_NONE,
+  HOVER_PSEUDO_OTHER,
+  HOVER_UNTOUCHED,
+} from './css/cascade.js';
+import type { HoverTouch, KeptStyles, MetricFace } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import type { Stylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
@@ -60,8 +66,13 @@ import {
   BOX_RAISES,
   buildBoxes,
   CONTENT_IMAGES,
+  CLEARED_FROM,
+  CUT_BLOCKS,
+  GENERATED_FROM,
+  INLINE_OFFSETS,
   LINE_BOX_RAISES,
   SHIFTED_LINES,
+  TEXT_SHIFTS,
 } from './layout/boxes.js';
 import type {
   Box,
@@ -71,10 +82,11 @@ import type {
   ReplacedKind,
   TextLayoutLike,
 } from './layout/boxes.js';
-import { layoutDocument } from './layout/block.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 type { SurfaceLike } from './surfaces.js';
 import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
 import type { FontsLike } from './layout/inline.js';
 import type { TextRun } from '../richtext/index.js';
@@ -88,12 +100,19 @@ import {
 import { lineBands as bandsFor } from '../richtext/runs.js';
 import {
   clipsOverflow,
+  computePaintBounds,
   containingBlockOf,
+  FIXED_BOXES,
+  fixedToViewport,
+  forgetDecoratedAncestors,
   hasRect,
+  hoistNegative,
   holds,
   holdsAbsolute,
   paintDocument,
   queryChildIndex,
+  selectionRows,
+  stackLayers,
 } from './paint.js';
 import type { PaintContext } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
@@ -221,6 +240,8 @@ export class HtmlViewNode extends Node {
   private _sheetsRead: SheetsRead | null = null;
   /** Blurred shadows, drawn once each. */
   private _shadowCache: SurfaceCache | null = null;
+  /** Whether the backend was found to have no offscreen surface. */
+  private _noSurface = false;
   private _cascade: Cascade | null = null;
   private _tree: BoxTree | null = null;
   /** The faces `_warmFaces` has asked the font matcher for, and of which
@@ -236,6 +257,8 @@ export class HtmlViewNode extends Node {
    *  that read it (`vw`, `vh`). */
   private _styledWidth = -1;
   private _styledHeight = -1;
+  /** The cascade the box tree's styles were computed by. */
+  private _styledWith: Cascade | null = null;
   private _documentHeight = 0;
   private _documentWidth = 0;
   /** The viewport height the document was last laid out under, and whether
@@ -253,6 +276,20 @@ export class HtmlViewNode extends Node {
    *  the text carries surrogate pairs. null until checked. */
   private _pointsAreUnits: boolean | null = null;
   private _hovered: Element[] = [];
+  /** Where the pointer last moved to, in logical window pixels, while it
+   *  is over the element (`defaultMouseMove`). */
+  private _pointerAt: { x: number; y: number } | null = null;
+  /** A hover held until the content under a still pointer stops moving:
+   *  the timer, and when the content last moved (`_holdHover`). */
+  private _heldHover: unknown = null;
+  private _heldSince = 0;
+  /**
+   * The elements the build of the boxes that is due has to style again,
+   * where every change asking for it said which (`_invalidate`), and null
+   * where any element's style may have changed — a new cascade, a viewport
+   * a `vw` reads, a face that arrived.
+   */
+  private _restyleOnly: Set<Element> | null = null;
   private _scriptsSeen = new WeakSet<Element>();
   private _controls: ControlRect[] = [];
   private _reportedDomRevision = -1;
@@ -350,6 +387,7 @@ export class HtmlViewNode extends Node {
             controlPadY: look.controlPadY * s,
             controlBorder: look.controlBorder * s,
             controlRadius: look.controlRadius * s,
+            controlFontSize: (look.controlFontSize ?? look.fontSize) * s,
           };
     this._deviceLookFor = look;
     this._deviceLookAt = s;
@@ -359,7 +397,26 @@ export class HtmlViewNode extends Node {
 
   // --- the pipeline ---------------------------------------------------------
 
-  private _invalidate(stale: Stale): void {
+  /**
+   * `restyle` with `Stale.Boxes`: the elements whose styles the change
+   * could have touched, where that is all of it — a pointer move's reach
+   * (`_hoverReach`). The build it asks for keeps every other element's
+   * (`_restyleOnly`).
+   */
+  private _invalidate(
+    stale: Stale,
+    restyle: ReadonlySet<Element> | null = null,
+  ): void {
+    if (stale >= Stale.Boxes) {
+      const only = stale === Stale.Boxes ? restyle : null;
+      if (this._stale < Stale.Boxes) {
+        this._restyleOnly = only ? new Set(only) : null;
+      } else if (this._restyleOnly && only) {
+        for (const el of only) this._restyleOnly.add(el);
+      } else {
+        this._restyleOnly = null;
+      }
+    }
     if (stale > this._stale) this._stale = stale;
     if (stale >= Stale.Layout) this.invalidateMeasure('content');
     this.invalidate(stale >= Stale.Layout, this, 'props');
@@ -440,13 +497,15 @@ export class HtmlViewNode extends Node {
    */
   private _requestBackgrounds(tree: BoxTree): void {
     for (const box of tree.backgrounds) {
-      if (!box.el) continue;
+      // 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;
@@ -454,9 +513,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
@@ -557,7 +622,10 @@ export class HtmlViewNode extends Node {
       kept.cascade.viewportHeight = this._viewportHeight();
       faces = kept.faces;
     } else {
-      const sheets: Stylesheet[] = [uaStylesheet(look)];
+      // the UA sheet's `px` are CSS pixels, which the cascade scales like an
+      // author's, so it is written from the look in CSS pixels: from the
+      // device one, a control's size and a button's chrome were doubled at 2x
+      const sheets: Stylesheet[] = [uaStylesheet(props.look)];
       const imports: ImportRead[][] = [];
       faces = [];
       let order = 0;
@@ -612,10 +680,17 @@ export class HtmlViewNode extends Node {
     // The faces this width and scheme declare: a `@font-face` may sit in a
     // `@media` block like any rule.
     const cssWidth = width / this._scale;
+    const cssHeight = this._viewportHeight() / this._scale;
     this._webFonts.setFallback(look.fontFamily);
     this._webFonts.setFaces(
       faces.filter((f) =>
-        mediaMatches(f.rule.media, cssWidth, look.colorScheme),
+        mediaMatches(
+          f.rule.media,
+          cssWidth,
+          look.colorScheme,
+          cssHeight,
+          this._scale,
+        ),
       ),
     );
     this._cascade.setPointer({
@@ -705,6 +780,55 @@ 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.
+   */
+  private _viewport(): Rect | null {
+    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 as { isScroller?: () => boolean };
+      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.
+   */
+  override viewportFixedRects(): Rect[] | null {
+    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: Rect[] = [];
+    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;
+  }
+
   private _viewportHeight(): number {
     // 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
@@ -823,15 +947,21 @@ export class HtmlViewNode extends Node {
     const wasWidth = this._documentWidth;
     const wasHeight = this._documentHeight;
 
+    // the styles a build may keep (`_restyleOnly`), unless something
+    // found below changes them all
+    let restyleOnly = this._stale === Stale.Boxes ? this._restyleOnly : null;
+    this._restyleOnly = null;
     if (this._stale >= Stale.Style || !this._cascade) {
       this._restyle(target);
       this._stale = Math.max(this._stale, Stale.Boxes) as Stale;
+      restyleOnly = null;
     } else if (this._cascade.mediaBand(target) !== this._mediaBand) {
       // A resize that crossed a `@media` breakpoint is the one resize that
       // does have to restyle. Knowing which resizes those are is why the
       // breakpoints are collected at parse time.
       this._restyle(target);
       this._stale = Math.max(this._stale, Stale.Boxes) as Stale;
+      restyleOnly = null;
     }
 
     const cascade = this._cascade;
@@ -843,18 +973,27 @@ export class HtmlViewNode extends Node {
     // 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))
+      (cascade.readsViewportWidth && this._styledWidth !== target) ||
+      (cascade.readsViewportHeight && this._styledHeight !== viewport)
     ) {
-      this._stale = Stale.Boxes;
+      if (this._stale < Stale.Boxes) this._stale = Stale.Boxes;
+      restyleOnly = null;
     }
 
     if (this._stale >= Stale.Boxes || !this._tree) {
       const look = this._deviceLook();
+      // A build a pointer move asked for styles the elements the move
+      // reached, and takes every other element's from the tree it replaces
+      // (`Cascade.beginSharing`): the first build only, since a second is
+      // one the first found a reason for — a face, an image's size.
+      let kept: KeptStyles | null =
+        restyleOnly && this._tree && this._styledWith === cascade
+          ? { styles: this._tree.styles, restyle: restyleOnly }
+          : null;
       const build = () =>
         buildBoxes(this._source.document, {
           cascade,
+          kept,
           scale: this._scale,
           imageSize: (el) => this._resources.imageSize(imageUrlOf(el) ?? ''),
           urlSize: (url) => this._resources.imageSize(url),
@@ -862,6 +1001,8 @@ export class HtmlViewNode extends Node {
             measureControl(el, kind, style, this._fonts(), look),
         });
       this._tree = build();
+      kept = null;
+      this._styledWith = cascade;
       this._styledWidth = target;
       this._styledHeight = viewport;
       this._requestBackgrounds(this._tree);
@@ -940,6 +1081,7 @@ export class HtmlViewNode extends Node {
             y: r.y / s,
             width: r.width / s,
             height: r.height / s,
+            fontSize: r.fontSize / s,
             ...(r.bare && {
               bare: {
                 ...r.bare,
@@ -1042,6 +1184,7 @@ export class HtmlViewNode extends Node {
   }
 
   override destroySubtree(): void {
+    this._dropHeldHover();
     this._resources.destroy();
     this._webFonts.destroy();
     this._source.destroy();
@@ -1139,7 +1282,8 @@ export class HtmlViewNode extends Node {
     const to = this._toUnits(end);
     if (to <= from) return [];
     const out: Rect[] = [];
-    collectBands(tree.root, from, to, this.abs.x, this.abs.y, out);
+    // the rows the highlight paints, over glyphs taller than their line
+    collectBands(tree.root, from, to, this.abs.x, this.abs.y, out, true);
     return out;
   }
 
@@ -1196,39 +1340,54 @@ export class HtmlViewNode extends Node {
       rect = { x: box.x, y: box.y, width: box.width, height: box.height };
     } else {
       const bands: Rect[] = [];
-      // 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 | null = 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;
+        // from where clearance moved it down from, as Blink's line around
+        // a block in an inline box starts there: the Zen Garden's 214
+        // makes its content an inline box of floats and a footer that
+        // clears them, and Chrome measures it from the floats' top
+        const top = Math.min(block.y, CLEARED_FROM.get(block) ?? block.y);
+        bands.push({
+          x: around.contentX,
+          y: top,
+          width: around.contentWidth,
+          height: block.y + block.height - top,
+        });
       }
       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
@@ -1251,7 +1410,20 @@ export class HtmlViewNode extends Node {
     const tree = this._tree;
     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. */
+  private _fixedShift(): { x: number; y: number } | null {
+    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,
+    };
   }
 
   /**
@@ -1268,7 +1440,13 @@ export class HtmlViewNode extends Node {
     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 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)) return cursor;
@@ -1282,6 +1460,7 @@ export class HtmlViewNode extends Node {
    * contains a `:hover` rule.
    */
   setHover(x: number, y: number): boolean {
+    this._dropHeldHover();
     const cascade = this._cascade;
     if (!cascade || !cascade.hoverSensitive) return false;
     const chain: Element[] = [];
@@ -1299,6 +1478,7 @@ export class HtmlViewNode extends Node {
   }
 
   clearHover(): boolean {
+    this._dropHeldHover();
     if (!this._hovered.length) return false;
     const was = this._hovered;
     this._hovered = [];
@@ -1307,97 +1487,151 @@ export class HtmlViewNode extends Node {
     return true;
   }
 
-  /** The hovered chain moved: restyle where it did, or the document. */
+  /**
+   * The hovered chain moved: nothing, where no rule that tests the pointer
+   * names an element it moved over; a restyle where they are, where all it
+   * changed is ink (`_hoverInPlace`); and otherwise the boxes built again,
+   * with the styles of every element the move did not reach kept.
+   */
   private _restyleHover(was: readonly Element[], now: readonly Element[]) {
-    const done = this._hoverInPlace(was, now);
-    if (done === 'painted') this.invalidate(false, this, 'props');
-    else if (done === false) this._invalidate(Stale.Boxes);
+    const reach = this._hoverReach(was, now);
+    if (reach !== null) {
+      if (!reach.size) return;
+      if (this._hoverInPlace(reach, was)) return;
+    }
+    this._invalidate(Stale.Boxes, reach);
   }
 
   /**
-   * A pointer move restyled where it happened, when all it changed is ink.
+   * The elements whose styles a move of the hovered chain can change, or
+   * null where that cannot be said (`Cascade.hoverLocal`).
    *
-   * 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.
+   * 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 is in play;
+   * and the elements a `:has()` testing the pointer may flip, which are
+   * around the ones that changed. A move between two paragraphs under
+   * `a:hover` reaches nothing.
    */
-  private _hoverInPlace(
+  private _hoverReach(
     was: readonly Element[],
     now: readonly Element[],
-  ): 'none' | 'painted' | false {
+  ): Set<Element> | null {
     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;
-
+    if (!cascade || !cascade.hoverLocal) return null;
     const before = new Set(was);
     const after = new Set(now);
-    const roots: Element[] = [];
-    // 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 roots = new Map<Element, HoverTouch>();
     const flipped = (el: Element, other: Set<Element>): void => {
       if (other.has(el)) return;
-      if (cascade.hoverTouches(el)) roots.push(el);
+      const touch = cascade.hoverTouches(el);
+      if (touch > (roots.get(el) ?? HOVER_UNTOUCHED)) roots.set(el, touch);
     };
     for (const el of was) flipped(el, after);
     for (const el of now) flipped(el, before);
+    // the chains are ancestor chains, so the deepest that changed on each
+    // side is where a `:has()` is looked for from
     const deepest = (chain: readonly Element[], other: Set<Element>) => {
       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
+    // the roots' subtrees, which inherit from them and a descendant
+    // combinator reaches, and their later siblings' too where a sibling
+    // combinator follows the compound that tests the pointer
     const reach = new Set<Element>();
-    const collect = (el: Element): boolean => {
+    const collect = (el: Element): void => {
       const stack: Element[] = [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 (const [root, touch] of roots) {
+      collect(root);
+      if (touch !== HOVER_FOLLOWED) continue;
       for (let s = root.nextSibling; s; s = s.nextSibling) {
-        if (isElement(s) && !collect(s)) return false;
+        if (isElement(s)) collect(s);
       }
     }
+    return reach;
+  }
+
+  /**
+   * 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:
+   *
+   *  - The elements the move reached (`_hoverReach`) are styled again from
+   *    their parents — the ones a rule testing the pointer answers
+   *    differently for, or whose parent's style changed; the rest, most of
+   *    a hovered card or table row, have the styles they had
+   *    (`Cascade.pointerChanged`). Where anything but ink differs
+   *    (`PAINT_ONLY`), this is not the move to take.
+   *  - The boxes take their new styles: an element's own, the text in it,
+   *    the anonymous boxes the fix-up made around what is in it, and its
+   *    `::before` and `::after`, styled again by their own rules. A box
+   *    whose style is derived some other way — a marker, a first letter, a
+   *    control — is not one to restyle here.
+   *  - 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, and nothing is looked
+   * at but the blocks the restyled elements are in (`_blocksOf`): a move
+   * costs what it changed, in a document of any length. True where it was
+   * restyled here, or had nothing to restyle; false where the boxes have to
+   * be built again.
+   */
+  private _hoverInPlace(
+    reach: ReadonlySet<Element>,
+    was: readonly Element[],
+  ): boolean {
+    const cascade = this._cascade;
+    const tree = this._tree;
+    const layouts = this._layouts;
+    if (!cascade || !tree || !layouts) return false;
+    if (this._stale !== Stale.Nothing || this._laidOutWidth < 0) return false;
+    if (reach.size > HOVER_RESTYLE_LIMIT) return false;
+    // a first line's, a first letter's and a marker's styles are layout's
+    const pseudoRules = cascade.hoverPseudo;
+    if (pseudoRules === HOVER_PSEUDO_OTHER) return false;
+
+    // whether the rules that test the pointer answer differently for an
+    // element than they did before the move
+    const before = { hovered: new Set(was), active: EMPTY_SET };
+    const flips = new Map<Element, boolean>();
+    const flipped = (el: Element): boolean => {
+      let flip = flips.get(el);
+      if (flip === undefined) {
+        flip = cascade.pointerChanged(el, before);
+        flips.set(el, flip);
+      }
+      return flip;
+    };
 
     // styled again from their parents, a parent first
     const fresh = new Map<Element, ComputedStyle>();
     const changed = new Map<Element, ComputedStyle>();
+    // the ones whose ink is what it was: only their custom properties
+    // changed, which the elements under them read
+    const quiet = new Set<Element>();
     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<Element>();
     const styleOf = (el: Element): ComputedStyle | null => {
       const kept = tree.styles.get(el);
       if (!kept) return null;
@@ -1412,43 +1646,123 @@ export class HtmlViewNode extends Node {
         refused = true;
         return null;
       }
-      const style = cascade.styleFor(el, parentStyle, kept.inFlex);
+      const parentWas = parent ? tree.styles.get(parent)!.style : parentStyle;
+      let style = kept.style;
+      if (parentStyle !== parentWas || flipped(el)) {
+        const made = cascade.styleFor(el, parentStyle, kept.inFlex);
+        const diff = hoverChange(kept.style, made);
+        if (diff === false) refused = true;
+        else if (diff) {
+          style = made;
+          changed.set(el, made);
+          if (!diff.ink) quiet.add(el);
+          if (diff.reach) reaches = true;
+          if (diff.order) reorders = true;
+          if (diff.move) moving.add(el);
+        }
+      }
       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';
+    if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE) return true;
     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
+    // The boxes, each under its parent: what a box takes depends on what
+    // the box it is in took.
     const fonts = layouts.fonts;
+    const blocks = this._blocksOf(
+      tree,
+      pseudoRules === HOVER_PSEUDO_NONE ? changed.keys() : reach,
+    );
     const restyled: [Box, ComputedStyle][] = [];
+    const next = new Map<Box, ComputedStyle>();
+    /** The restyled boxes whose ink changed, to repaint. */
+    const inked = new Set<Box>();
+    /** The `::before` and `::after` boxes found, by element: 1 and 2. */
+    const generated = new Map<Element, number>();
     const redecorated: [Box, Box['decoration']][] = [];
-    const walk: Box[] = [tree.root];
+    const walk: Box[] = blocks.slice();
     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);
+      const parent = box.parent;
+      const above = parent ? next.get(parent) : undefined;
+      let style: ComputedStyle | undefined;
+      let ink = !!parent && inked.has(parent);
+      if (box.kind === 'text' || box.kind === 'break') {
+        // Text is set in the style of the box it is in — an element's, a
+        // pseudo-element's — or of its element, where the fix-up put an
+        // anonymous box around it.
+        const el = box.el;
+        if (parent && box.style === parent.style) style = above;
+        else if (el && box.style === tree.styles.get(el)?.style) {
+          style = changed.get(el);
+          ink = !quiet.has(el);
+        } else if (above || (el && changed.has(el))) return false;
+      } else if (box.pseudo === 'before' || box.pseudo === 'after') {
+        const from = GENERATED_FROM.get(box);
+        if (!from) {
+          // an inside marker, made of its item's style and its own rules
+          if (above) return false;
+          continue;
+        }
+        if (!reach.has(from)) continue;
+        generated.set(
+          from,
+          (generated.get(from) ?? 0) | (box.pseudo === 'before' ? 1 : 2),
+        );
+        const inherits = fresh.get(from);
+        const kept = tree.styles.get(from)?.style;
+        if (!inherits || !kept) return false;
+        if (inherits === kept && !flipped(from)) continue;
+        // styled by its own rules over its element's style, as the builder
+        // styled it, in its element's box
+        if (!parent || parent.style !== kept || box.marker) return false;
+        const made = cascade.pseudoStyleFor(from, box.pseudo, inherits);
+        if (!made || made.display === 'none') return false;
+        const diff = hoverChange(box.style, made);
+        if (diff === false) return false;
+        if (!diff) continue;
+        if (diff.reach || diff.order || diff.move) return false;
+        style = made;
+        ink = diff.ink;
+      } else if (box.pseudo) {
+        // a first letter, styled from the box its letter is in
+        if (above) return false;
+      } else if (box.el) {
+        const el = box.el;
+        style = changed.get(el);
+        if (!style) continue;
+        const kept = tree.styles.get(el)!.style;
+        // a style 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.style !== kept) return false;
+        if (box.marker || WIDGETS.has(box.replaced)) return false;
+        if (moving.has(el) && !movable(box, kept, style)) return false;
+        ink = !quiet.has(el);
+      } else if (above) {
+        // An anonymous box takes what its parent's style passes on
+        // (`anonymousStyles`), so it takes that of the new one: the text of
+        // a link made a flex row is in one, and takes the link's colour.
+        if (GENERATED_FROM.has(box)) return false;
+        const display = box.style.display;
+        if (tree.anonymous(parent!.style, display) !== box.style) return false;
+        style = tree.anonymous(above, display);
+      }
       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;
+      next.set(box, style);
       restyled.push([box, style]);
+      if (ink) inked.add(box);
       if (box.kind === 'inline') {
         const decoration = inlineDecoration(fonts, box, style);
         if ((decoration === null) !== (box.decoration === null)) {
@@ -1458,12 +1772,28 @@ export class HtmlViewNode extends Node {
         if (decoration !== box.decoration) redecorated.push([box, decoration]);
       }
     }
+    // a `::before` or an `::after` a rule that tests the pointer now gives
+    // an element is a box to build
+    if (pseudoRules !== HOVER_PSEUDO_NONE) {
+      for (const el of reach) {
+        if (!flipped(el)) continue;
+        const style = fresh.get(el);
+        if (!style) continue;
+        const has = generated.get(el) ?? 0;
+        for (const [which, bit] of GENERATED_BITS) {
+          if (has & bit) continue;
+          const made = cascade.pseudoStyleFor(el, which, style);
+          if (made && made.display !== 'none') return false;
+        }
+      }
+    }
+    if (!restyled.length) return true;
 
-    // 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
+    // the text: each layout holding a run of a restyled box's, made again
+    // with its new ink, where it comes out the same shape
     const relaid = new Map<TextLayoutLike, TextLayoutLike | null>();
     const texts: LineText[] = [];
-    walk.push(tree.root);
+    if (inked.size) for (const block of blocks) walk.push(block);
     while (walk.length) {
       const box = walk.pop()!;
       for (const child of box.children) walk.push(child);
@@ -1472,24 +1802,150 @@ export class HtmlViewNode extends Node {
         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);
+          const again = reinked(text, layouts, next);
+          if (again === false) return false;
+          relaid.set(text.layout, again);
         }
       }
     }
 
+    // what each box drew before, to be repainted with what it draws after
+    const inks: Rect[] = [];
+    for (const box of inked) {
+      const ink = inkOf(box);
+      if (ink) inks.push(ink);
+    }
+
     // and only now, all of it
-    for (const [box, style] of restyled) box.style = style;
-    for (const [box, decoration] of redecorated) box.decoration = decoration;
+    const moved: [Box, ComputedStyle][] = [];
+    for (const [box, style] of restyled) {
+      const was = box.style;
+      box.style = style;
+      if (box.el && moving.has(box.el) && box.kind !== 'text') {
+        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) text.layout = next;
+      const again = relaid.get(text.layout);
+      if (again) text.layout = again;
     }
     for (const [el, style] of changed) {
       tree.styles.set(el, { style, inFlex: tree.styles.get(el)!.inFlex });
     }
-    return 'painted';
+    // 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 true;
+    }
+    for (const box of inked) {
+      const ink = inkOf(box);
+      if (ink) inks.push(ink);
+    }
+    this._repaintInk(inks);
+    return true;
+  }
+
+  /** An element's first box in document order, for the tree it was asked
+   *  of: made on the first move over a tree, which is one walk of it. */
+  private _firstBoxes: { tree: BoxTree; of: Map<Element, Box> } | null = null;
+
+  /**
+   * The blocks a restyle of `changed` has to look in: for each element, the
+   * box its text is set in the lines of — the nearest box around its first
+   * that is not an inline one — which holds every box that takes its style
+   * from it, the pieces a block in it broke it into among them
+   * (`breakAround`). One that is inside another is left to it.
+   */
+  private _blocksOf(tree: BoxTree, changed: Iterable<Element>): Box[] {
+    let index = this._firstBoxes;
+    if (index?.tree !== tree) {
+      const of = new Map<Element, Box>();
+      const stack: Box[] = [tree.root];
+      while (stack.length) {
+        const box = stack.pop()!;
+        if (box.el && !of.has(box.el)) of.set(box.el, box);
+        for (let i = box.children.length - 1; i >= 0; i -= 1) {
+          stack.push(box.children[i]);
+        }
+      }
+      index = this._firstBoxes = { tree, of };
+    }
+    const blocks = new Set<Box>();
+    for (const el of changed) {
+      let box: Box | null = index.of.get(el) ?? null;
+      while (
+        box?.parent &&
+        (box.kind === 'inline' || box.kind === 'text' || box.kind === 'break')
+      ) {
+        box = box.parent;
+      }
+      if (box) blocks.add(box);
+    }
+    const out: Box[] = [];
+    for (const block of blocks) {
+      let inside = false;
+      for (let at = block.parent; at && !inside; at = at.parent) {
+        inside = blocks.has(at);
+      }
+      if (!inside) out.push(block);
+    }
+    return out;
+  }
+
+  /**
+   * 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.
+   */
+  private _repaintInk(inks: Rect[]): void {
+    if (!inks.length) return;
+    const x = this.abs.x;
+    const y = this.abs.y;
+    const place = (r: Rect): Rect => ({
+      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. */
@@ -1527,20 +1983,65 @@ export class HtmlViewNode extends Node {
   // `:hover` is wired at the element rather than through React: the cascade
   // already knows whether any rule in the document tests it, `setHover`
   // returns without work when none does, and a document that does use it
-  // re-styles only when the hovered chain actually changed. The restyle is
-  // still document-wide — narrowing it to the affected subtree is the
-  // phase-2 item the PRD records.
+  // re-styles only when the hovered chain actually changed, and then only
+  // the elements the change reached (`_restyleHover`).
+  //
+  // **A hover waits for a scroll to stop.** Core asks again what is under a
+  // pointer that stayed where it was after every frame that laid out —
+  // hover follows content, react-x11#793 — and says so with a move to the
+  // point the pointer is already at. While a document scrolls that is every
+  // frame, each with something else under the pointer: a restyle a frame
+  // at best, and where a hover moves something, the boxes built again a
+  // frame, which took a page scrolled under a parked pointer from 52 frames
+  // a second to 4. A browser holds its hover until the scroll is over, for
+  // the same reason; so does this, for `HOVER_REST_MS` after the content
+  // last moved. What was hovered stays hovered as it scrolls away, as it
+  // does there. A move of the pointer itself is answered at once.
 
   override defaultMouseMove(ev: X11MouseEvent): void {
     super.defaultMouseMove?.(ev);
+    const at = this._pointerAt;
+    if (at !== null && at.x === ev.x && at.y === ev.y) {
+      this._holdHover();
+      return;
+    }
+    this._pointerAt = { x: ev.x, y: ev.y };
     this.setHover(ev.x, ev.y);
   }
 
   override defaultMouseLeave(ev: X11MouseEvent): void {
     super.defaultMouseLeave?.(ev);
+    this._pointerAt = null;
     this.clearHover();
   }
 
+  /** The content moved under the pointer: the hover is asked for once it
+   *  has been still for `HOVER_REST_MS`. One timer a wait, put off by
+   *  being armed again when it finds the content moved since. */
+  private _holdHover(): void {
+    if (!this._cascade?.hoverSensitive) return;
+    this._heldSince = hoverClock.now();
+    if (this._heldHover !== null) return;
+    const rest = (): void => {
+      this._heldHover = null;
+      const at = this._pointerAt;
+      if (!at || this.destroyed) return;
+      const left = this._heldSince + HOVER_REST_MS - hoverClock.now();
+      if (left > 0) {
+        this._heldHover = hoverClock.arm(rest, left);
+        return;
+      }
+      this.setHover(at.x, at.y);
+    };
+    this._heldHover = hoverClock.arm(rest, HOVER_REST_MS);
+  }
+
+  private _dropHeldHover(): void {
+    if (this._heldHover === null) return;
+    hoverClock.disarm(this._heldHover);
+    this._heldHover = null;
+  }
+
   // --- paint ----------------------------------------------------------------
 
   override paint(ctx: Context2D): void {
@@ -1570,6 +2071,15 @@ export class HtmlViewNode extends Node {
     }
   }
 
+  /** A surface for the painter to draw a masked element on, asked of the
+   *  backend until it is found to have none. */
+  private _surface(width: number, height: number): SurfaceLike | null {
+    if (this._noSurface) return null;
+    const surface = newSurface(this.app, width, height);
+    if (!surface) this._noSurface = true;
+    return surface;
+  }
+
   private _paint(
     ctx: Context2D,
     tree: BoxTree,
@@ -1582,6 +2092,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
@@ -1597,6 +2108,7 @@ 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,
@@ -1610,6 +2122,30 @@ export class HtmlViewNode extends Node {
 
 const EMPTY_SET: ReadonlySet<Element> = 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: BoxTree): boolean {
+  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;
+}
+
 /** A sheet as the restyle reads it: its text, the encoding it was decoded
  *  from, the element that brought it, and what its URLs resolve against. */
 interface SheetText {
@@ -1656,6 +2192,94 @@ function boxFor(root: Box, element: Element): Box | null {
   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: Box, first: Box): Box[] {
+  // the first piece is cut at its end where there are more
+  if (first.kind !== 'inline' || !(first.cut & 2)) return [first];
+  const pieces: Box[] = [];
+  const stack: Box[] = [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,
+  box: Box,
+  fonts: FontsLike | null,
+  out: Rect[],
+): void {
+  // 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: Rect[] = [];
+  let block: Box | null = 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: Box): { x: number; y: number } {
+  let x = 0;
+  let y = 0;
+  for (let at: Box | null = 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: Box, target: Box): number {
@@ -1715,6 +2339,9 @@ function sameRects(a: ControlRect[], b: ControlRect[]): boolean {
       p.y !== q.y ||
       p.width !== q.width ||
       p.height !== q.height ||
+      p.fontFamily !== q.fontFamily ||
+      p.fontSize !== q.fontSize ||
+      p.opacity !== q.opacity ||
       !sameBare(p.bare, q.bare)
     ) {
       return false;
@@ -1732,7 +2359,8 @@ function sameBare(a?: BareField, b?: BareField): boolean {
     a.height === b.height &&
     a.color === b.color &&
     a.fontFamily === b.fontFamily &&
-    a.fontSize === b.fontSize
+    a.fontSize === b.fontSize &&
+    a.chevron === b.chevron
   );
 }
 
@@ -2004,6 +2632,12 @@ function lineBands(
   dx: number,
   dy: number,
   out: Rect[],
+  /** 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,
+  /** The rows a highlight covers (`selectionRows`) rather than the line's:
+   *  past it where the glyphs are taller than the line. */
+  ink = false,
 ): void {
   // First line whose text can reach `from`, by binary search over the
   // sorted text starts; stop at the first line past `to`.
@@ -2025,6 +2659,16 @@ function lineBands(
         const b = Math.min(to, text.textEnd);
         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);
+        const rows = ink
+          ? selectionRows(line, text, natural)
+          : { y: line.y, height: line.height };
         for (const band of bandsFor(
           text.layout,
           natural,
@@ -2032,11 +2676,29 @@ function lineBands(
           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 + rows.y,
+            width: right - left,
+            height: rows.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,
-            y: dy + line.y,
-            width: band.width,
-            height: line.height,
+            x: dx + space.x + text.drawX - moved,
+            y: dy + rows.y,
+            width: space.width,
+            height: rows.height,
           });
         }
       }
@@ -2044,6 +2706,21 @@ function lineBands(
   }
 }
 
+/** 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: LineBox,
+  text: LineText,
+  natural: { x: number; width: number },
+): boolean {
+  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: Box,
   from: number,
@@ -2051,14 +2728,15 @@ function collectBands(
   dx: number,
   dy: number,
   out: Rect[],
+  ink = false,
 ): void {
   if (box.subtreeTextEnd <= box.subtreeTextStart) return;
   if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to) return;
-  if (box.lines) lineBands(box.lines, from, to, dx, dy, out);
+  if (box.lines) lineBands(box.lines, from, to, dx, dy, out, false, ink);
   // Atomics are ordinary children, reached below.
   for (const child of box.children) {
     if (child.kind === 'text' || child.kind === 'break') continue;
-    collectBands(child, from, to, dx, dy, out);
+    collectBands(child, from, to, dx, dy, out, ink);
   }
 }
 
@@ -2078,6 +2756,10 @@ function deepestAt(
   /** Told whether what was found was found under text: a run's, rather
    *  than a box's. */
   hit?: { text: boolean },
+  /** 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: { x: number; y: number } | null = null,
 ): Element | null {
   const box = tree.root;
   let found: Element | null = box.el;
@@ -2118,10 +2800,31 @@ function deepestAt(
   // 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: Box,
     context: readonly number[],
     clipped: readonly Box[],
+  ): void => {
+    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: Box,
+    context: readonly number[],
+    clipped: readonly Box[],
   ): void => {
     const style = child.style;
     if (
@@ -2240,6 +2943,38 @@ function compareKeys(a: readonly number[], b: readonly number[]): number {
  *  that matches a container reaches everything in it. */
 const HOVER_RESTYLE_LIMIT = 300;
 
+/** How long the content under a still pointer has to have stopped moving
+ *  before the hover is asked for again (`HtmlViewNode._holdHover`): a
+ *  tenth of a second, which is what WebKit waits after a scroll before it
+ *  sends the mouse move that updates its own. */
+const HOVER_REST_MS = 100;
+
+const timers = globalThis as {
+  setTimeout?(fn: () => void, ms: number): unknown;
+  clearTimeout?(id: unknown): void;
+};
+
+/**
+ * The clock a held hover waits on. Through `globalThis` because `src/`
+ * compiles with `types: []`, and unref'd where the runtime allows it: a
+ * timer of a document's must not keep a process alive that is otherwise
+ * done. One object, exported from this module though not from the package,
+ * so a test can hold it and say when the rest is over (`test/held-clock.ts`).
+ */
+export const hoverClock = {
+  now(): number {
+    return Date.now();
+  },
+  arm(step: () => void, ms: number): unknown {
+    const handle = timers.setTimeout?.(step, ms) ?? null;
+    (handle as { unref?(): void } | null)?.unref?.();
+    return handle;
+  },
+  disarm(handle: unknown): void {
+    timers.clearTimeout?.(handle);
+  },
+};
+
 /**
  * The computed properties a pointer move may change in place: ink, which
  * moves nothing. A background colour is drawn inside the box it colours
@@ -2292,16 +3027,135 @@ const FACE_FIELDS = [
 /** 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: ComputedStyle, now: ComputedStyle): boolean | null {
+/** What a restyle in place changed beyond ink: how far a box's ink
+ *  reaches, the order its layer paints in, or where it is. */
+interface HoverChange {
+  /** Whether anything that is drawn changed: false where only the custom
+   *  properties did, which the elements under this one read. */
+  ink: boolean;
+  reach: boolean;
+  order: boolean;
+  move: boolean;
+}
+
+/** An element's `::before` and `::after`, each with its bit in the set
+ *  of the ones a restyle found boxes of (`_hoverInPlace`). */
+const GENERATED_BITS = [
+  ['before', 1],
+  ['after', 2],
+] as const;
+
+/** 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<ReplacedKind>([
+  '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: ComputedStyle,
+  now: ComputedStyle,
+): HoverChange | null | false {
   const a = was as unknown as Record<string, unknown>;
   const b = now as unknown as Record<string, unknown>;
-  let ink = false;
+  let change: HoverChange | null = null;
   for (const key in b) {
-    if (key === 'custom' || sameValue(a[key], b[key])) continue;
-    if (!PAINT_ONLY.has(key)) return false;
-    ink = true;
+    // the sets are shared by what made them (`Cascade._customFor`): one
+    // object where they are the same
+    if (key === 'custom') {
+      if (a[key] !== b[key]) {
+        change ??= { ink: false, reach: false, order: false, move: false };
+      }
+      continue;
+    }
+    if (sameValue(a[key], b[key])) continue;
+    change ??= { ink: true, reach: false, order: false, move: false };
+    change.ink = true;
+    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 ink ? true : null;
+  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: Box, was: ComputedStyle, now: ComputedStyle): boolean {
+  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[] = [...box.children];
+  while (stack.length) {
+    const at = stack.pop()!;
+    if (at.style.position === 'fixed') return false;
+    for (const child of at.children) stack.push(child);
+  }
+  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: Box): Rect | null {
+  let at: Box | null = 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
@@ -2321,16 +3175,9 @@ function sameValue(x: unknown, y: unknown): boolean {
   return true;
 }
 
-/** The element an anonymous box takes its style from: its nearest
- *  ancestor's that has one. */
-function nearestElement(box: Box): Element | null {
-  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
+ * `text`'s layout made again with the ink of the boxes a pointer move
+ * restyled: from the runs it was made from, each of a restyled text box'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),
@@ -2339,19 +3186,16 @@ function nearestElement(box: Box): Element | null {
 function reinked(
   text: LineText,
   layouts: TextLayoutCache,
-  changed: ReadonlyMap<Element, ComputedStyle>,
-  styles: BoxTree['styles'],
+  next: ReadonlyMap<Box, ComputedStyle>,
 ): TextLayoutLike | null | false {
   const spans = text.spans;
-  const ownerAt = (offset: number): Element | null =>
-    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;
+        const box = spans.boxAt?.(run.start);
+        if (!spans.boxAt || (box && next.has(box))) return false;
       }
     }
     return null;
@@ -2362,25 +3206,25 @@ function reinked(
   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 box = length ? spans.boxAt(offset) : null;
+    const style = box ? next.get(box) : undefined;
+    if (box && style) {
+      if (spans.boxAt(offset + length - 1) !== box) return false;
+      const was = runFor(run.text, box.style);
       const now = runFor(run.text, style);
       for (const f of FACE_FIELDS) if (!sameValue(was[f], now[f])) return false;
-      let next: Record<string, unknown> | null = null;
+      let inked: Record<string, unknown> | null = 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];
+        inked ??= { ...run };
+        if (now[f] === undefined) delete inked[f];
+        else inked[f] = now[f];
       }
-      if (next) {
+      if (inked) {
         runs ??= content.slice();
-        runs[i] = next as unknown as TextRun;
+        runs[i] = inked as unknown as TextRun;
       }
     }
     offset += length;