@react-x11/components 0.9.0 → 0.11.0

package/src/html/css/vars.ts

@@ -0,0 +1,348 @@
+// Custom properties and `var()` (CSS Custom Properties 1). A `--name`
+// declaration is kept as written, per element and inherited; a `var()` in
+// any other declaration is replaced by it before the declaration is read,
+// so a shorthand, a `calc()` or a colour function sees the value it names.
+//
+// A document with none of either pays nothing: the cascade asks only when
+// some declaration has one (`Declaration.custom`, `Declaration.vars`).
+
+/**
+ * An element's custom properties: its own over those it inherits, with
+ * every `var()` in them already replaced. A chain rather than a copy: an
+ * element that sets two properties over a theme of three hundred holds
+ * two, where a copy made every such element pay for the theme.
+ */
+export class CustomProps {
+  /** Its own, where `null` is none over an inherited one (`initial`). */
+  readonly own: Map<string, string | null>;
+  readonly parent: CustomProps | null;
+  private readonly depth: number;
+
+  constructor(parent: CustomProps | null) {
+    // a lookup walks the chain, so a long one is folded into one map
+    if (parent && parent.depth >= FOLD_DEPTH) parent = parent.folded();
+    this.own = new Map();
+    this.parent = parent;
+    this.depth = parent ? parent.depth + 1 : 0;
+  }
+
+  get(name: string): string | undefined {
+    for (let at: CustomProps | null = this; at; at = at.parent) {
+      const value = at.own.get(name);
+      if (value !== undefined) return value ?? undefined;
+    }
+    return undefined;
+  }
+
+  /** The whole chain as one link, with the same answers. */
+  private folded(): CustomProps {
+    const out = new CustomProps(null);
+    const links: CustomProps[] = [];
+    for (let at: CustomProps | null = this; at; at = at.parent) links.push(at);
+    for (let i = links.length - 1; i >= 0; i -= 1) {
+      for (const [name, value] of links[i].own) {
+        if (value === null) out.own.delete(name);
+        else out.own.set(name, value);
+      }
+    }
+    return out;
+  }
+}
+
+const FOLD_DEPTH = 16;
+
+/**
+ * The custom properties an element has: `own`, its declarations in cascade
+ * order, over `parent`'s. A `var()` in one of its own is resolved against
+ * the rest, and one that names a property in a cycle with it, or none with
+ * no fallback, leaves it no value at all (CSS Custom Properties 1 2.3, 3).
+ */
+export function customProperties(
+  own: ReadonlyMap<string, string>,
+  parent: CustomProps | null,
+): CustomProps {
+  const out = new CustomProps(parent);
+  for (const [name, value] of own) {
+    const keyword = value.trim().toLowerCase();
+    if (keyword === 'initial') {
+      out.own.set(name, null);
+    } else if (
+      keyword === 'inherit' ||
+      keyword === 'unset' ||
+      keyword === 'revert' ||
+      keyword === 'revert-layer'
+    ) {
+      // a custom property inherits, so each of these is its parent's
+      out.own.set(name, parent?.get(name) ?? null);
+    } else {
+      out.own.set(name, value);
+    }
+  }
+  const state = new Map<string, boolean>();
+  const stack: string[] = [];
+  const cyclic = new Set<string>();
+  const visit = (name: string): string | undefined => {
+    // an inherited one was resolved where it was declared
+    if (!own.has(name)) return parent?.get(name);
+    const done = state.get(name);
+    if (done === false) {
+      // on the stack: a cycle, and nothing in it has a value, whatever
+      // its fallbacks say
+      for (let i = stack.lastIndexOf(name); i < stack.length; i += 1) {
+        cyclic.add(stack[i]);
+      }
+      return undefined;
+    }
+    if (done === true) return out.own.get(name) ?? undefined;
+    state.set(name, false);
+    stack.push(name);
+    const raw = out.own.get(name);
+    if (raw && hasVar(raw)) {
+      const value = substitute(raw, visit);
+      out.own.set(name, value === null || cyclic.has(name) ? null : value);
+    }
+    stack.pop();
+    state.set(name, true);
+    return out.own.get(name) ?? undefined;
+  };
+  for (const name of own.keys()) visit(name);
+  return out;
+}
+
+/**
+ * `substitute`, remembered for the properties it was asked against: the
+ * elements under one that sets custom properties share its `CustomProps`,
+ * so a `var()` a utility class writes is replaced once for all of them.
+ * What is remembered goes with the properties. With none, there is nothing
+ * to key it on that would go, and only fallbacks to read.
+ */
+export function substituteIn(
+  value: string,
+  props: CustomProps | null,
+): string | null {
+  if (!props) return substitute(value, null);
+  let memo = SUBSTITUTED.get(props);
+  if (!memo) {
+    memo = new Map();
+    SUBSTITUTED.set(props, memo);
+  }
+  const hit = memo.get(value);
+  if (hit !== undefined) return hit;
+  const out = substitute(value, props);
+  memo.set(value, out);
+  return out;
+}
+
+const SUBSTITUTED = new WeakMap<CustomProps, Map<string, string | null>>();
+
+/** Whether a value has a `var()` in it. */
+export function hasVar(value: string): boolean {
+  return VAR.test(value);
+}
+
+/**
+ * Whether each `var()` in a value is one: closed, naming a custom property,
+ * and with a fallback, if it has one, that could be a declaration's value —
+ * no `;` or `!` outside its brackets, no string a newline cuts off. One that
+ * is not makes its declaration invalid as it is parsed, not as it is used,
+ * so the declaration before it stands (CSS Custom Properties 1 3).
+ */
+export function validVars(value: string): boolean {
+  let i = 0;
+  for (;;) {
+    const at = findVar(value, i);
+    if (at < 0) return true;
+    const open = at + 4;
+    const close = closingParen(value, open);
+    if (close < 0) return false;
+    const inner = value.slice(open, close);
+    const comma = topLevelComma(inner);
+    const name = (comma < 0 ? inner : inner.slice(0, comma)).trim();
+    if (!NAME.test(name)) return false;
+    if (comma >= 0) {
+      const fallback = inner.slice(comma + 1);
+      if (topLevel(fallback, ';') >= 0 || topLevel(fallback, '!') >= 0) {
+        return false;
+      }
+      if (hasVar(fallback) && !validVars(fallback)) return false;
+    }
+    i = close + 1;
+  }
+}
+
+/** A name a `var()` may give: two dashes, and name characters. `--` alone
+ *  names nothing a declaration can set, and so falls back. */
+const NAME =
+  /^--(?:[\w-]|[^\x00-\x7f]|\\[0-9a-f]{1,6}[ \t\n\r\f]?|\\[^0-9a-f\n\r\f])*$/i;
+
+/** A name with its escapes read: `--\30 ` is `--0`. */
+function unescapeName(name: string): string {
+  if (!name.includes('\\')) return name;
+  return name.replace(
+    /\\(?:([0-9a-f]{1,6})[ \t\n\r\f]?|([\s\S]))/gi,
+    (_, hex: string | undefined, ch: string | undefined) => {
+      if (!hex) return ch ?? '';
+      // nothing, a surrogate or past Unicode is the replacement character,
+      // as CSS reads it, where `fromCodePoint` would throw
+      const code = parseInt(hex, 16);
+      const valid =
+        code > 0 && code <= 0x10ffff && !(code >= 0xd800 && code <= 0xdfff);
+      return String.fromCodePoint(valid ? code : 0xfffd);
+    },
+  );
+}
+
+const VAR = /(?:^|[^\w-])var\(/i;
+
+/**
+ * `value` with each `var()` in it replaced by the custom property it names,
+ * or by its fallback where there is none — or null where there is neither,
+ * which makes the declaration invalid at computed-value time. A value is
+ * put in with a space either side, so what the tokenizer would not join
+ * is not joined: `var(--size)px` is no length.
+ */
+export function substitute(
+  value: string,
+  lookup: CustomProps | ((name: string) => string | undefined) | null,
+): string | null {
+  const get =
+    typeof lookup === 'function' ? lookup : (name: string) => lookup?.get(name);
+  let out = '';
+  let i = 0;
+  for (;;) {
+    const at = findVar(value, i);
+    if (at < 0) break;
+    const open = at + 4;
+    const close = closingParen(value, open);
+    if (close < 0) return null;
+    const inner = value.slice(open, close);
+    const comma = topLevelComma(inner);
+    const name = (comma < 0 ? inner : inner.slice(0, comma)).trim();
+    if (!NAME.test(name)) return null;
+    let replacement = get(unescapeName(name));
+    if (replacement === undefined) {
+      if (comma < 0) return null;
+      const fallback = inner.slice(comma + 1);
+      const resolved = hasVar(fallback) ? substitute(fallback, get) : fallback;
+      if (resolved === null) return null;
+      replacement = resolved;
+    }
+    out += `${value.slice(i, at)} ${replacement.trim()} `;
+    i = close + 1;
+  }
+  return (out + value.slice(i)).trim();
+}
+
+/** Where the next `var(` that is a function of its own starts, from `from`. */
+function findVar(value: string, from: number): number {
+  const lower = value.toLowerCase();
+  let at = lower.indexOf('var(', from);
+  while (at > 0 && /[\w-]/.test(value[at - 1])) {
+    at = lower.indexOf('var(', at + 4);
+  }
+  return at;
+}
+
+/** The `)` that closes a bracket opened just before `from`, strings and
+ *  brackets inside it passed over; -1 where none does. */
+function closingParen(value: string, from: number): number {
+  let depth = 0;
+  for (let i = from; i < value.length; i += 1) {
+    const c = value[i];
+    if (c === '\\') {
+      i += 1;
+    } else if (c === '"' || c === "'") {
+      const end = stringEnd(value, i);
+      if (end < 0) return -1;
+      i = end;
+    } else if (c === '(' || c === '[' || c === '{') {
+      depth += 1;
+    } else if (c === ')' || c === ']' || c === '}') {
+      if (depth === 0) return c === ')' ? i : -1;
+      depth -= 1;
+    }
+  }
+  // the end of a style sheet closes what it leaves open (CSS Syntax 3 5.4)
+  return value.length;
+}
+
+/** Where a string opened at `at` closes: its quote, or the end, which
+ *  closes it too — or -1 where a newline cuts it off, a bad string. */
+function stringEnd(value: string, at: number): number {
+  const quote = value[at];
+  for (let i = at + 1; i < value.length; i += 1) {
+    const c = value[i];
+    if (c === '\\') i += 1;
+    else if (c === quote) return i;
+    else if (c === '\n' || c === '\r' || c === '\f') return -1;
+  }
+  return value.length;
+}
+
+/** Whether a bracket closes that nothing opened, which no value holds. */
+export function unbalanced(value: string): boolean {
+  const open: string[] = [];
+  for (let i = 0; i < value.length; i += 1) {
+    const c = value[i];
+    if (c === '\\') {
+      i += 1;
+    } else if (c === '"' || c === "'") {
+      const end = stringEnd(value, i);
+      if (end < 0) return true;
+      i = end;
+    } else if (c === '(' || c === '[' || c === '{') {
+      open.push(c === '(' ? ')' : c === '[' ? ']' : '}');
+    } else if (c === ')' || c === ']' || c === '}') {
+      if (open.pop() !== c) return true;
+    }
+  }
+  return false;
+}
+
+/** The first `ch` outside brackets and strings, or -1. */
+function topLevel(value: string, ch: string): number {
+  let depth = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    const c = value[i];
+    if (c === '\\') {
+      i += 1;
+    } else if (c === '"' || c === "'") {
+      const end = stringEnd(value, i);
+      if (end < 0) return -1;
+      i = end;
+    } else if (c === '(' || c === '[' || c === '{') {
+      depth += 1;
+    } else if (c === ')' || c === ']' || c === '}') {
+      depth -= 1;
+    } else if (c === ch && depth === 0) {
+      // `<!--` is a token of its own, and no `!`
+      if (ch === '!' && value[i - 1] === '<' && value.startsWith('--', i + 1)) {
+        continue;
+      }
+      return i;
+    }
+  }
+  return -1;
+}
+
+/** The first comma not inside a bracket or a string, or -1. */
+function topLevelComma(value: string): number {
+  let depth = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    const c = value[i];
+    if (c === '\\') {
+      i += 1;
+    } else if (c === '"' || c === "'") {
+      const end = value.indexOf(c, i + 1);
+      if (end < 0) return -1;
+      i = end;
+    } else if (c === '(' || c === '[' || c === '{') {
+      depth += 1;
+    } else if (c === ')' || c === ']' || c === '}') {
+      depth -= 1;
+    } else if (c === ',' && depth === 0) {
+      return i;
+    }
+  }
+  return -1;
+}

