@react-x11/components 0.14.0 → 0.16.0

package/src/html/css/cascade.ts

@@ -6,7 +6,8 @@
 // compiles a selector to a closure once and the closure is what runs per
 // element, and it has the combinator, `:nth-child(an+b)` and attribute-
 // operator cases right — so it is imported, through an adapter that answers
-// `:hover` from this renderer's own pointer state.
+// `:hover` from this renderer's own pointer state, and pseudo-classes that
+// answer `:focus` and its kin from which element's widget holds the focus.
 //
 // What is *not* delegated is the choice of which selectors to try. Testing
 // every rule against every element is O(rules × elements) and is what makes
@@ -21,7 +22,7 @@ import { Element as DomElement, isTag } from 'domhandler';
 import type { Element } from 'domhandler';
 
 import { attr, tagOf } from '../dom.js';
-import { svgSizeHint } from '../svg.js';
+import { systemColorTable, usedColorScheme } from './color.js';
 import {
   asciiLower,
   escapeEnd,
@@ -33,9 +34,11 @@ import type { Declaration, StyleRule, Stylesheet } from './parse.js';
 import {
   applyDeclaration,
   blockify,
+  settleAlign,
   settleButton,
   settleContentVisibility,
   settleOverflow,
+  settleOutline,
   settleClamp,
   copyStyle,
   decorate,
@@ -54,6 +57,15 @@ import type { UnitContext } from './values.js';
 import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
 import type { CustomProps } from './vars.js';
+import {
+  ROOT_BOX_PROPS,
+  SHAPE_TAGS,
+  isShapeProp,
+  isUse,
+  shapeValue,
+  useHref,
+} from './shapes.js';
+import type { ShapeContext, ShapeStyle, ShapeStyles } from './shapes.js';
 
 /** Where a declaration came from. Higher wins before specificity is asked. */
 const enum Origin {
@@ -139,6 +151,18 @@ interface IndexedRule {
   compiled: boolean;
   /** Which rule this is, in a sharing key (`Cascade.sharedStyleFor`). */
   id: number;
+  /** For a rule asked of the elements in a drawing by their type, or of
+   *  them all (`Cascade.shapeStyles`): the ids and classes it asks of its
+   *  subject's ancestors (`ancestorKeys`). Null until a drawing asks, and
+   *  in every other rule. */
+  needs: readonly string[] | null;
+  /** For a rule kept for drawings: whether it declares something a
+   *  drawing's root does not have from its box's style. Null until asked. */
+  root: boolean | null;
+  /** The selector as it is matched in the tree a `<use>`'s copy is in
+   *  (`Cascade.shapeStyles`), compiled once one is first asked. */
+  inCopy: ((el: Element) => boolean) | null;
+  inCopyCompiled: boolean;
 }
 
 /**
@@ -169,10 +193,12 @@ 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 rules that test `:hover`, in buckets of their own: the ones whose
-   *  answers a pointer move can change, which is all that is asked to know
-   *  whether an element's did (`Cascade.pointerChanged`). Null until there
-   *  is one. */
+  /** …and focus-sensitive, for a widget taking the focus or giving it up. */
+  focusSensitive = false;
+  /** The rules that test `:hover` or the focus, in buckets of their own:
+   *  the ones whose answers a pointer move or a focus change can change,
+   *  which is all that is asked to know whether an element's did
+   *  (`Cascade.pointerChanged`). Null until there is one. */
   pointer: RuleIndex | null = null;
   /** The buckets holding a rule an element cannot share its style under
    *  (`UNSHAREABLE`): the ids, classes and tags whose elements compute
@@ -194,6 +220,11 @@ class RuleIndex {
    */
   reaches(el: Element): boolean {
     if (this.universal.length || this.byTag.has(tagOf(el))) return true;
+    return this.names(el);
+  }
+
+  /** Whether a bucket here is for `el`'s id, or for a class of its. */
+  names(el: Element): boolean {
     if (this.byId.size) {
       const id = attr(el, 'id');
       if (id && this.byId.has(id)) return true;
@@ -209,18 +240,23 @@ class RuleIndex {
     return false;
   }
 
-  add(rule: StyleRule): void {
+  add(rule: StyleRule, key = rightmostKey(rule.selector)): void {
     this.size += 1;
     const indexed: IndexedRule = {
       rule,
       match: null,
       compiled: false,
       id: this._nextId++,
+      needs: null,
+      root: null,
+      inCopy: null,
+      inCopyCompiled: false,
     };
     if (rule.selector.includes(':hover') || rule.selector.includes(':active')) {
       this.hoverSensitive = true;
     }
-    const key = rightmostKey(rule.selector);
+    const focus = FOCUS.test(rule.selector);
+    if (focus) this.focusSensitive = true;
     if (UNSHAREABLE.test(rule.selector)) {
       if (key.kind === 'id') this.ownStyleIds.add(key.name);
       else if (key.kind === 'class') this.ownStyleClasses.add(key.name);
@@ -228,7 +264,7 @@ class RuleIndex {
       else this.ownStyleEverywhere = true;
     }
     this._bucket(key).push(indexed);
-    if (HOVER.test(rule.selector)) {
+    if (focus || HOVER.test(rule.selector)) {
       this.pointer ??= new RuleIndex();
       this.pointer.size += 1;
       this.pointer._bucket(key).push(indexed);
@@ -321,8 +357,18 @@ function splitPseudoElement(
  * 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.
+ *
+ * The focus is the other state a change of reaches only some elements, and
+ * `kind` says which is asked for: `FOCUS_STATE` finds the compounds that
+ * test `:focus`, `:focus-visible` or `:focus-within` the same way. Either
+ * kind leaves the other's pseudo-classes out of a compound as well as its
+ * own, so what is left matches wherever the compound could, in any state —
+ * `a:focus:hover` is a compound of `a`'s, for both.
  */
-export function pointerCompounds(selector: string): PointerCompounds {
+export function pointerCompounds(
+  selector: string,
+  kind: StateKind = HOVER_STATE,
+): PointerCompounds {
   const out: PointerCompounds = {
     compounds: [],
     siblings: false,
@@ -330,10 +376,33 @@ export function pointerCompounds(selector: string): PointerCompounds {
     has: [],
     followed: [],
   };
-  scanComplex(selector, out);
+  scanComplex(selector, out, kind);
   return out;
 }
 
+/** A state a change of reaches only the elements some compound names: which
+ *  selectors mention it at all, which tests it anywhere, and which of the
+ *  pseudo-classes `STATE_PSEUDO_AT` takes out of a compound are its own. */
+export interface StateKind {
+  mentions: RegExp;
+  any: RegExp;
+  own: RegExp;
+}
+
+/** The pointer's: `:hover`, and `:active`, which nothing sets. */
+export const HOVER_STATE: StateKind = {
+  mentions: /:(?:hover|active)/i,
+  any: /:hover(?![\w-])/i,
+  own: /^:hover$/i,
+};
+
+/** The focus's: `:focus`, `:focus-visible` and `:focus-within`. */
+export const FOCUS_STATE: StateKind = {
+  mentions: /:focus/i,
+  any: /:focus(?:-visible|-within)?(?![\w-])/i,
+  own: /^:focus/i,
+};
+
 export interface PointerCompounds {
   compounds: string[];
   siblings: boolean;
@@ -422,11 +491,15 @@ function closeOf(text: string, open: number): number {
 }
 
 /** `pointerCompounds` for one complex selector, into `out`. */
-function scanComplex(selector: string, out: PointerCompounds): void {
+function scanComplex(
+  selector: string,
+  out: PointerCompounds,
+  kind: StateKind,
+): void {
   for (const { text, next } of compoundsOf(selector)) {
     const compoundsFrom = out.compounds.length;
     const hasFrom = out.has.length;
-    const found = scanCompound(text, out);
+    const found = scanCompound(text, out, kind);
     const sibling = next === '+' || next === '~';
     if (found.args.length) {
       out.has.push({
@@ -458,11 +531,13 @@ function scanComplex(selector: string, out: PointerCompounds): void {
  * it (`bare`), whether it tests the element's own hover (`pointer`), the
  * arguments of each `:has()` of the element's that tests it below (`args`),
  * and whether a selector nested in it named another element's (`below`),
- * whose compounds went into `out`.
+ * whose compounds went into `out`. Of the focus, likewise, for
+ * `FOCUS_STATE`.
  */
 function scanCompound(
   text: string,
   out: PointerCompounds,
+  kind: StateKind,
 ): { bare: string; pointer: boolean; below: boolean; args: string[] } {
   let bare = '';
   let pointer = false;
@@ -487,9 +562,9 @@ function scanCompound(
     else if (c === '[') bracket += 1;
     else if (c === ']') bracket = Math.max(0, bracket - 1);
     else if (c === ':' && bracket === 0 && text[i + 1] !== ':') {
-      const m = POINTER_PSEUDO_AT.exec(text.slice(i));
+      const m = STATE_PSEUDO_AT.exec(text.slice(i));
       if (m) {
-        if (m[0].length === 6) pointer = true;
+        if (kind.own.test(m[0])) pointer = true;
         i += m[0].length - 1;
         continue;
       }
@@ -500,7 +575,7 @@ function scanCompound(
         const arg = text.slice(open + 1, close);
         const whole = text.slice(i, close + 1);
         i = close;
-        if (!HOVER.test(arg)) {
+        if (!kind.any.test(arg)) {
           bare += whole;
           continue;
         }
@@ -521,15 +596,15 @@ function scanCompound(
           const own: string[] = [];
           let any = false;
           for (const entry of selectorsOf(arg)) {
-            if (!HOVER.test(entry)) continue;
+            if (!kind.any.test(entry)) continue;
             const parts = compoundsOf(entry);
             if (parts.length !== 1) {
-              scanComplex(entry, out);
+              scanComplex(entry, out, kind);
               below = true;
               continue;
             }
             // of this element itself
-            const one = scanCompound(parts[0].text, out);
+            const one = scanCompound(parts[0].text, out, kind);
             if (one.below) below = true;
             if (!one.pointer && !one.args.length) continue;
             if (one.pointer) pointer = true;
@@ -556,32 +631,42 @@ function scanCompound(
 const FUNCTION_AT = /^:([\w-]+)\(/;
 
 /** `:hover` anywhere in a selector. */
-const HOVER = /:hover(?![\w-])/i;
+const HOVER = HOVER_STATE.any;
+
+/** `:focus`, `:focus-visible` or `:focus-within` anywhere in a selector. */
+const FOCUS = FOCUS_STATE.any;
 
-/** `:hover` or `:active` at the start of a string, and nothing longer. */
-const POINTER_PSEUDO_AT = /^:(?:hover|active)(?![\w-])/i;
+/** A pseudo-class of a state this renderer keeps — `:hover`, `:active`,
+ *  `:focus` and its two kin — at the start of a string, and nothing
+ *  longer. */
+const STATE_PSEUDO_AT =
+  /^:(?:hover|active|focus(?:-visible|-within)?)(?![\w-])/i;
 
-/** `:hover` or `:active` anywhere in a selector. */
-const POINTER_PSEUDO = /:(?:hover|active)(?![\w-])/i;
+/** Any of them anywhere in a selector. */
+const STATE_PSEUDO = /:(?:hover|active|focus(?:-visible|-within)?)(?![\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.
+ * new cascade. So a selector that tests the pointer or the focus 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,
+  pseudos: typeof PSEUDOS = PSEUDOS,
+  /** Whether what it answers may be kept: not where the adapter's tree
+   *  moves under it, as a `<use>`'s copy's does (`Cascade.shapeStyles`). */
+  cache = true,
 ): (el: Element) => boolean {
   return compile(noEmptyWords(selector), {
     adapter,
     xmlMode: false,
-    pseudos: PSEUDOS,
-    cacheResults: !POINTER_PSEUDO.test(selector),
+    pseudos,
+    cacheResults: cache && !STATE_PSEUDO.test(selector),
   } as unknown as Parameters<typeof compile>[1]) as unknown as (
     node: Element,
   ) => boolean;
@@ -641,7 +726,14 @@ function rightmostKey(selector: string): {
       start = i + 1;
     }
   }
-  const compound = selector.slice(start);
+  return compoundKey(selector.slice(start));
+}
+
+/** A compound selector's most selective key (`rightmostKey`). */
+function compoundKey(compound: string): {
+  kind: 'id' | 'class' | 'tag' | 'any';
+  name: string;
+} {
   let id: string | null = null;
   let cls: string | null = null;
   let tag: string | null = null;
@@ -675,6 +767,74 @@ function rightmostKey(selector: string): {
   return { kind: 'any', name: '' };
 }
 
+/**
+ * The ids and classes a selector asks of its subject's ancestors: for each
+ * compound a descendant or a child combinator follows, its id, or else its
+ * first class, as `#name` or `.name`. Such a compound is an ancestor of
+ * the subject — one a sibling combinator follows is a sibling of one — so
+ * an element with no ancestor of some such name is not the rule's, which
+ * is known without matching it. A compound with neither asks nothing.
+ */
+function ancestorKeys(selector: string): string[] {
+  const keys: string[] = [];
+  const compounds = compoundsOf(selector);
+  for (let i = 0; i < compounds.length - 1; i += 1) {
+    const { text, next } = compounds[i];
+    if (next !== ' ' && next !== '>') continue;
+    const key = compoundKey(text);
+    if (key.kind === 'id') keys.push(`#${key.name}`);
+    else if (key.kind === 'class') keys.push(`.${key.name}`);
+  }
+  return keys;
+}
+
+/** A drawing none of whose own elements a rule reaches. */
+const NO_SHAPES: ReadonlyMap<Element, ShapeStyle> = new Map();
+
+/** What the rules matched in the copy a `<use>` makes of an element: each
+ *  element they reach, with its place in the copy and its rules in cascade
+ *  order; how many elements the copy has; and the `<use>`s in it. */
+interface CopyMatch {
+  rules: { el: Element; at: number; candidates: Candidate[] }[];
+  size: number;
+  uses: Element[];
+}
+
+/**
+ * What `Cascade.shapeStyles` keeps for the drawings of one build of the
+ * boxes (`BoxTree.shapeCopies`): the document's elements by their ids, and
+ * what the rules matched in the copy of each element a `<use>` names —
+ * the same whichever `<use>` makes it, so a page of hundreds of icons from
+ * one sprite matches each symbol once — and what that comes to for a
+ * drawing of each style. A build is made again whenever the document, its
+ * style sheets or a viewport a value reads change, and a pointer move
+ * changes nothing a copy is matched by: nothing in one is under the
+ * pointer, and a drawing whose style it changes has another style.
+ */
+export class ShapeCopies {
+  /** @internal */
+  readonly matched = new Map<Element, CopyMatch>();
+  /** @internal What each copy comes to for a drawing of a style, and the
+   *  key that names it. */
+  readonly resolved = new WeakMap<
+    ComputedStyle,
+    Map<Element, { into: Map<Element, ShapeStyle> | null; key: string }>
+  >();
+  constructor(readonly byId: (id: string) => Element | null) {}
+}
+
+/** What the rules asked of every element of a drawing, or of every one of
+ *  a type, ask of its ancestors (`Cascade.shapeStyles`). */
+interface ShapeNeeds {
+  /** The classes and the ids some such rule names in an ancestor. */
+  classes: Set<string>;
+  ids: Set<string>;
+  /** Whether a rule asked of every element asks nothing of its ancestors,
+   *  and the types with such a rule. */
+  universal: boolean;
+  tags: Set<string>;
+}
+
 function balancedEnd(
   text: string,
   from: number,
@@ -707,6 +867,138 @@ export interface PointerState {
 
 const NO_POINTER: PointerState = { hovered: new Set(), active: new Set() };
 
+/** Where the focus is, for `:focus` and its kin: the element whose widget
+ *  holds it, whether that shows (`:focus-visible`), and the element with
+ *  every element around it (`:focus-within`). No element of a document
+ *  takes the focus itself; a control's widget, mounted beside it, does. */
+export interface FocusState {
+  element: Element | null;
+  visible: boolean;
+  within: ReadonlySet<Element>;
+}
+
+export const NO_FOCUS: FocusState = {
+  element: null,
+  visible: false,
+  within: new Set(),
+};
+
+/**
+ * What the selectors that test one state — the pointer, or the focus — say
+ * of the elements a change of it can restyle: the compounds that test it,
+ * each without it and with whether a sibling combinator follows it, and
+ * the anchors of the `:has()`s that test it (`pointerCompounds`).
+ */
+class StateRules {
+  /** The compounds, each without the state, and their matchers, compiled
+   *  when a change first asks (`touches`). */
+  private _compounds = new Map<string, boolean>();
+  private _matchers:
+    { match: (el: Element) => boolean; followed: boolean }[] | null = null;
+  /** Whether a change can be restyled where it happened
+   *  (`HtmlViewNode._hoverInPlace`): false where a selector tests the
+   *  state inside a functional pseudo-class, which reaches elements no
+   *  compound names. */
+  local = true;
+  /** The compounds whose `:has()` tests the state, each without it,
+   *  whether its argument starts at a sibling, and whether a sibling
+   *  combinator follows it (`anchors`). */
+  private _anchors = new Map<
+    string,
+    { siblings: boolean; followed: boolean }
+  >();
+  private _anchorMatchers:
+    | {
+        match: (el: Element) => boolean;
+        siblings: boolean;
+        followed: boolean;
+      }[]
+    | null = null;
+
+  constructor(private readonly _kind: StateKind) {}
+
+  note(selector: string): void {
+    if (!this._kind.mentions.test(selector)) return;
+    const found = pointerCompounds(selector, this._kind);
+    if (found.nested) this.local = false;
+    const followed = new Set(found.followed);
+    for (const c of found.compounds) {
+      this._compounds.set(
+        c,
+        followed.has(c) || (this._compounds.get(c) ?? false),
+      );
+    }
+    for (const { anchor, siblings } of found.has) {
+      const was = this._anchors.get(anchor);
+      this._anchors.set(anchor, {
+        siblings: siblings || (was?.siblings ?? false),
+        followed: followed.has(anchor) || (was?.followed ?? false),
+      });
+    }
+  }
+
+  /** `Cascade.hoverTouches`, for this state. */
+  touches(
+    el: Element,
+    compile: (selector: string) => ((el: Element) => boolean) | null,
+  ): HoverTouch {
+    // the followed ones first, so the first that matches is the answer
+    this._matchers ??= [...this._compounds]
+      .sort(([, a], [, b]) => Number(b) - Number(a))
+      .flatMap(([compound, followed]) => {
+        const match = compile(compound);
+        return match ? [{ match, followed }] : [];
+      });
+    for (const { match, followed } of this._matchers) {
+      if (match(el)) return followed ? HOVER_FOLLOWED : HOVER_TOUCHED;
+    }
+    return HOVER_UNTOUCHED;
+  }
+
+  /** `Cascade.hoverAnchors`, for this state. */
+  anchors(
+    el: Element,
+    into: Map<Element, HoverTouch>,
+    compile: (selector: string) => ((el: Element) => boolean) | null,
+  ): void {
+    if (!this._anchors.size) return;
+    this._anchorMatchers ??= [...this._anchors]
+      .sort(([, a], [, b]) => Number(b.followed) - Number(a.followed))
+      .flatMap(([anchor, { siblings, followed }]) => {
+        const match = compile(anchor);
+        return match ? [{ match, siblings, followed }] : [];
+      });
+    const note = (at: Element, followed: boolean): void => {
+      if (followed) into.set(at, HOVER_FOLLOWED);
+      else if (!into.has(at)) into.set(at, HOVER_TOUCHED);
+    };
+    const siblings = this._anchorMatchers.some((m) => m.siblings);
+    for (let at: Element | null = el; at;) {
+      if (at !== el) {
+        for (const { match, followed } of this._anchorMatchers) {
+          if (match(at)) {
+            note(at, followed);
+            break;
+          }
+        }
+      }
+      if (siblings) {
+        for (let s = at.prev; s; s = s.prev) {
+          if (!isTag(s as Element)) continue;
+          for (const m of this._anchorMatchers) {
+            if (m.siblings && m.match(s as Element)) {
+              note(s as Element, m.followed);
+              break;
+            }
+          }
+        }
+      }
+      const parent: Element['parent'] = at.parent;
+      at = parent && isTag(parent as Element) ? (parent as Element) : null;
+    }
+  }
+}
+
 /**
  * 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
@@ -763,33 +1055,31 @@ export class Cascade {
     marker: new RuleIndex(),
     selection: new RuleIndex(),
   };
+  /** The author's rules that could style a shape in a drawing: the ones
+   *  that declare a property a shape has (`shapes.ts`) and whose subject
+   *  is no element of HTML's alone. They are in `_index` too, for the
+   *  elements that have boxes; these are asked of the ones in an inline
+   *  `<svg>`, which have none (`shapeStyles`). */
+  private _shapes = new RuleIndex();
+  private _shapeNeeds: ShapeNeeds | null = null;
   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 Map<string, boolean>();
-  private _hoverMatchers:
-    { match: (el: Element) => boolean; followed: 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;
-  /** The compounds whose `:has()` tests the pointer, each without it,
-   *  whether its argument starts at a sibling, and whether a sibling
-   *  combinator follows it (`hoverAnchors`). */
-  private _hoverAnchors = new Map<
-    string,
-    { siblings: boolean; followed: boolean }
-  >();
-  private _anchorMatchers:
-    | {
-        match: (el: Element) => boolean;
-        siblings: boolean;
-        followed: boolean;
-      }[]
-    | null = null;
+  /**
+   * The tree a `<use>`'s copy is in, for `_copyAdapter`: the element it is
+   * a copy of, which is its top (`ShapeStyles.used`). A copy is its own
+   * tree, a shadow tree of the `<use>`'s (SVG 2, 5.5.1), so a selector is
+   * matched against its original with nothing above that element and
+   * nothing beside it — the top of a copy is its tree's first child and
+   * its last, whichever of its parent's it is. And nothing in it is under
+   * the pointer, as nothing in a drawing is: it has no box to be.
+   */
+  private _copyTop: Element | null = null;
+  private _copyAdapter: CssSelectAdapter;
+  /** What the selectors that test the pointer, and the ones that test the
+   *  focus, say of the elements a change of it reaches. */
+  private _hoverRules = new StateRules(HOVER_STATE);
+  private _focusRules = new StateRules(FOCUS_STATE);
   private _pointer: PointerState = NO_POINTER;
+  private _focus: FocusState = NO_FOCUS;
   readonly initial: ComputedStyle;
   readonly look: RootLook;
   /** Viewport width the media queries were evaluated at, in device pixels
@@ -837,6 +1127,18 @@ export class Cascade {
   /** 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;
+  /** The pseudo-classes css-select is handed: `:root` this cascade's, and
+   *  the focus's three answered from `_focus`. */
+  private _pseudos: typeof PSEUDOS;
+  /** The colour schemes the page says it supports with a `<meta
+   *  name="color-scheme">` (HTML 4.2.5.4), which its root element takes
+   *  as it takes a presentational attribute: under any rule that sets its
+   *  `color-scheme`. Set by the box builder from the document. */
+  pageColorScheme: string | null = null;
+  /** Each system colour as the `light-dark()` it is: the palette's where
+   *  the element's scheme is the palette's, and Chrome's in an SVG image,
+   *  which has none. */
+  private _systemColors: Map<string, string>;
 
   constructor(
     sheets: Stylesheet[],
@@ -848,7 +1150,26 @@ export class Cascade {
     zeroWidth: FaceMetric | null = null,
     normalLine: FaceMetric | null = null,
     families: FontFamilies | null = null,
+    /** The document's element where it is not an `<html>`: an SVG image's
+     *  `<svg>`, which is `:root` there (Selectors 4, 14.1). */
+    documentElement: Element | null = null,
+    /** The element the document's URL names by its fragment, which is
+     *  `:target` (Selectors 4, 9.1): an SVG image's, `image.svg#icon`. */
+    target: Element | null = null,
   ) {
+    // css-select has none of the focus's three, and a pseudo-class is
+    // handed only the element, so they are this cascade's own closures
+    this._pseudos = {
+      ...PSEUDOS,
+      ...(documentElement && {
+        root: (el: Element) => el === documentElement,
+      }),
+      ...(target && { target: (el: Element) => el === target }),
+      focus: (el: Element) => this._focus.element === el,
+      'focus-visible': (el: Element) =>
+        this._focus.visible && this._focus.element === el,
+      'focus-within': (el: Element) => this._focus.within.has(el),
+    };
     this._xHeightOf = xHeight;
     this._zeroWidthOf = zeroWidth;
     this._normalLineOf = normalLine;
@@ -857,6 +1178,7 @@ export class Cascade {
       ? (list: string) => families.map(list)
       : undefined;
     this.look = look;
+    this._systemColors = systemColorTable(documentElement ? null : look);
     this.initial = initialStyle(look, scale);
     this.viewportWidth = viewportWidth;
     this.viewportHeight = viewportHeight;
@@ -875,8 +1197,20 @@ export class Cascade {
         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);
+        else {
+          const key = rightmostKey(rule.selector);
+          this._index.add(rule, key);
+          if (
+            rule.order >= 0 &&
+            (key.kind !== 'tag' || SHAPE_TAGS.has(key.name)) &&
+            declaresShape(rule.declarations)
+          ) {
+            this._shapes.add(rule, key);
+          }
+        }
+        const selector = (pseudo?.rule ?? rule).selector;
+        this._hoverRules.note(selector);
+        this._focusRules.note(selector);
       }
       for (const bp of sheet.breakpoints) breakpoints.add(bp);
       // a query on the viewport's height reads it as a `vh` does
@@ -904,6 +1238,16 @@ export class Cascade {
       isActive: (el: Element) => this._pointer.active.has(el),
       isVisited: () => false,
     };
+    this._copyAdapter = {
+      ...this._adapter,
+      getParent: (el) => (el === this._copyTop ? null : DomUtils.getParent(el)),
+      getSiblings: (el) =>
+        el === this._copyTop ? [el] : DomUtils.getSiblings(el),
+      prevElementSibling: (el) =>
+        el === this._copyTop ? null : DomUtils.prevElementSibling(el),
+      isHovered: () => false,
+      isActive: () => false,
+    };
   }
 
   /** Whether declarations read the viewport's width or height (`vw`,
@@ -936,6 +1280,36 @@ export class Cascade {
     this._pointer = pointer;
   }
 
+  /** Whether a widget taking the focus or giving it up can change what this
+   *  cascade produces. */
+  get focusSensitive(): boolean {
+    return (
+      this._index.focusSensitive ||
+      this._pseudo.before.focusSensitive ||
+      this._pseudo.after.focusSensitive ||
+      this._pseudo['first-letter'].focusSensitive ||
+      this._pseudo['first-line'].focusSensitive ||
+      this._pseudo.marker.focusSensitive
+    );
+  }
+
+  setFocus(focus: FocusState): void {
+    this._focus = focus;
+  }
+
+  /** 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. */
+  get hoverLocal(): boolean {
+    return this._hoverRules.local;
+  }
+
+  /** …and a focus change. */
+  get focusLocal(): boolean {
+    return this._focusRules.local;
+  }
+
   /**
    * Which pseudo-elements' rules test the pointer: none's
    * (`HOVER_PSEUDO_NONE`); a `::before`'s or an `::after`'s only
@@ -945,15 +1319,23 @@ export class Cascade {
    * move cannot.
    */
   get hoverPseudo(): 0 | 1 | 2 {
+    return this._pseudoRules('hoverSensitive');
+  }
+
+  /** …and which test the focus. */
+  get focusPseudo(): 0 | 1 | 2 {
+    return this._pseudoRules('focusSensitive');
+  }
+
+  private _pseudoRules(state: 'hoverSensitive' | 'focusSensitive'): 0 | 1 | 2 {
     if (
-      this._pseudo['first-letter'].hoverSensitive ||
-      this._pseudo['first-line'].hoverSensitive ||
-      this._pseudo.marker.hoverSensitive
+      this._pseudo['first-letter'][state] ||
+      this._pseudo['first-line'][state] ||
+      this._pseudo.marker[state]
     ) {
       return HOVER_PSEUDO_OTHER;
     }
-    return this._pseudo.before.hoverSensitive ||
-      this._pseudo.after.hoverSensitive
+    return this._pseudo.before[state] || this._pseudo.after[state]
       ? HOVER_PSEUDO_GENERATED
       : HOVER_PSEUDO_NONE;
   }
@@ -969,17 +1351,13 @@ export class Cascade {
    * table restyle the rows after it.
    */
   hoverTouches(el: Element): HoverTouch {
-    // the followed ones first, so the first that matches is the answer
-    this._hoverMatchers ??= [...this._hoverCompounds]
-      .sort(([, a], [, b]) => Number(b) - Number(a))
-      .flatMap(([compound, followed]) => {
-        const match = this._compile(compound);
-        return match ? [{ match, followed }] : [];
-      });
-    for (const { match, followed } of this._hoverMatchers) {
-      if (match(el)) return followed ? HOVER_FOLLOWED : HOVER_TOUCHED;
-    }
-    return HOVER_UNTOUCHED;
+    return this._hoverRules.touches(el, (selector) => this._compile(selector));
+  }
+
+  /** `hoverTouches` for the focus: whether `el` taking the focus or giving
+   *  it up, or its `:focus-within` changing, can change a style. */
+  focusTouches(el: Element): HoverTouch {
+    return this._focusRules.touches(el, (selector) => this._compile(selector));
   }
 
   /**
@@ -991,68 +1369,19 @@ export class Cascade {
    * siblings can change with it (`hoverTouches`).
    */
   hoverAnchors(el: Element, into: Map<Element, HoverTouch>): void {
-    if (!this._hoverAnchors.size) return;
-    this._anchorMatchers ??= [...this._hoverAnchors]
-      .sort(([, a], [, b]) => Number(b.followed) - Number(a.followed))
-      .flatMap(([anchor, { siblings, followed }]) => {
-        const match = this._compile(anchor);
-        return match ? [{ match, siblings, followed }] : [];
-      });
-    const note = (at: Element, followed: boolean): void => {
-      if (followed) into.set(at, HOVER_FOLLOWED);
-      else if (!into.has(at)) into.set(at, HOVER_TOUCHED);
-    };
-    const siblings = this._anchorMatchers.some((m) => m.siblings);
-    for (let at: Element | null = el; at;) {
-      if (at !== el) {
-        for (const { match, followed } of this._anchorMatchers) {
-          if (match(at)) {
-            note(at, followed);
-            break;
-          }
-        }
-      }
-      if (siblings) {
-        for (let s = at.prev; s; s = s.prev) {
-          if (!isTag(s as Element)) continue;
-          for (const m of this._anchorMatchers) {
-            if (m.siblings && m.match(s as Element)) {
-              note(s as Element, m.followed);
-              break;
-            }
-          }
-        }
-      }
-      const parent: Element['parent'] = at.parent;
-      at = parent && isTag(parent as Element) ? (parent as Element) : null;
-    }
+    this._hoverRules.anchors(el, into, (selector) => this._compile(selector));
   }
 
-  private _noteHover(selector: string): void {
-    if (!/:(?:hover|active)/i.test(selector)) return;
-    const found = pointerCompounds(selector);
-    if (found.nested) this.hoverLocal = false;
-    const followed = new Set(found.followed);
-    for (const c of found.compounds) {
-      this._hoverCompounds.set(
-        c,
-        followed.has(c) || (this._hoverCompounds.get(c) ?? false),
-      );
-    }
-    for (const { anchor, siblings } of found.has) {
-      const was = this._hoverAnchors.get(anchor);
-      this._hoverAnchors.set(anchor, {
-        siblings: siblings || (was?.siblings ?? false),
-        followed: followed.has(anchor) || (was?.followed ?? false),
-      });
-    }
+  /** `hoverAnchors` for the focus: `form:has(input:focus)`'s form. */
+  focusAnchors(el: Element, into: Map<Element, HoverTouch>): void {
+    this._focusRules.anchors(el, into, (selector) => this._compile(selector));
   }
 
   /** 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);
+      return compileSelector(selector, this._adapter, this._pseudos);
     } catch {
       return null;
     }
@@ -1221,6 +1550,11 @@ export class Cascade {
       if (this._pointer.hovered.has(el)) key += '\u0001:hover';
       if (this._pointer.active.has(el)) key += '\u0001:active';
     }
+    // `:focus-within` is not shared under (`UNSHAREABLE`), and the focus
+    // is on one element
+    if (this._focus.element === el && this._index.focusSensitive) {
+      key += this._focus.visible ? '\u0001:focus-visible' : '\u0001:focus';
+    }
     const attribs = el.attribs;
     for (const name in attribs) {
       const value = attribs[name];
@@ -1543,6 +1877,8 @@ export class Cascade {
       families: this._mapFamilies,
       lh: () => this._lineHeightOf(parentStyle),
       rlh: () => this._lineHeightOf(rootStyle),
+      focusRing: this.look.focusRing,
+      systemColors: this._systemColors,
     };
     // 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
@@ -1658,7 +1994,9 @@ export class Cascade {
       style.alignBlocks = null;
     }
     settleClamp(style, parentStyle);
+    settleAlign(style, parentStyle);
     settleOverflow(style);
+    settleOutline(style, this.look, this.scale);
     settleContentVisibility(style);
     blockify(style, inFlexContainer);
     // a button is laid out as one, whatever `display` it was given
@@ -1743,6 +2081,306 @@ export class Cascade {
     return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
   }
 
+  /** Whether any rule could style a shape in a drawing: a document with
+   *  none asks nothing of its drawings (`shapeStyles`). */
+  get stylesShapes(): boolean {
+    return this._shapes.size > 0;
+  }
+
+  /** Whether a pointer move can change what a rule gives a shape in a
+   *  drawing. */
+  get shapesFollowPointer(): boolean {
+    return this._shapes.hoverSensitive;
+  }
+
+  /**
+   * What the rules give the elements of an inline drawing, `root` and what
+   * is in it, or null where none reaches one: the narrow cascade of
+   * `shapes.ts`. `style` is the root's computed style — its `color`, its
+   * custom properties and its font size are what a value in the drawing is
+   * read against, as though every element in it had inherited them, which
+   * all but one a rule gives its own has.
+   *
+   * An element's rules and its `style` attribute are put in cascade order,
+   * and each property is the last valid declaration's. The presentation
+   * attributes are below them all (SVG 2, 6.2), and `SvgView` reads those
+   * itself. The root's box has its paint, its opacity and whether it is
+   * shown from its computed style, so those are left out for it.
+   *
+   * What a `<use>` draws is a copy, styled in a tree of its own
+   * (`ShapeStyles.used`): the element it names is looked for as `copyTree`
+   * looks — the drawing's own first, then the document's — and what is in
+   * it asked of where it stands in that tree, once a build for all the
+   * `<use>`s that name it (`ShapeCopies`). An icon sprite's `<symbol>`,
+   * outside the drawing in a hidden `<svg>` of them, is styled that way,
+   * and so is one of the drawing's own.
+   *
+   * Asked as a drawing is first painted (`BoxTree.shapeStyler`), of the
+   * rules in `_shapes` alone: a page of hundreds of icons pays for the ones
+   * it shows, a look in the buckets for each of their elements where no
+   * rule reaches them, and a document with no such rule nothing.
+   */
+  shapeStyles(
+    root: Element,
+    style: ComputedStyle,
+    copies: ShapeCopies | null = null,
+  ): ShapeStyles | null {
+    const index = this._shapes;
+    if (!index.size) return null;
+    // The rules kept by a class or an id are asked of the elements with
+    // that name. The rest — `.dark .logo path`, `.menu [aria-hidden]` — are
+    // asked of every `<path>`, or of every element, and nearly all of them
+    // are for some other part of the page: each says so by the class or the
+    // id it asks of an ancestor, which is looked for once for the drawing,
+    // around it and in it, where matching the rule would look for it from
+    // each of its elements. On a page with none of them around a drawing,
+    // nothing is matched at all. A copy's tree has nothing around it.
+    const needs = (this._shapeNeeds ??= this._needsOfShapes());
+    let found = new Set<string>();
+    const asks = needs.classes.size > 0 || needs.ids.size > 0;
+    const note = (el: Element): void => {
+      if (needs.ids.size) {
+        const id = attr(el, 'id');
+        if (id && needs.ids.has(id)) found.add(`#${id}`);
+      }
+      if (needs.classes.size) {
+        const className = attr(el, 'class');
+        if (className) {
+          for (const name of className.split(/\s+/)) {
+            if (needs.classes.has(name)) found.add(`.${name}`);
+          }
+        }
+      }
+    };
+    if (asks) {
+      let at = root.parent;
+      while (at && at.type === 'tag') {
+        note(at as Element);
+        at = at.parent;
+      }
+    }
+    const live = (indexed: IndexedRule): boolean => {
+      const keys = indexed.needs;
+      if (keys) for (const key of keys) if (!found.has(key)) return false;
+      return true;
+    };
+    // The root's box has its paint from its computed style, so most of the
+    // rules that name a drawing by its class — an icon set's — have
+    // nothing else to say of it.
+    const liveForRoot = (indexed: IndexedRule): boolean =>
+      (indexed.root ??= declaresRootShape(indexed.rule.declarations)) &&
+      live(indexed);
+
+    /** The elements under `top` and it, in document order, the top first:
+     *  its ancestors are noted before an element is asked of. Each with
+     *  the rules it matched, in cascade order, where it matched any. */
+    const walk = (
+      top: Element,
+      inCopy: boolean,
+      each: (el: Element, candidates: Candidate[] | null) => void,
+    ): void => {
+      const stack: Element[] = [top];
+      while (stack.length) {
+        const el = stack.pop()!;
+        // what is in a `<foreignObject>` is not the drawing's to draw
+        if (el.name !== 'foreignobject' && el.name !== 'foreignObject') {
+          const children = el.children;
+          for (let i = children.length - 1; i >= 0; i -= 1) {
+            const child = children[i];
+            if (child.type === 'tag') stack.push(child as Element);
+          }
+        }
+        if (asks) note(el);
+        const tag = tagOf(el);
+        const asked = found.size
+          ? index.universal.length > 0 || index.byTag.has(tag)
+          : needs.universal || needs.tags.has(tag);
+        if (!asked && !index.names(el)) {
+          each(el, null);
+          continue;
+        }
+        const candidates: Candidate[] = [];
+        this._matchInto(
+          index,
+          el,
+          candidates,
+          undefined,
+          el === root && !inCopy ? liveForRoot : live,
+          inCopy,
+        );
+        if (candidates.length) {
+          const inline = attr(el, 'style');
+          if (inline) pushInlineShapes(candidates, inline);
+          candidates.sort(byCascade);
+        }
+        each(el, candidates.length ? candidates : null);
+      }
+    };
+
+    let ctx: ShapeContext | null = null;
+    /** What an element's rules come to, against the drawing's style. */
+    const resolve = (
+      candidates: Candidate[],
+      isRoot: boolean,
+    ): Record<string, string> | null => {
+      ctx ??= {
+        color: style.color,
+        scheme: style.colorScheme,
+        units: {
+          em: style.fontSize,
+          rem: (this._root ?? this.initial).fontSize,
+          vw: this.viewportWidth,
+          vh: this.viewportHeight,
+          scale: this.scale,
+          initial: this.initial,
+          systemColors: this._systemColors,
+        },
+      };
+      let own: Record<string, string> | null = null;
+      for (const c of candidates) {
+        for (const d of pick(c)) {
+          if (!isShapeProp(d.prop)) continue;
+          if (isRoot && ROOT_BOX_PROPS.has(d.prop)) continue;
+          // a `var()` with nothing to stand for it is invalid at
+          // computed-value time, and the property as though `unset`
+          const value = shapeValue(
+            d.prop,
+            d.vars ? (substituteIn(d.value, style.custom) ?? 'unset') : d.value,
+            ctx,
+          );
+          if (value !== null) (own ??= {})[d.prop] = value;
+        }
+      }
+      return own;
+    };
+    // an element's place in the walks is what the key names it by
+    let key = '';
+    let place = -1;
+    const named = (own: Record<string, string>, at: number): string => {
+      let part = `${at}{`;
+      for (const prop in own) part += `${prop}:${own[prop]};`;
+      return `${part}}`;
+    };
+
+    // (made as they are first needed: most drawings need none of them)
+    let of = null as Map<Element, ShapeStyle> | null;
+    // the `<use>`s met, and the drawing's own elements by their ids, which
+    // one looks in first
+    let uses = null as Element[] | null;
+    let ids = null as Map<string, Element> | null;
+    walk(root, false, (el, candidates) => {
+      place += 1;
+      if (isUse(el)) (uses ??= []).push(el);
+      if (el !== root) {
+        const id = el.attribs.id;
+        if (id && !ids?.has(id)) (ids ??= new Map()).set(id, el);
+      }
+      const own = candidates && resolve(candidates, el === root);
+      if (!own) return;
+      (of ??= new Map()).set(el, own);
+      key += named(own, place);
+    });
+    if (!uses) return of ? { of, used: null, key } : null;
+
+    // Each element a `<use>` names, in the tree of its copy: once however
+    // many name it, and one a copy's `<use>` names in turn, however deep —
+    // `copyTree` stops at a depth, and a `<use>` that names what it is in
+    // finds it being walked. What is matched there is the same for every
+    // drawing, and kept for the build (`ShapeCopies`); what it comes to is
+    // the drawing's, since every property the copy inherits is the
+    // `<use>`'s, and its custom properties and its colour are the
+    // drawing's, as they are for the rest of it — kept too, for each
+    // style a drawing has, which the icons of a page mostly share.
+    const byId = copies?.byId ?? ((id: string) => elementById(root, id));
+    const matched = copies?.matched ?? new Map<Element, CopyMatch>();
+    let styled = copies?.resolved.get(style);
+    if (!styled) {
+      styled = new Map();
+      copies?.resolved.set(style, styled);
+    }
+    const match = (target: Element): CopyMatch => {
+      let copy = matched.get(target);
+      if (copy) return copy;
+      const rules: CopyMatch['rules'] = [];
+      const inner: Element[] = [];
+      let size = 0;
+      found = new Set();
+      this._copyTop = target;
+      try {
+        walk(target, true, (el, candidates) => {
+          if (isUse(el)) inner.push(el);
+          if (candidates) rules.push({ el, at: size, candidates });
+          size += 1;
+        });
+      } finally {
+        this._copyTop = null;
+      }
+      copy = { rules, size, uses: inner };
+      matched.set(target, copy);
+      return copy;
+    };
+    let used: Map<Element, ReadonlyMap<Element, ShapeStyle>> | null = null;
+    let made: Set<Element> | null = null;
+    for (let i = 0; i < uses.length; i += 1) {
+      const use = uses[i];
+      const id = useHref(use);
+      if (id === null) continue;
+      const target = ids?.get(id) ?? byId(id);
+      if (!target) continue;
+      const copy = match(target);
+      let done = styled.get(target);
+      if (!done) {
+        let into: Map<Element, ShapeStyle> | null = null;
+        let part = '';
+        for (const { el, at, candidates } of copy.rules) {
+          const own = resolve(candidates, false);
+          if (!own) continue;
+          (into ??= new Map()).set(el, own);
+          part += named(own, at);
+        }
+        done = { into, key: part };
+        styled.set(target, done);
+      }
+      if (!made?.has(target)) {
+        (made ??= new Set()).add(target);
+        for (const next of copy.uses) uses.push(next);
+        // its place in the key is after what came before it
+        if (done.key) key += `@${place + 1}:${done.key}`;
+        place += copy.size;
+      }
+      if (done.into) (used ??= new Map()).set(use, done.into);
+    }
+    return of || used ? { of: of ?? NO_SHAPES, used, key } : null;
+  }
+
+  /** `ShapeNeeds`, and each such rule's own (`IndexedRule.needs`). */
+  private _needsOfShapes(): ShapeNeeds {
+    const index = this._shapes;
+    const needs: ShapeNeeds = {
+      classes: new Set(),
+      ids: new Set(),
+      universal: false,
+      tags: new Set(),
+    };
+    const read = (bucket: IndexedRule[]): boolean => {
+      let free = false;
+      for (const indexed of bucket) {
+        const keys = ancestorKeys(indexed.rule.selector);
+        indexed.needs = keys;
+        if (!keys.length) free = true;
+        for (const key of keys) {
+          (key[0] === '#' ? needs.ids : needs.classes).add(key.slice(1));
+        }
+      }
+      return free;
+    };
+    needs.universal = read(index.universal);
+    for (const [tag, bucket] of index.byTag) {
+      if (read(bucket)) needs.tags.add(tag);
+    }
+    return needs;
+  }
+
   /**
    * Whether the pointer's move from `was` to where it is changed which
    * rules match `el`, or its `::before`, `::after` or another of its
@@ -1750,19 +2388,27 @@ export class Cascade {
    * nothing else, since no other rule's answer is the pointer's. An element
    * they answer the same for, under a parent whose style is what it was, has
    * the style it had — which is most of what a move reaches: the rows of a
-   * hovered table body, what is in a hovered card.
+   * hovered table body, what is in a hovered card. The focus's move from
+   * `wasFocus` likewise, the rules that test it asked under both.
    */
-  pointerChanged(el: Element, was: PointerState): boolean {
+  pointerChanged(
+    el: Element,
+    was: PointerState,
+    wasFocus: FocusState = this._focus,
+  ): boolean {
     const now = this._pointer;
+    const nowFocus = this._focus;
     const after = this._pointerAnswers(el);
     this._pointer = was;
+    this._focus = wasFocus;
     const before = this._pointerAnswers(el);
     this._pointer = now;
+    this._focus = nowFocus;
     return before !== after;
   }
 
-  /** The ids of the rules testing the pointer that match `el` as things
-   *  stand, the element's and each pseudo-element's. */
+  /** The ids of the rules testing the pointer or the focus that match
+   *  `el` as things stand, the element's and each pseudo-element's. */
   private _pointerAnswers(el: Element): string {
     let answers = '';
     const ask = (index: RuleIndex, name: string): void => {
@@ -1785,6 +2431,11 @@ export class Cascade {
     el: Element,
     out: Candidate[] | null,
     matched?: number[],
+    /** The rules to try, where some are known not to match without it. */
+    live?: (indexed: IndexedRule) => boolean,
+    /** Whether `el` is matched where a `<use>` draws a copy of it
+     *  (`_copyTop`). */
+    inCopy = false,
   ): void {
     // A media query's width is CSS pixels; the viewport is kept in device.
     const width = this.viewportWidth / this.scale;
@@ -1793,6 +2444,7 @@ export class Cascade {
     const consider = (bucket: IndexedRule[] | undefined): void => {
       if (!bucket) return;
       for (const indexed of bucket) {
+        if (live !== undefined && !live(indexed)) continue;
         const rule = indexed.rule;
         if (
           !mediaMatches(
@@ -1805,18 +2457,43 @@ export class Cascade {
         ) {
           continue;
         }
-        if (!indexed.compiled) {
-          indexed.compiled = true;
-          try {
-            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
-            // the render.
-            indexed.match = null;
+        let match: ((el: Element) => boolean) | null;
+        if (inCopy) {
+          if (!indexed.inCopyCompiled) {
+            indexed.inCopyCompiled = true;
+            try {
+              // what it finds above an element depends on which copy it is
+              // in, so none of it is kept
+              indexed.inCopy = compileSelector(
+                rule.selector,
+                this._copyAdapter,
+                this._pseudos,
+                false,
+              );
+            } catch {
+              indexed.inCopy = null;
+            }
+          }
+          match = indexed.inCopy;
+        } else {
+          if (!indexed.compiled) {
+            indexed.compiled = true;
+            try {
+              indexed.match = compileSelector(
+                rule.selector,
+                this._adapter,
+                this._pseudos,
+              );
+            } 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 the render.
+              indexed.match = null;
+            }
           }
+          match = indexed.match;
         }
-        if (!indexed.match || !indexed.match(el)) continue;
+        if (!match || !match(el)) continue;
         matched?.push(indexed.id);
         if (out === null) continue;
         const origin = rule.order < 0 ? Origin.UserAgent : Origin.Author;
@@ -1844,6 +2521,18 @@ export class Cascade {
     this._matchInto(this._index, el, out, matched);
 
     const hints = presentationHints(el);
+    // the page's colour schemes are its root's where no rule sets them
+    if (
+      this.pageColorScheme &&
+      el.name === 'html' &&
+      !(el.parent && isTag(el.parent as Element))
+    ) {
+      hints.push({
+        prop: 'color-scheme',
+        value: this.pageColorScheme,
+        important: false,
+      });
+    }
     if (hints.length) {
       out.push({
         origin: Origin.Presentation,
@@ -1908,9 +2597,18 @@ function dropPaletteChrome(out: Candidate[]): void {
   }
   if (!chrome) return;
   let styled = false;
+  // `appearance` by the value that wins: `appearance: none; appearance:
+  // auto` keeps the control's look, as a reset a page takes back does
+  let appearance = '';
   for (let j = i; j < out.length && !styled; j += 1) {
-    styled = pick(out[j]).some(stylesChrome);
+    for (const d of pick(out[j])) {
+      if (d.prop === 'appearance' || d.prop === '-webkit-appearance') {
+        const v = d.value.trim().toLowerCase();
+        if (/^[a-z-]+$/.test(v)) appearance = v;
+      } else if (stylesChrome(d)) styled = true;
+    }
   }
+  if (appearance === 'none') styled = true;
   if (!styled) return;
   let kept = 0;
   for (const c of out) {
@@ -1923,8 +2621,9 @@ function dropPaletteChrome(out: Candidate[]): void {
 }
 
 /** Whether a declaration styles what a control's native look draws: Blink's
- *  `is_background` and `is_border` properties and their shorthands, and an
- *  `appearance` of `none`. */
+ *  `is_background` and `is_border` properties and their shorthands. An
+ *  `appearance` of `none` does too, where it is the one that wins
+ *  (`dropPaletteChrome`). */
 function stylesChrome(d: Declaration): boolean {
   const prop = d.prop;
   if (prop.startsWith('background')) {
@@ -1933,10 +2632,7 @@ function stylesChrome(d: Declaration): boolean {
   if (prop.startsWith('border')) {
     return prop !== 'border-collapse' && prop !== 'border-spacing';
   }
-  return (
-    (prop === 'appearance' || prop === '-webkit-appearance') &&
-    d.value.trim().toLowerCase() === 'none'
-  );
+  return false;
 }
 
 /** An implied element's style as the root box's: its look, not its role —
@@ -1952,18 +2648,22 @@ function asRoot(style: ComputedStyle): ComputedStyle {
  *  fragment, whose style the root box takes (`rootStyle`), and never a
  *  fragment's top-level elements, which css-select would take for it.
  *
- *  `:focus` and its two kin match nothing: no element of the document takes
- *  the focus — a control's widget does, beside it. css-select has none of
- *  the three and throws on them, which dropped every rule that named one,
- *  `:not(:focus)` among them: Wikipedia's skip link hides with
- *  `.mw-jump-link:not(:focus)`, and without it stood in the flow at the top
- *  of every page. */
+ *  `:focus` and its two kin are here as matching nothing, and each cascade
+ *  answers them from where the focus is (`Cascade.setFocus`): no element
+ *  of the document takes it itself — a control's widget does, beside it.
+ *  css-select has none of the three and throws on them, which dropped
+ *  every rule that named one, `:not(:focus)` among them: Wikipedia's skip
+ *  link hides with `.mw-jump-link:not(:focus)`, and without it stood in
+ *  the flow at the top of every page. */
 const PSEUDOS = {
   root: (el: Element) =>
     el.name === 'html' && !(el.parent && isTag(el.parent as Element)),
-  focus: () => false,
-  'focus-visible': () => false,
-  'focus-within': () => false,
+  focus: (_el: Element) => false,
+  'focus-visible': (_el: Element) => false,
+  'focus-within': (_el: Element) => false,
+  // css-select has none, and threw on one, so `:not(:target)` matched
+  // nothing: a document is drawn at no fragment, an SVG image at its own
+  target: (_el: Element) => false,
   // 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)`
@@ -1973,28 +2673,32 @@ const PSEUDOS = {
       .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('-');
+    const value = languageOf(el);
+    if (!value) return ranges.some((range) => range[0] === '');
+    const tag = asciiLower(value).split('-');
     return ranges.some((range) => langRangeMatches(tag, range));
   },
 };
 
+/**
+ * An element's language: the `lang` or `xml:lang` of the nearest element
+ * from it up that says one, or with none saying, the document's, as its
+ * `<meta http-equiv="content-language">` sets it — searched from the
+ * document, where a fragment's `<meta>` is a sibling of what it covers.
+ * '' where none does, or the nearest says ''.
+ */
+export function languageOf(el: Element): string {
+  let root = el;
+  for (let node: Element | null = el; node;) {
+    const value = node.attribs['xml:lang'] ?? node.attribs.lang;
+    if (value != null) return value;
+    root = node;
+    const parent: Element['parent'] = node.parent;
+    node = parent && isTag(parent as Element) ? (parent as Element) : null;
+  }
+  return pragmaLanguage(root.parent ?? root);
+}
+
 /** 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[sld]?v(?:w|h|i|b|min|max)(?![\w-])/i;
@@ -2050,6 +2754,33 @@ function pragmaLanguage(root: { children: unknown[] }): string {
 
 const PRAGMA_LANGUAGE = new WeakMap<object, string>();
 
+/**
+ * The page's supported colour schemes: the content of the first `<meta
+ * name="color-scheme">` that is a `color-scheme` value (HTML 4.2.5.4), or
+ * null. Looked for where a `<meta>` is, at the top of a fragment and in
+ * the `<html>` and its `<head>`, and not through the body.
+ */
+export function metaColorScheme(root: { children: unknown[] }): string | null {
+  const stack: { children: unknown[] }[] = [root];
+  while (stack.length) {
+    const node = stack.pop()!;
+    for (const child of node.children) {
+      if (!isTag(child as Element)) continue;
+      const el = child as Element;
+      if (el.name === 'meta') {
+        const name = el.attribs.name?.trim().toLowerCase();
+        const content = el.attribs.content?.trim();
+        if (name === 'color-scheme' && content && usedColorScheme(content)) {
+          return content;
+        }
+      } else if (el.name === 'html' || el.name === 'head') {
+        stack.push(el);
+      }
+    }
+  }
+  return null;
+}
+
 /** 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 {
@@ -2088,6 +2819,68 @@ function setsContent(c: Candidate): boolean {
 /** Whether a rule's declarations set a custom property, by the array. */
 const CUSTOM_IN = new WeakMap<Declaration[], boolean>();
 
+/** The document's first element with an id, looked for from one of its
+ *  elements: `shapeStyles`' answer where no index of them is handed in. */
+function elementById(from: Element, id: string): Element | null {
+  let top: Element['parent'] | Element = from;
+  while (top.parent) top = top.parent;
+  const stack = [...top.children].reverse();
+  for (let node = stack.pop(); node; node = stack.pop()) {
+    if (node.type !== 'tag') continue;
+    const el = node as Element;
+    if (el.attribs.id === id) return el;
+    for (let i = el.children.length - 1; i >= 0; i -= 1) {
+      stack.push(el.children[i]);
+    }
+  }
+  return null;
+}
+
+/** Whether declarations set a property a shape in a drawing has. */
+function declaresShape(declarations: readonly Declaration[]): boolean {
+  for (const d of declarations) if (isShapeProp(d.prop)) return true;
+  return false;
+}
+
+/** Whether declarations set one a drawing's root does not have from its
+ *  box's style (`ROOT_BOX_PROPS`). */
+function declaresRootShape(declarations: readonly Declaration[]): boolean {
+  for (const d of declarations) {
+    if (isShapeProp(d.prop) && !ROOT_BOX_PROPS.has(d.prop)) return true;
+  }
+  return false;
+}
+
+/** A `style` attribute's declarations of a shape's properties, as
+ *  candidates: over every rule, and its `!important` ones over theirs. */
+function pushInlineShapes(out: Candidate[], inline: string): void {
+  const declarations = parseDeclarations(inline).filter((d) =>
+    isShapeProp(d.prop),
+  );
+  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,
+      only: -1,
+    });
+  }
+  if (important.length) {
+    out.push({
+      origin: Origin.InlineImportant,
+      layer: null,
+      specificity: 0,
+      order: 0,
+      declarations: important,
+      only: -1,
+    });
+  }
+}
+
 function pick(c: Candidate): Declaration[] {
   return c.only < 0 ? c.declarations : [c.declarations[c.only]];
 }
@@ -2473,6 +3266,24 @@ function lengthAttr(value: string): string {
   return Number.isFinite(n) ? `${n}px` : v;
 }
 
+/** A number and a unit, as an SVG's `width` and `height` are written. */
+const SVG_LENGTH =
+  /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*([a-z]*)\s*$/i;
+
+/**
+ * The `width`/`height` of an inline `<svg>` as CSS: they are presentation
+ * attributes for the properties of the same names (SVG 2, 5.1.1), so
+ * `height="50%"` is a percentage of the containing block like a style's.
+ * A bare number is pixels; null for what CSS would not parse.
+ */
+function svgSizeHint(value: string): string | null {
+  const v = value.trim();
+  if (/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?%$/i.test(v)) return v;
+  const m = SVG_LENGTH.exec(v);
+  if (!m) return null;
+  return m[2] ? v : `${parseFloat(m[1])}px`;
+}
+
 function closestTable(el: Element): Element | null {
   let node = el.parent;
   while (node) {