@react-x11/components 0.16.0 → 0.17.0

package/src/html/css/parse.ts

@@ -77,6 +77,43 @@ export interface Stylesheet {
   /** `@counter-style` rules, in order: a name and its descriptors, which
    *  the cascade reads into counter styles (CSS Counter Styles 3, 3). */
   counterStyles?: { prelude: string; declarations: Declaration[] }[];
+  /** `@keyframes` rules, in order (`KeyframesRule`). */
+  keyframes?: KeyframesRule[];
+}
+
+/**
+ * One `@keyframes` rule (CSS Animations 1, 3): the frames of the animation
+ * an `animation-name` names. Which rule a name finds is the cascade's to
+ * say (`Cascade.keyframes`): the last of its name whose media hold, in the
+ * latest layer, and never a prefixed one over one that is not.
+ */
+export interface KeyframesRule {
+  /** As written: a name is case-sensitive, as a custom ident is. */
+  name: string;
+  /** `@-webkit-keyframes`, which Chrome reads and which never takes the
+   *  place of an `@keyframes` of the same name, wherever either comes. */
+  prefixed: boolean;
+  /** The frames in the order written, which is the order two at one
+   *  offset cascade in. */
+  frames: Keyframe[];
+  /** The `@media` blocks the rule sits under, as a style rule's. */
+  media: MediaCondition[][] | null;
+  /** The cascade layer the rule is in, as a style rule's. */
+  layer: readonly number[] | null;
+}
+
+/** One frame of a `@keyframes`: a block of declarations at the offsets its
+ *  selector names. */
+export interface Keyframe {
+  /** Where in an iteration the frame is, 0 to 1: one per selector in its
+   *  list, `from` 0 and `to` 1. */
+  offsets: number[];
+  /** What the frame sets: no `!important` one, which a frame ignores, and
+   *  none of the animation's or a transition's own properties. */
+  declarations: Declaration[];
+  /** The `animation-timing-function` the frame eases to the next one by,
+   *  as written; null where it gives none and the animation's is used. */
+  easing: string | null;
 }
 
 /**
@@ -322,9 +359,22 @@ export function parseStylesheet(
             prelude: at.prelude,
             declarations: parseDeclarations(at.block),
           });
+        } else if (
+          (name === 'keyframes' || name === '-webkit-keyframes') &&
+          at.block !== null
+        ) {
+          const keyframes = parseKeyframes(at.prelude, at.block);
+          if (keyframes) {
+            (sheet.keyframes ??= []).push({
+              ...keyframes,
+              prefixed: name !== 'keyframes',
+              media,
+              layer,
+            });
+          }
         }
-        // @keyframes, @page: nothing to do, and the block was already
-        // consumed.
+        // @page, and an at-rule nobody knows: nothing to do, and the block
+        // was already consumed.
         continue;
       }
 
@@ -1764,6 +1814,105 @@ const GENERIC_FAMILIES = new Set([
   'default',
 ]);
 
+/** The properties a keyframe does not set: the animation's own, and a
+ *  transition's (CSS Animations 1, 3). */
+const NOT_IN_KEYFRAMES = /^(?:-webkit-)?(?:animation|transition)(?:-|$)/;
+
+/** A `<number-token>` percentage, `+12.5%` or `1e2%`. */
+const KEYFRAME_PERCENT = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?%$/i;
+
+/**
+ * A `@keyframes` block's name and frames (CSS Animations 1, 3), or null
+ * where its prelude is no name. A frame whose selector is not a list of
+ * `from`, `to` and percentages from 0 to 100 is dropped whole, as a style
+ * rule with a bad selector is, and the frames around it stand.
+ */
+function parseKeyframes(
+  prelude: string,
+  block: string,
+): { name: string; frames: Keyframe[] } | null {
+  const name = keyframesName(prelude);
+  if (name === null) return null;
+  const frames: Keyframe[] = [];
+  let i = 0;
+  const n = block.length;
+  while (i < n) {
+    i = skipTrivia(block, i);
+    if (i >= n) break;
+    // a frame holds declarations and nothing else
+    if (block[i] === '@' && startsIdent(block, i + 1)) {
+      i = readAtRule(block, i).end;
+      continue;
+    }
+    const braceAt = scanTo(block, i, '{');
+    if (braceAt >= n) break;
+    const selector = block.slice(i, braceAt);
+    const body = readBlock(block, braceAt);
+    i = body.end;
+    const offsets = keyframeOffsets(selector);
+    if (!offsets) continue;
+    let easing: string | null = null;
+    const declarations: Declaration[] = [];
+    for (const d of parseDeclarations(body.body)) {
+      if (d.important) continue;
+      if (
+        d.prop === 'animation-timing-function' ||
+        d.prop === '-webkit-animation-timing-function'
+      ) {
+        easing = d.value;
+      } else if (!NOT_IN_KEYFRAMES.test(d.prop)) {
+        declarations.push(d);
+      }
+    }
+    frames.push({ offsets, declarations, easing });
+  }
+  return { name, frames };
+}
+
+/** A `@keyframes` prelude's name: a string, or an identifier that is not
+ *  `none` or a CSS-wide keyword; null for anything else. */
+function keyframesName(prelude: string): string | null {
+  const v = prelude.trim();
+  if (!v) return null;
+  if (v[0] === '"' || v[0] === "'") {
+    const name = unquote(v);
+    return name !== v && name ? name : null;
+  }
+  if (!startsIdent(v, 0)) return null;
+  const ident = readIdent(v, 0);
+  if (ident.end !== v.length) return null;
+  return KEYFRAMES_RESERVED.has(ident.value.toLowerCase()) ? null : ident.value;
+}
+
+const KEYFRAMES_RESERVED = new Set([
+  'none',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'default',
+]);
+
+/** A keyframe selector's offsets, 0 to 1, or null where any of its list is
+ *  not one. */
+function keyframeOffsets(selector: string): number[] | null {
+  const out: number[] = [];
+  for (const part of selector.split(',')) {
+    const v = part.trim().toLowerCase();
+    if (v === 'from') out.push(0);
+    else if (v === 'to') out.push(1);
+    else if (KEYFRAME_PERCENT.test(v)) {
+      const pct = Number(v.slice(0, -1));
+      if (!(pct >= 0 && pct <= 100)) return null;
+      out.push(pct / 100);
+    } else {
+      return null;
+    }
+  }
+  return out;
+}
+
 /**
  * A `@font-face` block, or null when it names no family or no source — a
  * rule CSS Fonts 4 (4.3) drops whole. A rule whose sources are all

package/src/html/css/style.ts

@@ -41,6 +41,13 @@ import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
 import type { TransformFunction } from './transform.js';
+import {
+  ANIMATION_LONGHANDS,
+  NO_ANIMATIONS,
+  animationLonghand,
+  parseAnimation,
+} from './animation.js';
+import type { Animations } from './animation.js';
 import {
   LIGHT_DARK,
   SYSTEM_COLOR,
@@ -590,6 +597,10 @@ export interface ComputedStyle {
   /** `transform-origin`: the point a transform turns and scales about,
    *  from the border box's top left, a percentage of its width and height. */
   transformOrigin: [Len, Len];
