ntk 8.21.1 → 8.23.0

package/lib/text/fontmanager.js

@@ -565,6 +565,15 @@ export default class FontManager {
     return new TextLayout(this, content, style, options);
   }
 
+  /**
+   * Whether `layout` takes `justify`, and fills a line with its word
+   * separators itself. True; a caller that asks before it passes the option
+   * keeps its own way of justifying for an engine without it.
+   */
+  get justifies() {
+    return true;
+  }
+
   /**
    * Memoized shaping used by TextLayout and the canvas text path, bounded at
    * two generations of `SHAPE_GENERATION` words. `levelsKey` is a compact
@@ -671,7 +680,7 @@ export default class FontManager {
    */
   _shapeCachedWhole(text, style) {
     const emb = embeddingLevels(text, style.direction);
-    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    const baseLevel = emb.paragraphs[0].level;
     const shaped = this._shapeCached(text, style, normalizedLevels(emb.levels, 0, text.length));
     return shaped.baseLevel === baseLevel ? shaped : { ...shaped, baseLevel };
   }

package/lib/text/layout.js

@@ -12,6 +12,29 @@ const WS = new Set([0x20, 0x09]);
 const HARD_BREAKS = /[\n\r\u2028\u2029]+$/;
 const TRAILING_WS = /[ \t]+$/;
 
+// The word separators a justified line's room is shared out at (CSS Text 3,
+// 7.4, `text-justify: auto` as a browser has it for the scripts that space
+// their words): a space and a no-break space.
+const SEPARATORS = new Set([0x20, 0xa0]);
+const separates = (g) => g.codePoints.length === 1 && SEPARATORS.has(g.codePoints[0]);
+
+// What ends a line `justify` sets as it does a paragraph's last: a line feed,
+// a carriage return or a paragraph separator, as a browser's forced break
+// does. A line separator, U+2028, is not one, so a caller can ask a line to
+// break there and be justified.
+const JUSTIFY_STOPS = /[\n\r\u2029]$/;
+
+// `justify`'s lines as bits: those that go on to another (REST), and the
+// paragraph's last with those a forced break ends (LAST).
+const REST = 1;
+const LAST = 2;
+function justifyBits(justify) {
+  if (justify === true || justify === 'rest') return REST;
+  if (justify === 'last') return LAST;
+  if (justify === 'all') return REST | LAST;
+  return 0;
+}
+
 /** Scripts written without spaces between words, whose line breaking
  *  needs a dictionary (UAX #14's SA class, and Javanese, Balinese and
  *  Buginese, which are AL there): a token of theirs is a run of words. */
@@ -162,6 +185,44 @@ function isWsGlyph(g) {
   return g.codePoints.length > 0 && g.codePoints.every((cp) => WS.has(cp));
 }
 
