feat(text): verticalAlign works without maxHeight (flex-friendly)

examples/tests/text-vertical-align.ts

@@ -7,6 +7,7 @@ import type { ExampleSettings } from '../common/ExampleSettings.js';
 import { paginateTestRows, type TestRow } from '../common/paginateTestRows.js';
 import { PageContainer } from '../common/PageContainer.js';
 import { constructTestRow } from '../common/constructTestRow.js';
+import { waitForLoadedDimensions } from '../common/utils.js';
 
 export async function automation(settings: ExampleSettings) {
   // Snapshot all the pages
@@ -201,5 +202,42 @@ function generateVerticalAlignTest(
         );
       },
     },
+    {
+      title: `Explicit h, no maxHeight ('verticalAlign', ${textRenderer}, fontSize = 50, lineHeight = 70)`,
+      content: async (rowNode) => {
+        const baseProps = {
+          ...NODE_PROPS,
+          text: 'txyz',
+          textRendererOverride: textRenderer,
+          forceLoad: true,
+        } satisfies Partial<ITextNodeProps>;
+
+        const makeBoxedTextNode = async (
+          verticalAlign: 'top' | 'middle' | 'bottom',
+        ) => {
+          const node = renderer.createTextNode({
+            ...baseProps,
+            verticalAlign,
+            parent: rowNode,
+          });
+          await waitForLoadedDimensions(node);
+          node.h = CONTAINER_SIZE;
+          return node;
+        };
+
+        const middleNode = await makeBoxedTextNode('middle');
+        const topNode = await makeBoxedTextNode('top');
+        const bottomNode = await makeBoxedTextNode('bottom');
+
+        return await constructTestRow({ renderer, rowNode }, [
+          'verticalAlign: middle\n(node.h, no maxHeight)\n->',
+          getSquare(renderer, middleNode),
+          'top ->',
+          getSquare(renderer, topNode),
+          'bottom ->',
+          getSquare(renderer, bottomNode),
+        ]);
+      },
+    },
   ] satisfies TestRow[];
 }

src/core/CoreTextNode.ts

@@ -149,11 +149,14 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       }
     }
 
-    if (hasMaxHeight === true) {
+    const intrinsicH = this._renderInfo.height;
+    const boxH = hasMaxHeight === true ? maxHeight : h;
+    const slackY = boxH - intrinsicH;
+    if (slackY > 0) {
       if (verticalAlign === 'bottom') {
-        containY = maxHeight - h;
+        containY = slackY;
       } else if (verticalAlign === 'middle') {
-        containY = (maxHeight - h) * 0.5;
+        containY = slackY * 0.5;
       }
     }
 

src/core/text-rendering/TextRenderer.ts

@@ -231,10 +231,13 @@ export interface TrProps extends TrFontProps {
    */
   maxLines: number;
   /**
-   * Vertical alignment of the text block within `maxHeight`.
+   * Vertical alignment of the text block within its containing box.
    *
    * @remarks
-   * Activates when `maxHeight > 0`. Composes with `textBaselineMode`
+   * The containing box is `maxHeight` if set, otherwise the node's
+   * own `h` (which a flex parent or the user may have grown beyond
+   * the intrinsic text height). Activates whenever the box is taller
+   * than the intrinsic text height. Composes with `textBaselineMode`
    * (per-line anchor). CSS line-box semantics — `'top'` leaves
    * half-leading above the first line's cap-top; `'bottom'` leaves
    * half-leading below the last line's descender.