+  /** `animation` and its longhands, each a list (`css/animation.ts`):
+   *  `NO_ANIMATIONS`, shared, where nothing sets one. What they leave on
+   *  the style is in its other fields already (`Cascade._computeStyle`). */
+  animations: Animations;
   zIndex: number | 'auto';
   /** A keyword, a length to raise the box by, or a percentage of its own
    *  line height. */
@@ -1085,6 +1096,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     scale: null,
     transform: null,
     transformOrigin: [{ pct: 50 }, { pct: 50 }],
+    animations: NO_ANIMATIONS,
     zIndex: AUTO,
     verticalAlign: 'baseline',
 
@@ -1438,13 +1450,23 @@ const BORDER_WIDTH_KEYWORDS: Record<string, number> = {
   thick: 5,
 };
 
-/** `-webkit-` names that are the multicol properties' own. */
-const MULTICOL_ALIASES: Record<string, string> = {
+/** `-webkit-` names that are the multicol properties' own, and the
+ *  animation's. */
+const PREFIXED_ALIASES: Record<string, string> = {
   '-webkit-columns': 'columns',
   '-webkit-column-count': 'column-count',
   '-webkit-column-width': 'column-width',
   '-webkit-column-gap': 'column-gap',
   '-webkit-column-break-inside': 'break-inside',
+  '-webkit-animation': 'animation',
+  '-webkit-animation-name': 'animation-name',
+  '-webkit-animation-duration': 'animation-duration',
+  '-webkit-animation-timing-function': 'animation-timing-function',
+  '-webkit-animation-delay': 'animation-delay',
+  '-webkit-animation-iteration-count': 'animation-iteration-count',
+  '-webkit-animation-direction': 'animation-direction',
+  '-webkit-animation-fill-mode': 'animation-fill-mode',
+  '-webkit-animation-play-state': 'animation-play-state',
 };
 
 /**
@@ -1463,11 +1485,11 @@ export function applyDeclaration(
   ctx: UnitContext,
 ): void {
   const written = prop.toLowerCase();
-  // the multicol properties under the names WebKit had them by, which
-  // Blink still reads, each an alias of the property (`-webkit-column-
-  // count` in its `css_properties.json5`): a page written for it alone
-  // names no other
-  const name = MULTICOL_ALIASES[written] ?? written;
+  // the multicol and animation properties under the names WebKit had them
+  // by, which Blink still reads, each an alias of the property (`-webkit-
+  // column-count` in its `css_properties.json5`): a page written for it
+  // alone names no other
+  const name = PREFIXED_ALIASES[written] ?? written;
   let value = rawValue.trim();
   if (!value) return;
   // a logical property is the physical one it stands for, the CSS-wide
@@ -1906,6 +1928,27 @@ export function applyDeclaration(
       if (a !== null) style.opacity = a;
       return;
     }
+    case 'animation': {
+      const animations = parseAnimation(value);
+      if (animations) style.animations = animations;
+      return;
+    }
+    case 'animation-name':
+    case 'animation-duration':
+    case 'animation-timing-function':
+    case 'animation-delay':
+    case 'animation-iteration-count':
+    case 'animation-direction':
+    case 'animation-fill-mode':
+    case 'animation-play-state': {
+      const animations = animationLonghand(
+        style.animations,
+        ANIMATION_LONGHANDS[name],
+        value,
+      );
+      if (animations) style.animations = animations;
+      return;
+    }
     case 'translate': {
       // `none`, or across, down, and a depth nothing here has
       if (value.trim().toLowerCase() === 'none') {
@@ -5646,6 +5689,14 @@ export function initialOne(
     style.mask = { ...style.mask, [list]: initial.mask[list] };
     return;
   }
+  const animation = ANIMATION_LONGHANDS[PREFIXED_ALIASES[name] ?? name];
+  if (animation) {
+    style.animations = {
+      ...style.animations,
+      [animation]: initial.animations[animation],
+    };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   for (const key of keys) {
@@ -5663,6 +5714,15 @@ function inheritOne(
     style.mask = { ...style.mask, [list]: parent.mask[list] };
     return;
   }
+  // each longhand of the animation is a list of its own, as the mask's are
+  const animation = ANIMATION_LONGHANDS[PREFIXED_ALIASES[name] ?? name];
+  if (animation) {
+    style.animations = {
+      ...style.animations,
+      [animation]: parent.animations[animation],
+    };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   // A border colour left to `currentColor` inherits as the keyword and
@@ -5717,6 +5777,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'border-image': ['borderImage'],
   mask: ['mask'],
   '-webkit-mask': ['mask'],
+  animation: ['animations'],
+  '-webkit-animation': ['animations'],
   'border-image-source': ['borderImage'],
   'border-image-slice': ['borderImage'],
   'border-image-width': ['borderImage'],

package/src/html/css/ua.ts

@@ -211,12 +211,16 @@ col { display: table-column; }
 /* The form controls are real widgets rather than drawn boxes, so what the
    UA sheet owes them is a *box* of about the right size in the flow — the
    widget is painted into it by the component above. 'inline-block' is what
-   makes a label and its input share a line. */
+   makes a label and its input share a line. Chrome's margins and alignment:
+   none round a field, a select, a button or a text area, each on its line's
+   baseline — a field's text on the text beside it (\`CONTROL_BASELINES\`) —
+   and a meter or a progress bar a fifth of an em under it. */
 input, button, select, textarea, meter, progress {
   display: inline-block;
-  vertical-align: middle;
-  margin: 3px 2px;
+  vertical-align: baseline;
+  margin: 0;
 }
+meter, progress { vertical-align: -0.2em; }
 /* A control's text is a system font's, not its parent's: Chrome gives these
    four \`font: -webkit-small-control\`, Arial at the default size less 2pt
    (13.33px) whatever the text around it is set in, and Gecko \`-moz-field\`
@@ -231,8 +235,6 @@ input, button, select, textarea {
   font-size: ${look.controlFontSize ?? look.fontSize}px;
 }
 textarea { font-family: ${mono}; }
-/* Chrome's own UA margins for the checkables, near enough: they are the
-   controls that sit hard against their label text otherwise. */
 /* HTML's rendering section (15.3.10): a control's text keeps none of the
    spacing, the line height, the case or the indent of the text around it.
    A button in a paragraph of 'line-height: 1.5' is its own font's line
@@ -258,8 +260,11 @@ input:focus-visible, textarea:focus-visible {
   outline: auto 1px -webkit-focus-ring-color;
   outline-offset: 0;
 }
-input[type=checkbox] { margin: 3px 4px 3px 4px; }
-input[type=radio] { margin: 3px 4px 3px 5px; }
+/* Chrome's own margins for the checkables and a range, which sit on their
+   border box's bottom edge, the margin under the line */
+input[type=checkbox] { margin: 3px 3px 3px 4px; }
+input[type=radio] { margin: 3px 3px 0 5px; }
+input[type=range] { margin: 2px; }
 input[type=hidden] { display: none; }
 /* A <button> is drawn rather than mounted: its content is the document's —
    an icon, a label in spans, a pill of the page's own design, which is what
@@ -280,7 +285,6 @@ button {
   cursor: pointer;
 }
 button[disabled] { color: ${look.mutedColor}; cursor: default; }
-textarea { vertical-align: top; }
 fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.6em; border: 1px solid ${look.borderColor}; }
 legend { display: block; padding: 0 2px; }
 label { cursor: pointer; }

package/src/html/layout/boxes.ts

@@ -562,6 +562,40 @@ export type ReplacedKind =
   /** An inline `<svg>`: a drawing, sized by what it says of its size. */
   | 'svg';
 
+/**
+ * Where a control sits on the line, as Chrome sets it: a field, a select
+ * or an input button on the baseline of the text it shows, its line in its
+ * face centred in its content box — that face's ascent and descent — and a
+ * checkbox, a radio button or a range on its border box's bottom, its
+ * bottom margin under the line. A `<textarea>` is none of these, and sits
+ * on its bottom margin edge as a box that scrolls does.
+ */
+export const CONTROL_BASELINES = new WeakMap<
+  Box,
+  InlineDecoration | 'border'
+>();
+
+function controlBaseline(
+  el: Element,
+  kind: ReplacedKind,
+  style: ComputedStyle,
+  options: BuildOptions,
+): InlineDecoration | 'border' | null {
+  if (kind === 'checkbox' || kind === 'radio') return 'border';
+  if (kind === 'input' && (attr(el, 'type') ?? '').toLowerCase() === 'range') {
+    return 'border';
+  }
+  if (kind !== 'input' && kind !== 'select' && kind !== 'button') return null;
+  // a list box shows rows, and sits on its bottom edge
+  if (kind === 'select' && Number(attr(el, 'size') ?? 1) > 1) return null;
+  return (
+    options.faceExtent?.(style) ?? {
+      ascent: style.fontSize * 0.8,
+      descent: style.fontSize * 0.2,
+    }
+  );
+}
+
 /** A replaced box's intrinsic dimensions, in device pixels. */
 export interface Intrinsic {
   /** Its size — or, on an axis `missing` names, the default object size of
@@ -853,6 +887,10 @@ export interface BuildOptions {
    *  pixels: what a list marker's image with no size of its own is sized
    *  by (`_markerImageSize`). Where it is not known, 0.8em. */
   faceAscent?(style: ComputedStyle): number | undefined;
+  /** How far a style's first face reaches above and below its baseline,
+   *  in device pixels: where a control sets its text, which is where its
+   *  baseline is (`CONTROL_BASELINES`). */
+  faceExtent?(style: ComputedStyle): InlineDecoration | undefined;
   /** The size a real widget wants, so the box in the flow is the size the
    *  control will be drawn at. */
   controlSize(
@@ -1486,6 +1524,8 @@ class Builder {
       ratio: 0,
     };
     this._controls.push(box);
+    const baseline = controlBaseline(el, replaced, style, this._options);
+    if (baseline) CONTROL_BASELINES.set(box, baseline);
     // A control's value is the widget's, not the document's: putting it in
     // the selection index would make Ctrl+A copy the contents of every text
     // field, which no document viewer does.