xbintsc 0.5.45 → 0.5.52

package/runtime/ext_gui/inline_svg.h

@@ -19,8 +19,10 @@
 #define XT_GUI_INLINE_SVG_H
 
 #include <string>
+#include <unordered_map>
 
 #include "dom.h"
+#include "style.h"
 #include "svg.h"
 
 namespace xtgui {
@@ -34,7 +36,9 @@ bool xt_inline_svg_is_root(const Node *node);
  * expects. Text outside `<style>` is dropped (NanoSVG renders shapes, not
  * `<text>`), and HTML-only attributes are skipped. Returns an empty string when
  * `node` is not an `<svg>` element. */
-std::string xt_inline_svg_serialize(const Node *node);
+std::string xt_inline_svg_serialize(
+    const Node *node,
+    const std::unordered_map<const Node *, XtStyle> *styles = nullptr);
 
 }  // namespace xtgui
 

package/runtime/ext_gui/layout.cpp

@@ -6,7 +6,7 @@
  *   - Block flow: consecutive inline-level children form an anonymous inline
  *     formatting context; block-level children are stacked vertically.
  *   - Inline flow: greedy, word-based line breaking with `text-align`; text is
- *     measured with the HarfBuzz/FreeType stack in `text.h`.
+ *     measured with the stb_truetype stack in `text.h`.
  *   - Flexbox: single-line row/column with grow/shrink, gap, justify-content
  *     and align-items.
  * Margins do not collapse yet, and only static positioning is honoured.
@@ -14,6 +14,8 @@
 
 #include "layout_internal.h"
 
+#include "image_api.h"
+
 #include <algorithm>
 #include <cstdio>
 #include <cstring>