package/src/html/dom.ts

@@ -36,27 +36,74 @@ export { Element, Text, Comment } from 'domhandler';
  *  set is here because the box builder has to skip the same ones. */
 const RAW_TEXT = new Set(['script', 'style', 'textarea', 'title']);
 
-/** Never rendered, whatever the stylesheet says. `<script>` and `<style>`
- *  are consumed by the seams instead; the rest have no visual box in the
- *  subset this renders. */
-export const NON_RENDERED = new Set([
-  'script',
-  'style',
-  'head',
+/** Never rendered, whatever the stylesheet says: a `<template>`'s
+ *  content is inert. The rest of what has no box of its own — `<head>` and
+ *  what is in it, `<script>`, `<style>` — is `display: none` by the UA
+ *  sheet, and shown where an author's sheet says otherwise, as a browser
+ *  shows it: `head, meta { display: block }` makes a `<meta>`'s `::before`
+ *  a line of the page. */
+export const NON_RENDERED = new Set(['template']);
+
+/** What the HTML parser puts in `<head>`. Where the markup has no `<head>`
+ *  around it, at the top of the document, it is still the head's, which a
+ *  browser implies and the UA sheet hides: `* { display: block }` shows no
+ *  `<title>` or `<style>` there (`inImpliedHead`). */
+const HEAD_CONTENT = new Set([
+  'title',
   'meta',
   'link',
-  'title',
+  'style',
+  'script',
   'base',
-  'template',
+  'basefont',
+  'bgsound',
+  'noframes',
   'noscript',
+  'template',
 ]);
 
+/** Whether an element is head content with no `<head>` around it: at the
+ *  top of the document or right under `<html>`. */
+export function inImpliedHead(el: Element, tag: string): boolean {
+  if (!HEAD_CONTENT.has(tag)) return false;
+  const parent = el.parent;
+  return !parent || !isElement(parent) || tagOf(parent) === 'html';
+}
+
 /** An element's tag name, lowercased — htmlparser2 already lowercases in
- *  HTML mode, so this is the assertion rather than the work. */
+ *  HTML mode, so this is the assertion rather than the work. An SVG root
+ *  under a prefix (`isSvgRoot`) is `svg`, which is what a type selector and
+ *  everything else here that asks for the tag sees. */
 export function tagOf(node: AnyNode): string {
-  return node.type === 'tag' || node.type === 'script' || node.type === 'style'
-    ? (node as Element).name.toLowerCase()
-    : '';
+  if (node.type !== 'tag' && node.type !== 'script' && node.type !== 'style') {
+    return '';
+  }
+  const name = (node as Element).name.toLowerCase();
+  return name.endsWith(':svg') && isSvgRoot(node as Element) ? 'svg' : name;
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Whether an element is the root of an SVG drawing. The HTML parser names
+ * an inline `<svg>` plainly; XHTML may bind a prefix to the SVG namespace
+ * (`<svg:svg xmlns:svg="http://www.w3.org/2000/svg">`), which is the same
+ * element to an XML parser, and is honoured where the prefix is declared.
+ * Only SVG's: a Word document's `<o:p>` under `xmlns:o` is not a paragraph,
+ * to this any more than to a browser reading it as HTML.
+ */
+export function isSvgRoot(el: Element): boolean {
+  const name = el.name.toLowerCase();
+  if (name === 'svg') return true;
+  if (!name.endsWith(':svg')) return false;
+  const declaration = `xmlns:${name.slice(0, -4)}`;
+  for (let node: Element | null = el; node;) {
+    const bound = node.attribs[declaration];
+    if (bound !== undefined) return bound === SVG_NS;
+    const parent: ParentNode | null = node.parent;
+    node = parent && parent.type === 'tag' ? (parent as Element) : null;
+  }
+  return false;
 }
 
 export function isElement(node: AnyNode | null | undefined): node is Element {
@@ -84,6 +131,20 @@ export function attr(el: Element, name: string): string | undefined {
   return el.attribs?.[name];
 }
 
+/** Where an image element's image is: an `<img>`'s `src`, an `<object>`'s
+ *  `data` — which is shown as an image when it is one (HTML's "the object
+ *  element"), and as the element's fallback content otherwise — an
+ *  `<embed>`'s `src` the same, and a `<video>`'s `poster`, the frame it
+ *  shows until it plays, which here it does not. */
+export function imageUrlOf(el: Element): string | undefined {
+  const tag = tagOf(el);
+  return tag === 'object'
+    ? attr(el, 'data')
+    : tag === 'video'
+      ? attr(el, 'poster')
+      : attr(el, 'src');
+}
+
 /** The text under a node, uncollapsed — what `<style>` hands the CSS parser
  *  and what a `<script>` seam is given. */
 export function rawTextOf(node: AnyNode): string {
@@ -141,6 +202,9 @@ export interface DocumentFacts {
   resources: Element[];
   /** `<title>`, when the document had one. */
   title: string | null;
+  /** The first `<base>` with an `href`, as written: the document's base URL
+   *  wherever in the document it stands (HTML 2.5.3). */
+  base: string | null;
 }
 
 export type SheetRef =
@@ -273,10 +337,19 @@ export class HtmlSource {
         }
       } else if (tag === 'script') {
         facts.scripts.push(el);
-      } else if (tag === 'img' || tag === 'image') {
-        if (attr(el, 'src')) facts.resources.push(el);
+      } else if (
+        tag === 'img' ||
+        tag === 'image' ||
+        tag === 'object' ||
+        tag === 'embed' ||
+        tag === 'video'
+      ) {
+        if (imageUrlOf(el)) facts.resources.push(el);
       } else if (tag === 'title' && facts.title === null) {
         facts.title = rawTextOf(el).trim();
+      } else if (tag === 'base' && facts.base === null) {
+        const href = attr(el, 'href');
+        if (href !== undefined) facts.base = href;
       }
     }
     this._facts = facts;
@@ -296,11 +369,205 @@ interface ScannedFacts extends DocumentFacts {
 }
 
 function freshFacts(): ScannedFacts {
-  return { sheets: [], scripts: [], resources: [], title: null, scanned: -1 };
+  return {
+    sheets: [],
+    scripts: [],
+    resources: [],
+    title: null,
+    base: null,
+    scanned: -1,
+  };
+}
+
+/**
+ * domhandler's handler, with the one rule of HTML's tree construction about
+ * text that htmlparser2 leaves out: a newline straight after the start tag
+ * of a `<pre>`, a `<listing>` or a `<textarea>` is not content (HTML
+ * 13.2.6.4.7, "newlines at the start of pre blocks are ignored as an
+ * authoring convenience"). Without it every code block written `<pre>` and
+ * a line break began with an empty line. A chunk of a stream that ends
+ * between the tag and the newline keeps the rule, since the handler does.
+ */
+class Handler extends DomHandler {
+  private _afterPre = false;
+  /** A written `<html>` at the top of the document, and the document's
+   *  body, written or implied: where HTML's parser puts content the markup
+   *  leaves outside them. */
+  private _html: Element | null = null;
+  private _body: Element | null = null;
+
+  /**
+   * Past `MAX_DEPTH` open elements, what is opened goes into the element at
+   * that depth rather than into the one open, still open itself so its end
+   * tag closes it: Chrome's parser does the same past 512. Everything that
+   * walks a document here — the cascade, the box builder, layout, paint —
+   * goes a call deeper for each level, and a page of a few hundred unclosed
+   * `<div>`s, which a broken generator writes, ran the stack out.
+   */
+  protected override addNode(node: ChildNode): void {
+    const stack = this.tagStack;
+    if (stack.length <= MAX_DEPTH) {
+      super.addNode(node);
+      return;
+    }
+    const parent = stack[MAX_DEPTH - 1];
+    const previous = parent.children[parent.children.length - 1];
+    parent.children.push(node);
+    if (previous) {
+      node.prev = previous;
+      previous.next = node;
+    }
+    node.parent = parent;
+    this.lastNode = null;
+  }
+
+  /**
+   * HTML's parser puts a document's content in a `<body>` whether or not
+   * the markup wrote one, and htmlparser2's puts it where it stands. So
+   * with a written `<html>`, the first thing that is not head content opens
+   * the body it goes in (HTML 13.2.6.4.6, "after head"); without one, a
+   * `<body>` written after content takes that content in, which HTML's
+   * parser had put in the body it implied; and what comes after the body
+   * has ended goes back into it ("after body"), as does a second
+   * `<body>`'s attributes. Without it the root box stood in for a body
+   * around the `<html>`, and a first paragraph's margin stood below the
+   * body's rather than collapsing with it. A fragment — no `<html>`, no
+   * `<body>` — is left as it was written, and the root box stands in.
+   */
+  override onopentag(name: string, attribs: Record<string, string>): void {
+    if (name === 'body' && this._body) {
+      // a second body is its attributes, on the first; the parser will end
+      // it, so what it ends is the body outside one, or else what is open
+      for (const key in attribs) this._body.attribs[key] ??= attribs[key];
+      const stack = this.tagStack;
+      if (this._outsideBody()) this._reopen();
+      else stack.push(stack[stack.length - 1]);
+      this._afterPre = false;
+      return;
+    }
+    if (this._outsideBody()) {
+      if (this._body) {
+        if (name !== 'html') this._reopen();
+      } else if (this._html && inBody(name)) this._reopen();
+    }
+    super.onopentag(name, attribs);
+    const opened = this.tagStack[this.tagStack.length - 1] as Element;
+    if (name === 'html' && !this._html && opened.parent === this.root) {
+      this._html = opened;
+    } else if (name === 'body' && !this._body) {
+      if (opened.parent === this._html) this._body = opened;
+      else if (!this._html && opened.parent === this.root) {
+        this._body = opened;
+        this._adopt(opened);
+      }
+    }
+    this._afterPre =
+      name === 'pre' || name === 'listing' || name === 'textarea';
+  }
+
+  /** Whether what is open is the top of the document, or the written
+   *  `<html>`: where content is outside any body. */
+  private _outsideBody(): boolean {
+    const top = this.tagStack[this.tagStack.length - 1];
+    return top === this.root || (top === this._html && top !== null);
+  }
+
+  /** Open the `<html>` and its body again, or the body for the first time.
+   *  The parser never saw them open, so it closes them in the place of what
+   *  it did open — which is where they would end anyway. */
+  private _reopen(): void {
+    const stack = this.tagStack;
+    if (stack[stack.length - 1] === this.root && this._html) {
+      stack.push(this._html);
+    }
+    if (this._body) stack.push(this._body);
+    else {
+      super.onopentag('body', {});
+      this._body = stack[stack.length - 1] as Element;
+    }
+    this.lastNode = null;
+  }
+
+  /** Move into a `<body>` written at the top of the document what went
+   *  before it there from the first thing that is not head content on. */
+  private _adopt(body: Element): void {
+    const kids = this.root.children;
+    const end = kids.length - 1;
+    let start = 0;
+    while (start < end && !startsBody(kids[start])) start += 1;
+    if (start === end) return;
+    const moved = kids.splice(start, end - start);
+    const before = kids[start - 1] ?? null;
+    body.prev = before;
+    if (before) before.next = body;
+    moved[0].prev = null;
+    moved[moved.length - 1].next = null;
+    for (const node of moved) node.parent = body;
+    body.children.unshift(...moved);
+    if (body.children.length > moved.length) {
+      const first = body.children[moved.length];
+      first.prev = moved[moved.length - 1];
+      moved[moved.length - 1].next = first;
+    }
+  }
+
+  override onclosetag(): void {
+    this._afterPre = false;
+    super.onclosetag();
+  }
+
+  override oncomment(data: string): void {
+    this._afterPre = false;
+    super.oncomment(data);
+  }
+
+  override ontext(data: string): void {
+    if (
+      (this._html || this._body) &&
+      NOT_SPACE.test(data) &&
+      this._outsideBody()
+    ) {
+      this._reopen();
+    }
+    if (this._afterPre) {
+      this._afterPre = false;
+      const skip = data.startsWith('\r\n') ? 2 : data.startsWith('\n') ? 1 : 0;
+      if (skip) {
+        if (data.length === skip) return;
+        data = data.slice(skip);
+      }
+    }
+    super.ontext(data);
+  }
+}
+
+/** How deep a document's elements nest (`Handler.addNode`). */
+const MAX_DEPTH = 256;
+
+/** Text that is not all the white space HTML's parser leaves in the head. */
+const NOT_SPACE = /[^ \t\n\f\r]/;
+
+/** Whether an element opened before the body goes in the body HTML's
+ *  parser implies, rather than in the head or the `<html>` itself. */
+function inBody(name: string): boolean {
+  return (
+    name !== 'body' &&
+    name !== 'frameset' &&
+    name !== 'head' &&
+    name !== 'html' &&
+    !HEAD_CONTENT.has(name)
+  );
+}
+
+/** Whether a node at the top of a document is where HTML's parser would
+ *  have opened the body: an element that goes in one, or text. */
+function startsBody(node: ChildNode): boolean {
+  if (node instanceof Element) return inBody(node.name);
+  return node instanceof Text && NOT_SPACE.test(node.data);
 }
 
 function createParser(): { parser: Parser; handler: DomHandler } {
-  const handler = new DomHandler(null, {
+  const handler = new Handler(null, {
     // Positions cost time and memory per node and nothing here reads them.
     withStartIndices: false,
     withEndIndices: false,