@triniwiz/nativescript-masonkit 1.0.0-beta.89 → 1.0.0-beta.90

package/style.js

@@ -1,4 +1,6 @@
 import { layout } from '@nativescript/core/utils';
+import { cssUnits } from './units';
+import { reportCssDiagnostic } from './diagnostics';
 import { Color, Length as CoreLength, PercentLength as CorePercentLength } from '@nativescript/core';
 var StyleKeys;
 (function (StyleKeys) {
@@ -256,12 +258,14 @@ function windowsSetGrid(nativeView, field, value) {
     }
     catch (_) { }
 }
+// The buffer holds device pixels; `px` on the way out means a CSS pixel, the
+// same as on the way in, so a get/set round-trip is lossless.
 function parseDimension(type, value) {
     switch (type) {
         case 0:
             return 'auto';
         case 1:
-            return { value, unit: 'px' };
+            return { value: layout.toDeviceIndependentPixels(value), unit: 'px' };
         case 2:
             return { value, unit: '%' };
         case 3:
@@ -271,7 +275,7 @@ function parseDimension(type, value) {
         case 5:
             return 'fit-content';
         case 6:
-            return `fit-content(${value}px)`;
+            return `fit-content(${layout.toDeviceIndependentPixels(value)}px)`;
         case 7:
             return `fit-content(${value}%)`;
         case 8:
@@ -283,7 +287,78 @@ function parseDimension(type, value) {
 function parseLengthPercentageAuto(type, value) {
     return parseDimension(type, value);
 }
-function dimensionFromString(value) {
+// CSS `px` is a CSS pixel, which is the same size as a dip — so it scales with
+// the device, exactly as on the web. This deliberately differs from
+// @nativescript/core, where `px` means a literal device pixel; `dppx` is the
+// escape hatch for that meaning.
+const DEVICE_PIXEL_UNIT = 'dppx';
+function isDevicePixelToken(token) {
+    return token.trim().toLowerCase().endsWith(DEVICE_PIXEL_UNIT);
+}
+// A declaration that parses to a non-finite number (`1e999px`, `calc(infinity *
+// 1px)` after core evaluates it) is not usable; treat it as 0, matching how the
+// existing parsers already handle an unparsable value.
+function finite(n) {
+    if (Number.isFinite(n)) {
+        return n;
+    }
+    reportCssDiagnostic({ kind: 'unparsable-value', name: 'length', value: String(n), detail: 'not a finite number, treated as 0' });
+    return 0;
+}
+/** 1pt = 1/72in and 1 CSS px = 1/96in, so a point is 96/72 CSS px. */
+const PX_PER_PT = 96 / 72;
+/**
+ * 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
+ * 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 (t.endsWith(DEVICE_PIXEL_UNIT))
+        return n;
+    if (t.endsWith('rem'))
+        return layout.toDevicePixels(n * cssUnits.rootFontSize);
+    if (t.endsWith('em'))
+        return layout.toDevicePixels(n * (emBasis && emBasis > 0 ? emBasis : cssUnits.rootFontSize));
+    if (t.endsWith('pt'))
+        return layout.toDevicePixels(n * PX_PER_PT);
+    if (t.endsWith('vmin') || t.endsWith('vmax') || t.endsWith('vw') || t.endsWith('vh')) {
+        if (cssUnits.viewportWidth <= 0 || cssUnits.viewportHeight <= 0) {
+            reportCssDiagnostic({ kind: 'unsupported-unit', name: 'length', value: t, detail: 'viewport size not known yet, resolved to 0' });
+            return 0;
+        }
+        if (t.endsWith('vmin'))
+            return layout.toDevicePixels((n / 100) * Math.min(cssUnits.viewportWidth, cssUnits.viewportHeight));
+        if (t.endsWith('vmax'))
+            return layout.toDevicePixels((n / 100) * Math.max(cssUnits.viewportWidth, cssUnits.viewportHeight));
+        if (t.endsWith('vw'))
+            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.
+    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` });
+        return 0;
+    }
+    // A trailing alphabetic run that isn't a unit we know is a silent
+    // mis-resolution waiting to happen — `1ch` would quietly become 1 CSS px.
+    const unit = /[a-z%]+$/.exec(t)?.[0];
+    if (unit && unit !== 'px' && unit !== 'dip') {
+        reportCssDiagnostic({ kind: 'unsupported-unit', name: 'length', value: t, detail: `unknown unit "${unit}", treated as CSS px` });
+    }
+    // px, dip and a bare number are all CSS pixels.
+    return layout.toDevicePixels(n);
+}
+function dimensionFromString(value, emBasis) {
     const t = value.trim();
     if (t === '' || t === 'auto') {
         return { type: 0, value: 0 };
@@ -304,43 +379,43 @@ function dimensionFromString(value) {
         const limit = t.slice('fit-content('.length, -1).trim();
         if (limit.endsWith('%')) {
             // taffy percentages are a [0.0, 1.0] fraction, not [0.0, 100.0]
-            return { type: 7, value: (parseFloat(limit) || 0) / 100 };
+            return { type: 7, value: finite(parseFloat(limit) || 0) / 100 };
         }
         const n = parseFloat(limit) || 0;
-        return { type: 6, value: limit.endsWith('px') ? n : layout.toDevicePixels(n) };
+        return { type: 6, value: tokenToDevicePx(limit, n, emBasis) };
     }
     if (t.endsWith('%')) {
         // percentages are stored as a [0.0, 1.0] fraction, not percentage points
-        return { type: 2, value: (parseFloat(t) || 0) / 100 };
+        return { type: 2, value: finite(parseFloat(t) || 0) / 100 };
     }
     const n = parseFloat(t) || 0;
-    return { type: 1, value: t.endsWith('px') ? n : layout.toDevicePixels(n) };
+    return { type: 1, value: tokenToDevicePx(t, n, emBasis) };
 }
 // Shared parser for LengthPercentageAuto props (min/max width/height, margin, inset)
-function lengthPercentageAutoFromString(value) {
+function lengthPercentageAutoFromString(value, emBasis) {
     const t = value.trim();
     if (t === '' || t === 'auto') {
         return { type: 0, value: 0 };
     }
     if (t.endsWith('%')) {
-        return { type: 2, value: (parseFloat(t) || 0) / 100 };
+        return { type: 2, value: finite(parseFloat(t) || 0) / 100 };
     }
     const n = parseFloat(t) || 0;
-    return { type: 1, value: t.endsWith('px') ? n : layout.toDevicePixels(n) };
+    return { type: 1, value: tokenToDevicePx(t, n, emBasis) };
 }
 // Same as lengthPercentageAutoFromString but for padding (no "auto", type 0/1 swapped)
-function lengthPercentageFromString(value) {
+function lengthPercentageFromString(value, emBasis) {
     const t = value.trim();
     if (t.endsWith('%')) {
-        return { type: 1, value: (parseFloat(t) || 0) / 100 };
+        return { type: 1, value: finite(parseFloat(t) || 0) / 100 };
     }
     const n = parseFloat(t) || 0;
-    return { type: 0, value: t.endsWith('px') ? n : layout.toDevicePixels(n) };
+    return { type: 0, value: tokenToDevicePx(t, n, emBasis) };
 }
 function parseLengthPercentage(type, value) {
     switch (type) {
         case 0:
-            return { value, unit: 'px' };
+            return { value: layout.toDeviceIndependentPixels(value), unit: 'px' };
         case 1:
             return { value, unit: '%' };
     }
@@ -624,6 +699,22 @@ function parseSideLength(tok) {
         return { value: n, unit: '%' };
     return n; // bare number = dip
 }
+// Split a `margin`/`padding`/`inset` shorthand into its four sides in CSS order.
+// The raw token strings are handed to the longhand setters rather than parsed
+// here, so there stays exactly one place that knows how to read a length.
+function expandSidesShorthand(value) {
+    const parts = value.trim().split(/\s+/).filter(Boolean);
+    if (parts.length < 2)
+        return null;
+    switch (parts.length) {
+        case 2:
+            return [parts[0], parts[1], parts[0], parts[1]];
+        case 3:
+            return [parts[0], parts[1], parts[2], parts[1]];
+        default:
+            return [parts[0], parts[1], parts[2], parts[3]];
+    }
+}
 // Expand a CSS padding/margin shorthand (number or 1-4 space-separated values) to per-side lengths.
 function parseSidesShorthand(value) {
     if (typeof value === 'number')
@@ -1205,6 +1296,21 @@ export class Style {
     get view() {
         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.
+     */
+    emBasis() {
+        if (!this.style_view) {
+            return cssUnits.rootFontSize;
+        }
+        if (getInt8(this.style_view, StyleKeys.FONT_SIZE_STATE) !== 1) {
+            return cssUnits.rootFontSize;
+        }
+        const own = getInt32(this.style_view, StyleKeys.FONT_SIZE);
+        return own > 0 ? own : cssUnits.rootFontSize;
+    }
     prepareMut() {
         // always mut
         if (this._pseudo) {
@@ -1274,6 +1380,39 @@ export class Style {
             this.commitState(StateKeys.BOX_SIZING);
         }
     }
+    get listStyleType() {
+        switch (getUint8(this.style_view, StyleKeys.LIST_STYLE_TYPE)) {
+            case 1:
+                return 'custom';
+            case 2:
+                return 'disc';
+            case 3:
+                return 'circle';
+            case 4:
+                return 'square';
+            case 5:
+                return 'decimal';
+            default:
+                return 'none';
+        }
+    }
+    // Resolved by `View.kt`'s/`MasonUIView.swift`'s `drawListItemMarkers`
+    // (walks a plain container's children for `TextType.Li`-flavored text and
+    // draws a bullet/number to the left of each) — not wired to Taffy layout
+    // at all, purely a draw-time lookup on whichever of the `<li>` or its
+    // parent set this explicitly (`LIST_STYLE_TYPE_STATE` marks "explicitly
+    // set" vs "inherit", matching every other per-tag CSS default in this file).
+    set listStyleType(value) {
+        const map = { none: 0, custom: 1, disc: 2, circle: 3, square: 4, decimal: 5 };
+        const mapped = map[value];
+        if (mapped === undefined) {
+            return;
+        }
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.LIST_STYLE_TYPE, mapped);
+        setInt8(this.style_view, StyleKeys.LIST_STYLE_TYPE_STATE, 1);
+        this.commitState(StateKeys.LIST_STYLE_TYPE);
+    }
     get fontSize() {
         if (!this.style_view) {
             // BLACK ?
@@ -1291,6 +1430,42 @@ export class Style {
             return;
         }
         switch (typeof value) {
+            case 'string': {
+                // FONT_SIZE is stored in dip (the natives apply the density themselves),
+                // so a CSS px value goes in as-is; `dppx` is the one spelling that has to
+                // be converted back out of device pixels.
+                //
+                // On font-size, `em` is relative to the *parent's* font size — which is
+                // exactly what the buffer's percent type already means, so `1.5em`
+                // becomes `150%` and inheritance resolves it natively. `rem` is absolute
+                // against the root font size.
+                const t = value.trim().toLowerCase();
+                const n = finite(parseFloat(t) || 0);
+                this.prepareMut();
+                let resolved = n;
+                let isPercent = false;
+                if (t.endsWith('%')) {
+                    isPercent = true;
+                }
+                else if (t.endsWith('rem')) {
+                    resolved = n * cssUnits.rootFontSize;
+                }
+                else if (t.endsWith('em')) {
+                    resolved = n * 100;
+                    isPercent = true;
+                }
+                else if (t.endsWith('pt')) {
+                    resolved = n * PX_PER_PT;
+                }
+                else if (isDevicePixelToken(t)) {
+                    resolved = layout.toDeviceIndependentPixels(n);
+                }
+                setInt32(this.style_view, StyleKeys.FONT_SIZE, resolved);
+                setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
+                setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, isPercent ? 1 : 0);
+                this.commitState(StateKeys.FONT_SIZE);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt32(this.style_view, StyleKeys.FONT_SIZE, value);
@@ -1302,14 +1477,14 @@ export class Style {
                 switch (value.unit) {
                     case 'dip':
                         this.prepareMut();
-                        setInt32(this.style_view, StyleKeys.FONT_SIZE, layout.toDeviceIndependentPixels(value.value));
+                        setInt32(this.style_view, StyleKeys.FONT_SIZE, finite(value.value));
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, 0);
                         this.commitState(StateKeys.FONT_SIZE);
                         break;
                     case 'px':
                         this.prepareMut();
-                        setInt32(this.style_view, StyleKeys.FONT_SIZE, value.value);
+                        setInt32(this.style_view, StyleKeys.FONT_SIZE, finite(value.value));
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, 0);
                         this.commitState(StateKeys.FONT_SIZE);
@@ -1688,7 +1863,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, dim.value);
                 break;
@@ -1708,7 +1883,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1729,7 +1904,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, dim.value);
                 break;
@@ -1749,7 +1924,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1770,7 +1945,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = dimensionFromString(value);
+                const dim = dimensionFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.WIDTH_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, dim.value);
                 break;
@@ -1790,7 +1965,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1811,7 +1986,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = dimensionFromString(value);
+                const dim = dimensionFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, dim.value);
                 break;
@@ -1831,7 +2006,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1852,7 +2027,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, dim.value);
                 break;
@@ -1872,7 +2047,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1893,7 +2068,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, dim.value);
                 break;
@@ -1913,7 +2088,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1932,6 +2107,13 @@ export class Style {
     }
     set borderLeftWidth(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value, this.emBasis());
+                setInt8(this.style_view, StyleKeys.BORDER_LEFT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
@@ -1947,7 +2129,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -1966,6 +2148,13 @@ export class Style {
     }
     set borderRightWidth(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value, this.emBasis());
+                setInt8(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
@@ -1981,7 +2170,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2000,6 +2189,13 @@ export class Style {
     }
     set borderTopWidth(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value, this.emBasis());
+                setInt8(this.style_view, StyleKeys.BORDER_TOP_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
@@ -2015,7 +2211,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2034,6 +2230,13 @@ export class Style {
     }
     set borderBottomWidth(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value, this.emBasis());
+                setInt8(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
@@ -2049,7 +2252,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2062,11 +2265,25 @@ export class Style {
         this.commitState(StateKeys.BORDER);
     }
     set inset(value) {
+        if (typeof value === 'string') {
+            const sides = expandSidesShorthand(value);
+            if (sides) {
+                const wasInBatch = this.inBatch;
+                this.inBatch = true;
+                this.top = sides[0];
+                this.right = sides[1];
+                this.bottom = sides[2];
+                this.left = sides[3];
+                this.inBatch = wasInBatch;
+                this.commitState(StateKeys.INSET);
+                return;
+            }
+        }
         var type;
         var insetValue;
         switch (typeof value) {
             case 'string': {
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 type = dim.type;
                 insetValue = dim.value;
                 break;
@@ -2083,7 +2300,7 @@ export class Style {
                         break;
                     case 'px':
                         type = 1;
-                        insetValue = value.value;
+                        insetValue = layout.toDevicePixels(value.value);
                         break;
                     case '%':
                         type = 2;
@@ -2110,7 +2327,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.INSET_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, dim.value);
                 break;
@@ -2130,7 +2347,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2151,7 +2368,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.INSET_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, dim.value);
                 break;
@@ -2171,7 +2388,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2192,7 +2409,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.INSET_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, dim.value);
                 break;
@@ -2212,7 +2429,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2233,7 +2450,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, dim.value);
                 break;
@@ -2253,7 +2470,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2266,11 +2483,25 @@ export class Style {
         this.commitState(StateKeys.INSET);
     }
     set margin(value) {
+        if (typeof value === 'string') {
+            const sides = expandSidesShorthand(value);
+            if (sides) {
+                const wasInBatch = this.inBatch;
+                this.inBatch = true;
+                this.marginTop = sides[0];
+                this.marginRight = sides[1];
+                this.marginBottom = sides[2];
+                this.marginLeft = sides[3];
+                this.inBatch = wasInBatch;
+                this.commitState(StateKeys.MARGIN);
+                return;
+            }
+        }
         var type;
         var marginValue;
         switch (typeof value) {
             case 'string': {
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 type = dim.type;
                 marginValue = dim.value;
                 break;
@@ -2287,7 +2518,7 @@ export class Style {
                         break;
                     case 'px':
                         type = 1;
-                        marginValue = value.value;
+                        marginValue = layout.toDevicePixels(value.value);
                         break;
                     case '%':
                         type = 2;
@@ -2314,7 +2545,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, dim.value);
                 break;
@@ -2334,7 +2565,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2355,7 +2586,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, dim.value);
                 break;
@@ -2375,7 +2606,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2396,7 +2627,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MARGIN_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, dim.value);
                 break;
@@ -2416,7 +2647,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2437,7 +2668,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value);
+                const dim = lengthPercentageAutoFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, dim.value);
                 break;
@@ -2457,7 +2688,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2470,9 +2701,24 @@ export class Style {
         this.commitState(StateKeys.MARGIN);
     }
     set padding(value) {
+        if (typeof value === 'string') {
+            const sides = expandSidesShorthand(value);
+            if (sides) {
+                const wasInBatch = this.inBatch;
+                this.inBatch = true;
+                this.paddingTop = sides[0];
+                this.paddingRight = sides[1];
+                this.paddingBottom = sides[2];
+                this.paddingLeft = sides[3];
+                this.inBatch = wasInBatch;
+                this.commitState(StateKeys.PADDING);
+                return;
+            }
+        }
+        const wasInBatch = this.inBatch;
         this.inBatch = true;
         this.paddingBottom = this.paddingLeft = this.paddingRight = this.paddingTop = value;
-        this.inBatch = false;
+        this.inBatch = wasInBatch;
         this.commitState(StateKeys.PADDING);
     }
     get paddingLeft() {
@@ -2484,7 +2730,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value);
+                const dim = lengthPercentageFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.PADDING_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, dim.value);
                 break;
@@ -2504,7 +2750,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.PADDING_LEFT_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2525,7 +2771,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value);
+                const dim = lengthPercentageFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, dim.value);
                 break;
@@ -2545,7 +2791,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2566,7 +2812,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value);
+                const dim = lengthPercentageFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.PADDING_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, dim.value);
                 break;
@@ -2586,7 +2832,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.PADDING_TOP_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2607,7 +2853,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value);
+                const dim = lengthPercentageFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, dim.value);
                 break;
