@react-x11/components 0.11.0 → 0.12.0

package/dist/html/paint.js

@@ -22,9 +22,9 @@
 import { canFill, lineBands, paintRunBackgrounds, paintRunRules, } from '../richtext/runs.js';
 import { alphaOf, inkColor, isTransparent, resolve } from './css/values.js';
 import { blend, borderShades } from './css/color.js';
-import { CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, copyStyle, scrolls, } from './css/style.js';
+import { CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, copyStyle, masked, scrolls, } from './css/style.js';
 import { contained } from './layout/block.js';
-import { BOX_RAISES, LINE_BOX_RAISES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, FADED_BLOCKS, PAINT_ORDER, INLINE_OFFSETS, MOVED_OFF_LINES, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, TEXT_SHIFTS, } from './layout/boxes.js';
+import { BOX_RAISES, LINE_BOX_RAISES, PADDED_FACES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, FADED_BLOCKS, PAINT_ORDER, INLINE_OFFSETS, MOVED_OFF_LINES, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, TEXT_SHIFTS, } from './layout/boxes.js';
 import { CLIPPED_TEXT, clipBoxOf, depthOf, inklessLayout, layoutOffsetOf, layoutOffsets, } from './layout/inline.js';
 import { tableGrid } from './layout/grid.js';
 import { SvgDrawing, inlineDrawing } from './svg.js';
@@ -36,6 +36,13 @@ import { SvgDrawing, inlineDrawing } from './svg.js';
  * document's height — handed up rather than kept on every box, where
  * writing it and reading it back cost this walk a fifth of its time.
  */
