@react-x11/components 0.12.0 → 0.14.0

package/dist/html/node.js

@@ -40,12 +40,14 @@ import { registerElement, registeredElements } from 'react-x11/host';
 import { Node } from 'react-x11/node';
 import { codePointAtOffset, codeUnitOffsets } from '../internal/text.js';
 import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
-import { Cascade } from './css/cascade.js';
+import { Cascade, HOVER_FOLLOWED, HOVER_PSEUDO_NONE, HOVER_PSEUDO_OTHER, HOVER_UNTOUCHED, } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
-import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, } from './layout/boxes.js';
-import { layoutDocument, retranslate, transformed } from './layout/block.js';
+import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CLEARED_FROM, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, columned, } from './layout/boxes.js';
+import { layoutDocument, placedMatrix, retranslate } from './layout/block.js';
+import { invert, mapPoint, mapRect, transformed } from './css/transform.js';
 import { TextLayoutCache } from './layout/cache.js';
+import { weightAxes } from './layout/axes.js';
 import { shapingSafe } from './layout/shaping.js';
 import { SurfaceCache, newSurface } from './surfaces.js';
 import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
@@ -53,7 +55,7 @@ import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
 // a layout is built once, on the first selection that needs it.
 import { documentOffsetOf, layoutOffsetOf, layoutOffsets as layoutOffsetsOf, } from './layout/inline.js';
 import { lineBands as bandsFor } from '../richtext/runs.js';
-import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, paintDocument, queryChildIndex, stackLayers, } from './paint.js';
+import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, inClip, inClipPath, onLine, ownBounds, paintDocument, pathClips, queryChildIndex, selectionRows, stackLayers, stacksLayers, } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
 import { ResourceStore } from './resources.js';
 import { WebFonts } from './fonts.js';
