xbintsc 0.5.45 → 0.5.52

package/runtime/ext_gui/style.cpp

@@ -136,6 +136,18 @@ static bool substituteVariables(const std::string &value,
 }
 
 void finalizeStyle(XtStyle *style, const ApplyContext &context) {
+  /* `letter-spacing` is resolved against the element's own font size. */
+  if (style->letter_spacing.unit != Unit::Px && style->letter_spacing.unit != Unit::Number) {
+    style->letter_spacing.value = xt_style_resolve_absolute(
+        style->letter_spacing, style->font_size, style->font_size, context.rootFontSize,
+        context.viewportWidth, context.viewportHeight);
+    style->letter_spacing.unit = Unit::Px;
+  }
+  /* `outline-color` defaults to the element's `color`. */
+  if (style->outline_style != BorderStyle::None && !style->has_outline_color) {
+    style->outline_color = style->color;
+    style->has_outline_color = true;
+  }
   switch (style->line_height.unit) {
     case Unit::Em:
     case Unit::Percent:
@@ -145,6 +157,7 @@ void finalizeStyle(XtStyle *style, const ApplyContext &context) {
     case Unit::Clamp:
     case Unit::Min:
     case Unit::Max:
+    case Unit::Calc:
       style->line_height.value = xt_style_resolve_absolute(
           style->line_height, style->font_size, style->font_size, context.rootFontSize,
           context.viewportWidth, context.viewportHeight);
@@ -172,6 +185,11 @@ void inheritFrom(XtStyle *style, const XtStyle *parent) {
   style->text_align = parent->text_align;
   style->white_space = parent->white_space;
   style->text_shadow = parent->text_shadow;
+  style->text_transform = parent->text_transform;
+  style->letter_spacing = parent->letter_spacing;
+  style->font_variant_numeric = parent->font_variant_numeric;
+  style->writing_mode = parent->writing_mode;
+  style->cursor = parent->cursor;
 }
 
 void applyCandidates(XtStyle *style, std::vector<Candidate> *candidates,
@@ -187,15 +205,43 @@ void applyCandidates(XtStyle *style, std::vector<Candidate> *candidates,
       style->variables[candidate.declaration->property] = candidate.declaration->value;
     }
   }
-  for (const Candidate &candidate : *candidates) {
-    if (isCustomProperty(candidate.declaration->property)) continue;
-    std::string value = candidate.declaration->value;
-    if (value.find("var(") != std::string::npos) {
+  auto resolvedValue = [&](const Candidate &candidate, std::string *out) {
+    *out = candidate.declaration->value;
+    if (out->find("var(") != std::string::npos) {
       std::string resolved;
-      if (!substituteVariables(value, style->variables, 0, &resolved)) continue;
-      value = resolved;
+      if (!substituteVariables(*out, style->variables, 0, &resolved)) return false;
+      *out = resolved;
+    }
+    return true;
+  };
+  /* `color` is computed before the other declarations: `currentColor` in them
+   * refers to this element's final colour regardless of source order. */
+  for (const Candidate &candidate : *candidates) {
+    if (isCustomProperty(candidate.declaration->property) ||
+        candidate.declaration->property != "color") {
+      continue;
+    }
+    std::string value;
+    if (!resolvedValue(candidate, &value)) continue;
+    if (value == "inherit") {
+      xt_style_apply_inherit(style, nodeContext.parent, "color");
+      continue;
     }
-    xt_style_apply_declaration(style, candidate.declaration->property, value, nodeContext);
+    xt_style_apply_declaration(style, "color", value, nodeContext);
+  }
+  for (const Candidate &candidate : *candidates) {
+    const std::string &property = candidate.declaration->property;
+    if (isCustomProperty(property) || property == "color") continue;
+    std::string value;
+    if (!resolvedValue(candidate, &value)) continue;
+    if (value == "inherit") {
+      xt_style_apply_inherit(style, nodeContext.parent, property);
+      continue;
+    }
+    if (xt_css_lower(value).find("current") != std::string::npos) {
+      value = xt_style_replace_current_color(value, style->color);
+    }
+    xt_style_apply_declaration(style, property, value, nodeContext);
   }
 }
 
@@ -348,6 +394,7 @@ struct ComputeScratch {
    * `style="transition: …"`), so the document knows whether it needs the
    * transition snapshot path at all. */
   bool has_transitions = false;
+  bool has_animations = false;
 };
 
 void pushCandidates(std::vector<Candidate> *candidates, ComputeScratch *scratch,
@@ -377,6 +424,7 @@ void computePseudo(const Node *origin, PseudoElement side, const XtStyle &origin
 
   ApplyContext nodeContext = context;
   nodeContext.parentFontSize = originStyle.font_size;
+  nodeContext.parent = &originStyle;
 
   std::string pseudoName = side == PseudoElement::Before ? "before" : "after";
   std::vector<Candidate> &candidates = scratch->candidates;
@@ -402,6 +450,7 @@ void computePseudo(const Node *origin, PseudoElement side, const XtStyle &origin
   applyCandidates(&style, &candidates, nodeContext);
   finalizeStyle(&style, nodeContext);
   if (!style.transitions.empty()) scratch->has_transitions = true;
+  if (!style.animations.empty()) scratch->has_animations = true;
 
   bool generated = false;
   std::string text;
@@ -428,6 +477,7 @@ void computeNode(const Node *node, const XtStyle *parent, const StyleSheet &shee
 
     ApplyContext nodeContext = context;
     nodeContext.parentFontSize = (parent != nullptr) ? parent->font_size : context.rootFontSize;
+    nodeContext.parent = parent;
 
     std::vector<Candidate> &candidates = scratch->candidates;
     candidates.clear();
@@ -455,6 +505,7 @@ void computeNode(const Node *node, const XtStyle *parent, const StyleSheet &shee
     applyCandidates(&style, &candidates, nodeContext);
     finalizeStyle(&style, nodeContext);
     if (!style.transitions.empty()) scratch->has_transitions = true;
+    if (!style.animations.empty()) scratch->has_animations = true;
 
     /* `emplace` keeps the address of an existing entry stable, which is what
      * `box->style` pointers rely on. */
@@ -479,7 +530,7 @@ void computeNode(const Node *node, const XtStyle *parent, const StyleSheet &shee
 void xt_style_compute(const Node *root, const StyleSheet &sheet,
                       std::unordered_map<const Node *, XtStyle> &out, float viewportWidth,
                       float viewportHeight, const MatchState &state, PseudoNodeSet *pseudos,
-                      bool *hasTransitions) {
+                      bool *hasTransitions, bool *hasAnimations) {
   out.clear();
   bool wantsPseudo = pseudos != nullptr && sheet.has_pseudo_elements;
   if (wantsPseudo && root != nullptr) {
@@ -512,6 +563,9 @@ void xt_style_compute(const Node *root, const StyleSheet &sheet,
   if (hasTransitions != nullptr) {
     *hasTransitions = *hasTransitions || scratch.has_transitions;
   }
+  if (hasAnimations != nullptr) {
+    *hasAnimations = *hasAnimations || scratch.has_animations;
+  }
 }
 
 }  // namespace xtgui

package/runtime/ext_gui/style.h

@@ -10,6 +10,7 @@
 #ifndef XT_GUI_STYLE_H
 #define XT_GUI_STYLE_H
 
+#include <map>
 #include <memory>
 #include <string>
 #include <unordered_map>
@@ -36,7 +37,64 @@ enum class WhiteSpace { Normal, NoWrap, Pre, PreWrap, PreLine };
 enum class Overflow { Visible, Hidden, Scroll, Auto };
 enum class BorderStyle { None, Solid, Dashed, Dotted };
 enum class FontStyle { Normal, Italic };
-enum class TimingFunction { Linear, Ease, EaseIn, EaseOut, EaseInOut };
+
+/** CSS `text-transform`; only plain ASCII case mapping is applied. */
+enum class TextTransform { None, Uppercase, Lowercase, Capitalize };
+
+/** CSS `writing-mode`. Only text-level vertical layout is implemented. */
+enum class WritingMode { HorizontalTB, VerticalRL, VerticalLR };
+
+/** CSS `cursor` values the engine maps to an SDL system cursor. */
+enum class CursorShape { Auto, Default, Pointer, Text, Move, Wait, Help, NotAllowed, Crosshair };
+
+/** Apply a computed `text-transform` to a text node's UTF-8 contents. */
+std::string xt_apply_text_transform(const std::string &text, TextTransform transform);
+
+/** Resolve a `border-radius` against a border box (percent uses min(w, h)). */
+float xt_style_border_radius_px(const Length &radius, float width, float height, float em,
+                                float root, float vw, float vh);
+
+/** One `background-size` entry for an image layer. */
+struct BackgroundSize {
+  Length width{0.0f, Unit::Auto};
+  Length height{0.0f, Unit::Auto};
+};
+
+/** A CSS timing function. `Ease`/`Linear`/… are the keywords; `CubicBezier` and
+ * the two `Steps` kinds carry their parameters. */
+struct TimingFunction {
+  enum class Kind {
+    Linear,
+    Ease,
+    EaseIn,
+    EaseOut,
+    EaseInOut,
+    CubicBezier,
+    StepsStart,
+    StepsEnd
+  };
+  Kind kind = Kind::Ease;
+  float x1 = 0.25f;
+  float y1 = 0.1f;
+  float x2 = 0.25f;
+  float y2 = 1.0f;
+  int steps = 1;
+};
+
+enum class AnimationDirection { Normal, Reverse, Alternate, AlternateReverse };
+enum class AnimationFillMode { None, Forwards, Backwards, Both };
+
+/** One `animation` entry: a `@keyframes` name plus how it runs. */
+struct AnimationSpec {
+  std::string name = "none";
+  float duration = 0.0f;   // seconds
+  float delay = 0.0f;      // seconds
+  float iterations = 1.0f; // `infinite` is stored as -1
+  TimingFunction timing;
+  AnimationDirection direction = AnimationDirection::Normal;
+  AnimationFillMode fill = AnimationFillMode::None;
+  bool paused = false;
+};
 
 /** CSS `mix-blend-mode`. The order matches the composite shader's `u_mode`
  * enum and the keyword table in `style_values.cpp`. */
@@ -64,7 +122,7 @@ struct TransitionSpec {
   std::string property = "all";
   float duration = 0.0f;  // seconds
   float delay = 0.0f;     // seconds
-  TimingFunction timing = TimingFunction::Ease;
+  TimingFunction timing;
 };
 
 /** One track of a `grid-template-columns` / `grid-template-rows` list.
@@ -161,6 +219,17 @@ struct TextShadow {
   bool has_color = false;
 };
 
+/** One `box-shadow` entry (`inset` keyword, spread included). */
+struct BoxShadow {
+  Length dx;
+  Length dy;
+  Length blur;
+  Length spread;
+  Color color;  // `has_color == false` means currentColor
+  bool has_color = false;
+  bool inset = false;
+};
+
 struct Edges {
   Length top;
   Length right;
@@ -178,12 +247,20 @@ struct XtStyle {
   std::unordered_map<std::string, std::string> variables;
   Position position = Position::Static;
   Edges margin;
+  /** Which margins were explicitly declared `auto` (the `Edges` default unit is
+   * Auto, so the raw value cannot distinguish "unset" from "auto"). */
+  bool margin_left_auto = false;
+  bool margin_right_auto = false;
+  bool margin_top_auto = false;
+  bool margin_bottom_auto = false;
   Edges padding;
   Edges border_width;
   BorderStyle border_style = BorderStyle::None;
   Color border_color;
   bool has_border_color = false;
-  float border_radius = 0.0f;
+  /** `border-radius` stays symbolic so a `50%` radius can resolve against the
+   * box in layout (the engine has one radius, so percentages use min(w, h)). */
+  Length border_radius{0.0f, Unit::Px};
 
   Length width;
   Length height;
@@ -203,6 +280,8 @@ struct XtStyle {
   bool has_background = false;
   /** `background-image` layers, in declaration order (first = topmost). */
   std::vector<BackgroundLayer> background_layers;
+  /** Per-layer `background-size`; empty keeps the historical stretch. */
+  std::vector<BackgroundSize> background_sizes;
   /** `clip-path`; `Type::None` leaves the box unclipped. */
   ClipPathSpec clip_path;
   /** `filter` / `backdrop-filter` function lists (not inherited). */
@@ -210,6 +289,8 @@ struct XtStyle {
   std::vector<FilterOp> backdrop_filters;
   /** `text-shadow` entries (inherited, as in CSS). */
   std::vector<TextShadow> text_shadow;
+  /** `box-shadow` entries (not inherited); declaration order = topmost first. */
+  std::vector<BoxShadow> box_shadow;
   /** Generated `content` of a `::before`/`::after` box. The cascade resolves
    * `attr()` and string escapes before layout; `has_content` distinguishes
    * `content: ""` from no generated box. */
@@ -224,6 +305,14 @@ struct XtStyle {
 
   TextAlign text_align = TextAlign::Start;  // inherited
   WhiteSpace white_space = WhiteSpace::Normal;  // inherited
+  TextTransform text_transform = TextTransform::None;  // inherited
+  /** Resolved to pixels in the cascade (em is the element's own font size). */
+  Length letter_spacing{0.0f, Unit::Px};  // inherited
+  bool font_variant_numeric = false;  // inherited; accepted, no OpenType features
+  WritingMode writing_mode = WritingMode::HorizontalTB;  // inherited
+  Length vertical_align;  // not inherited; atomic inline boxes only
+  /** `aspect-ratio` as width / height, or 0 when unset. */
+  float aspect_ratio = 0.0f;
 
   FlexDirection flex_direction = FlexDirection::Row;
   FlexWrap flex_wrap = FlexWrap::NoWrap;
@@ -251,6 +340,21 @@ struct XtStyle {
   Length flex_basis;
 
   float opacity = 1.0f;
+  /** `display: inline-flex` / `inline-grid`: a flex/grid container that is
+   * still inline-level (laid out atomically by its line box). */
+  bool inline_level = false;
+  /** `isolation`: parsed for compatibility; group isolation is not modelled. */
+  bool isolation = false;
+  CursorShape cursor = CursorShape::Auto;
+  /** `outline` (painted outside the border box). */
+  Length outline_width;
+  BorderStyle outline_style = BorderStyle::None;
+  Color outline_color;
+  bool has_outline_color = false;
+  Length outline_offset;
+  /** Computed SVG presentation properties (`fill`, `stroke`, …) injected into
+   * serialized inline `<svg>` markup. Only populated on SVG elements. */
+  std::map<std::string, std::string> svg_props;
   /** `mix-blend-mode` (not inherited: it creates a compositing group). */
   MixBlendMode mix_blend_mode = MixBlendMode::Normal;
   Overflow overflow = Overflow::Visible;
@@ -268,6 +372,8 @@ struct XtStyle {
 
   /** `transition` specs; not inherited. Applied by `XtDocument`. */
   std::vector<TransitionSpec> transitions;
+  /** `animation` specs; not inherited. Applied by `XtDocument`. */
+  std::vector<AnimationSpec> animations;
 };
 
 /** Initial (non-inherited) style; inherited fields are overridden from the parent. */
@@ -297,7 +403,8 @@ class PseudoNodeSet {
 void xt_style_compute(const Node *root, const StyleSheet &sheet,
                       std::unordered_map<const Node *, XtStyle> &out, float viewportWidth,
                       float viewportHeight, const MatchState &state = MatchState(),
-                      PseudoNodeSet *pseudos = nullptr, bool *hasTransitions = nullptr);
+                      PseudoNodeSet *pseudos = nullptr, bool *hasTransitions = nullptr,
+                      bool *hasAnimations = nullptr);
 
 /** Format a computed property for diagnostics/tests (`computedStyle(sel, prop)`). */
 std::string xt_style_property_to_string(const XtStyle &style, const std::string &property);

package/runtime/ext_gui/style_cascade.cpp

@@ -0,0 +1,83 @@
+/*
+ * xbintsc GUI engine — cascade value helpers.
+ *
+ * CSS-wide `inherit` for the shorthands that appear in real stylesheets, and
+ * `currentColor` substitution. They live apart from `style.cpp` so the cascade
+ * core stays under the repository's per-file line budget.
+ */
+
+#include "style_internal.h"
+
+#include <cctype>
+#include <cstdio>
+#include <string>
+
+namespace xtgui {
+
+void xt_style_apply_inherit(XtStyle *style, const XtStyle *parent, const std::string &property) {
+  if (parent == nullptr) return;
+  if (property == "color") {
+    style->color = parent->color;
+  } else if (property == "clip-path") {
+    style->clip_path = parent->clip_path;
+  } else if (property == "font") {
+    style->font_size = parent->font_size;
+    style->font_weight = parent->font_weight;
+    style->font_family = parent->font_family;
+    style->font_style = parent->font_style;
+    style->line_height = parent->line_height;
+    style->letter_spacing = parent->letter_spacing;
+    style->font_variant_numeric = parent->font_variant_numeric;
+  }
+}
+
+std::string xt_style_replace_current_color(const std::string &value, const Color &color) {
+  std::string out;
+  char quote = 0;
+  auto matches = [&value](size_t at) {
+    if (at + 12 > value.size()) return false;
+    for (size_t i = 0; i < 12; i++) {
+      char c = value[at + i];
+      if (c >= 'A' && c <= 'Z') c = (char)(c - 'A' + 'a');
+      if (c != "currentcolor"[i]) return false;
+    }
+    if (at > 0) {
+      char before = value[at - 1];
+      if (std::isalnum((unsigned char)before) || before == '-' || before == '_') return false;
+    }
+    if (at + 12 < value.size()) {
+      char after = value[at + 12];
+      if (std::isalnum((unsigned char)after) || after == '-' || after == '_') return false;
+    }
+    return true;
+  };
+  for (size_t i = 0; i < value.size();) {
+    char c = value[i];
+    if (quote != 0) {
+      out.push_back(c);
+      if (c == quote) quote = 0;
+      i++;
+      continue;
+    }
+    if (c == '"' || c == '\'') {
+      quote = c;
+      out.push_back(c);
+      i++;
+      continue;
+    }
+    if (matches(i)) {
+      char buffer[96];
+      std::snprintf(buffer, sizeof(buffer), "rgba(%ld, %ld, %ld, %.3f)",
+                    (long)(color.r * 255.0f + 0.5f), (long)(color.g * 255.0f + 0.5f),
+                    (long)(color.b * 255.0f + 0.5f), (double)color.a);
+      out += buffer;
+      i += 12;
+      continue;
+    }
+    out.push_back(c);
+    i++;
+  }
+  return out;
+}
+
+}  // namespace xtgui

package/runtime/ext_gui/style_internal.h

@@ -15,16 +15,28 @@ struct ApplyContext {
   float parentFontSize = 16.0f;
   float viewportWidth = 0.0f;
   float viewportHeight = 0.0f;
+  /** Parent computed style; needed by `inherit` and the `font` shorthand. */
+  const XtStyle *parent = nullptr;
 };
 
 /** Resolve a length to pixels given the current font/viewport context. */
 float xt_style_resolve_absolute(const Length &length, float base, float em, float root, float vw,
                                 float vh);
 
+/** CSS-wide `inherit` for the shorthands the engine handles. */
+void xt_style_apply_inherit(XtStyle *style, const XtStyle *parent, const std::string &property);
+
+/** Replace `currentcolor` outside quoted strings with `color`'s rgba spelling. */
+std::string xt_style_replace_current_color(const std::string &value, const Color &color);
+
 /** Apply the built-in user-agent rules for one element. */
 void xt_style_apply_user_agent(const Node *node, XtStyle *style);
 
-/** Apply one parsed declaration (`property: value`) onto a computed style. */
+/** Resolve a `border-radius` against a border box (percent uses min(w, h)). */
+float xt_style_border_radius_px(const Length &radius, float width, float height, float em,
+                                float root, float vw, float vh);
+
+/** Apply a parsed declaration to a computed style. */
 void xt_style_apply_declaration(XtStyle *style, const std::string &property,
                                 const std::string &rawValue, const ApplyContext &context);
 

package/runtime/ext_gui/style_length.cpp

@@ -0,0 +1,92 @@
+/*
+ * xbintsc GUI engine — resolution of computed CSS lengths.
+ *
+ * `Length` keeps a symbolic expression (`calc()`, `min()`/`max()`/`clamp()`,
+ * percentages and relative units) until layout knows the containing block, the
+ * element's font size and the viewport. This unit is that one entry point; it
+ * lives apart from declaration parsing to keep `style_values.cpp` focused.
+ */
+
+#include "style_internal.h"
+
+namespace xtgui {
+
+float xt_style_resolve_absolute(const Length &length, float base, float em, float root, float vw,
+                                float vh) {
+  switch (length.unit) {
+    case Unit::Clamp: {
+      if (length.args.size() < 3) return 0.0f;
+      float low = xt_style_resolve_absolute(length.args[0], base, em, root, vw, vh);
+      float value = xt_style_resolve_absolute(length.args[1], base, em, root, vw, vh);
+      float high = xt_style_resolve_absolute(length.args[2], base, em, root, vw, vh);
+      return value < low ? low : (value > high ? high : value);
+    }
+    case Unit::Min: {
+      float best = 0.0f;
+      bool first = true;
+      for (const Length &arg : length.args) {
+        float value = xt_style_resolve_absolute(arg, base, em, root, vw, vh);
+        if (first || value < best) best = value;
+        first = false;
+      }
+      return best;
+    }
+    case Unit::Max: {
+      float best = 0.0f;
+      bool first = true;
+      for (const Length &arg : length.args) {
+        float value = xt_style_resolve_absolute(arg, base, em, root, vw, vh);
+        if (first || value > best) best = value;
+        first = false;
+      }
+      return best;
+    }
+    case Unit::Calc: {
+      if (length.args.size() < 2) return 0.0f;
+      float left = xt_style_resolve_absolute(length.args[0], base, em, root, vw, vh);
+      float right = xt_style_resolve_absolute(length.args[1], base, em, root, vw, vh);
+      switch (length.op) {
+        case '+':
+          return left + right;
+        case '-':
+          return left - right;
+        case '*':
+          return left * right;
+        case '/':
+          /* Division by zero makes the whole `calc()` invalid in CSS; the
+           * declaration is dropped, which here means "no value contributed". */
+          return right == 0.0f ? 0.0f : left / right;
+        default:
+          return left;
+      }
+    }
+    case Unit::Px:
+    case Unit::Number:
+      return length.value;
+    case Unit::Percent:
+      return base * length.value / 100.0f;
+    case Unit::Em:
+      return em * length.value;
+    case Unit::Rem:
+      return root * length.value;
+    case Unit::Vw:
+      return vw * length.value / 100.0f;
+    case Unit::Vh:
+      return vh * length.value / 100.0f;
+    default:
+      return 0.0f;
+  }
+}
+
+float xt_style_border_radius_px(const Length &radius, float width, float height, float em,
+                                float root, float vw, float vh) {
+  float base = width < height ? width : height;
+  if (base < 0.0f) base = 0.0f;
+  float value = xt_style_resolve_absolute(radius, base, em, root, vw, vh);
+  if (value < 0.0f) value = 0.0f;
+  float half = (width < height ? width : height) / 2.0f;
+  if (half < 0.0f) half = 0.0f;
+  return value > half ? half : value;
+}
+
+}  // namespace xtgui

package/runtime/ext_gui/style_print.cpp

@@ -18,6 +18,21 @@ static std::string formatNumber(float number) {
   return buffer;
 }
 
+static std::string formatCalcBody(const Length &length);
+static std::string formatLength(const Length &length);
+
+/** A nested `calc()` operand is parenthesised instead of spelling `calc(calc(…))`,
+ * except where operator precedence already groups it the same way. */
+static std::string formatCalcOperand(const Length &length, char parent_op) {
+  if (length.unit == Unit::Calc) {
+    int parent_precedence = (parent_op == '*' || parent_op == '/') ? 2 : 1;
+    int own_precedence = (length.op == '*' || length.op == '/') ? 2 : 1;
+    if (own_precedence > parent_precedence) return formatCalcBody(length);
+    return "(" + formatCalcBody(length) + ")";
+  }
+  return formatLength(length);
+}
+
 static std::string formatLength(const Length &length) {
   switch (length.unit) {
     case Unit::Auto:
@@ -50,11 +65,24 @@ static std::string formatLength(const Length &length) {
       text += ")";
       return text;
     }
+    case Unit::Calc:
+      return "calc(" + formatCalcBody(length) + ")";
     default:
       return "";
   }
 }
 
+static std::string formatCalcBody(const Length &length) {
+  if (length.args.size() < 2) return "";
+  char op = length.op != 0 ? length.op : '?';
+  std::string text = formatCalcOperand(length.args[0], op);
+  text += " ";
+  text.push_back(op);
+  text += " ";
+  text += formatCalcOperand(length.args[1], op);
+  return text;
+}
+
 static std::string formatColor(const Color &color) {
   if (color.a >= 1.0f) {
     char buffer[64];
@@ -123,6 +151,22 @@ static std::string formatFilterList(const std::vector<FilterOp> &filters) {
   return out;
 }
 
+static std::string formatBoxShadows(const std::vector<BoxShadow> &shadows) {
+  if (shadows.empty()) return "none";
+  std::string out;
+  for (const BoxShadow &shadow : shadows) {
+    if (!out.empty()) out += ", ";
+    if (shadow.inset) out += "inset ";
+    out += formatLength(shadow.dx) + " " + formatLength(shadow.dy);
+    bool zeroBlur = shadow.blur.unit == Unit::Px && shadow.blur.value == 0.0f;
+    bool zeroSpread = shadow.spread.unit == Unit::Px && shadow.spread.value == 0.0f;
+    if (!zeroBlur || !zeroSpread) out += " " + formatLength(shadow.blur);
+    if (!zeroSpread) out += " " + formatLength(shadow.spread);
+    if (shadow.has_color) out += " " + formatColor(shadow.color);
+  }
+  return out;
+}
+
 static std::string formatTextShadows(const std::vector<TextShadow> &shadows) {
   if (shadows.empty()) return "none";
   std::string out;
@@ -189,8 +233,16 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
   static const char *const floatNames[] = {"none", "left", "right"};
   static const char *const clearNames[] = {"none", "left", "right", "both"};
   static const char *const alignTextNames[] = {"start", "center", "end", "justify"};
+  static const char *const textTransformNames[] = {"none", "uppercase", "lowercase", "capitalize"};
+  static const char *const writingModeNames[] = {"horizontal-tb", "vertical-rl", "vertical-lr"};
+  static const char *const cursorNames[] = {"auto", "default", "pointer", "text", "move",
+                                            "wait", "help", "not-allowed", "crosshair"};
+  static const char *const borderStyleNames[] = {"none", "solid", "dashed", "dotted"};
 
-  if (property == "display") return displayNames[(int)style.display];
+  if (property == "display") {
+    if (style.inline_level) return style.display == Display::Grid ? "inline-grid" : "inline-flex";
+    return displayNames[(int)style.display];
+  }
   if (property == "position") return positionNames[(int)style.position];
   if (property == "color") return formatColor(style.color);
   if (property == "background-color" || property == "background") {
@@ -221,6 +273,34 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
     return style.line_height.unit == Unit::Auto ? "normal" : formatLength(style.line_height);
   }
   if (property == "text-align") return alignTextNames[(int)style.text_align];
+  if (property == "text-transform") return textTransformNames[(int)style.text_transform];
+  if (property == "letter-spacing") return formatLength(style.letter_spacing);
+  if (property == "writing-mode") return writingModeNames[(int)style.writing_mode];
+  if (property == "vertical-align") return formatLength(style.vertical_align);
+  if (property == "font-variant-numeric") return style.font_variant_numeric ? "tabular-nums" : "normal";
+  if (property == "cursor") return cursorNames[(int)style.cursor];
+  if (property == "aspect-ratio") return style.aspect_ratio > 0 ? formatNumber(style.aspect_ratio) : "auto";
+  if (property == "grid-area") {
+    return formatNumber((float)style.grid_row_start) + " / " +
+           formatNumber((float)style.grid_column_start) + " / " +
+           formatNumber((float)style.grid_row_end) + " / " +
+           formatNumber((float)style.grid_column_end);
+  }
+  if (property == "outline-width") return formatLength(style.outline_width);
+  if (property == "outline-style") return borderStyleNames[(int)style.outline_style];
+  if (property == "outline-color") {
+    return style.has_outline_color ? formatColor(style.outline_color) : "currentcolor";
+  }
+  if (property == "outline-offset") return formatLength(style.outline_offset);
+  if (property == "background-size") {
+    if (style.background_sizes.empty()) return "auto";
+    std::string out;
+    for (const BackgroundSize &size : style.background_sizes) {
+      if (!out.empty()) out += ", ";
+      out += formatLength(size.width) + " " + formatLength(size.height);
+    }
+    return out;
+  }
   if (property == "flex-direction") return flexNames[(int)style.flex_direction];
   if (property == "flex-wrap") return wrapNames[(int)style.flex_wrap];
   if (property == "justify-content") return justifyNames[(int)style.justify_content];
@@ -234,7 +314,7 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
   if (property == "flex-grow") return formatNumber(style.flex_grow);
   if (property == "flex-shrink") return formatNumber(style.flex_shrink);
   if (property == "flex-basis") return formatLength(style.flex_basis);
-  if (property == "border-radius") return formatNumber(style.border_radius) + "px";
+  if (property == "border-radius") return formatLength(style.border_radius);
   if (property == "opacity") return formatNumber(style.opacity);
   if (property == "mix-blend-mode") {
     static const char *const names[] = {
@@ -250,6 +330,7 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
   if (property == "filter") return formatFilterList(style.filters);
   if (property == "backdrop-filter") return formatFilterList(style.backdrop_filters);
   if (property == "text-shadow") return formatTextShadows(style.text_shadow);
+  if (property == "box-shadow") return formatBoxShadows(style.box_shadow);
   if (property == "background-image") {
     if (style.background_layers.empty()) return "none";
     std::string out;