@triniwiz/nativescript-masonkit 1.0.0-beta.117 → 1.0.0-beta.118

package/style.js

@@ -1,5 +1,6 @@
 import { layout as coreLayout } from '@nativescript/core/utils';
 import { cssUnits } from './units';
+import { style_ } from './symbols';
 import { pickFontFamily } from './fonts';
 import { masonEngine } from './windows-panel-helpers';
 import { reportCssDiagnostic } from './diagnostics';
@@ -7,6 +8,7 @@ import { expandColorStops, resolveStopPositions } from './gradient-stops';
 import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
 import { encodeCssFilter, parseCssFilter } from './css-filter';
 import { resolveCssColors } from './css-colors';
+import { evaluateCssMath, hasCssMathFunction, isCssMathFunction, substituteCssMath } from './css-math';
 import { encodeWindowsBackground, encodeWindowsBorderImage, encodeWindowsMask, WINDOWS_MASK_PROPERTIES } from './windows-mask';
 import { Color, Length as CoreLength, PercentLength as CorePercentLength, Screen, knownFolders } from '@nativescript/core';
 // The Windows shell lays out in XAML DIPs, so its style buffer holds DIPs. Core's Windows density
@@ -14,6 +16,7 @@ import { Color, Length as CoreLength, PercentLength as CorePercentLength, Screen
 const layout = __WINDOWS__ ? { ...coreLayout, getDisplayDensity: () => 1, toDevicePixels: (value) => value, toDeviceIndependentPixels: (value) => value } : coreLayout;
 var StyleKeys;
 (function (StyleKeys) {
+    // <style-keys:offsets> generated from tools/scripts/style-keys/style-keys.schema, run `npm run gen:style-keys`
     StyleKeys[StyleKeys["DISPLAY"] = 0] = "DISPLAY";
     StyleKeys[StyleKeys["POSITION"] = 1] = "POSITION";
     StyleKeys[StyleKeys["DIRECTION"] = 2] = "DIRECTION";
@@ -27,7 +30,7 @@ var StyleKeys;
     StyleKeys[StyleKeys["JUSTIFY_ITEMS"] = 10] = "JUSTIFY_ITEMS";
     StyleKeys[StyleKeys["JUSTIFY_SELF"] = 11] = "JUSTIFY_SELF";
     StyleKeys[StyleKeys["JUSTIFY_CONTENT"] = 12] = "JUSTIFY_CONTENT";
-    // Contiguous types, then contiguous values per group
+    // Each box side group: four types, then four values.
     StyleKeys[StyleKeys["INSET_LEFT_TYPE"] = 13] = "INSET_LEFT_TYPE";
     StyleKeys[StyleKeys["INSET_RIGHT_TYPE"] = 14] = "INSET_RIGHT_TYPE";
     StyleKeys[StyleKeys["INSET_TOP_TYPE"] = 15] = "INSET_TOP_TYPE";
@@ -102,16 +105,15 @@ var StyleKeys;
     StyleKeys[StyleKeys["MIN_CONTENT_HEIGHT"] = 186] = "MIN_CONTENT_HEIGHT";
     StyleKeys[StyleKeys["MAX_CONTENT_WIDTH"] = 190] = "MAX_CONTENT_WIDTH";
     StyleKeys[StyleKeys["MAX_CONTENT_HEIGHT"] = 194] = "MAX_CONTENT_HEIGHT";
-    // Border Style (per side)
     StyleKeys[StyleKeys["BORDER_LEFT_STYLE"] = 198] = "BORDER_LEFT_STYLE";
     StyleKeys[StyleKeys["BORDER_RIGHT_STYLE"] = 199] = "BORDER_RIGHT_STYLE";
     StyleKeys[StyleKeys["BORDER_TOP_STYLE"] = 200] = "BORDER_TOP_STYLE";
     StyleKeys[StyleKeys["BORDER_BOTTOM_STYLE"] = 201] = "BORDER_BOTTOM_STYLE";
-    // Border Color (per side)
     StyleKeys[StyleKeys["BORDER_LEFT_COLOR"] = 202] = "BORDER_LEFT_COLOR";
     StyleKeys[StyleKeys["BORDER_RIGHT_COLOR"] = 206] = "BORDER_RIGHT_COLOR";
     StyleKeys[StyleKeys["BORDER_TOP_COLOR"] = 210] = "BORDER_TOP_COLOR";
     StyleKeys[StyleKeys["BORDER_BOTTOM_COLOR"] = 214] = "BORDER_BOTTOM_COLOR";
+    // Elliptical radii: eight types, eight values, then four squircle exponents.
     StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_X_TYPE"] = 218] = "BORDER_RADIUS_TOP_LEFT_X_TYPE";
     StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_Y_TYPE"] = 219] = "BORDER_RADIUS_TOP_LEFT_Y_TYPE";
     StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_X_TYPE"] = 220] = "BORDER_RADIUS_TOP_RIGHT_X_TYPE";
@@ -132,7 +134,6 @@ var StyleKeys;
     StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_EXPONENT"] = 262] = "BORDER_RADIUS_TOP_RIGHT_EXPONENT";
     StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT"] = 266] = "BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT";
     StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_EXPONENT"] = 270] = "BORDER_RADIUS_BOTTOM_LEFT_EXPONENT";
-    // Float
     StyleKeys[StyleKeys["FLOAT"] = 274] = "FLOAT";
     StyleKeys[StyleKeys["CLEAR"] = 275] = "CLEAR";
     StyleKeys[StyleKeys["OBJECT_FIT"] = 276] = "OBJECT_FIT";
@@ -153,6 +154,7 @@ var StyleKeys;
     StyleKeys[StyleKeys["LIST_STYLE_POSITION_STATE"] = 318] = "LIST_STYLE_POSITION_STATE";
     StyleKeys[StyleKeys["LIST_STYLE_TYPE_STATE"] = 319] = "LIST_STYLE_TYPE_STATE";
     StyleKeys[StyleKeys["REF_COUNT"] = 320] = "REF_COUNT";
+    // Inherited text fields. A *_STATE byte is nonzero once the node sets the field.
     StyleKeys[StyleKeys["FONT_COLOR"] = 324] = "FONT_COLOR";
     StyleKeys[StyleKeys["FONT_COLOR_STATE"] = 328] = "FONT_COLOR_STATE";
     StyleKeys[StyleKeys["FONT_SIZE"] = 329] = "FONT_SIZE";
@@ -197,14 +199,22 @@ var StyleKeys;
     StyleKeys[StyleKeys["TEXT_SHADOW_STATE"] = 395] = "TEXT_SHADOW_STATE";
     StyleKeys[StyleKeys["TEXT_OVERFLOW"] = 396] = "TEXT_OVERFLOW";
     StyleKeys[StyleKeys["TEXT_OVERFLOW_STATE"] = 397] = "TEXT_OVERFLOW_STATE";
-    // Pseudo set mask: 128-bit bitmask (two longs) tracking which properties
-    // were explicitly set on a pseudo style buffer. Uses the same bit layout
-    // as StateKeys. Zero-copy: lives in the style buffer itself.
+    // Which StateKeys a pseudo-class buffer sets explicitly (same bit layout).
     StyleKeys[StyleKeys["PSEUDO_SET_MASK_LOW"] = 398] = "PSEUDO_SET_MASK_LOW";
     StyleKeys[StyleKeys["PSEUDO_SET_MASK_HIGH"] = 406] = "PSEUDO_SET_MASK_HIGH";
-    // font-variant-numeric bitmask (byte) + state
+    // 414-418 free.
     StyleKeys[StyleKeys["FONT_VARIANT_NUMERIC"] = 419] = "FONT_VARIANT_NUMERIC";
     StyleKeys[StyleKeys["FONT_VARIANT_NUMERIC_STATE"] = 420] = "FONT_VARIANT_NUMERIC_STATE";
+    // Up to six inline transform ops, or a full matrix.
+    StyleKeys[StyleKeys["TRANSFORM_COUNT"] = 422] = "TRANSFORM_COUNT";
+    StyleKeys[StyleKeys["TRANSFORM_FLAGS"] = 423] = "TRANSFORM_FLAGS";
+    StyleKeys[StyleKeys["TRANSFORM_OP_0"] = 424] = "TRANSFORM_OP_0";
+    StyleKeys[StyleKeys["TRANSFORM_OP_1"] = 436] = "TRANSFORM_OP_1";
+    StyleKeys[StyleKeys["TRANSFORM_OP_2"] = 448] = "TRANSFORM_OP_2";
+    StyleKeys[StyleKeys["TRANSFORM_OP_3"] = 460] = "TRANSFORM_OP_3";
+    StyleKeys[StyleKeys["TRANSFORM_OP_4"] = 472] = "TRANSFORM_OP_4";
+    StyleKeys[StyleKeys["TRANSFORM_OP_5"] = 484] = "TRANSFORM_OP_5";
+    StyleKeys[StyleKeys["TRANSFORM_MATRIX"] = 496] = "TRANSFORM_MATRIX";
     StyleKeys[StyleKeys["OBJECT_POSITION_X_TYPE"] = 560] = "OBJECT_POSITION_X_TYPE";
     StyleKeys[StyleKeys["OBJECT_POSITION_Y_TYPE"] = 561] = "OBJECT_POSITION_Y_TYPE";
     StyleKeys[StyleKeys["OBJECT_POSITION_X_VALUE"] = 562] = "OBJECT_POSITION_X_VALUE";
@@ -223,6 +233,14 @@ var StyleKeys;
     StyleKeys[StyleKeys["WORD_SPACING_STATE"] = 587] = "WORD_SPACING_STATE";
     StyleKeys[StyleKeys["FONT_STRETCH"] = 588] = "FONT_STRETCH";
     StyleKeys[StyleKeys["FONT_STRETCH_STATE"] = 592] = "FONT_STRETCH_STATE";
+    StyleKeys[StyleKeys["LINE_CLAMP"] = 593] = "LINE_CLAMP";
+    StyleKeys[StyleKeys["LINE_CLAMP_STATE"] = 597] = "LINE_CLAMP_STATE";
+    StyleKeys[StyleKeys["TRANSFORM_ORIGIN_X_TYPE"] = 598] = "TRANSFORM_ORIGIN_X_TYPE";
+    StyleKeys[StyleKeys["TRANSFORM_ORIGIN_Y_TYPE"] = 599] = "TRANSFORM_ORIGIN_Y_TYPE";
+    StyleKeys[StyleKeys["TRANSFORM_ORIGIN_X_VALUE"] = 600] = "TRANSFORM_ORIGIN_X_VALUE";
+    StyleKeys[StyleKeys["TRANSFORM_ORIGIN_Y_VALUE"] = 604] = "TRANSFORM_ORIGIN_Y_VALUE";
+    StyleKeys[StyleKeys["TRANSFORM_ORIGIN_STATE"] = 608] = "TRANSFORM_ORIGIN_STATE";
+    // </style-keys:offsets>
 })(StyleKeys || (StyleKeys = {}));
 // Windows: the native Style.UpdateGrid takes all grid strings at once. To set one while preserving
 // the others, read the current values back from the Grid*Css getters. (Layout grid props like
@@ -315,18 +333,93 @@ function finite(n) {
 }
 /** 1pt = 1/72in and 1 CSS px = 1/96in, so a point is 96/72 CSS px. */
 const PX_PER_PT = 96 / 72;
+/** `n<unit>` in CSS px inside a math function, or undefined for an unknown unit. */
+function unitToCssPx(n, unit, emBasis) {
+    switch (unit) {
+        case 'px':
+        case 'dip':
+            return n;
+        case 'dppx':
+            return layout.toDeviceIndependentPixels(n);
+        case 'rem':
+            return n * cssUnits.rootFontSize;
+        case 'em':
+            return n * (emBasis && emBasis > 0 ? emBasis : cssUnits.rootFontSize);
+        case 'pt':
+            return n * PX_PER_PT;
+        case 'vw':
+        case 'vh':
+        case 'vmin':
+        case 'vmax': {
+            const { viewportWidth: w, viewportHeight: h } = cssUnits;
+            if (w <= 0 || h <= 0) {
+                reportCssDiagnostic({ kind: 'unsupported-unit', name: 'length', value: `${n}${unit}`, detail: 'viewport size not known yet, resolved to 0' });
+                return 0;
+            }
+            const basis = unit === 'vw' ? w : unit === 'vh' ? h : unit === 'vmin' ? Math.min(w, h) : Math.max(w, h);
+            return (n / 100) * basis;
+        }
+        default:
+            return undefined;
+    }
+}
+/**
+ * A math function `font-size`: `em` is parent-relative like `%`, so `calc(1.5em)` is `150%`.
+ * Mixed with absolute lengths, `em` and `%` resolve against the root font size instead.
+ */
+function fontSizeMath(value) {
+    const parentRelative = evaluateCssMath(value, (n, unit) => (unit === 'em' ? { percent: n * 100 } : unitToCssPx(n, unit)));
+    return parentRelative ?? evaluateCssMath(value, (n, unit) => (unit === '%' ? (n / 100) * cssUnits.rootFontSize : unitToCssPx(n, unit)));
+}
+/** A calc()/min()/max()/clamp() length, with `em` against `emBasis`. */
+function evaluateLengthMath(value, emBasis) {
+    return evaluateCssMath(value, (n, unit) => unitToCssPx(n, unit, emBasis));
+}
+/** `value` with every resolvable math function replaced by its result, for the native parsers. */
+export function resolveCssMathIn(value, emBasis) {
+    return substituteCssMath(value, (n, unit) => unitToCssPx(n, unit, emBasis));
+}
+/**
+ * A math function in a `<length-percentage>` as the buffer's type/value pair,
+ * or undefined when `t` isn't one or doesn't resolve.
+ */
+function mathLengthPercentage(t, emBasis, lengthType, percentType) {
+    if (!isCssMathFunction(t)) {
+        return undefined;
+    }
+    const math = evaluateLengthMath(t, emBasis);
+    switch (math?.kind) {
+        case 'length':
+            return { type: lengthType, value: layout.toDevicePixels(finite(math.px)) };
+        case 'number':
+            return { type: lengthType, value: layout.toDevicePixels(finite(math.value)) };
+        case 'percent':
+            // percentages are stored as a [0.0, 1.0] fraction, not percentage points
+            return { type: percentType, value: finite(math.percent) / 100 };
+        default:
+            return undefined;
+    }
+}
 /**
  * Resolve a CSS length token to the device pixels the geometry buffers store.
  *
- * `emBasis` is the font size `em` is relative to, in CSS px — the element's own
+ * `emBasis` is the font size `em` is relative to, in CSS px: the element's own
  * for a length, the parent's for `font-size` itself. It falls back to the root
  * font size when the element has no font size of its own yet.
  *
  * Suffix order matters: `rem` also ends with `em`, and `dppx` with `px`.
  */
 function tokenToDevicePx(token, raw, emBasis) {
-    const n = finite(raw);
     const t = token.trim().toLowerCase();
+    if (isCssMathFunction(t)) {
+        const math = evaluateLengthMath(t, emBasis);
+        if (math?.kind === 'length')
+            return layout.toDevicePixels(finite(math.px));
+        // A bare number is a CSS px to Mason, as outside calc().
+        if (math?.kind === 'number')
+            return layout.toDevicePixels(finite(math.value));
+    }
+    const n = finite(raw);
     if (t.endsWith(DEVICE_PIXEL_UNIT))
         return n;
     if (t.endsWith('rem'))
@@ -348,13 +441,12 @@ function tokenToDevicePx(token, raw, emBasis) {
             return layout.toDevicePixels((n / 100) * cssUnits.viewportWidth);
         return layout.toDevicePixels((n / 100) * cssUnits.viewportHeight);
     }
-    // A function value — calc(), clamp(), min(), max(), var() — leaves parseFloat
-    // with nothing, so the declaration collapses to 0. Core evaluates calc() and
-    // var() for stylesheet declarations before mason sees them, but an inline
-    // style or a direct JSX assignment comes straight here.
+    // A function value Mason can't evaluate (var(), or math mixing % with a length)
+    // collapses to 0.
     const fn = /^([a-z-]+)\(/.exec(t);
     if (fn) {
-        reportCssDiagnostic({ kind: 'not-implemented', name: 'length', value: t, detail: `${fn[1]}() is not evaluated here; it resolves only in a stylesheet, where core expands it first` });
+        const detail = isCssMathFunction(t) ? `${fn[1]}() mixes % with a length, or doesn't parse, so it can't be evaluated before layout` : `${fn[1]}() is not evaluated here; it resolves only in a stylesheet, where core expands it first`;
+        reportCssDiagnostic({ kind: 'not-implemented', name: 'length', value: t, detail });
         return 0;
     }
     // A trailing alphabetic run that isn't a unit we know is a silent
@@ -426,6 +518,15 @@ export function cssLengthToDip(value, emBasis) {
     if (t === '' || t === 'auto' || t.endsWith('%')) {
         return undefined;
     }
+    if (isCssMathFunction(t)) {
+        const math = evaluateLengthMath(t, emBasis);
+        if (math?.kind === 'length')
+            return math.px;
+        if (math?.kind === 'number')
+            return math.value;
+        // A percentage, or % mixed with a length, keeps its own path.
+        return undefined;
+    }
     // Sizing keywords and function values have their own handling.
     if (!/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?[a-z]*$/.test(t)) {
         return undefined;
@@ -453,6 +554,10 @@ function dimensionFromString(value, emBasis) {
         case 'content':
             return { type: 9, value: 0 };
     }
+    const math = mathLengthPercentage(t, emBasis, 1, 2);
+    if (math) {
+        return math;
+    }
     if (t.startsWith('fit-content(') && t.endsWith(')')) {
         const limit = t.slice('fit-content('.length, -1).trim();
         if (limit.endsWith('%')) {
@@ -475,6 +580,10 @@ function lengthPercentageAutoFromString(value, emBasis) {
     if (t === '' || t === 'auto') {
         return { type: 0, value: 0 };
     }
+    const math = mathLengthPercentage(t, emBasis, 1, 2);
+    if (math) {
+        return math;
+    }
     if (t.endsWith('%')) {
         return { type: 2, value: finite(parseFloat(t) || 0) / 100 };
     }
@@ -484,6 +593,10 @@ function lengthPercentageAutoFromString(value, emBasis) {
 // Same as lengthPercentageAutoFromString but for padding (no "auto", type 0/1 swapped)
 function lengthPercentageFromString(value, emBasis) {
     const t = value.trim();
+    const math = mathLengthPercentage(t, emBasis, 0, 1);
+    if (math) {
+        return math;
+    }
     if (t.endsWith('%')) {
         return { type: 1, value: finite(parseFloat(t) || 0) / 100 };
     }
@@ -535,6 +648,7 @@ class StateKeys {
     }
 }
 StateKeys.NONE = new StateKeys(0, 0, 0, 0);
+// <style-keys:state> generated from tools/scripts/style-keys/style-keys.schema, run `npm run gen:style-keys`
 StateKeys.DISPLAY = StateKeys.flag(0);
 StateKeys.POSITION = StateKeys.flag(1);
 StateKeys.DIRECTION = StateKeys.flag(2);
@@ -584,7 +698,7 @@ StateKeys.OBJECT_FIT = StateKeys.flag(45);
 StateKeys.Z_INDEX = StateKeys.flag(46);
 StateKeys.LIST_STYLE_POSITION = StateKeys.flag(47);
 StateKeys.LIST_STYLE_TYPE = StateKeys.flag(48);
-StateKeys.INVALIDATE_TEXT = StateKeys.flag(49);
+StateKeys.INVALIDATE_TEXT = StateKeys.flag(49); // Kotlin's INVALIDATE_TEXT is every bit
 StateKeys.FONT_COLOR = StateKeys.flag(50);
 StateKeys.DECORATION_LINE = StateKeys.flag(51);
 StateKeys.DECORATION_COLOR = StateKeys.flag(52);
@@ -614,9 +728,13 @@ StateKeys.HYPHENS = StateKeys.flag(75);
 StateKeys.CARET_COLOR = StateKeys.flag(76);
 StateKeys.WORD_SPACING = StateKeys.flag(77);
 StateKeys.FONT_STRETCH = StateKeys.flag(78);
+StateKeys.TEXT_INDENT = StateKeys.flag(79);
+StateKeys.LINE_CLAMP = StateKeys.flag(80);
+StateKeys.TRANSFORM_ORIGIN = StateKeys.flag(81);
+// </style-keys:state>
 StateKeys.DISPLAY_AND_MODE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE);
 StateKeys.FLOW_TYPE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE).or(StateKeys.POSITION).or(StateKeys.FLOAT);
-StateKeys.WINDOWS_TEXT = [49, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 73, 74, 75, 77, 78].reduce((mask, n) => mask.or(StateKeys.flag(n)), StateKeys.NONE);
+StateKeys.WINDOWS_TEXT = [StateKeys.INVALIDATE_TEXT, StateKeys.FONT_COLOR, StateKeys.DECORATION_LINE, StateKeys.DECORATION_COLOR, StateKeys.TEXT_ALIGN, StateKeys.TEXT_JUSTIFY, StateKeys.FONT_SIZE, StateKeys.TEXT_TRANSFORM, StateKeys.FONT_STYLE, StateKeys.FONT_STYLE_SLANT, StateKeys.TEXT_WRAP, StateKeys.TEXT_OVERFLOW, StateKeys.DECORATION_STYLE, StateKeys.WHITE_SPACE, StateKeys.FONT_WEIGHT, StateKeys.LINE_HEIGHT, StateKeys.VERTICAL_ALIGN, StateKeys.DECORATION_THICKNESS, StateKeys.TEXT_SHADOWS, StateKeys.FONT_FAMILY, StateKeys.LETTER_SPACING, StateKeys.FONT_VARIANT_NUMERIC, StateKeys.WRITING_MODE, StateKeys.UNICODE_BIDI, StateKeys.HYPHENS, StateKeys.WORD_SPACING, StateKeys.FONT_STRETCH, StateKeys.TEXT_INDENT, StateKeys.LINE_CLAMP].reduce((mask, key) => mask.or(key), StateKeys.NONE);
 function wordsToBigInt(w0, w1, w2, w3) {
     return BigInt(w0 >>> 0) | (BigInt(w1 >>> 0) << 32n) | (BigInt(w2 >>> 0) << 64n) | (BigInt(w3 >>> 0) << 96n);
 }
@@ -1186,6 +1304,30 @@ function parseObjectPosition(value) {
         return null;
     return { xType: x.type, xVal: x.val, yType: y.type, yVal: y.val };
 }
+const ORIGIN_X_KEYWORDS = { left: 0, center: 50, right: 100 };
+const ORIGIN_Y_KEYWORDS = { top: 0, center: 50, bottom: 100 };
+/** `transform-origin` as two (type, value) pairs: type 0 is device px, 1 is percent. A z offset is ignored. */
+export function parseTransformOrigin(value, emBasis) {
+    const parts = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (parts.length === 0 || parts.length > 3)
+        return null;
+    const length = (token) => {
+        const n = parseFloat(token);
+        if (!Number.isFinite(n))
+            return null;
+        return token.endsWith('%') ? { type: 1, value: n } : { type: 0, value: tokenToDevicePx(token, n, emBasis) };
+    };
+    let [first, second = 'center'] = parts;
+    // Keywords may come in either order (`top left`); lengths are always x then y.
+    if (ORIGIN_Y_KEYWORDS[first] !== undefined && first !== 'center' && (ORIGIN_X_KEYWORDS[second] !== undefined || parts.length === 1)) {
+        [first, second] = [second, first];
+    }
+    const x = ORIGIN_X_KEYWORDS[first] !== undefined ? { type: 1, value: ORIGIN_X_KEYWORDS[first] } : length(first);
+    const y = ORIGIN_Y_KEYWORDS[second] !== undefined ? { type: 1, value: ORIGIN_Y_KEYWORDS[second] } : length(second);
+    if (!x || !y)
+        return null;
+    return { xType: x.type, x: x.value, yType: y.type, y: y.value };
+}
 const FONT_STRETCH_KEYWORDS = {
     'ultra-condensed': 5000,
     'extra-condensed': 6250,
@@ -1490,7 +1632,9 @@ export class Style {
     // whose parsers don't read modern colour syntax; see css-colors.ts.
     coerceCssStringValue(value) {
         if (typeof value === 'string') {
-            return resolveCssColors(value, cssColorToRgba);
+            // Nor do they evaluate calc()/min()/max()/clamp(); see css-math.ts.
+            const resolved = hasCssMathFunction(value) ? resolveCssMathIn(value, this.emBasis()) : value;
+            return resolveCssColors(resolved, cssColorToRgba);
         }
         if (value == null) {
             return '';
@@ -1820,6 +1964,34 @@ export class Style {
         this.writeBorderSide(side, null, null, color);
         this.commitState(StateKeys.BORDER_COLOR);
     }
+    // Per-side colors by name, as pseudo-class styles and the border shorthands assign them.
+    borderSideColor(key) {
+        return new Color(getUint32(this.style_view, key)).hex;
+    }
+    get borderTopColor() {
+        return this.borderSideColor(StyleKeys.BORDER_TOP_COLOR);
+    }
+    set borderTopColor(value) {
+        this.setBorderSideColor('top', value);
+    }
+    get borderRightColor() {
+        return this.borderSideColor(StyleKeys.BORDER_RIGHT_COLOR);
+    }
+    set borderRightColor(value) {
+        this.setBorderSideColor('right', value);
+    }
+    get borderBottomColor() {
+        return this.borderSideColor(StyleKeys.BORDER_BOTTOM_COLOR);
+    }
+    set borderBottomColor(value) {
+        this.setBorderSideColor('bottom', value);
+    }
+    get borderLeftColor() {
+        return this.borderSideColor(StyleKeys.BORDER_LEFT_COLOR);
+    }
+    set borderLeftColor(value) {
+        this.setBorderSideColor('left', value);
+    }
     resetState() {
         this._hasDirty = false;
         this._d0 = this._d1 = this._d2 = this._d3 = 0;
@@ -1875,7 +2047,7 @@ export class Style {
         const target = new Uint8Array(NSWinRT.interop.arrayBufferFromBuffer(masonEngine().StyleValues(text)));
         target.set(this.u8View.subarray(StyleKeys.FONT_COLOR, StyleKeys.BACKGROUND_COLOR), StyleKeys.FONT_COLOR);
         target.set(this.u8View.subarray(StyleKeys.DECORATION_LINE, StyleKeys.PSEUDO_SET_MASK_LOW), StyleKeys.DECORATION_LINE);
-        target.set(this.u8View.subarray(StyleKeys.HYPHENS, StyleKeys.FONT_STRETCH_STATE + 1), StyleKeys.HYPHENS);
+        target.set(this.u8View.subarray(StyleKeys.HYPHENS, StyleKeys.LINE_CLAMP_STATE + 1), StyleKeys.HYPHENS);
         if (block) {
             target[StyleKeys.DISPLAY] = 3;
             target[StyleKeys.DISPLAY_MODE] = 0 /* DisplayMode.None */;
@@ -1918,19 +2090,35 @@ export class Style {
         return this.view_;
     }
     /**
-     * The font size `em` resolves against, in CSS px: the element's own when it has
-     * one, otherwise the root font size. FONT_SIZE is stored in dip, which is the
-     * same as a CSS px, so no conversion is needed.
+     * The font size `em` resolves against, in CSS px: the element's computed one,
+     * with a percentage of the parent's, or the inherited one when unset.
      */
     emBasis() {
-        if (!this.style_view) {
-            return cssUnits.rootFontSize;
-        }
-        if (getInt8(this.style_view, StyleKeys.FONT_SIZE_STATE) !== 1) {
-            return cssUnits.rootFontSize;
+        if (!this.style_view || getInt8(this.style_view, StyleKeys.FONT_SIZE_STATE) !== 1) {
+            return this.parentEmBasis();
         }
         const own = getInt32(this.style_view, StyleKeys.FONT_SIZE);
-        return own > 0 ? own : cssUnits.rootFontSize;
+        if (own <= 0) {
+            return this.parentEmBasis();
+        }
+        // `0.75em` is stored as 75 (%), not 75px.
+        return getInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE) === 1 ? (own / 100) * this.parentEmBasis() : own;
+    }
+    /**
+     * The nearest Mason ancestor's font size (the element's own for a pseudo-class
+     * style). Reads only existing styles, since building one creates the native view.
+     */
+    parentEmBasis() {
+        const view = this.view_;
+        let ancestor = (this._pseudo ? view : view?.parent);
+        for (let depth = 0; ancestor && depth < 256; depth++) {
+            const style = ancestor[style_];
+            if (style instanceof Style && style !== this) {
+                return style.emBasis();
+            }
+            ancestor = ancestor.parent;
+        }
+        return cssUnits.rootFontSize;
     }
     prepareMut() {
         if (this._pseudo) {
@@ -2061,7 +2249,12 @@ export class Style {
                 this.prepareMut();
                 let resolved = n;
                 let isPercent = false;
-                if (t.endsWith('%')) {
+                const math = isCssMathFunction(t) ? fontSizeMath(t) : undefined;
+                if (math) {
+                    isPercent = math.kind === 'percent';
+                    resolved = finite(math.kind === 'length' ? math.px : math.kind === 'percent' ? math.percent : math.value);
+                }
+                else if (t.endsWith('%')) {
                     isPercent = true;
                 }
                 else if (t.endsWith('rem')) {
@@ -5927,6 +6120,109 @@ export class Style {
         setUint8(this.style_view, StyleKeys.HYPHENS_STATE, 1);
         this.commitState(StateKeys.HYPHENS);
     }
+    get textIndent() {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.TEXT_INDENT_STATE))
+            return '0px';
+        const value = getFloat32(this.style_view, StyleKeys.TEXT_INDENT);
+        return getUint8(this.style_view, StyleKeys.TEXT_INDENT_TYPE) === 1 ? `${value}%` : `${layout.toDeviceIndependentPixels(value)}px`;
+    }
+    set textIndent(value) {
+        if (!this.style_view)
+            return;
+        let type = 0;
+        let indent;
+        if (typeof value === 'number') {
+            indent = layout.toDevicePixels(value);
+        }
+        else {
+            // `each-line` and `hanging` are not supported; the length still applies.
+            const token = String(value ?? '')
+                .trim()
+                .split(/\s+/)
+                .find((t) => t !== 'each-line' && t !== 'hanging');
+            if (!token)
+                return;
+            const n = parseFloat(token);
+            if (!Number.isFinite(n))
+                return;
+            if (token.endsWith('%')) {
+                type = 1;
+                indent = n;
+            }
+            else {
+                indent = tokenToDevicePx(token, n, this.emBasis());
+            }
+        }
+        this.prepareMut();
+        setFloat32(this.style_view, StyleKeys.TEXT_INDENT, indent);
+        setUint8(this.style_view, StyleKeys.TEXT_INDENT_TYPE, type);
+        setUint8(this.style_view, StyleKeys.TEXT_INDENT_STATE, 1);
+        this.commitState(StateKeys.TEXT_INDENT);
+    }
+    set 'text-indent'(value) {
+        this.textIndent = value;
+    }
+    get 'text-indent'() {
+        return this.textIndent;
+    }
+    get lineClamp() {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.LINE_CLAMP_STATE))
+            return 'none';
+        const lines = getInt32(this.style_view, StyleKeys.LINE_CLAMP);
+        return lines > 0 ? lines : 'none';
+    }
+    set lineClamp(value) {
+        if (!this.style_view)
+            return;
+        const lines = value === 'none' ? 0 : Math.trunc(Number(value));
+        if (!Number.isFinite(lines) || lines < 0)
+            return;
+        this.prepareMut();
+        setInt32(this.style_view, StyleKeys.LINE_CLAMP, lines);
+        setUint8(this.style_view, StyleKeys.LINE_CLAMP_STATE, 1);
+        this.commitState(StateKeys.LINE_CLAMP);
+    }
+    set 'line-clamp'(value) {
+        this.lineClamp = value;
+    }
+    get 'line-clamp'() {
+        return this.lineClamp;
+    }
+    set '-webkit-line-clamp'(value) {
+        this.lineClamp = value;
+    }
+    get '-webkit-line-clamp'() {
+        return this.lineClamp;
+    }
+    get transformOrigin() {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.TRANSFORM_ORIGIN_STATE))
+            return '50% 50%';
+        const side = (typeKey, valueKey) => {
+            const value = getFloat32(this.style_view, valueKey);
+            return getUint8(this.style_view, typeKey) === 1 ? `${value}%` : `${layout.toDeviceIndependentPixels(value)}px`;
+        };
+        return `${side(StyleKeys.TRANSFORM_ORIGIN_X_TYPE, StyleKeys.TRANSFORM_ORIGIN_X_VALUE)} ${side(StyleKeys.TRANSFORM_ORIGIN_Y_TYPE, StyleKeys.TRANSFORM_ORIGIN_Y_VALUE)}`;
+    }
+    set transformOrigin(value) {
+        if (!this.style_view)
+            return;
+        const parsed = parseTransformOrigin(String(value ?? ''), this.emBasis());
+        if (!parsed)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.TRANSFORM_ORIGIN_X_TYPE, parsed.xType);
+        setUint8(this.style_view, StyleKeys.TRANSFORM_ORIGIN_Y_TYPE, parsed.yType);
+        setFloat32(this.style_view, StyleKeys.TRANSFORM_ORIGIN_X_VALUE, parsed.x);
+        setFloat32(this.style_view, StyleKeys.TRANSFORM_ORIGIN_Y_VALUE, parsed.y);
+        setUint8(this.style_view, StyleKeys.TRANSFORM_ORIGIN_STATE, 1);
+        this.commitState(StateKeys.TRANSFORM_ORIGIN);
+    }
+    set 'transform-origin'(value) {
+        this.transformOrigin = value;
+    }
+    get 'transform-origin'() {
+        return this.transformOrigin;
+    }
     get backdropFilter() {
         if (!this.nativeView)
             return '';
@@ -6463,6 +6759,9 @@ export class Style {
             caretColor: this.caretColor,
             wordSpacing: this.wordSpacing,
             fontStretch: this.fontStretch,
+            textIndent: this.textIndent,
+            lineClamp: this.lineClamp,
+            transformOrigin: this.transformOrigin,
         };
     }
 }