@react-x11/components 0.14.1 → 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
@@ -696,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;
@@ -716,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). */
@@ -1364,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);
         }
     };
 }
@@ -1377,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) {
@@ -1444,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;
             }
@@ -1474,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();
         }
@@ -1505,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();
@@ -2778,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();
@@ -3521,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
@@ -3530,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))
@@ -3555,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,
@@ -3645,7 +3686,7 @@ 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
@@ -3754,7 +3795,7 @@ function paintBorders(ctx, box, options) {
 }
 /**
  * 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
@@ -3767,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];
@@ -3843,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))
@@ -4032,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)
@@ -4054,23 +4096,335 @@ 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;
+    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 true;
+        return;
     const { outer, inner } = ring;
-    ctx.fillStyle = inkColor(color, s.color);
-    fillRing(ctx, outer.rect, outer.corners, inner ? inner.rect : { x: 0, y: 0, width: 0, height: 0 }, inner ? inner.corners : outer.corners);
+    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 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;
 }
 /**
@@ -4081,68 +4435,82 @@ function roundedRing(ctx, box, x, y, w, h, options) {
  * 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. A cut is straight, so a side of the window
- * is moved out past any corner's curve it would cross, and a corner on a
- * side the window cut is square, its curve being outside. Null where the
- * ring has nothing in the window.
+ * 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 { x: cx, y: cy } = corners;
-    // where each corner's curve runs, across and down — the padding edge's
-    // run inside the border edge's
-    const across = [
-        [x, x + cx[0]],
-        [x + w - cx[1], x + w],
-        [x + w - cx[2], x + w],
-        [x, x + cx[3]],
-    ];
-    const down = [
-        [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)));
-    const x0 = side(d ? d.x - CLAMP_PAD : -COORD_LIMIT, across, -1);
-    const y0 = side(d ? d.y - CLAMP_PAD : -COORD_LIMIT, down, -1);
-    const x1 = side(d ? d.x + d.width + CLAMP_PAD : COORD_LIMIT, across, 1);
-    const y1 = side(d ? d.y + d.height + CLAMP_PAD : COORD_LIMIT, down, 1);
-    const cut = (rx, ry, rw, rh, c) => {
-        const l = Math.max(rx, x0);
-        const t = Math.max(ry, y0);
-        const r = Math.min(rx + rw, x1);
-        const b = Math.min(ry + rh, y1);
-        if (r <= l || b <= t)
-            return null;
-        // the corners of the sides the window left where they were
-        const kept = [
-            t === ry && l === rx,
-            t === ry && r === rx + rw,
-            b === ry + rh && r === rx + rw,
-            b === ry + rh && l === rx,
-        ];
-        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)),
-            },
-        };
-    };
-    const outer = cut(x, y, w, h, corners);
+    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
-        ? cut(x + left, y + top, iw, ih, insetCorners(corners, top, right, bottom, left))
+        ? 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) {
@@ -4419,11 +4787,10 @@ 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);
     }
 }
 /**
@@ -4475,13 +4842,10 @@ function fillSide(ctx, options, at, x, y, w, h, widths, style, joins) {
     }
     const ex = at === 1 ? x + w - r : x;
     const ey = at === 0 ? y : at === 2 ? y + h - b : y + t;
-    const rect = horizontal
-        ? clampRect(options, ex, ey, w, width)
-        : clampRect(options, ex, ey, width, h - t - b);
-    // The un-clamped start is the dash phase's origin, so the pattern does
-    // not crawl as the viewport moves along a long edge.
-    if (rect)
-        fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
+    if (horizontal)
+        fillEdge(ctx, options, ex, ey, w, width, style, true);
+    else
+        fillEdge(ctx, options, ex, ey, width, h - t - b, style, false);
 }
 /**
  * The corners of a box where two double sides of one colour meet, the top
@@ -4511,44 +4875,60 @@ const UNJOINED = [false, false, false, false];
 function doubleBand(thickness) {
     return Math.max(1, Math.floor(thickness / 3));
 }
-function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
-    const { x, y, w, h } = rect;
+/**
+ * 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 = 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, 
@@ -4943,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);
@@ -4967,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;