@@ -2627,7 +2873,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2678,6 +2924,13 @@ export class Style {
     }
     set rowGap(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value, this.emBasis());
+                setInt8(this.style_view, StyleKeys.GAP_ROW_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.GAP_ROW_TYPE, 0);
@@ -2693,7 +2946,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.GAP_ROW_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2712,6 +2965,13 @@ export class Style {
     }
     set columnGap(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value, this.emBasis());
+                setInt8(this.style_view, StyleKeys.GAP_COLUMN_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.GAP_COLUMN_TYPE, 0);
@@ -2727,7 +2987,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.GAP_COLUMN_TYPE, 0);
-                        setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -2758,7 +3018,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = dimensionFromString(value);
+                const dim = dimensionFromString(value, this.emBasis());
                 setInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, dim.value);
                 break;
@@ -2778,7 +3038,7 @@ export class Style {
                     case 'px':
                         this.prepareMut();
                         setInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 1);
-                        setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, value.value);
+                        setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case '%':
                         this.prepareMut();
@@ -3617,7 +3877,7 @@ export class Style {
                     break;
                 case 'px':
                     this.prepareMut();
-                    setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, value.value);
+                    setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, layout.toDevicePixels(value.value));
                     this.commitState(StateKeys.SCROLLBAR_WIDTH);
                     break;
             }