+/**
+ * A line set to fill `width`: what it leaves of it shared equally among its
+ * word separators (`SEPARATORS`), each glyph's advance widened by its share
+ * — the white space it ends on hangs, and takes none. Its runs are made
+ * anew, those with a separator in them over glyphs of their own, since a
+ * shaped run is the paragraph's and shared by every layout of it; caret
+ * positions, hit testing, drawing and coverage all read the advances, and
+ * agree. A line with no separator, or with no room left, keeps its
+ * alignment. Answers the line's width.
+ */
+function justifyLine(line, width) {
+  const free = width - line.width;
+  if (!(free > 0)) return line.width;
+  let count = 0;
+  for (const r of line.runs) {
+    for (const g of r.run.glyphs) if (separates(g)) count++;
+  }
+  if (count === 0) return line.width;
+  const extra = free / count;
+  let shift = 0;
+  line.runs = line.runs.map((r) => {
+    const moved = shift ? { ...r, x: r.x + shift } : r;
+    let k = 0;
+    for (const g of r.run.glyphs) if (separates(g)) k++;
+    if (k === 0) return moved;
+    shift += k * extra;
+    const glyphs = r.run.glyphs.map((g) => (separates(g) ? { ...g, ax: g.ax + extra } : g));
+    return {
+      ...moved,
+      width: r.width + k * extra,
+      run: { ...r.run, glyphs, width: r.run.width + k * extra }
+    };
+  });
+  line.width += count * extra;
+  line.advance += count * extra;
+  return line.width;
+}
+
 /**
  * Multi-line text layout: breaks (possibly styled) text into lines for a
  * target container width, with full shaping — kerning, ligatures, complex
@@ -205,6 +266,13 @@ 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
+ * - `justify` — the lines set to fill `maxWidth`, what each leaves of it
+ *   shared equally among its word separators, a space and a no-break space:
+ *   `true` (or `'rest'`) for every line but the paragraph's last and each a
+ *   forced break ends, as CSS's `text-align: justify`; `'last'` for only
+ *   those; `'all'` for every line. A line with no separator, or none of the
+ *   width to spare, keeps `align`'s place, as do the lines not justified.
+ *   The breaks are the layout's at its width; justifying moves none
  * - `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`
@@ -436,6 +504,11 @@ export class TextLayout {
         natural = m.lineHeight;
       }
       if (runs.length) fitted += round(item);
+      // a line's place in the paragraph, for `justify`: its last, which a
+      // `maxLines` cut leaves no line, or one a forced break ends
+      const ends =
+        (li === lineTokens.length - 1 && !this.truncated) ||
+        JUSTIFY_STOPS.test(text.slice(Math.max(lineStart, lineEnd - 1), lineEnd));
       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
@@ -462,11 +535,27 @@ export class TextLayout {
         start: lineStart,
         end: lineEnd,
         _contentEnd: contentEnd,
-        _trailing: trailing
+        _trailing: trailing,
+        _ends: ends,
+        _elided: !!ellipsis
       });
       y += box;
     }
 
+    // ---- justification ----
+    // After the lines are broken, so a width the lines are set at is no
+    // shaping: a paragraph laid out again at another width breaks the glyphs
+    // it has into other lines and spaces them, where one that spaced its
+    // words through letter spacing was shaped again at every width.
+    const justify = justifyBits(options.justify);
+    if (justify && Number.isFinite(maxWidth)) {
+      for (const line of this.lines) {
+        if (line._elided || !(justify & (line._ends ? LAST : REST))) continue;
+        const width = justifyLine(line, maxWidth);
+        if (width > layoutWidth) layoutWidth = width;
+      }
+    }
+
     this.width = layoutWidth;
     this.height = y;
 
@@ -537,7 +626,7 @@ export class TextLayout {
     const text = spans.map((s) => s.text).join('');
     const emb = embeddingLevels(text, direction);
     const levels = emb.levels;
-    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level & 1 : 0;
+    const baseLevel = emb.paragraphs[0].level & 1;
 
     // span boundaries, for binary search by char position
     const spanStarts = [];

package/lib/text/shape.js

@@ -21,17 +21,30 @@ function neverSwitches(cp) {
 
 /**
  * UAX#9 embedding levels for a string. `direction` is 'ltr', 'rtl' or 'auto'
- * (first-strong detection). Returns bidi-js's result object.
+ * (first-strong detection). Returns bidi-js's result object, which always
+ * has a first paragraph: its level is the text's base level.
  */
 export function embeddingLevels(text, direction = 'auto') {
   const explicit = direction === 'ltr' || direction === 'rtl' ? direction : null;
+  // An empty text is a paragraph too, at the level its direction names.
+  // bidi-js finds no paragraph in it, and a base level read as 0 for want
+  // of one set an empty right-to-left field's line, and the caret on it,
+  // at the left — where the same field holding only a line break had it
+  // at the right. Under 'auto' there is no strong character to find, and
+  // the paragraph is left-to-right (UAX#9 P3).
+  if (!text.length) {
+    return {
+      levels: new Uint8Array(0),
+      paragraphs: [{ start: 0, end: -1, level: explicit === 'rtl' ? 1 : 0 }]
+    };
+  }
   // Text that nothing can make right-to-left is level 0 throughout, which
   // is what the algorithm would work out a character at a time: every
   // layout asks, and most text is Latin, CJK or digits with no bidi at all.
   if (explicit !== 'rtl' && !MAY_REVERSE.test(text)) {
     return {
       levels: new Uint8Array(text.length),
-      paragraphs: text.length ? [{ start: 0, end: text.length - 1, level: 0 }] : []
+      paragraphs: [{ start: 0, end: text.length - 1, level: 0 }]
     };
   }
   return bidi.getEmbeddingLevels(text, explicit);
@@ -161,7 +174,7 @@ export function shapeText(fonts, text, style, levels) {
   if (!levels) {
     const emb = embeddingLevels(text, style.direction);
     levels = emb.levels;
-    baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    baseLevel = emb.paragraphs[0].level;
   } else {
     baseLevel = levels.length ? levels[0] & ~1 : 0;
   }

package/lib/widgets/svgview.js

@@ -18,13 +18,13 @@
 // <use>, <switch>, linear/radial gradients (objectBoundingBox and
 // userSpaceOnUse), transform lists, opacity/fill-opacity/stroke-opacity,
 // display, visibility, nested <svg> viewports, fill-rule, <text> with its
-// <tspan>s, and <mask>. See docs/svg.md for the full surface and
-// limitations.
+// <tspan>s, <mask> and <clipPath>. See docs/svg.md for the full surface
+// and limitations.
 
 import { parseDocument } from 'htmlparser2';
 
 import { cssColorStraight } from '../color.js';
-import { Path2D, flattenPath } from '../path.js';
+import { MAT_IDENTITY, Path2D, flattenPath, matIsIdentity, matMultiply } from '../path.js';
 
 const INHERITED = {
   fill: '#000',
@@ -34,6 +34,7 @@ const INHERITED = {
   lineJoin: 'miter',
   miterLimit: 4,
   fillRule: 'nonzero',
+  clipRule: 'nonzero',
   fillOpacity: 1,
   strokeOpacity: 1,
   color: '#000',
@@ -61,6 +62,7 @@ const STYLE_ATTRS = {
   'stroke-linejoin': 'lineJoin',
   'stroke-miterlimit': 'miterLimit',
   'fill-rule': 'fillRule',
+  'clip-rule': 'clipRule',
   'fill-opacity': 'fillOpacity',
   'stroke-opacity': 'strokeOpacity',
   color: 'color',
@@ -145,7 +147,7 @@ function displayNone(node) {
 // author's fallback is what to draw instead
 const UNDRAWN_FEATURES = new Set(
   [
-    'Extensibility', 'Image', 'Clip', 'BasicClip', 'Filter', 'BasicFilter',
+    'Extensibility', 'Image', 'Filter', 'BasicFilter',
     'Pattern', 'Marker', 'Font', 'BasicFont', 'Script', 'Animation', 'ColorProfile',
     'Cursor', 'View'
   ].map((name) => `http://www.w3.org/TR/SVG11/feature#${name}`)
@@ -540,6 +542,11 @@ function resolveStyle(node, parent) {
           if (VISIBILITY.has(k)) value = k;
           break;
         }
+        case 'clipRule': {
+          const k = v.toLowerCase();
+          if (k === 'nonzero' || k === 'evenodd') value = k;
+          break;
+        }
         case 'fontSize':
           value = fontSizeValue(v, parent.fontSize);
           break;
@@ -704,8 +711,8 @@ function scanPaints(root, ids, languages) {
 
 /**
  * Widget rendering a static SVG document into a window (or any 2d context
- * via `draw()`). Scripting, CSS stylesheets, filters, clip paths and
- * external references are not supported — see docs/svg.md.
+ * via `draw()`). Scripting, CSS stylesheets, filters and external
+ * references are not supported — see docs/svg.md.
  */
 export default class SvgView {
   constructor(window, opts = {}) {
@@ -910,6 +917,13 @@ export default class SvgView {
    */
   _ink(ctx, kind, value, style, path, alpha, draw) {
     const key = kind === 'fill' ? 'fillStyle' : 'strokeStyle';
+    if (this._silhouetting) {
+      // a text in a clip path, which counts in its glyphs (`_silhouette`)
+      ctx[key] = '#000';
+      ctx.globalAlpha = 1;
+      draw();
+      return;
+    }
     if (!this._luminance) {
       const paint = this._paint(ctx, value, style, path);
       if (!paint) return;
@@ -1045,6 +1059,9 @@ export default class SvgView {
    * `viewBox` is fitted in as `preserveAspectRatio` says, and what it draws
    * is clipped to it unless its `overflow` is `visible` or `auto`. A zero
    * or negative size, or a zero-sized `viewBox`, draws nothing.
+   *
+   * Its `clip-path` is set in the user space of what it holds, inside the
+   * `viewBox`, as Chrome and WebKit set it.
    */
   _renderViewport(node, ctx, style, alpha, depth) {
     const outer = this._viewport;
@@ -1074,7 +1091,14 @@ export default class SvgView {
       if (x || y) ctx.translate(x, y);
       this._viewport = [w, h];
     }
-    this._renderChildren(node, ctx, style, alpha, depth + 1);
+    const clip = this._clipOf(node);
+    if (clip) {
+      this._renderClipped(node, clip, ctx, style, alpha, depth, (c, a) =>
+        this._renderChildren(node, c, style, a, depth + 1)
+      );
+    } else {
+      this._renderChildren(node, ctx, style, alpha, depth + 1);
+    }
     this._viewport = outer;
     ctx.restore();
   }
@@ -1089,7 +1113,7 @@ export default class SvgView {
     const nodeAlpha = alpha * (ownProperty(node, 'opacity', alphaValue) ?? 1);
     if (nodeAlpha <= 0) return;
 
-    const transforms = parseSvgTransform(node.attribs?.transform);
+    const transforms = ownTransforms(node);
     const needsCtxState = transforms.length > 0;
     if (needsCtxState) {
       ctx.save();
@@ -1097,8 +1121,12 @@ export default class SvgView {
     }
 
     const mask = this._maskOf(node);
-    if (mask) this._renderMasked(node, mask, ctx, style, nodeAlpha, depth);
-    else this._renderElement(node, ctx, style, nodeAlpha, depth);
+    const paint = (c, a) =>
+      mask ? this._renderMasked(node, mask, c, style, a, depth) : this._renderElement(node, c, style, a, depth);
+    // a nested <svg> is cut inside its viewport (`_renderViewport`)
+    const clip = name === 'svg' ? null : this._clipOf(node);
+    if (clip) this._renderClipped(node, clip, ctx, style, nodeAlpha, depth, paint);
+    else paint(ctx, nodeAlpha);
 
     if (needsCtxState) ctx.restore();
   }
@@ -1122,15 +1150,11 @@ export default class SvgView {
         break;
       }
       case 'use': {
+        // its `x` and `y` are in its transforms (`ownTransforms`)
         const target = this._useTarget(node);
         if (target) {
-          const ux = attrNum(node, 'x');
-          const uy = attrNum(node, 'y');
-          ctx.save();
-          if (ux || uy) ctx.translate(ux, uy);
           if (tag(target) === 'symbol') this._renderChildren(target, ctx, style, nodeAlpha, depth + 1);
           else this._renderNode(target, ctx, style, nodeAlpha, depth + 1);
-          ctx.restore();
         }
         break;
       }
@@ -1347,6 +1371,299 @@ export default class SvgView {
     ctx.restore();
   }
 
+  /** The `<clipPath>` an element's `clip-path` names, or null for none. One
+   * that is not there, that names something else, or whose own `display`
+   * is `none` clips nothing, as Chrome, Firefox and WebKit all have it,
+   * where one inside something that is `display: none` clips as any other
+   * does. */
+  _clipOf(node) {
+    const id = ownProperty(node, 'clip-path', urlReference);
+    if (!id) return null;
+    const clip = this._ids.get(id);
+    return clip && tag(clip) === 'clippath' && !displayNone(clip) ? clip : null;
+  }
+
+  /** The clipPath a clip path's own `clip-path` names, or one on what is in
+   * it, as `_clipOf` — and null for one that reaches itself through the
+   * clip paths on it and in it, which Chrome and WebKit leave out, keeping
+   * the clip that named it. */
+  _nestedClip(node) {
+    const clip = this._clipOf(node);
+    return clip && !this._reachesItself(clip) ? clip : null;
+  }
+
+  _reachesItself(clip) {
+    const seen = new Set();
+    const stack = [clip];
+    while (stack.length) {
+      const at = stack.pop();
+      const next = [this._clipOf(at)];
+      for (const child of at.children || []) {
+        if (child.type !== 'tag') continue;
+        next.push(this._clipOf(child));
+        if (tag(child) === 'use') {
+          const target = this._useTarget(child);
+          if (target) next.push(this._clipOf(target));
+        }
+      }
+      for (const n of next) {
+        if (n === clip) return true;
+        if (n && !seen.has(n)) {
+          seen.add(n);
+          stack.push(n);
+        }
+      }
+    }
+    return false;
+  }
+
+  /**
+   * An element cut to the `<clipPath>` its `clip-path` names (CSS Masking
+   * 1, 6), in the user space the element draws in: after its `transform`,
+   * and a `use`'s `x` and `y`. `paint(ctx, alpha)` draws the element.
+   */
+  _renderClipped(node, clip, ctx, style, alpha, depth, paint) {
+    const region = this._clipRegion(clip, node, style, MAT_IDENTITY, ctx, depth, 0);
+    if (region) this._drawCut(ctx, [region], alpha, paint);
+    else paint(ctx, alpha);
+  }
+
+  /**
+   * What a `<clipPath>` lets show of `ref`, in the user space `m` maps
+   * `ref`'s to: `{ parts, own }`, the union of the parts, each cut to the
+   * regions in its `clips`, and all of that cut to `own`, the region of the
+   * clipPath's own `clip-path`, where it has one.
+   *
+   * In `objectBoundingBox` units the clipPath's user space is `ref`'s
+   * bounding box, and a box of no area is a region of nothing. The
+   * clipPath's `transform` goes outside that, and its own `clip-path` is set
+   * in `ref`'s user space, as Chrome and Firefox set it.
+   *
+   * `depth` is how deep `ref` is drawn, and `nest` how many clip paths in
+   * this one is: null past 32 of them, which cuts nothing.
+   */
+  _clipRegion(clip, ref, refStyle, m, ctx, depth, nest) {
+    if (nest > 32) return null;
+    const region = { parts: [], own: null };
+    let base = matMultiply(m, matrixOf(parseSvgTransform(attr(clip, 'transform'))));
+    if ((attr(clip, 'clipPathUnits') || '').trim() === 'objectBoundingBox') {
+      const bbox = this._bbox(ref, ctx, refStyle, depth);
+      if (!bbox || !(bbox.w > 0 && bbox.h > 0)) return region;
+      base = matMultiply(base, [bbox.w, 0, 0, bbox.h, bbox.x, bbox.y]);
+    }
+    const inherited = this._inheritedStyle(clip);
+    for (const child of clip.children || []) {
+      if (child.type !== 'tag') continue;
+      const part = this._clipPart(child, inherited, base, ctx, depth, nest);
+      if (part) region.parts.push(part);
+    }
+    const own = this._nestedClip(clip);
+    if (own) region.own = this._clipRegion(own, ref, refStyle, m, ctx, depth, nest + 1);
+    return region;
+  }
+
+  /**
+   * A child of a `<clipPath>` as a part of its region (CSS Masking 1, 6.3):
+   * a shape — `{ path, rule, m }` — or a text — `{ text, style, m }` — with
+   * `m` the matrix from its user space to the region's, `box` where it lies
+   * there, and `clips` the regions its own `clip-path` cuts it to. A `use`
+   * is the shape or text it names, through the use's transforms and its
+   * own, and cut by both their clip paths.
+   *
+   * What counts is the shape as it is filled, whatever its paint, by its
+   * `clip-rule`, which it inherits from the clipPath and what the clipPath
+   * is in, and not from what is clipped. Anything else — a group, a `use`
+   * of a group or a symbol — is no part, as Chrome and WebKit leave it,
+   * and nor is one that is `display: none`, whose conditions do not hold,
+   * or that is not visible.
+   */
+  _clipPart(child, inherited, base, ctx, depth, nest) {
+    if (!CLIPPING.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages)) return null;
+    let style = this._style(child, inherited);
+    let m = matMultiply(base, matrixOf(ownTransforms(child)));
+    const clips = [];
+    const cutBy = (node, st, at) => {
+      const clip = this._nestedClip(node);
+      const region = clip && this._clipRegion(clip, node, st, at, ctx, depth, nest + 1);
+      if (region) clips.push(region);
+    };
+    cutBy(child, style, m);
+    let shape = child;
+    if (tag(child) === 'use') {
+      shape = this._useTarget(child);
+      if (!shape || tag(shape) === 'use' || !CLIPPING.has(tag(shape))) return null;
+      if (displayNone(shape) || !conditionsHold(shape, this.languages)) return null;
+      style = this._style(shape, style);
+      m = matMultiply(m, matrixOf(ownTransforms(shape)));
+      cutBy(shape, style, m);
+    }
+    if (style.visibility !== 'visible') return null;
+    if (tag(shape) === 'text') {
+      const box = this._bbox(shape, ctx, style, depth);
+      if (!box) return null;
+      // and room for what a glyph draws past its advance and the font's
+      // extent
+      const pad = style.fontSize / 2;
+      const inked = { x: box.x - pad, y: box.y - pad, w: box.w + 2 * pad, h: box.h + 2 * pad };
+      return { text: shape, style, m, clips, box: transformedBox(inked, [m]) };
+    }
+    const path = shapePath(shape);
+    if (!path) return null;
+    return { path, rule: style.clipRule, m, clips, box: transformedBox(pathBBox(path), [m]) };
+  }
+
+  /**
+   * Draw with `paint(ctx, alpha)` cut to every one of `regions`: with the
+   * context's own clip, each that is one shape and what cuts it, and each
+   * that is not through surfaces (`_drawThrough`).
+   */
+  _drawCut(ctx, regions, alpha, paint) {
+    ctx.save();
+    try {
+      const rest = [];
+      for (const region of regions) {
+        const cut = this._clipTo(ctx, region);
+        if (cut === false) return;
+        if (cut === null) rest.push(region);
+      }
+      if (!rest.length) paint(ctx, alpha);
+      else this._drawThrough(ctx, rest[0], alpha, (c, a) => this._drawCut(c, rest.slice(1), a, paint));
+    } finally {
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Cut the context to a region with its own clip, where that can: true
+   * where it did, false where nothing of the region shows, and null —
+   * leaving the context as it was — where the region, or one that cuts it,
+   * is more than one part, or a text, which a context's clip is not.
+   */
+  _clipTo(ctx, region) {
+    if (!region.parts.length) return false;
+    if (!clipsAsOne(region)) return null;
+    const cut = (r) => {
+      const [part] = r.parts;
+      if (!part) return false;
+      ctx.clip(placedPath(part.path, part.m), part.rule);
+      return part.clips.every(cut) && (!r.own || cut(r.own));
+    };
+    return cut(region);
+  }
+
+  /**
+   * Draw with `paint` cut to a region the context's clip cannot make, as a
+   * mask cuts (`_renderMasked`): on a surface, and the region's coverage on
+   * a second, through the same transform — device pixels, the part of the
+   * region the drawing can show — the second cutting the first with
+   * `destination-in`, and the first composited at `alpha`.
+   *
+   * With no surface to draw on, or no `destination-in`, it is cut to the
+   * outlines of the region's shapes as one path, which is their union
+   * wherever they do not overlap, and to a text's box.
+   */
+  _drawThrough(ctx, region, alpha, paint) {
+    const extent = region.parts.reduce((box, part) => unionBox(box, part.box), null);
+    const m = ctx.getTransform?.();
+    const make = this._surface;
+    const box = m && make && ctx.drawImage && ctx.setTransform ? surfaceBox(m, extent, this._bounds) : null;
+    if (box === EMPTY) return;
+    let content = null;
+    let cover = null;
+    let cctx = null;
+    let mctx = null;
+    let done = false;
+    const bounds = this._bounds;
+    const luminance = this._luminance;
+    try {
+      if (box) {
+        content = make(box.w, box.h);
+        cover = content && make(box.w, box.h);
+      }
+      if (cover) {
+        cctx = content.getContext('2d');
+        cctx.globalCompositeOperation = 'destination-in';
+        if (cctx.globalCompositeOperation === 'destination-in') {
+          cctx.globalCompositeOperation = 'source-over';
+          const place = [m.a, m.b, m.c, m.d, m.e - box.x, m.f - box.y];
+          // what the surfaces show is all of them
+          this._bounds = { x: 0, y: 0, w: box.w, h: box.h };
+          cctx.transform(...place);
+          paint(cctx, 1);
+
+          mctx = cover.getContext('2d');
+          mctx.transform(...place);
+          this._luminance = false;
+          this._cover(mctx, region);
+
+          cctx.setTransform(1, 0, 0, 1, 0, 0);
+          cctx.globalAlpha = 1;
+          cctx.globalCompositeOperation = 'destination-in';
+          cctx.drawImage(cover, 0, 0);
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.globalAlpha = alpha;
+          ctx.drawImage(content, box.x, box.y);
+          ctx.restore();
+          done = true;
+        }
+      }
+    } finally {
+      this._bounds = bounds;
+      this._luminance = luminance;
+      mctx?.destroy?.();
+      cctx?.destroy?.();
+      cover?.destroy?.();
+      content?.destroy?.();
+    }
+    if (done) return;
+    const outline = new Path2D();
+    const rules = new Set();
+    for (const part of region.parts) {
+      if (part.text) {
+        outline.rect(part.box.x, part.box.y, part.box.w, part.box.h);
+        rules.add('nonzero');
+      } else {
+        outline.addPath(part.path, part.m);
+        rules.add(part.rule);
+      }
+    }
+    ctx.save();
+    ctx.clip(outline, rules.size === 1 && rules.has('evenodd') ? 'evenodd' : 'nonzero');
+    paint(ctx, alpha);
+    ctx.restore();
+  }
+
+  /** A region's coverage, drawn opaque: each part, cut to the regions that
+   * cut it, and all of them to the region's own. */
+  _cover(ctx, region) {
+    const parts = (c) => {
+      for (const part of region.parts) this._drawCut(c, part.clips, 1, (cc) => this._silhouette(cc, part));
+    };
+    if (region.own) this._drawCut(ctx, [region.own], 1, parts);
+    else parts(ctx);
+  }
+
+  /** A part of a clip region filled opaque, whatever its paint: a shape by
+   * its clip rule, a text in its glyphs. */
+  _silhouette(ctx, part) {
+    if (part.text) {
+      ctx.save();
+      ctx.transform(...part.m);
+      this._silhouetting = true;
+      try {
+        this._renderText(part.text, ctx, part.style, 1);
+      } finally {
+        this._silhouetting = false;
+        ctx.restore();
+      }
+      return;
+    }
+    ctx.fillStyle = '#000';
+    ctx.globalAlpha = 1;
+    ctx.fill(placedPath(part.path, part.m), part.rule);
+  }
+
   /** The style an element has where it stands in the document: what is in a
    * `<mask>` inherits from the mask's ancestors, not from what it masks. */
   _inheritedStyle(node) {
@@ -1359,9 +1676,10 @@ export default class SvgView {
 
   /**
    * An element's bounding box in its own user space (SVG 2, 8.10): the
-   * geometry of its shapes and text, without strokes, through the
-   * transforms of what is in it but not its own. Null for one that has
-   * none.
+   * geometry of its shapes and text, without strokes or what clips them,
+   * through the transforms of what is in it but not its own, which for a
+   * `use` are its `x` and `y` too (`ownTransforms`). Null for one that
+   * has none.
    */
   _bbox(node, ctx, style, depth) {
     if (depth > 32) return null;
@@ -1377,7 +1695,7 @@ export default class SvgView {
           if (!child || child.type !== 'tag') continue;
           if (NON_RENDERED.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages)) continue;
           const inner = this._bbox(child, ctx, this._style(child, style), depth + 1);
-          if (inner) box = unionBox(box, transformedBox(inner, parseSvgTransform(child.attribs?.transform)));
+          if (inner) box = unionBox(box, transformedBox(inner, ownTransforms(child)));
         }
         return box;
       }
@@ -1389,13 +1707,14 @@ export default class SvgView {
           for (const child of target.children || []) {
             if (child.type !== 'tag' || NON_RENDERED.has(tag(child)) || displayNone(child)) continue;
             const inner = this._bbox(child, ctx, this._style(child, style), depth + 1);
-            if (inner) box = unionBox(box, transformedBox(inner, parseSvgTransform(child.attribs?.transform)));
+            if (inner) box = unionBox(box, transformedBox(inner, ownTransforms(child)));
           }
         } else {
           const inner = this._bbox(target, ctx, this._style(target, style), depth + 1);
-          if (inner) box = transformedBox(inner, parseSvgTransform(target.attribs?.transform));
+          if (inner) box = transformedBox(inner, ownTransforms(target));
         }
-        return box && { ...box, x: box.x + attrNum(node, 'x'), y: box.y + attrNum(node, 'y') };
+        // in the space its `x` and `y` move it to, which is its own
+        return box;
       }
       case 'text': {
         ctx.save();
@@ -1578,7 +1897,7 @@ export default class SvgView {
       let bounds = null;
       for (const p of pieces) {
         const st = p.span.style;
-        if (st.visibility !== 'visible' || st.fill === 'none' || !p.text.trim()) continue;
+        if (st.visibility !== 'visible' || (st.fill === 'none' && !this._silhouetting) || !p.text.trim()) continue;
         if (!bounds) {
           bounds = new Path2D();
           bounds.rect(box.x, box.y, box.w, box.h);
@@ -1685,6 +2004,51 @@ function urlReference(raw) {
   return m ? m[1] : undefined;
 }
 
+/**
+ * The transforms an element sets for itself and what it holds: its
+ * `transform`, and after that a `use`'s `x` and `y`, which SVG 1.1 puts at
+ * the end of the transform of the group a use stands for (5.6), the group
+ * its `clip-path` and its `mask` go on. So both are set in the space the
+ * use's `x` and `y` move it to, as Chrome, Firefox and WebKit set them.
+ */
+function ownTransforms(node) {
+  const list = parseSvgTransform(node.attribs?.transform);
+  if (tag(node) === 'use') {
+    const x = attrNum(node, 'x');
+    const y = attrNum(node, 'y');
+    if (x || y) list.push([1, 0, 0, 1, x, y]);
+  }
+  return list;
+}
+
+/** A transform list as the one matrix it comes to. */
+function matrixOf(transforms) {
+  let m = MAT_IDENTITY;
+  for (const t of transforms) m = matMultiply(m, t);
+  return m;
+}
+
+/** What a `<clipPath>` may hold that is part of its region: the shapes,
+ * text, and a `use` of either (CSS Masking 1, 6.3). */
+const CLIPPING = new Set(['path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'text', 'use']);
+
+/** Whether a clip region is one shape at most, cut by regions that are one
+ * at most themselves: what a context's own clip makes. */
+function clipsAsOne(region) {
+  if (region.parts.length > 1) return false;
+  const [part] = region.parts;
+  if (part && (part.text || !part.clips.every(clipsAsOne))) return false;
+  return !region.own || clipsAsOne(region.own);
+}
+
+/** A path in the space `m` maps its own to. */
+function placedPath(path, m) {
+  if (matIsIdentity(m)) return path;
+  const out = new Path2D();
+  out.addPath(path, m);
+  return out;
+}
+
 /** The shapes that take markers (SVG 2, 11.6): the ones with vertices. */
 const MARKABLE = new Set(['path', 'line', 'polyline', 'polygon']);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.21.1",
+  "version": "8.23.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",