@react-x11/components 0.12.0 → 0.13.0

package/src/html/index.ts

@@ -14,14 +14,7 @@
 // is a property of the design rather than a setting.
 import React from 'react';
 import type { ReactElement, ReactNode } from 'react';
-import {
-  Button,
-  Checkbox,
-  Radio,
-  RadioGroup,
-  Select,
-  useTheme,
-} from 'react-x11';
+import { useTheme } from 'react-x11';
 import type { DrawnNode, MouseEvent as X11MouseEvent, Rect } from 'react-x11';
 import { tint } from 'react-x11/style';
 import type { Style } from 'react-x11/style';
@@ -31,18 +24,13 @@ import type {} from 'react-x11/jsx-runtime';
 import { useLinkClicks, useSelectionMenu } from '../richtext/index.js';
 import { useFontPrewarm } from '../internal/prewarm.js';
 import { hx } from './hx.js';
-import { attr, tagOf } from './dom.js';
 import type { Document, Element } from './dom.js';
 import { ELEMENT, HtmlViewNode, registerHtmlView } from './node.js';
 import type { HtmlViewProps, ScriptRequest } from './node.js';
 import type { RootLook } from './css/style.js';
-import {
-  buttonLabel,
-  optionsOf,
-  selectedOption,
-  textareaValue,
-} from './controls.js';
-import type { BareField, ControlRect } from './controls.js';
+import type { ControlRect } from './controls.js';
+import type { FormSubmission } from './form.js';
+import { useForms } from './widgets.js';
 import type { ResourceRequest, ResourceResult } from './resources.js';
 
 export {
@@ -53,6 +41,13 @@ export {
 export type { HtmlViewProps, ScriptRequest } from './node.js';
 export type { ResourceRequest, ResourceResult } from './resources.js';
 export type { BareField, ControlRect } from './controls.js';
+export type {
+  FormEnctype,
+  FormMethod,
+  FormSubmission,
+  SubmitContext,
+} from './form.js';
+export { formSubmission } from './form.js';
 export type { ComputedStyle, RootLook } from './css/style.js';
 export type {
   AnyNode,
@@ -154,6 +149,15 @@ export interface HtmlProps {
    * calls the handle's `refresh()`.
    */
   onControlChange?: (element: Element, value: string | boolean) => void;
+  /**
+   * A form was submitted — a submit button pressed, or Enter in one of its
+   * text fields. Handed over as the request it makes: the method, the URL
+   * (resolved as `onLink`'s `href` is, and for a GET with the form's entries
+   * as its query), a POST's encoded body and its content type, and the
+   * entries themselves. Absent means submitting does nothing: this
+   * component never sends anything by itself, any more than it navigates.
+   */
+  onSubmit?: (submission: FormSubmission) => void;
   /** Base text style. Defaults: theme `fontSize` (14), `sans-serif`. */
   fontSize?: number;
   fontFamily?: string;
@@ -230,6 +234,10 @@ function deriveLook(
     controlPadY: Number(theme.paddingY ?? 6),
     controlBorder: Number(theme.borderWidth ?? 1),
     controlRadius: Number(theme.radius ?? 4),
+    // not `fontSize` and `fontFamily`, which a host sets to the web's
+    // `medium` and the face it reads pages in
+    controlFontSize: Number(theme.fontSize ?? 14),
+    controlFontFamily: String(theme.fontFamily ?? 'sans-serif'),
   };
 }
 
@@ -285,14 +293,27 @@ export function Html(props: HtmlProps): ReactElement {
     onScript,
     onDocument,
     onControlChange,
+    onSubmit,
     style,
   } = props;
 
   const theme = useTheme() as unknown as Record<string, unknown>;
   const links = useLinkClicks(onLink);
-  const buttons = useButtonPresses(onControlChange);
   const menu = useSelectionMenu(selectable);
 
+  // The element, for the document's base when a form is submitted, as well
+  // as wherever the application's `ref` wants it.
+  const viewNode = React.useRef<HtmlViewNode | null>(null);
+  const outerRef = props.ref;
+  const viewRef = React.useCallback(
+    (node: HtmlViewNode | null) => {
+      viewNode.current = node;
+      if (typeof outerRef === 'function') outerRef(node);
+      else if (outerRef) (outerRef as React.RefObject<unknown>).current = node;
+    },
+    [outerRef],
+  );
+
   const look = React.useMemo(
     () => deriveLook(theme, props),
     [theme, props.fontSize, props.fontFamily, props.monoFamily],
@@ -305,6 +326,13 @@ export function Html(props: HtmlProps): ReactElement {
   const documentRef = React.useRef<Document | null>(null);
   const [controls, setControls] = React.useState<ControlRect[]>([]);
   const [domRevision, setDomRevision] = React.useState(0);
+  const forms = useForms({
+    view: viewNode,
+    baseUrl,
+    onControlChange,
+    onSubmit,
+    touch: () => setDomRevision((n) => n + 1),
+  });
 
   const handleDocument = React.useCallback(
     (doc: Document) => {
@@ -338,7 +366,7 @@ export function Html(props: HtmlProps): ReactElement {
     onDocument: handleDocument,
     onControls: handleControls,
     domRevision,
-    ref: props.ref as React.Ref<unknown>,
+    ref: viewRef as React.Ref<unknown>,
     // grown with the component, where an application grows it: the root's
     // background covers the whole of it, as a page's covers the window
     style: { alignSelf: 'stretch', flexGrow: 1 },
@@ -347,16 +375,7 @@ export function Html(props: HtmlProps): ReactElement {
   const children: ReactNode[] = [
     h(ELEMENT, { key: 'view', ...viewProps } as Record<string, unknown>),
   ];
-  for (const rect of controls) {
-    children.push(
-      renderControl(
-        rect,
-        look,
-        () => setDomRevision((n) => n + 1),
-        onControlChange,
-      ),
-    );
-  }
+  children.push(...forms.render(controls, look));
 
   const rootStyle: Style = { flexDirection: 'column', position: 'relative' };
   return hx(
@@ -374,11 +393,11 @@ export function Html(props: HtmlProps): ReactElement {
       ...links,
       onMouseDown: (ev: X11MouseEvent<DrawnNode>) => {
         links.onMouseDown(ev);
-        buttons.onMouseDown(ev);
+        forms.onMouseDown(ev);
       },
       onMouseUp: (ev: X11MouseEvent<DrawnNode>) => {
         links.onMouseUp(ev);
-        buttons.onMouseUp(ev);
+        forms.onMouseUp(ev);
       },
       ...menu,
       'data-testname': props['data-testname'],
@@ -428,314 +447,6 @@ export function useHtmlHandle(): HtmlHandle & { ref: React.Ref<unknown> } {
   );
 }
 
-/**
- * A press and a release on the same `<button>` the document draws, reported
- * as a pressed widget reports one: `onControlChange` with the button and its
- * `value`. A `<button>` is laid out and drawn like any box (the UA sheet's
- * `button` rule) — its content is the page's, and most of the buttons on
- * the web are an icon or a pill of a page's own design — so it is the
- * element that finds out it was pressed, not a widget. A disabled one, or
- * a press that lands in a link inside one, is not a press of it.
- */
-function useButtonPresses(onControlChange: HtmlProps['onControlChange']): {
-  onMouseDown: (ev: X11MouseEvent<DrawnNode>) => void;
-  onMouseUp: (ev: X11MouseEvent<DrawnNode>) => void;
-} {
-  const press = React.useRef<Element | null>(null);
-  const buttonAt = (ev: X11MouseEvent<DrawnNode>): Element | null => {
-    const target = ev.target as {
-      elementAtPoint?: (x: number, y: number) => Element | null;
-    } | null;
-    let node =
-      typeof target?.elementAtPoint === 'function'
-        ? target.elementAtPoint(ev.x, ev.y)
-        : null;
-    for (
-      ;
-      node;
-      node = node.parent?.type === 'tag' ? (node.parent as Element) : null
-    ) {
-      if (tagOf(node) === 'a' && attr(node, 'href') !== undefined) return null;
-      if (tagOf(node) === 'button') {
-        return attr(node, 'disabled') === undefined ? node : null;
-      }
-    }
-    return null;
-  };
-  return {
-    onMouseDown: (ev) => {
-      press.current = onControlChange && ev.button === 1 ? buttonAt(ev) : null;
-    },
-    onMouseUp: (ev) => {
-      const pressed = press.current;
-      press.current = null;
-      if (!pressed || !onControlChange || ev.button !== 1) return;
-      if (buttonAt(ev) !== pressed) return;
-      onControlChange(pressed, attr(pressed, 'value') ?? '');
-    },
-  };
-}
-
-// --- the widgets ------------------------------------------------------------
-
-/**
- * One form control, as a real widget at the rectangle layout reserved for it.
- *
- * Every one of these is a **core** widget rather than something drawn here:
- * a `<select>` in a document drops the same menu as a `<Select>` in the
- * window around it, a `<textinput>` gets the same caret, the same IME and the
- * same edit menu, and all of them join the window's focus order. The
- * alternative — drawing them in the paint pass — would be a picture of a form.
- */
-function renderControl(
-  rect: ControlRect,
-  look: RootLook,
-  touch: () => void,
-  onChange: HtmlProps['onControlChange'],
-): ReactNode {
-  const el = rect.element;
-  const key = `${rect.kind}:${rect.x},${rect.y}`;
-  const disabled = attr(el, 'disabled') !== undefined;
-  const readOnly = attr(el, 'readonly') !== undefined;
-  // a field whose box the document draws takes its content box
-  const at = rect.bare ?? rect;
-  const frame: Style = {
-    position: 'absolute',
-    left: Math.round(at.x),
-    top: Math.round(at.y),
-    width: Math.round(at.width),
-    height: Math.round(at.height),
-    // core's `opacity` is CSS's: the widget faded as a group, and at 0 not
-    // drawn and still hit
-    ...(rect.opacity !== undefined && { opacity: rect.opacity }),
-  };
-  const field = rect.bare ? bareField(rect.bare) : fieldChrome(look);
-  const report = (value: string | boolean): void => {
-    onChange?.(el, value);
-    touch();
-  };
-  // A text edit does NOT touch: the value lives in the widget and is echoed
-  // into the DOM attribute, and neither changes any box — while `touch()`
-  // would re-run the cascade and relayout the whole document *per
-  // keystroke*. This also matches HTML's own semantics: typing updates the
-  // value property, not the attribute selectors match against. The
-  // checkables keep the full touch, because `[checked]` is a selector
-  // documents really use.
-  const reportText = (value: string): void => {
-    onChange?.(el, value);
-  };
-
-  let widget: ReactNode;
-  switch (rect.kind) {
-    case 'checkbox':
-      widget = h(Checkbox, {
-        checked: attr(el, 'checked') !== undefined,
-        disabled,
-        // the element's whole box takes the press, as it does in a browser:
-        // a page that sizes one over its label, invisible, means the label
-        style: { width: '100%', height: '100%' },
-        onChange: (ev) => {
-          const next = ev.value;
-          if (next) el.attribs.checked = '';
-          else delete el.attribs.checked;
-          report(next);
-        },
-      });
-      break;
-    case 'radio': {
-      // Core's radio is a group member and HTML's is a free-standing input
-      // that happens to share a `name`. Each one is therefore its own
-      // one-member `RadioGroup`, and the exclusivity that makes it a group
-      // is done where HTML actually keeps it: in the DOM.
-      const value = attr(el, 'value') ?? 'on';
-      widget = h(
-        RadioGroup,
-        {
-          value: attr(el, 'checked') !== undefined ? value : undefined,
-          onChange: () => {
-            clearRadioGroup(el);
-            el.attribs.checked = '';
-            report(value);
-          },
-        },
-        h(Radio, { key: 'r', value, disabled }),
-      );
-      break;
-    }
-    case 'button':
-      widget = h(Button, {
-        label: buttonLabel(el),
-        disabled,
-        style: { width: '100%', height: '100%' },
-        onPress: () => report(attr(el, 'value') ?? ''),
-      });
-      break;
-    case 'select': {
-      const options = optionsOf(el);
-      widget = h(Select, {
-        options: options.map((o) => ({ value: o.value, label: o.label })),
-        value: selectedOption(el) ?? undefined,
-        disabled,
-        style: rect.bare
-          ? [BARE_TRIGGER, { width: '100%', height: '100%' }]
-          : { width: '100%', height: '100%' },
-        // the slots choose the drawn trigger on every backend, and put the
-        // caption and the arrow in the page's ink
-        ...(rect.bare && {
-          labelStyle: {
-            color: rect.bare.color,
-            fontFamily: rect.bare.fontFamily,
-            fontSize: rect.bare.fontSize,
-          },
-          chevronStyle: rect.bare.chevron
-            ? { color: rect.bare.color }
-            : { display: 'none' },
-        }),
-        onChange: (ev) => {
-          const next = String(ev.value ?? '');
-          setSelectedOption(el, next);
-          report(next);
-        },
-      });
-      break;
-    }
-    case 'textarea':
-      // Uncontrolled on purpose: the widget owns the live text the way a
-      // browser's does, and a re-render from any other cause remounts it
-      // with whatever was last echoed into the DOM.
-      widget = hx('textarea', {
-        defaultValue: textareaValue(el),
-        style: [field, { width: '100%', height: '100%' }],
-        onChange: readOnly ? undefined : (ev) => reportText(ev.value),
-      });
-      break;
-    case 'input': {
-      const type = (attr(el, 'type') ?? 'text').toLowerCase();
-      widget = hx('textinput', {
-        defaultValue: attr(el, 'value') ?? '',
-        placeholder: attr(el, 'placeholder'),
-        // Core's word for a password field: nothing in it reaches a
-        // selection, PRIMARY included.
-        sensitive: type === 'password',
-        style: [field, { width: '100%', height: '100%' }],
-        onChange: readOnly
-          ? undefined
-          : (ev) => {
-              el.attribs.value = ev.value;
-              reportText(ev.value);
-            },
-      });
-      break;
-    }
-    default:
-      return null;
-  }
-  return hx('box', { key, style: frame, selectable: false }, widget);
-}
-
-/**
- * The chrome a text field needs.
- *
- * `<textinput>` and `<textarea>` are core *elements* rather than components,
- * so they draw no frame of their own — an application supplies one, which is
- * why core's own `<Button>` and `<Select>` are components and these are not.
- * The values are the palette's, so a field in a document and a `<Select>`
- * beside it are the same height with the same corner and the same edge.
- */
-function fieldChrome(look: RootLook): Style {
-  return {
-    backgroundColor: look.surface,
-    borderWidth: look.controlBorder,
-    borderColor: look.borderColor,
-    borderRadius: look.controlRadius,
-    paddingLeft: 6,
-    paddingRight: 6,
-    color: look.color,
-    fontFamily: look.fontFamily,
-    fontSize: look.fontSize,
-  };
-}
-
-/**
- * A text field whose box the author styled: the document draws the border
- * and the background, so the widget draws neither, and its text is the
- * element's colour and font, which the author chose to go on that
- * background, rather than the theme's.
- */
-function bareField(bare: BareField): Style {
-  return {
-    backgroundColor: 'transparent',
-    borderWidth: 0,
-    borderRadius: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    color: bare.color,
-    fontFamily: bare.fontFamily,
-    fontSize: bare.fontSize,
-  };
-}
-
-/**
- * The trigger of a `<select>` whose box the page styled: no frame, no fill
- * and none of its own insets, and no wash under the pointer, since the box
- * it would tint is the document's. Core's focus ring still marks it for the
- * keyboard.
- */
-const BARE_TRIGGER: Style = {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  borderWidth: 0,
-  borderRadius: 0,
-  backgroundColor: 'transparent',
-  ':hover': { backgroundColor: 'transparent' },
-  ':active': { backgroundColor: 'transparent' },
-};
-
-function clearRadioGroup(el: Element): void {
-  const name = attr(el, 'name');
-  if (!name) return;
-  let root: Element | null = el;
-  while (root?.parent && root.parent.type === 'tag')
-    root = root.parent as Element;
-  if (!root) return;
-  const walk = (node: Element): void => {
-    for (const child of node.children) {
-      if (child.type !== 'tag') continue;
-      const tag = child.name.toLowerCase();
-      if (
-        tag === 'input' &&
-        (child.attribs.type ?? '').toLowerCase() === 'radio' &&
-        child.attribs.name === name
-      ) {
-        delete child.attribs.checked;
-      }
-      walk(child);
-    }
-  };
-  walk(root);
-}
-
-function setSelectedOption(el: Element, value: string): void {
-  const walk = (node: Element): void => {
-    for (const child of node.children) {
-      if (child.type !== 'tag') continue;
-      if (child.name.toLowerCase() === 'option') {
-        let label = '';
-        for (const kid of child.children) {
-          if (kid.type === 'text') label += kid.data;
-        }
-        const own = child.attribs.value ?? label.trim();
-        if (own === value) child.attribs.selected = '';
-        else delete child.attribs.selected;
-      }
-      walk(child);
-    }
-  };
-  walk(el);
-}
-
 declare module 'react-x11/jsx-runtime' {
   namespace JSX {
     interface IntrinsicElements {

package/src/html/layout/block.ts

@@ -38,6 +38,7 @@ import {
   BOX_RAISES,
   Box,
   CLAMPED,
+  CLEARED_FROM,
   CUT_BLOCKS,
   GRID_TRACKS,
   FIRST_LINE,
@@ -927,6 +928,8 @@ function layoutChildren(
     }
     first = false;
     const moved = childY !== at;
+    if (moved) CLEARED_FROM.set(child, at);
+    else CLEARED_FROM.delete(child);
     if (!moved && collapsesThrough(child)) {
       // nothing in it parts its margins: they and the ones either side of
       // it are one (CSS 2.1 8.3.1), still hanging for what comes next —

package/src/html/layout/boxes.ts

@@ -28,7 +28,12 @@ import {
   NON_RENDERED,
   tagOf,
 } from '../dom.js';
-import type { Cascade, FirstLetterRules } from '../css/cascade.js';
+import type {
+  Cascade,
+  FirstLetterRules,
+  KeptStyles,
+  SelectionStyle,
+} from '../css/cascade.js';
 import type { CollapsedTable } from './collapse.js';
 import { quoteAt } from '../css/content.js';
 import type { CounterStyles } from '../css/counter-styles.js';
@@ -556,6 +561,10 @@ export type FirstLineStyler = (
   parent: ComputedStyle,
 ) => ComputedStyle;
 
+/** The `::selection` of the element a box's text is in, or null for the
+ *  palette's highlight (`Cascade.selectionStyle`). */
+export type SelectionStyler = (box: Box | null) => SelectionStyle | null;
+
 /** The url of an image generated content put in a pseudo-element: it has
  *  no element of its own to name it (`imageUrlOf`). */
 export const CONTENT_IMAGES = new WeakMap<Box, string>();
@@ -641,6 +650,12 @@ export const PAINT_ORDER = new WeakMap<Box, Box[]>();
  *  a browser's does (`elementRect`). */
 export const CUT_BLOCKS = new WeakMap<Box, Box[]>();
 
+/** Where a block that clearance moved below the floats would have stood
+ *  without it, its border edge's top (CSS 2.1 9.5.2): a browser's
+ *  fragment of an inline box around such a block starts there, and takes
+ *  the clearance in (`elementRect`). Only the blocks that had clearance. */
+export const CLEARED_FROM = new WeakMap<Box, number>();
+
 /** The element a pseudo-element's box is generated from, which has no
  *  element of its own (`Box.pseudo`): whose the images its styles name are,
  *  when the host is asked for them. */
@@ -673,6 +688,10 @@ export interface BoxTree {
   controls: Box[];
   /** Every box carrying an `href`, for click and hover. */
   links: Box[];
+  /** The style of an anonymous box under a parent's (`anonymousStyles`):
+   *  the one the fix-up gave each it made, and what such a box takes when
+   *  its parent's style changes where it is (`HtmlViewNode._hoverInPlace`). */
+  anonymous: AnonymousStyle;
   /** Every box with a `background-image`, a border image or a mask image,
    *  an element's or a pseudo-element's, for the host to be asked for: a
    *  document has a handful, and finding them was a walk over every box
@@ -694,6 +713,10 @@ export interface BoxTree {
   /** Each box's style on a first line (`FirstLineStyler`), where any
    *  block has a `::first-line`. */
   firstLineStyler: FirstLineStyler | null;
+  /** Each box's `::selection` (`SelectionStyler`), where any rule styles
+   *  one: worked out as a selection is first painted over it, not as the
+   *  tree is built, since most builds are never selected in. */
+  selectionStyler: SelectionStyler | null;
   /** Whether a float or an out-of-flow box sits in an inline box: where
    *  none does, layout looks for them among a block's own children and
    *  goes through no inline box to find them. */
@@ -714,6 +737,9 @@ export interface BoxTree {
 
 export interface BuildOptions {
   cascade: Cascade;
+  /** The styles of the tree this one replaces, where only some elements'
+   *  can have changed since (`Cascade.beginSharing`). */
+  kept?: KeptStyles | null;
   /** Device pixels per CSS pixel. An image's pixels and a `width="600"`
    *  attribute are CSS pixels; every box is device, so both are multiplied
    *  on the way in. Default 1. */
@@ -813,7 +839,7 @@ class Builder {
 
   run(root: Element): BoxTree {
     const cascade = this._options.cascade;
-    cascade.beginSharing();
+    cascade.beginSharing(this._options.kept ?? null);
     const { style: rootStyle, html: impliedHtml } = cascade.rootStyle(
       hasBody(root),
       hasHtml(root),
@@ -832,10 +858,13 @@ class Builder {
     // it carries no margins of its own and cannot collapse with anything.
     this._children(root, rootBox, rootStyle, false, null, ROOT_SHARE_KEY);
     this._endLine();
-    fixUp(rootBox, anonymousStyles(cascade.initial));
+    cascade.endSharing();
+    const anonymous = anonymousStyles(cascade.initial);
+    fixUp(rootBox, anonymous);
     assignSubtreeRanges(rootBox);
     return {
       root: rootBox,
+      anonymous,
       text: this._chunks.join(''),
       textBoxes: this._textBoxes,
       textStyles: this._textStyles,
@@ -848,6 +877,7 @@ class Builder {
       negative: this._negative,
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
+      selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
@@ -855,6 +885,30 @@ class Builder {
     };
   }
 
+  /** `BoxTree.selectionStyler`, over this build's cascade: an element's
+   *  over its parent's, each once. A box with no element of its own — text,
+   *  an anonymous box — is its nearest element's. */
+  private _selectionStyler(): SelectionStyler {
+    const cascade = this._options.cascade;
+    const styles = this._styles;
+    const known = new Map<Element, SelectionStyle | null>();
+    const of = (el: Element): SelectionStyle | null => {
+      let found = known.get(el);
+      if (found !== undefined) return found;
+      // the parser keeps a document to 256 elements deep (`dom.ts`)
+      const parent = isElement(el.parent) ? of(el.parent) : null;
+      const own = styles.get(el)?.style;
+      found = own ? cascade.selectionStyle(el, own, parent) : parent;
+      known.set(el, found);
+      return found;
+    };
+    return (box) => {
+      let at = box;
+      while (at && !at.el) at = at.parent;
+      return at?.el ? of(at.el) : null;
+    };
+  }
+
   /** `BoxTree.firstLineStyler`, over this build's cascade. */
   private _firstLineStyler(): FirstLineStyler {
     const cascade = this._options.cascade;
@@ -1024,7 +1078,9 @@ class Builder {
     }
 
     // an `<object>` is its image once it has one, and its content until;
-    // an `<embed>` its image, and a `<video>` its poster, or a frame
+    // an `<embed>` its image, and a `<video>` its poster, or a frame; an
+    // image button its image, and a button saying what it is for until it
+    // has one, so it can be pressed either way
     const replaced =
       tag === 'object'
         ? this._options.imageSize(el)
@@ -1032,7 +1088,11 @@ class Builder {
           : 'none'
         : (tag === 'embed' || tag === 'video') && this._options.imageSize(el)
           ? 'image'
-          : replacedKind(el, tag);
+          : isImageButton(el, tag)
+            ? this._options.imageSize(el)
+              ? 'image'
+              : 'button'
+            : replacedKind(el, tag);
     if (replaced !== 'none') {
       this._replaced(el, tag, replaced, style, into);
       return;
@@ -2359,6 +2419,13 @@ function setIntrinsics(box: Box, size: IntrinsicSize, scale: number): void {
   };
 }
 
+/** An `<input type=image>`: a picture that submits its form. */
+function isImageButton(el: Element, tag: string): boolean {
+  return (
+    tag === 'input' && (attr(el, 'type') ?? '').trim().toLowerCase() === 'image'
+  );
+}
+
 function replacedKind(el: Element, tag: string): ReplacedKind {
   switch (tag) {
     case 'img':
@@ -2662,24 +2729,24 @@ function namesImages(style: ComputedStyle): boolean {
  * paragraph after it the height of the div further down. One per parent
  * style, which the cascade already shares between elements.
  */
-type AnonymousStyle = (
-  parent: Box,
+export type AnonymousStyle = (
+  parent: ComputedStyle,
   display: ComputedStyle['display'],
 ) => ComputedStyle;
 
 function anonymousStyles(initial: ComputedStyle): AnonymousStyle {
   const made = new WeakMap<ComputedStyle, Map<string, ComputedStyle>>();
   return (parent, display) => {
-    let byDisplay = made.get(parent.style);
+    let byDisplay = made.get(parent);
     if (!byDisplay) {
       byDisplay = new Map();
-      made.set(parent.style, byDisplay);
+      made.set(parent, byDisplay);
     }
     let style = byDisplay.get(display);
     if (!style) {
       // `display` is the one property it does not start from: it is the
       // box the fix-up made, and layout asks the style what a box is
-      style = inherit(parent.style, initial);
+      style = inherit(parent, initial);
       style.display = display;
       byDisplay.set(display, style);
     }
@@ -2787,7 +2854,7 @@ function anonymousOf(
   anonymous: AnonymousStyle,
   display: ComputedStyle['display'] = kind as ComputedStyle['display'],
 ): Box {
-  const box = new Box(kind, null, anonymous(parent, display));
+  const box = new Box(kind, null, anonymous(parent.style, display));
   box.parent = parent;
   for (const child of run) {
     child.parent = box;