@react-x11/components 0.11.0 → 0.12.0

package/src/html/paint.ts

@@ -43,12 +43,14 @@ import {
   CONTAIN_PAINT,
   CONTAIN_SIZE,
   copyStyle,
+  masked,
   scrolls,
 } from './css/style.js';
 import { contained } from './layout/block.js';
 import {
   BOX_RAISES,
   LINE_BOX_RAISES,
+  PADDED_FACES,
   Box,
   CLAMPED,
   CLIPPED_CELLS,
@@ -62,7 +64,13 @@ import {
   TEXT_RAISES,
   TEXT_SHIFTS,
 } from './layout/boxes.js';
-import type { BoxTree, LineBox, LineText, Marker } from './layout/boxes.js';
+import type {
+  BoxTree,
+  EdgePlacement,
+  LineBox,
+  LineText,
+  Marker,
+} from './layout/boxes.js';
 import {
   CLIPPED_TEXT,
   clipBoxOf,
@@ -89,7 +97,13 @@ export interface Rect {
 export interface PaintContext extends FillContext {
   beginPath?(): void;
   rect?(x: number, y: number, w: number, h: number): void;
-  roundRect?(x: number, y: number, w: number, h: number, radii: number[]): void;
+  roundRect?(
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    radii: (number | { x: number; y: number })[],
+  ): void;
   moveTo?(x: number, y: number): void;
   lineTo?(x: number, y: number): void;
   bezierCurveTo?(
@@ -120,6 +134,15 @@ export interface PaintContext extends FillContext {
   translate?(x: number, y: number): void;
   /** What every drawing is multiplied by: an element's `opacity`. */
   globalAlpha?: number;
+  /** How a drawing meets what is under it; a value a backend does not
+   *  have does not stick, and reads back as the one before. */
+  globalCompositeOperation?: string;
+}
+
+/** An offscreen surface, as painting uses one. */
+export interface Offscreen {
+  getContext(kind: '2d'): unknown;
+  destroy?(): void;
 }
 
 export interface PaintOptions {
@@ -142,6 +165,18 @@ export interface PaintOptions {
   /** The whole element in window coordinates: the canvas the root's
    *  background covers (CSS 2.1 14.2). Absent, the root box is it. */
   canvas?: Rect;
+  /** The viewport the document is seen through, in window coordinates:
+   *  the scroll pane's, where one scrolls the element. What a fixed
+   *  background is placed against (CSS 2.1 14.2.1) and where a fixed box
+   *  is drawn (9.6.1), both laid out against the viewport at the
+   *  document's top. Absent, the element is it. */
+  viewport?: Rect;
+  /** @internal Painting a fixed box already moved to the viewport. */
+  atViewport?: boolean;
+  /** A transparent surface `width` by `height` to draw on and composite
+   *  with `drawImage`, the caller's to `destroy` once it has: a masked
+   *  element is drawn on one. Null where there is no surface to be had. */
+  surface?(width: number, height: number): Offscreen | null;
   /** A drawing made once for its key on a surface `width` by `height` and
    *  kept, to be drawn with `drawImage`: a blurred shadow, whose blur is
    *  the cost. Null where there is no surface to be had. */
@@ -167,6 +202,14 @@ export interface PaintOptions {
  * 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<Box, number>();
+
 export function computePaintBounds(box: Box, moved = false): number {
   // A box with no rectangle of its own gives only what it holds: nothing,
   // until a child with bounds is met.
@@ -178,8 +221,12 @@ export function computePaintBounds(box: Box, moved = false): number {
   // 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;
@@ -201,6 +248,27 @@ export function computePaintBounds(box: Box, moved = false): number {
     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;
@@ -254,6 +322,7 @@ export function computePaintBounds(box: Box, moved = false): number {
     }
     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);
     y1 = Math.min(y1, child.boundsY);
@@ -297,7 +366,7 @@ export function computePaintBounds(box: Box, moved = false): number {
   if (!own) 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;
   return box.parent &&
@@ -322,6 +391,55 @@ export function hasRect(box: Box): boolean {
   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: Box,
+): { x1: number; y1: number; x2: number; y2: number } | null {
+  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;
@@ -507,7 +625,7 @@ function paintCanvas(
       // 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,
@@ -635,12 +753,14 @@ function paddingBox(box: Box, options: PaintOptions): Rect {
 }
 
 /** Where a layer of a box's background is placed, in window coordinates:
- *  the box its `background-origin` names (CSS Backgrounds 3, 3.8). */
+ *  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(
-  box: Frame,
+  frame: Frame,
   options: PaintOptions,
   style: ComputedStyle,
 ): Rect {
+  const box = frame.strip ?? frame;
   const [t, r, b, l] = edgeInsets(box, style.backgroundOrigin);
   return {
     x: box.x + l + options.originX,
@@ -718,7 +838,12 @@ type Frame = Pick<
   | 'style'
 > &
   // the padding a `content-box` background is inset by, where it has any
-  Partial<Pick<Box, 'padTop' | 'padRight' | 'padBottom' | 'padLeft'>>;
+  Partial<Pick<Box, 'padTop' | 'padRight' | 'padBottom' | 'padLeft'>> & {
+    /** Of an inline box's fragment, where the box goes on to another line:
+     *  its fragments laid end to end as one box, which its images and
+     *  gradients are placed in (`box-decoration-break: slice`). */
+    strip?: Frame;
+  };
 
 /** Where a box's background and border go: its border box, which for a
  *  table leaves out the captions around it (CSS 2.1 17.4). */
@@ -752,8 +877,13 @@ function paintBox(ctx: PaintContext, box: Box, options: PaintOptions): void {
     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);
@@ -763,6 +893,145 @@ function paintBox(ctx: PaintContext, box: Box, options: PaintOptions): void {
   if (fade) ctx.restore();
 }
 
+/** A box and what it holds, cut to its `clip` as `paintBox` cuts it. */
+function paintClipped(
+  ctx: PaintContext,
+  box: Box,
+  options: PaintOptions,
+): void {
+  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<ComputedStyle, ComputedStyle[]>();
+
+/** 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: ComputedStyle['borderRadius'] = [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: ComputedStyle): ComputedStyle[] {
+  let layers = MASK_LAYERS.get(style);
+  if (layers) return layers;
+  const mask = style.mask;
+  const nth = <T>(list: readonly T[], i: number): T => list[i % list.length];
+  layers = mask.images.map((image, i) => {
+    const layer = Object.create(style) as ComputedStyle;
+    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: PaintContext,
+  box: Box,
+  options: PaintOptions,
+): boolean {
+  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') as PaintContext;
+    const mctx = mask.getContext('2d') as PaintContext;
+    // the surfaces' own coordinates, the window's moved to their corner
+    const on: PaintOptions = {
+      ...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: PaintContext,
   box: Box,
@@ -1047,19 +1316,6 @@ function paintShadows(
         );
         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) {
@@ -1088,7 +1344,7 @@ function paintShadows(
         s,
         color,
         (dx) => {
-          roundedRect(
+          shadowShape(
             ctx,
             shape.x - dx,
             shape.y,
@@ -1151,7 +1407,6 @@ function paintShadows(
       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();
     ctx.beginPath();
@@ -1172,173 +1427,23 @@ function paintShadows(
       (dx) => {
         ctx.rect!(frame.x - dx, frame.y, frame.width, frame.height);
         if (hole.width > 0 && hole.height > 0) {
-          roundedRect(
+          shadowShape(
             ctx,
             hole.x - dx,
             hole.y,
             hole.width,
             hole.height,
             within,
-            true,
-            true,
           );
         }
       },
       frame.x + frame.width + shadowReach(s.blur),
+      'evenodd',
     );
     ctx.restore();
   }
 }
 
-/** Corners as part of a key. */
-function cornerKey(c: Corners): string {
-  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: PaintContext,
-  options: PaintOptions,
-  s: BoxShadow,
-  color: string,
-  shape: Rect,
-  around: Corners,
-  box: { rect: Rect; corners: Corners } | null,
-): boolean {
-  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: PaintContext,
-  options: PaintOptions,
-  s: BoxShadow,
-  color: string,
-  pad: Rect,
-  inner: Corners,
-  hole: Rect,
-  within: Corners,
-): boolean {
-  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
@@ -1351,12 +1456,13 @@ function fillShadow(
   color: string,
   shape: (dx: number) => void,
   right: number,
+  rule: 'nonzero' | 'evenodd' = 'nonzero',
 ): void {
   if (!(s.blur > 0)) {
     ctx.fillStyle = color;
     ctx.beginPath!();
     shape(0);
-    ctx.fill!();
+    ctx.fill!(rule);
     return;
   }
   const dx = Math.ceil(right) + 1;
@@ -1368,10 +1474,36 @@ function fillShadow(
   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: PaintContext,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  c: Corners,
+): void {
+  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: number) =>
+    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
@@ -1445,6 +1577,7 @@ function inFlow(parent: Box, child: Box, options: PaintOptions): boolean {
     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)
   );
@@ -1472,6 +1605,7 @@ function flowFlex(parent: Box, child: Box, options: PaintOptions): boolean {
     style.overflowX === 'visible' &&
     style.overflowY === 'visible' &&
     !(child.outOfFlow && style.clip) &&
+    !masked(style) &&
     !contained(child, CONTAIN_LAYOUT | CONTAIN_PAINT)
   );
 }
@@ -1744,7 +1878,55 @@ function paintPositioned(
       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: Box, options: PaintOptions): PaintOptions {
+  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<object, Box[]>();
+
+/** 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: Box): boolean {
+  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: Box): Box {
+  let root = box;
+  while (root.parent) root = root.parent;
+  return root;
 }
 
 /**
@@ -2212,6 +2394,8 @@ function stacksLayers(box: Box): boolean {
   const style = box.style;
   if (style.position === 'fixed' || style.position === 'sticky') 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;
   if (typeof style.zIndex !== 'number') return false;
@@ -2231,7 +2415,7 @@ function flexItem(box: Box): boolean {
  * 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: Box, context: Box): Box[] {
+export function clipsFor(box: Box, context: Box): Box[] {
   let from: Box | null = box.parent;
   if (box.outOfFlow) {
     const fixed = box.style.position === 'fixed';
@@ -2261,6 +2445,7 @@ function paintStacked(
   box: Box,
   options: PaintOptions,
 ): void {
+  options = atViewport(box, options);
   if (!intersects(box, options)) return;
   const between = CLIPS_BETWEEN.get(box);
   if (!between) {
@@ -2439,7 +2624,9 @@ function paintBackground(
     // 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) {
@@ -2929,7 +3116,7 @@ function paintBackgroundImage(
   corners: Corners | null = null,
 ): void {
   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;
@@ -4157,7 +4344,13 @@ function paintLines(ctx: PaintContext, box: Box, options: PaintOptions): void {
   const bleeds: Bleed[] = [];
   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)
@@ -4690,38 +4883,34 @@ function paintLineBackground(
   );
 }
 
-function paintInlineBoxes(
-  ctx: PaintContext,
-  line: LineBox,
-  options: PaintOptions,
-  /** 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: Bleed[] | null = null,
-): void {
-  let fragments: Map<Box, InlineFragment> | null = null;
-  const widen = (box: Box, left: number, right: number): void => {
-    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: LineBox): Map<Box, InlineFragment[]> | null {
+  /** What is on the line, where, and which decorated boxes it is in. */
+  const marks: {
+    left: number;
+    right: number;
+    boxes: readonly Box[];
+    /** An edge's own box, whose fragment it opens or closes. */
+    edge?: EdgePlacement;
+  }[] = [];
   const shifted = SHIFTED_LINES.has(line);
   for (const text of line.texts) {
     const natural = text.layout.lines[text.layoutLine];
     const boxAt = text.spans.boxAt;
     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);
@@ -4731,44 +4920,159 @@ function paintInlineBoxes(
       const left = Math.max(x, x + run.x);
       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);
-    } else {
-      const right = edge.x + edge.width - box.marginRight;
-      widen(box, right, right);
+    marks.push({
+      left: edge.x,
+      right: edge.x + edge.width,
+      boxes: decoratedAncestors(edge.box),
+      edge,
+    });
+  }
+  let fragments: Map<Box, InlineFragment[]> | null = null;
+  // each box's parts, left to right
+  const parts = new Map<Box, typeof marks>();
+  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);
     }
-    const f = fragments!.get(box)!;
-    if (edge.side === 'start') f.start = true;
-    else f.end = true;
+    const own = mark.edge?.box;
+    if (own?.decoration) {
+      let list = parts.get(own);
+      if (!list) parts.set(own, (list = []));
+      list.push(mark);
+    }
+  }
+  for (const [box, list] of parts) {
+    list.sort((a, b) => a.left - b.left || a.right - b.right);
+    const out: InlineFragment[] = [];
+    let open: InlineFragment | null = 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: readonly {
+    left: number;
+    right: number;
+    boxes: readonly Box[];
+    edge?: EdgePlacement;
+  }[],
+  box: Box,
+  left: number,
+  right: number,
+): boolean {
+  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: PaintContext,
+  line: LineBox,
+  /** The block's lines, which `line` is one of. */
+  lines: readonly LineBox[],
+  options: PaintOptions,
+  /** 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: Bleed[] | null = null,
+): void {
+  const fragments = fragmentsOn(line);
   if (!fragments) return;
-  const boxes = [...(fragments as Map<Box, InlineFragment>).keys()].sort(
-    (a, b) => depthOf(a) - depthOf(b),
-  );
+  // 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 as Map<Box, InlineFragment>).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: PaintContext,
+  line: LineBox,
+  lines: readonly LineBox[],
+  options: PaintOptions,
+  bleeds: Bleed[] | null,
+  box: Box,
+  f: InlineFragment,
+  baseline: number,
+): void {
+  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
@@ -4802,10 +5106,14 @@ function paintInlineBoxes(
       padRight: rightEnds ? box.padRight : 0,
       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
+    if (fragment.width <= 0) 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') paintOutline(ctx, fragment, options);
@@ -4815,6 +5123,93 @@ function paintInlineBoxes(
   }
 }
 
+/** Whether an inline box places background images or gradients, which
+ *  `slice` places across its fragments, as one box end to end. */
+function sliced(style: ComputedStyle): boolean {
+  return (
+    style.boxDecorationBreak === 'slice' &&
+    (style.backgroundImage !== null ||
+      style.backgroundGradient !== null ||
+      style.backgroundImages !== null)
+  );
+}
+
+/** Where an inline box's fragments sit along the strip they make laid end
+ *  to end: how wide it is, on how many lines, and how far along it each
+ *  line's fragment starts, in the box's direction. */
+interface Strip {
+  width: number;
+  lines: number;
+  before: Map<LineBox, number>;
+}
+
+/** 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<readonly LineBox[], Map<Box, Strip>>();
+
+function stripsOf(lines: readonly LineBox[]): Map<Box, Strip> {
+  const strips = new Map<Box, Strip>();
+  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: readonly LineBox[],
+  line: LineBox,
+  box: Box,
+  fragment: Frame,
+): Frame | undefined {
+  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
@@ -4892,6 +5287,20 @@ function decoratedAncestors(box: Box): Box[] {
   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: Box): void {
+  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.
  *