@react-x11/components 0.11.0 → 0.12.0

package/src/html/css/style.ts

@@ -40,6 +40,7 @@ import {
 } from './content.js';
 import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
+import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
 
 export type Display =
   | 'none'
@@ -202,6 +203,14 @@ export type ContentSize =
 export interface ComputedStyle {
   // --- inherited ------------------------------------------------------------
   color: string;
+  /**
+   * The colour scheme the element is drawn in (CSS Color Adjust 1, 2.2):
+   * its `color-scheme` resolved against the scheme the palette is, which
+   * stands for the reader's preference, as it does for `@media
+   * (prefers-color-scheme)`. What a `light-dark()` picks by. `normal` is
+   * the palette's own, since the palette is this renderer's default look.
+   */
+  colorScheme: 'light' | 'dark';
   fontFamily: string;
   fontSize: number;
   fontWeight: number;
@@ -320,6 +329,11 @@ export interface ComputedStyle {
   float: 'none' | 'left' | 'right';
   clear: 'none' | 'left' | 'right' | 'both';
   boxSizing: 'content-box' | 'border-box';
+  /** `box-decoration-break` (CSS Fragmentation 3, 5.4): how an inline box
+   *  that goes on to another line places its background images and
+   *  gradients — `slice`, from its fragments laid end to end as one box,
+   *  or `clone`, from each fragment's own. */
+  boxDecorationBreak: 'slice' | 'clone';
   /** Whether a block is a line-clamp container, and how many lines of its
    *  formatting context it shows (CSS Overflow 4, 5.3.1): its `max-lines`,
    *  or Infinity for `line-clamp: auto`, which shows as many as its height
@@ -505,6 +519,10 @@ export interface ComputedStyle {
    *  replaced whole when any of them changes, and `NO_BORDER_IMAGE` where
    *  nothing sets them. */
   borderImage: BorderImage;
+  /** `mask-image` and the longhands that place its layers (CSS Masking 1,
+   *  7): one object, replaced whole when any of them changes, and
+   *  `NO_MASK` where nothing sets them. */
+  mask: MaskLayers;
   /** `-webkit-text-fill-color`: what the glyphs are filled with where it
    *  is not the text's `color` — Tailwind's `text-transparent` over a
    *  `bg-clip-text` gradient; null for `color`, as `currentColor` is. */
@@ -608,6 +626,7 @@ export interface ComputedStyle {
  *  same list. */
 export const INHERITED = [
   'color',
+  'colorScheme',
   'textFillColor',
   'fontFamily',
   'fontSize',
@@ -689,6 +708,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
   // a copy of the literal, not the literal: see `copyStyle`
   return copyStyle({
     color: look.color,
+    colorScheme: look.colorScheme,
     fontFamily: look.fontFamily,
     fontSize: look.fontSize,
     fontWeight: 400,
@@ -747,6 +767,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     float: 'none',
     clear: 'none',
     boxSizing: 'content-box',
+    boxDecorationBreak: 'slice',
     lineClamp: null,
     maxLines: null,
     clampContinue: 'auto',
@@ -846,6 +867,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     backgroundClips: null,
     backgroundOrigins: null,
     borderImage: NO_BORDER_IMAGE,
+    mask: NO_MASK,
     textFillColor: null,
 
     textDecorationLine: 'none',
@@ -941,6 +963,7 @@ export function inherit(
   // quarters of the cost of every element's style, a store through a
   // computed name costing thirty times one through a written one
   out.color = parent.color;
+  out.colorScheme = parent.colorScheme;
   out.textFillColor = parent.textFillColor;
   out.fontFamily = parent.fontFamily;
   out.fontSize = parent.fontSize;
@@ -1162,6 +1185,15 @@ export function applyDeclaration(
   if (/!\s*important$/i.test(value)) {
     value = value.replace(/!\s*important$/i, '').trim();
   }
+  // the branch of each `light-dark()` this element's scheme picks, before
+  // anything reads the value: it stands wherever a colour can, in a
+  // shorthand, a shadow, a gradient or a mix, and most often arrives
+  // through a `var()` from a theme on `:root`
+  if (LIGHT_DARK.test(value)) {
+    const picked = lightDark(value, style.colorScheme);
+    if (picked === null) return;
+    value = picked;
+  }
 
   const color = COLOR_PROPS[name];
   if (color) {
@@ -1178,6 +1210,12 @@ export function applyDeclaration(
   }
 
   switch (name) {
+    case 'color-scheme': {
+      const scheme = usedColorScheme(value, ctx.initial?.colorScheme);
+      if (scheme) style.colorScheme = scheme;
+      return;
+    }
+
     // --- box ----------------------------------------------------------------
     case 'display': {
       const v = value.toLowerCase();
@@ -1366,6 +1404,12 @@ export function applyDeclaration(
       if (v === 'border-box' || v === 'content-box') style.boxSizing = v;
       return;
     }
+    case 'box-decoration-break':
+    case '-webkit-box-decoration-break': {
+      const v = value.trim().toLowerCase();
+      if (v === 'slice' || v === 'clone') style.boxDecorationBreak = v;
+      return;
+    }
     case 'aspect-ratio': {
       const parsed = parseAspectRatio(value);
       if (parsed !== undefined) style.aspectRatio = parsed;
@@ -1906,6 +1950,67 @@ export function applyDeclaration(
       return;
     }
 
+    // --- masking --------------------------------------------------------------
+    // Each `-webkit-` name is the same property's (Compatibility, 5): every
+    // engine takes both, and a page writes both — Wikipedia's icons do.
+    case 'mask':
+    case '-webkit-mask': {
+      const mask = readMask(value, ctx);
+      if (mask) style.mask = mask;
+      return;
+    }
+    case 'mask-image':
+    case '-webkit-mask-image': {
+      // `none` a layer as much as an image is; a bad url drops it all
+      const images: BackgroundImage[] = [];
+      for (const part of splitCommas(value)) {
+        const image = maskImageOf(part, ctx);
+        if (image === undefined) return;
+        images.push(image);
+      }
+      if (images.length) style.mask = { ...style.mask, images };
+      return;
+    }
+    case 'mask-repeat':
+    case '-webkit-mask-repeat': {
+      const repeats = layerValues(value, (part) => {
+        const words = splitValue(part.toLowerCase());
+        return words.length <= 2 ? readRepeat(words) : null;
+      });
+      if (repeats) style.mask = { ...style.mask, repeats };
+      return;
+    }
+    case 'mask-size':
+    case '-webkit-mask-size': {
+      const sizes = layerValues(value, (part) =>
+        backgroundSizeOf(splitValue(part), ctx),
+      );
+      if (sizes) style.mask = { ...style.mask, sizes };
+      return;
+    }
+    case 'mask-position':
+    case '-webkit-mask-position': {
+      const positions = layerValues(value, (part) =>
+        positionPair(splitValue(part), ctx),
+      );
+      if (positions) style.mask = { ...style.mask, positions };
+      return;
+    }
+    case 'mask-origin':
+    case '-webkit-mask-origin': {
+      const origins = layerValues(value, (part) => maskBox(part));
+      if (origins) style.mask = { ...style.mask, origins };
+      return;
+    }
+    case 'mask-clip':
+    case '-webkit-mask-clip': {
+      const clips = layerValues(value, (part) =>
+        part.toLowerCase() === 'no-clip' ? 'border-box' : maskBox(part),
+      );
+      if (clips) style.mask = { ...style.mask, clips };
+      return;
+    }
+
     // --- generated content --------------------------------------------------
     case 'content': {
       const parsed = parseContent(value);
@@ -2013,7 +2118,13 @@ export function applyDeclaration(
         style.lineHeight = len;
         style.lineHeightIsLength = true;
       } else if (len && typeof len === 'object') {
-        const px = resolve(len, style.fontSize);
+        // a percentage of the element's own font size, the one it is
+        // computed with (CSS 2.1 10.8.1), which `em` already is: not the
+        // size in `style` as this declaration comes up, which a `font`
+        // earlier in the same rule has just set to its own — `p { font:
+        // 12px …; line-height: 100% }` under a `.lead { font-size: 16px }`
+        // set sixteen-pixel text on twelve-pixel lines
+        const px = resolve(len, ctx.em);
         if (px < 0) return;
         style.lineHeight = px;
         style.lineHeightIsLength = true;
@@ -2462,7 +2573,12 @@ export function applyDeclaration(
       return;
     }
     case 'align-content': {
-      const v = alignKeyword(value);
+      // `normal` is `stretch` in a flex and a grid container, the only
+      // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+      const v =
+        value.trim().toLowerCase() === 'normal'
+          ? 'stretch'
+          : alignKeyword(value);
       if (v) style.alignContent = v as ComputedStyle['alignContent'];
       return;
     }
@@ -2697,6 +2813,30 @@ export function applyDeclaration(
       }
       return;
     }
+    case 'place-content': {
+      // `<'align-content'> <'justify-content'>?` (CSS Box Alignment 3,
+      // 5.3), either half one keyword or two — `first baseline`, `safe
+      // center` — and the second the first again where it is left out,
+      // but for a baseline, which is no `justify-content`: `start`
+      const words = value.trim().toLowerCase().split(/\s+/);
+      const span = (at: number) =>
+        /^(?:safe|unsafe|first|last)$/.test(words[at] ?? '') ? 2 : 1;
+      const cut = span(0);
+      const align = words.slice(0, cut).join(' ');
+      const rest = words.slice(cut);
+      if (rest.length && rest.length !== span(cut)) return;
+      const justify = rest.length
+        ? rest.join(' ')
+        : /baseline$/.test(align)
+          ? 'start'
+          : align;
+      // a shorthand is one declaration: either half unread drops both
+      if (align !== 'normal' && !alignKeyword(align)) return;
+      if (!justifyKeyword(justify)) return;
+      applyDeclaration(style, parent, 'align-content', align, ctx);
+      applyDeclaration(style, parent, 'justify-content', justify, ctx);
+      return;
+    }
     case 'place-items':
     case 'place-self': {
       const parts = splitValue(value);
@@ -3144,6 +3284,157 @@ export const NO_BORDER_IMAGE: BorderImage = {
   repeat: ['stretch', 'stretch'],
 };
 
+/**
+ * An element's mask layers (CSS Masking 1, 7), top first, a list a
+ * property as a background's are: each layer takes the images' place in
+ * the others, and they repeat where they are fewer. A layer's image is a
+ * url, a gradient, or null for `none` — which is the one layer of an
+ * element that is not masked.
+ */
+export interface MaskLayers {
+  images: readonly BackgroundImage[];
+  repeats: readonly BackgroundRepeat[];
+  sizes: readonly ComputedStyle['backgroundSize'][];
+  positions: readonly (readonly [Len, Len])[];
+  /** The box a layer is placed in, and the one it is painted in: the
+   *  border box unless a layer says (7.5, 7.6). */
+  origins: readonly VisualBox[];
+  clips: readonly VisualBox[];
+}
+
+/** Whether a style masks its element: a layer of its mask has an image. */
+export function masked(style: ComputedStyle): boolean {
+  const mask = style.mask;
+  if (mask === NO_MASK) return false;
+  for (const image of mask.images) if (image !== null) return true;
+  return false;
+}
+
+/**
+ * One layer's `mask-image`: a url, a gradient — or none, for an image
+ * function this does not draw, or a `url(#id)`, which names an SVG
+ * `<mask>` element in the document rather than an image to fetch (7.2):
+ * drawn with no mask rather than as the transparent layer a mask that
+ * cannot be had is, since this draws no `<mask>`. Undefined where it is no
+ * image at all.
+ */
+function maskImageOf(
+  text: string,
+  ctx: UnitContext,
+): BackgroundImage | undefined {
+  const image = backgroundImageOf(text, ctx);
+  return typeof image === 'string' && image[0] === '#' ? null : image;
+}
+
+/** A `<geometry-box>` as an HTML element has it (CSS Masking 1, 7.5): the
+ *  SVG boxes are its content box and its border box. */
+function maskBox(text: string): VisualBox | null {
+  const v = text.trim().toLowerCase();
+  if (isVisualBox(v)) return v;
+  if (v === 'fill-box') return 'content-box';
+  if (v === 'stroke-box' || v === 'view-box') return 'border-box';
+  return null;
+}
+
+/**
+ * The `mask` shorthand (CSS Masking 1, 7.10): a layer a comma group, each
+ * an image, a position with a size after a `/`, a repeat, one box for the
+ * origin and the clip or two, `no-clip`, a compositing operator and a
+ * mode, each at most once, in any order. The operator and the mode are
+ * read and not honoured: layers are added, and an image masks by its
+ * alpha, which is what `match-source` makes of one. Null where a layer is
+ * not one, which drops the declaration.
+ */
+function readMask(value: string, ctx: UnitContext): MaskLayers | null {
+  const out = {
+    images: [] as BackgroundImage[],
+    repeats: [] as BackgroundRepeat[],
+    sizes: [] as ComputedStyle['backgroundSize'][],
+    positions: [] as [Len, Len][],
+    origins: [] as VisualBox[],
+    clips: [] as VisualBox[],
+  };
+  for (const text of splitCommas(value)) {
+    const parts = splitValue(text).flatMap(splitSlash);
+    let image: BackgroundImage = null;
+    let repeat = NO_MASK.repeats[0];
+    let size: ComputedStyle['backgroundSize'] = 'auto';
+    let position: [Len, Len] = [0, 0];
+    const boxes: VisualBox[] = [];
+    let seen = 0;
+    const once = (bit: number): boolean => {
+      if (seen & bit) return false;
+      seen |= bit;
+      return true;
+    };
+    for (let i = 0; i < parts.length;) {
+      const part = parts[i];
+      const v = part.toLowerCase();
+      if (v === 'none' || v.startsWith('url(') || IMAGE_FUNCTION.test(v)) {
+        if (!once(1)) return null;
+        const read = maskImageOf(part, ctx);
+        if (read === undefined) return null;
+        image = read;
+        i += 1;
+      } else if (v === 'repeat-x' || v === 'repeat-y' || REPEATS.has(v)) {
+        if (!once(2)) return null;
+        const pair = REPEATS.has(v) && REPEATS.has(parts[i + 1]?.toLowerCase());
+        const read = readRepeat(pair ? [v, parts[i + 1].toLowerCase()] : [v]);
+        if (!read) return null;
+        repeat = read;
+        i += pair ? 2 : 1;
+      } else if (maskBox(v) || v === 'no-clip') {
+        if (boxes.length === 2 || (v === 'no-clip' && !once(4))) return null;
+        boxes.push(maskBox(v) ?? 'border-box');
+        i += 1;
+      } else if (/^(?:add|subtract|intersect|exclude)$/.test(v)) {
+        if (!once(8)) return null;
+        i += 1;
+      } else if (/^(?:alpha|luminance|match-source)$/.test(v)) {
+        if (!once(16)) return null;
+        i += 1;
+      } else if (isPositionPart(v, ctx)) {
+        if (!once(32)) return null;
+        let end = i;
+        while (
+          end < parts.length &&
+          isPositionPart(parts[end].toLowerCase(), ctx)
+        ) {
+          end += 1;
+        }
+        const read = positionPair(parts.slice(i, end), ctx);
+        if (!read) return null;
+        position = read;
+        i = end;
+        if (parts[i] !== '/') continue;
+        const first = parts[i + 1]?.toLowerCase();
+        if (first === 'cover' || first === 'contain') {
+          size = first;
+          i += 2;
+        } else if (first !== undefined && isSizePart(first, ctx)) {
+          const two =
+            i + 2 < parts.length && isSizePart(parts[i + 2].toLowerCase(), ctx);
+          size =
+            backgroundSizeOf(parts.slice(i + 1, i + (two ? 3 : 2)), ctx) ??
+            'auto';
+          i += two ? 3 : 2;
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    }
+    out.images.push(image);
+    out.repeats.push(repeat);
+    out.sizes.push(size);
+    out.positions.push(position);
+    out.origins.push(boxes[0] ?? 'border-box');
+    out.clips.push(boxes[1] ?? boxes[0] ?? 'border-box');
+  }
+  return out.images.length ? out : null;
+}
+
 /** One to four values, one a side as `margin` takes them; null where one
  *  is not a value. */
 function sidesOf<T>(
@@ -3338,6 +3629,15 @@ function repeatPair(x: RepeatMode, y: RepeatMode): BackgroundRepeat {
 
 const REPEAT = repeatPair('repeat', 'repeat');
 
+export const NO_MASK: MaskLayers = {
+  images: [null],
+  repeats: [REPEAT],
+  sizes: ['auto'],
+  positions: [[0, 0]],
+  origins: ['border-box'],
+  clips: ['border-box'],
+};
+
 function applyBorderShorthand(
   style: ComputedStyle,
   name: string,
@@ -4026,12 +4326,10 @@ function applyFontShorthand(
   style.lineHeight = 'normal';
   style.lineHeightIsLength = false;
   applyDeclaration(style, parent, 'font-size', sizeText, ctx);
-  if (lineText) {
-    applyDeclaration(style, parent, 'line-height', lineText, {
-      ...ctx,
-      em: style.fontSize,
-    });
-  }
+  // against the element's own size, which `ctx.em` is once the cascade has
+  // settled it: a later rule's `font-size` outranks this one's, and
+  // `font: 12px/150%` under a `font-size: 16px` is on 24px lines
+  if (lineText) applyDeclaration(style, parent, 'line-height', lineText, ctx);
   applyDeclaration(style, parent, 'font-family', family, ctx);
 }
 
@@ -4751,6 +5049,7 @@ function camel(name: string): string {
 
 const INHERITED_NAMES = new Set<string>([
   'color',
+  'color-scheme',
   '-webkit-text-fill-color',
   'font',
   'font-family',
@@ -4801,6 +5100,11 @@ export function initialOne(
   initial: ComputedStyle,
   name: string,
 ): void {
+  const list = MASK_LISTS[name];
+  if (list) {
+    style.mask = { ...style.mask, [list]: initial.mask[list] };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   for (const key of keys) {
@@ -4813,6 +5117,11 @@ function inheritOne(
   parent: ComputedStyle,
   name: string,
 ): void {
+  const list = MASK_LISTS[name];
+  if (list) {
+    style.mask = { ...style.mask, [list]: parent.mask[list] };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   // A border colour left to `currentColor` inherits as the keyword and
@@ -4828,8 +5137,30 @@ const sides = (
   make: (side: (typeof SIDES)[number]) => keyof ComputedStyle,
 ): (keyof ComputedStyle)[] => SIDES.map(make);
 
+/**
+ * The list of the mask's layers each longhand is, which `initial`,
+ * `inherit` and a `var()` that fails reset alone: one field holds them all,
+ * and reset whole, a `mask-size: calc(var(--x) - 4px)` put back the
+ * `mask-repeat: no-repeat` before it, and Wikipedia's chevron repeated.
+ */
+const MASK_LISTS: Record<string, keyof MaskLayers> = {
+  'mask-image': 'images',
+  '-webkit-mask-image': 'images',
+  'mask-repeat': 'repeats',
+  '-webkit-mask-repeat': 'repeats',
+  'mask-size': 'sizes',
+  '-webkit-mask-size': 'sizes',
+  'mask-position': 'positions',
+  '-webkit-mask-position': 'positions',
+  'mask-origin': 'origins',
+  '-webkit-mask-origin': 'origins',
+  'mask-clip': 'clips',
+  '-webkit-mask-clip': 'clips',
+};
+
 const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   color: ['color'],
+  'color-scheme': ['colorScheme'],
   '-webkit-text-fill-color': ['textFillColor'],
   'background-clip': [
     'backgroundClipText',
@@ -4843,6 +5174,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   ],
   'background-origin': ['backgroundOrigin', 'backgroundOrigins'],
   'border-image': ['borderImage'],
+  mask: ['mask'],
+  '-webkit-mask': ['mask'],
   'border-image-source': ['borderImage'],
   'border-image-slice': ['borderImage'],
   'border-image-width': ['borderImage'],
@@ -4923,6 +5256,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'min-height': ['minHeight', 'minHeightKeyword'],
   'max-height': ['maxHeight', 'maxHeightKeyword'],
   'box-sizing': ['boxSizing'],
+  'box-decoration-break': ['boxDecorationBreak'],
+  '-webkit-box-decoration-break': ['boxDecorationBreak'],
   margin: sides((s) => `margin${s}`),
   'margin-top': ['marginTop'],
   'margin-right': ['marginRight'],

package/src/html/css/ua.ts

@@ -188,6 +188,20 @@ input, button, select, textarea, meter, progress {
 }
 /* Chrome's own UA margins for the checkables, near enough: they are the
    controls that sit hard against their label text otherwise. */
+/* HTML's rendering section (15.3.10): a control's text keeps none of the
+   spacing, the line height, the case or the indent of the text around it.
+   A button in a paragraph of 'line-height: 1.5' is its own font's line
+   tall, as it is in a browser. */
+input, button, textarea {
+  letter-spacing: initial;
+  word-spacing: initial;
+  line-height: initial;
+}
+input, select, button, textarea {
+  text-transform: initial;
+  text-indent: initial;
+  text-shadow: initial;
+}
 input[type=checkbox] { margin: 3px 4px 3px 4px; }
 input[type=radio] { margin: 3px 4px 3px 5px; }
 input[type=hidden] { display: none; }

package/src/html/css/values.ts

@@ -102,7 +102,7 @@ export interface UnitContext {
   em: number;
   /** The root element's `font-size`. */
   rem: number;
-  /** Viewport, for `vw`/`vh`/`vmin`/`vmax`. */
+  /** Viewport, for `vw`/`vh`/`vmin`/`vmax` and their kin (`viewportUnit`). */
   vw: number;
   vh: number;
   /** Device pixels per CSS pixel — the display scale. */
@@ -131,9 +131,37 @@ export interface UnitContext {
 const NUMBER_SRC = '[+-]?(?:\\d*\\.\\d+|\\d+)(?:e[+-]?\\d+)?';
 
 const LENGTH_RE = new RegExp(
-  `^(${NUMBER_SRC})(px|em|rem|pt|pc|in|cm|mm|ex|ch|lh|rlh|vw|vh|vmin|vmax|q|%)?$`,
+  `^(${NUMBER_SRC})(px|em|rem|pt|pc|in|cm|mm|ex|ch|lh|rlh|[sld]?v(?:w|h|i|b|min|max)|q|%)?$`,
 );
 
+/**
+ * The viewport unit a viewport-percentage length is (CSS Values 4, 6.1.2),
+ * or null for another unit. The small, large and dynamic viewports —
+ * `svh`, `lvh`, `dvh` and their kin — are the one viewport here, as they
+ * are on a desktop, where no toolbar comes and goes over the page; and the
+ * inline and block axes, `vi` and `vb`, are the width and the height of
+ * the horizontal writing mode every document here is laid out in.
+ */
+export function viewportUnit(
+  unit: string,
+): 'vw' | 'vh' | 'vmin' | 'vmax' | null {
+  const u = unit.toLowerCase();
+  const bare = /^[sld]v/.test(u) ? u.slice(1) : u;
+  switch (bare) {
+    case 'vw':
+    case 'vi':
+      return 'vw';
+    case 'vh':
+    case 'vb':
+      return 'vh';
+    case 'vmin':
+    case 'vmax':
+      return bare;
+    default:
+      return null;
+  }
+}
+
 const NUMBER_RE = new RegExp(`^${NUMBER_SRC}$`, 'i');
 
 /** A math function: `calc()`, `min()`, `max()` or `clamp()`. */
@@ -166,7 +194,7 @@ export function parseLength(
     });
   }
   const n = Number(m[1]);
-  const unit = m[2];
+  const unit = m[2] && (viewportUnit(m[2]) ?? m[2]);
   // a zero needs no unit however it is written — `-0`, `+0`, `0.0`
   if (!unit) return n === 0 ? 0 : bareIsPx ? n * ctx.scale : null;
   if (unit === '%') return { pct: n };

package/src/html/css/vars.ts

@@ -245,7 +245,7 @@ function findVar(value: string, from: number): number {
 
 /** The `)` that closes a bracket opened just before `from`, strings and
  *  brackets inside it passed over; -1 where none does. */
-function closingParen(value: string, from: number): number {
+export function closingParen(value: string, from: number): number {
   let depth = 0;
   for (let i = from; i < value.length; i += 1) {
     const c = value[i];
@@ -326,7 +326,7 @@ function topLevel(value: string, ch: string): number {
 }
 
 /** The first comma not inside a bracket or a string, or -1. */
-function topLevelComma(value: string): number {
+export function topLevelComma(value: string): number {
   let depth = 0;
   for (let i = 0; i < value.length; i += 1) {
     const c = value[i];

package/src/html/dom.ts

@@ -572,15 +572,51 @@ function createParser(): { parser: Parser; handler: DomHandler } {
     withStartIndices: false,
     withEndIndices: false,
   });
-  const parser = new Parser(handler, {
+  const parser = new DocumentParser(handler, {
     lowerCaseTags: true,
     lowerCaseAttributeNames: true,
-    recognizeSelfClosing: true,
+    // HTML closes an element written `<x/>` only where it is void, and so
+    // closed anyway, or in SVG or MathML (HTML 13.2.6.5, "acknowledge the
+    // self-closing flag"). A `<div/>` or an `<a href="" /*target="_blank"*/>`
+    // — melbcss.com's, a comment that is no comment in a tag — opens an
+    // element like any other, and closing it left the link's text outside
+    // the link.
+    recognizeSelfClosing: false,
     decodeEntities: true,
   });
   return { parser, handler };
 }
 
+/**
+ * htmlparser2's parser, deciding a `/>` from the context its tag was read
+ * in, as HTML's does. htmlparser2 decides from the context the tag opens,
+ * and an integration point — SVG's `<title>`, `<desc>` and
+ * `<foreignObject>`, MathML's `<mi>` and its kin — opens an HTML one, so
+ * an `<svg><title/><path/>` took its path into the title.
+ */
+class DocumentParser extends Parser {
+  private _foreignTag = false;
+  private _acknowledging = false;
+
+  override isInForeignContext(): boolean {
+    return this._acknowledging || super.isInForeignContext();
+  }
+
+  override onopentagname(start: number, endIndex: number): void {
+    this._foreignTag = this.isInForeignContext();
+    super.onopentagname(start, endIndex);
+  }
+
+  override onselfclosingtag(endIndex: number): void {
+    this._acknowledging = this._foreignTag;
+    try {
+      super.onselfclosingtag(endIndex);
+    } finally {
+      this._acknowledging = false;
+    }
+  }
+}
+
 /**
  * Whether a `media` attribute is one a screen honours. Deliberately not a
  * media-query engine: `screen`, `all` and an empty list apply, `print` and