+/**
+ * How far down an out-of-flow box's scrollable overflow reaches: its border
+ * box, and what it holds where it does not clip it (`computePaintBounds`),
+ * which the box it is in does not take in and the document does
+ * (`layoutDocument`).
+ */
+export const OUT_OF_FLOW_REACH = new WeakMap();
 export function computePaintBounds(box, moved = false) {
     // A box with no rectangle of its own gives only what it holds: nothing,
     // until a child with bounds is met.
@@ -47,8 +54,12 @@ export function computePaintBounds(box, moved = false) {
     // How far down the content reaches, for the document's height: the
     // border box, and every box and line under it, but not past a box that
     // clips what it holds — where the scrollable overflow ends. Out-of-flow
-    // boxes are the layout's to count.
-    let bottom = y2;
+    // boxes are the layout's to count. A border box of no area reaches
+    // nowhere, as a browser has it (Blink's `ScrollableOverflowCalculator`
+    // adds no empty rect): the empty blocks a design leaves at its end,
+    // below the last one's bottom margin, made the page that margin taller
+    const empty = own && !(box.width > 0 && box.height > 0);
+    let bottom = empty ? -Infinity : y2;
     // A shadow is ink past the box, and no overflow: a repaint of the strip
     // under a card has to reach the card, and the document is no taller.
     const shadows = own ? box.style.boxShadow : null;
@@ -71,6 +82,25 @@ export function computePaintBounds(box, moved = false) {
         x2 = Math.max(x2, box.x + box.width + reach);
         y2 = Math.max(y2, box.y + box.height + reach);
     }
+    // An inline box's fragments are boxes on the lines they are on, and its
+    // padding and border reach above and below those lines: they count in
+    // the scrollable overflow of the block it is in (CSS Overflow 3, 2.2) —
+    // Blink adds each inline box fragment's border box
+    // (`ScrollableOverflowCalculator::AddItemsInternal`). Design 150's footer
+    // links, 50px of padding under their text, made Chrome's page 19px
+    // taller than the box they end. Only a box with padding or a border
+    // above or below its text can reach past its lines.
+    if (box.kind === 'inline' &&
+        box.padTop + box.padBottom + box.borderTop + box.borderBottom > 0) {
+        const reach = inlineFragmentsReach(box);
+        if (reach) {
+            x1 = Math.min(x1, reach.x1);
+            y1 = Math.min(y1, reach.y1);
+            x2 = Math.max(x2, reach.x2);
+            y2 = Math.max(y2, reach.y2);
+            bottom = Math.max(bottom, reach.y2);
+        }
+    }
     const lines = box.lines;
     if (lines) {
         let tallest = 0;
@@ -127,6 +157,8 @@ export function computePaintBounds(box, moved = false) {
         const reach = computePaintBounds(child, moved);
         if (!child.outOfFlow)
             bottom = Math.max(bottom, reach);
+        else
+            OUT_OF_FLOW_REACH.set(child, reach);
         if (child.boundsY === Infinity)
             continue;
         x1 = Math.min(x1, child.boundsX);
@@ -174,7 +206,7 @@ export function computePaintBounds(box, moved = false) {
         return bottom;
     // whether the box clips only matters where its content reaches past it,
     // and its style is one more object a walk of every box would read
-    const end = box.y + box.height;
+    const end = empty ? -Infinity : box.y + box.height;
     if (bottom <= end)
         return end;
     const style = box.style;
@@ -200,6 +232,56 @@ export function hasRect(box) {
     const display = box.style.display;
     return display !== 'table-column' && display !== 'table-column-group';
 }
+/**
+ * Where an inline box's fragments are, over the lines of the block it is
+ * in that hold its text: from its face's ascent and its top padding and
+ * border above each line's baseline to its descent and its bottom ones
+ * below, as `paintInlineBoxes` draws them. Null for a box with no text or
+ * no face.
+ */
+function inlineFragmentsReach(box) {
+    const face = box.decoration ?? PADDED_FACES.get(box);
+    if (!face || box.subtreeTextEnd <= box.subtreeTextStart)
+        return null;
+    let block = box.parent;
+    while (block && block.kind === 'inline')
+        block = block.parent;
+    const lines = block?.lines;
+    if (!lines?.length)
+        return null;
+    const from = box.subtreeTextStart;
+    const to = box.subtreeTextEnd;
+    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;
+    }
+    const moved = offsetOf(box);
+    let x1 = Infinity;
+    let y1 = Infinity;
+    let x2 = -Infinity;
+    let y2 = -Infinity;
+    for (let i = lo; i < lines.length; i += 1) {
+        const line = lines[i];
+        if (line.textStart >= to)
+            break;
+        if (line.textEnd <= from)
+            continue;
+        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 + (moved?.y ?? 0);
+        x1 = Math.min(x1, line.x);
+        x2 = Math.max(x2, line.x + line.width);
+        y1 = Math.min(y1, baseline - face.ascent - box.padTop - box.borderTop);
+        y2 = Math.max(y2, baseline + face.descent + box.padBottom + box.borderBottom);
+    }
+    return x1 === Infinity ? null : { x1, y1, x2, y2 };
+}
 /** Children lists past this size get the sorted viewport index; below it a
  *  linear scan is cheaper than keeping one. */
 const PAINT_INDEX_MIN = 64;
@@ -370,7 +452,7 @@ function paintCanvas(ctx, { style: source, anchor }, root, options) {
             // browser does — the stripes a short page with a gradient on its
             // body shows — or by the viewport, where it is fixed
             const box = style.backgroundAttachment === 'fixed' && options.canvas
-                ? options.canvas
+                ? (options.viewport ?? options.canvas)
                 : originBox(anchor, options, style);
             paintGradient(ctx, style, style.backgroundGradient, area, snapped(box.x, box.y, box.width, box.height));
         }
@@ -458,8 +540,10 @@ function paddingBox(box, options) {
     };
 }
 /** Where a layer of a box's background is placed, in window coordinates:
- *  the box its `background-origin` names (CSS Backgrounds 3, 3.8). */
-function originBox(box, options, style) {
+ *  the box its `background-origin` names (CSS Backgrounds 3, 3.8) — of the
+ *  whole strip, for a fragment of an inline box that is sliced. */
+function originBox(frame, options, style) {
+    const box = frame.strip ?? frame;
     const [t, r, b, l] = edgeInsets(box, style.backgroundOrigin);
     return {
         x: box.x + l + options.originX,
@@ -525,8 +609,14 @@ function paintBox(ctx, box, options) {
         ctx.save();
         ctx.globalAlpha = ctx.globalAlpha * opacity;
     }
+    if (masked(box.style) && paintMasked(ctx, box, options)) {
+        if (fade)
+            ctx.restore();
+        return;
+    }
     // `clip` shows the part of an absolutely positioned box it names, its own
-    // background and borders among it (CSS 2.1 11.1.2)
+    // background and borders among it (CSS 2.1 11.1.2) — written out here,
+    // not called: a frame more a level and a deep document ran out of stack
     const clip = box.outOfFlow && box.style.clip ? clipOf(box, options) : null;
     if (!clip || (clip.w > 0 && clip.h > 0)) {
         const clipped = !!clip && pushClip(ctx, clip, null);
@@ -537,6 +627,135 @@ function paintBox(ctx, box, options) {
     if (fade)
         ctx.restore();
 }
+/** A box and what it holds, cut to its `clip` as `paintBox` cuts it. */
+function paintClipped(ctx, box, options) {
+    const clip = box.outOfFlow && box.style.clip ? clipOf(box, options) : null;
+    if (clip && !(clip.w > 0 && clip.h > 0))
+        return;
+    const clipped = !!clip && pushClip(ctx, clip, null);
+    paintContent(ctx, box, options);
+    if (clipped)
+        ctx.restore();
+}
+const MASK_LAYERS = new WeakMap();
+/** No corners: a mask layer is placed in the box's rectangle, which its
+ *  radii do not round (CSS Masking 1, 7). */
+const SQUARE_RADII = [0, 0, 0, 0];
+/**
+ * A style for each of a box's mask layers, top first, as `layersOf` makes
+ * a background's: the box's own style with the layer's image, repeat, size,
+ * position, origin and clip in its background's place, and no colour — so
+ * the background painter places and repeats a mask layer as it does a
+ * background layer, which is what CSS Masking 1 says a mask layer is (7).
+ * Made once a style.
+ */
+function maskLayersOf(style) {
+    let layers = MASK_LAYERS.get(style);
+    if (layers)
+        return layers;
+    const mask = style.mask;
+    const nth = (list, i) => list[i % list.length];
+    layers = mask.images.map((image, i) => {
+        const layer = Object.create(style);
+        layer.backgroundColor = null;
+        layer.backgroundImages = null;
+        layer.backgroundImage = typeof image === 'string' ? image : null;
+        layer.backgroundGradient =
+            image !== null && typeof image !== 'string' ? image : null;
+        layer.backgroundRepeat = nth(mask.repeats, i);
+        layer.backgroundSize = nth(mask.sizes, i);
+        layer.backgroundAttachment = 'scroll';
+        [layer.backgroundPositionX, layer.backgroundPositionY] = nth(mask.positions, i);
+        layer.backgroundOrigin = nth(mask.origins, i);
+        layer.backgroundClip = nth(mask.clips, i);
+        layer.backgroundClipText = false;
+        layer.borderRadius = SQUARE_RADII;
+        layer.borderRadiusY = null;
+        return layer;
+    });
+    MASK_LAYERS.set(style, layers);
+    return layers;
+}
+/**
+ * A masked box (CSS Masking 1, 7): the box and what it holds drawn on a
+ * surface of their own, which the alpha of its mask layers — painted as a
+ * background's are, on a second surface, each added over the ones below
+ * it — then cuts with `destination-in`, and the result drawn in its place,
+ * as the group a mask makes. Only the mask painting area, the border box,
+ * can show, and only its part in the damage is drawn.
+ *
+ * A layer whose image has not arrived is transparent black (7.2), so a box
+ * none of whose layers can be drawn yet draws nothing: an icon masked out
+ * of its `background-color` is not a solid square while its image loads.
+ * False where there is no surface to draw on, or no `destination-in` to
+ * draw with, and the caller paints the box unmasked.
+ */
+function paintMasked(ctx, box, options) {
+    const layers = maskLayersOf(box.style);
+    const drawable = layers.some((layer) => !!layer.backgroundGradient ||
+        (!!layer.backgroundImage &&
+            !!options.backgroundImageFor?.(layer.backgroundImage)));
+    if (!drawable)
+        return true;
+    if (!options.surface || !ctx.drawImage)
+        return false;
+    let x0 = Math.floor(box.x + options.originX);
+    let y0 = Math.floor(frameY(box) + options.originY);
+    let x1 = Math.ceil(box.x + box.width + options.originX);
+    let y1 = Math.ceil(frameY(box) + frameHeight(box) + options.originY);
+    const damage = options.damage;
+    if (damage) {
+        x0 = Math.max(x0, Math.floor(damage.x));
+        y0 = Math.max(y0, Math.floor(damage.y));
+        x1 = Math.min(x1, Math.ceil(damage.x + damage.width));
+        y1 = Math.min(y1, Math.ceil(damage.y + damage.height));
+    }
+    const w = x1 - x0;
+    const h = y1 - y0;
+    if (!(w > 0 && h > 0))
+        return true;
+    const content = options.surface(w, h);
+    const mask = content && options.surface(w, h);
+    try {
+        if (!content || !mask)
+            return false;
+        const cctx = content.getContext('2d');
+        const mctx = mask.getContext('2d');
+        // the surfaces' own coordinates, the window's moved to their corner
+        const on = {
+            ...options,
+            originX: options.originX - x0,
+            originY: options.originY - y0,
+            damage: { x: 0, y: 0, width: w, height: h },
+            canvas: options.canvas && {
+                ...options.canvas,
+                x: options.canvas.x - x0,
+                y: options.canvas.y - y0,
+            },
+            viewport: options.viewport && {
+                ...options.viewport,
+                x: options.viewport.x - x0,
+                y: options.viewport.y - y0,
+            },
+            clips: [],
+        };
+        for (let i = layers.length - 1; i >= 0; i -= 1) {
+            paintLayer(mctx, box, on, layers[i], frameImages(mctx, box, on));
+        }
+        paintClipped(cctx, box, on);
+        cctx.globalCompositeOperation = 'destination-in';
+        if (cctx.globalCompositeOperation !== 'destination-in')
+            return false;
+        cctx.drawImage(mask, 0, 0);
+        cctx.globalCompositeOperation = 'source-over';
+        ctx.drawImage(content, x0, y0);
+        return true;
+    }
+    finally {
+        content?.destroy?.();
+        mask?.destroy?.();
+    }
+}
 function paintContent(ctx, box, options) {
     const visible = box.style.visibility === 'visible';
     if (visible)
@@ -779,9 +998,6 @@ function paintShadows(ctx, box, options, inset) {
                 }, 0);
                 continue;
             }
-            if (bakedOuter(ctx, options, s, color, shape, around, covered ? null : { rect: own, corners })) {
-                continue;
-            }
             // what of the shadow falls under the box is not drawn
             const clipped = !covered && ctx.clip && ctx.rect && ctx.save;
             if (clipped) {
@@ -792,7 +1008,7 @@ function paintShadows(ctx, box, options, inset) {
                 ctx.clip();
             }
             fillShadow(ctx, s, color, (dx) => {
-                roundedRect(ctx, shape.x - dx, shape.y, shape.width, shape.height, around);
+                shadowShape(ctx, shape.x - dx, shape.y, shape.width, shape.height, around);
             }, shape.x + shape.width + reach);
             if (clipped)
                 ctx.restore();
@@ -842,8 +1058,6 @@ function paintShadows(ctx, box, options, inset) {
             fillRing(ctx, pad, inner, hole, within);
             continue;
         }
-        if (bakedInset(ctx, options, s, color, pad, inner, hole, within))
-            continue;
         if (!ctx.clip || !ctx.save || !ctx.rect)
             continue;
         ctx.save();
@@ -861,128 +1075,24 @@ function paintShadows(ctx, box, options, inset) {
         fillShadow(ctx, s, color, (dx) => {
             ctx.rect(frame.x - dx, frame.y, frame.width, frame.height);
             if (hole.width > 0 && hole.height > 0) {
-                roundedRect(ctx, hole.x - dx, hole.y, hole.width, hole.height, within, true, true);
+                shadowShape(ctx, hole.x - dx, hole.y, hole.width, hole.height, within);
             }
-        }, frame.x + frame.width + shadowReach(s.blur));
+        }, frame.x + frame.width + shadowReach(s.blur), 'evenodd');
         ctx.restore();
     }
 }
-/** Corners as part of a key. */
-function cornerKey(c) {
-    return `${c.x.join(',')}/${c.y.join(',')}`;
-}
-/**
- * An outer shadow drawn once on a surface of its own and composited: the
- * shape's shadow, and where `box` is given the box cut out of it — so a box
- * that shows what is behind it shows no shadow there, with the clip on the
- * small surface rather than the window. False where there is no surface.
- */
-function bakedOuter(ctx, options, s, color, shape, around, box) {
-    if (!options.cached || !ctx.drawImage)
-        return false;
-    const reach = shadowReach(s.blur) + 1;
-    const x0 = Math.floor(shape.x) - reach;
-    const y0 = Math.floor(shape.y) - reach;
-    const w = Math.ceil(shape.x + shape.width) + reach - x0;
-    const h = Math.ceil(shape.y + shape.height) + reach - y0;
-    const sx = shape.x - x0;
-    const sy = shape.y - y0;
-    const cut = box && {
-        x: box.rect.x - x0,
-        y: box.rect.y - y0,
-        width: box.rect.width,
-        height: box.rect.height,
-    };
-    const key = [
-        'shadow',
-        w,
-        h,
-        sx,
-        sy,
-        shape.width,
-        shape.height,
-        cornerKey(around),
-        s.blur,
-        color,
-        cut
-            ? `${cut.x},${cut.y},${cut.width},${cut.height},${cornerKey(box.corners)}`
-            : '',
-    ].join('|');
-    const image = options.cached(key, w, h, (sctx) => {
-        if (cut) {
-            sctx.save();
-            sctx.beginPath();
-            sctx.rect(0, 0, w, h);
-            roundedRect(sctx, cut.x, cut.y, cut.width, cut.height, box.corners, true, true);
-            sctx.clip();
-        }
-        fillShadow(sctx, s, color, (dx) => {
-            roundedRect(sctx, sx - dx, sy, shape.width, shape.height, around);
-        }, sx + shape.width + reach);
-        if (cut)
-            sctx.restore();
-    });
-    if (!image)
-        return false;
-    ctx.drawImage(image, x0, y0);
-    return true;
-}
-/**
- * An inset shadow drawn once on a surface the size of the padding box and
- * composited: a frame around the hole, whose shadow falls inside, clipped
- * to the padding box's corners on the surface. False where there is none.
- */
-function bakedInset(ctx, options, s, color, pad, inner, hole, within) {
-    if (!options.cached || !ctx.drawImage)
-        return false;
-    const w = Math.round(pad.width);
-    const h = Math.round(pad.height);
-    const hx = hole.x - pad.x;
-    const hy = hole.y - pad.y;
-    const reach = shadowReach(s.blur) + Math.abs(s.x) + Math.abs(s.y) + 1;
-    const key = [
-        'inset',
-        w,
-        h,
-        cornerKey(inner),
-        hx,
-        hy,
-        hole.width,
-        hole.height,
-        cornerKey(within),
-        s.blur,
-        color,
-    ].join('|');
-    const image = options.cached(key, w, h, (sctx) => {
-        sctx.save();
-        sctx.beginPath();
-        roundedRect(sctx, 0, 0, w, h, inner);
-        sctx.clip();
-        fillShadow(sctx, s, color, (dx) => {
-            sctx.rect(-reach - dx, -reach, w + 2 * reach, h + 2 * reach);
-            if (hole.width > 0 && hole.height > 0) {
-                roundedRect(sctx, hx - dx, hy, hole.width, hole.height, within, true, true);
-            }
-        }, w + reach + shadowReach(s.blur));
-        sctx.restore();
-    });
-    if (!image)
-        return false;
-    ctx.drawImage(image, pad.x, pad.y);
-    return true;
-}
 /**
  * Fill a shadow's shape: in its colour where it has no blur, and otherwise
  * as the context's shadow of the shape drawn `dx` to the left — clear of
  * the window, its right edge at `right` before the move — with the shadow
  * offset back by as much, so that only the shadow lands.
  */
-function fillShadow(ctx, s, color, shape, right) {
+function fillShadow(ctx, s, color, shape, right, rule = 'nonzero') {
     if (!(s.blur > 0)) {
         ctx.fillStyle = color;
         ctx.beginPath();
         shape(0);
-        ctx.fill();
+        ctx.fill(rule);
         return;
     }
     const dx = Math.ceil(right) + 1;
@@ -994,9 +1104,26 @@ function fillShadow(ctx, s, color, shape, right) {
     ctx.fillStyle = '#000000';
     ctx.beginPath();
     shape(dx);
-    ctx.fill();
+    ctx.fill(rule);
     ctx.restore();
 }
+/**
+ * A shadow's shape, spelled the way a 2d context recognises one: a `rect`,
+ * or a `roundRect` with each corner's own radii, elliptical where the
+ * corner is. react-x11's contexts draw the blurred shadow of such a shape —
+ * and of a `rect` less such a shape, filled `evenodd` — from a tile they
+ * keep, where one built of curves they blur afresh on every fill.
+ */
+function shadowShape(ctx, x, y, w, h, c) {
+    if (c.x.every((r) => r === 0) || c.y.every((r) => r === 0)) {
+        ctx.rect(x, y, w, h);
+        return;
+    }
+    // a circular corner as the number every context has always taken; only
+    // an elliptical one as the point
+    const corner = (i) => c.x[i] === c.y[i] ? c.x[i] : { x: c.x[i], y: c.y[i] };
+    ctx.roundRect(x, y, w, h, [corner(0), corner(1), corner(2), corner(3)]);
+}
 /**
  * The band between two rounded rectangles, the inner inside the outer, in
  * the colour already set. Where a side has no band the two edges meet, and
@@ -1043,6 +1170,7 @@ function inFlow(parent, child, options) {
     return (style.overflowX === 'visible' &&
         style.overflowY === 'visible' &&
         opacityOf(child) >= 1 &&
+        !masked(style) &&
         // containment makes it a stacking context, painted whole
         !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT));
 }
@@ -1068,6 +1196,7 @@ function flowFlex(parent, child, options) {
     return (style.overflowX === 'visible' &&
         style.overflowY === 'visible' &&
         !(child.outOfFlow && style.clip) &&
+        !masked(style) &&
         !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT));
 }
 /**
@@ -1294,7 +1423,55 @@ function paintPositioned(ctx, box, options) {
             return;
         }
     }
-    paintBox(ctx, box, options);
+    paintBox(ctx, box, atViewport(box, options));
+}
+/**
+ * The options a box is painted with where it is fixed to the viewport
+ * (CSS 2.1 9.6.1): laid out against the viewport at the document's top,
+ * and drawn where the viewport is now, however far the pane that scrolls
+ * the element has moved it — a fixed header scrolled away with the text.
+ * Once for a box and all it holds.
+ */
+function atViewport(box, options) {
+    const viewport = options.viewport;
+    if (!viewport || options.atViewport || !fixedToViewport(box)) {
+        return options;
+    }
+    // where the document's top left is from the viewport's, less where the
+    // viewport is in the document: the scroll
+    const root = rootOf(box);
+    const dx = viewport.x - options.originX - root.x;
+    const dy = viewport.y - options.originY - root.y;
+    return {
+        ...options,
+        originX: options.originX + dx,
+        originY: options.originY + dy,
+        atViewport: true,
+    };
+}
+/** Per tree, its boxes fixed to the viewport (`fixedToViewport`), found
+ *  as the layout positions them: what the element answers a scroll pane's
+ *  blit with (`HtmlViewNode.viewportFixedRects`). */
+export const FIXED_BOXES = new WeakMap();
+/** Whether a box is fixed to the viewport: `position: fixed` with no
+ *  transformed or contained box around it, which would be its containing
+ *  block instead (CSS Transforms 1, CSS Containment 2, 3.3). */
+export function fixedToViewport(box) {
+    if (box.style.position !== 'fixed')
+        return false;
+    for (let at = box.parent; at?.parent; at = at.parent) {
+        if (at.style.translate || at.style.transformTranslate)
+            return false;
+        if (contained(at, CONTAIN_LAYOUT | CONTAIN_PAINT))
+            return false;
+    }
+    return true;
+}
+function rootOf(box) {
+    let root = box;
+    while (root.parent)
+        root = root.parent;
+    return root;
 }
 /**
  * The box an out-of-flow box is positioned in, whose clips are the ones it
@@ -1713,6 +1890,9 @@ function stacksLayers(box) {
         return true;
     if (style.opacity < 1 || FADED_BLOCKS.has(box))
         return true;
+    // and so does a mask, which is applied to the group (CSS Masking 1, 7)
+    if (masked(style))
+        return true;
     // layout and paint containment make one (CSS Containment 2, 3.3, 3.5)
     if (contained(box, CONTAIN_LAYOUT | CONTAIN_PAINT))
         return true;
@@ -1732,7 +1912,7 @@ function flexItem(box) {
  * outside a box that clips where its containing block is, a fixed one
  * outside every one, and a relative one inside every one.
  */
-function clipsFor(box, context) {
+export function clipsFor(box, context) {
     let from = box.parent;
     if (box.outOfFlow) {
         const fixed = box.style.position === 'fixed';
@@ -1759,6 +1939,7 @@ function clipsFor(box, context) {
  * parent painted it, it was. A clip of no area leaves none of it to paint.
  */
 function paintStacked(ctx, box, options) {
+    options = atViewport(box, options);
     if (!intersects(box, options))
         return;
     const between = CLIPS_BETWEEN.get(box);
@@ -1922,7 +2103,8 @@ function paintBackground(ctx, box, options, style) {
         // box, which is where it starts, and repeated under the borders — or
         // the viewport's, where it is fixed; its line runs across the whole of
         // it, not the part this paint reaches
-        const fixed = style.backgroundAttachment === 'fixed' && options.canvas;
+        const fixed = style.backgroundAttachment === 'fixed' &&
+            (options.viewport ?? options.canvas);
         const origin = fixed || originBox(box, options, style);
         const at = snapped(origin.x, origin.y, origin.width, origin.height);
         if (rounded && style.backgroundSize !== 'auto' && ctx.clip) {
@@ -2298,7 +2480,7 @@ const MAX_TILES = 4096;
  */
 function paintBackgroundImage(ctx, style, area, at, options, corners = null) {
     if (style.backgroundAttachment === 'fixed' && options.canvas) {
-        at = options.canvas;
+        at = options.viewport ?? options.canvas;
     }
     const url = style.backgroundImage;
     const loaded = url ? options.backgroundImageFor?.(url) : null;
@@ -3359,7 +3541,7 @@ function paintLines(ctx, box, options) {
     for (const line of visible) {
         if (line.background)
             paintLineBackground(ctx, line, options);
-        paintInlineBoxes(ctx, line, options, line === lines[0] ? null : bleeds);
+        paintInlineBoxes(ctx, line, lines, options, line === lines[0] ? null : bleeds);
         for (const text of line.texts) {
             const natural = text.layout.lines[text.layoutLine];
             if (natural)
@@ -3803,27 +3985,22 @@ function paintLineBackground(ctx, line, options) {
         style: background.style,
     }, options);
 }
-function paintInlineBoxes(ctx, line, options, 
-/** Where a fragment that reaches up over the lines before goes, to be
- *  drawn again over their text; null for a block's first line. */
-bleeds = null) {
-    let fragments = null;
-    const widen = (box, left, right) => {
-        fragments ??= new Map();
-        const f = fragments.get(box);
-        if (f) {
-            f.left = Math.min(f.left, left);
-            f.right = Math.max(f.right, right);
-        }
-        else {
-            fragments.set(box, { left, right, start: false, end: false });
-        }
-    };
-    // Every text on a line is drawn on one baseline (`finishLine`), and an
-    // engine's is from the top of its layout rather than of the line. Taken
-    // where the line has each text: a box `position: relative` moves is
-    // moved by its own offset below, and the boxes around it are not.
-    let baseline = line.y + line.baseline;
+/**
+ * The fragments of the decorated inline boxes on a line: how far across it
+ * each reaches, its border box, and whether the box opens or closes on it.
+ * Where the line holds text `position: relative` moved, taken where the
+ * text was: a fragment is moved by its own box's offset.
+ *
+ * A box is more than one fragment on a line where bidi reordering puts
+ * what is not the box's between parts of it (CSS 2.1 9.10): a letter of
+ * another element, an atomic, another element's edge. Its parts are one
+ * fragment wherever nothing else comes between them, whatever room is
+ * between them — a space it hangs, a box of its own inside it — so a line
+ * that reads one way has one fragment of each box, as it always had.
+ */
+function fragmentsOn(line) {
+    /** What is on the line, where, and which decorated boxes it is in. */
+    const marks = [];
     const shifted = SHIFTED_LINES.has(line);
     for (const text of line.texts) {
         const natural = text.layout.lines[text.layoutLine];
@@ -3831,8 +4008,6 @@ bleeds = null) {
         if (!natural || !boxAt)
             continue;
         const shift = shifted ? TEXT_SHIFTS.get(text) : undefined;
-        const raise = shifted ? (TEXT_RAISES.get(text) ?? 0) : 0;
-        baseline = text.drawY - (shift?.y ?? 0) + raise + natural.baseline;
         const x = text.drawX - (shift?.x ?? 0) + natural.x;
         for (const run of natural.runs) {
             const owner = boxAt.call(text.spans, run.start);
@@ -3844,45 +4019,147 @@ bleeds = null) {
             const right = Math.min(x + natural.width, x + run.x + run.width);
             if (right <= left)
                 continue;
-            for (const box of decoratedAncestors(owner))
-                widen(box, left, right);
+            marks.push({ left, right, boxes: decoratedAncestors(owner) });
+        }
+        // and the spaces `pre-wrap` keeps that the line ends on, which hang
+        // past it and are their box's all the same (`LineText.hung`)
+        for (const space of text.hung ?? []) {
+            const owner = boxAt.call(text.spans, space.at);
+            if (!owner)
+                continue;
+            const left = text.drawX - (shift?.x ?? 0) + space.x;
+            marks.push({
+                left,
+                right: left + space.width,
+                boxes: decoratedAncestors(owner),
+            });
         }
     }
     for (const placed of line.atomics) {
         const atomic = placed.box;
-        for (const box of decoratedAncestors(atomic)) {
-            widen(box, placed.x - atomic.marginLeft, placed.x + atomic.width + atomic.marginRight);
-        }
+        marks.push({
+            left: placed.x - atomic.marginLeft,
+            right: placed.x + atomic.width + atomic.marginRight,
+            boxes: decoratedAncestors(atomic),
+        });
     }
     for (const edge of line.edges ?? []) {
-        const box = edge.box;
-        if (!box.decoration)
-            continue;
-        // The element's `direction` says which side its start is on, whatever
-        // its text reads as (CSS 2.1 8.6); the edge's margin is outside the box,
-        // its border and padding inside.
-        const onLeft = (edge.side === 'start') !== (box.style.direction === 'rtl');
-        if (onLeft) {
-            const left = edge.x + box.marginLeft;
-            widen(box, left, left);
+        marks.push({
+            left: edge.x,
+            right: edge.x + edge.width,
+            boxes: decoratedAncestors(edge.box),
+            edge,
+        });
+    }
+    let fragments = null;
+    // each box's parts, left to right
+    const parts = new Map();
+    for (const mark of marks) {
+        for (const box of mark.boxes) {
+            let list = parts.get(box);
+            if (!list)
+                parts.set(box, (list = []));
+            list.push(mark);
         }
-        else {
-            const right = edge.x + edge.width - box.marginRight;
-            widen(box, right, right);
+        const own = mark.edge?.box;
+        if (own?.decoration) {
+            let list = parts.get(own);
+            if (!list)
+                parts.set(own, (list = []));
+            list.push(mark);
         }
-        const f = fragments.get(box);
-        if (edge.side === 'start')
-            f.start = true;
-        else
-            f.end = true;
     }
+    for (const [box, list] of parts) {
+        list.sort((a, b) => a.left - b.left || a.right - b.right);
+        const out = [];
+        let open = null;
+        let reach = -Infinity;
+        for (const mark of list) {
+            // The element's `direction` says which side its start is on, whatever
+            // its text reads as (CSS 2.1 8.6); its own edge's margin is outside
+            // the box, its border and padding inside.
+            let left = mark.left;
+            let right = mark.right;
+            const own = mark.edge?.box === box ? mark.edge : null;
+            if (own) {
+                const onLeft = (own.side === 'start') !== (box.style.direction === 'rtl');
+                if (onLeft)
+                    left = right = own.x + box.marginLeft;
+                else
+                    left = right = own.x + own.width - box.marginRight;
+            }
+            if (!open || between(marks, box, reach, mark.left)) {
+                open = { left, right, start: false, end: false };
+                out.push(open);
+            }
+            else {
+                open.left = Math.min(open.left, left);
+                open.right = Math.max(open.right, right);
+            }
+            reach = Math.max(reach, mark.right);
+            if (own) {
+                if (own.side === 'start')
+                    open.start = true;
+                else
+                    open.end = true;
+            }
+        }
+        (fragments ??= new Map()).set(box, out);
+    }
+    return fragments;
+}
+/** Whether anything on a line that is not in a box lies between two of its
+ *  parts, from `left` to `right`: what splits it into two fragments. */
+function between(marks, box, left, right) {
+    if (right - left < 0.5)
+        return false;
+    for (const mark of marks) {
+        if (mark.right - mark.left < 0.5)
+            continue;
+        if (mark.boxes.includes(box) || mark.edge?.box === box)
+            continue;
+        const middle = (mark.left + mark.right) / 2;
+        if (middle > left && middle < right)
+            return true;
+    }
+    return false;
+}
+function paintInlineBoxes(ctx, line, 
+/** The block's lines, which `line` is one of. */
+lines, options, 
+/** Where a fragment that reaches up over the lines before goes, to be
+ *  drawn again over their text; null for a block's first line. */
+bleeds = null) {
+    const fragments = fragmentsOn(line);
     if (!fragments)
         return;
+    // Every text on a line is drawn on one baseline (`finishLine`), and an
+    // engine's is from the top of its layout rather than of the line. Taken
+    // where the line has each text: a box `position: relative` moves is
+    // moved by its own offset below, and the boxes around it are not.
+    let baseline = line.y + line.baseline;
+    const shifted = SHIFTED_LINES.has(line);
+    for (const text of line.texts) {
+        const natural = text.layout.lines[text.layoutLine];
+        if (!natural || !text.spans.boxAt)
+            continue;
+        const shift = shifted ? TEXT_SHIFTS.get(text) : undefined;
+        const raise = shifted ? (TEXT_RAISES.get(text) ?? 0) : 0;
+        baseline = text.drawY - (shift?.y ?? 0) + raise + natural.baseline;
+    }
     const boxes = [...fragments.keys()].sort((a, b) => depthOf(a) - depthOf(b));
     for (const box of boxes) {
         if (box.style.visibility !== 'visible')
             continue;
-        const f = fragments.get(box);
+        for (const f of fragments.get(box)) {
+            paintInlineFragment(ctx, line, lines, options, bleeds, box, f, baseline);
+        }
+    }
+}
+/** One fragment of an inline box on a line (`paintInlineBoxes`). */
+function paintInlineFragment(ctx, line, lines, options, bleeds, box, f, baseline) {
+    const shifted = SHIFTED_LINES.has(line);
+    {
         const face = box.decoration;
         // on its own baseline, which `vertical-align` may raise off the line's
         const own = shifted
@@ -3917,10 +4194,15 @@ bleeds = null) {
             style,
         };
         if (fragment.width <= 0)
-            continue;
-        // its images from its own padding box, as its gradients are, each
-        // fragment alike: `slice` would lay them out as though the fragments
-        // were one box end to end, which a box on one line is
+            return;
+        // its images and gradients from the strip its fragments make, where it
+        // goes on to another line, and from its own padding box where it is
+        // on this one alone or `clone` says each fragment is its own
+        if (!(f.start && f.end) && sliced(box.style)) {
+            const strip = stripFor(lines, line, box, fragment);
+            if (strip)
+                fragment.strip = strip;
+        }
         paintLayers(ctx, fragment, options, frameImages(ctx, fragment, options));
         paintBorders(ctx, fragment, options);
         if (box.style.outlineStyle !== 'none')
@@ -3930,6 +4212,76 @@ bleeds = null) {
         }
     }
 }
+/** Whether an inline box places background images or gradients, which
+ *  `slice` places across its fragments, as one box end to end. */
+function sliced(style) {
+    return (style.boxDecorationBreak === 'slice' &&
+        (style.backgroundImage !== null ||
+            style.backgroundGradient !== null ||
+            style.backgroundImages !== null));
+}
+/** Of a block's lines, by the array they are, the strip of each inline box
+ *  on them that `sliced` says places images across its fragments: made
+ *  once a layout, as `MOVED_OFF_LINES` is, so a repaint of one line reads
+ *  the lines before it without going over them again. What `sliced` reads
+ *  is never restyled in place (`HtmlViewNode`), which lays the lines out
+ *  again instead. */
+const STRIPS = new WeakMap();
+function stripsOf(lines) {
+    const strips = new Map();
+    for (const line of lines) {
+        const fragments = fragmentsOn(line);
+        if (!fragments)
+            continue;
+        for (const [box, list] of fragments) {
+            if (!sliced(box.style))
+                continue;
+            let strip = strips.get(box);
+            if (!strip) {
+                strip = { width: 0, lines: 0, before: new Map() };
+                strips.set(box, strip);
+            }
+            strip.before.set(line, strip.width);
+            for (const f of list)
+                strip.width += Math.max(0, f.right - f.left);
+            strip.lines += 1;
+        }
+    }
+    return strips;
+}
+/**
+ * The box an inline box's fragment on `line` is a slice of (CSS
+ * Fragmentation 3, 5.4): the box's fragments laid end to end in its
+ * direction, as though it had not wrapped — as wide as
+ * they are together, with the box's own borders and padding at its two
+ * ends, placed so that this fragment is where it falls along it. So an
+ * image `no-repeat` at the start is on the first fragment alone, and a
+ * gradient runs once across them all. Undefined where the box is on one
+ * line.
+ */
+function stripFor(lines, line, box, fragment) {
+    let strips = STRIPS.get(lines);
+    if (!strips) {
+        strips = stripsOf(lines);
+        STRIPS.set(lines, strips);
+    }
+    const strip = strips.get(box);
+    const before = strip?.before.get(line);
+    if (!strip || strip.lines < 2 || before === undefined)
+        return undefined;
+    const x = box.style.direction === 'rtl'
+        ? fragment.x + fragment.width + before - strip.width
+        : fragment.x - before;
+    return {
+        ...fragment,
+        x,
+        width: strip.width,
+        borderLeft: box.borderLeft,
+        borderRight: box.borderRight,
+        padLeft: box.padLeft,
+        padRight: box.padRight,
+    };
+}
 /** An inline box's style on a line it does not both start and end on: no
  *  rounded corner on a side it goes on from. Made once a style and a pair
  *  of ends, so a repaint copies no style and the layers made of it are
@@ -3990,6 +4342,20 @@ function decoratedAncestors(box) {
     DECORATED.set(box, found);
     return found;
 }
+/** A restyle in place (a `:hover`) gave an inline box a decoration where it
+ *  had none, or took it away, and the lists kept above do not know: every
+ *  box whose list could name it — inside it, through the inline boxes the
+ *  walk above climbs — looks again. A document built again has new boxes,
+ *  and so no lists. */
+export function forgetDecoratedAncestors(box) {
+    const stack = [...box.children];
+    while (stack.length) {
+        const at = stack.pop();
+        DECORATED.delete(at);
+        if (at.kind === 'inline')
+            stack.push(...at.children);
+    }
+}
 /**
  * The band the document selection covers on one line.
  *