ntk 8.15.0 → 8.16.1

package/README.md

@@ -135,6 +135,7 @@ parser, say — can import just that piece, and loads only what it needs:
 | `ntk/path`          | `Path2D`, `parseSvgPath`                                | —                           |
 | `ntk/gl`            | `GLError`, `GL_MODES`, `DEFAULT_GL_POLICY`, …           | —                           |
 | `ntk/shadow-math`   | `shadowSigma`, `shadowReach`, `blurScale`, …            | —                           |
+| `ntk/shadow-tiles`  | `planShadowTiles`, `shadowTileAlpha`, …                 | —                           |
 | `ntk/image`         | `Image`, `decodeImage`, `loadImage`                     | `jpeg-js`, `pngjs`          |
 | `ntk/svg`           | `SvgView` (default export)                              | `htmlparser2`, `domutils`   |
 | `ntk/font`          | `Font` (default export)                                 | `fontkit`                   |

package/lib/index.js

@@ -56,6 +56,12 @@ import {
   shadowReach,
   shadowSigma
 } from './shadow.js';
+import {
+  planShadowTiles,
+  rasterShadowTile,
+  shadowTileAlpha,
+  tileScale
+} from './shadowtiles.js';
 import { DEFAULT_SHAPE_POLICY } from './shapeglyphs.js';
 import { DEFAULT_SHARED_GLYPHS_POLICY } from './glyphdirectory.js';
 import { warmSharedGlyphs } from './text/glyphs.js';
