@react-x11/components 0.10.0 → 0.12.0

package/src/html/node.ts

@@ -51,23 +51,36 @@ 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 { mediaMatches, parseStylesheet } from './css/parse.js';
 import type { Stylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
 import type { ComputedStyle, RootLook } from './css/style.js';
-import { buildBoxes, CONTENT_IMAGES } from './layout/boxes.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 type {
   Box,
   BoxTree,
+  LineBox,
   LineText,
   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 { inlineDecoration, runFor } from './layout/inline.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';
 // Through the inline module rather than a second cache: the offsets table for
@@ -80,12 +93,18 @@ import {
 import { lineBands as bandsFor } from '../richtext/runs.js';
 import {
   clipsOverflow,
+  computePaintBounds,
   containingBlockOf,
+  FIXED_BOXES,
+  fixedToViewport,
+  forgetDecoratedAncestors,
   hasRect,
+  hoistNegative,
   holds,
   holdsAbsolute,
   paintDocument,
   queryChildIndex,
+  stackLayers,
 } from './paint.js';
 import type { PaintContext } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
@@ -213,6 +232,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
@@ -432,13 +453,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;
@@ -446,9 +469,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
@@ -583,9 +612,9 @@ export class HtmlViewNode extends Node {
         width,
         this._viewportHeight(),
         this._scale,
-        fonts ? (family, size) => xHeightOf(fonts, family, size) : null,
-        fonts ? (family, size) => zeroWidthOf(fonts, family, size) : null,
-        fonts ? (family, size) => normalLineOf(fonts, family, size) : null,
+        fonts ? (face) => xHeightOf(fonts, face) : null,
+        fonts ? (face) => zeroWidthOf(fonts, face) : null,
+        fonts ? (face) => normalLineOf(fonts, face) : null,
         faces.length ? this._webFonts : null,
       );
       this._sheetsRead = {
@@ -697,6 +726,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
@@ -1188,18 +1266,49 @@ export class HtmlViewNode extends Node {
       rect = { x: box.x, y: box.y, width: box.width, height: box.height };
     } else {
       const bands: Rect[] = [];
-      if (box.subtreeTextEnd > box.subtreeTextStart) {
-        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);
+      }
+      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,
+        });
       }
-      if (box.kind === 'inline') fragmentReach(box, bands);
       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
@@ -1222,7 +1331,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,
+    };
   }
 
   /**
@@ -1239,7 +1361,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;
@@ -1280,9 +1408,8 @@ export class HtmlViewNode extends Node {
 
   /** The hovered chain moved: restyle where it did, or the document. */
   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);
