@react-x11/components 0.14.0 → 0.16.0

package/dist/html/paint.js

@@ -29,7 +29,7 @@ import { contained, placedMatrix } from './layout/block.js';
 import { BOX_RAISES, LINE_BOX_RAISES, PADDED_FACES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, columned, 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';
+import { SvgDrawing, concreteSize, inlineDrawing } from './svg.js';
 /**
  * The bounds of everything a box and its descendants draw, in document
  * coordinates, into `boundsX`…, with the text `position: relative` moved off
@@ -494,6 +494,7 @@ export function paintDocument(ctx, tree, options) {
         canvasSource: canvas?.source,
         negative: tree.negative,
         selectionStyler: options.selection ? tree.selectionStyler : null,
+        shapeStyler: tree.shapeStyler,
     });
     ctx.restore();
 }
@@ -695,7 +696,8 @@ function originBox(frame, options, style) {
  * it falls nearest, as browsers snap a box — boxes that meet share the
  * column their edge is in, and a rule 1.33px wide is one pixel, not two —
  * with the border box's corners less the widths between (5.3), where
- * `rounded` asks for them. Null where it has no area.
+ * `rounded` asks for them — cut to what the paint reaches (`clampArea`).
+ * Null where it has no area there.
  */
 function clipArea(box, options, style, rounded) {
     const left = box.x + options.originX;
@@ -715,7 +717,7 @@ function clipArea(box, options, style, rounded) {
     if (corners && (t || r || b || l)) {
         corners = spreadCorners(corners, box.width, frameHeight(box), -t, -r, -b, -l);
     }
-    return { x, y, w, h, corners };
+    return clampArea(options, x, y, w, h, corners);
 }
 /** 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). */
@@ -1175,8 +1177,9 @@ function paintContent(ctx, box, options) {
             paintStacked(ctx, child, options);
     }
     if (visible) {
-        if (box.marker)
-            paintMarker(ctx, box.marker, options);
+        if (box.marker) {
+            paintMarker(ctx, box.marker, options, box.style.colorScheme);
+        }
         if (box.replaced === 'image')
             paintImage(ctx, box, options);
         else if (box.replaced === 'svg')
@@ -1362,10 +1365,9 @@ const ROW_REACH = 2048;
  */
 function frameImages(ctx, frame, options) {
     return (layer) => {
-        const painted = clipArea(frame, options, layer, true);
-        const area = painted && clampRect(options, painted.x, painted.y, painted.w, painted.h);
+        const area = clipArea(frame, options, layer, true);
         if (area) {
-            paintBackgroundImage(ctx, layer, area, originBox(frame, options, layer), options, painted.corners);
+            paintBackgroundImage(ctx, layer, area, originBox(frame, options, layer), options, area.corners);
         }
     };
 }
@@ -1375,6 +1377,8 @@ function shadowReach(blur) {
     return blur > 0 ? Math.ceil(blur * 1.5) : 0;
 }
 const SQUARE = { x: [0, 0, 0, 0], y: [0, 0, 0, 0] };
+/** A rectangle with no area, where a ring has no inside. */
+const NOWHERE = { x: 0, y: 0, width: 0, height: 0 };
 /** Corners shrunk by `by` — an inner shadow's spread — or grown where it
  *  is negative; a square corner stays square. */
 function grownCorners(c, by) {
@@ -1442,28 +1446,28 @@ function paintShadows(ctx, box, options, inset) {
             if (!clampRect(options, shape.x - reach, shape.y - reach, shape.width + 2 * reach, shape.height + 2 * reach)) {
                 continue;
             }
-            // Cut, as a background is (`clampRect`), to what the paint reaches
+            const around = spreadCorners(corners, rect.width, rect.height, s.spread, s.spread, s.spread, s.spread) ?? SQUARE;
+            // Cut, as a background is (`clampArea`), to what the paint reaches
             // and as far again as the blur does, so the cut edges cast nothing
-            // on it. A shadow down a box thousands of pixels tall went to the
-            // server whole, and its outline, sent in 16.16 fixed point, threw.
-            const within = reach + CLAMP_PAD;
-            const cut = clampAround(options, shape, within);
+            // on it, and the box with it, which a ring is the band outside and
+            // the shadow is clipped out of. A shadow down a box thousands of
+            // pixels tall went to the server whole, and its outline, sent in
+            // 16.16 fixed point, threw.
+            const [cut, own] = clampPair(options, reach + CLAMP_PAD, { rect: shape, corners: around }, { rect, corners });
             if (!cut)
                 continue;
-            Object.assign(shape, cut);
-            const own = clampAround(options, rect, within) ?? rect;
-            const around = spreadCorners(corners, rect.width, rect.height, s.spread, s.spread, s.spread, s.spread) ?? SQUARE;
+            const { x, y, width, height } = cut.rect;
             const color = inkColor(s.color, style.color);
             if (!(s.blur > 0) && !s.x && !s.y && s.spread >= 0 && !covered) {
                 // a ring about the box: the band between it and the spread
                 ctx.fillStyle = color;
-                fillRing(ctx, shape, around, own, corners);
+                fillRing(ctx, cut.rect, cut.corners, own ? own.rect : NOWHERE, own ? own.corners : SQUARE);
                 continue;
             }
             if (!(s.blur > 0) && covered) {
                 // a hard shadow, under a box that hides what falls under it
                 fillShadow(ctx, s, color, (dx) => {
-                    roundedRect(ctx, shape.x - dx, shape.y, shape.width, shape.height, around);
+                    roundedRect(ctx, x - dx, y, width, height, cut.corners);
                 }, 0);
                 continue;
             }
@@ -1472,13 +1476,16 @@ function paintShadows(ctx, box, options, inset) {
             if (clipped) {
                 ctx.save();
                 ctx.beginPath();
-                ctx.rect(shape.x - reach - 1, shape.y - reach - 1, shape.width + 2 * reach + 2, shape.height + 2 * reach + 2);
-                roundedRect(ctx, own.x, own.y, own.width, own.height, corners, true, true);
+                ctx.rect(x - reach - 1, y - reach - 1, width + 2 * reach + 2, height + 2 * reach + 2);
+                if (own) {
+                    const { rect: r } = own;
+                    roundedRect(ctx, r.x, r.y, r.width, r.height, own.corners, true, true);
+                }
                 ctx.clip();
             }
             fillShadow(ctx, s, color, (dx) => {
-                shadowShape(ctx, shape.x - dx, shape.y, shape.width, shape.height, around);
-            }, shape.x + shape.width + reach);
+                shadowShape(ctx, x - dx, y, width, height, cut.corners);
+            }, x + width + reach);
             if (clipped)
                 ctx.restore();
         }
@@ -1503,48 +1510,53 @@ function paintShadows(ctx, box, options, inset) {
             furthest = Math.max(furthest, shadowReach(s.blur) + Math.abs(s.x) + Math.abs(s.y) + 1);
         }
     }
-    const padCut = clampAround(options, pad, furthest + CLAMP_PAD);
-    if (!padCut)
-        return;
-    Object.assign(pad, padCut);
     const inner = insetCorners(corners, box.borderTop, box.borderRight, box.borderBottom, box.borderLeft);
     for (let i = shadows.length - 1; i >= 0; i -= 1) {
         const s = shadows[i];
         if (!s.inset || (s.blur > 0 && !canShadow))
             continue;
         const color = inkColor(s.color, style.color);
-        // the hole the shadow is cast around, moved and shrunk by the spread
-        const hole = {
-            x: pad.x + s.x + s.spread,
-            y: pad.y + s.y + s.spread,
-            width: Math.max(0, pad.width - 2 * s.spread),
-            height: Math.max(0, pad.height - 2 * s.spread),
-        };
-        const within = grownCorners(inner, -s.spread);
+        // The hole the shadow is cast around, moved and shrunk by the spread,
+        // cut with the padding box: made from the cut one, it was a spread in
+        // from the cut rather than from the box's edge, and a spread wider
+        // than the margin left none.
+        const [area, hole] = clampPair(options, furthest + CLAMP_PAD, { rect: pad, corners: inner }, {
+            rect: {
+                x: pad.x + s.x + s.spread,
+                y: pad.y + s.y + s.spread,
+                width: Math.max(0, pad.width - 2 * s.spread),
+                height: Math.max(0, pad.height - 2 * s.spread),
+            },
+            corners: grownCorners(inner, -s.spread),
+        });
+        if (!area)
+            continue;
         if (!(s.blur > 0) && !s.x && !s.y && s.spread >= 0) {
             // Tailwind's `ring-inset`: a band inside the padding edge
             ctx.fillStyle = color;
-            fillRing(ctx, pad, inner, hole, within);
+            fillRing(ctx, area.rect, area.corners, hole ? hole.rect : NOWHERE, hole ? hole.corners : SQUARE);
             continue;
         }
         if (!ctx.clip || !ctx.save || !ctx.rect)
             continue;
+        const { x, y, width, height } = area.rect;
         ctx.save();
         ctx.beginPath();
-        roundedRect(ctx, pad.x, pad.y, pad.width, pad.height, inner);
+        roundedRect(ctx, x, y, width, height, area.corners);
         ctx.clip();
         // a frame around the hole, as wide as the blur and the offset reach
         const reach = shadowReach(s.blur) + Math.abs(s.x) + Math.abs(s.y) + 1;
         const frame = {
-            x: pad.x - reach,
-            y: pad.y - reach,
-            width: pad.width + 2 * reach,
-            height: pad.height + 2 * reach,
+            x: x - reach,
+            y: y - reach,
+            width: width + 2 * reach,
+            height: height + 2 * reach,
         };
         fillShadow(ctx, s, color, (dx) => {
             ctx.rect(frame.x - dx, frame.y, frame.width, frame.height);
-            if (hole.width > 0 && hole.height > 0) {
-                shadowShape(ctx, hole.x - dx, hole.y, hole.width, hole.height, within);
+            if (hole) {
+                const { rect: r } = hole;
+                shadowShape(ctx, r.x - dx, r.y, r.width, r.height, hole.corners);
             }
         }, frame.x + frame.width + shadowReach(s.blur), 'evenodd');
         ctx.restore();
@@ -1742,7 +1754,7 @@ function paintFlowLines(ctx, box, options, outlines) {
         if (!intersects(child, options))
             continue;
         if (child.marker && child.style.visibility === 'visible') {
-            paintMarker(ctx, child.marker, options);
+            paintMarker(ctx, child.marker, options, child.style.colorScheme);
         }
         if (child.lines)
             paintLines(ctx, child, options);
@@ -2776,22 +2788,78 @@ function clampRect(options, x, y, w, h) {
         return null;
     return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
 }
+/**
+ * `clampRect` for a rectangle that may be rounded, with the corners it is
+ * left with. Where no radius is larger than `CLAMP_PAD` they are its own,
+ * and it is cut as a square one is: a corner the cut leaves on a cut edge
+ * curves no further in from it than the margin, which keeps it out of what
+ * is painted. A larger radius, a circle's or a pill's, would bend into it
+ * — a circle 400 across repainted a strip at a time was another shape in
+ * every strip across its curve — so there the window is moved out past
+ * any curve it would cross, and a corner on a side it cut is square
+ * (`cutRounded`, as a rounded border's ring is cut).
+ */
+function clampArea(options, x, y, w, h, corners) {
+    if (corners && curvesPast(corners, CLAMP_PAD)) {
+        const shape = { rect: { x, y, width: w, height: h }, corners };
+        const cut = cutRounded(roundedWindow(options, [shape]), shape);
+        if (!cut)
+            return null;
+        const { rect } = cut;
+        return {
+            x: rect.x,
+            y: rect.y,
+            w: rect.width,
+            h: rect.height,
+            corners: cut.corners,
+        };
+    }
+    const rect = clampRect(options, x, y, w, h);
+    return rect && { x: rect.x, y: rect.y, w: rect.w, h: rect.h, corners };
+}
+/**
+ * Two rounded rectangles drawn against each other — a shadow's shape and
+ * the box it is clipped out of, a hole and what it is cut in — cut to one
+ * window, `pad` round what the paint reaches, as `clampArea` cuts one:
+ * where neither has a corner that curves further than `CLAMP_PAD`, as
+ * square ones are, keeping their corners, and otherwise to a window moved
+ * out past every curve of either it would cross, each square on the sides
+ * it cut. `CLAMP_PAD` and not `pad`, because what a shadow's margin has
+ * past it is what the blur casts back across the cut, and a corner bent
+ * into the margin is cast that far further in. Null for one with nothing
+ * in the window.
+ */
+function clampPair(options, pad, a, b) {
+    if (!curvesPast(a.corners, CLAMP_PAD) && !curvesPast(b.corners, CLAMP_PAD)) {
+        return [clampKeeping(options, a, pad), clampKeeping(options, b, pad)];
+    }
+    const cut = roundedWindow(options, [a, b], pad);
+    return [cutRounded(cut, a), cutRounded(cut, b)];
+}
+/** `clampAround` for a rounded rectangle, keeping its corners. */
+function clampKeeping(options, { rect, corners }, pad) {
+    const cut = clampAround(options, rect, pad);
+    return cut && { rect: cut, corners };
+}
+/** Whether a corner curves further than `by` along either of its sides. */
+function curvesPast({ x, y }, by) {
+    for (let i = 0; i < 4; i += 1)
+        if (x[i] > by || y[i] > by)
+            return true;
+    return false;
+}
 function paintBackground(ctx, box, options, style) {
     const color = style.backgroundColor;
     const gradient = style.backgroundGradient;
     const solid = !isTransparent(color);
     if (!solid && !gradient)
         return;
-    const area = clipArea(box, options, style, !!(ctx.roundRect && ctx.fill && ctx.beginPath));
-    const rect = area && clampRect(options, area.x, area.y, area.w, area.h);
+    const rect = clipArea(box, options, style, !!(ctx.roundRect && ctx.fill && ctx.beginPath));
     if (!rect)
         return;
-    const rounded = area.corners;
+    const rounded = rect.corners;
     const fill = () => {
         if (rounded) {
-            // The clamp can only have cut edges further than CLAMP_PAD outside
-            // the damage, and a sane radius is smaller than that — so a corner
-            // that survives the cut is whole, and a cut edge is offscreen.
             ctx.beginPath();
             roundedRect(ctx, rect.x, rect.y, rect.w, rect.h, rounded);
             ctx.fill();
@@ -3426,12 +3494,13 @@ function paintBackgroundImage(ctx, style, area, at, options, corners = null) {
         // a drawing is drawn a tile at a time, at the size it was given
         if (tiles <= MAX_TILES) {
             for (let y = fromY; y < toY; y += stepY) {
-                for (let x = fromX; x < toX; x += stepX)
-                    svg.draw(ctx, Math.round(x), Math.round(y), iw, ih, scale);
+                for (let x = fromX; x < toX; x += stepX) {
+                    svg.drawImage(ctx, Math.round(x), Math.round(y), iw, ih, scale, style.colorScheme);
+                }
             }
         }
         else {
-            svg.draw(ctx, x0, y0, iw, ih, scale);
+            svg.drawImage(ctx, x0, y0, iw, ih, scale, style.colorScheme);
         }
     }
     else if (tiles > 1 &&
@@ -3518,7 +3587,7 @@ function roundedTile(size, [modeX, modeY], [w, h], at) {
 }
 /**
  * A background tile's size (CSS Backgrounds 3, 3.9, over CSS Images' sizing
- * of an object): `auto` is the image's own, as `tileSize` has it; `cover`
+ * of an object): `auto` is the image's own, as `concreteSize` has it; `cover`
  * and `contain` scale it to fill the positioning area or to fit inside it,
  * keeping its ratio, and one with no ratio is the size of the area; and a
  * width or a height alone takes the other from the ratio, or else from the
@@ -3527,7 +3596,7 @@ function roundedTile(size, [modeX, modeY], [w, h], at) {
  */
 function sizedTile(size, image, area, scale) {
     if (size === 'auto')
-        return tileSize(image, area, scale);
+        return concreteSize(image, area.width, area.height, scale);
     const { ratio } = image;
     if (size === 'cover' || size === 'contain') {
         if (!(ratio > 0 && area.height > 0))
@@ -3552,32 +3621,7 @@ function sizedTile(size, image, area, scale) {
             return [h * ratio, h];
         return [image.width === null ? area.width : image.width * scale, h];
     }
-    return tileSize(image, area, scale);
-}
-/**
- * A background image's size, in device pixels, where nothing sets it — CSS
- * 2.1 has no `background-size` — which is CSS Images' default sizing: an
- * image's own size where it has one; the dimension it lacks from its ratio,
- * or else from the positioning area; and one with a ratio alone as large as
- * fits in the area. An SVG may be any of these, and a raster image is the
- * first.
- */
-function tileSize(size, area, scale) {
-    const { ratio } = size;
-    const width = size.width === null ? null : size.width * scale;
-    const height = size.height === null ? null : size.height * scale;
-    if (width !== null && height !== null)
-        return [width, height];
-    if (width !== null)
-        return [width, ratio > 0 ? width / ratio : area.height];
-    if (height !== null)
-        return [ratio > 0 ? height * ratio : area.width, height];
-    if (ratio > 0) {
-        return area.width / area.height > ratio
-            ? [area.height * ratio, area.height]
-            : [area.width, area.width / ratio];
-    }
-    return [area.width, area.height];
+    return concreteSize(image, area.width, area.height, scale);
 }
 /**
  * A box's outline (CSS 2.1 18.4, CSS UI 4 5): a border of its own width,
@@ -3642,12 +3686,13 @@ function paintOutline(ctx, box, options) {
  *
  * Where two sides that meet differ in colour — one of them transparent
  * included — the corner is cut on the diagonal from its outer point to its
- * inner one and each side takes its half (CSS Backgrounds 3, 4.3), so a side
+ * inner one and each side takes its half (CSS Backgrounds 3, 4.4), so a side
  * is a trapezoid, and a triangle where the box inside the borders has no
  * width: the CSS triangle a dropdown's caret and a tooltip's arrow are
  * drawn with, which came out as the rectangle around it. Only a solid side
  * is cut, and only against a side that is solid or paints nothing; dots,
- * dashes and a double border's two lines keep their rectangles.
+ * dashes and a double border's two lines keep their rectangles, the lines
+ * joined where two double sides of one colour meet (`fillSide`).
  */
 function paintBorders(ctx, box, options) {
     // most boxes have none, and are asked on every paint
@@ -3687,14 +3732,12 @@ function paintBorders(ctx, box, options) {
     const tr = paths && mitred(t, r, topInk, rightInk, topStyle, rightStyle);
     const br = paths && mitred(b, r, bottomInk, rightInk, bottomStyle, rightStyle);
     const bl = paths && mitred(b, l, bottomInk, leftInk, bottomStyle, leftStyle);
-    const edge = (ex, ey, ew, eh, style, color, horizontal) => {
-        const rect = clampRect(options, ex, ey, ew, eh);
-        if (!rect)
-            return;
+    const widths = [t, r, b, l];
+    const joins = doubleJoins(box);
+    /** A side with square corners, the top first and clockwise. */
+    const edge = (at, style, color) => {
         ctx.fillStyle = color;
-        // The un-clamped start is the dash phase's origin, so the pattern does
-        // not crawl as the viewport moves along a long edge.
-        fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
+        fillSide(ctx, options, at, x, y, w, h, widths, style, joins);
     };
     /** A side with a cut corner: its outer edge and then its inner one. */
     const side = (points, color) => {
@@ -3724,7 +3767,7 @@ function paintBorders(ctx, box, options) {
             side([x, y, x1, y, cutRight ? px1 : x1, py0, cutLeft ? px0 : x, py0], topInk);
         }
         else
-            edge(x, y, w, t, topStyle, topInk, true);
+            edge(0, topStyle, topInk);
     }
     if (bottomInk !== null) {
         const cutLeft = bl && !over(leftInk);
@@ -3733,26 +3776,26 @@ function paintBorders(ctx, box, options) {
             side([x1, y1, x, y1, cutLeft ? px0 : x, py1, cutRight ? px1 : x1, py1], bottomInk);
         }
         else
-            edge(x, y1 - b, w, b, bottomStyle, bottomInk, true);
+            edge(2, bottomStyle, bottomInk);
     }
     if (leftInk !== null) {
         if (tl || bl) {
             side([x, bl ? y1 : py1, x, tl ? y : py0, px0, py0, px0, py1], leftInk);
         }
         else
-            edge(x, y + t, l, h - t - b, leftStyle, leftInk, false);
+            edge(3, leftStyle, leftInk);
     }
     if (rightInk !== null) {
         if (tr || br) {
             side([x1, tr ? y : py0, x1, br ? y1 : py1, px1, py1, px1, py0], rightInk);
         }
         else
-            edge(x1 - r, y + t, r, h - t - b, rightStyle, rightInk, false);
+            edge(1, rightStyle, rightInk);
     }
 }
 /**
  * Whether the corner two sides meet at is cut on its diagonal, each side
- * taking its half (CSS Backgrounds 3, 4.3): where both have a width, they
+ * taking its half (CSS Backgrounds 3, 4.4): where both have a width, they
  * are painted in different colours or only one is painted at all, and each
  * is solid or unpainted. Sides of one colour make the same corner either
  * way, and so does a corner of a single pixel, which is left to the side
@@ -3765,12 +3808,14 @@ function mitred(a, b, inkA, inkB, styleA, styleB) {
         (inkB === null || styleB === 'solid'));
 }
 /**
- * Fill a convex polygon, its corners as `x, y` pairs, cut to `area`: the
- * part of it near what is painted, which is what keeps a side thousands of
- * pixels long inside X's coordinates. Cut edge by edge rather than by
- * moving its corners in, which would turn a diagonal that crosses the
- * painted area: a slanted divider, `border-left: 100vw solid transparent`,
- * has a corner far outside it.
+ * Fill a polygon, its corners as `x, y` pairs, cut to `area`: the part of
+ * it near what is painted, which is what keeps a side thousands of pixels
+ * long inside X's coordinates. Cut edge by edge rather than by moving its
+ * corners in, which would turn a diagonal that crosses the painted area: a
+ * slanted divider, `border-left: 100vw solid transparent`, has a corner far
+ * outside it. A polygon that is not convex, a rounded ring's share, may
+ * come out of the cut with an edge run there and back along the area's
+ * border, which fills nothing, and that border is outside the paint.
  */
 function fillPolygon(ctx, points, area) {
     const bounds = [area.x, area.y, area.x + area.w, area.y + area.h];
@@ -3841,9 +3886,7 @@ function paintBorderImage(ctx, box, options) {
     // the image's size, CSS Images' default sizing in the area: a drawing
     // with no size of its own is as large as it fits there, and a gradient,
     // which has none, is the area's
-    const [cw, ch] = loaded
-        ? tileSize(loaded, { x: 0, y: 0, width: aw, height: ah }, scale)
-        : [aw, ah];
+    const [cw, ch] = loaded ? concreteSize(loaded, aw, ah, scale) : [aw, ah];
     const iw = cw / scale;
     const ih = ch / scale;
     if (!(iw > 0 && ih > 0))
@@ -3858,9 +3901,10 @@ function paintBorderImage(ctx, box, options) {
         const svg = image instanceof SvgDrawing ? image : null;
         const w = Math.max(1, Math.round(cw));
         const h = Math.max(1, Math.round(ch));
-        const drawn = options.cached?.(`border-image|${key}|${w}x${h}`, w, h, (sctx) => {
+        const scheme = box.style.colorScheme;
+        const drawn = options.cached?.(`border-image|${key}|${w}x${h}|${scheme}`, w, h, (sctx) => {
             if (svg)
-                svg.draw(sctx, 0, 0, w, h, scale);
+                svg.drawImage(sctx, 0, 0, w, h, scale, scheme);
             else if (typeof source !== 'string') {
                 const paint = gradientFill(sctx, source, 0, 0, w, h, box.style.color);
                 if (paint)
@@ -4029,17 +4073,18 @@ function edgeRun(mode, start, length, tile) {
 }
 /**
  * A rounded box's border as the ring between its border edge and its
- * padding edge, each rounded, where every side that has a border has one
- * of the same colour and a solid rule: a card's or a button's. Drawn
- * straight, its corners were square over the background's rounded ones,
- * and an accent border down one side did not follow the corner. The inner
- * radius is the outer less the wider border at that corner (CSS
- * Backgrounds 3, 5.2). False where the border is not such a one, and it is
- * drawn a side at a time.
+ * padding edge, each rounded, where every side that has a border has a
+ * solid rule: a card's or a button's. Drawn straight, its corners were
+ * square over the background's rounded ones, and an accent border down one
+ * side did not follow the corner. The inner radius is the outer less the
+ * wider border at that corner (CSS Backgrounds 3, 5.2). Sides of one colour
+ * are one fill; sides of more are each given their share of the ring
+ * (`ringSides`). False where the border is not such a one, and it is drawn
+ * a side at a time.
  */
 function roundedRing(ctx, box, x, y, w, h, options) {
     const s = box.style;
-    if (!ctx.roundRect || !ctx.fill || !ctx.beginPath)
+    if (!ctx.fill || !ctx.beginPath)
         return false;
     const corners = cornersOf(s, w, h);
     if (!corners)
@@ -4051,33 +4096,444 @@ function roundedRing(ctx, box, x, y, w, h, options) {
         [box.borderLeft, s.borderLeftColor, s.borderLeftStyle],
     ];
     let color = null;
+    let mixed = false;
     for (const [width, ink, style] of sides) {
         if (!width)
             continue;
-        if (style !== 'solid' || (color !== null && ink !== color))
+        if (style !== 'solid')
             return false;
+        if (color !== null && ink !== color)
+            mixed = true;
         color = ink;
     }
+    if (mixed)
+        return ringSides(ctx, box, x, y, w, h, corners, options);
+    if (!ctx.roundRect)
+        return false;
     if (color === null)
         return true;
     if (isTransparent(color))
         return true;
-    const rect = clampRect(options, x, y, w, h);
-    if (!rect)
+    wholeRing(ctx, box, inkColor(color, s.color), x, y, w, h, corners, options);
+    return true;
+}
+/** The ring of a rounded border in one colour, cut to what the paint
+ *  reaches (`cutRing`). */
+function wholeRing(ctx, box, color, x, y, w, h, corners, options) {
+    const ring = cutRing(options, x, y, w, h, corners, box.borderTop, box.borderRight, box.borderBottom, box.borderLeft);
+    if (!ring)
+        return;
+    const { outer, inner } = ring;
+    ctx.fillStyle = color;
+    fillRing(ctx, outer.rect, outer.corners, inner ? inner.rect : NOWHERE, inner ? inner.corners : outer.corners);
+}
+/** How far a chord of a flattened corner may stray from its curve, in
+ *  device pixels: a sixteenth, well inside what antialiasing shows. */
+const CURVE_TOLERANCE = 1 / 16;
+/** How far past a cut a share reaches under the one drawn over it, in
+ *  device pixels: past the antialiased edge of either. */
+const SEAM = 1.5;
+/** Which way a border's sides run at each corner, clockwise from the top
+ *  left: the side that ends at corner i arrives along `ALONG[i]`, and the
+ *  side that begins there leaves along `ALONG[i + 1]`. */
+const ALONG = [
+    [0, -1],
+    [1, 0],
+    [0, 1],
+    [-1, 0],
+];
+/**
+ * A rounded border whose solid sides are not all one colour, each side's
+ * share of the ring filled in its own. Where two sides of different colours
+ * meet, the corner is cut on the line from the border box's corner through
+ * the padding box's, as Blink cuts it: CSS Backgrounds 3, 4.4 puts the
+ * transition on the curve at a point that follows the ratio of the two
+ * widths and leaves the rest to the UA. A corner between a side and one
+ * with no width is all the side's (4.4 again), and sides of one colour that
+ * meet are one fill, so nothing is cut where the colour does not change.
+ * Drawn a side at a time, the spinner the web draws — `border-radius: 50%`
+ * with one side of another colour — was a square frame.
+ *
+ * A share is a polygon: the curves flattened to chords no further than
+ * `CURVE_TOLERANCE` from them, so that it is cut to what the paint reaches
+ * as the square corners are (`fillPolygon`) and a large ring repainted a
+ * strip at a time is the same ring. False where the context draws no
+ * lines, and the sides are drawn straight.
+ */
+function ringSides(ctx, box, x, y, w, h, corners, options) {
+    if (!ctx.moveTo || !ctx.lineTo)
+        return false;
+    const area = clampRect(options, x, y, w, h);
+    if (!area)
         return true;
-    const top = box.borderTop;
-    const right = box.borderRight;
-    const bottom = box.borderBottom;
-    const left = box.borderLeft;
-    ctx.fillStyle = inkColor(color, s.color);
-    fillRing(ctx, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }, corners, {
-        x: rect.x + left,
-        y: rect.y + top,
-        width: Math.max(0, rect.w - left - right),
-        height: Math.max(0, rect.h - top - bottom),
-    }, insetCorners(corners, top, right, bottom, left));
+    const s = box.style;
+    const widths = [
+        box.borderTop,
+        box.borderRight,
+        box.borderBottom,
+        box.borderLeft,
+    ];
+    const colors = [
+        s.borderTopColor,
+        s.borderRightColor,
+        s.borderBottomColor,
+        s.borderLeftColor,
+    ];
+    // what each side is painted in, null where it paints nothing
+    const inks = widths.map((width, i) => width > 0 && !isTransparent(colors[i])
+        ? inkColor(colors[i], s.color)
+        : null);
+    // Corners from the top left, clockwise. Corner i is where side i - 1
+    // ends and side i begins: the top left ends the left and begins the top.
+    // Two sides of one colour are joined across their corner.
+    const joined = [0, 1, 2, 3].map((i) => {
+        const before = (i + 3) % 4;
+        return widths[before] > 0 && widths[i] > 0 && inks[before] === inks[i];
+    });
+    if (!joined.includes(false)) {
+        // one colour after all, `currentColor` and the colour it is
+        if (!ctx.roundRect)
+            return false;
+        if (inks[0] !== null) {
+            wholeRing(ctx, box, inks[0], x, y, w, h, corners, options);
+        }
+        return true;
+    }
+    const [t, r, b, l] = widths;
+    const x1 = x + w;
+    const y1 = y + h;
+    // the padding box, inside the borders
+    const ix0 = x + l;
+    const iy0 = y + t;
+    const ix1 = Math.max(ix0, x1 - r);
+    const iy1 = Math.max(iy0, y1 - b);
+    const inside = insetCorners(corners, t, r, b, l);
+    const hollow = ix1 > ix0 && iy1 > iy0;
+    // each corner's point on the border box and on the padding box, which
+    // way it points, and the quarter ellipses that round the two there
+    const sx = [-1, 1, 1, -1];
+    const sy = [-1, -1, 1, 1];
+    const ox = [x, x1, x1, x];
+    const oy = [y, y, y1, y1];
+    const px = [ix0, ix1, ix1, ix0];
+    const py = [iy0, iy0, iy1, iy1];
+    const quarter = (i, cornerX, cornerY, rx, ry) => rx > 0 && ry > 0
+        ? { cx: cornerX - sx[i] * rx, cy: cornerY - sy[i] * ry, rx, ry }
+        : null;
+    const outer = [];
+    const inner = [];
+    for (let i = 0; i < 4; i += 1) {
+        outer.push(quarter(i, ox[i], oy[i], corners.x[i], corners.y[i]));
+        inner.push(hollow ? quarter(i, px[i], py[i], inside.x[i], inside.y[i]) : null);
+    }
+    // A corner's quarter turns clockwise from the angle it starts at: the top
+    // left's from pointing left to pointing up.
+    const QUARTER = Math.PI / 2;
+    const start = (i) => Math.PI + i * QUARTER;
+    /** Where a line from (fromX, fromY) along (dx, dy) first meets a quarter
+     *  ellipse, as the angle it is at; the line starts outside it. */
+    const crossing = (i, q, fromX, fromY, dx, dy) => {
+        const a0 = start(i);
+        if (!q)
+            return a0;
+        const ux = (fromX - q.cx) / q.rx;
+        const uy = (fromY - q.cy) / q.ry;
+        const vx = dx / q.rx;
+        const vy = dy / q.ry;
+        const qa = vx * vx + vy * vy;
+        const qb = ux * vx + uy * vy;
+        const disc = qb * qb - qa * (ux * ux + uy * uy - 1);
+        const k = qa > 0 && disc > 0 ? (-qb - Math.sqrt(disc)) / qa : 0;
+        let a = Math.atan2(uy + k * vy, ux + k * vx);
+        // into the quarter's own turn
+        a += 2 * Math.PI * Math.round((a0 + QUARTER / 2 - a) / (2 * Math.PI));
+        return Math.min(a0 + QUARTER, Math.max(a0, a));
+    };
+    // Where the shares meet at each corner, as angles on its two quarters: on
+    // the cut, or at the end of the corner where one side has no width and
+    // the other has all of it — the side that has none paints nothing.
+    const cutOuter = [];
+    const cutInner = [];
+    for (let i = 0; i < 4; i += 1) {
+        const before = widths[(i + 3) % 4] > 0;
+        const after = widths[i] > 0;
+        if (before && after) {
+            const dx = px[i] - ox[i];
+            const dy = py[i] - oy[i];
+            cutOuter.push(crossing(i, outer[i], ox[i], oy[i], dx, dy));
+            cutInner.push(crossing(i, inner[i], px[i], py[i], dx, dy));
+        }
+        else {
+            const end = before ? start(i) + QUARTER : start(i);
+            cutOuter.push(end);
+            cutInner.push(end);
+        }
+    }
+    // The shares, a run of sides of one colour each, from the corner the
+    // colour changes at to the next one it changes at. Those that show what
+    // is under them are drawn first.
+    const runs = [];
+    for (let i = 0; i < 4; i += 1) {
+        if (joined[i])
+            continue;
+        let j = (i + 1) % 4;
+        while (joined[j])
+            j = (j + 1) % 4;
+        runs.push({ from: i, to: j, ink: inks[i] });
+    }
+    const opaque = (ink) => ink !== null && alphaOf(ink) === 1;
+    runs.sort((a, b) => Number(opaque(a.ink)) - Number(opaque(b.ink)));
+    /** Whether a share reaches past its cut at a corner, under the one on
+     *  the other side of it: where that one is drawn after it and covers it. */
+    const under = (k, corner) => {
+        const before = widths[(corner + 3) % 4] > 0;
+        if (!(before && widths[corner] > 0))
+            return false;
+        const other = runs.findIndex((run) => run !== runs[k] && (run.from === corner || run.to === corner));
+        return other > k && opaque(runs[other].ink);
+    };
+    // The straight part of each side's edge, between the quarters at its
+    // ends, on the border edge and the padding edge: as far as a share may
+    // reach along it past a corner.
+    const straight = (q, across, down) => {
+        const rx = (i) => q[i]?.rx ?? 0;
+        const ry = (i) => q[i]?.ry ?? 0;
+        return [
+            across - rx(0) - rx(1),
+            down - ry(1) - ry(2),
+            across - rx(2) - rx(3),
+            down - ry(3) - ry(0),
+        ].map((v) => Math.max(0, v));
+    };
+    const outerRoom = straight(outer, w, h);
+    const innerRoom = straight(inner, ix1 - ix0, iy1 - iy0);
+    /**
+     * A share's end moved past the cut at a corner, onto the other share,
+     * along an edge from the angle `a` it is at on a quarter: `forward` the
+     * way the corner turns, onto the side that begins there, or back onto
+     * the side that ends there. Far enough that the line it ends on is
+     * `SEAM` from the cut, whatever angle the two make; as the angle it
+     * reaches on the quarter and how far it goes on along the straight edge
+     * past it, no further than `room`.
+     */
+    const past = (q, i, a, forward, room) => {
+        const end = forward ? start(i) + QUARTER : start(i);
+        const sign = forward ? 1 : -1;
+        const [ex, ey] = forward ? ALONG[(i + 1) % 4] : ALONG[i];
+        // the way it goes, and the sine of its angle with the cut
+        let tx = forward ? ex : -ex;
+        let ty = forward ? ey : -ey;
+        if (q && a !== end) {
+            const speed = Math.hypot(q.rx * Math.sin(a), q.ry * Math.cos(a));
+            tx = (sign * -q.rx * Math.sin(a)) / speed;
+            ty = (sign * q.ry * Math.cos(a)) / speed;
+        }
+        const dx = px[i] - ox[i];
+        const dy = py[i] - oy[i];
+        const sine = Math.abs(tx * dy - ty * dx) / Math.hypot(dx, dy);
+        let left = SEAM / Math.max(0.25, sine);
+        let at = a;
+        for (let n = 0; q && n < 8 && left > 0 && at !== end; n += 1) {
+            const speed = Math.hypot(q.rx * Math.sin(at), q.ry * Math.cos(at));
+            const turn = Math.abs(end - at);
+            if (left >= turn * speed) {
+                left -= turn * speed;
+                at = end;
+            }
+            else {
+                at += (sign * left) / speed;
+                left = 0;
+            }
+        }
+        return [at, at === end ? Math.min(left, room) : 0];
+    };
+    const points = [];
+    /** The point at an angle on a quarter, or the corner where it is square,
+     *  and `over` on past the quarter's end along the edge `along`. */
+    const point = (q, a, cx, cy, over = 0, along = ALONG[0]) => {
+        const x = (q ? q.cx + q.rx * Math.cos(a) : cx) + over * along[0];
+        const y = (q ? q.cy + q.ry * Math.sin(a) : cy) + over * along[1];
+        const n = points.length;
+        if (n && points[n - 2] === x && points[n - 1] === y)
+            return;
+        points.push(x, y);
+    };
+    /** A quarter's curve from one angle to another, as chords, after the
+     *  point it starts at. */
+    const sweep = (q, from, to) => {
+        if (!q || from === to)
+            return;
+        const radius = Math.max(q.rx, q.ry);
+        const step = radius > CURVE_TOLERANCE
+            ? 2 * Math.acos(1 - CURVE_TOLERANCE / radius)
+            : QUARTER;
+        const n = Math.min(64, Math.ceil(Math.abs(to - from) / step));
+        for (let k = 1; k <= n; k += 1) {
+            point(q, from + ((to - from) * k) / n, 0, 0);
+        }
+    };
+    for (let k = 0; k < runs.length; k += 1) {
+        const { from: i, to: j, ink } = runs[k];
+        if (ink === null)
+            continue;
+        // Where the share starts and ends on each edge. Two antialiased fills
+        // that meet on a line each cover half of the pixels along it, and what
+        // is under the border shows through between them. So a share reaches
+        // on under the one drawn after it and covering it, and that one's
+        // edge is the cut, over it — as Blink overdraws a corner, and as the
+        // square corners are drawn.
+        let [so, soOver] = [cutOuter[i], 0];
+        let [si, siOver] = [cutInner[i], 0];
+        let [eo, eoOver] = [cutOuter[j], 0];
+        let [ei, eiOver] = [cutInner[j], 0];
+        const back = (i + 3) % 4;
+        if (under(k, i)) {
+            [so, soOver] = past(outer[i], i, so, false, outerRoom[back]);
+            [si, siOver] = past(inner[i], i, si, false, innerRoom[back]);
+        }
+        if (under(k, j)) {
+            [eo, eoOver] = past(outer[j], j, eo, true, outerRoom[j]);
+            [ei, eiOver] = past(inner[j], j, ei, true, innerRoom[j]);
+        }
+        const onward = ALONG[(j + 1) % 4];
+        const backward = [-ALONG[i][0], -ALONG[i][1]];
+        points.length = 0;
+        // along the border edge, clockwise
+        point(outer[i], so, ox[i], oy[i], soOver, backward);
+        point(outer[i], so, ox[i], oy[i]);
+        sweep(outer[i], so, start(i) + QUARTER);
+        for (let c = (i + 1) % 4;; c = (c + 1) % 4) {
+            point(outer[c], start(c), ox[c], oy[c]);
+            if (c === j)
+                break;
+            sweep(outer[c], start(c), start(c) + QUARTER);
+        }
+        sweep(outer[j], start(j), eo);
+        point(outer[j], eo, ox[j], oy[j], eoOver, onward);
+        // and back along the padding edge
+        point(inner[j], ei, px[j], py[j], eiOver, onward);
+        point(inner[j], ei, px[j], py[j]);
+        sweep(inner[j], ei, start(j));
+        for (let c = (j + 3) % 4;; c = (c + 3) % 4) {
+            point(inner[c], start(c) + QUARTER, px[c], py[c]);
+            if (c === i)
+                break;
+            sweep(inner[c], start(c) + QUARTER, start(c));
+        }
+        sweep(inner[i], start(i) + QUARTER, si);
+        point(inner[i], si, px[i], py[i], siOver, backward);
+        ctx.fillStyle = ink;
+        fillPolygon(ctx, points, area);
+    }
     return true;
 }
+/**
+ * A rounded box's ring — its border edge and its padding edge, the box
+ * inside its borders — cut to the neighbourhood of what is being painted,
+ * as `clampRect` cuts a rectangle. Both edges are the box's own, cut to
+ * one window, so what is left is the part of the true ring in it. Cutting
+ * the box first and insetting the cut by the borders put the hole a
+ * border's width in from the cut rather than from the box's edge, and left
+ * none where a border was wider than `CLAMP_PAD`: the ring filled whatever
+ * of the box a paint reached. The window is the border edge's
+ * (`roundedWindow`), whose curves the padding edge's run inside, and each
+ * edge is cut to it as `cutRounded` cuts one. Null where the ring has
+ * nothing in the window.
+ */
+function cutRing(options, x, y, w, h, corners, top, right, bottom, left) {
+    const edge = { rect: { x, y, width: w, height: h }, corners };
+    const cut = roundedWindow(options, [edge]);
+    const outer = cutRounded(cut, edge);
+    if (!outer)
+        return null;
+    const iw = w - left - right;
+    const ih = h - top - bottom;
+    const inner = iw > 0 && ih > 0
+        ? cutRounded(cut, {
+            rect: { x: x + left, y: y + top, width: iw, height: ih },
+            corners: insetCorners(corners, top, right, bottom, left),
+        })
+        : null;
+    // a window inside the padding edge, where the ring has nothing
+    if (inner && sameRounded(outer, inner))
+        return null;
+    return { outer, inner };
+}
+/**
+ * The window `clampRect` cuts to, `pad` round what the paint reaches, for
+ * rectangles with rounded corners: a cut is straight, so a side of it is
+ * moved out past any corner's curve it would cross, in any of them.
+ */
+function roundedWindow(options, shapes, pad = CLAMP_PAD) {
+    // where each corner's curve runs, across and down
+    const across = [];
+    const down = [];
+    for (const { rect, corners } of shapes) {
+        const { x, y, width: w, height: h } = rect;
+        const { x: cx, y: cy } = corners;
+        across.push([x, x + cx[0]], [x + w - cx[1], x + w], [x + w - cx[2], x + w], [x, x + cx[3]]);
+        down.push([y, y + cy[0]], [y, y + cy[1]], [y + h - cy[2], y + h], [y + h - cy[3], y + h]);
+    }
+    const d = options.damage;
+    const side = (at, spans, towards) => Math.max(-COORD_LIMIT, Math.min(COORD_LIMIT, outOfSpans(at, spans, towards)));
+    return [
+        side(d ? d.x - pad : -COORD_LIMIT, across, -1),
+        side(d ? d.y - pad : -COORD_LIMIT, down, -1),
+        side(d ? d.x + d.width + pad : COORD_LIMIT, across, 1),
+        side(d ? d.y + d.height + pad : COORD_LIMIT, down, 1),
+    ];
+}
+/**
+ * A rounded rectangle cut to a window (`roundedWindow`), as `clampRect`
+ * cuts a rectangle: a corner on a side the window cut is square, its
+ * curve being outside, and the rest are whole. Null where none of it is in
+ * the window.
+ */
+function cutRounded([x0, y0, x1, y1], { rect: { x, y, width: w, height: h }, corners: c }) {
+    const l = Math.max(x, x0);
+    const t = Math.max(y, y0);
+    const r = Math.min(x + w, x1);
+    const b = Math.min(y + h, y1);
+    if (r <= l || b <= t)
+        return null;
+    // the corners of the sides the window left where they were
+    const kept = [
+        t === y && l === x,
+        t === y && r === x + w,
+        b === y + h && r === x + w,
+        b === y + h && l === x,
+    ];
+    return {
+        rect: { x: l, y: t, width: r - l, height: b - t },
+        corners: {
+            x: c.x.map((v, i) => (kept[i] ? v : 0)),
+            y: c.y.map((v, i) => (kept[i] ? v : 0)),
+        },
+    };
+}
+/** A position moved out of any of `spans` it is inside, towards their
+ *  starts where `towards` is negative and their ends where it is not. */
+function outOfSpans(at, spans, towards) {
+    for (let moved = true; moved;) {
+        moved = false;
+        for (const [from, to] of spans) {
+            if (at > from && at < to) {
+                at = towards < 0 ? from : to;
+                moved = true;
+            }
+        }
+    }
+    return at;
+}
+/** Whether two rounded rectangles are one shape. */
+function sameRounded(a, b) {
+    return (a.rect.x === b.rect.x &&
+        a.rect.y === b.rect.y &&
+        a.rect.width === b.rect.width &&
+        a.rect.height === b.rect.height &&
+        a.corners.x.every((v, i) => v === b.corners.x[i]) &&
+        a.corners.y.every((v, i) => v === b.corners.y[i]));
+}
 /**
  * Clip to what a box's border paints, for a layer of `background-clip:
  * border-area` (CSS Backgrounds 4, 2.1): each side's width and style, and
@@ -4085,12 +4541,17 @@ function roundedRing(ctx, box, x, y, w, h, options) {
  * the value is for. The shapes are the border painter's own, so that the
  * background shows exactly where that border would: the ring `roundedRing`
  * fills where a rounded border is solid, the ring the trapezoids of a 3D
- * style make, and otherwise the rectangles `fillEdge` fills a side at a
- * time — the dots, the dashes, the two lines of a double border. All of
+ * style make, and otherwise the rectangles `fillSide` fills a side at a
+ * time — the dots, the dashes, the two lines of a double border joined as
+ * they are painted, by the sides' colours though neither is drawn. All of
  * them run clockwise and a ring's inside the other way, so the clip is the
- * union by the non-zero rule, the one every context's `clip` takes. False
- * where the border paints nothing or the context cannot clip, and nothing
- * is pushed.
+ * union by the non-zero rule, the one every context's `clip` takes. Each
+ * is placed from the box's edges and then cut to the painted area: placed
+ * from the cut, a border wider than `CLAMP_PAD` put its bands and its
+ * ring's hole a border's width in from wherever the paint was cut, and
+ * the background was painted over the content of a box repainted in part.
+ * False where the border paints nothing in the painted area or the context
+ * cannot clip, and nothing is pushed.
  */
 function pushBorderArea(ctx, box, options) {
     const t = box.borderTop;
@@ -4109,44 +4570,53 @@ function pushBorderArea(ctx, box, options) {
     const h = Math.round(top + frameHeight(box)) - y;
     if (w <= 0 || h <= 0)
         return false;
-    const area = clampRect(options, x, y, w, h);
-    if (!area)
+    if (!clampRect(options, x, y, w, h))
         return false;
     const corners = cornersOf(s, w, h);
     ctx.save();
     ctx.beginPath();
+    // how many shapes the path has: none, and the border paints nothing here
+    let shapes = 0;
     if (corners && canCurve(ctx) && solidBorder(box)) {
-        roundedRect(ctx, area.x, area.y, area.w, area.h, corners, true);
-        const iw = area.w - l - r;
-        const ih = area.h - t - b;
-        if (iw > 0 && ih > 0) {
-            const inner = insetCorners(corners, t, r, b, l);
-            roundedRect(ctx, area.x + l, area.y + t, iw, ih, inner, true, true);
+        const ring = cutRing(options, x, y, w, h, corners, t, r, b, l);
+        if (ring) {
+            const add = ({ rect, corners: c }, hole) => roundedRect(ctx, rect.x, rect.y, rect.width, rect.height, c, true, hole);
+            add(ring.outer, false);
+            // the padding edge run the other way, which cuts it out
+            if (ring.inner)
+                add(ring.inner, true);
+            shapes = 1;
         }
     }
-    else if (sculpted(s)) {
-        // a band a side, which the trapezoids cover between them
-        ctx.rect(area.x, area.y, area.w, t);
-        ctx.rect(area.x, area.y + area.h - b, area.w, b);
-        ctx.rect(area.x, area.y + t, l, area.h - t - b);
-        ctx.rect(area.x + area.w - r, area.y + t, r, area.h - t - b);
-    }
     else {
-        const path = { fillRect: ctx.rect.bind(ctx) };
-        const edge = (ex, ey, ew, eh, style, horizontal) => {
-            const rect = clampRect(options, ex, ey, ew, eh);
-            if (rect)
-                fillEdge(path, rect, horizontal ? ex : ey, style, horizontal);
+        // A side at a time, from the box's edges and cut to the painted area
+        // after: a 3D side as a band, which the trapezoids cover between them,
+        // and any other as `fillSide` fills it.
+        const path = {
+            fillRect(ex, ey, ew, eh) {
+                ctx.rect(ex, ey, ew, eh);
+                shapes += 1;
+            },
         };
-        const between = h - t - b;
-        if (t > 0)
-            edge(x, y, w, t, s.borderTopStyle, true);
-        if (b > 0)
-            edge(x, y + h - b, w, b, s.borderBottomStyle, true);
-        if (l > 0)
-            edge(x, y + t, l, between, s.borderLeftStyle, false);
-        if (r > 0)
-            edge(x + w - r, y + t, r, between, s.borderRightStyle, false);
+        const widths = [t, r, b, l];
+        const joins = doubleJoins(box);
+        const styles = sculpted(s)
+            ? ['solid', 'solid', 'solid', 'solid']
+            : [
+                s.borderTopStyle,
+                s.borderRightStyle,
+                s.borderBottomStyle,
+                s.borderLeftStyle,
+            ];
+        for (let at = 0; at < 4; at += 1) {
+            if (widths[at] > 0) {
+                fillSide(path, options, at, x, y, w, h, widths, styles[at], joins);
+            }
+        }
+    }
+    if (!shapes) {
+        ctx.restore();
+        return false;
     }
     ctx.clip();
     return true;
@@ -4175,10 +4645,12 @@ function sculpted(s) {
  * colour's shadow and `outset` its bottom and right; `groove` is `inset`
  * outside `outset`, a band each, and `ridge` the other way round
  * (`borderShades`). A side of any other style takes its trapezoid in its
- * colour. The trapezoids are clamped to the painted area, which leaves a
- * cut end square and out of sight and keeps a long box's far corners out
- * of X's coordinates. False where the context cannot draw a path, and the
- * sides are drawn straight.
+ * colour. The trapezoids are cut to the painted area (`fillPolygon`), which
+ * keeps a long box's far corners out of X's coordinates and a join on its
+ * diagonal: its corners clamped in, a border wider than `CLAMP_PAD` turned
+ * the join to cross the damage at 45° wherever it was, and a scrolled
+ * strip smeared the corners of a thick one. False where the context cannot
+ * draw a path, and the sides are drawn straight.
  */
 function paintSculpted(ctx, box, x, y, w, h, options) {
     if (!ctx.beginPath || !ctx.moveTo || !ctx.lineTo || !ctx.fill)
@@ -4191,8 +4663,6 @@ function paintSculpted(ctx, box, x, y, w, h, options) {
     const r = box.borderRight;
     const b = box.borderBottom;
     const l = box.borderLeft;
-    const cx = (v) => Math.max(area.x - 1, Math.min(v, area.x + area.w + 1));
-    const cy = (v) => Math.max(area.y - 1, Math.min(v, area.y + area.h + 1));
     /** The band between the edge `outer` of the way in and `inner`, for one
      *  side: 0 is the border box, 1 the padding box. */
     const band = (side, outer, inner, color) => {
@@ -4212,12 +4682,7 @@ function paintSculpted(ctx, box, x, y, w, h, options) {
                     ? [o.x1, o.y1, o.x0, o.y1, i.x0, i.y1, i.x1, i.y1]
                     : [o.x0, o.y1, o.x0, o.y0, i.x0, i.y0, i.x0, i.y1];
         ctx.fillStyle = color;
-        ctx.beginPath();
-        ctx.moveTo(cx(points[0]), cy(points[1]));
-        for (let k = 2; k < 8; k += 2)
-            ctx.lineTo(cx(points[k]), cy(points[k + 1]));
-        ctx.closePath?.();
-        ctx.fill();
+        fillPolygon(ctx, points, area);
     };
     const sides = [
         [t, s.borderTopStyle, s.borderTopColor],
@@ -4322,54 +4787,153 @@ function paintCollapsedBorders(ctx, table, options) {
     for (const s of segments) {
         if (isTransparent(s.border.color))
             continue;
-        const rect = clampRect(options, s.x, s.y, s.w, s.h);
-        if (!rect)
+        if (!clampRect(options, s.x, s.y, s.w, s.h))
             continue;
         ctx.fillStyle = s.border.color;
-        fillEdge(ctx, rect, s.horizontal ? s.x : s.y, s.border.style, s.horizontal);
+        fillEdge(ctx, options, s.x, s.y, s.w, s.h, s.border.style, s.horizontal);
+    }
+}
+/**
+ * One side of a border box at `x, y`, `w` by `h` — `at` counts the top
+ * first and clockwise — as rectangles cut to what the paint reaches: the
+ * top and the bottom the width of the box and the left and the right
+ * between them, so a corner is a square of one side or the other.
+ *
+ * A double side is two lines, a band each along its outer and its inner
+ * edge. Where it meets another double side of its colour (`joins`, the
+ * top left corner first) the lines of the two meet as two frames do, one
+ * inside the other (CSS Backgrounds 3, 4.2 and 4.3): the outer line of the
+ * left or the right runs on to the outer line of the top or the bottom,
+ * and the inner line of the top or the bottom stops at the inner line of
+ * the side. With square corners the outer frame was open at each of them
+ * and the inner line of the top ran on past the side's to the border edge.
+ * Each line is cut to the paint on its own, so a border wider than the
+ * reach around the paint keeps its lines at its edges, and not at the
+ * edges of the part of it cut out.
+ */
+function fillSide(ctx, options, at, x, y, w, h, widths, style, joins) {
+    const [t, r, b, l] = widths;
+    const width = widths[at];
+    const horizontal = (at & 1) === 0;
+    if (style === 'double' && width >= 3) {
+        const band = doubleBand(width);
+        const line = (lx, ly, lw, lh) => {
+            const rect = clampRect(options, lx, ly, lw, lh);
+            if (rect)
+                ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+        };
+        if (horizontal) {
+            // the outer line the width of the box, and the inner one from the
+            // inner line of a side it joins, or from the edge of the box
+            const from = joins[at === 0 ? 0 : 3] ? x + l - doubleBand(l) : x;
+            const to = joins[at === 0 ? 1 : 2] ? x + w - r + doubleBand(r) : x + w;
+            line(x, at === 0 ? y : y + h - band, w, band);
+            line(from, at === 0 ? y + t - band : y + h - b, to - from, band);
+        }
+        else {
+            // the outer line from the outer line of a side it joins, or from
+            // that side's inner edge, and the inner one between the two sides
+            const from = joins[at === 3 ? 0 : 1] ? y + doubleBand(t) : y + t;
+            const to = joins[at === 3 ? 3 : 2] ? y + h - doubleBand(b) : y + h - b;
+            line(at === 3 ? x : x + w - band, from, band, to - from);
+            line(at === 3 ? x + l - band : x + w - r, y + t, band, h - t - b);
+        }
+        return;
     }
+    const ex = at === 1 ? x + w - r : x;
+    const ey = at === 0 ? y : at === 2 ? y + h - b : y + t;
+    if (horizontal)
+        fillEdge(ctx, options, ex, ey, w, width, style, true);
+    else
+        fillEdge(ctx, options, ex, ey, width, h - t - b, style, false);
 }
-function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
-    const { x, y, w, h } = rect;
+/**
+ * The corners of a box where two double sides of one colour meet, the top
+ * left first and clockwise, and whose lines `fillSide` joins. By the
+ * colours as written, a transparent one included, which is how a clip to
+ * the border's area draws the border it does not paint.
+ */
+function doubleJoins(box) {
+    const s = box.style;
+    const color = (width, style, value) => style === 'double' && width >= 3 ? inkColor(value, s.color) : null;
+    const top = color(box.borderTop, s.borderTopStyle, s.borderTopColor);
+    const bottom = color(box.borderBottom, s.borderBottomStyle, s.borderBottomColor);
+    if (top === null && bottom === null)
+        return UNJOINED;
+    const right = color(box.borderRight, s.borderRightStyle, s.borderRightColor);
+    const left = color(box.borderLeft, s.borderLeftStyle, s.borderLeftColor);
+    return [
+        top !== null && top === left,
+        top !== null && top === right,
+        bottom !== null && bottom === right,
+        bottom !== null && bottom === left,
+    ];
+}
+const UNJOINED = [false, false, false, false];
+/** How wide each of a double border's two lines is, the gap between them
+ *  what is left of the side. */
+function doubleBand(thickness) {
+    return Math.max(1, Math.floor(thickness / 3));
+}
+/**
+ * A side at `x, y`, `w` by `h`, running across when `horizontal`, as the
+ * rectangles its style makes, each cut to what the paint reaches. The
+ * dashes, the dots and a double side's lines are measured from the side
+ * and cut after: measured from the cut, a side wider than `CLAMP_PAD` had
+ * dashes as long and as far apart as the cut was wide, starting wherever
+ * it started, and a strip repainted down one dash was striped across it.
+ */
+function fillEdge(ctx, options, x, y, w, h, style, horizontal) {
     const length = horizontal ? w : h;
     const thickness = horizontal ? h : w;
-    if (length <= 0 || thickness <= 0)
+    if (!(length > 0 && thickness > 0))
         return;
+    const fill = (fx, fy, fw, fh) => {
+        const rect = clampRect(options, fx, fy, fw, fh);
+        if (rect)
+            ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+    };
     if (style === 'dashed' || style === 'dotted') {
+        // what of the side the paint reaches, so that a side far longer than
+        // that is not walked from its start
+        const cut = clampRect(options, x, y, w, h);
+        if (!cut)
+            return;
         const period = style === 'dotted' ? thickness * 2 : thickness * 3;
         const on = style === 'dotted' ? thickness : thickness * 2;
-        const from = horizontal ? x : y;
-        // Start on the pattern boundary at or before the clamped start, so the
-        // dash the viewport cuts into is the same dash it always was.
-        let i = Math.floor((from - phaseOrigin) / period) * period + phaseOrigin;
-        for (; i < from + length; i += period) {
-            const start = Math.max(i, from);
-            const run = Math.min(i + on, from + length) - start;
-            if (run <= 0)
-                continue;
+        const start = horizontal ? x : y;
+        const end = start + length;
+        const from = horizontal ? cut.x : cut.y;
+        const to = from + (horizontal ? cut.w : cut.h);
+        // from the side's start, so the dash the paint cuts into is the one it
+        // always was
+        for (let i = start + Math.floor((from - start) / period) * period; i < to; i += period) {
+            const run = Math.min(i + on, end) - i;
             if (horizontal)
-                ctx.fillRect(start, y, run, thickness);
+                fill(i, y, run, thickness);
             else
-                ctx.fillRect(x, start, thickness, run);
+                fill(x, i, thickness, run);
         }
         return;
     }
     if (style === 'double' && thickness >= 3) {
-        const band = Math.max(1, Math.floor(thickness / 3));
+        const band = doubleBand(thickness);
         if (horizontal) {
-            ctx.fillRect(x, y, length, band);
-            ctx.fillRect(x, y + thickness - band, length, band);
+            fill(x, y, length, band);
+            fill(x, y + thickness - band, length, band);
         }
         else {
-            ctx.fillRect(x, y, band, length);
-            ctx.fillRect(x + thickness - band, y, band, length);
+            fill(x, y, band, length);
+            fill(x + thickness - band, y, band, length);
         }
         return;
     }
-    ctx.fillRect(x, y, w, h);
+    fill(x, y, w, h);
 }
 /** A list item's bullet or number, in the margin. */
-function paintMarker(ctx, marker, options) {
+function paintMarker(ctx, marker, options, 
+/** The item's colour scheme, which an SVG image in it is drawn in. */
+scheme) {
     const x = marker.x + options.originX;
     const y = marker.y + options.originY;
     if (marker.image) {
@@ -4379,7 +4943,7 @@ function paintMarker(ctx, marker, options) {
         if (!loaded || !(width > 0 && height > 0))
             return;
         if (loaded.image instanceof SvgDrawing) {
-            loaded.image.draw(ctx, x, y, width, height, options.scale ?? 1);
+            loaded.image.drawImage(ctx, x, y, width, height, options.scale ?? 1, scheme);
         }
         else
             ctx.drawImage?.(loaded.image, x, y, width, height);
@@ -4411,7 +4975,7 @@ function paintImage(ctx, box, options) {
         const past = at.x < x || at.y < y || at.x + at.w > x + w || at.y + at.h > y + h;
         const clipped = (!!corners || past) && pushClip(ctx, { x, y, w, h }, corners);
         if (image instanceof SvgDrawing) {
-            image.draw(ctx, at.x, at.y, at.w, at.h, options.scale ?? 1);
+            image.drawImage(ctx, at.x, at.y, at.w, at.h, options.scale ?? 1, box.style.colorScheme);
         }
         else
             ctx.drawImage(image, at.x, at.y, at.w, at.h);
@@ -4499,7 +5063,8 @@ function fitted(box, x, y, w, h) {
 /** An inline `<svg>`, drawn in its content box. Its `currentColor` is the
  *  box's `color`, as an icon's is the text's around it, and what it is
  *  painted with the box's `fill` and `stroke`, where the document's style
- *  sheets set them: an icon set's `.icon { fill: currentColor }`. */
+ *  sheets set them: an icon set's `.icon { fill: currentColor }`. What
+ *  they give a shape inside it is asked for here (`BoxTree.shapeStyler`). */
 function paintSvg(ctx, box, options) {
     if (!box.el)
         return;
@@ -4511,7 +5076,7 @@ function paintSvg(ctx, box, options) {
     const paint = (value) => value === null || value === 'currentColor' || value === 'none'
         ? value
         : inkColor(value, style.color);
-    inlineDrawing(box.el).draw(ctx, x, y, w, h, options.scale ?? 1, style.color, paint(style.fill), paint(style.stroke));
+    inlineDrawing(box.el).draw(ctx, x, y, w, h, options.scale ?? 1, style.color, paint(style.fill), paint(style.stroke), options.shapeStyler?.(box) ?? null);
 }
 /**
  * The X protocol carries glyph positions as Int16, so anything drawn past
@@ -4758,7 +5323,7 @@ function paintClippedText(ctx, block, lines, options) {
                 Math.max(natural.y + natural.height, natural.baseline + (natural.descent ?? 0)) +
                 2;
             for (const run of natural.runs) {
-                const clip = clipBoxOf(text.spans.boxAt?.(run.start) ?? null, block);
+                const clip = clipBoxOf(text.spans.boxAt?.(run.start) ?? null);
                 if (!clip)
                     continue;
                 let byLayout = parts.get(clip);
@@ -4782,8 +5347,8 @@ function paintClippedText(ctx, block, lines, options) {
         const list = [...byLayout.values()];
         const style = clip.style;
         let area;
-        if (clip === block)
-            area = paddingBox(block, options);
+        if (clip.kind !== 'inline')
+            area = paddingBox(clip, options);
         else {
             // an inline box: its runs, and its padding round them
             let x0 = Infinity;