@@ -135,6 +137,8 @@ export class HtmlViewNode extends Node {
      *  that read it (`vw`, `vh`). */
     _styledWidth = -1;
     _styledHeight = -1;
+    /** The cascade the box tree's styles were computed by. */
+    _styledWith = null;
     _documentHeight = 0;
     _documentWidth = 0;
     /** The viewport height the document was last laid out under, and whether
@@ -152,6 +156,20 @@ export class HtmlViewNode extends Node {
      *  the text carries surrogate pairs. null until checked. */
     _pointsAreUnits = null;
     _hovered = [];
+    /** Where the pointer last moved to, in logical window pixels, while it
+     *  is over the element (`defaultMouseMove`). */
+    _pointerAt = null;
+    /** A hover held until the content under a still pointer stops moving:
+     *  the timer, and when the content last moved (`_holdHover`). */
+    _heldHover = null;
+    _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.
+     */
+    _restyleOnly = null;
     _scriptsSeen = new WeakSet();
     _controls = [];
     _reportedDomRevision = -1;
@@ -230,6 +248,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;
@@ -237,7 +256,26 @@ export class HtmlViewNode extends Node {
         return scaled;
     }
     // --- the pipeline ---------------------------------------------------------
-    _invalidate(stale) {
+    /**
+     * `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`).
+     */
+    _invalidate(stale, restyle = null) {
+        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)
@@ -443,7 +481,10 @@ export class HtmlViewNode extends Node {
             faces = kept.faces;
         }
         else {
-            const sheets = [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 = [uaStylesheet(props.look)];
             const imports = [];
             faces = [];
             let order = 0;
@@ -490,8 +531,9 @@ 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)));
+        this._webFonts.setFaces(faces.filter((f) => mediaMatches(f.rule.media, cssWidth, look.colorScheme, cssHeight, this._scale)));
         this._cascade.setPointer({
             hovered: new Set(this._hovered),
             active: EMPTY_SET,
@@ -505,8 +547,16 @@ export class HtmlViewNode extends Node {
      * next restyle whether the sheets read the same (`_sameSheets`). A sheet
      * that imports itself, or one of the sheets importing it, is read once.
      */
-    _placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set()) {
-        for (const url of sheet.imports) {
+    _placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set(), 
+    /** The media queries `sheet` is itself under, where it was imported
+     *  under some. */
+    under = null) {
+        for (let i = 0; i < sheet.imports.length; i += 1) {
+            const url = sheet.imports[i];
+            // what it imports is under its import's media queries, and under
+            // the ones the sheet importing it is under
+            const conditions = sheet.importConditions[i];
+            const media = conditions ? [...(under ?? []), conditions] : under;
             this._resources.request({ url, kind: 'stylesheet', element });
             const fetched = this._resources.stylesheet(url, [encoding]);
             const base = this._resources.sheetBase(url);
@@ -514,9 +564,9 @@ export class HtmlViewNode extends Node {
             const key = base ?? url;
             if (!fetched || depth >= MAX_IMPORT_DEPTH || chain.has(key))
                 continue;
-            const imported = parseStylesheet(fetched.text, 0, layers, base);
+            const imported = parseStylesheet(fetched.text, 0, layers, base, media);
             chain.add(key);
-            this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain);
+            this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain, media);
             chain.delete(key);
             place(imported, element);
         }
@@ -631,11 +681,22 @@ export class HtmlViewNode extends Node {
         const height = root?.abs?.height;
         return height && height > 0 ? height : 600;
     }
+    /** The engine this document lays text out with, and the one it is over:
+     *  one object while the engine is, since caches are kept by it. */
+    _engine = null;
     _fonts() {
         const fonts = this.app?.fonts;
+        if (!fonts)
+            return null;
         // a face the engine cannot shape from costs its characters, not the
         // document (`shaping.ts`)
-        return fonts ? shapingSafe(fonts) : null;
+        const safe = shapingSafe(fonts);
+        if (this._engine?.over !== safe) {
+            // and a variable face of the document's is set at the weight its
+            // rule has for a style's (`axes.ts`)
+            this._engine = { over: safe, fonts: weightAxes(safe, this._webFonts) };
+        }
+        return this._engine.fonts;
     }
     /** The text layouts the last pass made, for this one to reuse. */
     _layouts = null;
@@ -720,9 +781,14 @@ export class HtmlViewNode extends Node {
         const onlyViewport = this._stale === Stale.Nothing && this._laidOutWidth === target;
         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);
+            restyleOnly = null;
         }
         else if (this._cascade.mediaBand(target) !== this._mediaBand) {
             // A resize that crossed a `@media` breakpoint is the one resize that
@@ -730,6 +796,7 @@ export class HtmlViewNode extends Node {
             // breakpoints are collected at parse time.
             this._restyle(target);
             this._stale = Math.max(this._stale, Stale.Boxes);
+            restyleOnly = null;
         }
         const cascade = this._cascade;
         if (!cascade)
@@ -740,21 +807,32 @@ export class HtmlViewNode extends Node {
         // styles computed for another viewport are wrong for this one: built
         // again, where some style reads the side that moved. A document that
         // reads neither — most — goes on skipping the cascade on a resize.
-        if (this._stale < Stale.Boxes &&
-            ((cascade.readsViewportWidth && this._styledWidth !== target) ||
-                (cascade.readsViewportHeight && this._styledHeight !== viewport))) {
-            this._stale = Stale.Boxes;
+        if ((cascade.readsViewportWidth && this._styledWidth !== target) ||
+            (cascade.readsViewportHeight && this._styledHeight !== viewport)) {
+            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 = 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),
                 controlSize: (el, kind, style) => 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);
@@ -812,7 +890,7 @@ export class HtmlViewNode extends Node {
         // The boxes are device pixels; each rect becomes the style of a widget
         // mounted beside this element, and a style is logical.
         const s = this._scale;
-        const rects = controlRectsOf(tree).map((r) => s === 1
+        const rects = controlRectsOf(tree, s).map((r) => s === 1
             ? r
             : {
                 ...r,
@@ -820,6 +898,15 @@ export class HtmlViewNode extends Node {
                 y: r.y / s,
                 width: r.width / s,
                 height: r.height / s,
+                fontSize: r.fontSize / s,
+                ...(r.clip && {
+                    clip: {
+                        x: r.clip.x / s,
+                        y: r.clip.y / s,
+                        width: r.clip.width / s,
+                        height: r.clip.height / s,
+                    },
+                }),
                 ...(r.bare && {
                     bare: {
                         ...r.bare,
@@ -914,6 +1001,7 @@ export class HtmlViewNode extends Node {
         }
     }
     destroySubtree() {
+        this._dropHeldHover();
         this._resources.destroy();
         this._webFonts.destroy();
         this._source.destroy();
@@ -1008,7 +1096,8 @@ export class HtmlViewNode extends Node {
         if (to <= from)
             return [];
         const out = [];
-        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;
     }
     // --- pointer --------------------------------------------------------------
@@ -1079,11 +1168,16 @@ export class HtmlViewNode extends Node {
                 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: block.y,
+                    y: top,
                     width: around.contentWidth,
-                    height: block.height,
+                    height: block.y + block.height - top,
                 });
             }
             for (const band of bands)
@@ -1119,6 +1213,9 @@ export class HtmlViewNode extends Node {
                 rect = { x: caret.x, y: caret.y, width: 0, height: caret.height };
             }
         }
+        // where it is drawn: the rectangle around it, turned and scaled as the
+        // boxes it is in are, and itself (`getBoundingClientRect`, CSSOM View)
+        rect = throughTransforms(rect, box);
         const s = this._scale;
         return {
             x: rect.x / s,
@@ -1177,6 +1274,7 @@ export class HtmlViewNode extends Node {
      * contains a `:hover` rule.
      */
     setHover(x, y) {
+        this._dropHeldHover();
         const cascade = this._cascade;
         if (!cascade || !cascade.hoverSensitive)
             return false;
@@ -1195,6 +1293,7 @@ export class HtmlViewNode extends Node {
         return true;
     }
     clearHover() {
+        this._dropHeldHover();
         if (!this._hovered.length)
             return false;
         const was = this._hovered;
@@ -1203,62 +1302,53 @@ export class HtmlViewNode extends Node {
         this._restyleHover(was, []);
         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.
+     */
     _restyleHover(was, now) {
-        // a restyle in place names what it repainted (`_hoverInPlace`)
-        if (this._hoverInPlace(was, now) === 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.
-     *
-     * 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 whose styles a move of the hovered chain can change, or
+     * null where that cannot be said (`Cascade.hoverLocal`).
      *
-     *  - 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.
      */
-    _hoverInPlace(was, now) {
+    _hoverReach(was, now) {
         const cascade = this._cascade;
-        const tree = this._tree;
-        const layouts = this._layouts;
-        if (!cascade || !tree || !layouts || !cascade.hoverLocal)
-            return false;
-        if (this._stale !== Stale.Nothing || this._laidOutWidth < 0)
-            return false;
+        if (!cascade || !cascade.hoverLocal)
+            return null;
         const before = new Set(was);
         const after = new Set(now);
-        const roots = [];
-        // and the elements a `:has()` testing the pointer may flip, which
-        // are around the ones that changed; the chains are ancestor chains,
-        // so the deepest that changed on each side is where to look from
+        const roots = new Map();
         const flipped = (el, other) => {
             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, other) => {
             const el = chain[0];
             if (el && !other.has(el))
@@ -1266,11 +1356,9 @@ export class HtmlViewNode extends Node {
         };
         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();
         const collect = (el) => {
             const stack = [el];
@@ -1279,27 +1367,85 @@ export class HtmlViewNode extends Node {
                 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)
+        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.
+     */
+    _hoverInPlace(reach, was) {
+        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();
+        const flipped = (el) => {
+            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();
         const changed = new Map();
+        // the ones whose ink is what it was: only their custom properties
+        // changed, which the elements under them read
+        const quiet = new Set();
         let refused = false;
         // what changed beyond ink (`hoverChange`): how far some box's ink
         // reaches, the order its layer paints in, where one is
@@ -1323,20 +1469,27 @@ export class HtmlViewNode extends Node {
                 refused = true;
                 return null;
             }
-            const style = cascade.styleFor(el, parentStyle, kept.inFlex);
-            fresh.set(el, style);
-            const diff = hoverChange(kept.style, style);
-            if (diff === false)
-                refused = true;
-            else if (diff) {
-                changed.set(el, style);
-                if (diff.reach)
-                    reaches = true;
-                if (diff.order)
-                    reorders = true;
-                if (diff.move)
-                    moving.add(el);
+            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);
             return style;
         };
         for (const el of reach) {
@@ -1344,42 +1497,122 @@ export class HtmlViewNode extends Node {
             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 = [];
+        const next = new Map();
+        /** The restyled boxes whose ink changed, to repaint. */
+        const inked = new Set();
+        /** The `::before` and `::after` boxes found, by element: 1 and 2. */
+        const generated = new Map();
         const redecorated = [];
-        const walk = [tree.root];
+        const walk = 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;
+            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 — 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 || WIDGETS.has(box.replaced))
-                return false;
-            if (moving.has(owner) && !movable(box, kept.style, style))
-                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)) {
@@ -1391,11 +1624,34 @@ export class HtmlViewNode extends Node {
                     redecorated.push([box, decoration]);
             }
         }
-        // the text: each layout holding a run of a changed element's, made
-        // again with its new ink, where it comes out the same shape
+        // 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 restyled box's, made again
+        // with its new ink, where it comes out the same shape
         const relaid = new Map();
         const texts = [];
-        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)
@@ -1407,16 +1663,16 @@ export class HtmlViewNode extends Node {
                     texts.push(text);
                     if (relaid.has(text.layout))
                         continue;
-                    const next = reinked(text, layouts, changed, tree.styles);
-                    if (next === false)
+                    const again = reinked(text, layouts, next);
+                    if (again === false)
                         return false;
-                    relaid.set(text.layout, next);
+                    relaid.set(text.layout, again);
                 }
             }
         }
         // what each box drew before, to be repainted with what it draws after
         const inks = [];
-        for (const [box] of restyled) {
+        for (const box of inked) {
             const ink = inkOf(box);
             if (ink)
                 inks.push(ink);
@@ -1426,8 +1682,9 @@ export class HtmlViewNode extends Node {
         for (const [box, style] of restyled) {
             const was = box.style;
             box.style = style;
-            if (moving.has(box.el))
+            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
@@ -1438,9 +1695,9 @@ export class HtmlViewNode extends Node {
             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 });
@@ -1474,15 +1731,61 @@ export class HtmlViewNode extends Node {
             this._reportControls();
         if (relayout) {
             this._invalidate(Stale.Layout);
-            return 'painted';
+            return true;
         }
-        for (const [box] of restyled) {
+        for (const box of inked) {
             const ink = inkOf(box);
             if (ink)
                 inks.push(ink);
         }
         this._repaintInk(inks);
-        return 'painted';
+        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. */
+    _firstBoxes = 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.
+     */
+    _blocksOf(tree, changed) {
+        let index = this._firstBoxes;
+        if (index?.tree !== tree) {
+            const of = new Map();
+            const stack = [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();
+        for (const el of changed) {
+            let box = 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 = [];
+        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
@@ -1542,17 +1845,64 @@ 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.
     defaultMouseMove(ev) {
         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);
     }
     defaultMouseLeave(ev) {
         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. */
+    _holdHover() {
+        if (!this._cascade?.hoverSensitive)
+            return;
+        this._heldSince = hoverClock.now();
+        if (this._heldHover !== null)
+            return;
+        const rest = () => {
+            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);
+    }
+    _dropHeldHover() {
+        if (this._heldHover === null)
+            return;
+        hoverClock.disarm(this._heldHover);
+        this._heldHover = null;
+    }
     // --- paint ----------------------------------------------------------------
     paint(ctx) {
         super.paint(ctx); // background, border, clip to `abs`
@@ -1793,13 +2143,21 @@ function sameRects(a, b) {
             p.y !== q.y ||
             p.width !== q.width ||
             p.height !== q.height ||
+            p.fontFamily !== q.fontFamily ||
+            p.fontSize !== q.fontSize ||
             p.opacity !== q.opacity ||
+            !sameClip(p.clip, q.clip) ||
             !sameBare(p.bare, q.bare)) {
             return false;
         }
     }
     return true;
 }
+function sameClip(a, b) {
+    if (!a || !b)
+        return a === b;
+    return (a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
+}
 function sameBare(a, b) {
     if (!a || !b)
         return a === b;
@@ -1846,7 +2204,13 @@ function nearestText(box, x, y) {
             if (distance >= bestDistance)
                 continue;
             bestDistance = distance;
-            const local = text.layout.indexAt(x - text.drawX, y - text.drawY);
+            // in the row that is this line's, where the layout's other lines are
+            // in another column and a point past this one is not over them
+            let row = y - text.drawY;
+            if (columned.any && COLUMN_ROWS.has(text)) {
+                row = Math.max(natural.y, Math.min(row, natural.y + natural.height - 0.01));
+            }
+            const local = text.layout.indexAt(x - text.drawX, row);
             const offsets = layoutOffsetsOf(text.layout);
             const units = offsets.length
                 ? offsets[Math.max(0, Math.min(local, offsets.length - 1))]
@@ -1859,13 +2223,38 @@ function nearestText(box, x, y) {
             axisDistance(x, node.boundsX, node.boundsWidth);
         if (boundsDistance >= bestDistance)
             return;
+        // in a box painted through a matrix, the point taken back through it
+        // (`deepestAt`): the text is where it was laid out
+        const matrix = placedMatrix(node);
+        if (!matrix) {
+            visitIn(node);
+            return;
+        }
+        const back = invert(matrix);
+        if (!back)
+            return;
+        const px = x;
+        const py = y;
+        [x, y] = mapPoint(back, px, py);
+        try {
+            visitIn(node);
+        }
+        finally {
+            x = px;
+            y = py;
+        }
+    };
+    const visitIn = (node) => {
         const lines = node.lines;
         if (lines?.length) {
             // The line nearest in y, by binary search; then outward both ways
             // while vertical distance alone could still beat the best.
             let lo = 0;
             let hi = lines.length;
-            while (lo < hi) {
+            // the lines columns took apart are in no order down the page: each
+            // is tried
+            const apart = columned.any && COLUMN_LINES.has(lines);
+            while (!apart && lo < hi) {
                 const mid = (lo + hi) >> 1;
                 if (lines[mid].y > y)
                     hi = mid;
@@ -1878,8 +2267,11 @@ function nearestText(box, x, y) {
                 tryLine(lines[i]);
             }
             for (let i = lo; i < lines.length; i += 1) {
-                if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance)
+                if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance) {
+                    if (apart)
+                        continue;
                     break;
+                }
                 tryLine(lines[i]);
             }
         }
@@ -1967,7 +2359,13 @@ function caretAt(box, units) {
                     const offsets = layoutOffsetsOf(text.layout);
                     const layoutUnits = layoutOffsetOf(text, units);
                     const caret = text.layout.caretPosition(codePointAtOffset(offsets, layoutUnits));
-                    found = { x: text.drawX + caret.x, y: line.y, height: line.height };
+                    const at = throughTransforms({
+                        x: text.drawX + caret.x,
+                        y: line.y,
+                        width: 0,
+                        height: line.height,
+                    }, node);
+                    found = { x: at.x, y: at.y, height: at.height };
                     return;
                 }
             }
@@ -1983,6 +2381,21 @@ function caretAt(box, units) {
     visit(box);
     return found;
 }
+/**
+ * A rectangle in a box's own coordinates — the ones it and what it holds
+ * were laid out in — as the rectangle around where it is drawn: through
+ * the matrix of each box from `from` up that is painted through one
+ * (`placedMatrix`). The rectangle itself, in a document that transforms
+ * nothing but by moving it.
+ */
+function throughTransforms(rect, from) {
+    for (let at = from; at; at = at.parent) {
+        const matrix = placedMatrix(at);
+        if (matrix)
+            rect = mapRect(matrix, rect.x, rect.y, rect.width, rect.height);
+    }
+    return rect;
+}
 /** Every band a document range covers, in window coordinates. The subtree
  *  text ranges prune the walk to the boxes the range actually crosses, so a
  *  drag's small range costs its own paragraphs; only Ctrl+A pays for all. */
@@ -2078,7 +2491,10 @@ function fragmentHeights(box, bands, fonts) {
 function lineBands(lines, from, to, dx, dy, out, 
 /** Where the lines put the text, not where a relative offset moved it
  *  (`TEXT_SHIFTS`): what an inline box's own offset is added to. */
-laidOut = false) {
+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) {
     // 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;
@@ -2111,6 +2527,9 @@ laidOut = false) {
                 // 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, offsets, layoutOffsetOf(text, a), layoutOffsetOf(text, b, true))) {
                     let left = band.x;
                     let right = band.x + band.width;
@@ -2120,9 +2539,22 @@ laidOut = false) {
                     }
                     out.push({
                         x: dx + left + text.drawX - moved,
-                        y: dy + line.y,
+                        y: dy + rows.y,
                         width: right - left,
-                        height: line.height,
+                        height: rows.height,
+                    });
+                }
+                // The spaces a piece of a line ends on, where the line goes on
+                // after them: the engine stripped them from the piece it laid out
+                // as a line, and they are the text's all the same, in the elements
+                // that hold its end — a link whose text ends in a space, before
+                // the next link, is that space wider than its letters
+                if (text.trail && b >= text.textEnd && !rtlLine(natural)) {
+                    out.push({
+                        x: dx + natural.x + natural.width + text.drawX - moved,
+                        y: dy + rows.y,
+                        width: text.trail,
+                        height: rows.height,
                     });
                 }
                 // the spaces `pre-wrap` keeps that the line ends on, which have no
@@ -2133,15 +2565,20 @@ laidOut = false) {
                         continue;
                     out.push({
                         x: dx + space.x + text.drawX - moved,
-                        y: dy + line.y,
+                        y: dy + rows.y,
                         width: space.width,
-                        height: line.height,
+                        height: rows.height,
                     });
                 }
             }
         }
     }
 }
+/** Whether a laid-out line's last run reads right to left, its end at its
+ *  left. */
+function rtlLine(natural) {
+    return natural.runs[natural.runs.length - 1]?.run?.direction === 'rtl';
+}
 /** Whether a line's text is where the line ends: its last, with nothing
  *  placed after it — an inline-block or an image past its content. */
 function endsLine(line, text, natural) {
@@ -2154,18 +2591,28 @@ function endsLine(line, text, natural) {
     }
     return true;
 }
-function collectBands(box, from, to, dx, dy, out) {
+function collectBands(box, from, to, dx, dy, out, ink = false) {
     if (box.subtreeTextEnd <= box.subtreeTextStart)
         return;
     if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to)
         return;
+    const first = out.length;
     if (box.lines)
-        lineBands(box.lines, from, to, dx, dy, out);
+        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);
+    }
+    // where a box painted through a matrix draws them
+    const matrix = out.length > first ? placedMatrix(box) : null;
+    if (!matrix)
+        return;
+    for (let i = first; i < out.length; i += 1) {
+        const band = out[i];
+        const to = mapRect(matrix, band.x - dx, band.y - dy, band.width, band.height);
+        out[i] = { ...band, ...to, x: to.x + dx, y: to.y + dy };
     }
 }
 /** The layers of a hit test, in the order CSS paints them within a
@@ -2200,7 +2647,17 @@ fixedShift = null) {
     // are painted in `z-index` order and then the document's (`byZIndex`),
     // the negative ones under the flow: the Zen Garden's `›` has
     // `z-index: 3` over the bar the "View All Designs" link fills after it.
-    const take = (el, key, text) => {
+    // Nor is a box the pointer passes through under it: one that is not
+    // visible, which is no target for the pointer in any browser (CSS 2.1
+    // 11.2 has it invisible, and a hit test finds what is seen), or one with
+    // `pointer-events: none` (CSS UI 4, 5.2). Both are inherited, and what is
+    // in such a box may say otherwise, so the walk goes on through it. A
+    // site's closed menu is laid out over its page, hidden: GitHub's covered
+    // its repository's tabs, and the pointer over a tab was over the menu.
+    const take = (el, style, key, text) => {
+        if (style.visibility !== 'visible' || style.pointerEvents === 'none') {
+            return;
+        }
         if (compareKeys(key, foundKey) < 0)
             return;
         found = el;
@@ -2242,14 +2699,79 @@ fixedShift = null) {
             atViewport = false;
         }
     };
+    // A box painted through a matrix (`placedMatrix`) is under the point
+    // where the matrix puts it: inside the rectangle around what it draws
+    // there, the point is taken back through the matrix, into the
+    // coordinates the box and all it holds were laid out in, and the walk
+    // goes on with that. An icon turned a quarter is pressed where it is
+    // drawn; a box flattened to nothing is nowhere.
     const enterAt = (child, context, clipped) => {
+        const matrix = placedMatrix(child);
+        if (!matrix) {
+            enterIn(child, context, clipped, null);
+            return;
+        }
+        if (x < child.boundsX ||
+            x >= child.boundsX + child.boundsWidth ||
+            y < child.boundsY ||
+            y >= child.boundsY + child.boundsHeight) {
+            return;
+        }
+        const back = invert(matrix);
+        if (!back)
+            return;
+        const px = x;
+        const py = y;
+        [x, y] = mapPoint(back, px, py);
+        try {
+            enterIn(child, context, clipped, ownBounds(child));
+        }
+        finally {
+            x = px;
+            y = py;
+        }
+    };
+    const enterIn = (child, context, clipped, 
+    /** What the box draws in its own coordinates, where those are not the
+     *  ones its bounds are in: a box painted through a matrix. */
+    bounds) => {
         const style = child.style;
+        // What a `clip-path` cuts away of a box it cuts away of all the box
+        // holds, whatever that is positioned from (CSS Masking 1, 5.1), and
+        // nothing not drawn is under a pointer: a label a page hides for a
+        // screen reader alone under `clip-path: inset(50%)` took the hover and
+        // the press of what was drawn where it lay.
+        if (pathClips(child) && !inClipPath(child, x, y))
+            return;
+        // `clip` is not that rule as paint has it. It shows the part of an
+        // absolute box it names (CSS 2.1 11.1.2), and past that part nothing is
+        // drawn of the box, nor of what is painted with it. A stacking context
+        // paints all it holds, inside its clip. A box that is none leaves its
+        // positioned boxes to the context around it, which cuts each to the
+        // clips its containing block is under (`clipsFor`): this one for all
+        // but a fixed box, which is under none and is drawn past it. So past
+        // its clip the first is left, and the second is walked as a box that
+        // clips its overflow is past its edge — whether or not the point is in
+        // its own rectangle, which a clip may show only a part of. Both were
+        // walked as if they showed whole: a label hidden for a screen reader
+        // alone under `clip: rect(0, 0, 0, 0)` took the hover and the press of
+        // the link drawn where it lay.
+        let cut = !inClip(child, x, y);
+        if (cut && stacksLayers(child))
+            return;
         if (style.position !== 'static' ||
             (child.parent?.kind === 'flex' && typeof style.zIndex === 'number')) {
             // a flex item with a `z-index` is layered unpositioned (`layered`)
             const z = style.zIndex === 'auto' ? 0 : style.zIndex;
             context = [...context, z < 0 ? HIT_NEGATIVE : HIT_POSITIONED, z];
         }
+        else if (transformed(style) &&
+            child.kind !== 'inline' &&
+            child.parent &&
+            !onLine(child.parent, child)) {
+            // a transformed box is painted with the positioned ones (`layered`)
+            context = [...context, HIT_POSITIONED, 0];
+        }
         else if (style.float !== 'none')
             context = [...context, HIT_FLOAT];
         if (clipped.length !== 0 && child.outOfFlow) {
@@ -2258,33 +2780,45 @@ fixedShift = null) {
                 ? clipped.filter((clip) => holds(clip, containing))
                 : [];
         }
-        const inside = x >= child.x &&
-            x < child.x + child.width &&
-            y >= child.y &&
-            y < child.y + child.height;
+        // in one of its pieces, where columns broke it: its rect takes in the
+        // columns between them, which are other boxes'
+        const pieces = columned.any ? COLUMN_PIECES.get(child) : undefined;
+        const inside = pieces
+            ? pieces.some((piece) => x >= piece.x &&
+                x < piece.x + piece.width &&
+                y >= piece.y &&
+                y < piece.y + piece.height)
+            : x >= child.x &&
+                x < child.x + child.width &&
+                y >= child.y &&
+                y < child.y + child.height;
         const own = inside && hasRect(child);
         if (!own) {
-            const reach = child.boundsY;
-            const known = Number.isFinite(reach) &&
-                (child.boundsWidth > 0 || child.boundsHeight > 0);
+            const left = bounds ? bounds.x : child.boundsX;
+            const reach = bounds ? bounds.y : child.boundsY;
+            const across = bounds ? bounds.width : child.boundsWidth;
+            const down = bounds ? bounds.height : child.boundsHeight;
+            const known = Number.isFinite(reach) && (across > 0 || down > 0);
             if (!known) {
                 if (!inside)
                     return;
             }
-            else if (x < child.boundsX ||
-                x >= child.boundsX + child.boundsWidth ||
+            else if (x < left ||
+                x >= left + across ||
                 y < reach ||
-                y >= reach + child.boundsHeight) {
+                y >= reach + down) {
                 return;
             }
-            if (clipsOverflow(child)) {
-                if (!holdsAbsolute(child))
-                    return;
-                clipped = [...clipped, child];
-            }
+            if (clipsOverflow(child))
+                cut = true;
+        }
+        if (cut) {
+            if (!holdsAbsolute(child))
+                return;
+            clipped = [...clipped, child];
         }
         if (own && child.el && clipped.length === 0) {
-            take(child.el, [...context, HIT_BLOCK], false);
+            take(child.el, style, [...context, HIT_BLOCK], false);
         }
         visit(child, context, clipped);
     };
@@ -2326,8 +2860,9 @@ fixedShift = null) {
                             const left = text.drawX + natural.x + run.x;
                             if (x >= left && x < left + run.width) {
                                 const owner = ownerOf(tree.textBoxes, text.spans.documentAt(run.start));
-                                if (owner)
-                                    take(owner, [...context, HIT_INLINE], true);
+                                const style = owner && tree.styles.get(owner)?.style;
+                                if (style)
+                                    take(owner, style, [...context, HIT_INLINE], true);
                             }
                         }
                     }
@@ -2354,6 +2889,32 @@ function compareKeys(a, b) {
  *  is built again instead: a link's subtree is a handful, and a compound
  *  that matches a container reaches everything in it. */
 const HOVER_RESTYLE_LIMIT = 300;
+/** 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;
+/**
+ * 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() {
+        return Date.now();
+    },
+    arm(step, ms) {
+        const handle = timers.setTimeout?.(step, ms) ?? null;
+        handle?.unref?.();
+        return handle;
+    },
+    disarm(handle) {
+        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
@@ -2365,6 +2926,9 @@ const PAINT_ONLY = new Set([
     'color',
     'textFillColor',
     'cursor',
+    'pointerEvents',
+    'fill',
+    'stroke',
     'backgroundColor',
     'borderTopColor',
     'borderRightColor',
@@ -2381,6 +2945,8 @@ const PAINT_ONLY = new Set([
     'underlineThickness',
     'underlineOffset',
     'lineThrough',
+    'lineThroughStyle',
+    'lineThroughThickness',
 ]);
 /** The fields of a run its ink is: what `runFor` takes from `PAINT_ONLY`. */
 const INK_FIELDS = [
@@ -2390,6 +2956,8 @@ const INK_FIELDS = [
     'underlineOffset',
     'underlineThickness',
     'strike',
+    'strikeStyle',
+    'strikeThickness',
 ];
 /** The fields of a run its shape is, which ink never changes. */
 const FACE_FIELDS = [
@@ -2400,6 +2968,12 @@ const FACE_FIELDS = [
     'letterSpacing',
     'features',
 ];
+/** 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],
+];
 /** 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([
@@ -2418,10 +2992,19 @@ const INK_REACH = new Set([
     'outlineWidth',
     'outlineOffset',
 ]);
+/** What transforms a box: it moves, turns or scales where it is, and
+ *  nothing around it does (CSS Transforms 1, 3). */
+const TRANSFORM_FIELDS = new Set([
+    'translate',
+    'rotate',
+    'scale',
+    'transform',
+    'transformOrigin',
+]);
 /**
  * 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 —
+ * reaches, a `z-index` that stays a stacking context's, or a transform —
  * 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.
@@ -2431,9 +3014,18 @@ function hoverChange(was, now) {
     const b = now;
     let change = null;
     for (const key in b) {
-        if (key === 'custom' || sameValue(a[key], b[key]))
+        // 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;
-        change ??= { reach: false, order: false, move: false };
+        }
+        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)) {
@@ -2452,7 +3044,7 @@ function hoverChange(was, now) {
             change.order = true;
             continue;
         }
-        if (key === 'transformTranslate' || key === 'translate') {
+        if (TRANSFORM_FIELDS.has(key)) {
             change.move = true;
             continue;
         }
@@ -2500,12 +3092,14 @@ function inkOf(box) {
         return null;
     if (!(at.boundsWidth > 0 && at.boundsHeight > 0))
         return null;
-    return {
+    // its bounds are in the coordinates of the box it is in, which a box
+    // around it painted through a matrix draws somewhere else
+    return throughTransforms({
         x: at.boundsX,
         y: at.boundsY,
         width: at.boundsWidth,
         height: at.boundsHeight,
-    };
+    }, at.parent);
 }
 /** Structural equality for a computed value: a number, a string, or the
  *  plain objects and arrays a length or a shadow list is. */
@@ -2529,32 +3123,23 @@ function sameValue(x, y) {
             return false;
     return true;
 }
-/** The element an anonymous box takes its style from: its nearest
- *  ancestor's that has one. */
-function nearestElement(box) {
-    for (let at = box.parent; at; at = at.parent)
-        if (at.el)
-            return at.el;
-    return null;
-}
 /**
- * `text`'s layout made again with the ink of the elements a pointer move
- * restyled: from the runs it was made from, each of a changed element's
+ * `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),
  * or a layout that comes out another shape.
  */
-function reinked(text, layouts, changed, styles) {
+function reinked(text, layouts, next) {
     const spans = text.spans;
-    const ownerAt = (offset) => spans.boxAt ? (spans.boxAt(offset)?.el ?? null) : null;
     const inputs = layouts.inputsOf(text.layout);
     if (!inputs || !spans.boxAt) {
         // not one this could make again: none of its text may be theirs
         for (const line of text.layout.lines) {
             for (const run of line.runs) {
-                const owner = spans.boxAt ? ownerAt(run.start) : null;
-                if (!spans.boxAt || (owner && changed.has(owner)))
+                const box = spans.boxAt?.(run.start);
+                if (!spans.boxAt || (box && next.has(box)))
                     return false;
             }
         }
@@ -2566,32 +3151,32 @@ function reinked(text, layouts, changed, styles) {
     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)
+        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, styles.get(owner).style);
+            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 = null;
+            let inked = 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 };
+                inked ??= { ...run };
                 if (now[f] === undefined)
-                    delete next[f];
+                    delete inked[f];
                 else
-                    next[f] = now[f];
+                    inked[f] = now[f];
             }
-            if (next) {
+            if (inked) {
                 runs ??= content.slice();
-                runs[i] = next;
+                runs[i] = inked;
             }
         }
         offset += length;