+    // a restyle in place names what it repainted (`_hoverInPlace`)
+    if (this._hoverInPlace(was, now) === false) this._invalidate(Stale.Boxes);
   }
 
   /**
@@ -1369,6 +1496,11 @@ export class HtmlViewNode extends Node {
     const fresh = new Map<Element, ComputedStyle>();
     const changed = new Map<Element, ComputedStyle>();
     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;
@@ -1385,9 +1517,14 @@ 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) changed.set(el, style);
+      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) {
@@ -1416,9 +1553,12 @@ export class HtmlViewNode extends Node {
       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
+      // 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') return false;
+      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') {
         const decoration = inlineDecoration(fonts, box, style);
@@ -1450,9 +1590,28 @@ export class HtmlViewNode extends Node {
       }
     }
 
+    // what each box drew before, to be repainted with what it draws after
+    const inks: Rect[] = [];
+    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) 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 (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) text.layout = next;
@@ -1460,9 +1619,67 @@ 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.
+   */
+  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. */
   get document(): Document {
     return this._source.document;
@@ -1541,6 +1758,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,
@@ -1553,6 +1779,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
@@ -1568,6 +1795,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,
@@ -1581,6 +1809,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 {
@@ -1627,6 +1879,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 {
@@ -1686,6 +2026,7 @@ function sameRects(a: ControlRect[], b: ControlRect[]): boolean {
       p.y !== q.y ||
       p.width !== q.width ||
       p.height !== q.height ||
+      p.opacity !== q.opacity ||
       !sameBare(p.bare, q.bare)
     ) {
       return false;
@@ -1703,7 +2044,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
   );
 }
 
@@ -1936,56 +2278,139 @@ function fragmentReach(box: Box, out: Rect[]): void {
   }
 }
 
-function collectBands(
-  box: Box,
+/**
+ * An inline element's bands made as tall as its fragments' border boxes,
+ * as CSSOM View takes an inline box's client rects (6.1): its font's
+ * content area about its own baseline, with the padding and the border
+ * above and below it, which take no room on the line (CSS 2.1 10.6.1) and
+ * which paint draws the background over (`paintInlineBoxes`). A band is a
+ * line's height across until then: a link padded 10px below measured as
+ * tall as its line and no taller.
+ */
+function fragmentHeights(box: Box, bands: Rect[], fonts: FontsLike): void {
+  let block = box.parent;
+  while (block && !block.lines) block = block.parent;
+  if (!block?.lines?.length) return;
+  const face = faceExtentOf(fonts, box.style);
+  const byTop = new Map<number, LineBox>();
+  for (const line of block.lines) byTop.set(line.y, line);
+  for (let i = 0; i < bands.length; i += 1) {
+    const band = bands[i];
+    const line = byTop.get(band.y);
+    if (!line) continue;
+    // on its own baseline, which `vertical-align` may raise off the line's
+    const raise = SHIFTED_LINES.has(line)
+      ? (LINE_BOX_RAISES.get(line)?.get(box) ?? BOX_RAISES.get(box) ?? 0)
+      : 0;
+    const baseline = line.y + line.baseline - raise;
+    const top = baseline - face.ascent - box.padTop - box.borderTop;
+    const bottom = baseline + face.descent + box.padBottom + box.borderBottom;
+    bands[i] = { x: band.x, y: top, width: band.width, height: bottom - top };
+  }
+}
+
+/** The bands of a text range on one block's own lines. */
+function lineBands(
+  lines: readonly LineBox[],
   from: number,
   to: number,
   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,
 ): void {
-  if (box.subtreeTextEnd <= box.subtreeTextStart) return;
-  if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to) return;
-  if (box.lines) {
-    const lines = box.lines;
-    // 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;
-    let hi = lines.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (lines[mid].textEnd > from) hi = mid;
-      else lo = mid + 1;
-    }
-    for (let i = lo; i < lines.length; i += 1) {
-      const line = lines[i];
-      if (line.textStart >= to) break;
-      if (line.textEnd > from && line.textStart < to) {
-        for (const text of line.texts) {
-          const natural = text.layout.lines[text.layoutLine];
-          if (!natural) continue;
-          const a = Math.max(from, text.textStart);
-          const b = Math.min(to, text.textEnd);
-          if (b <= a) continue;
-          const offsets = layoutOffsetsOf(text.layout);
-          for (const band of bandsFor(
-            text.layout,
-            natural,
-            offsets,
-            layoutOffsetOf(text, a),
-            layoutOffsetOf(text, b, true),
-          )) {
-            out.push({
-              x: dx + band.x + text.drawX,
-              y: dy + line.y,
-              width: band.width,
-              height: line.height,
-            });
+  // 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;
+  let hi = lines.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (lines[mid].textEnd > from) hi = mid;
+    else lo = mid + 1;
+  }
+  for (let i = lo; i < lines.length; i += 1) {
+    const line = lines[i];
+    if (line.textStart >= to) break;
+    if (line.textEnd > from && line.textStart < to) {
+      for (const text of line.texts) {
+        const natural = text.layout.lines[text.layoutLine];
+        if (!natural) continue;
+        const a = Math.max(from, text.textStart);
+        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);
+        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 + space.x + text.drawX - moved,
+            y: dy + line.y,
+            width: space.width,
+            height: line.height,
+          });
         }
       }
     }
   }
+}
+
+/** 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,
+  to: number,
+  dx: number,
+  dy: number,
+  out: Rect[],
+): 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);
   // Atomics are ordinary children, reached below.
   for (const child of box.children) {
     if (child.kind === 'text' || child.kind === 'break') continue;
@@ -2009,6 +2434,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;
@@ -2049,10 +2478,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 (
@@ -2223,16 +2673,116 @@ 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 {
+  reach: boolean;
+  order: boolean;
+  move: boolean;
+}
+
+/** 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;
+    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: 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;
   }
-  return ink ? true : null;
+  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
@@ -2375,45 +2925,42 @@ function ownerOf(boxes: readonly Box[], index: number): Element | null {
 
 export type { ControlRect, ReplacedKind, ResourceRequest, ResourceResult };
 
-/** The advance of a font's "0" at a size, laid out: null where the engine
- *  cannot lay it out. */
-function zeroWidthOf(
-  fonts: FontsLike,
-  family: string,
-  size: number,
-): number | null {
+/** The advance of a face's "0", laid out: null where the engine cannot
+ *  lay it out. */
+function zeroWidthOf(fonts: FontsLike, face: MetricFace): number | null {
+  const { family, size, weight } = face;
+  // a run is upright or slanted, as `inline.ts` sets one
+  const style = face.style === 'normal' ? 'normal' : 'italic';
   try {
-    return fonts.layout([{ text: '0', family, size }], { family, size }, {})
-      .width;
+    const run = { family, size, weight, style } as const;
+    return fonts.layout([{ text: '0', ...run }], run, {}).width;
   } catch {
     return null;
   }
 }
 
-/** A font's own line height at a size, as the engine reports it: null
- *  where it cannot say. */
-function normalLineOf(
-  fonts: FontsLike,
-  family: string,
-  size: number,
-): number | null {
+/** A face's own line height, as the engine reports it: null where it
+ *  cannot say. */
+function normalLineOf(fonts: FontsLike, face: MetricFace): number | null {
+  const { family, size, weight, style } = face;
   try {
-    const line = fonts.match(family, { size }).metrics(size).lineHeight;
+    const line = fonts
+      .match(family, { size, weight, style })
+      .metrics(size).lineHeight;
     return line > 0 ? line : null;
   } catch {
     return null;
   }
 }
 
-/** A font's x-height at a size, as the engine reports it: null where the
- *  face states none, or the engine does not say. */
-function xHeightOf(
-  fonts: FontsLike,
-  family: string,
-  size: number,
-): number | null {
+/** A face's x-height, as the engine reports it: null where the face
+ *  states none, or the engine does not say. */
+function xHeightOf(fonts: FontsLike, face: MetricFace): number | null {
+  const { family, size, weight, style } = face;
   try {
-    const metrics = fonts.match(family, { size }).metrics(size) as {
+    const metrics = fonts
+      .match(family, { size, weight, style })
+      .metrics(size) as {
       xHeight?: number | null;
     };
     const x = metrics.xHeight;