@react-x11/components 0.9.0 → 0.11.0

package/src/html/css/cascade.ts

@@ -21,12 +21,36 @@ import { Element as DomElement, isTag } from 'domhandler';
 import type { Element } from 'domhandler';
 
 import { attr, tagOf } from '../dom.js';
-import { mediaMatches } from './parse.js';
+import { svgSizeHint } from '../svg.js';
+import {
+  asciiLower,
+  escapeEnd,
+  mediaMatches,
+  readIdent,
+  startsIdent,
+} from './parse.js';
 import type { Declaration, StyleRule, Stylesheet } from './parse.js';
-import { applyDeclaration, blockify, inherit, initialStyle } from './style.js';
+import {
+  applyDeclaration,
+  blockify,
+  settleContentVisibility,
+  settleOverflow,
+  settleClamp,
+  copyStyle,
+  decorate,
+  inherit,
+  initialOne,
+  initialStyle,
+  isInherited,
+} from './style.js';
 import type { ComputedStyle, RootLook } from './style.js';
+import type { FontFamilies } from '../fonts.js';
 import { parseDeclarations } from './parse.js';
+import { CounterStyles, counterStyleRule } from './counter-styles.js';
+import type { CounterStyleRule } from './counter-styles.js';
 import type { UnitContext } from './values.js';