@@ -38,7 +40,8 @@ std::unique_ptr<LayoutBox> buildBoxTree(const Node *node,
     auto box = std::make_unique<LayoutBox>();
     box->node = node;
     box->is_text = true;
-    box->text = node->text;
+    box->text = inherited != nullptr ? xt_apply_text_transform(node->text, inherited->text_transform)
+                                     : node->text;
     box->style = inherited;
     box->display = Display::Inline;
     return box;
@@ -51,6 +54,7 @@ std::unique_ptr<LayoutBox> buildBoxTree(const Node *node,
   box->node = node;
   box->style = style;
   box->display = style != nullptr ? style->display : Display::Block;
+  const XtImageApi *images = xt_image_api();
   if (node->isElement() && node->isTag("img")) {
     box->is_image = true;
     const std::string *src = node->attr("src");
@@ -58,7 +62,7 @@ std::unique_ptr<LayoutBox> buildBoxTree(const Node *node,
       box->image_src = *src;
       int width = 0;
       int height = 0;
-      if (xt_image_size(*src, &width, &height)) {
+      if (images != nullptr && images->size(*src, &width, &height)) {
         box->intrinsic_width = (float)width;
         box->intrinsic_height = (float)height;
       }
@@ -113,12 +117,14 @@ std::unique_ptr<LayoutBox> buildBoxTree(const Node *node,
      * let paint/rasterisation handle the children — the normal box walk must
      * not descend into them. */
     box->is_inline_svg = true;
-    box->svg_markup = xt_inline_svg_serialize(node);
-    int width = 0;
-    int height = 0;
-    if (xt_svg_markup_size(box->svg_markup, &width, &height)) {
-      box->intrinsic_width = (float)width;
-      box->intrinsic_height = (float)height;
+    if (images != nullptr) {
+      box->svg_markup = images->inline_serialize(node, &styles);
+      int width = 0;
+      int height = 0;
+      if (images->svg_markup_size(box->svg_markup, &width, &height)) {
+        box->intrinsic_width = (float)width;
+        box->intrinsic_height = (float)height;
+      }
     }
     if (box->intrinsic_width <= 0.0f) box->intrinsic_width = 300.0f;
     if (box->intrinsic_height <= 0.0f) box->intrinsic_height = 150.0f;

package/runtime/ext_gui/layout.h

@@ -4,7 +4,7 @@
  * `LayoutTree::compute` turns the styled DOM into a tree of `LayoutBox`es with
  * absolute (viewport-relative) geometry. It implements the slice a UI needs:
  * block flow, a simple inline formatting context with greedy line breaking
- * (text metrics come from the HarfBuzz/FreeType stack) and single-line
+ * (text metrics come from the stb_truetype stack) and single-line
  * Flexbox. `<img>` is a replaced element sized from its intrinsic dimensions.
  *
  * Coordinates are absolute: `x`/`y` is the border-box origin measured from the
@@ -51,6 +51,10 @@ struct TextFragment {
   float width = 0;
   float height = 0;
   std::string text;
+  /** A vertical-writing-mode run: `x`/`y`/`width`/`height` are its column box.
+   * `upright` is a CJK-style glyph; otherwise the run is rotated 90° clockwise. */
+  bool vertical = false;
+  bool upright = false;
 };
 
 /** A viewport-relative rectangle (`getBoundingClientRect` result). */
@@ -65,6 +69,8 @@ struct LayoutBox {
   bool is_text = false;
   std::string text;               // only for text boxes
   std::vector<TextFragment> fragments;
+  /** `border-radius` resolved against this border box (percent supported). */
+  float border_radius = 0.0f;
 
   /* Replaced element (currently `<img>`): source + intrinsic pixel size. */
   bool is_image = false;
@@ -140,7 +146,7 @@ class LayoutTree {
   XtStyle root_style_;
 };
 
-/** Text width under `style` (shaped with the HarfBuzz/FreeType stack). */
+/** Text width under `style` (shaped with the stb_truetype stack). */
 float xt_layout_text_width(const std::string &text, const XtStyle &style);
 
 /** The box's border box in device space: its layout rectangle pushed through

package/runtime/ext_gui/layout_flex.cpp

@@ -12,6 +12,37 @@
 namespace xtgui {
 namespace layout_flow_detail {
 
+/** Give the line's free main-axis space to `auto` margins (CSS flexbox). Returns
+ * true when any item had one; the caller then skips `justify-content`. */
+static bool applyAutoMainMargins(const std::vector<LayoutBox *> &items,
+                                 const std::vector<size_t> &line, bool row, float freeSpace) {
+  int count = 0;
+  for (size_t i : line) {
+    const XtStyle &style = *items[i]->style;
+    if (row) {
+      if (style.margin_left_auto) count++;
+      if (style.margin_right_auto) count++;
+    } else {
+      if (style.margin_top_auto) count++;
+      if (style.margin_bottom_auto) count++;
+    }
+  }
+  if (count == 0) return false;
+  if (freeSpace < 0.0f) freeSpace = 0.0f;
+  float share = freeSpace / (float)count;
+  for (size_t i : line) {
+    const XtStyle &style = *items[i]->style;
+    if (row) {
+      if (style.margin_left_auto) items[i]->margin_left = share;
+      if (style.margin_right_auto) items[i]->margin_right = share;
+    } else {
+      if (style.margin_top_auto) items[i]->margin_top = share;
+      if (style.margin_bottom_auto) items[i]->margin_bottom = share;
+    }
+  }
+  return true;
+}
+
 /** Partition `basis` (outer main sizes) into lines, breaking before an item
  * that no longer fits on the current line. A single line is produced when
  * `wrap` is false. */
@@ -37,8 +68,19 @@ static std::vector<std::vector<size_t>> breakIntoLines(const std::vector<float>
 
 float Layouter::layoutFlex(LayoutBox *container, float contentWidth, float definiteHeight) const {
   const XtStyle &containerStyle = *container->style;
-  bool isRow = containerStyle.flex_direction == FlexDirection::Row ||
-               containerStyle.flex_direction == FlexDirection::RowReverse;
+  /* In a vertical writing mode the inline axis is vertical, so a `row` flex
+   * container stacks its items top-to-bottom (and `column` lays them out
+   * horizontally). */
+  FlexDirection direction = containerStyle.flex_direction;
+  if (containerStyle.writing_mode != WritingMode::HorizontalTB) {
+    switch (direction) {
+      case FlexDirection::Row: direction = FlexDirection::Column; break;
+      case FlexDirection::RowReverse: direction = FlexDirection::ColumnReverse; break;
+      case FlexDirection::Column: direction = FlexDirection::Row; break;
+      case FlexDirection::ColumnReverse: direction = FlexDirection::RowReverse; break;
+    }
+  }
+  bool isRow = direction == FlexDirection::Row || direction == FlexDirection::RowReverse;
 
   /* An absolutely positioned child is out of flow: it takes no part in the flex
    * algorithm and is placed against the container's padding box instead. */
@@ -58,15 +100,17 @@ float Layouter::layoutFlex(LayoutBox *container, float contentWidth, float defin
       px(isRow ? containerStyle.row_gap : containerStyle.column_gap, contentWidth,
          containerStyle.font_size, 0.0f);
   if (isRow)
-    return layoutFlexRow(container, items, contentWidth, definiteHeight, mainGap, crossGap);
-  return layoutFlexColumn(container, items, contentWidth, definiteHeight, mainGap, crossGap);
+    return layoutFlexRow(container, items, contentWidth, definiteHeight, mainGap, crossGap,
+                         direction);
+  return layoutFlexColumn(container, items, contentWidth, definiteHeight, mainGap, crossGap,
+                          direction);
 }
 
 float Layouter::layoutFlexRow(LayoutBox *container, const std::vector<LayoutBox *> &items,
                               float contentWidth, float definiteHeight, float mainGap,
-                              float crossGap) const {
+                              float crossGap, FlexDirection direction) const {
   const XtStyle &containerStyle = *container->style;
-  bool reverse = containerStyle.flex_direction == FlexDirection::RowReverse;
+  bool reverse = direction == FlexDirection::RowReverse;
   bool wrap = containerStyle.flex_wrap != FlexWrap::NoWrap;
   bool wrapReverse = containerStyle.flex_wrap == FlexWrap::WrapReverse;
   size_t count = items.size();
@@ -169,12 +213,14 @@ float Layouter::layoutFlexRow(LayoutBox *container, const std::vector<LayoutBox
     float freeSpace = mainSize - (sumMain + mainGap * (float)(line.size() - 1));
     float offset = 0;
     float between = mainGap;
+    if (applyAutoMainMargins(items, line, true, freeSpace)) freeSpace = 0.0f;
     applyJustify(containerStyle.justify_content, freeSpace, line.size(), &offset, &between);
     float cursor = container->content_x + offset;
     for (size_t k = 0; k < line.size(); k++) {
       size_t i = reverse ? line[line.size() - 1 - k] : line[k];
-      bool stretch = containerStyle.align_items == AlignItems::Stretch &&
-                     isAuto(items[i]->style->height) &&
+      AlignItems align = items[i]->style->has_align_self ? items[i]->style->align_self
+                                                         : containerStyle.align_items;
+      bool stretch = align == AlignItems::Stretch && isAuto(items[i]->style->height) &&
                      (definiteHeight >= 0 || lines.size() > 1);
       if (stretch) {
         float contentH = lineCross[li] - verticalEdges(items[i]);
@@ -184,12 +230,15 @@ float Layouter::layoutFlexRow(LayoutBox *container, const std::vector<LayoutBox
                     definiteHeight, contentW, contentH);
         cross[i] = lineCross[li];
       }
-      float crossOffset = crossOffsetFor(containerStyle.align_items, lineCross[li], cross[i]);
+      float crossOffset = crossOffsetFor(align, lineCross[li], cross[i]);
       float dx = cursor + items[i]->margin_left - items[i]->x;
       float dy =
           container->content_y + lineStart + crossOffset + items[i]->margin_top - items[i]->y;
       translate(items[i], dx, dy);
-      cursor += mainSizes[i] + between;
+      float auto_extra = 0.0f;
+      if (items[i]->style->margin_left_auto) auto_extra += items[i]->margin_left;
+      if (items[i]->style->margin_right_auto) auto_extra += items[i]->margin_right;
+      cursor += mainSizes[i] + between + auto_extra;
     }
     lineOffset += lineCross[li] + lineStep;
   }
@@ -198,9 +247,9 @@ float Layouter::layoutFlexRow(LayoutBox *container, const std::vector<LayoutBox
 
 float Layouter::layoutFlexColumn(LayoutBox *container, const std::vector<LayoutBox *> &items,
                                  float contentWidth, float definiteHeight, float mainGap,
-                                 float crossGap) const {
+                                 float crossGap, FlexDirection direction) const {
   const XtStyle &containerStyle = *container->style;
-  bool reverse = containerStyle.flex_direction == FlexDirection::ColumnReverse;
+  bool reverse = direction == FlexDirection::ColumnReverse;
   bool wrap = containerStyle.flex_wrap != FlexWrap::NoWrap && definiteHeight >= 0;
   bool wrapReverse = containerStyle.flex_wrap == FlexWrap::WrapReverse;
   size_t count = items.size();
@@ -213,57 +262,104 @@ float Layouter::layoutFlexColumn(LayoutBox *container, const std::vector<LayoutB
     outer[i] = verticalEdges(items[i]) + items[i]->height;
   }
 
+  /* Main-axis basis: `flex-basis` when set, otherwise the measured height. A
+   * percentage basis needs a definite container height; with `height: auto` it
+   * behaves like `auto`, as on the row axis. */
+  std::vector<float> basis(count, 0.0f);
+  for (size_t i = 0; i < count; i++) {
+    const XtStyle &style = *items[i]->style;
+    float base = outer[i];
+    if (!isAuto(style.flex_basis)) {
+      float resolved = -1.0f;
+      if (style.flex_basis.unit != Unit::Percent || definiteHeight >= 0)
+        resolved = px(style.flex_basis, definiteHeight >= 0 ? definiteHeight : contentWidth,
+                      style.font_size, -1.0f);
+      if (resolved >= 0) base = resolved + verticalEdges(items[i]);
+    }
+    basis[i] = base;
+  }
+
   if (!wrap) {
     float mainSize = definiteHeight >= 0 ? definiteHeight : -1;
-    std::vector<float> mainSizes = outer;
+    std::vector<float> mainSizes = basis;
     if (mainSize >= 0) {
-      float free = mainSize - sumOf(outer) - mainGap * (float)(count - 1);
+      float free = mainSize - sumOf(basis) - mainGap * (float)(count - 1);
       if (free > 0) {
         float totalGrow = 0;
         for (LayoutBox *item : items) totalGrow += item->style->flex_grow;
-        if (totalGrow > 0) {
-          for (size_t i = 0; i < count; i++) {
+        if (totalGrow > 0)
+          for (size_t i = 0; i < count; i++)
             mainSizes[i] += free * items[i]->style->flex_grow / totalGrow;
-            float contentH = mainSizes[i] - verticalEdges(items[i]);
-            if (contentH < 0) contentH = 0;
-            layoutBlock(items[i], container->content_x, container->content_y, contentWidth,
-                        definiteHeight, -1, contentH);
+      } else if (free < 0) {
+        float totalShrink = 0;
+        for (size_t i = 0; i < count; i++)
+          totalShrink += items[i]->style->flex_shrink * basis[i];
+        if (totalShrink > 0)
+          for (size_t i = 0; i < count; i++) {
+            mainSizes[i] += free * (items[i]->style->flex_shrink * basis[i]) / totalShrink;
+            if (mainSizes[i] < 0) mainSizes[i] = 0;
           }
-        }
       }
     } else {
-      mainSize = sumOf(outer) + mainGap * (float)(count - 1);
+      mainSize = sumOf(basis) + mainGap * (float)(count - 1);
+    }
+    /* Re-lay every item out at its used height: the basis, grow and shrink
+     * passes above all change it. */
+    for (size_t i = 0; i < count; i++) {
+      float contentH = mainSizes[i] - verticalEdges(items[i]);
+      if (contentH < 0) contentH = 0;
+      setContainingBlock(items[i], containingBlockAncestor(items[i]));
+      layoutBlock(items[i], container->content_x, container->content_y, contentWidth,
+                  definiteHeight, -1, contentH);
     }
     float freeSpace = mainSize - (sumOf(mainSizes) + mainGap * (float)(count - 1));
     float offset = 0;
     float between = mainGap;
+    std::vector<size_t> all(count);
+    for (size_t i = 0; i < count; i++) all[i] = i;
+    if (applyAutoMainMargins(items, all, false, freeSpace)) freeSpace = 0.0f;
     applyJustify(containerStyle.justify_content, freeSpace, count, &offset, &between);
     float cursor = container->content_y + offset;
     for (size_t k = 0; k < count; k++) {
       size_t i = reverse ? (count - 1 - k) : k;
-      float dx = container->content_x + items[i]->margin_left - items[i]->x;
+      AlignItems align = items[i]->style->has_align_self ? items[i]->style->align_self
+                                                         : containerStyle.align_items;
+      float crossSize = horizontalEdges(items[i]) + items[i]->width;
+      float crossOffset = crossOffsetFor(align, contentWidth, crossSize);
+      float dx = container->content_x + crossOffset + items[i]->margin_left - items[i]->x;
       float dy = cursor + items[i]->margin_top - items[i]->y;
       translate(items[i], dx, dy);
-      cursor += mainSizes[i] + between;
+      float auto_extra = 0.0f;
+      if (items[i]->style->margin_top_auto) auto_extra += items[i]->margin_top;
+      if (items[i]->style->margin_bottom_auto) auto_extra += items[i]->margin_bottom;
+      cursor += mainSizes[i] + between + auto_extra;
     }
     return mainSize;
   }
 
   /* Wrapped columns: lines run top-to-bottom and are placed side by side. */
-  std::vector<std::vector<size_t>> lines = breakIntoLines(outer, definiteHeight, mainGap, true);
+  std::vector<std::vector<size_t>> lines = breakIntoLines(basis, definiteHeight, mainGap, true);
   std::vector<float> mainSizes(count, 0.0f);
   std::vector<float> lineCross(lines.size(), 0.0f);
   for (size_t li = 0; li < lines.size(); li++) {
     const std::vector<size_t> &line = lines[li];
     float sumBase = 0;
-    for (size_t i : line) sumBase += outer[i];
-    for (size_t i : line) mainSizes[i] = outer[i];
+    for (size_t i : line) sumBase += basis[i];
+    for (size_t i : line) mainSizes[i] = basis[i];
     float free = definiteHeight - sumBase - mainGap * (float)(line.size() - 1);
     if (free > 0) {
       float totalGrow = 0;
       for (size_t i : line) totalGrow += items[i]->style->flex_grow;
       if (totalGrow > 0)
         for (size_t i : line) mainSizes[i] += free * items[i]->style->flex_grow / totalGrow;
+    } else if (free < 0) {
+      float totalShrink = 0;
+      for (size_t i : line) totalShrink += items[i]->style->flex_shrink * basis[i];
+      if (totalShrink > 0)
+        for (size_t i : line) {
+          mainSizes[i] += free * (items[i]->style->flex_shrink * basis[i]) / totalShrink;
+          if (mainSizes[i] < 0) mainSizes[i] = 0;
+        }
     }
     for (size_t i : line) {
       float contentH = mainSizes[i] - verticalEdges(items[i]);
@@ -308,14 +404,23 @@ float Layouter::layoutFlexColumn(LayoutBox *container, const std::vector<LayoutB
     float freeSpace = definiteHeight - (sumMain + mainGap * (float)(line.size() - 1));
     float offset = 0;
     float between = mainGap;
+    if (applyAutoMainMargins(items, line, false, freeSpace)) freeSpace = 0.0f;
     applyJustify(containerStyle.justify_content, freeSpace, line.size(), &offset, &between);
     float cursor = container->content_y + offset;
     for (size_t k = 0; k < line.size(); k++) {
       size_t i = reverse ? line[line.size() - 1 - k] : line[k];
-      float dx = container->content_x + lineStart + items[i]->margin_left - items[i]->x;
+      AlignItems align = items[i]->style->has_align_self ? items[i]->style->align_self
+                                                         : containerStyle.align_items;
+      float crossSize = horizontalEdges(items[i]) + items[i]->width;
+      float crossOffset = crossOffsetFor(align, lineCross[li], crossSize);
+      float dx =
+          container->content_x + lineStart + crossOffset + items[i]->margin_left - items[i]->x;
       float dy = cursor + items[i]->margin_top - items[i]->y;
       translate(items[i], dx, dy);
-      cursor += mainSizes[i] + between;
+      float auto_extra = 0.0f;
+      if (items[i]->style->margin_top_auto) auto_extra += items[i]->margin_top;
+      if (items[i]->style->margin_bottom_auto) auto_extra += items[i]->margin_bottom;
+      cursor += mainSizes[i] + between + auto_extra;
     }
     lineOffset += lineCross[li] + lineStep;
   }

package/runtime/ext_gui/layout_flow.cpp

@@ -46,13 +46,19 @@ float Layouter::preferredContentWidth(const LayoutBox *box, float available) con
   if (!isAuto(style.width)) return px(style.width, available, style.font_size, 0.0f);
   if ((box->is_image || box->is_canvas || box->is_inline_svg) && box->intrinsic_width > 0)
     return box->intrinsic_width;
-  if (box->is_text) return textWidth(box->text, style);
+  if (box->is_text) {
+    if (style.writing_mode != WritingMode::HorizontalTB) return lineHeightOf(style);
+    return textWidth(box->text, style);
+  }
   /* A row flex container's intrinsic width is the sum of its items (and gaps);
    * taking the widest child would make a shrink-to-fit toolbar narrower than
    * its buttons and then shrink every button to zero. */
-  if (style.display == Display::Flex &&
-      (style.flex_direction == FlexDirection::Row ||
-       style.flex_direction == FlexDirection::RowReverse)) {
+  bool flex_row = style.flex_direction == FlexDirection::Row ||
+                  style.flex_direction == FlexDirection::RowReverse;
+  /* In a vertical writing mode the flex row axis is vertical, so the intrinsic
+   * width is the widest item rather than the sum of the row. */
+  if (style.writing_mode != WritingMode::HorizontalTB) flex_row = !flex_row;
+  if (style.display == Display::Flex && flex_row) {
     float total = 0;
     int count = 0;
     for (const std::unique_ptr<LayoutBox> &child : box->children) {
@@ -70,7 +76,11 @@ float Layouter::preferredContentWidth(const LayoutBox *box, float available) con
     /* Out-of-flow children do not contribute to the parent's intrinsic width. */
     if (isAbsoluteChild(child.get())) continue;
     if (child->is_text) {
-      best = std::max(best, textWidth(child->text, *child->style));
+      if (child->style->writing_mode != WritingMode::HorizontalTB) {
+        best = std::max(best, lineHeightOf(*child->style));
+      } else {
+        best = std::max(best, textWidth(child->text, *child->style));
+      }
     } else {
       best = std::max(best,
                       preferredContentWidth(child.get(), available) + horizontalEdges(child.get()));
@@ -204,6 +214,9 @@ float Layouter::layoutBlock(LayoutBox *box, float x, float y, float availableWid
    * `display:grid`), and `layoutChildren` would otherwise give them no geometry
    * or fragment at all — the glyph then silently disappears from paint. */
   if (box->is_text) {
+    if (style.writing_mode != WritingMode::HorizontalTB) {
+      return layoutVerticalTextBox(box, x, y, lineHeightOf(style));
+    }
     float textW = textWidth(box->text, style);
     float textH = lineHeightOf(style);
     box->x = x;
@@ -260,6 +273,24 @@ float Layouter::layoutBlock(LayoutBox *box, float x, float y, float availableWid
   box->content_width = contentWidth;
   box->width =
       box->border_left + box->padding_left + contentWidth + box->padding_right + box->border_right;
+  /* Block-level horizontal auto margins absorb the leftover inline space; two
+   * auto margins centre the box. */
+  bool autoLeft = style.margin_left_auto;
+  bool autoRight = style.margin_right_auto;
+  if (!outOfFlow && (autoLeft || autoRight)) {
+    float free = availableWidth - box->width - (autoLeft ? 0.0f : box->margin_left) -
+                 (autoRight ? 0.0f : box->margin_right);
+    if (free < 0.0f) free = 0.0f;
+    if (autoLeft && autoRight) {
+      box->margin_left = box->margin_right = free / 2.0f;
+    } else if (autoLeft) {
+      box->margin_left = free;
+    } else {
+      box->margin_right = free;
+    }
+    box->x = x + box->margin_left;
+    box->content_x = box->x + box->border_left + box->padding_left;
+  }
 
   float definiteHeight = -1;
   if (!isAuto(style.height) && !(style.height.unit == Unit::Percent && availableHeight < 0)) {
@@ -278,6 +309,17 @@ float Layouter::layoutBlock(LayoutBox *box, float x, float y, float availableWid
     definiteHeight = box->cb_height - top - bottom - verticalEdges(box);
     if (definiteHeight < 0) definiteHeight = 0;
   }
+  /* `aspect-ratio` derives the content height from the used width when the
+   * height is auto. (Height-to-width derivation is not implemented: no page in
+   * the target corpus needs it.) */
+  if (definiteHeight < 0 && forcedContentHeight < 0 && style.aspect_ratio > 0.0f) {
+    float borderWidth = box->border_left + box->padding_left + contentWidth +
+                        box->padding_right + box->border_right;
+    float borderHeight = borderWidth / style.aspect_ratio;
+    definiteHeight = borderHeight - box->border_top - box->border_bottom - box->padding_top -
+                     box->padding_bottom;
+    if (definiteHeight < 0) definiteHeight = 0;
+  }
 
   float contentHeight;
   if (forcedContentHeight >= 0) {
@@ -304,6 +346,8 @@ float Layouter::layoutBlock(LayoutBox *box, float x, float y, float availableWid
   box->content_height = contentHeight;
   box->height =
       box->border_top + box->padding_top + contentHeight + box->padding_bottom + box->border_bottom;
+  box->border_radius = xt_style_border_radius_px(style.border_radius, box->width, box->height,
+                                                 em, rootFontSize, vw, vh);
   box->baseline = box->height;
   /* Now that this box has its final size, its padding box is the containing
    * block its own children resolve against — and only now can an out-of-flow
@@ -318,8 +362,11 @@ float Layouter::layoutBlock(LayoutBox *box, float x, float y, float availableWid
 }
 
 bool Layouter::isAbsoluteChild(const LayoutBox *box) {
-  return box->style != nullptr && (box->style->position == Position::Absolute ||
-                                   box->style->position == Position::Fixed);
+  /* A text box shares its element's style pointer, but a text node can never be
+   * out of flow: treating it as absolute dropped direct text out of an
+   * absolutely positioned box (and made a shrink-to-fit width zero). */
+  return box != nullptr && !box->is_text && box->style != nullptr &&
+         (box->style->position == Position::Absolute || box->style->position == Position::Fixed);
 }
 
 void Layouter::layoutAbsoluteChildren(LayoutBox *block, float contentWidth,
@@ -423,6 +470,10 @@ float Layouter::layoutChildren(LayoutBox *block, float contentWidth, float avail
     }
     if (display == Display::Block || display == Display::ListItem || display == Display::Flex ||
         display == Display::Grid || child->style == nullptr) {
+      if (childStyle != nullptr && childStyle->inline_level) {
+        inlineRun.push_back(child.get());
+        continue;
+      }
       flush();
       resolveEdges(child.get(), contentWidth);
       /* Adjacent vertical margins collapse: the gap is the collapsed value of

package/runtime/ext_gui/layout_flow_internal.h

@@ -40,9 +40,15 @@ struct InlineItem {
   float width = 0;
   float height = 0;
   float ascent = 0;
+  /** Atomic inline boxes: `vertical-align` shift (positive raises). */
+  float shift = 0.0f;
   bool is_space = false;
   bool atomic = false;      // inline-block
   bool force_break = false; // explicit newline (white-space: pre)
+  /** A character in a vertical writing mode: `width` is the column width and
+   * `height` the advance along the column. */
+  bool vertical = false;
+  bool upright = false;
 };
 
 /** One float taking part in the current block's formatting context. Floats are
@@ -132,6 +138,23 @@ inline float toPx(const Length &length, float base, float em, float root, float
       }
       return first ? fallback : best;
     }
+    case Unit::Calc: {
+      if (length.args.size() < 2) return fallback;
+      float left = toPx(length.args[0], base, em, root, vw, vh, fallback);
+      float right = toPx(length.args[1], base, em, root, vw, vh, fallback);
+      switch (length.op) {
+        case '+':
+          return left + right;
+        case '-':
+          return left - right;
+        case '*':
+          return left * right;
+        case '/':
+          return right == 0.0f ? fallback : left / right;
+        default:
+          return left;
+      }
+    }
     case Unit::Px:
     case Unit::Number:
       return length.value;
@@ -174,6 +197,7 @@ inline FontSpec specOf(const XtStyle &style) {
   spec.pixel_size = style.font_size;
   spec.weight = style.font_weight;
   spec.italic = style.font_style == FontStyle::Italic;
+  spec.letter_spacing = style.letter_spacing.unit == Unit::Px ? style.letter_spacing.value : 0.0f;
   return spec;
 }
 
@@ -259,6 +283,9 @@ struct Layouter {
 
   void flattenInline(LayoutBox *box, float contentWidth, std::vector<InlineItem> &out) const;
 
+  /** Flatten a text box in a vertical writing mode into per-character items. */
+  void flattenVerticalText(LayoutBox *box, std::vector<InlineItem> &out) const;
+
   void computeInlineGeometry(LayoutBox *box) const;
 
   /** Lay out an inline formatting context; returns its consumed height. When
@@ -267,6 +294,14 @@ struct Layouter {
   float layoutInlineRun(LayoutBox *container, const std::vector<LayoutBox *> &run,
                         float contentWidth, float y, const FloatContext *floats = nullptr) const;
 
+  /** Vertical writing mode: place already-flattened character items in columns
+   * (right-to-left for `vertical-rl`). Returns the consumed height. */
+  float layoutVerticalRun(LayoutBox *container, const std::vector<InlineItem> &items,
+                          float contentWidth, float y) const;
+
+  /** Lay out a text box whose style has a vertical writing mode. */
+  float layoutVerticalTextBox(LayoutBox *box, float x, float y, float width) const;
+
   float layoutFlex(LayoutBox *container, float contentWidth, float definiteHeight) const;
 
   /** Grid formatting context (explicit/implicit tracks, gaps, auto-placement
@@ -276,13 +311,13 @@ struct Layouter {
   /** Flex row main-axis layout, wrapping items into lines when `flex-wrap`
    * allows it. Returns the used cross size. */
   float layoutFlexRow(LayoutBox *container, const std::vector<LayoutBox *> &items,
-                      float contentWidth, float definiteHeight, float mainGap,
-                      float crossGap) const;
+                      float contentWidth, float definiteHeight, float mainGap, float crossGap,
+                      FlexDirection direction) const;
 
   /** Flex column main-axis layout (wrapping needs a definite height). */
   float layoutFlexColumn(LayoutBox *container, const std::vector<LayoutBox *> &items,
-                         float contentWidth, float definiteHeight, float mainGap,
-                         float crossGap) const;
+                         float contentWidth, float definiteHeight, float mainGap, float crossGap,
+                         FlexDirection direction) const;
 
   static float sumOf(const std::vector<float> &values);
 

package/runtime/ext_gui/layout_grid.cpp

@@ -301,6 +301,37 @@ float Layouter::layoutGrid(LayoutBox *container, float contentWidth,
     }
   }
 
+  /* A definite container height is the free space an `fr` row divides, exactly
+   * like an `fr` column above. Size the fixed/auto rows first, then share what
+   * is left by flex fraction; without this a grid whose only height comes from
+   * `aspect-ratio` collapses its `repeat(n, 1fr)` rows to their content. */
+  float rowFr = 0;
+  for (const GridTrack &row : rows) rowFr += row.fr;
+  if (rowFr > 0 && definiteHeight >= 0) {
+    float fixedRows = gapY * (float)(rows.size() - 1);
+    for (size_t r = 0; r < rows.size(); r++)
+      if (rows[r].fr <= 0) fixedRows += rowHeight[r];
+    float remaining = definiteHeight - fixedRows;
+    if (remaining < 0) remaining = 0;
+    for (int pass = 0; pass < 2; pass++) {
+      float used = 0;
+      for (size_t r = 0; r < rows.size(); r++) {
+        if (rows[r].fr <= 0) continue;
+        float share = remaining * rows[r].fr / rowFr;
+        float minimum = trackPx(*this, rows[r], false, contentWidth, style.font_size);
+        if (minimum > share) share = minimum;
+        rowHeight[r] = share;
+        used += share;
+      }
+      if (used <= remaining + 0.01f) break;
+      /* An intrinsic minimum forced a deficit; shrink the fr share back. */
+      float scale = remaining / used;
+      for (size_t r = 0; r < rows.size(); r++)
+        if (rows[r].fr > 0) rowHeight[r] *= scale;
+      break;
+    }
+  }
+
   float totalHeight = gapY * (float)(rows.size() - 1);
   for (float value : rowHeight) totalHeight += value;
   if (rows.size() == 1 && definiteHeight >= 0 && definiteHeight > totalHeight)