@react-x11/components 0.14.0 → 0.14.1

package/src/html/css/shapes.ts

@@ -0,0 +1,239 @@
+// What a style sheet says of the shapes in a drawing.
+//
+// An inline `<svg>` is a replaced box: the box builder stops at it, and no
+// computed style is made for what is inside. `fill`, `stroke` and their kin
+// are properties all the same (SVG 2, 6.2 and 13.2), which a rule of the
+// document's sets on a `<path>` as it would on a paragraph — a logo's
+// `.dark .logo path { fill: #fff }` — and a drawing exported with a style
+// sheet of its own, `.st0 { fill: #fff }` on `<path class="st0">`, has all
+// its colours in one. So the cascade is run for them narrowly
+// (`Cascade.shapeStyles`): over the rules that declare one of the
+// properties here, and down to values `SvgView` reads from a `style`
+// attribute, which is where the drawing's copy of an element carries them
+// (`svg.ts`). A `ComputedStyle` per `<path>` would be a few hundred
+// properties for the dozen a shape has, on a page of hundreds of icons.
+import type { Element } from 'domhandler';
+import { LIGHT_DARK, lightDark } from './color.js';
+import { inkColor, parseAlpha, parseColor, parseLength } from './values.js';
+import type { UnitContext } from './values.js';
+
+/** What the rules give one element of a drawing: each property they set,
+ *  as `SvgView` reads it — `inherit` for one they put back to what the
+ *  element inherits, over its own attribute. */
+export type ShapeStyle = Readonly<Record<string, string>>;
+
+/** What the rules give the elements of one drawing, and all of it as a
+ *  string: what a drawing's tree was last made with (`SvgDrawing`). */
+export interface ShapeStyles {
+  readonly of: ReadonlyMap<Element, ShapeStyle>;
+  readonly key: string;
+}
+
+/** Each property read, and whether it is inherited. */
+const PROPS: Record<string, boolean> = {
+  fill: true,
+  stroke: true,
+  'stroke-width': true,
+  'stroke-linecap': true,
+  'stroke-linejoin': true,
+  'stroke-miterlimit': true,
+  'fill-rule': true,
+  'fill-opacity': true,
+  'stroke-opacity': true,
+  color: true,
+  visibility: true,
+  opacity: false,
+  display: false,
+  'stop-color': false,
+  'stop-opacity': false,
+};
+
+/** Whether a rule with this declaration is one to keep for drawings. */
+export function isShapeProp(prop: string): boolean {
+  return PROPS[prop] !== undefined;
+}
+
+/** The properties the drawing's box has from its computed style already:
+ *  its paint, which `paintSvg` hands the drawing, and what makes it a box,
+ *  shown and see-through as one. */
+export const ROOT_BOX_PROPS: ReadonlySet<string> = new Set([
+  'fill',
+  'stroke',
+  'color',
+  'display',
+  'visibility',
+  'opacity',
+]);
+
+/** Each at its initial value (SVG 2, 13; CSS Color 4; CSS Display 3). */
+const INITIAL: Record<string, string> = {
+  fill: '#000000',
+  stroke: 'none',
+  'stroke-width': '1',
+  'stroke-linecap': 'butt',
+  'stroke-linejoin': 'miter',
+  'stroke-miterlimit': '4',
+  'fill-rule': 'nonzero',
+  'fill-opacity': '1',
+  'stroke-opacity': '1',
+  visibility: 'visible',
+  opacity: '1',
+  display: 'inline',
+  'stop-color': '#000000',
+  'stop-opacity': '1',
+};
+
+/** The elements a rule's subject can be, where it names one by its type,
+ *  for the rule to reach into a drawing: the ones `SvgView` draws, or
+ *  reads a paint from. `a` is both languages'. */
+export const SHAPE_TAGS: ReadonlySet<string> = new Set([
+  'svg',
+  'g',
+  'a',
+  'path',
+  'rect',
+  'circle',
+  'ellipse',
+  'line',
+  'polyline',
+  'polygon',
+  'text',
+  'tspan',
+  'use',
+  'symbol',
+  'switch',
+  'image',
+  'stop',
+]);
+
+/** What a shape's values are read against: the drawing's own `color` and
+ *  colour scheme, and its font size for a length in `em`. */
+export interface ShapeContext {
+  color: string;
+  scheme: 'light' | 'dark';
+  units: UnitContext;
+}
+
+/**
+ * A `fill` or a `stroke` (SVG 2, 13.2): `none`, a colour, or a `url()`
+ * naming a gradient in the drawing, with what follows it, its fallback,
+ * left off. Null for anything else, `context-fill` and `context-stroke`
+ * among it, which only a marker or a `<use>` has a context for.
+ */
+export function svgPaint(value: string): string | null {
+  const v = value.trim();
+  if (v.toLowerCase() === 'none') return 'none';
+  const url = /^url\(\s*(['"]?)(#[^'")\s]+)\1\s*\)/i.exec(v);
+  if (url) return `url(${url[2]})`;
+  return parseColor(v);
+}
+
+const NUMBER = /^[+-]?(?:\d*\.\d+|\d+)(?:e[+-]?\d+)?$/i;
+
+/** A word of a `display` that makes a box (CSS Display 3, 2). */
+const DISPLAY =
+  /^(?:block|inline|run-in|flow|flow-root|table|flex|grid|ruby|list-item|contents|inline-[a-z]+|table-[a-z-]+|ruby-[a-z-]+|-webkit-[a-z-]+)$/;
+
+const LINE_JOINS: Record<string, string> = {
+  miter: 'miter',
+  round: 'round',
+  bevel: 'bevel',
+  // the two a canvas has no join for end in a miter, clipped or not
+  'miter-clip': 'miter',
+  arcs: 'miter',
+};
+
+/**
+ * One declaration's value as a drawing reads it, or null for a value the
+ * property does not take, which leaves the declaration out of the cascade
+ * as any invalid one is left. `inherit` for a CSS-wide keyword that puts an
+ * inherited property back to what the element inherits.
+ */
+export function shapeValue(
+  prop: string,
+  raw: string,
+  ctx: ShapeContext,
+): string | null {
+  let value = raw.trim();
+  const wide = value.toLowerCase();
+  if (wide === 'inherit') return PROPS[prop] ? 'inherit' : null;
+  if (wide === 'initial') {
+    return prop === 'color'
+      ? (ctx.units.initial?.color ?? '#000000')
+      : INITIAL[prop];
+  }
+  if (wide === 'unset' || wide === 'revert' || wide === 'revert-layer') {
+    return PROPS[prop] ? 'inherit' : INITIAL[prop];
+  }
+  if (LIGHT_DARK.test(value)) {
+    const picked = lightDark(value, ctx.scheme);
+    if (picked === null) return null;
+    value = picked;
+  }
+  switch (prop) {
+    case 'fill':
+    case 'stroke': {
+      const paint = svgPaint(value);
+      // `currentColor` is the shape's own `color`, which the drawing knows
+      return paint === null || paint === 'currentColor'
+        ? paint
+        : inkColor(paint, ctx.color);
+    }
+    case 'color':
+    case 'stop-color': {
+      const color = parseColor(value);
+      return color === null ? null : inkColor(color, ctx.color);
+    }
+    case 'stroke-width': {
+      // a number is user units, as a length in pixels is; a percentage is
+      // of the viewport's diagonal, which only the drawing has
+      const px = NUMBER.test(value)
+        ? Number(value)
+        : lengthIn(value, ctx.units);
+      return px !== null && px >= 0 ? String(px) : null;
+    }
+    case 'stroke-miterlimit': {
+      const n = NUMBER.test(value) ? Number(value) : NaN;
+      return n >= 1 ? String(n) : null;
+    }
+    case 'fill-opacity':
+    case 'stroke-opacity':
+    case 'stop-opacity':
+    case 'opacity': {
+      const a = parseAlpha(value);
+      return a === null ? null : String(a);
+    }
+    case 'stroke-linecap': {
+      const v = value.toLowerCase();
+      return v === 'butt' || v === 'round' || v === 'square' ? v : null;
+    }
+    case 'stroke-linejoin':
+      return LINE_JOINS[value.toLowerCase()] ?? null;
+    case 'fill-rule': {
+      const v = value.toLowerCase();
+      return v === 'nonzero' || v === 'evenodd' ? v : null;
+    }
+    case 'visibility': {
+      const v = value.toLowerCase();
+      if (v === 'visible') return v;
+      return v === 'hidden' || v === 'collapse' ? 'hidden' : null;
+    }
+    case 'display': {
+      // `none`, or some box: which one is nothing to a shape
+      const v = value.toLowerCase();
+      if (v === 'none') return v;
+      return v.split(/\s+/).every((word) => DISPLAY.test(word))
+        ? 'inline'
+        : null;
+    }
+    default:
+      return null;
+  }
+}
+
+/** A length in user units, which are CSS pixels; null for none, and for a
+ *  percentage. */
+function lengthIn(value: string, units: UnitContext): number | null {
+  const length = parseLength(value, units);
+  return typeof length === 'number' ? length / units.scale : null;
+}

package/src/html/css/style.ts

@@ -43,6 +43,7 @@ import type { CustomProps } from './vars.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
 import type { TransformFunction } from './transform.js';
 import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
+import { svgPaint } from './shapes.js';
 
 export type Display =
   | 'none'
@@ -5154,19 +5155,6 @@ const POINTER_EVENTS = new Set([
   'stroke',
   'all',
 ]);
-/**
- * A `fill` or a `stroke` (SVG 2, 13.2): `none`, a colour, or a `url()`
- * naming a gradient in the drawing, with what follows it, its fallback,
- * left off. Null for anything else, `context-fill` and `context-stroke`
- * among it, which only a marker or a `<use>` has a context for.
- */
-function svgPaint(value: string): string | null {
-  const v = value.trim();
-  if (v.toLowerCase() === 'none') return 'none';
-  const url = /^url\(\s*(['"]?)(#[^'")\s]+)\1\s*\)/i.exec(v);
-  if (url) return `url(${url[2]})`;
-  return parseColor(v);
-}
 
 const OBJECT_FITS = new Set(['fill', 'contain', 'cover', 'none', 'scale-down']);
 

package/src/html/layout/block.ts

@@ -2324,8 +2324,9 @@ function stretchHeight(box: Box): number | null {
  * stretched item's, a flexed one's in a container of a definite height (CSS
  * Flexbox 9.8), a grid item's stretched down its area (CSS Grid 1, 11.1) —
  * which what is in it takes its percentages of, and which an item that is
- * a flex or grid container itself lays its own items out in. Set by
- * `flex.ts` and `css-grid.ts` for the item's own layout alone.
+ * a flex or grid container itself lays its own items out in, and a table
+ * shares out among its rows. Set by `flex.ts` and `css-grid.ts` for the
+ * item's own layout alone.
  */
 export const FLEXED_HEIGHT = new WeakMap<Box, number>();
 
@@ -2333,12 +2334,23 @@ export const FLEXED_HEIGHT = new WeakMap<Box, number>();
  * The content height a flex layout gave an item without making it definite:
  * flexed along a column that has no height of its own, which 9.8 leaves
  * indefinite. An item that is a flex or grid container lays its own items
- * out in it all the same — it is its used size (9.7) — and nothing in it
- * takes a percentage of it. Set by `flex.ts` for the item's own layout
- * alone.
+ * out in it all the same — it is its used size (9.7) — as a table shares
+ * it among its rows, and nothing in it takes a percentage of it. Set by
+ * `flex.ts` for the item's own layout alone.
  */
 export const USED_HEIGHT = new WeakMap<Box, number>();
 
+/**
+ * A table a grid stretches across its area, whose `auto` width is then the
+ * one it is laid out at. `normal` stretches any grid item but a replaced
+ * one (CSS Grid 1, 6.2), a table among them, where in a block's flow a
+ * table's `auto` width is its columns' (CSS 2.1 17.5.2; Blink leaves tables
+ * out of the boxes a block stretches, `space_utils.cc`, and stretches them
+ * in a grid, `grid_item.cc`). Set by `css-grid.ts` for the item's own
+ * layout alone, and never while its widths are measured.
+ */
+export const STRETCHED_ACROSS = new WeakSet<Box>();
+
 /**
  * Hand a box's children the height their percentages resolve against —
  * through inline boxes, which are no containing block, to the inline-block
@@ -3167,6 +3179,16 @@ export function intrinsicWidth(box: Box, seen?: { cut: boolean }): number {
   if (contained(box, CONTAIN_WIDTH)) {
     return box.style.containIntrinsicWidth ?? 0;
   }
+  // a table is as wide as its layout made it: its columns, the spacing
+  // either side of them and between, and its captions' least (`layoutTable`)
+  // — at no width limit its widest, and at none its narrowest. What it
+  // holds says less: its rows run from the first column to the last, the
+  // spacing either side outside them, and measured by them a table in a
+  // flex row, a grid, a float or an `inline-table` came to that much too
+  // narrow, and its columns gave it up
+  if (box.kind === 'table' && Number.isFinite(box.width)) {
+    return Math.max(0, box.width - box.horizontalExtra);
+  }
   // a grid laid out at no width limit has its columns at their widest, and
   // is as wide as they are — an item that runs past its column makes it no
   // wider — or, where it has none, as where its items end

package/src/html/layout/boxes.ts

@@ -38,6 +38,7 @@ import type { CollapsedTable } from './collapse.js';
 import { quoteAt } from '../css/content.js';
 import type { CounterStyles } from '../css/counter-styles.js';
 import type { ContentItem } from '../css/content.js';
+import type { ShapeStyles } from '../css/shapes.js';
 import {
   CONTAIN_STYLE,
   FIRST_LINE_INHERITED,
@@ -713,6 +714,15 @@ export const COLUMN_ROWS = new WeakMap<
  *  that would ask the three maps above of every box ask first. */
 export const columned = { any: false };
 
+/** What the document's rules give the elements inside an inline `<svg>`
+ *  (`Cascade.shapeStyles`), null where they give none. */
+export type ShapeStyler = (box: Box) => ShapeStyles | null;
+
+/** What `BoxTree.shapeStyler` answered for each drawing's box it has been
+ *  asked of, which are the ones painted: a box restyled where it is has
+ *  its answer put here again (`HtmlViewNode._hoverInPlace`). */
+export const SHAPE_STYLES = new WeakMap<Box, ShapeStyles | null>();
+
 /** 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. */
@@ -774,6 +784,11 @@ export interface BoxTree {
    *  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;
+  /** What the rules give the elements in each inline `<svg>`
+   *  (`ShapeStyler`), which have no boxes and no styles, where any rule
+   *  could reach one: worked out as a drawing is first painted, since a
+   *  page of icons shows few of them at once. */
+  shapeStyler: ShapeStyler | 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. */
@@ -939,6 +954,7 @@ class Builder {
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
       selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
+      shapeStyler: cascade.stylesShapes ? this._shapeStyler() : null,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
@@ -971,6 +987,20 @@ class Builder {
     };
   }
 
+  /** `BoxTree.shapeStyler`, over this build's cascade: each drawing's
+   *  once, from its box's style as it is when first asked. */
+  private _shapeStyler(): ShapeStyler {
+    const cascade = this._options.cascade;
+    return (box) => {
+      let shapes = SHAPE_STYLES.get(box);
+      if (shapes === undefined) {
+        shapes = box.el ? cascade.shapeStyles(box.el, box.style) : null;
+        SHAPE_STYLES.set(box, shapes);
+      }
+      return shapes;
+    };
+  }
+
   /** `BoxTree.firstLineStyler`, over this build's cascade. */
   private _firstLineStyler(): FirstLineStyler {
     const cascade = this._options.cascade;

package/src/html/layout/css-grid.ts

@@ -31,6 +31,7 @@ import { Box, GRID_TRACKS, isBlank } from './boxes.js';
 import {
   FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  STRETCHED_ACROSS,
   USED_HEIGHT,
   centreButton,
   clampHeight,
@@ -60,6 +61,9 @@ interface Item {
   /** Min-content and max-content widths, margin box, taken when asked. */
   min: number;
   max: number;
+  /** Whether it is a table stretched across its area (`STRETCHED_ACROSS`),
+   *  which `layoutItem` decides. */
+  across: boolean;
 }
 
 /**
@@ -203,6 +207,11 @@ export function layoutGrid(
       const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
       widest = narrowest = Math.max(style.width + extra, box.horizontalExtra);
     } else {
+      // A percentage is of an area the columns are still being sized for,
+      // and what it comes to depends on what the item makes them: it is
+      // `auto` for that (CSS Sizing 3, 5.2.1), and the item's content says
+      // how wide it is. Measured at the width a percentage made of the
+      // probe's, an item `width: 100%` made its `auto` column nothing.
       const fresh = box.intrinsicMaxContent < 0;
       widest = maxContentOf(box, ctx);
       if (box.intrinsicMinContent < 0) {
@@ -210,8 +219,7 @@ export function layoutGrid(
         // which is the max-content one only if it was made just now
         const exact =
           fresh && ctx.fonts ? exactMinContent(box, ctx.fonts) : null;
-        box.intrinsicMinContent =
-          exact ?? measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE);
+        box.intrinsicMinContent = exact ?? minContentOf(box, ctx);
       }
       narrowest = box.intrinsicMinContent;
     }
@@ -401,21 +409,27 @@ export function layoutGrid(
       // purpose"): a card's `margin-top: auto` takes what its row is taller
       // than the card by, its `flex: 1` grows into it (CSS Flexbox 8.1,
       // 9.7). Its content's own height is the same layout, and kept.
+      // A table shares out among its rows what the area is taller than
+      // they are (`layoutTable`), and is no shorter than they are however
+      // short its area: its rows are the least it can be, as they are
+      // where it has a height of its own (CSS 2.1 17.5.3).
       if (
         child.kind !== 'replaced' &&
         (wide !== null ||
           percentHeightsIn(child) ||
-          (child.kind === 'flex' && height !== child.height))
+          (child.kind === 'flex' && height !== child.height) ||
+          (child.kind === 'table' && height > child.height + 0.01))
       ) {
         FLEXED_HEIGHT.set(child, Math.max(0, height - child.verticalExtra));
         try {
-          ctx.layoutSubtree(child, width, area);
+          layoutAcross(item, width, area, ctx);
         } finally {
           FLEXED_HEIGHT.delete(child);
         }
       }
       child.width = width;
-      child.height = height;
+      child.height =
+        child.kind === 'table' ? Math.max(height, child.height) : height;
       centreButton(child);
     }
     moveTo(
@@ -596,6 +610,7 @@ function place(
           cols: p.bs,
           min: -1,
           max: -1,
+          across: false,
         }
       : {
           box: p.box,
@@ -605,6 +620,7 @@ function place(
           cols: p.as,
           min: -1,
           max: -1,
+          across: false,
         },
   );
 }
@@ -641,14 +657,37 @@ function extent(
 }
 
 /** An item's max-content width, its border box's: measured once in the
- *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). */
+ *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). Its
+ *  content's, whatever width it has of its own (`minContentOf`). */
 function maxContentOf(box: Box, ctx: LayoutContext): number {
   if (box.intrinsicMaxContent < 0) {
-    box.intrinsicMaxContent = measureIntrinsicWidth(box, ctx, Infinity);
+    box.intrinsicMaxContent = measureIntrinsicWidth(
+      box,
+      ctx,
+      Infinity,
+      box.kind !== 'replaced',
+    );
   }
   return box.intrinsicMaxContent;
 }
 
+/**
+ * An item's min-content width, its border box's. What it is measured for is
+ * what it contributes to its columns, and the width a percentage makes of
+ * them is not known then: a box that is not replaced is as wide as its
+ * content for that, whatever its own `width` says, and a replaced element
+ * takes its percentage of nothing (CSS Sizing 3, 5.2.1). A width that is a
+ * length is weighed apart (`measure` in `layoutGrid`).
+ */
+function minContentOf(box: Box, ctx: LayoutContext): number {
+  return measureIntrinsicWidth(
+    box,
+    ctx,
+    MIN_CONTENT_PROBE,
+    box.kind !== 'replaced',
+  );
+}
+
 /**
  * Lay an item out in its area: stretched across it where its width is
  * `auto` and it is stretched, or at its content's width, no wider than
@@ -693,11 +732,7 @@ function layoutItem(
       probed = true;
     }
     if (child.intrinsicMinContent < 0) {
-      child.intrinsicMinContent = measureIntrinsicWidth(
-        child,
-        ctx,
-        MIN_CONTENT_PROBE,
-      );
+      child.intrinsicMinContent = minContentOf(child, ctx);
       probed = true;
     }
     if (probed) resolveEdges(child, area);
@@ -757,7 +792,15 @@ function layoutItem(
     width = Math.min(widest, Math.max(narrowest, room));
   }
   if (child.kind !== 'replaced') {
-    ctx.layoutSubtree(child, width, area);
+    // a table stretched across is as wide as its area, which in a block's
+    // flow it would shrink from to its columns (`STRETCHED_ACROSS`)
+    item.across =
+      across &&
+      child.kind === 'table' &&
+      style.width === AUTO &&
+      !keyword &&
+      through === null;
+    layoutAcross(item, width, area, ctx);
     return;
   }
   // a replaced element sizes itself from its style: then it is given the
@@ -776,6 +819,27 @@ function layoutItem(
   }
 }
 
+/** Lay an item out at a width: a table stretched across its area at that
+ *  width as its own (`STRETCHED_ACROSS`), for this layout alone. */
+function layoutAcross(
+  item: Item,
+  width: number,
+  area: number,
+  ctx: LayoutContext,
+): void {
+  const child = item.box;
+  if (!item.across) {
+    ctx.layoutSubtree(child, width, area);
+    return;
+  }
+  STRETCHED_ACROSS.add(child);
+  try {
+    ctx.layoutSubtree(child, width, area);
+  } finally {
+    STRETCHED_ACROSS.delete(child);
+  }
+}
+
 /** What the percentages in a box's padding come to across it, its edges
  *  resolved: what a width of its content's, measured with them of nothing,
  *  is short of its border box by. */

package/src/html/layout/flex.ts

@@ -590,14 +590,19 @@ function layoutItemAt(
   // size all the same (9.7), and `min-h-screen flex flex-col` around a
   // `flex-1 flex items-center` centres what is in that. At its content's
   // own height there is nothing to share, and the layout it has is that
-  // one: the tallest card of a row is laid out the once.
+  // one: the tallest card of a row is laid out the once. A table shares
+  // what it is given past its rows among them (`layoutTable`), and a
+  // height short of them is none it can have: it is laid out again where
+  // it was given more.
   const given = definite ?? (column ? height : null);
-  const shares =
-    box.kind === 'flex' &&
-    given !== null &&
-    !(
-      Math.abs(naturalHeight(box, ctx, width, containing, laid) - given) <= 0.01
-    );
+  let shares = false;
+  if (given !== null && (box.kind === 'flex' || box.kind === 'table')) {
+    const natural = naturalHeight(box, ctx, width, containing, laid);
+    shares =
+      box.kind === 'flex'
+        ? !(Math.abs(natural - given) <= 0.01)
+        : !(natural >= given - 0.01);
+  }
   if (given !== null) {
     const inner = Math.max(0, given - box.verticalExtra);
     if (Object.is(inner, percentBaseInside(box))) {
@@ -630,8 +635,16 @@ function layoutItemAt(
   // A stretched item is taller than its content, and the box has to say so
   // or its background stops short of the row — and it is no taller than its
   // line where its content is, or than what its ratio makes of its width:
-  // its height is the line's (CSS Flexbox 9.4, step 11).
-  if (height > box.height || column || definite !== null) box.height = height;
+  // its height is the line's (CSS Flexbox 9.4, step 11). But for a table,
+  // whose rows are the least it can be, however short its line (CSS 2.1
+  // 17.5.3, as a height of its own is; Blink: "Tables can't shrink below
+  // their min-intrinsic size").
+  if (
+    height > box.height ||
+    ((column || definite !== null) && box.kind !== 'table')
+  ) {
+    box.height = height;
+  }
   // and a button's content is centred in the height it came to
   centreButton(box);
   moveTo(box, x, y);