xbintsc 0.3.79 → 0.3.81

package/runtime/ext_gui/layout.cpp

@@ -19,10 +19,15 @@
 #include <cstring>
 
 #include "image.h"
+#include "style_internal.h"
 
 namespace xtgui {
 namespace {
 
+/** Compose `transform`/`transform-origin` down the tree (defined below). */
+void applyTransforms(LayoutBox *box, const Matrix2D &parent_world, bool parent_transformed,
+                     float viewportWidth, float viewportHeight);
+
 std::unique_ptr<LayoutBox> buildBoxTree(const Node *node,
                                         const std::unordered_map<const Node *, XtStyle> &styles,
                                         const XtStyle *inherited, const MediaSizeMap *media,
@@ -167,6 +172,7 @@ void LayoutTree::compute(const Node *root, const std::unordered_map<const Node *
     }
   }
   xt_layout_run(root_.get(), styles, viewportWidth, viewportHeight);
+  applyTransforms(root_.get(), Matrix2D(), false, viewportWidth, viewportHeight);
 
   std::vector<const LayoutBox *> stack;
   stack.push_back(root_.get());
@@ -191,7 +197,11 @@ const LayoutBox *hitTestBox(const LayoutBox *box, float x, float y) {
   for (auto it = box->children.rbegin(); it != box->children.rend(); ++it) {
     if (const LayoutBox *hit = hitTestBox(it->get(), x, y)) return hit;
   }
-  if (x >= box->x && x < box->x + box->width && y >= box->y && y < box->y + box->height) {
+  float local_x = x;
+  float local_y = y;
+  if (box->has_transform) box->inverse.apply(x, y, &local_x, &local_y);
+  if (local_x >= box->x && local_x < box->x + box->width && local_y >= box->y &&
+      local_y < box->y + box->height) {
     return box;
   }
   return nullptr;
@@ -207,4 +217,71 @@ std::string LayoutTree::dump() const {
   return root_ == nullptr ? std::string() : dumpBox(root_.get(), 0);
 }
 
+/* -- transforms ----------------------------------------------------------- */
+
+namespace {
+
+/** The transform a single box applies to its own geometry, relative to its
+ * `transform-origin`. Text boxes inherit their parent's style pointer, so only
+ * element boxes may contribute one (otherwise the style would be applied
+ * twice). */
+Matrix2D boxLocalTransform(const LayoutBox *box, float viewportWidth, float viewportHeight) {
+  Matrix2D local;
+  if (box->style == nullptr || box->style->transform.empty()) return local;
+  if (box->node == nullptr || !box->node->isElement()) return local;
+  const XtStyle &style = *box->style;
+  Matrix2D body = xt_transform_matrix(style.transform, box->width, box->height, style.font_size,
+                                      viewportWidth, viewportHeight);
+  float origin_x = box->x + xt_style_resolve_absolute(style.transform_origin_x, box->width,
+                                                      style.font_size, 16.0f, viewportWidth,
+                                                      viewportHeight);
+  float origin_y = box->y + xt_style_resolve_absolute(style.transform_origin_y, box->height,
+                                                      style.font_size, 16.0f, viewportWidth,
+                                                      viewportHeight);
+  return Matrix2D::translate(origin_x, origin_y)
+      .multiply(body)
+      .multiply(Matrix2D::translate(-origin_x, -origin_y));
+}
+
+void applyTransforms(LayoutBox *box, const Matrix2D &parent_world, bool parent_transformed,
+                     float viewportWidth, float viewportHeight) {
+  Matrix2D local = boxLocalTransform(box, viewportWidth, viewportHeight);
+  box->world = parent_world.multiply(local);
+  box->has_transform = parent_transformed || !local.identity();
+  if (!box->world.invert(&box->inverse)) box->inverse = Matrix2D();
+  for (std::unique_ptr<LayoutBox> &child : box->children) {
+    applyTransforms(child.get(), box->world, box->has_transform, viewportWidth, viewportHeight);
+  }
+}
+
+}  // namespace
+
+LayoutRect xt_layout_transform_rect(const Matrix2D &matrix, float x, float y, float width,
+                                    float height) {
+  LayoutRect out{x, y, width, height};
+  if (matrix.identity()) return out;
+  const float corners_x[4] = {x, x + width, x + width, x};
+  const float corners_y[4] = {y, y, y + height, y + height};
+  float min_x = 0, min_y = 0, max_x = 0, max_y = 0;
+  for (int i = 0; i < 4; i++) {
+    float corner_x = 0;
+    float corner_y = 0;
+    matrix.apply(corners_x[i], corners_y[i], &corner_x, &corner_y);
+    if (i == 0 || corner_x < min_x) min_x = corner_x;
+    if (i == 0 || corner_x > max_x) max_x = corner_x;
+    if (i == 0 || corner_y < min_y) min_y = corner_y;
+    if (i == 0 || corner_y > max_y) max_y = corner_y;
+  }
+  out.x = min_x;
+  out.y = min_y;
+  out.width = max_x - min_x;
+  out.height = max_y - min_y;
+  return out;
+}
+
+LayoutRect xt_layout_transformed_bounds(const LayoutBox *box) {
+  if (box == nullptr) return LayoutRect();
+  return xt_layout_transform_rect(box->world, box->x, box->y, box->width, box->height);
+}
+
 }  // namespace xtgui

package/runtime/ext_gui/layout.h

@@ -53,6 +53,11 @@ struct TextFragment {
   std::string text;
 };
 
+/** A viewport-relative rectangle (`getBoundingClientRect` result). */
+struct LayoutRect {
+  float x = 0, y = 0, width = 0, height = 0;
+};
+
 struct LayoutBox {
   const Node *node = nullptr;
   const XtStyle *style = nullptr;
@@ -94,6 +99,13 @@ struct LayoutBox {
    * is none): the containing block `position: absolute` resolves against. */
   float cb_x = 0, cb_y = 0, cb_width = 0, cb_height = 0;
 
+  /* `transform`/`transform-origin` composed down the tree: `world` maps this
+   * box's layout coordinates to device space, `inverse` does the opposite (hit
+   * testing). `has_transform` is true for a box inside a transformed subtree. */
+  Matrix2D world;
+  Matrix2D inverse;
+  bool has_transform = false;
+
   LayoutBox *parent = nullptr;
   std::vector<std::unique_ptr<LayoutBox>> children;
 };
@@ -124,6 +136,15 @@ class LayoutTree {
 /** Text width under `style` (shaped with the HarfBuzz/FreeType 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
+ * `box->world` and reduced to an axis-aligned bounding box. */
+LayoutRect xt_layout_transformed_bounds(const LayoutBox *box);
+
+/** Push an arbitrary layout rectangle through `matrix` and return its
+ * axis-aligned bounding box. */
+LayoutRect xt_layout_transform_rect(const Matrix2D &matrix, float x, float y, float width,
+                                    float height);
+
 }  // namespace xtgui
 
 #endif /* XT_GUI_LAYOUT_H */

package/runtime/ext_gui/paint.cpp

@@ -22,6 +22,18 @@ std::string formatColor(const Color &color) {
   return buffer;
 }
 
+/** ` transform=matrix(...)` for a non-identity matrix, so the dump (and the
+ * tests that read it) can see where a box was transformed to. */
+std::string transformSuffix(const Matrix2D &matrix) {
+  if (matrix.identity()) return "";
+  char buffer[192];
+  std::snprintf(buffer, sizeof(buffer),
+                " transform=matrix(%.4g,%.4g,%.4g,%.4g,%.4g,%.4g)", (double)matrix.a,
+                (double)matrix.b, (double)matrix.c, (double)matrix.d, (double)matrix.e,
+                (double)matrix.f);
+  return buffer;
+}
+
 FontSpec specOf(const XtStyle &style) {
   FontSpec spec;
   spec.family = style.font_family;
@@ -32,7 +44,7 @@ FontSpec specOf(const XtStyle &style) {
 }
 
 void addRect(DisplayList &out, float x, float y, float width, float height, float radius,
-             const Color &color, const PaintClip &clip) {
+             const Color &color, const PaintClip &clip, const Matrix2D &transform) {
   if (width <= 0.0f || height <= 0.0f || color.a <= 0.0f) return;
   PaintRect rect;
   rect.x = x;
@@ -41,6 +53,7 @@ void addRect(DisplayList &out, float x, float y, float width, float height, floa
   rect.height = height;
   rect.radius = radius;
   rect.color = color;
+  rect.transform = transform;
   out.rects.push_back(rect);
   out.ops.push_back(PaintOp{PaintKind::Rect, (uint32_t)(out.rects.size() - 1), clip});
 }
@@ -62,6 +75,7 @@ void addTextRuns(const LayoutBox *box, const XtStyle &style, DisplayList &out,
     run.color = style.color;
     run.text = fragment.text;
     run.font = spec;
+    run.transform = box->world;
     out.texts.push_back(std::move(run));
     out.ops.push_back(PaintOp{PaintKind::Text, (uint32_t)(out.texts.size() - 1), clip});
   }
@@ -75,7 +89,8 @@ void addImage(const PaintImage &image, DisplayList &out, const PaintClip &clip)
 void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip);
 
 /** The clip a box imposes on its content: its padding box, intersected with the
- * clip already in effect. Only `overflow: hidden/scroll/auto` clips. */
+ * clip already in effect. Only `overflow: hidden/scroll/auto` clips. A
+ * transformed box clips to the bounding box of its transformed padding box. */
 PaintClip clipForChildren(const LayoutBox *box, const PaintClip &parent) {
   if (box->style == nullptr || box->style->overflow == Overflow::Visible) return parent;
   float x = box->x + box->border_left;
@@ -84,6 +99,13 @@ PaintClip clipForChildren(const LayoutBox *box, const PaintClip &parent) {
   float height = box->height - box->border_top - box->border_bottom;
   if (width < 0) width = 0;
   if (height < 0) height = 0;
+  if (box->has_transform) {
+    LayoutRect bounds = xt_layout_transform_rect(box->world, x, y, width, height);
+    x = bounds.x;
+    y = bounds.y;
+    width = bounds.width;
+    height = bounds.height;
+  }
   if (!parent.active) return PaintClip{true, x, y, width, height};
   float x0 = std::max(x, parent.x);
   float y0 = std::max(y, parent.y);
@@ -124,10 +146,12 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip) {
       addTextRuns(box, *style, out, clip);
     } else {
       /* Background first, then the border ring, then replaced content. Children
-       * are clipped by this box's padding box when it establishes one. */
+       * are clipped by this box's padding box when it establishes one. Every
+       * shape carries the box's `transform` matrix for the renderer. */
+      const Matrix2D &matrix = box->world;
       if (style->has_background) {
         addRect(out, box->x, box->y, box->width, box->height, style->border_radius,
-                style->background, clip);
+                style->background, clip, matrix);
       }
       if (style->border_style != BorderStyle::None && style->has_border_color) {
         const Color bc = style->border_color;
@@ -136,11 +160,12 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip) {
         float bottom = box->border_bottom;
         float left = box->border_left;
         float inner_height = box->height - top - bottom;
-        addRect(out, box->x, box->y, box->width, top, 0.0f, bc, clip);
-        addRect(out, box->x, box->y + box->height - bottom, box->width, bottom, 0.0f, bc, clip);
-        addRect(out, box->x, box->y + top, left, inner_height, 0.0f, bc, clip);
+        addRect(out, box->x, box->y, box->width, top, 0.0f, bc, clip, matrix);
+        addRect(out, box->x, box->y + box->height - bottom, box->width, bottom, 0.0f, bc, clip,
+                matrix);
+        addRect(out, box->x, box->y + top, left, inner_height, 0.0f, bc, clip, matrix);
         addRect(out, box->x + box->width - right, box->y + top, right, inner_height, 0.0f, bc,
-                clip);
+                clip, matrix);
       }
       if (box->is_canvas && box->canvas_id != 0 && box->content_width > 0.0f &&
           box->content_height > 0.0f) {
@@ -150,6 +175,7 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip) {
         image.width = box->content_width;
         image.height = box->content_height;
         image.canvas_id = box->canvas_id;
+        image.transform = matrix;
         addImage(image, out, clip);
       } else if (box->is_media && box->media_id != 0 && box->content_width > 0.0f &&
                  box->content_height > 0.0f) {
@@ -159,6 +185,7 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip) {
         image.width = box->content_width;
         image.height = box->content_height;
         image.media_id = box->media_id;
+        image.transform = matrix;
         addImage(image, out, clip);
       } else if (box->is_image && !box->image_src.empty() && box->content_width > 0.0f &&
                  box->content_height > 0.0f) {
@@ -168,6 +195,7 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip) {
         image.width = box->content_width;
         image.height = box->content_height;
         image.src = box->image_src;
+        image.transform = matrix;
         addImage(image, out, clip);
       }
     }
@@ -185,7 +213,7 @@ void xt_paint_build(const LayoutBox *root, DisplayList &out) {
 
 std::string DisplayList::dump() const {
   std::string text;
-  char buffer[224];
+  char buffer[288];
   for (const PaintOp &op : ops) {
     std::string prefix;
     if (op.clip.active) {
@@ -193,34 +221,39 @@ std::string DisplayList::dump() const {
                     op.clip.width, op.clip.height);
       prefix = buffer;
     }
+    std::string suffix;
     if (op.kind == PaintKind::Rect) {
+      suffix = transformSuffix(rects[op.index].transform);
       const PaintRect &rect = rects[op.index];
       std::snprintf(buffer, sizeof(buffer),
-                    "rect x=%.1f y=%.1f w=%.1f h=%.1f r=%.1f color=%s\n", rect.x, rect.y,
+                    "rect x=%.1f y=%.1f w=%.1f h=%.1f r=%.1f color=%s", rect.x, rect.y,
                     rect.width, rect.height, rect.radius, formatColor(rect.color).c_str());
       text += prefix + buffer;
     } else if (op.kind == PaintKind::Text) {
+      suffix = transformSuffix(texts[op.index].transform);
       const PaintText &run = texts[op.index];
       std::snprintf(buffer, sizeof(buffer),
-                    "text x=%.1f baseline=%.1f size=%.1f color=%s \"%s\"\n", run.x, run.baseline,
+                    "text x=%.1f baseline=%.1f size=%.1f color=%s \"%s\"", run.x, run.baseline,
                     run.font.pixel_size, formatColor(run.color).c_str(), run.text.c_str());
       text += prefix + buffer;
     } else {
       const PaintImage &image = images[op.index];
+      suffix = transformSuffix(image.transform);
       if (image.media_id != 0) {
-        std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f media=%llu\n",
+        std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f media=%llu",
                       image.x, image.y, image.width, image.height,
                       (unsigned long long)image.media_id);
       } else if (image.canvas_id != 0) {
-        std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f canvas=%llu\n",
+        std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f canvas=%llu",
                       image.x, image.y, image.width, image.height,
                       (unsigned long long)image.canvas_id);
       } else {
-        std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f src=%s\n",
-                      image.x, image.y, image.width, image.height, image.src.c_str());
+        std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f src=%s", image.x,
+                      image.y, image.width, image.height, image.src.c_str());
       }
       text += prefix + buffer;
     }
+    text += suffix + "\n";
   }
   return text;
 }