@@ -292,6 +298,10 @@ export {
   // would rather draw its shape small in the first place (issue #338)
   DEFAULT_SHADOW_POLICY,
   blurCoverage,
+  planShadowTiles,
+  rasterShadowTile,
+  shadowTileAlpha,
+  tileScale,
   blurScale,
   gaussianKernel1d,
   shadowReach,

package/lib/path.js

@@ -469,7 +469,7 @@ export function parseSvgPath(d) {
 // --------------------------------------------------------------------------
 // Path2D
 
-function normalizeRadii(w, h, radii) {
+export function normalizeRadii(w, h, radii) {
   if (radii === undefined) radii = 0;
   if (typeof radii === 'number') radii = [radii];
   const take = (v) => (typeof v === 'number' ? { x: v, y: v } : { x: v.x ?? 0, y: v.y ?? 0 });
@@ -535,6 +535,12 @@ export class Path2D {
     // box the fast path can never take (e.g. under rotation).
     this._roundRect = null;
     this._roundRectMiss = null;
+    // While the path is nothing but rect()s and roundRect()s, the 2d context
+    // keeps them here in device space — `{ x0, y0, x1, y1, corners }` each —
+    // so that a shadowed fill of one, or of one inside another filled
+    // evenodd, can be drawn from a shadow tile (lib/shadowtiles.js). Null
+    // once the path is anything else; any other path verb clears it.
+    this._shapes = null;
     if (init instanceof Path2D) {
       this._cmds = init._cmds.map((c) => ({ ...c }));
       this._x = init._x;
@@ -542,6 +548,7 @@ export class Path2D {
       this._sx = init._sx;
       this._sy = init._sy;
       this._roundRect = init._roundRect;
+      this._shapes = init._shapes && [...init._shapes];
     } else if (typeof init === 'string') {
       this._append(parseSvgPath(init));
     }
@@ -567,6 +574,7 @@ export class Path2D {
     // one roundRect() loses the tag (roundRect itself re-sets it at the end)
     this._roundRect = null;
     this._roundRectMiss = null;
+    this._shapes = null;
     for (const c of cmds) {
       this._cmds.push(c);
       this._track(c);

package/lib/renderingcontext_2d.js

@@ -46,6 +46,11 @@ import {
   shadowSigma,
 } from "./shadow.js";
 import { Surface } from "./surface.js";
+import {
+  normalizeRadii,
+  planShadowTiles,
+  shadowTileAlpha,
+} from "./shadowtiles.js";
 import {
   BL,
   BR,
@@ -466,6 +471,23 @@ function parseColor(value) {
  * rectangle's size unsigned and its corner in 16 bits, so a negative size
  * that reached the wire threw from inside the paint.
  */
+const IDENTITY_TRANSFORM = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+
+/** whether device box `b` (`{ x0, y0, x1, y1 }`) lies inside box `a` */
+function boxInside(b, a) {
+  return b.x0 >= a.x0 && b.y0 >= a.y0 && b.x1 <= a.x1 && b.y1 <= a.y1;
+}
+
+/** whether two `{ x, y, width, height }` boxes share any area — either
+ *  may say `w`/`h` for its size, as a clip rect does */
+function boxesMeet(a, b) {
+  const aw = a.width ?? a.w;
+  const ah = a.height ?? a.h;
+  const bw = b.width ?? b.w;
+  const bh = b.height ?? b.h;
+  return a.x < b.x + bw && b.x < a.x + aw && a.y < b.y + bh && b.y < a.y + ah;
+}
+
 function finiteRect(x, y, w, h) {
   return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(w) && Number.isFinite(h);
 }
@@ -1586,6 +1608,12 @@ class RenderingContext2d {
       this._shadowOfPolys(polys, { stroke: true });
       return;
     }
+    if (
+      !(args[0] instanceof Path2D) &&
+      this._tiledShadow(this._path._shapes, args[0] === "evenodd")
+    ) {
+      return;
+    }
     const { polys, rule } = this._polysFor(args);
     this._shadowOfPolys(polys, { rule });
   }
@@ -1631,11 +1659,141 @@ class RenderingContext2d {
 
   /** the shadow of an axis-aligned rectangle in user space */
   _shadowOfRect(x, y, w, h, stroke) {
+    if (!stroke && this._tiledShadow(this._withShape([], x, y, w, h, 0), false)) {
+      return;
+    }
     const tmp = new Path2D();
     tmp.rect(x, y, w, h);
     this._shadowOfPolys(flattenPath(tmp._cmds, this._m), { stroke });
   }
 
+  /**
+   * The shadow of a fill whose path is `shapes` — one rect or rounded rect,
+   * or, filled evenodd, one inside another: the frame an inset box shadow
+   * is cast around — drawn from a tile (lib/shadowtiles.js). A tile has a
+   * short name where a path has none, so it is made once and kept with the
+   * other shadow coverage (`cachedShadow`), and a repaint of any part of
+   * the shadow composites that part of it. False for anything else, and
+   * for a shadow a tile cannot draw; the caller then blurs it as before.
+   */
+  _tiledShadow(shapes, evenodd) {
+    if (!shapes?.length || !(this._shadowBlur > 0)) return false;
+    if (!shadowPolicyOf(this.window.app).tiles) return false;
+    if (shapes.length === 1) return this._shadowFromTile(shapes[0], null);
+    if (shapes.length !== 2 || !evenodd) return false;
+    const [p, q] = shapes;
+    if (boxInside(q, p)) return this._shadowFromTile(p, q);
+    if (boxInside(p, q)) return this._shadowFromTile(q, p);
+    return false;
+  }
+
+  _shadowFromTile(outer, inner) {
+    const ox = Math.round(this._shadowOffsetX);
+    const oy = Math.round(this._shadowOffsetY);
+    const snap = (r) => ({
+      x0: Math.round(r.x0) + ox,
+      y0: Math.round(r.y0) + oy,
+      x1: Math.round(r.x1) + ox,
+      y1: Math.round(r.y1) + oy,
+      corners: r.corners,
+    });
+    const o = snap(outer);
+    // a shape with nothing in it casts nothing
+    if (!(o.x1 > o.x0 && o.y1 > o.y0)) return true;
+    let hole = inner && snap(inner);
+    if (hole && !(hole.x1 > hole.x0 && hole.y1 > hole.y0)) hole = null;
+    const plan = planShadowTiles(o, hole, this._shadowBlur);
+    if (!plan) return false;
+    const { x, y, width, height } = plan.bounds;
+    // a composite's corner goes over in 16 bits: a shadow that reaches past
+    // them is drawn the old way, whose box is clamped to what can show
+    if (x < -WIRE_REACH || y < -WIRE_REACH) return false;
+    if (x + width > WIRE_REACH || y + height > WIRE_REACH) return false;
+    if (!(x < this.width && y < this.height && x + width > 0 && y + height > 0)) {
+      return true;
+    }
+    const clip = this._clipRect();
+    if (clip && !boxesMeet(plan.bounds, clip)) return true;
+    const app = this.window.app;
+    const tile = cachedShadow(app, `tile|${plan.key}`, () =>
+      this._shadowTile(plan),
+    );
+    if (!tile) return false;
+    const picture = tile.picture(app);
+    const style = this._fillStyle;
+    const background = this._backgroundPicture;
+    this.fillStyle = this._shadowColor;
+    try {
+      const op = this._op();
+      for (const [sx, sy, sw, sh, dx, dy, dw, dh] of plan.pieces) {
+        if (clip && !boxesMeet({ x: dx, y: dy, width: dw, height: dh }, clip)) {
+          continue;
+        }
+        // a piece drawn at its own size reads the tile as it is: undo the
+        // transform the last stretched one left on the picture
+        if (sw === dw && sh === dh && picture._tileScaled) {
+          this.Render.SetPictureTransform(picture.id, IDENTITY_TRANSFORM);
+          picture.setFilter("nearest");
+          picture._tileScaled = false;
+        } else if (sw !== dw || sh !== dh) {
+          picture._tileScaled = true;
+        }
+        this._drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op);
+      }
+    } finally {
+      this._fillStyle = style;
+      this._backgroundPicture = background;
+    }
+    return true;
+  }
+
+  /** A tile's coverage on an `a8` surface: made here, uploaded once. */
+  _shadowTile(plan) {
+    const app = this.window.app;
+    const { width, height } = plan;
+    const surface = new Surface(app, { width, height, format: "a8" });
+    const alpha = shadowTileAlpha(plan);
+    // PutImage wants each row padded to 4 bytes
+    const stride = (width + 3) & ~3;
+    let data;
+    if (stride === width) {
+      data = Buffer.from(alpha.buffer, alpha.byteOffset, alpha.length);
+    } else {
+      data = Buffer.alloc(stride * height);
+      for (let y = 0; y < height; y++) {
+        Buffer.from(alpha.buffer, alpha.byteOffset + y * width, width).copy(
+          data,
+          y * stride,
+        );
+      }
+    }
+    const X = this.X;
+    // one upload GC per app for depth 8, as image.js keeps one for 32
+    let gc = app._coverageUploadGC;
+    if (!gc) {
+      gc = app._coverageUploadGC = X.AllocID();
+      X.CreateGC(gc, surface.pixmap.id);
+    }
+    const maxBytes = ((app.display.max_request_length ?? 65535) - 8) * 4;
+    const rowsPerBand = Math.max(1, Math.floor(maxBytes / stride));
+    for (let y = 0; y < height; y += rowsPerBand) {
+      const rows = Math.min(rowsPerBand, height - y);
+      X.PutImage(
+        2,
+        surface.pixmap.id,
+        gc,
+        width,
+        rows,
+        0,
+        y,
+        0,
+        8,
+        data.subarray(y * stride, (y + rows) * stride),
+      );
+    }
+    return surface;
+  }
+
   // ------------------------------------------------------------------
   // transform
 
@@ -1764,17 +1922,69 @@ class RenderingContext2d {
     this._path._append(transformCommands(tmp._cmds.slice(1), this._m));
   }
 
+  /** The shapes the default path is so far — none for an empty one, null
+   *  once it is anything but rects and rounded rects (Path2D `_shapes`). */
+  _shapesSoFar() {
+    return this._path._cmds.length === 0 ? [] : this._path._shapes;
+  }
+
+  /**
+   * `shapes` and one more, in device space: a rect, or a rounded rect with
+   * `radii` as `roundRect` takes them. Null where the list already was, or
+   * where the transform rotates, skews or mirrors — a tile is drawn upright
+   * — or the box is not a finite one.
+   */
+  _withShape(shapes, x, y, w, h, radii) {
+    if (!shapes || !finiteRect(x, y, w, h)) return null;
+    const [a, b, c, d, e, f] = this._m;
+    if (b !== 0 || c !== 0 || !(a > 0) || !(d > 0)) return null;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
+    const corners = normalizeRadii(w, h, radii).map((r) => ({
+      x: r.x * a,
+      y: r.y * d,
+    }));
+    return [
+      ...shapes,
+      {
+        x0: a * x + e,
+        y0: d * y + f,
+        x1: a * (x + w) + e,
+        y1: d * (y + h) + f,
+        corners,
+      },
+    ];
+  }
+
   rect(x, y, w, h) {
+    const shapes = this._shapesSoFar();
     const tmp = new Path2D();
     tmp.rect(x, y, w, h);
     this._path.addPath(tmp, this._m);
+    this._path._shapes = this._withShape(shapes, x, y, w, h, 0);
   }
 
   roundRect(x, y, w, h, radii) {
+    const shapes = this._shapesSoFar();
     const tmp = new Path2D();
     tmp.roundRect(x, y, w, h, radii);
     const wasEmpty = this._path._cmds.length === 0;
     this._path.addPath(tmp, this._m);
+    // Path2D draws a box of negative extent as a plain rect
+    this._path._shapes = this._withShape(
+      shapes,
+      x,
+      y,
+      w,
+      h,
+      w < 0 || h < 0 ? 0 : radii,
+    );
     // Re-derive the recognition tag in device space (addPath cleared it): it
     // survives only when this roundRect is the whole path and the CTM is a
     // pure translation at record time — the default path bakes the transform

package/lib/shadowmath.js

@@ -36,13 +36,19 @@
  *   `maxSigma`-wide blur cannot resample its way down to a thumbnail.
  *   `maxScale: 1` blurs everything at full resolution, which is what 8.6
  *   did, and is the setting for a caller that needs the exact kernel.
+ * - `tiles` — whether a shadowed fill of a rect, a rounded rect, or a rect
+ *   less a rounded rect filled evenodd is drawn from a shadow tile made once
+ *   (lib/shadowtiles.js) rather than blurred on every fill. Tiles are not
+ *   capped at `maxSigma`: what one costs is bounded by the scale it is made
+ *   at. `false` puts every shadow back on the path above.
  */
 export const DEFAULT_SHADOW_POLICY = {
   cacheBytes: 4 << 20,
   maxSigma: 32,
   maxPixels: 8 << 20,
   scaleSigma: 4,
-  maxScale: 4
+  maxScale: 4,
+  tiles: true
 };
 
 /** the policy for one app, merged over the defaults */

package/lib/shadowtiles.js

@@ -0,0 +1,326 @@
+// The blurred shadow of a rectangle, a rounded rectangle, or a rectangle
+// with a rounded hole in it, drawn from a tile made once instead of blurred
+// on every fill. No X connection in here: the plan and the pixels, which
+// the 2d context composites (renderingcontext_2d.js) and react-x11's
+// CoreGraphics and Direct2D contexts composite the same way. Exported as
+// `ntk/shadow-tiles`.
+//
+// A gaussian over a shape costs its area times its width, and a shadowed
+// fill paid it on every fill — on XQuartz's software RENDER, a header's
+// `box-shadow: inset 0 0 100px` repainted by a scroll's exposed strip was
+// the difference between 51 and 31 frames a second, and CoreGraphics spent
+// 130 to 380 ms on one at 2x. None of it is a fact about where the shape
+// is or how long its sides are: a rounded rectangle's shadow is the same
+// all along its straight edges, so it is enough to make it once for a
+// rectangle only just long enough to have a straight part, and to stretch
+// that part to the length asked for.
+//
+// So a tile holds the shadow of a shape's *corners* — the shape shortened,
+// on each axis that has room, to three pixels of straight edge — and is
+// drawn as up to nine pieces: the corners as they are, the straight pixel
+// between them stretched. Three rather than one because a filtered stretch
+// reads a pixel either side of the one it stretches, and a piece's
+// neighbours in the tile are straight edge too. The tile is named by the
+// corners, the blur and whether there is a hole — never by where the shape
+// is, how big it is past its corners, or what part of it a paint reaches —
+// so every box in a document with the same shadow shares one, and a scroll
+// that exposes a strip of one draws a strip of it.
+//
+// The pixels are made here, not by blurring on a server or a GPU: the
+// shape's coverage, row by row, then a gaussian in two passes, at the
+// canvas σ — half the blur (HTML, "shadows"; CSS Backgrounds 3, 7.1.1) —
+// with no `maxSigma` cap, since a wide blur's cost here is bounded by the
+// scale it is made at. A gaussian carries nothing finer than about σ/2, so
+// past σ 8 the tile is made at a half, a quarter, … of the size and scaled
+// up as it is drawn, as `blurCoverage` does: a 400-pixel blur's tile is a
+// hundred kilobytes rather than twenty megabytes.
+
+import { normalizeRadii } from './path.js';
+import { gaussianKernel1d } from './shadowmath.js';
+
+export { normalizeRadii };
+
+/** The σ, in tile pixels, below which a tile is not made any smaller —
+ *  the policy's `scaleSigma`: at 4 the scaled blur stays within a few
+ *  levels of 8-bit alpha of the exact one. */
+const MIN_TILE_SIGMA = 4;
+
+/** How far a tile may be scaled down, whatever the blur. */
+const MAX_TILE_SCALE = 16;
+
+/**
+ * The most pixels one tile may have. A shape that is all corner on both
+ * axes — an ellipse spelled as a `roundRect` — has nothing to stretch, and
+ * its tile is the size of the shape; past this it is not made, and the
+ * shadow is drawn as it was before tiles.
+ */
+export const MAX_TILE_PIXELS = 1 << 20;
+
+/** Sub-rows each tile row's coverage is sampled on; the blur smooths the
+ *  rest. Along a row coverage is exact. */
+const SUBROWS = 8;
+
+/** How much smaller than the shape its tile is made, for a blur. */
+export function tileScale(blur) {
+  const sigma = blur / 2;
+  let k = 1;
+  while (k * 2 <= MAX_TILE_SCALE && sigma / (k * 2) >= MIN_TILE_SIGMA) k *= 2;
+  return k;
+}
+
+/**
+ * One axis of a tile: which of its pixels are drawn where. With room for a
+ * straight part, three segments — the features before it, at scale; one
+ * tile pixel of it, stretched; the features after it, at scale — and the
+ * amount the tile's shape is shorter than the real one. Without, the whole
+ * axis at scale.
+ *
+ * `lo`/`hi` are the outer shape's edges and `nearLo`/`nearHi` how far in
+ * from each it stops being straight — the outer corners, and where there is
+ * a hole its edge and corners — in whole device pixels; `reach` is how far
+ * the blur spreads, a whole number of tile pixels of `k` device pixels.
+ */
+function planAxis(lo, hi, nearLo, nearHi, reach, k) {
+  const origin = lo - reach;
+  const flatFrom = lo + nearLo + reach;
+  const flatTo = hi - nearHi - reach;
+  if (flatTo - flatFrom >= 4 * k) {
+    // the stretched pixel `at`, with a straight pixel either side of it
+    const at = Math.ceil((flatFrom - origin) / k) + 1;
+    const cut = flatTo - origin - (at + 2) * k;
+    const size = Math.ceil((hi + reach - cut - origin) / k);
+    return {
+      origin,
+      size,
+      cut,
+      segments: [
+        [0, at, origin, origin + at * k],
+        [at, at + 1, origin + at * k, origin + (at + 1) * k + cut],
+        [at + 1, size, origin + (at + 1) * k + cut, origin + size * k + cut],
+      ],
+    };
+  }
+  const size = Math.ceil((hi - lo + 2 * reach) / k);
+  return {
+    origin,
+    size,
+    cut: 0,
+    segments: [[0, size, origin, origin + size * k]],
+  };
+}
+
+/** A number as part of a key, to the 256th of a pixel. */
+const q = (v) => Math.round(v * 256) / 256;
+
+/**
+ * Where a shadow's tile comes from and how it is drawn, or null where it
+ * would be too big to keep. `outer` and `inner` are
+ * `{ x0, y0, x1, y1, corners }` in whole device pixels, `corners` the four
+ * `{ x, y }` radii from top left, clockwise (`normalizeRadii`); `inner`,
+ * when there is one, lies inside `outer`, and the shadow is the one the
+ * frame between them casts — an inset box shadow's. The shadow's offset is
+ * already in both, and `blur` is the canvas `shadowBlur`, in device pixels.
+ *
+ * `pieces` are `[sx, sy, sw, sh, dx, dy, dw, dh]` — tile pixels in, device
+ * pixels out — and cover the shadow's whole reach once, except a frame's
+ * middle, which lies inside the hole by more than the blur reaches and has
+ * nothing in it. `key` names the tile's pixels: two plans with one key
+ * draw from one tile.
+ */
+export function planShadowTiles(outer, inner, blur) {
+  const k = tileScale(blur);
+  const sigma = blur / 2 / k;
+  const reachK = Math.ceil(3 * sigma);
+  const reach = reachK * k;
+  const oc = outer.corners;
+  let nearL = Math.max(oc[0].x, oc[3].x);
+  let nearR = Math.max(oc[1].x, oc[2].x);
+  let nearT = Math.max(oc[0].y, oc[1].y);
+  let nearB = Math.max(oc[3].y, oc[2].y);
+  if (inner) {
+    const ic = inner.corners;
+    nearL = Math.max(nearL, inner.x0 - outer.x0 + Math.max(ic[0].x, ic[3].x));
+    nearR = Math.max(nearR, outer.x1 - inner.x1 + Math.max(ic[1].x, ic[2].x));
+    nearT = Math.max(nearT, inner.y0 - outer.y0 + Math.max(ic[0].y, ic[1].y));
+    nearB = Math.max(nearB, outer.y1 - inner.y1 + Math.max(ic[3].y, ic[2].y));
+  }
+  const ax = planAxis(outer.x0, outer.x1, nearL, nearR, reach, k);
+  const ay = planAxis(outer.y0, outer.y1, nearT, nearB, reach, k);
+  if (ax.size * ay.size > MAX_TILE_PIXELS) return null;
+
+  // the tile's own shape, in tile pixels: the real one shortened by the
+  // cut on each stretched axis — every edge past the cut moves back by it
+  const toTile = (r) => ({
+    x0: (r.x0 - ax.origin) / k,
+    y0: (r.y0 - ay.origin) / k,
+    x1: (r.x1 - ax.cut - ax.origin) / k,
+    y1: (r.y1 - ay.cut - ay.origin) / k,
+    corners: r.corners.map((c) => ({ x: c.x / k, y: c.y / k })),
+  });
+  const shape = { outer: toTile(outer), inner: inner ? toTile(inner) : null };
+
+  const middle = (axis, i) => axis.segments.length === 3 && i === 1;
+  const pieces = [];
+  ay.segments.forEach(([ty0, ty1, dy0, dy1], j) => {
+    ax.segments.forEach(([tx0, tx1, dx0, dx1], i) => {
+      if (inner && middle(ax, i) && middle(ay, j)) return;
+      if (!(dx1 > dx0 && dy1 > dy0)) return;
+      pieces.push([tx0, ty0, tx1 - tx0, ty1 - ty0, dx0, dy0, dx1 - dx0, dy1 - dy0]);
+    });
+  });
+
+  const geometry = (r) =>
+    r
+      ? [r.x0, r.y0, r.x1, r.y1, ...r.corners.flatMap((c) => [c.x, c.y])].map(q).join(',')
+      : '';
+  return {
+    key: `${blur}|${ax.size}x${ay.size}|${geometry(shape.outer)}|${geometry(shape.inner)}`,
+    k,
+    sigma,
+    reach: reachK,
+    width: ax.size,
+    height: ay.size,
+    shape,
+    pieces,
+    bounds: {
+      x: ax.origin,
+      y: ay.origin,
+      width: ax.segments.at(-1)[3] - ax.origin,
+      height: ay.segments.at(-1)[3] - ay.origin,
+    },
+  };
+}
+
+/** The x extent of a rounded rectangle along the line `y`, or null where
+ *  the line misses it. A corner is rounded only with both radii. */
+function spanAt(r, y) {
+  if (!(y >= r.y0 && y < r.y1)) return null;
+  const [tl, tr, br, bl] = r.corners;
+  // how far a corner's ellipse reaches across, `d` above or below its
+  // centre, as a fraction of its horizontal radius
+  const across = (d, ry) => {
+    const t = d / ry;
+    return Math.sqrt(Math.max(0, 1 - t * t));
+  };
+  let left = r.x0;
+  let right = r.x1;
+  if (tl.x > 0 && tl.y > 0 && y < r.y0 + tl.y) {
+    left = r.x0 + tl.x * (1 - across(r.y0 + tl.y - y, tl.y));
+  } else if (bl.x > 0 && bl.y > 0 && y > r.y1 - bl.y) {
+    left = r.x0 + bl.x * (1 - across(y - (r.y1 - bl.y), bl.y));
+  }
+  if (tr.x > 0 && tr.y > 0 && y < r.y0 + tr.y) {
+    right = r.x1 - tr.x * (1 - across(r.y0 + tr.y - y, tr.y));
+  } else if (br.x > 0 && br.y > 0 && y > r.y1 - br.y) {
+    right = r.x1 - br.x * (1 - across(y - (r.y1 - br.y), br.y));
+  }
+  return right > left ? [left, right] : null;
+}
+
+/** Add `weight` times the coverage of the span `[a, b)` to a row. */
+function addSpan(row, width, a, b, weight) {
+  const from = Math.max(0, a);
+  const to = Math.min(width, b);
+  if (!(to > from)) return;
+  const i0 = Math.floor(from);
+  const i1 = Math.ceil(to) - 1;
+  if (i0 === i1) {
+    row[i0] += (to - from) * weight;
+    return;
+  }
+  row[i0] += (i0 + 1 - from) * weight;
+  for (let i = i0 + 1; i < i1; i++) row[i] += weight;
+  row[i1] += (to - i1) * weight;
+}
+
+/**
+ * The tile's coverage before the blur: how much of each tile pixel the
+ * shape covers — the outer shape less the hole — 0..1, row-major.
+ */
+export function shadowCoverage(plan) {
+  const { width, height, shape } = plan;
+  const out = new Float32Array(width * height);
+  const weight = 1 / SUBROWS;
+  for (let y = 0; y < height; y++) {
+    const row = out.subarray(y * width, (y + 1) * width);
+    for (let s = 0; s < SUBROWS; s++) {
+      const at = y + (s + 0.5) / SUBROWS;
+      const span = spanAt(shape.outer, at);
+      if (!span) continue;
+      addSpan(row, width, span[0], span[1], weight);
+      const hole = shape.inner && spanAt(shape.inner, at);
+      if (hole) addSpan(row, width, hole[0], hole[1], -weight);
+    }
+  }
+  return out;
+}
+
+/** A gaussian of the tile's σ over `values`, rows then columns, in place.
+ *  Outside the tile is nothing, which its padding of `reach` makes true. */
+function blurTile(values, width, height, sigma, reach) {
+  const kernel = gaussianKernel1d(sigma, reach);
+  const line = new Float32Array(Math.max(width, height));
+  for (let y = 0; y < height; y++) {
+    const base = y * width;
+    for (let x = 0; x < width; x++) line[x] = values[base + x];
+    for (let x = 0; x < width; x++) {
+      let sum = 0;
+      const from = Math.max(0, x - reach);
+      const to = Math.min(width - 1, x + reach);
+      for (let t = from; t <= to; t++) sum += line[t] * kernel[t - x + reach];
+      values[base + x] = sum;
+    }
+  }
+  for (let x = 0; x < width; x++) {
+    for (let y = 0; y < height; y++) line[y] = values[y * width + x];
+    for (let y = 0; y < height; y++) {
+      let sum = 0;
+      const from = Math.max(0, y - reach);
+      const to = Math.min(height - 1, y + reach);
+      for (let t = from; t <= to; t++) sum += line[t] * kernel[t - y + reach];
+      values[y * width + x] = sum;
+    }
+  }
+}
+
+/** The tile's blurred coverage, 0..1, row-major. */
+export function shadowTileCoverage(plan) {
+  const values = shadowCoverage(plan);
+  blurTile(values, plan.width, plan.height, plan.sigma, plan.reach);
+  return values;
+}
+
+/** The tile as an `a8` coverage surface stores it: one byte a pixel,
+ *  rows unpadded. */
+export function shadowTileAlpha(plan) {
+  const values = shadowTileCoverage(plan);
+  const out = new Uint8Array(values.length);
+  for (let i = 0; i < values.length; i++) {
+    const v = values[i];
+    out[i] = v > 0 ? Math.round(Math.min(1, v) * 255) : 0;
+  }
+  return out;
+}
+
+/**
+ * The tile in a colour, as straight RGBA — for a surface that has no
+ * coverage format to composite through a colour. `rgba` is 0..1 each.
+ */
+export function rasterShadowTile(plan, rgba) {
+  const values = shadowTileCoverage(plan);
+  const [r, g, b, a] = rgba;
+  const R = Math.round(r * 255);
+  const G = Math.round(g * 255);
+  const B = Math.round(b * 255);
+  const out = new Uint8Array(values.length * 4);
+  for (let i = 0; i < values.length; i++) {
+    const v = values[i];
+    if (!(v > 0)) continue;
+    const o = i * 4;
+    out[o] = R;
+    out[o + 1] = G;
+    out[o + 2] = B;
+    out[o + 3] = Math.round(Math.min(1, v) * a * 255);
+  }
+  return out;
+}

package/lib/text/layout.js

@@ -25,15 +25,107 @@ const UNSPACED =
  * 12.8px measures 410.0125px in the 410px column it was written for — and
  * a browser takes the line as fitting, comparing in 64ths of a pixel with
  * that much to spare (Blink's line breaker adds a LayoutUnit's epsilon to
- * the width it fits to).
+ * the width it fits to). What a browser compares is the line's items,
+ * each rounded up to a 64th first, which a layout does with `fit: 'items'`
+ * (`LineFit`).
  */
 const FIT_SLACK = 1 / 64;
 
-/** How wide a line's tokens are, the white space it ends on left out. */
-function tokensWidth(toks) {
-  let width = 0;
-  for (let i = 0; i < toks.length; i++) width += toks[i].width + (i ? kernBefore(toks[i]) : 0);
-  return toks.length ? width - toks[toks.length - 1].wsWidth : 0;
+/** A width rounded up to a 64th of a pixel, as Blink rounds an item's
+ *  shaped width up to a LayoutUnit (`ShapeResult::SnappedWidth`). The
+ *  nudge keeps a sum that lands on a 64th, give or take the last bit of a
+ *  double, where it lands. */
+function snapUp(width) {
+  return Math.ceil(width * 64 - 1e-7) / 64;
+}
+
+/**
+ * A line's width as it is fitted: its spans' parts of it summed, its
+ * trailing white space left out — each part rounded up to a 64th of a pixel
+ * first where the layout fits as a browser does (`fit: 'items'`), as it is
+ * without, a float sum.
+ *
+ * A browser measures a line in items — the text of one element between its
+ * edges, shaped — and rounds each one's width up to a LayoutUnit before it
+ * adds it (Blink's `ShapeResult::SnappedWidth`, which every text item's
+ * `inline_size` on a line is), so a line of three items is up to three 64ths
+ * wider than its advances. Compared with the width and its 64th to spare
+ * (`FIT_SLACK`), a line of Verdana 0.002px past its 529px, the `<abbr>` in
+ * it making three items, is 2 64ths past and breaks, as it does in Chrome;
+ * a line that is one item and a hair over still fits. A span is an item,
+ * and so is its part of a line; a `kernAcross` span is not one of its own
+ * — it is a space a justified line or `word-spacing` spaces out, which a
+ * browser spaces inside the item — and is measured with the span before it.
+ *
+ * Kept a token at a time: `add` puts one on the line, `with` is the line's
+ * width were the next one put on it.
+ */
+class LineFit {
+  constructor(round) {
+    this.round = round;
+    this.reset();
+  }
+
+  reset() {
+    /** the items closed on the line, each rounded */
+    this.closed = 0;
+    /** the width of the item the line ends in, as far as it goes */
+    this.open = 0;
+    this.span = null;
+  }
+
+  add(token, kern) {
+    const frags = token.fragments;
+    for (let i = 0; i < frags.length; i++) {
+      const frag = frags[i];
+      const width = frag.shaped.width + (frag.kern ?? 0) + (i === 0 ? kern : 0);
+      if (this.span === null || sameItem(this.span, frag.span)) {
+        this.open += width;
+      } else {
+        this.closed += this.round(this.open);
+        this.open = width;
+      }
+      this.span = frag.span;
+    }
+    // a token of no text, a forced break's, adds nothing but its kerning
+    if (!frags.length) this.open += kern;
+  }
+
+  /** The line's width with `token` on it, the white space it ends on left
+   *  out. */
+  with(token, kern) {
+    const { closed, open, span } = this;
+    this.add(token, kern);
+    const width = this.closed + this.round(this.open - token.wsWidth);
+    this.closed = closed;
+    this.open = open;
+    this.span = span;
+    return width;
+  }
+}
+
+/** Whether a span goes on measuring the item the one before it is in: the
+ *  same span, or a space spaced out apart (`kernAcross`) either side. */
+function sameItem(before, span) {
+  return before === span || span.kernAcross || before.kernAcross;
+}
+
+/** How a layout rounds its items before it adds them (`LineFit`). */
+function itemRounding(options) {
+  return options.fit === 'items' ? snapUp : unrounded;
+}
+
+function unrounded(width) {
+  return width;
+}
+
+/** A line's tokens' width as it is fitted (`LineFit`). */
+function fittedWidth(toks, round) {
+  if (!toks.length) return 0;
+  const fit = new LineFit(round);
+  for (let i = 0; i < toks.length - 1; i++) fit.add(toks[i], i ? kernBefore(toks[i]) : 0);
+  const last = toks.length - 1;
+  return fit.with(toks[last], last ? kernBefore(toks[last]) : 0);
 }
 
 /** The kerning between a token and the one before it on its line
@@ -89,6 +181,10 @@ function isWsGlyph(g) {
  *   past the line's end, as CSS's `overflow-wrap: normal` does — but for
  *   text in a script written without spaces (Thai, Khmer, Javanese…), whose
  *   words the breaker cannot find, which is cut as a fallback
+ * - `fit` — 'items' fits and measures a line as a browser does: each span's
+ *   part of it rounded up to a 64th of a pixel before it is added, as Blink
+ *   rounds an element's text on a line up to a LayoutUnit; a line's `width`
+ *   is that sum. Default: the advances as they add up (`LineFit`)
  *
  * The result is inspectable before/without drawing: `width`, `height`,
  * `truncated`, and `lines[] = { x, y, height, baseline, width, ascent,
@@ -134,18 +230,19 @@ export class TextLayout {
     const whole = options.overflowWrap === 'normal';
     // text that does not wrap is a line to each forced break, however wide
     const wraps = options.wrap !== false;
+    const round = itemRounding(options);
     {
       let cur = [];
-      let curWidth = 0;
+      const fit = new LineFit(round);
       const flush = () => {
         lineTokens.push(cur);
         cur = [];
-        curWidth = 0;
+        fit.reset();
       };
       for (let token of tokens) {
         while (
           wraps &&
-          curWidth + (cur.length ? kernBefore(token) : 0) + token.width - token.wsWidth > maxWidth + FIT_SLACK
+          fit.with(token, cur.length ? kernBefore(token) : 0) > maxWidth + FIT_SLACK
         ) {
           if (cur.length > 0) {
             flush();
@@ -160,7 +257,7 @@ export class TextLayout {
             token = rest;
           }
         }
-        curWidth += token.width + (cur.length ? kernBefore(token) : 0);
+        fit.add(token, cur.length ? kernBefore(token) : 0);
         cur.push(token);
         if (token.required) flush();
       }
@@ -199,7 +296,7 @@ export class TextLayout {
       // Elision is the last kept line's business, or a line's that does not
       // wrap and runs past the width, and it happens before entries exist,
       // because dropping content means re-shaping the tail.
-      const cut = (elide && li === lineTokens.length - 1) || (cutWide && tokensWidth(toks) > maxWidth + FIT_SLACK);
+      const cut = (elide && li === lineTokens.length - 1) || (cutWide && fittedWidth(toks, round) > maxWidth + FIT_SLACK);
       const ellipsis = cut ? this._elide(toks, baseSpan) : null;
       if (ellipsis) {
         toks = this._fitBefore(toks, maxWidth - ellipsis.width);
@@ -275,13 +372,26 @@ export class TextLayout {
       let natural = 0;
       const runs = [];
       let x = 0;
+      // and how wide it is as it was fitted (`LineFit`): where its spans'
+      // parts are each rounded up to a 64th, so is its width, and a layout
+      // laid out again at its own width breaks nowhere new
+      let fitted = 0;
+      let item = 0;
+      let itemSpan = null;
       for (const e of entries) {
+        const from = x;
         if (e.kern) x += e.kern;
         const positioned = { x, width: e.run.width, run: e.run, span: e.span, start: e.start, end: e.end };
         if (e.ellipsis) positioned.ellipsis = true;
         runs.push(positioned);
         x += e.run.width;
         if (e.kernAfter) x += e.kernAfter;
+        if (itemSpan !== null && !sameItem(itemSpan, e.span)) {
+          fitted += round(item);
+          item = 0;
+        }
+        item += x - from;
+        itemSpan = e.span;
         const m = e.run.font.metrics(e.run.size);
         if (m.ascent > ascent) ascent = m.ascent;
         if (m.descent > descent) descent = m.descent;
@@ -294,7 +404,8 @@ export class TextLayout {
         descent = m.descent;
         natural = m.lineHeight;
       }
-      if (x > layoutWidth) layoutWidth = x;
+      if (runs.length) fitted += round(item);
+      if (fitted > layoutWidth) layoutWidth = fitted;
       // Half-leading (CSS Inline Layout 3): the slack between the glyphs and
       // the line box is split evenly above and below, rather than all of it
       // landing under the text. This is what makes a single line sit
@@ -312,7 +423,7 @@ export class TextLayout {
         y,
         height: box,
         baseline: y + leading + ascent,
-        width: x,
+        width: fitted,
         ascent,
         descent,
         runs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.15.0",
+  "version": "8.16.1",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -31,6 +31,7 @@
     "./path": "./lib/path.js",
     "./gl": "./lib/gl.js",
     "./shadow-math": "./lib/shadowmath.js",
+    "./shadow-tiles": "./lib/shadowtiles.js",
     "./image": "./lib/image.js",
     "./svg": "./lib/widgets/svgview.js",
     "./font": "./lib/text/font.js"