+import { customProperties, substituteIn } from './vars.js';
+import type { CustomProps } from './vars.js';
 
 /** Where a declaration came from. Higher wins before specificity is asked. */
 const enum Origin {
@@ -40,6 +64,8 @@ const enum Origin {
 
 interface Candidate {
   origin: Origin;
+  /** The rule's cascade layer, null for none (`StyleRule.layer`). */
+  layer: readonly number[] | null;
   specificity: number;
   order: number;
   declarations: Declaration[];
@@ -59,6 +85,13 @@ type CssSelectAdapter = typeof DomUtils & {
   isVisited(el: Element): boolean;
 };
 
+/** A style handed to every element with the same sharing key, and the key
+ *  that element's children share under (`Cascade.sharedStyleFor`). */
+export interface SharedStyle {
+  style: ComputedStyle;
+  key: number;
+}
+
 /** A compiled matcher, kept beside the rule it came from. */
 interface IndexedRule {
   rule: StyleRule;
@@ -66,8 +99,26 @@ interface IndexedRule {
   /** Set once compilation has been attempted, so a selector `css-select`
    *  refuses is not recompiled once per element for the rest of the pass. */
   compiled: boolean;
+  /** Which rule this is, in a sharing key (`Cascade.sharedStyleFor`). */
+  id: number;
 }
 
+/**
+ * What makes a selector's match depend on more than the element's own tag and
+ * attributes and its ancestors' — its siblings, where it sits among them,
+ * what it contains, or where the document is scrolled to. Two elements that
+ * look alike from the root down can still differ under a rule with one of
+ * these, so an element such a rule could reach does not share its style
+ * (`Cascade.sharedStyleFor`). css-select spells some of them under other
+ * names, and those count too: `:checked` and `:selected` read which option
+ * comes first, `:disabled` and `:enabled` which legend does, and `:parent`
+ * and `:contains()` the element's contents. Over-broad on purpose: a `+` or
+ * `~` inside an attribute value, or the `~=` operator, costs sharing and
+ * nothing else.
+ */
+const UNSHAREABLE =
+  /[+~]|:(?:first|last|only)-(?:child|of-type)|:nth-|:empty|:blank|:has\(|:focus-within|:target|:scope|:(?:checked|selected|disabled|enabled|parent)\b|:i?contains\(/;
+
 /**
  * Rules bucketed by the key of their rightmost compound selector. An element
  * only ever tries `id`, its classes, its tag and the universal bucket.
@@ -80,13 +131,59 @@ class RuleIndex {
   /** Whether any rule in here is pointer-sensitive, so the renderer knows
    *  whether a pointer move can change the cascade at all. */
   hoverSensitive = false;
+  /** The buckets holding a rule an element cannot share its style under
+   *  (`UNSHAREABLE`): the ids, classes and tags whose elements compute
+   *  their own, and whether the universal bucket makes every element do so. */
+  readonly ownStyleIds = new Set<string>();
+  readonly ownStyleClasses = new Set<string>();
+  readonly ownStyleTags = new Set<string>();
+  ownStyleEverywhere = false;
+  /** How many rules are in here, so an empty index costs one comparison. */
+  size = 0;
+  private _nextId = 0;
+
+  /**
+   * Whether a bucket here could hold a rule for `el`, by its tag, id and
+   * classes and without matching anything: an index of a rule or two is
+   * asked of every element — the user-agent sheet's `q::before` and
+   * `q::after` made every element of a document split its `class` twice —
+   * and almost none of them has a rule in it.
+   */
+  reaches(el: Element): boolean {
+    if (this.universal.length || this.byTag.has(tagOf(el))) return true;
+    if (this.byId.size) {
+      const id = attr(el, 'id');
+      if (id && this.byId.has(id)) return true;
+    }
+    if (this.byClass.size) {
+      const className = attr(el, 'class');
+      if (className) {
+        for (const name of className.split(/\s+/)) {
+          if (name && this.byClass.has(name)) return true;
+        }
+      }
+    }
+    return false;
+  }
 
   add(rule: StyleRule): void {
-    const indexed: IndexedRule = { rule, match: null, compiled: false };
+    this.size += 1;
+    const indexed: IndexedRule = {
+      rule,
+      match: null,
+      compiled: false,
+      id: this._nextId++,
+    };
     if (rule.selector.includes(':hover') || rule.selector.includes(':active')) {
       this.hoverSensitive = true;
     }
     const key = rightmostKey(rule.selector);
+    if (UNSHAREABLE.test(rule.selector)) {
+      if (key.kind === 'id') this.ownStyleIds.add(key.name);
+      else if (key.kind === 'class') this.ownStyleClasses.add(key.name);
+      else if (key.kind === 'tag') this.ownStyleTags.add(key.name);
+      else this.ownStyleEverywhere = true;
+    }
     const bucket =
       key.kind === 'id'
         ? mapBucket(this.byId, key.name)
@@ -99,6 +196,204 @@ class RuleIndex {
   }
 }
 
+/** The pseudo-elements a rule can style here. */
+type PseudoElement =
+  'before' | 'after' | 'first-letter' | 'first-line' | 'marker';
+
+/** A selector's trailing `::before`, `::after`, `::first-letter`,
+ *  `::first-line` or `::marker`, or CSS 2's single-colon spelling of any of
+ *  its four. */
+const PSEUDO_ELEMENT = /::?(before|after|first-letter|first-line)$|::marker$/i;
+
+/**
+ * A rule for a pseudo-element, as the pseudo-element it styles and a rule
+ * for the element it hangs off, which is what gets matched. The specificity
+ * is the whole selector's, the pseudo-element counted in. `p::before`
+ * matches `p`; `p ::before` and `p > ::before` have nothing left of their
+ * last compound and match any child, `p *` and `p > *`.
+ */
+function splitPseudoElement(
+  rule: StyleRule,
+): { which: PseudoElement; rule: StyleRule } | null {
+  const m = PSEUDO_ELEMENT.exec(rule.selector);
+  if (!m) return null;
+  const head = rule.selector.slice(0, m.index);
+  const trimmed = head.trimEnd();
+  const selector = !trimmed
+    ? '*'
+    : head !== trimmed || /[>+~]$/.test(trimmed)
+      ? `${trimmed} *`
+      : trimmed;
+  return {
+    which: (m[1] ?? 'marker').toLowerCase() as PseudoElement,
+    rule: { ...rule, selector },
+  };
+}
+
+/**
+ * The compounds of a selector that test `:hover`, each without it (and
+ * without an `:active` beside it), and whether one is followed by a sibling
+ * combinator, which reaches the element's later siblings. `nested` where a
+ * `:hover` sits inside a functional pseudo-class — `:not(:hover)`,
+ * `:is(:hover)` — and reaches elements no compound names.
+ *
+ * A `:hover` in a compound's `:has()` is the one exception, since what it
+ * reaches is known: the compound, without its `:has()`, is an ancestor of
+ * the element the pointer is over — or an earlier sibling of it or of an
+ * ancestor, where the argument starts at a sibling (Selectors 4, 4.5). So
+ * it is given as an anchor (`has`) rather than making the rule `nested`.
+ *
+ * `:active` is not the pointer's here: nothing sets it (`setPointer` is
+ * handed none), so a selector that tests only it never changes as the
+ * pointer moves — Wikipedia's buttons' `:focus:not(:active)` among them.
+ * A press that sets it would have to be counted here too.
+ */
+export function pointerCompounds(selector: string): {
+  compounds: string[];
+  siblings: boolean;
+  nested: boolean;
+  has: { anchor: string; siblings: boolean }[];
+} {
+  const out = {
+    compounds: [] as string[],
+    siblings: false,
+    nested: false,
+    has: [] as { anchor: string; siblings: boolean }[],
+  };
+  // the compounds at the top level, each with the combinator after it
+  const parts: { text: string; next: string }[] = [];
+  let start = 0;
+  let depth = 0;
+  let quote = '';
+  const split = (end: number, next: string): void => {
+    const text = selector.slice(start, end).trim();
+    if (text) parts.push({ text, next });
+    else if (parts.length && next !== ' ') parts[parts.length - 1].next = next;
+  };
+  for (let i = 0; i < selector.length; i += 1) {
+    const c = selector[i];
+    if (quote) {
+      if (c === quote && selector[i - 1] !== '\\') quote = '';
+      continue;
+    }
+    if (c === '\\') i = escapeEnd(selector, i) - 1;
+    else if (c === '"' || c === "'") quote = c;
+    else if (c === '(' || c === '[') depth += 1;
+    else if (c === ')' || c === ']') depth = Math.max(0, depth - 1);
+    else if (depth === 0 && /[\s>+~]/.test(c)) {
+      split(i, c === '+' || c === '~' || c === '>' ? c : ' ');
+      start = i + 1;
+    }
+  }
+  split(selector.length, '');
+  for (const { text, next } of parts) {
+    let bare = '';
+    let pointer = false;
+    depth = 0;
+    quote = '';
+    /** Where a top-level `:has(` starts in `bare`, and its argument in
+     *  `text`, while one is open. */
+    let hasAt = -1;
+    let argAt = -1;
+    let hasPointer = false;
+    let anchored = false;
+    const args: string[] = [];
+    for (let i = 0; i < text.length; i += 1) {
+      const c = text[i];
+      if (quote) {
+        if (c === quote && text[i - 1] !== '\\') quote = '';
+        bare += c;
+        continue;
+      }
+      if (c === '\\') {
+        const end = escapeEnd(text, i);
+        bare += text.slice(i, end);
+        i = end - 1;
+        continue;
+      }
+      if (c === '"' || c === "'") quote = c;
+      else if (c === '(' || c === '[') {
+        if (depth === 0 && c === '(' && /:has$/i.test(bare)) {
+          hasAt = bare.length - 4;
+          argAt = i + 1;
+          hasPointer = false;
+        }
+        depth += 1;
+      } else if (c === ')' || c === ']') {
+        depth = Math.max(0, depth - 1);
+        if (depth === 0 && hasAt >= 0 && c === ')') {
+          // the compound is kept without it: its argument is what the
+          // pointer changes
+          if (hasPointer) {
+            anchored = true;
+            args.push(text.slice(argAt, i));
+            bare = bare.slice(0, hasAt);
+          } else bare += c;
+          hasAt = -1;
+          continue;
+        }
+      } else if (c === ':' && text[i + 1] !== ':') {
+        const m = POINTER_PSEUDO_AT.exec(text.slice(i));
+        if (m) {
+          const hover = m[0].length === 6;
+          if (depth > 0) {
+            // whatever holds it in the argument, the element it tests is
+            // in the anchor's subtree or a later sibling's
+            if (hover && hasAt >= 0) hasPointer = true;
+            else if (hover) out.nested = true;
+          } else {
+            if (hover) pointer = true;
+            i += m[0].length - 1;
+            continue;
+          }
+        }
+      }
+      bare += c;
+    }
+    if (anchored) {
+      out.has.push({
+        anchor: bare.trim() || '*',
+        siblings: args.some((arg) =>
+          arg.split(',').some((one) => /^\s*[+~]/.test(one)),
+        ),
+      });
+    }
+    if (!pointer) continue;
+    out.compounds.push(bare.trim() || '*');
+    if (next === '+' || next === '~') out.siblings = true;
+  }
+  return out;
+}
+
+/** `:hover` or `:active` at the start of a string, and nothing longer. */
+const POINTER_PSEUDO_AT = /^:(?:hover|active)(?![\w-])/i;
+
+/** `:hover` or `:active` anywhere in a selector. */
+const POINTER_PSEUDO = /:(?:hover|active)(?![\w-])/i;
+
+/**
+ * A selector compiled to a matcher over this adapter. css-select keeps the
+ * answers of a `:has()` above the subject, or of the ancestors a
+ * descendant combinator tried under one, for as long as the matcher lives
+ * (`cacheResults`) — which is the cascade's life, and a pointer move is no
+ * new cascade. So a selector that tests the pointer keeps none: with them,
+ * `#box:has(a:hover) .m` answered what it did before the first move, for
+ * good.
+ */
+function compileSelector(
+  selector: string,
+  adapter: CssSelectAdapter,
+): (el: Element) => boolean {
+  return compile(noEmptyWords(selector), {
+    adapter,
+    xmlMode: false,
+    pseudos: PSEUDOS,
+    cacheResults: !POINTER_PSEUDO.test(selector),
+  } as unknown as Parameters<typeof compile>[1]) as unknown as (
+    node: Element,
+  ) => boolean;
+}
+
 function mapBucket(
   map: Map<string, IndexedRule[]>,
   key: string,
@@ -132,12 +427,23 @@ function rightmostKey(selector: string): {
       if (c === quote && selector[i - 1] !== '\\') quote = '';
       continue;
     }
-    if (c === '"' || c === "'") quote = c;
+    // an escaped character is part of a name, whatever it is — and a hex
+    // escape takes the space after it: `.c\6c ass` is the class `class`
+    if (c === '\\') i = escapeEnd(selector, i) - 1;
+    else if (c === '"' || c === "'") quote = c;
     else if (c === '(' || c === '[') depth += 1;
     else if (c === ')' || c === ']') depth = Math.max(0, depth - 1);
     else if (
       depth === 0 &&
-      (c === ' ' || c === '>' || c === '+' || c === '~')
+      (c === ' ' ||
+        c === '>' ||
+        c === '+' ||
+        c === '~' ||
+        // CSS's other white space: `div\fp` is a descendant too
+        c === '\t' ||
+        c === '\n' ||
+        c === '\r' ||
+        c === '\f')
     ) {
       start = i + 1;
     }
@@ -149,24 +455,23 @@ function rightmostKey(selector: string): {
   let i = 0;
   while (i < compound.length) {
     const c = compound[i];
-    if (c === '#') {
-      const end = identEnd(compound, i + 1);
-      if (!id) id = compound.slice(i + 1, end);
-      i = end;
-    } else if (c === '.') {
-      const end = identEnd(compound, i + 1);
-      if (!cls) cls = compound.slice(i + 1, end);
-      i = end;
+    // Names as the matcher reads them, escapes resolved: `.md\:flex` is
+    // the class `md:flex`, and filed under its first half it never matched.
+    if (c === '#' || c === '.') {
+      const name = readIdent(compound, i + 1);
+      if (c === '#' && !id) id = name.value;
+      if (c === '.' && !cls) cls = name.value;
+      i = Math.max(name.end, i + 1);
     } else if (c === '[') {
       i = balancedEnd(compound, i, '[', ']');
     } else if (c === ':') {
       const skip = compound[i + 1] === ':' ? 2 : 1;
-      const end = identEnd(compound, i + skip);
+      const end = Math.max(readIdent(compound, i + skip).end, i + skip);
       i = compound[end] === '(' ? balancedEnd(compound, end, '(', ')') : end;
-    } else if (/[a-zA-Z]/.test(c)) {
-      const end = identEnd(compound, i);
-      if (!tag) tag = compound.slice(i, end).toLowerCase();
-      i = end;
+    } else if (startsIdent(compound, i)) {
+      const name = readIdent(compound, i);
+      if (!tag) tag = name.value.toLowerCase();
+      i = name.end;
     } else {
       i += 1;
     }
@@ -177,12 +482,6 @@ function rightmostKey(selector: string): {
   return { kind: 'any', name: '' };
 }
 
-function identEnd(text: string, from: number): number {
-  let i = from;
-  while (i < text.length && /[a-zA-Z0-9_\-\\]/.test(text[i])) i += 1;
-  return i;
-}
-
 function balancedEnd(
   text: string,
   from: number,
@@ -200,6 +499,12 @@ function balancedEnd(
   return text.length;
 }
 
+/** What `Cascade.firstLetterRules` found for an element. */
+export interface FirstLetterRules {
+  readonly el: Element;
+  readonly candidates: readonly unknown[];
+}
+
 /** What the pointer is over, for `:hover`. A chain rather than one element,
  *  because `li:hover a` has to light up while the pointer is on the `li`. */
 export interface PointerState {
@@ -209,13 +514,80 @@ export interface PointerState {
 
 const NO_POINTER: PointerState = { hovered: new Set(), active: new Set() };
 
+/**
+ * The face a style's font-relative units are measured in: its family list,
+ * size, weight and slant, the four that pick one. A family's faces can be
+ * different fonts altogether — a page's `@font-face` rules may set its
+ * bold in another file — so an `ex` in bold text is the bold face's.
+ */
+export interface MetricFace {
+  family: string;
+  size: number;
+  weight: number;
+  style: ComputedStyle['fontStyle'];
+}
+
+/** What a face measures, where the fonts can say. */
+export type FaceMetric = (face: MetricFace) => number | null;
+
+/** What a style's face is read from: a computed style, or the part of one
+ *  a declaration's font-relative units are measured against. */
+type FaceSource = Pick<
+  ComputedStyle,
+  'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'
+>;
+
+/** …and its line height, for `lh`. */
+type LineSource = FaceSource &
+  Pick<ComputedStyle, 'lineHeight' | 'lineHeightIsLength'>;
+
+function faceOf(style: FaceSource): MetricFace {
+  return {
+    family: style.fontFamily,
+    size: style.fontSize,
+    weight: style.fontWeight,
+    style: style.fontStyle,
+  };
+}
+
+function faceKey(style: FaceSource): string {
+  return `${style.fontFamily}\u0001${style.fontSize}\u0001${style.fontWeight}\u0001${style.fontStyle}`;
+}
+
 /**
  * A cascade over a fixed set of stylesheets. Rebuilt when the sheets change;
  * re-run when the DOM, the viewport band or the pointer state does.
  */
 export class Cascade {
   private _index = new RuleIndex();
+  /** The rules for pseudo-elements, kept apart: they never style the
+   *  element itself, and a document with none of them asks nothing. */
+  private _pseudo: Record<PseudoElement, RuleIndex> = {
+    before: new RuleIndex(),
+    after: new RuleIndex(),
+    'first-letter': new RuleIndex(),
+    'first-line': new RuleIndex(),
+    marker: new RuleIndex(),
+  };
   private _adapter: CssSelectAdapter;
+  /** The compounds of the selectors that test the pointer, each without
+   *  its `:hover` or `:active` (`pointerCompounds`), and their matchers,
+   *  compiled when a pointer move first asks (`hoverTouches`). */
+  private _hoverCompounds = new Set<string>();
+  private _hoverMatchers: ((el: Element) => boolean)[] | null = null;
+  /** Whether a pointer move can be restyled where it happened
+   *  (`HtmlViewNode._hoverInPlace`): false where a selector tests the
+   *  pointer inside a functional pseudo-class, which reaches elements no
+   *  compound names. */
+  hoverLocal = true;
+  /** Whether a compound that tests the pointer is followed by a sibling
+   *  combinator, so an element's later siblings restyle with it. */
+  hoverSiblings = false;
+  /** The compounds whose `:has()` tests the pointer, each without it, and
+   *  whether its argument starts at a sibling (`hoverAnchors`). */
+  private _hoverAnchors = new Map<string, boolean>();
+  private _anchorMatchers:
+    { match: (el: Element) => boolean; siblings: boolean }[] | null = null;
   private _pointer: PointerState = NO_POINTER;
   readonly initial: ComputedStyle;
   readonly look: RootLook;
@@ -229,6 +601,35 @@ export class Cascade {
   /** Every width at which some `@media` rule changes its mind, in CSS
    *  pixels — the unit the author wrote them in. */
   readonly breakpoints: number[];
+  /** The counter styles the sheets define, over the predefined ones. */
+  readonly counterStyles: CounterStyles;
+
+  /** A face's x-height, for `ex`, where the fonts can say. */
+  private _xHeightOf: FaceMetric | null;
+  private _xHeights = new Map<string, number>();
+  /** The advance of a face's "0", for `ch`, likewise. */
+  private _zeroWidthOf: FaceMetric | null;
+  private _zeroWidths = new Map<string, number>();
+  /** A face's own line height, for `lh` where `line-height` is `normal`,
+   *  likewise. */
+  private _normalLineOf: FaceMetric | null;
+  private _normalLines = new Map<string, number>();
+  /** Whether any declaration sets a custom property or reads one: without
+   *  one, no element's style asks about them. */
+  private _vars = false;
+  /** Whether any declaration is in a unit of the viewport's width — `vw`,
+   *  `vmin`, `vmax` — or of its height, `vh` and the same two: a style
+   *  holds such a length as a number, so it is computed again when that
+   *  side of the viewport moves (`HtmlViewNode._update`). */
+  readsViewportWidth = false;
+  readsViewportHeight = false;
+  /** The families the document loads itself (`fonts.ts`), or null for a
+   *  document with no `@font-face`. */
+  private _families: FontFamilies | null;
+  private _mapFamilies: ((list: string) => string) | undefined;
+  /** Whether any declaration has a length in `lh` or `rlh`: only then is
+   *  the line height settled ahead of the declarations that read it. */
+  private _lh = false;
 
   constructor(
     sheets: Stylesheet[],
@@ -236,18 +637,44 @@ export class Cascade {
     viewportWidth: number,
     viewportHeight: number,
     scale = 1,
+    xHeight: FaceMetric | null = null,
+    zeroWidth: FaceMetric | null = null,
+    normalLine: FaceMetric | null = null,
+    families: FontFamilies | null = null,
   ) {
+    this._xHeightOf = xHeight;
+    this._zeroWidthOf = zeroWidth;
+    this._normalLineOf = normalLine;
+    this._families = families;
+    this._mapFamilies = families
+      ? (list: string) => families.map(list)
+      : undefined;
     this.look = look;
-    this.initial = initialStyle(look);
+    this.initial = initialStyle(look, scale);
     this.viewportWidth = viewportWidth;
     this.viewportHeight = viewportHeight;
     this.scale = scale;
     const breakpoints = new Set<number>();
+    const counterStyles = new Map<string, CounterStyleRule>();
     for (const sheet of sheets) {
-      for (const rule of sheet.rules) this._index.add(rule);
+      // a counter style's rule whole over any before it of its name
+      for (const { prelude, declarations } of sheet.counterStyles ?? []) {
+        const style = counterStyleRule(prelude, declarations);
+        if (style) counterStyles.set(style.name, style.rule);
+      }
+      for (const rule of sheet.rules) {
+        if (!this._vars && usesVars(rule.declarations)) this._vars = true;
+        this._noteViewportUnits(rule.declarations);
+        if (!this._lh && usesLh(rule.declarations)) this._lh = true;
+        const pseudo = splitPseudoElement(rule);
+        if (pseudo) this._pseudo[pseudo.which].add(pseudo.rule);
+        else this._index.add(rule);
+        this._noteHover((pseudo?.rule ?? rule).selector);
+      }
       for (const bp of sheet.breakpoints) breakpoints.add(bp);
     }
     this.breakpoints = [...breakpoints].sort((a, b) => a - b);
+    this.counterStyles = new CounterStyles(counterStyles);
     // css-select's default adapter is domutils; `isHovered` and `isActive`
     // are its documented hooks for exactly this, so `:hover` costs an
     // adapter field rather than a fork of the matcher.
@@ -258,21 +685,127 @@ export class Cascade {
     this._adapter = {
       ...DomUtils,
       isTag,
+      // a type selector sees `tagOf`'s name — XHTML's `<svg:svg>` is an
+      // `svg` — asked only of a name that could be one: this runs for every
+      // type selector tried, and the parser has lowercased the rest
+      getName: (el: Element) =>
+        el.name.endsWith(':svg') ? tagOf(el) : el.name,
       isHovered: (el: Element) => this._pointer.hovered.has(el),
       isActive: (el: Element) => this._pointer.active.has(el),
       isVisited: () => false,
     };
   }
 
+  /** Whether declarations read the viewport's width or height (`vw`,
+   *  `vh`, `vmin`, `vmax`), noted on the cascade. */
+  private _noteViewportUnits(declarations: readonly Declaration[]): void {
+    if (this.readsViewportWidth && this.readsViewportHeight) return;
+    for (const d of declarations) {
+      if (!VIEWPORT_UNIT.test(d.value)) continue;
+      for (const m of d.value.matchAll(VIEWPORT_UNITS)) {
+        const unit = m[1].toLowerCase();
+        if (unit !== 'vh') this.readsViewportWidth = true;
+        if (unit !== 'vw') this.readsViewportHeight = true;
+      }
+    }
+  }
+
   /** Whether a pointer move can change what this cascade produces. */
   get hoverSensitive(): boolean {
-    return this._index.hoverSensitive;
+    return (
+      this._index.hoverSensitive ||
+      this._pseudo.before.hoverSensitive ||
+      this._pseudo.after.hoverSensitive ||
+      this._pseudo['first-letter'].hoverSensitive ||
+      this._pseudo['first-line'].hoverSensitive ||
+      this._pseudo.marker.hoverSensitive
+    );
   }
 
   setPointer(pointer: PointerState): void {
     this._pointer = pointer;
   }
 
+  /**
+   * Whether the pointer entering or leaving `el` can change a style: one of
+   * the compounds a selector tests the pointer in matches it, the pointer
+   * aside. A move between two paragraphs of a page whose only such rule is
+   * `a:hover` touches nothing, and restyles nothing.
+   */
+  hoverTouches(el: Element): boolean {
+    this._hoverMatchers ??= [...this._hoverCompounds].flatMap((c) => {
+      const match = this._compile(c);
+      return match ? [match] : [];
+    });
+    for (const match of this._hoverMatchers) if (match(el)) return true;
+    return false;
+  }
+
+  /**
+   * The elements whose `:has()` may have changed its answer as `el` was
+   * hovered or left: the ancestors of it a compound whose `:has()` tests
+   * the pointer names, and their earlier siblings and its own where the
+   * argument starts at a sibling — a superset, which is restyled and found
+   * the same where it did not. Into `into`.
+   */
+  hoverAnchors(el: Element, into: Element[]): void {
+    if (!this._hoverAnchors.size) return;
+    this._anchorMatchers ??= [...this._hoverAnchors].flatMap(
+      ([anchor, siblings]) => {
+        const match = this._compile(anchor);
+        return match ? [{ match, siblings }] : [];
+      },
+    );
+    const siblings = this._anchorMatchers.some((m) => m.siblings);
+    for (let at: Element | null = el; at;) {
+      if (at !== el) {
+        for (const { match } of this._anchorMatchers) {
+          if (match(at)) {
+            into.push(at);
+            break;
+          }
+        }
+      }
+      if (siblings) {
+        for (let s = at.prev; s; s = s.prev) {
+          if (!isTag(s as Element)) continue;
+          for (const { match, siblings: apart } of this._anchorMatchers) {
+            if (apart && match(s as Element)) {
+              into.push(s as Element);
+              break;
+            }
+          }
+        }
+      }
+      const parent: Element['parent'] = at.parent;
+      at = parent && isTag(parent as Element) ? (parent as Element) : null;
+    }
+  }
+
+  private _noteHover(selector: string): void {
+    if (!/:(?:hover|active)/i.test(selector)) return;
+    const found = pointerCompounds(selector);
+    if (found.nested) this.hoverLocal = false;
+    if (found.siblings) this.hoverSiblings = true;
+    for (const c of found.compounds) this._hoverCompounds.add(c);
+    for (const { anchor, siblings } of found.has) {
+      this._hoverAnchors.set(
+        anchor,
+        siblings || (this._hoverAnchors.get(anchor) ?? false),
+      );
+    }
+  }
+
+  /** A selector compiled as a rule's is, or null where css-select refuses
+   *  it, as a rule it refuses drops out of the cascade. */
+  private _compile(selector: string): ((el: Element) => boolean) | null {
+    try {
+      return compileSelector(selector, this._adapter);
+    } catch {
+      return null;
+    }
+  }
+
   /** Which media band a device-pixel width falls in. Two widths in the same
    *  band produce identical styles, which is what lets a resize skip
    *  restyling. */
@@ -286,18 +819,361 @@ export class Cascade {
     return band;
   }
 
+  /** Computed styles by sharing key, for one build (`sharedStyleFor`): one
+   *  map for the elements shared without matching, one for the elements
+   *  shared by what they matched. */
+  private _shared = new Map<string, SharedStyle>();
+  private _sharedByMatch = new Map<string, SharedStyle>();
+  private _nextShareKey = 1;
+  /** Custom property sets by what made them, for one build (`_customFor`). */
+  private _customs = new Map<string, CustomProps>();
+  private _ids = new WeakMap<object, number>();
+  private _nextId = 1;
+
+  /** A box tree is about to be built: the styles shared in the last build
+   *  were computed against a pointer and a viewport that may have moved. */
+  beginSharing(): void {
+    this._shared.clear();
+    this._sharedByMatch.clear();
+    this._customs.clear();
+  }
+
+  /**
+   * An element's custom properties: its parent's, or its own over them —
+   * shared by every element whose parent has the same ones and whose own
+   * come from the same declarations. Tailwind 4 sets thirty-five of them on
+   * every element (`*, ::before, ::after { --tw-shadow: 0 0 #0000; … }`),
+   * and a set per element was a fifth of building the boxes; it also kept
+   * each element's `var()`s from being replaced once for its siblings,
+   * which `substituteIn` remembers by the set they were read against.
+   */
+  private _customFor(
+    parentStyle: ComputedStyle,
+    candidates: Candidate[],
+  ): CustomProps | null {
+    let key = '';
+    for (const c of candidates) {
+      if (!this._hasCustom(c)) continue;
+      key += `${this._idOf(c.declarations)}:${c.only},`;
+    }
+    const parent = parentStyle.custom;
+    if (!key) return parent;
+    key = `${parent ? this._idOf(parent) : 0}|${key}`;
+    const hit = this._customs.get(key);
+    if (hit) return hit;
+    const own = new Map<string, string>();
+    for (const c of candidates) {
+      for (const d of pick(c)) if (d.custom) own.set(d.prop, d.value);
+    }
+    const made = customProperties(own, parent);
+    this._customs.set(key, made);
+    return made;
+  }
+
+  /** Whether a candidate sets a custom property. */
+  private _hasCustom(c: Candidate): boolean {
+    if (c.only >= 0) return !!c.declarations[c.only].custom;
+    let has = CUSTOM_IN.get(c.declarations);
+    if (has === undefined) {
+      has = c.declarations.some((d) => !!d.custom);
+      CUSTOM_IN.set(c.declarations, has);
+    }
+    return has;
+  }
+
+  /** A number for an object, to key a string by. */
+  private _idOf(of: object): number {
+    let id = this._ids.get(of);
+    if (id === undefined) {
+      id = this._nextId++;
+      this._ids.set(of, id);
+    }
+    return id;
+  }
+
+  /**
+   * `styleFor`, shared between the elements that must compute the same
+   * style, with the key this element's children share under.
+   *
+   * A style is a function of the parent's style, the rules that match, the
+   * presentational attributes, the inline style and whether the parent is a
+   * flex container. Outside the rules `UNSHAREABLE` names, what matches
+   * depends only on the element's tag and attributes and its ancestors', and
+   * the hints read nothing else either. So the key is the parent's key, the
+   * flex flag, the tag and every attribute — plus the pointer state where a
+   * rule asks for it — and an element whose key has been computed in this
+   * build takes that style object, matching nothing. A long document is a
+   * few kinds of element many times over: the benchmark's 600 KB report is
+   * 9,039 elements and 110 keys, and computing every style again was a third
+   * of an edit.
+   *
+   * An element a rule `UNSHAREABLE` could reach is matched, since where it
+   * sits decides what matches — and then shared by what matched: the same
+   * parent, attributes and rules make the same style. That is what keeps a
+   * striped table from being a style per row, and it keeps the key its
+   * children share under, which an element-per-key would have taken from the
+   * whole subtree.
+   *
+   * The style is handed out shared, so nothing may write to it — nothing
+   * does after the cascade, and `rootStyle` does not go through here.
+   */
+  sharedStyleFor(
+    el: Element,
+    parentStyle: ComputedStyle,
+    parentKey: number,
+    inFlexContainer: boolean,
+  ): SharedStyle {
+    let key = `${parentKey}\u0001${inFlexContainer ? 1 : 0}`;
+    const tag = tagOf(el);
+    key += `\u0001${tag.length}:${tag}`;
+    if (this._index.hoverSensitive) {
+      if (this._pointer.hovered.has(el)) key += '\u0001:hover';
+      if (this._pointer.active.has(el)) key += '\u0001:active';
+    }
+    const attribs = el.attribs;
+    for (const name in attribs) {
+      const value = attribs[name];
+      key += `\u0001${name.length}:${name}=${value.length}:${value}`;
+    }
+    if (!this._shareable(el)) {
+      const matched: number[] = [];
+      const candidates = this._candidates(el, matched);
+      key += `\u0001${matched.join(',')}`;
+      let shared = this._sharedByMatch.get(key);
+      if (shared === undefined) {
+        shared = {
+          style: this._computeStyle(
+            el,
+            parentStyle,
+            inFlexContainer,
+            candidates,
+          ),
+          key: this._nextShareKey++,
+        };
+        this._sharedByMatch.set(key, shared);
+      }
+      return shared;
+    }
+    let shared = this._shared.get(key);
+    if (shared === undefined) {
+      shared = {
+        style: this.styleFor(el, parentStyle, inFlexContainer),
+        key: this._nextShareKey++,
+      };
+      this._shared.set(key, shared);
+    }
+    return shared;
+  }
+
+  /** Whether no rule `UNSHAREABLE` names could reach this element: the same
+   *  buckets `_candidates` looks in. */
+  private _shareable(el: Element): boolean {
+    const index = this._index;
+    if (index.ownStyleEverywhere) return false;
+    if (index.ownStyleTags.size && index.ownStyleTags.has(tagOf(el))) {
+      return false;
+    }
+    if (index.ownStyleIds.size) {
+      const id = attr(el, 'id');
+      if (id && index.ownStyleIds.has(id)) return false;
+    }
+    if (index.ownStyleClasses.size) {
+      const className = attr(el, 'class');
+      if (className) {
+        for (const name of className.split(/\s+/)) {
+          if (name && index.ownStyleClasses.has(name)) return false;
+        }
+      }
+    }
+    return true;
+  }
+
   /**
-   * The computed style for one element, given its parent's. Called once per
-   * element per style pass, in document order — the box builder drives it,
-   * so there is no second traversal and no map of styles to allocate.
+   * The computed style for one element, given its parent's. The box builder
+   * asks for every element in document order, through `sharedStyleFor`, so
+   * a style is computed only for the elements with none to share.
    */
   styleFor(
     el: Element,
     parentStyle: ComputedStyle,
     inFlexContainer: boolean,
+  ): ComputedStyle {
+    return this._computeStyle(
+      el,
+      parentStyle,
+      inFlexContainer,
+      this._candidates(el),
+    );
+  }
+
+  /**
+   * The style of an element's `::before` or `::after`, or null when it has
+   * none: no rule reaches it, or the rules that do leave `content` at
+   * `normal` or `none`, which make no box (CSS 2.1 12.2). It inherits from
+   * the element's own style, as a pseudo-element does, and a flex
+   * container's are flex items. Not shared: few elements have one, and where
+   * a rule gives every element one — a clearfix — the style is the cost of
+   * the box it makes.
+   */
+  pseudoStyleFor(
+    el: Element,
+    which: 'before' | 'after',
+    elementStyle: ComputedStyle,
+  ): ComputedStyle | null {
+    const index = this._pseudo[which];
+    if (!index.size || !index.reaches(el)) return null;
+    const candidates: Candidate[] = [];
+    this._matchInto(index, el, candidates);
+    if (!candidates.length) return null;
+    // One that no rule gives a `content` is none, whatever else reaches it —
+    // `content` is not inherited, and its initial `normal` is nothing here.
+    // Tailwind's `*, ::before, ::after` reaches both of every element's.
+    if (!candidates.some(setsContent)) return null;
+    candidates.sort(byCascade);
+    const style = this._computeStyle(
+      el,
+      elementStyle,
+      elementStyle.display === 'flex' || elementStyle.display === 'inline-flex',
+      candidates,
+    );
+    return style.content === 'normal' || style.content === 'none'
+      ? null
+      : style;
+  }
+
+  /**
+   * The rules for an element's `::first-letter`, or null when none reaches
+   * it. They are matched against the element here, and its style computed
+   * later by `firstLetterStyle`, because the pseudo-element inherits from
+   * the box its letter turns out to be in — a `<span>` the block opens with,
+   * a `::before` — which the builder has not reached yet.
+   */
+  firstLetterRules(el: Element): FirstLetterRules | null {
+    const index = this._pseudo['first-letter'];
+    if (!index.size || !index.reaches(el)) return null;
+    const candidates: Candidate[] = [];
+    this._matchInto(index, el, candidates);
+    if (!candidates.length) return null;
+    candidates.sort(byCascade);
+    return { el, candidates };
+  }
+
+  /** Whether any rule styles a `::first-line`: a document with none asks
+   *  nothing more of its blocks. */
+  get hasFirstLine(): boolean {
+    return this._pseudo['first-line'].size > 0;
+  }
+
+  /**
+   * A list item's `::marker` style, inheriting from its own, or null when no
+   * rule reaches it (CSS Lists 3, 3.1): the colour and the font a bullet or
+   * a number is set in, and a `content` it is set as instead.
+   */
+  markerStyle(el: Element, style: ComputedStyle): ComputedStyle | null {
+    const index = this._pseudo.marker;
+    if (!index.size || !index.reaches(el)) return null;
+    const candidates: Candidate[] = [];
+    this._matchInto(index, el, candidates);
+    if (!candidates.length) return null;
+    candidates.sort(byCascade);
+    const out = this._computeStyle(el, style, false, candidates);
+    // a marker's direction is its own unless a rule says otherwise (the
+    // HTML style sheet's `::marker { unicode-bidi: isolate }`)
+    const set = candidates.some((c) =>
+      c.declarations.some((d) => d.prop === 'unicode-bidi'),
+    );
+    if (!set) out.unicodeBidi = 'isolate';
+    return out;
+  }
+
+  /**
+   * An element's `::first-line` style, inheriting from its own, or null
+   * when no rule reaches it (CSS 2.1 5.12.1).
+   */
+  firstLineStyle(el: Element, style: ComputedStyle): ComputedStyle | null {
+    const index = this._pseudo['first-line'];
+    if (!index.size) return null;
+    const candidates: Candidate[] = [];
+    this._matchInto(index, el, candidates);
+    if (!candidates.length) return null;
+    candidates.sort(byCascade);
+    return this._computeStyle(el, style, false, candidates);
+  }
+
+  /**
+   * The style of a `::first-letter` inside a box of `parentStyle`. It is an
+   * inline box, or a float where it floats, whatever the rules say of its
+   * `display` or its `position` (CSS 2.1 5.12.2).
+   */
+  firstLetterStyle(
+    rules: FirstLetterRules,
+    parentStyle: ComputedStyle,
+  ): ComputedStyle {
+    const style = this._computeStyle(
+      rules.el,
+      parentStyle,
+      false,
+      rules.candidates as Candidate[],
+    );
+    style.display = style.float === 'none' ? 'inline' : 'block';
+    style.position = 'static';
+    return style;
+  }
+
+  /** The x-height of a style's font: the font's own, asked once per face,
+   *  or half an em. */
+  private _exOf(style: FaceSource): number {
+    const key = faceKey(style);
+    let ex = this._xHeights.get(key);
+    if (ex === undefined) {
+      ex = this._xHeightOf?.(faceOf(style)) ?? NaN;
+      if (!(ex > 0)) ex = style.fontSize * 0.5;
+      this._xHeights.set(key, ex);
+    }
+    return ex;
+  }
+
+  /** The advance of a style's font's "0": the font's own, asked once per
+   *  face, or half an em. */
+  private _chOf(style: FaceSource): number {
+    const key = faceKey(style);
+    let ch = this._zeroWidths.get(key);
+    if (ch === undefined) {
+      ch = this._zeroWidthOf?.(faceOf(style)) ?? NaN;
+      if (!(ch > 0)) ch = style.fontSize * 0.5;
+      this._zeroWidths.set(key, ch);
+    }
+    return ch;
+  }
+
+  /** A style's computed line height as a length, for `lh`: `normal` as
+   *  its font's own, asked once per face, or 1.2em. */
+  private _lineHeightOf(style: LineSource): number {
+    const set = style.lineHeight;
+    if (set !== 'normal') {
+      return style.lineHeightIsLength ? set : set * style.fontSize;
+    }
+    const key = faceKey(style);
+    let line = this._normalLines.get(key);
+    if (line === undefined) {
+      line = this._normalLineOf?.(faceOf(style)) ?? NaN;
+      if (!(line > 0)) line = style.fontSize * 1.2;
+      this._normalLines.set(key, line);
+    }
+    return line;
+  }
+
+  /** `styleFor`, from the rules and hints already gathered for `el`. */
+  private _computeStyle(
+    el: Element,
+    parentStyle: ComputedStyle,
+    inFlexContainer: boolean,
+    candidates: Candidate[],
   ): ComputedStyle {
     const style = inherit(parentStyle, this.initial);
-    const candidates = this._candidates(el);
+    // custom properties first, in cascade order, so every `var()` in the
+    // declarations below finds the one that wins
+    if (this._vars) style.custom = this._customFor(parentStyle, candidates);
 
     // The unit context has to be built twice: once with the parent's font
     // size, so a `font-size: 1.2em` in the cascade resolves against the
@@ -306,29 +1182,158 @@ export class Cascade {
     const ctxParent: UnitContext = {
       em: parentStyle.fontSize,
       rem: this.initial.fontSize,
+      initial: this.initial,
       vw: this.viewportWidth,
       vh: this.viewportHeight,
       scale: this.scale,
+      ex: () => this._exOf(parentStyle),
+      ch: () => this._chOf(parentStyle),
+      families: this._mapFamilies,
+      lh: () => this._lineHeightOf(parentStyle),
+      rlh: () => this._lineHeightOf(this.initial),
     };
+    // The family, the weight and the slant go with the size: together they
+    // pick the face an `ex`, a `ch` or an `lh` in any declaration is
+    // measured in, however the declarations are ordered. A `width: 10ex`
+    // in a sheet under an inline `font-weight: 900` was measured in the
+    // family's regular face.
+    let sized = false;
+    let keyword = false;
     for (const c of candidates) {
       for (const d of pick(c)) {
-        if (d.prop === 'font-size' || d.prop === 'font') {
-          applyDeclaration(style, parentStyle, d.prop, d.value, ctxParent);
+        if (
+          d.prop === 'font-family' ||
+          d.prop === 'font-weight' ||
+          d.prop === 'font-style'
+        ) {
+          this._apply(style, parentStyle, d, ctxParent);
+        } else if (d.prop === 'font-size' || d.prop === 'font') {
+          // NaN until a size is set, so one the declaration did not take
+          // leaves the size where it was, and says nothing of it
+          const was = style.fontSize;
+          style.fontSize = NaN;
+          this._apply(style, parentStyle, d, ctxParent);
+          if (Number.isNaN(style.fontSize)) {
+            style.fontSize = was;
+          } else {
+            sized = true;
+            keyword = !d.vars && sizeKeyword(d.prop, d.value);
+          }
+        }
+      }
+    }
+    // The generic `monospace` on its own has a smaller size than the rest,
+    // 13 pixels to their 16 (the "fixed" font size every browser keeps):
+    // an element whose family becomes it, or stops being it, scales the
+    // size it inherits by that, and a keyword size is read from the
+    // smaller scale — the size it sets itself stays its own. Blink's
+    // CheckForGenericFamilyChange, and why a `<pre>` in a browser is 13px.
+    const mono = monospaceOnly(style.fontFamily);
+    if (
+      sized ? keyword && mono : mono !== monospaceOnly(parentStyle.fontFamily)
+    ) {
+      style.fontSize *= mono ? FIXED_SIZE : 1 / FIXED_SIZE;
+    }
+    // The face as the first pass settled it. The second applies every
+    // declaration again in cascade order, the font's among them, so the
+    // style passes through the fonts of every rule on the way: read from
+    // it, the `10ex` in `div { font-family: foo; width: 10ex }` was `foo`'s
+    // under an inline `font-family: Ahem` that came after it.
+    const face: FaceSource = {
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      fontStyle: style.fontStyle,
+    };
+    let line: LineSource | null = null;
+    const ctx: UnitContext = {
+      ...ctxParent,
+      em: style.fontSize,
+      ex: () => this._exOf(face),
+      ch: () => this._chOf(face),
+      lh: () => this._lineHeightOf(line ?? style),
+    };
+    // the line height, which an `lh` in any other declaration reads, ahead
+    // of them — a `font` sets one too — and read as it is then, for the
+    // same reason as the face: set again with the rest, in its place among
+    // them. A `font` sets the size as well, which the first pass settled.
+    if (this._lh) {
+      for (const c of candidates) {
+        for (const d of pick(c)) {
+          if (d.prop === 'line-height' || d.prop === 'font') {
+            this._apply(style, parentStyle, d, ctx);
+          }
         }
       }
+      style.fontSize = face.fontSize;
+      line = {
+        ...face,
+        lineHeight: style.lineHeight,
+        lineHeightIsLength: style.lineHeightIsLength,
+      };
     }
-    const ctx: UnitContext = { ...ctxParent, em: style.fontSize };
+    const settled = style.fontSize;
     for (const c of candidates) {
       for (const d of pick(c)) {
-        if (d.prop === 'font-size') continue;
-        applyDeclaration(style, parentStyle, d.prop, d.value, ctx);
+        if (d.prop === 'font-size' || d.custom) continue;
+        this._apply(style, parentStyle, d, ctx);
       }
     }
+    // A `font` is applied again, to keep its other longhands in cascade
+    // order, and it sets the size it names as well: the size is the first
+    // pass's, which the declarations that outrank the `font` had their say
+    // in, and the scale after them. `span { font: 15px/1 Ahem }` under
+    // `.b > span { font-size: 3.75em }` was 15px, its `em`s 3.75 of its
+    // parent's.
+    style.fontSize = settled;
 
+    // A table never keeps HTML's alignment, `-webkit-center` and its kin:
+    // the `<td align="center">` every mail centres its body table in
+    // centres the table, and the text in its cells stays at their start —
+    // as Blink resets it ("tables never support the -webkit-* values for
+    // text-align"). An author's own `text-align: center` is not HTML's, and
+    // is inherited into the table as it always was.
+    if (style.alignBlocks !== null && tagOf(el) === 'table') {
+      style.textAlign = 'start';
+      style.alignBlocks = null;
+    }
+    settleClamp(style, parentStyle);
+    settleOverflow(style);
+    settleContentVisibility(style);
     blockify(style, inFlexContainer);
+    decorate(style);
+    // which faces of the document's own families this family, weight and
+    // slant ask for — known only now, with all three computed
+    this._families?.note(style);
     return style;
   }
 
+  /** One declaration, its `var()`s replaced first. One that names a
+   *  custom property with no value, and has no fallback, is invalid at
+   *  computed-value time, and the property is as though `unset`. */
+  private _apply(
+    style: ComputedStyle,
+    parentStyle: ComputedStyle,
+    d: Declaration,
+    ctx: UnitContext,
+  ): void {
+    if (!d.vars) {
+      applyDeclaration(style, parentStyle, d.prop, d.value, ctx);
+      return;
+    }
+    // unset first: a value that does not parse once it is substituted is
+    // invalid at computed-value time, and does not leave the property what
+    // an earlier declaration gave it
+    if (isInherited(d.prop)) {
+      applyDeclaration(style, parentStyle, d.prop, 'inherit', ctx);
+    } else {
+      initialOne(style, this.initial, d.prop);
+    }
+    const value = substituteIn(d.value, style.custom);
+    if (value !== null)
+      applyDeclaration(style, parentStyle, d.prop, value, ctx);
+  }
+
   /**
    * The root's style — nothing above it to inherit from.
    *
@@ -337,24 +1342,51 @@ export class Cascade {
    * a `<body>` would have had: the UA sheet's margin and font, and any
    * author `body { … }` rule. Without it a fragment renders hard against the
    * left edge while the same markup inside `<html><body>` does not, which
-   * reads as a bug in the renderer rather than as a missing element.
+   * reads as a bug in the renderer rather than as a missing element. With
+   * no `<html>` either, the body inherits from an `<html>` that author
+   * `html { … }` rules have styled, as the one a browser implies would be.
+   *
+   * A document with a `<body>` and no `<html>` — the usual shape of a page
+   * that starts `<!DOCTYPE html><title>` — has the root box standing in for
+   * that implied `<html>` instead, so an `html { font-size }` still reaches
+   * the body. Taken as the initial style, the rule matched nothing and the
+   * whole page came out at the theme's size.
+   *
+   * `html` is the implied `<html>`'s own style where the root box stands in
+   * for the body inside it, and null otherwise: what an `html { … }` or a
+   * `:root { … }` rule gives it that is not inherited has no box to be
+   * drawn on, and its background is the canvas's (`paintDocument`).
    */
-  rootStyle(hasBody: boolean): ComputedStyle {
-    const style = { ...this.initial };
+  rootStyle(
+    hasBody: boolean,
+    hasHtml = true,
+  ): { style: ComputedStyle; html: ComputedStyle | null } {
+    const style = copyStyle(this.initial);
     style.display = 'block';
-    if (hasBody) return style;
+    if (hasBody && hasHtml) return { style, html: null };
     const synthetic = new DomElement('body', {}, []);
-    const bodyStyle = this.styleFor(synthetic, style, false);
+    let parent = style;
+    let html: ComputedStyle | null = null;
+    if (!hasHtml) {
+      const element = new DomElement('html', {}, hasBody ? [] : [synthetic]);
+      synthetic.parent = element;
+      parent = this.styleFor(element, style, false);
+      if (hasBody) return { style: asRoot(parent), html: null };
+      html = parent;
+    }
     // Only the box the body would have drawn is taken, not its layout role:
     // the root is still the initial containing block.
-    bodyStyle.display = 'block';
-    bodyStyle.position = 'static';
-    bodyStyle.float = 'none';
-    return bodyStyle;
+    return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
   }
 
-  private _candidates(el: Element): Candidate[] {
-    const out: Candidate[] = [];
+  /** The rules of `index` that match `el`, pushed onto `out` as candidates,
+   *  and their ids onto `matched` in the order they were tried. */
+  private _matchInto(
+    index: RuleIndex,
+    el: Element,
+    out: Candidate[],
+    matched?: number[],
+  ): void {
     // A media query's width is CSS pixels; the viewport is kept in device.
     const width = this.viewportWidth / this.scale;
 
@@ -366,12 +1398,7 @@ export class Cascade {
         if (!indexed.compiled) {
           indexed.compiled = true;
           try {
-            indexed.match = compile(rule.selector, {
-              adapter: this._adapter,
-              xmlMode: false,
-            } as unknown as Parameters<typeof compile>[1]) as unknown as (
-              node: Element,
-            ) => boolean;
+            indexed.match = compileSelector(rule.selector, this._adapter);
           } catch {
             // A selector this matcher does not know (`::-moz-…`, a CSS4 form
             // it has not learnt) drops out of the cascade rather than out of
@@ -380,26 +1407,36 @@ export class Cascade {
           }
         }
         if (!indexed.match || !indexed.match(el)) continue;
+        matched?.push(indexed.id);
         const origin = rule.order < 0 ? Origin.UserAgent : Origin.Author;
         pushRule(out, rule, origin);
       }
     };
 
     const id = attr(el, 'id');
-    if (id) consider(this._index.byId.get(id));
+    if (id) consider(index.byId.get(id));
     const className = attr(el, 'class');
     if (className) {
       for (const name of className.split(/\s+/)) {
-        if (name) consider(this._index.byClass.get(name));
+        if (name) consider(index.byClass.get(name));
       }
     }
-    consider(this._index.byTag.get(tagOf(el)));
-    consider(this._index.universal);
+    consider(index.byTag.get(tagOf(el)));
+    consider(index.universal);
+  }
+
+  /** Every rule and hint that applies to `el`, in cascade order — and, into
+   *  `matched` when it is passed, the ids of the rules, in the order they
+   *  were tried. */
+  private _candidates(el: Element, matched?: number[]): Candidate[] {
+    const out: Candidate[] = [];
+    this._matchInto(this._index, el, out, matched);
 
     const hints = presentationHints(el);
     if (hints.length) {
       out.push({
         origin: Origin.Presentation,
+        layer: null,
         specificity: 0,
         order: 0,
         declarations: hints,
@@ -410,11 +1447,15 @@ export class Cascade {
     const inline = attr(el, 'style');
     if (inline) {
       const declarations = parseDeclarations(inline);
+      if (!this._vars && usesVars(declarations)) this._vars = true;
+      this._noteViewportUnits(declarations);
+      if (!this._lh && usesLh(declarations)) this._lh = true;
       const normal = declarations.filter((d) => !d.important);
       const important = declarations.filter((d) => d.important);
       if (normal.length) {
         out.push({
           origin: Origin.Inline,
+          layer: null,
           specificity: 0,
           order: 0,
           declarations: normal,
@@ -424,6 +1465,7 @@ export class Cascade {
       if (important.length) {
         out.push({
           origin: Origin.InlineImportant,
+          layer: null,
           specificity: 0,
           order: 0,
           declarations: important,
@@ -437,6 +1479,145 @@ export class Cascade {
   }
 }
 
+/** An implied element's style as the root box's: its look, not its role —
+ *  the root is still a block, in flow, and the initial containing block. */
+function asRoot(style: ComputedStyle): ComputedStyle {
+  style.display = 'block';
+  style.position = 'static';
+  style.float = 'none';
+  return style;
+}
+
+/** `:root` is the `<html>` element: the one a browser implies around a
+ *  fragment, whose style the root box takes (`rootStyle`), and never a
+ *  fragment's top-level elements, which css-select would take for it. */
+const PSEUDOS = {
+  root: (el: Element) =>
+    el.name === 'html' && !(el.parent && isTag(el.parent as Element)),
+  // css-select's, but its ranges and tags lower-cased as ASCII has it, and
+  // no other script (CSS 2.1 4.1.3): Unicode's took `:lang(\u212Al)`, a
+  // Kelvin sign for the K, for `:lang(kl)`
+  lang: (el: Element, code: string | null): boolean => {
+    const ranges = (code ?? '')
+      .split(',')
+      .map((range) => range.trim().replace(/^['"]|['"]$/g, ''))
+      .filter((range) => range.length > 0)
+      .map((range) => asciiLower(range).split('-'));
+    let root = el;
+    for (let node: Element | null = el; node;) {
+      const value = node.attribs['xml:lang'] ?? node.attribs.lang;
+      if (value != null) {
+        if (!value) return ranges.some((range) => range[0] === '');
+        const tag = asciiLower(value).split('-');
+        return ranges.some((range) => langRangeMatches(tag, range));
+      }
+      root = node;
+      const parent: Element['parent'] = node.parent;
+      node = parent && isTag(parent as Element) ? (parent as Element) : null;
+    }
+    // with no element saying, the document's, as its `<meta>` sets it —
+    // searched from the document, where a fragment's `<meta>` is a
+    // sibling of what it covers
+    const pragma = pragmaLanguage(root.parent ?? root);
+    if (!pragma) return ranges.some((range) => range[0] === '');
+    const tag = asciiLower(pragma).split('-');
+    return ranges.some((range) => langRangeMatches(tag, range));
+  },
+};
+
+/** A length in a unit of the viewport: a number, then the unit, and no
+ *  more of a name after it. */
+const VIEWPORT_UNIT = /\d(?:vw|vh|vmin|vmax)(?![\w-])/i;
+const VIEWPORT_UNITS = /\d(vw|vh|vmin|vmax)(?![\w-])/gi;
+
+/**
+ * A selector with its `[attr~=""]` made one that matches nothing: an empty
+ * string is no word of a list, and such a selector represents nothing
+ * (Selectors 3, 6.3.1) — which the matcher's `~=` is not told, taking the
+ * empty word for one between two spaces, or at either end of none.
+ */
+function noEmptyWords(selector: string): string {
+  if (!selector.includes('~=')) return selector;
+  return selector.replace(
+    /\[[^\]"']*~=\s*(?:""|'')\s*(?:[is]\s*)?\]/gi,
+    ':not(*)',
+  );
+}
+
+/**
+ * A document's language as a `<meta http-equiv="content-language">` sets
+ * it — HTML's pragma-set default language, the last such `<meta>`'s
+ * `content` up to its first white space, and none where it lists more
+ * than one — by the document's root element, found once.
+ */
+function pragmaLanguage(root: { children: unknown[] }): string {
+  let lang = PRAGMA_LANGUAGE.get(root);
+  if (lang !== undefined) return lang;
+  lang = '';
+  const stack: { children: unknown[] }[] = [root];
+  while (stack.length) {
+    const node = stack.pop()! as Element;
+    if (
+      isTag(node) &&
+      node.name === 'meta' &&
+      node.attribs['http-equiv']?.trim().toLowerCase() === 'content-language'
+    ) {
+      const content = node.attribs.content;
+      if (content !== undefined && !content.includes(',')) {
+        const candidate = content.trim().split(/[\t\n\f\r ]/)[0];
+        if (candidate) lang = candidate;
+      }
+    }
+    // in document order: the last one pushed is taken first
+    for (let i = node.children.length - 1; i >= 0; i -= 1) {
+      const child = node.children[i];
+      if (isTag(child as Element)) stack.push(child as Element);
+    }
+  }
+  PRAGMA_LANGUAGE.set(root, lang);
+  return lang;
+}
+
+const PRAGMA_LANGUAGE = new WeakMap<object, string>();
+
+/** RFC 4647's extended filtering, of a tag's subtags by a range's, as
+ *  css-select does it. */
+function langRangeMatches(tag: string[], range: string[]): boolean {
+  if (range[0] !== '*' && range[0] !== tag[0]) return false;
+  let at = 1;
+  for (let r = 1; r < range.length; r += 1) {
+    if (range[r] === '*') continue;
+    while (at < tag.length && tag[at] !== range[r]) {
+      if (tag[at++].length <= 1) return false;
+    }
+    if (at >= tag.length) return false;
+    at += 1;
+  }
+  return true;
+}
+
+/** Whether any of these declarations sets a custom property or reads one. */
+function usesVars(declarations: readonly Declaration[]): boolean {
+  for (const d of declarations) if (d.custom || d.vars) return true;
+  return false;
+}
+
+/** Whether any of the declarations has a length in `lh` or `rlh`. */
+function usesLh(declarations: readonly Declaration[]): boolean {
+  for (const d of declarations) if (LH.test(d.value)) return true;
+  return false;
+}
+const LH = /\d\.?r?lh\b/i;
+
+/** Whether a candidate declares `content`. */
+function setsContent(c: Candidate): boolean {
+  for (const d of pick(c)) if (d.prop === 'content') return true;
+  return false;
+}
+
+/** Whether a rule's declarations set a custom property, by the array. */
+const CUSTOM_IN = new WeakMap<Declaration[], boolean>();
+
 function pick(c: Candidate): Declaration[] {
   return c.only < 0 ? c.declarations : [c.declarations[c.only]];
 }
@@ -452,6 +1633,7 @@ function pushRule(out: Candidate[], rule: StyleRule, origin: Origin): void {
   if (!hasImportant) {
     out.push({
       origin,
+      layer: rule.layer,
       specificity: rule.specificity,
       order: rule.order,
       declarations: rule.declarations,
@@ -469,6 +1651,7 @@ function pushRule(out: Candidate[], rule: StyleRule, origin: Origin): void {
           ? Origin.UserAgent
           : Origin.AuthorImportant
         : origin,
+      layer: rule.layer,
       specificity: rule.specificity,
       order: rule.order,
       declarations: rule.declarations,
@@ -479,10 +1662,34 @@ function pushRule(out: Candidate[], rule: StyleRule, origin: Origin): void {
 
 function byCascade(a: Candidate, b: Candidate): number {
   if (a.origin !== b.origin) return a.origin - b.origin;
+  if (a.layer !== b.layer) {
+    // a later layer wins over an earlier one whatever the specificity, and
+    // for `!important` an earlier one does (CSS Cascade 5, 6.4)
+    const by = compareLayers(a.layer, b.layer);
+    if (by !== 0) return a.origin >= Origin.AuthorImportant ? -by : by;
+  }
   if (a.specificity !== b.specificity) return a.specificity - b.specificity;
   return a.order - b.order;
 }
 
+/**
+ * Which of two layers wins for a normal declaration: a later one over an
+ * earlier one, and a rule in no layer over any, as a rule directly in a
+ * layer is over the layers inside it.
+ */
+function compareLayers(
+  a: readonly number[] | null,
+  b: readonly number[] | null,
+): number {
+  if (a === null) return b === null ? 0 : 1;
+  if (b === null) return -1;
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i += 1) {
+    if (a[i] !== b[i]) return a[i] - b[i];
+  }
+  return b.length - a.length;
+}
+
 /**
  * The presentational attributes, as declarations. They sit above the UA
  * sheet and below every author rule, which is where HTML says they go — and
@@ -500,16 +1707,79 @@ function presentationHints(el: Element): Declaration[] {
   const align = attr(el, 'align');
   if (align) {
     const v = align.toLowerCase();
-    if (tag === 'img' && (v === 'left' || v === 'right')) push('float', v);
-    else if (v === 'center' || v === 'middle') push('text-align', 'center');
+    const side = v === 'middle' ? 'center' : v;
+    if ((tag === 'img' || tag === 'table') && (v === 'left' || v === 'right')) {
+      push('float', v);
+    } else if (tag === 'img') {
+      // an image's other alignments are its line's
+      const va = IMAGE_ALIGN[v];
+      if (va) push('vertical-align', va);
+    } else if (tag === 'hr') {
+      // a rule narrower than its line stands where it is aligned
+      if (v === 'left') {
+        push('margin-left', '0');
+        push('margin-right', 'auto');
+      } else if (v === 'right') {
+        push('margin-left', 'auto');
+        push('margin-right', '0');
+      }
+    } else if (tag === 'table') {
+      // a table's `align` places the table and leaves its text alone: set
+      // as its text's, `<table align="center">` — the frame of nearly
+      // every mail — stood at the left with its cells' text centred
+      if (side === 'center') {
+        push('margin-left', 'auto');
+        push('margin-right', 'auto');
+      }
+    } else if (
+      ALIGNS_BLOCKS.has(tag) &&
+      (side === 'center' || side === 'left' || side === 'right')
+    ) {
+      // these align the blocks in them as well as their text (HTML's
+      // rendering, "align descendants"): the table a `<td align="center">`
+      // or a `<div align="center">` holds is centred in it
+      push('text-align', `-webkit-${side}`);
+    } else if (side === 'center') push('text-align', 'center');
     else if (v === 'left' || v === 'right' || v === 'justify')
       push('text-align', v);
   }
   const valign = attr(el, 'valign');
   if (valign) push('vertical-align', valign.toLowerCase());
+  // HTML's `dir` is its element's `direction`: `<table dir="rtl">` starts
+  // at the right, and a Hebrew or an Arabic message is written this way
+  const dir = attr(el, 'dir')?.toLowerCase();
+  if (dir === 'rtl' || dir === 'ltr') push('direction', dir);
+  // and it isolates the element from the text around it, or with `auto`
+  // takes its first strong letter's direction (HTML's UA sheet: `[dir]`,
+  // `[dir=auto i]`, `bdo[dir]`)
+  if (dir !== undefined) {
+    push(
+      'unicode-bidi',
+      tag === 'bdo'
+        ? 'isolate-override'
+        : dir === 'auto'
+          ? 'plaintext'
+          : 'isolate',
+    );
+  }
 
   const bgcolor = attr(el, 'bgcolor');
   if (bgcolor) push('background-color', bgcolor);
+  if (BACKGROUNDS.has(tag)) {
+    const background = attr(el, 'background')?.trim();
+    if (background) {
+      push('background-image', `url("${background.replace(/["\\\n]/g, '')}")`);
+    }
+  }
+  if (tag === 'body') {
+    // the text's colour, and the links'
+    const text = attr(el, 'text');
+    if (text) push('color', text);
+  } else if (tag === 'a' && attr(el, 'href') !== undefined) {
+    const body = closestBody(el);
+    const link = body ? attr(body, 'link') : undefined;
+    if (link) push('color', link);
+  }
   const color = attr(el, 'color');
   if (color && (tag === 'font' || tag === 'basefont')) push('color', color);
   const face = attr(el, 'face');
@@ -529,6 +1799,24 @@ function presentationHints(el: Element): Declaration[] {
     if (width) push('width', lengthAttr(width));
     const height = attr(el, 'height');
     if (height) push('height', lengthAttr(height));
+    // and, both numbers, an image's the ratio it has before it loads, or
+    // where it has none of its own (HTML 15.4.3, "map to the aspect-ratio
+    // property")
+    if (width && height && RATIO_SIZED.has(tag)) {
+      const w = parseFloat(width);
+      const h = parseFloat(height);
+      if (w > 0 && h > 0 && !/%/.test(width + height)) {
+        push('aspect-ratio', `auto ${w} / ${h}`);
+      }
+    }
+  } else if (tag === 'svg') {
+    // an SVG's are CSS lengths of their own, units and all (SVG 2, 5.1.1)
+    const width = attr(el, 'width');
+    const w = width ? svgSizeHint(width) : null;
+    if (w) push('width', w);
+    const height = attr(el, 'height');
+    const h = height ? svgSizeHint(height) : null;
+    if (h) push('height', h);
   }
 
   if (tag === 'table') {
@@ -550,13 +1838,50 @@ function presentationHints(el: Element): Declaration[] {
   if (tag === 'hr') {
     const noshade = attr(el, 'noshade');
     if (noshade !== undefined) push('border-top-width', '2px');
+    // the rule's colour and its thickness
+    const color = attr(el, 'color');
+    if (color) push('border-top-color', color);
+    const size = attr(el, 'size');
+    if (size && Number(size) > 0) push('border-top-width', `${Number(size)}px`);
+  }
+  if ((tag === 'td' || tag === 'th') && attr(el, 'nowrap') !== undefined) {
+    push('white-space', 'nowrap');
+  }
+  if (tag === 'br') {
+    // below the floats: `<br clear="all">` after a floated image
+    const clear = attr(el, 'clear')?.toLowerCase();
+    if (clear === 'all' || clear === 'both') push('clear', 'both');
+    else if (clear === 'left' || clear === 'right') push('clear', clear);
   }
   if (tag === 'ol') {
     const type = attr(el, 'type');
     const mapped = OL_TYPES[type ?? ''];
     if (mapped) push('list-style-type', mapped);
-    const start = attr(el, 'start');
-    if (start) push('counter-reset', start);
+    // the number a list starts at is its `list-item` counter's, one before
+    // it, or counting down one after it (HTML's rendering, "Lists")
+    const start = htmlInteger(attr(el, 'start'));
+    if (start !== null) {
+      push(
+        'counter-reset',
+        attr(el, 'reversed') !== undefined
+          ? `reversed(list-item) ${start + 1}`
+          : `list-item ${start - 1}`,
+      );
+    }
+  }
+  if (tag === 'ul') {
+    const type = attr(el, 'type')?.toLowerCase();
+    if (type && BULLETS.has(type)) push('list-style-type', type);
+  }
+  if (tag === 'li') {
+    // an item's `value` is the number it goes on from
+    const value = htmlInteger(attr(el, 'value'));
+    if (value !== null) push('counter-set', `list-item ${value}`);
+    const type = attr(el, 'type');
+    const mapped =
+      OL_TYPES[type ?? ''] ??
+      (type && BULLETS.has(type.toLowerCase()) ? type.toLowerCase() : null);
+    if (mapped) push('list-style-type', mapped);
   }
   if (tag === 'img' || tag === 'object') {
     const hspace = attr(el, 'hspace');
@@ -573,6 +1898,56 @@ function presentationHints(el: Element): Declaration[] {
   return out;
 }
 
+/** An image's `align` other than a side, as its `vertical-align`. */
+const IMAGE_ALIGN: Record<string, string> = {
+  top: 'top',
+  texttop: 'text-top',
+  middle: 'middle',
+  absmiddle: 'middle',
+  center: 'middle',
+  bottom: 'baseline',
+  baseline: 'baseline',
+  absbottom: 'bottom',
+};
+
+/** The elements whose `align` aligns the blocks in them too. */
+const ALIGNS_BLOCKS = new Set([
+  'div',
+  'caption',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+  'td',
+  'th',
+]);
+
+/** The elements a `background` attribute gives a background image. */
+const BACKGROUNDS = new Set([
+  'body',
+  'table',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+  'td',
+  'th',
+]);
+
+function closestBody(el: Element): Element | null {
+  let node = el.parent;
+  while (node) {
+    if (node.type === 'tag' && (node as Element).name === 'body') {
+      return node as Element;
+    }
+    node = node.parent;
+  }
+  return null;
+}
+
+/** What the `width` and `height` attributes give a ratio as well. */
+const RATIO_SIZED = new Set(['img', 'video']);
+
 const SIZED = new Set([
   'img',
   'table',
@@ -582,7 +1957,6 @@ const SIZED = new Set([
   'colgroup',
   'iframe',
   'video',
-  'canvas',
   'object',
   'embed',
   'hr',
@@ -596,6 +1970,18 @@ const OL_TYPES: Record<string, string> = {
   I: 'upper-roman',
 };
 
+/** What a `<ul type>` or an `<li type>` names that is not a number. */
+const BULLETS = new Set(['disc', 'circle', 'square', 'none']);
+
+/** An attribute read as HTML reads an integer: its leading digits, signed,
+ *  whatever follows them; null where it has none. A counter is a 32-bit
+ *  integer in a browser, and one past that is kept to it. */
+function htmlInteger(value: string | undefined): number | null {
+  const match = value === undefined ? null : /^\s*([+-]?\d+)/.exec(value);
+  if (!match) return null;
+  return Math.max(-2147483648, Math.min(2147483647, Number(match[1])));
+}
+
 const FONT_SIZE_STEPS = [1, 0.63, 0.82, 1, 1.13, 1.5, 2, 3];
 
 /** A presentational length: bare numbers are pixels, `50%` stays a percent. */
@@ -615,3 +2001,36 @@ function closestTable(el: Element): Element | null {
   }
   return null;
 }
+
+/** The generic fixed-width family's size to everyone else's: 13 to 16. */
+const FIXED_SIZE = 13 / 16;
+
+/** Whether a family list is the generic `monospace` and nothing else,
+ *  which has the smaller size; a list with a fallback after it does not,
+ *  so `monospace, monospace` keeps the size it had. */
+function monospaceOnly(family: string): boolean {
+  return family.length === 9 && family.toLowerCase() === 'monospace';
+}
+
+/** Whether a `font-size`, or the size in a `font`, is an absolute-size
+ *  keyword, or `initial`, which is `medium`. */
+function sizeKeyword(prop: string, value: string): boolean {
+  const words = value.trim().toLowerCase();
+  if (prop === 'font-size') return ABSOLUTE_SIZES.has(words);
+  for (const word of words.split(/[\s/]+/)) {
+    if (ABSOLUTE_SIZES.has(word)) return true;
+  }
+  return false;
+}
+
+const ABSOLUTE_SIZES = new Set([
+  'xx-small',
+  'x-small',
+  'small',
+  'medium',
+  'large',
+  'x-large',
+  'xx-large',
+  'xxx-large',
+  'initial',
+]);