@@ -3627,7 +3887,13 @@ export class Style {
         return getFloat32(this.style_view, StyleKeys.LETTER_SPACING);
     }
     set letterSpacing(value) {
-        if (typeof value === 'number') {
+        if (typeof value === 'string') {
+            this.prepareMut();
+            setFloat32(this.style_view, StyleKeys.LETTER_SPACING, tokenToDevicePx(value, parseFloat(value) || 0));
+            setUint8(this.style_view, StyleKeys.LETTER_SPACING_STATE, 1);
+            this.commitState(StateKeys.LETTER_SPACING);
+        }
+        else if (typeof value === 'number') {
             this.prepareMut();
             setFloat32(this.style_view, StyleKeys.LETTER_SPACING, value);
             setUint8(this.style_view, StyleKeys.LETTER_SPACING_STATE, 1);
@@ -3643,7 +3909,7 @@ export class Style {
                     break;
                 case 'px':
                     this.prepareMut();
-                    setFloat32(this.style_view, StyleKeys.LETTER_SPACING, value.value);
+                    setFloat32(this.style_view, StyleKeys.LETTER_SPACING, layout.toDevicePixels(value.value));
                     setUint8(this.style_view, StyleKeys.LETTER_SPACING_STATE, 1);
                     this.commitState(StateKeys.LETTER_SPACING);
                     break;
@@ -3654,7 +3920,18 @@ export class Style {
         return getFloat32(this.style_view, StyleKeys.LINE_HEIGHT);
     }
     set lineHeight(value) {
-        if (typeof value === 'number') {
+        if (typeof value === 'string') {
+            const t = value.trim();
+            // A unitless line-height is a multiplier (`line-height: 1.5`), not a
+            // length — TYPE 0 means "multiply by the resolved font size".
+            const unitless = /^-?[\d.]+$/.test(t);
+            this.prepareMut();
+            setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, unitless ? finite(parseFloat(t) || 0) : tokenToDevicePx(t, parseFloat(t) || 0));
+            setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
+            setUint8(this.style_view, StyleKeys.LINE_HEIGHT_TYPE, unitless ? 0 : 1);
+            this.commitState(StateKeys.LINE_HEIGHT);
+        }
+        else if (typeof value === 'number') {
             this.prepareMut();
             setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, value);
             setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
@@ -3674,7 +3951,7 @@ export class Style {
                     break;
                 case 'px':
                     this.prepareMut();
-                    setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, value.value);
+                    setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, layout.toDevicePixels(value.value));
                     setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
                     setUint8(this.style_view, StyleKeys.LINE_HEIGHT_TYPE, 1);
                     this.commitState(StateKeys.LINE_HEIGHT);
@@ -3936,6 +4213,91 @@ export class Style {
         value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-radius', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderRadius(this.nativeView, value), () => (this.nativeView.style.borderRadius = value));
     }
+    get whiteSpace() {
+        const map = ['normal', 'pre', 'pre-wrap', 'pre-line', 'nowrap', 'break-spaces'];
+        return map[getUint8(this.style_view, StyleKeys.WHITE_SPACE)] ?? 'normal';
+    }
+    /**
+     * The native text engine has always honoured `white-space` (TextEngine,
+     * TextView and TextNode all read it, and `<pre>` relies on it), but the byte
+     * was only ever written by the native inline-style parser — there was no JS or
+     * CSS path to it.
+     */
+    set whiteSpace(value) {
+        const map = { normal: 0, pre: 1, 'pre-wrap': 2, 'pre-line': 3, nowrap: 4, 'break-spaces': 5 };
+        const mapped = map[value];
+        if (mapped === undefined) {
+            return;
+        }
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.WHITE_SPACE, mapped);
+        setInt8(this.style_view, StyleKeys.WHITE_SPACE_STATE, 1);
+        this.commitState(StateKeys.WHITE_SPACE);
+    }
+    get objectFit() {
+        const map = ['contain', 'cover', 'fill', 'none', 'scale-down'];
+        return map[getUint8(this.style_view, StyleKeys.OBJECT_FIT)] ?? 'contain';
+    }
+    /** Read by `Img`; previously reachable only through the native HTML parser. */
+    set objectFit(value) {
+        const map = { contain: 0, cover: 1, fill: 2, none: 3, 'scale-down': 4 };
+        const mapped = map[value];
+        if (mapped === undefined) {
+            return;
+        }
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.OBJECT_FIT, mapped);
+        this.commitState(StateKeys.OBJECT_FIT);
+    }
+    get textJustify() {
+        const value = getInt8(this.style_view, StyleKeys.TEXT_JUSTIFY);
+        const map = { [-1]: 'none', 0: 'auto', 1: 'inter-word', 2: 'inter-character', 3: 'distribute' };
+        return map[value] ?? 'auto';
+    }
+    set textJustify(value) {
+        const map = { none: -1, auto: 0, 'inter-word': 1, 'inter-character': 2, distribute: 3 };
+        const mapped = map[value];
+        if (mapped === undefined) {
+            return;
+        }
+        this.prepareMut();
+        setInt8(this.style_view, StyleKeys.TEXT_JUSTIFY, mapped);
+        setInt8(this.style_view, StyleKeys.TEXT_JUSTIFY_STATE, 1);
+        this.commitState(StateKeys.TEXT_JUSTIFY);
+    }
+    get textDecorationThickness() {
+        return layout.toDeviceIndependentPixels(getFloat32(this.style_view, StyleKeys.DECORATION_THICKNESS));
+    }
+    /** Read by TextNode when stroking the decoration line. */
+    set textDecorationThickness(value) {
+        this.prepareMut();
+        const devicePx = typeof value === 'number' ? layout.toDevicePixels(finite(value)) : tokenToDevicePx(value, parseFloat(value) || 0, this.emBasis());
+        setFloat32(this.style_view, StyleKeys.DECORATION_THICKNESS, devicePx);
+        setInt8(this.style_view, StyleKeys.DECORATION_THICKNESS_STATE, 1);
+        this.commitState(StateKeys.DECORATION_THICKNESS);
+    }
+    get fontFamily() {
+        if (!this.nativeView)
+            return '';
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getFontFamily(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.fontFamily;
+        }
+        return '';
+    }
+    /**
+     * `font-family` is a native Style property on both platforms (it builds a
+     * FontFace), not a style-buffer field — so unlike a length it can't be written
+     * through the shared buffer. There was no JS or CSS path to it at all before
+     * this: `FONT_FAMILY_STATE` existed with no value slot, and core's
+     * `fontInternalProperty.setNative` hook is Windows-only.
+     */
+    set fontFamily(value) {
+        value = this.coerceCssStringValue(value);
+        this.setPseudoCssStringValue('font-family', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setFontFamily(this.nativeView, value), () => (this.nativeView.style.fontFamily = value));
+    }
     set textDecoration(value) {
         value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('text-decoration', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setTextDecoration(this.nativeView, value), () => this.nativeView.style.setTextDecoration(value));
@@ -4191,7 +4553,7 @@ export class Style {
                                         case 'px':
                                             this.prepareMut();
                                             setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
-                                            setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, parsed.value);
+                                            setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, layout.toDevicePixels(parsed.value));
                                             setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
                                             break;
                                         case 'dip':
@@ -4218,7 +4580,7 @@ export class Style {
                                 case 'px':
                                     this.prepareMut();
                                     setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
-                                    setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, value.value);
+                                    setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, layout.toDevicePixels(value.value));
                                     setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
                                     break;
                                 case 'dip':