package/runtime/ext_gui/paint.h

@@ -20,6 +20,7 @@
 #include "css.h"
 #include "layout.h"
 #include "text.h"
+#include "transform.h"
 
 namespace xtgui {
 
@@ -31,6 +32,8 @@ struct PaintRect {
   float height = 0;
   float radius = 0;
   Color color;
+  /** `transform` of the box this shape belongs to (layout -> device space). */
+  Matrix2D transform;
 };
 
 /** A run of text to draw at `x`/`baseline` (viewport-relative). */
@@ -42,6 +45,7 @@ struct PaintText {
   Color color;
   std::string text;
   FontSpec font;
+  Matrix2D transform;
 };
 
 /** An image to draw, scaled into the given rectangle (viewport-relative).
@@ -56,10 +60,12 @@ struct PaintImage {
   std::string src;
   uint64_t media_id = 0;
   uint64_t canvas_id = 0;
+  Matrix2D transform;
 };
 
-/** The clip rectangle in effect for a painted shape (viewport-relative logical
- * pixels). `width <= 0` means "no clip". */
+/** The clip rectangle in effect for a painted shape (device-space logical
+ * pixels — a transformed subtree contributes the bounding box of its clip).
+ * `width <= 0` means "no clip". */
 struct PaintClip {
   bool active = false;
   float x = 0;

package/runtime/ext_gui/renderer.cpp

@@ -50,8 +50,10 @@ void pushRect(std::vector<Vertex> &verts, const xtgui::PaintRect &rect) {
   const float local_y[4] = {-hh, -hh, hh, hh};
   Vertex corners[4];
   for (int i = 0; i < 4; i++) {
-    corners[i].x = cx + local_x[i];
-    corners[i].y = cy + local_y[i];
+    /* `local` keeps the distance-field coordinates in the box's own frame, so
+     * a rotated/scaled shape still gets a rounded rectangle (the radius scales
+     * with the matrix instead of staying circular). */
+    rect.transform.apply(cx + local_x[i], cy + local_y[i], &corners[i].x, &corners[i].y);
     corners[i].lx = local_x[i];
     corners[i].ly = local_y[i];
     corners[i].hx = hw;

package/runtime/ext_gui/renderer_image.cpp

@@ -313,7 +313,8 @@ void xt_gui_image_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
       texture = ensureImageTexture(device, image.src, pixel_width, pixel_height);
     }
     if (texture == nullptr) continue;
-    pushGlyph(verts, image.x, image.y, image.width, image.height, full, white);
+    pushGlyph(verts, image.x, image.y, image.width, image.height, full, white,
+              image.transform);
     geometry->op_counts[index] = 6;
     geometry->op_textures[index] = texture;
   }

package/runtime/ext_gui/renderer_internal.h

@@ -81,7 +81,12 @@ extern bool g_atlas_full_logged;
 
 void pushRect(std::vector<Vertex> &verts, const xtgui::PaintRect &rect);
 void pushGlyph(std::vector<TextVertex> &verts, float x, float y, float width, float height,
-               const GlyphEntry &entry, const xtgui::Color &color);
+               const GlyphEntry &entry, const xtgui::Color &color,
+               const xtgui::Matrix2D &transform);
+/** Push a textured quad, applying a `transform` matrix to its four corners. */
+void pushQuad(std::vector<TextVertex> &verts, const float corners_x[4], const float corners_y[4],
+              const float u[4], const float v[4], const xtgui::Color &color,
+              const xtgui::Matrix2D &transform);
 void uploadVertices(SDL_GPUDevice *device, XtGuiGeometry *geometry, const void *data,
                     uint32_t count, uint32_t stride);
 

package/runtime/ext_gui/renderer_text.cpp

@@ -17,16 +17,17 @@
 namespace xtgui {
 namespace renderer_detail {
 
-void pushGlyph(std::vector<TextVertex> &verts, float x, float y, float width, float height,
-               const GlyphEntry &entry, const xtgui::Color &color) {
-  const float corners_x[4] = {x, x + width, x + width, x};
-  const float corners_y[4] = {y, y, y + height, y + height};
-  const float u[4] = {entry.u0, entry.u1, entry.u1, entry.u0};
-  const float v[4] = {entry.v0, entry.v0, entry.v1, entry.v1};
+/** Bounds for the atlas raster of a transformed glyph: below 1 the text is
+ * already shrinking, above 4 the atlas cost outweighs the sharpness. */
+constexpr float kMinGlyphScale = 0.5f;
+constexpr float kMaxGlyphScale = 4.0f;
+
+void pushQuad(std::vector<TextVertex> &verts, const float corners_x[4], const float corners_y[4],
+              const float u[4], const float v[4], const xtgui::Color &color,
+              const xtgui::Matrix2D &transform) {
   TextVertex corners[4];
   for (int i = 0; i < 4; i++) {
-    corners[i].x = corners_x[i];
-    corners[i].y = corners_y[i];
+    transform.apply(corners_x[i], corners_y[i], &corners[i].x, &corners[i].y);
     corners[i].u = u[i];
     corners[i].v = v[i];
     corners[i].r = color.r;
@@ -38,6 +39,16 @@ void pushGlyph(std::vector<TextVertex> &verts, float x, float y, float width, fl
   for (int i = 0; i < 6; i++) verts.push_back(corners[order[i]]);
 }
 
+void pushGlyph(std::vector<TextVertex> &verts, float x, float y, float width, float height,
+               const GlyphEntry &entry, const xtgui::Color &color,
+               const xtgui::Matrix2D &transform) {
+  const float corners_x[4] = {x, x + width, x + width, x};
+  const float corners_y[4] = {y, y, y + height, y + height};
+  const float u[4] = {entry.u0, entry.u1, entry.u1, entry.u0};
+  const float v[4] = {entry.v0, entry.v0, entry.v1, entry.v1};
+  pushQuad(verts, corners_x, corners_y, u, v, color, transform);
+}
+
 bool ensureAtlasTexture(SDL_GPUDevice *device) {
   if (g_atlas_texture != nullptr) return true;
   SDL_GPUTextureCreateInfo info;
@@ -302,6 +313,15 @@ void xt_gui_text_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
     xtgui::Font *logical = xtgui::xt_text_resolve(run.font);
     if (logical == nullptr) continue;
 
+    /* A scaling `transform` magnifies the glyph quads on the GPU, so the atlas
+       has to hold a raster of that size or the text looks like a scaled bitmap:
+       rasterise at the device scale times the transform's magnification, and
+       clamp it — the atlas is finite, and a 40x transform would evict every
+       other glyph (a magnified bitmap is the right trade at that point). */
+    float glyph_scale = scale * run.transform.magnification();
+    if (glyph_scale < kMinGlyphScale) glyph_scale = kMinGlyphScale;
+    if (glyph_scale > kMaxGlyphScale) glyph_scale = kMaxGlyphScale;
+
     std::vector<xtgui::ShapedGlyph> glyphs;
     xtgui::xt_text_shape_run(run.text, logical, glyphs);
     float pen_x = run.x;
@@ -309,17 +329,19 @@ void xt_gui_text_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
     for (const xtgui::ShapedGlyph &glyph : glyphs) {
       if (glyph.glyph != 0) {
         xtgui::Font *face = glyph.font != nullptr ? glyph.font : logical;
-        if (scale != 1.0f) {
-          xtgui::Font *scaled = xtgui::xt_text_scale(face, run.font.pixel_size * scale);
+        if (glyph_scale != 1.0f) {
+          xtgui::Font *scaled = xtgui::xt_text_scale(face, run.font.pixel_size * glyph_scale);
           if (scaled != nullptr) face = scaled;
         }
         GlyphEntry entry;
         if (ensureGlyph(device, face, glyph.glyph, entry)) {
-          float quad_x = pen_x + glyph.x_offset + (float)entry.left / scale;
-          float quad_y = run.baseline + glyph.y_offset - (float)entry.top / scale;
-          float quad_w = (float)entry.width / scale;
-          float quad_h = (float)entry.height / scale;
-          pushGlyph(verts, quad_x, quad_y, quad_w, quad_h, entry, run.color);
+          /* Entry metrics are in raster pixels; divide them back into logical
+             units — the transform (not the atlas) does the final scaling. */
+          float quad_x = pen_x + glyph.x_offset + (float)entry.left / glyph_scale;
+          float quad_y = run.baseline + glyph.y_offset - (float)entry.top / glyph_scale;
+          float quad_w = (float)entry.width / glyph_scale;
+          float quad_h = (float)entry.height / glyph_scale;
+          pushGlyph(verts, quad_x, quad_y, quad_w, quad_h, entry, run.color, run.transform);
         }
       }
       pen_x += glyph.x_advance;

package/runtime/ext_gui/style.h

@@ -16,6 +16,7 @@
 
 #include "css.h"
 #include "dom.h"
+#include "transform.h"
 
 namespace xtgui {
 
@@ -107,6 +108,12 @@ struct XtStyle {
   FloatSide float_side = FloatSide::None;
   Clear clear = Clear::None;
 
+  /** `transform` (not inherited) and `transform-origin` (defaults to the centre
+   * of the border box). Layout resolves the list into one matrix per box. */
+  std::vector<TransformOp> transform;
+  Length transform_origin_x{50.0f, Unit::Percent};
+  Length transform_origin_y{50.0f, Unit::Percent};
+
   /** `transition` specs; not inherited. Applied by `XtDocument`. */
   std::vector<TransitionSpec> transitions;
 };
@@ -123,6 +130,9 @@ void xt_style_compute(const Node *root, const StyleSheet &sheet,
 /** Format a computed property for diagnostics/tests (`computedStyle(sel, prop)`). */
 std::string xt_style_property_to_string(const XtStyle &style, const std::string &property);
 
+/** Format a length the way `computedStyle` does (`4px`, `50%`, `1.5`). */
+std::string xt_style_length_to_string(const Length &length);
+
 }  // namespace xtgui
 
 #endif /* XT_GUI_STYLE_H */

package/runtime/ext_gui/style_print.cpp

@@ -118,7 +118,13 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
   if (property == "border-radius") return formatNumber(style.border_radius) + "px";
   if (property == "opacity") return formatNumber(style.opacity);
   if (property == "z-index") return style.has_z_index ? formatNumber((float)style.z_index) : "auto";
+  if (property == "transform") return xt_transform_to_string(style.transform);
+  if (property == "transform-origin") {
+    return formatLength(style.transform_origin_x) + " " + formatLength(style.transform_origin_y);
+  }
   return "";
 }
 
+std::string xt_style_length_to_string(const Length &length) { return formatLength(length); }
+
 }  // namespace xtgui

package/runtime/ext_gui/style_values.cpp

@@ -441,6 +441,49 @@ void xt_style_apply_declaration(XtStyle *style, const std::string &property,
     return;
   }
 
+  if (property == "transform") {
+    std::vector<TransformOp> ops;
+    if (xt_transform_parse(value, &ops)) style->transform = ops;
+    return;
+  }
+  if (property == "transform-origin") {
+    /* One or two values plus an optional z offset (ignored: the engine is 2D).
+     * The keywords carry an axis, so `top` alone means `center top` and
+     * `top center` is the same as `center top`. */
+    std::vector<std::string> parts = xt_css_split_whitespace(value);
+    Length values[2] = {Length{50.0f, Unit::Percent}, Length{50.0f, Unit::Percent}};
+    bool vertical[2] = {false, false};
+    size_t used = 0;
+    for (const std::string &part : parts) {
+      if (used >= 2) break;
+      std::string keyword = xt_css_lower(part);
+      Length length = xt_css_parse_length(keyword);
+      if (length.unit == Unit::Invalid || length.unit == Unit::Auto || length.unit == Unit::None) {
+        if (keyword == "left" || keyword == "top") length = {0.0f, Unit::Percent};
+        else if (keyword == "center") length = {50.0f, Unit::Percent};
+        else if (keyword == "right" || keyword == "bottom") length = {100.0f, Unit::Percent};
+        else return;
+        vertical[used] = keyword == "top" || keyword == "bottom";
+      }
+      values[used++] = length;
+    }
+    if (used == 0) return;
+    Length x = values[0];
+    Length y = used > 1 ? values[1] : Length{50.0f, Unit::Percent};
+    if (used > 1) {
+      if (vertical[0] && !vertical[1]) {
+        x = values[1];
+        y = values[0];
+      }
+    } else if (vertical[0]) {
+      /* `top`/`bottom` on their own keep x centred. */
+      x = Length{50.0f, Unit::Percent};
+      y = values[0];
+    }
+    style->transform_origin_x = x;
+    style->transform_origin_y = y;
+    return;
+  }
   if (property == "opacity") {
     float number = 0;
     if (xt_css_parse_number(value, &number)) style->opacity = number < 0 ? 0 : (number > 1 ? 1 : number);