@triniwiz/nativescript-masonkit 1.0.0-beta.108 → 1.0.0-beta.109

package/style.js

@@ -3,7 +3,9 @@ import { cssUnits } from './units';
 import { masonEngine } from './windows-panel-helpers';
 import { reportCssDiagnostic } from './diagnostics';
 import { expandColorStops, resolveStopPositions } from './gradient-stops';
-import { Color, Length as CoreLength, PercentLength as CorePercentLength, Screen } from '@nativescript/core';
+import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
+import { encodeCssFilter, parseCssFilter } from './css-filter';
+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
 // is 1 until the window has a XamlRoot, so converting stored early styles unscaled and later ones scaled.
 const layout = __WINDOWS__ ? { ...coreLayout, getDisplayDensity: () => 1, toDevicePixels: (value) => value, toDeviceIndependentPixels: (value) => value } : coreLayout;
@@ -257,7 +259,7 @@ function windowsSetGrid(nativeView, field, value) {
     // UpdateGrid doesn't mark the node dirty / invalidate XAML measure on its own;
     // SyncStyle does, so a grid item's placement change re-runs the container layout.
     try {
-        nativeView.SyncStyle('0', '0');
+        nativeView.SyncStyle(-1, -1, -1, -1);
     }
     catch (_) { }
 }
@@ -610,6 +612,8 @@ StateKeys.CARET_COLOR = StateKeys.flag(76);
 StateKeys.WORD_SPACING = StateKeys.flag(77);
 StateKeys.FONT_STRETCH = StateKeys.flag(78);
 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);
 function wordsToBigInt(w0, w1, w2, w3) {
     return BigInt(w0 >>> 0) | (BigInt(w1 >>> 0) << 32n) | (BigInt(w2 >>> 0) << 64n) | (BigInt(w3 >>> 0) << 96n);
 }
@@ -745,6 +749,102 @@ export function parseLinearGradientCss(value) {
         return null;
     return { angle, offsets: resolveStopPositions(positions), colors, interpolation };
 }
+const RADIAL_GRADIENT_ARGS = /radial-gradient\s*\(([\s\S]*)\)\s*$/i;
+function positionFraction(token, axis) {
+    if (token == null)
+        return null;
+    const t = token.trim().toLowerCase();
+    if (t === 'center')
+        return 0.5;
+    if (t === (axis === 'x' ? 'left' : 'top'))
+        return 0;
+    if (t === (axis === 'x' ? 'right' : 'bottom'))
+        return 1;
+    if (t.endsWith('%')) {
+        const n = parseFloat(t);
+        return Number.isFinite(n) ? n / 100 : null;
+    }
+    return null;
+}
+export function parseBoxPosition(value, fallback = 0.5) {
+    const parts = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    let x = null;
+    let y = null;
+    for (const part of parts) {
+        if ((part === 'top' || part === 'bottom') && y == null)
+            y = positionFraction(part, 'y');
+        else if ((part === 'left' || part === 'right') && x == null)
+            x = positionFraction(part, 'x');
+        else if (x == null)
+            x = positionFraction(part, 'x');
+        else if (y == null)
+            y = positionFraction(part, 'y');
+    }
+    if (x != null || y != null)
+        return { x: x ?? 0.5, y: y ?? 0.5 };
+    return { x: fallback, y: fallback };
+}
+export function parseRadialGradientCss(value) {
+    const m = RADIAL_GRADIENT_ARGS.exec(value.trim());
+    if (!m)
+        return null;
+    const parts = splitTopLevelCommas(m[1])
+        .map((p) => p.trim())
+        .filter(Boolean);
+    if (parts.length < 2)
+        return null;
+    let start = 0;
+    let cx = 0.5;
+    let cy = 0.5;
+    let size = 'farthest-corner';
+    let interpolation = '';
+    let head = parts[0];
+    const method = INTERPOLATION_METHOD.exec(head);
+    if (method) {
+        interpolation = method[1].toLowerCase().replace(/\s+/g, ' ');
+        head = (head.slice(0, method.index) + head.slice(method.index + method[0].length)).trim();
+        start = 1;
+    }
+    if (/\b(circle|ellipse|closest-side|farthest-side|closest-corner|farthest-corner|at)\b/i.test(head)) {
+        start = 1;
+        const at = /\bat\s+(.+)$/i.exec(head);
+        if (at) {
+            const p = parseBoxPosition(at[1]);
+            cx = p.x;
+            cy = p.y;
+        }
+        const sizeKeyword = /(closest-side|farthest-side|closest-corner|farthest-corner)/i.exec(head);
+        if (sizeKeyword)
+            size = sizeKeyword[1].toLowerCase();
+    }
+    const sideX = size.startsWith('closest') ? Math.min(cx, 1 - cx) : Math.max(cx, 1 - cx);
+    const sideY = size.startsWith('closest') ? Math.min(cy, 1 - cy) : Math.max(cy, 1 - cy);
+    const corner = size.endsWith('corner') ? Math.SQRT2 : 1;
+    const colors = [];
+    const positions = [];
+    for (const stop of expandColorStops(parts.slice(start))) {
+        const pos = /\s+(-?[\d.]+)(%|[a-z]+)\s*$/i.exec(stop);
+        const colorStr = pos ? stop.slice(0, pos.index).trim() : stop;
+        const argb = normalizeColorValue(colorStr);
+        if (argb == null)
+            continue;
+        colors.push(argb >>> 0);
+        positions.push(pos && pos[2] === '%' ? parseFloat(pos[1]) / 100 : null);
+    }
+    if (colors.length < 1)
+        return null;
+    return { cx, cy, rx: Math.max(sideX * corner, 0.001), ry: Math.max(sideY * corner, 0.001), offsets: resolveStopPositions(positions), colors, interpolation };
+}
+export function backgroundFit(size) {
+    const t = (size ?? '').trim().toLowerCase();
+    if (t === 'cover')
+        return 3;
+    if (t === 'contain')
+        return 2;
+    if (t === '100%' || t === '100% 100%')
+        return 1;
+    return 0;
+}
 const SIDE_TOKEN = /^(auto|[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?(px|dip|dppx|rem|em|pt|vw|vh|vmin|vmax|%)?|[a-z-]+\(.*\))$/i;
 /** 1-4 lengths, percentages or `auto`. Anything else makes the whole declaration invalid, which CSS ignores. */
 export function isSideList(value) {
@@ -1199,6 +1299,7 @@ export class Style {
         // `false` means a write happened without a snapshot, so always sync.
         this._turnSnapshot = undefined;
         this._synced = false;
+        this._windowsCss = new Map();
     }
     static fromView(view, nativeView) {
         const ret = new Style();
@@ -1399,34 +1500,91 @@ export class Style {
         }
         if (__WINDOWS__) {
             // Android and iOS parse these natively; Windows parses them here into the style buffer.
+            if (!this._pseudo)
+                this._windowsCss.set(name, value);
             this.applyWindowsCssString(name, value);
         }
     }
+    applyWindowsBackground(shorthand) {
+        const v = (this._windowsBackground ?? '').trim();
+        const layer = splitTopLevelCommas(v)[0]?.trim() ?? '';
+        const stopsOf = (g) => g.offsets.map((o, i) => o + ':' + (g.colors[i] >>> 0)).join(',');
+        try {
+            if (/^radial-gradient/i.test(layer)) {
+                const g = parseRadialGradientCss(layer);
+                if (g)
+                    NativeScript.Mason.Css.ApplyRadialGradientAt(this.nativeView, g.cx, g.cy, g.rx, g.ry, stopsOf(g), g.interpolation);
+                return;
+            }
+            if (/^linear-gradient/i.test(layer)) {
+                const g = parseLinearGradientCss(layer);
+                if (g && g.colors.length)
+                    NativeScript.Mason.Css.ApplyLinearGradient(this.nativeView, g.angle, stopsOf(g), g.interpolation);
+                return;
+            }
+            const url = /url\(\s*(['"]?)(.*?)\1\s*\)/i.exec(layer);
+            if (url) {
+                let source = url[2];
+                if (source.startsWith('~/'))
+                    source = source.replace('~/', knownFolders.currentApp().path + '/');
+                const rest = layer.slice(url.index + url[0].length).trim();
+                const keywords = /\b(no-repeat|repeat-x|repeat-y|repeat|space|round|scroll|fixed|local|border-box|padding-box|content-box)\b/gi;
+                const [positionPart, sizePart] = rest.split('/').map((p) => p.replace(keywords, '').trim());
+                const size = shorthand && sizePart ? sizePart.split(/\s+/).slice(0, 2).join(' ') : this._windowsBackgroundSize;
+                const position = parseBoxPosition(shorthand && positionPart ? positionPart : (this._windowsBackgroundPosition ?? '0% 0%'), 0);
+                const align = (f) => (f <= 0.25 ? 0 : f >= 0.75 ? 2 : 1);
+                NativeScript.Mason.Css.ApplyBackgroundImage(this.nativeView, source, backgroundFit(size), align(position.x), align(position.y));
+                return;
+            }
+            if (!ANY_GRADIENT.test(layer)) {
+                NativeScript.Mason.Css.ClearBackground(this.nativeView);
+                if (shorthand && v.length && v.toLowerCase() !== 'none')
+                    this.backgroundColor = v;
+            }
+        }
+        catch (_) { }
+    }
     applyWindowsCssString(name, value) {
         // A gradient is a Panel brush from Css that VisualApply leaves over BACKGROUND_COLOR; clearing
         // it lets VisualApply repaint the color.
         if (name === 'background' || name === 'background-image') {
-            const v = typeof value === 'string' ? value : String(value ?? '');
-            if (LINEAR_GRADIENT.test(v)) {
-                const g = parseLinearGradientCss(v);
-                if (g && g.colors.length) {
-                    try {
-                        // Pass stops as an "offset:argb,..." string — WinRT array_view params don't marshal
-                        // reliably from the NS-Windows JS runtime (plain arrays -> E_FAIL, typed arrays -> crash).
-                        const stops = g.offsets.map((o, i) => o + ':' + (g.colors[i] >>> 0)).join(',');
-                        NativeScript.Mason.Css.ApplyLinearGradient(this.nativeView, g.angle, stops, g.interpolation);
-                    }
-                    catch (_) { }
-                }
-            }
-            else if (!ANY_GRADIENT.test(v)) {
-                try {
-                    NativeScript.Mason.Css.ClearBackground(this.nativeView);
-                }
-                catch (_) { }
-                if (name === 'background' && v.trim().length && v.trim().toLowerCase() !== 'none') {
-                    this.backgroundColor = v;
-                }
+            this._windowsBackground = typeof value === 'string' ? value : String(value ?? '');
+            this.applyWindowsBackground(name === 'background');
+            return;
+        }
+        if (name === 'background-size' || name === 'background-position') {
+            if (name === 'background-size')
+                this._windowsBackgroundSize = String(value ?? '');
+            else
+                this._windowsBackgroundPosition = String(value ?? '');
+            if (/url\(/i.test(this._windowsBackground ?? ''))
+                this.applyWindowsBackground(false);
+            return;
+        }
+        if (name === 'filter' || name === 'backdrop-filter') {
+            const view = this.nativeView;
+            if (!view)
+                return;
+            const current = this.color >>> 0 || 0xff000000;
+            const spec = encodeCssFilter(parseCssFilter(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, this.emBasis())), (color) => (color && color.toLowerCase() !== 'currentcolor' ? (normalizeColorValue(color) ?? current) : current));
+            if (name === 'filter')
+                NativeScript.Mason.Css.SetFilter(view, spec);
+            else
+                NativeScript.Mason.Css.SetBackdropFilter(view, spec);
+            return;
+        }
+        if (name === 'font-feature-settings') {
+            const view = this.nativeView;
+            if (view && typeof view.SetFontFeatureSettings === 'function')
+                view.SetFontFeatureSettings(typeof value === 'string' ? value : '');
+            return;
+        }
+        if (name === 'text-shadow') {
+            const view = this.nativeView;
+            if (view && typeof view.SetTextShadow === 'function') {
+                const current = this.color >>> 0 || 0xff000000;
+                const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, this.emBasis()));
+                view.SetTextShadow(encodeBoxShadows(shadows, (color) => (color && color.toLowerCase() !== 'currentcolor' ? (normalizeColorValue(color) ?? current) : current)));
             }
             return;
         }
@@ -1524,6 +1682,9 @@ export class Style {
             case 'text-decoration-color':
                 color = parseTextDecorationColor(value);
                 break;
+            case 'text-decoration-thickness':
+                thickness = cssLengthToDip(value, this.emBasis()) ?? null;
+                break;
         }
         if (line == null && style == null && color == null && thickness == null)
             return;
@@ -1597,22 +1758,38 @@ export class Style {
             view.mason_syncStyleParts(this._d0, this._d1, this._d2, this._d3);
         }
         else if (__WINDOWS__) {
-            // The Windows elements re-read the whole buffer, so the dirty bits aren't passed.
             // @ts-ignore
             const view = this.view?.windows ?? this.view._view;
-            view.SyncStyle('', '');
-            this.view?._windowsSyncAnonymousText?.();
+            const all = !this._hasDirty;
+            const d0 = all ? -1 : this._d0;
+            const d1 = all ? -1 : this._d1;
+            const d2 = all ? -1 : this._d2;
+            const d3 = all ? -1 : this._d3;
+            view.SyncStyle(d0, d1, d2, d3);
+            const text = StateKeys.WINDOWS_TEXT;
+            if ((d0 & text.w0) | (d1 & text.w1) | (d2 & text.w2) | (d3 & text.w3)) {
+                this.view?._windowsSyncAnonymousText?.(d0, d1, d2, d3);
+            }
+            const flow = StateKeys.FLOW_TYPE;
+            if (!this._pseudo && (d0 & flow.w0) | (d1 & flow.w1) | (d2 & flow.w2) | (d3 & flow.w3)) {
+                this.view?._windowsFlowTypeChanged?.();
+            }
         }
     }
     /** The anonymous Windows Text holding a container's own runs inherits the container's text styles. */
-    copyTextStyleTo(text) {
+    copyTextStyleTo(text, d0 = -1, d1 = -1, d2 = -1, d3 = -1, block = false) {
         if (!__WINDOWS__ || !this.u8View)
             return;
         //@ts-ignore
         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);
-        text.SyncStyle('0', '0');
+        target.set(this.u8View.subarray(StyleKeys.HYPHENS, StyleKeys.FONT_STRETCH_STATE + 1), StyleKeys.HYPHENS);
+        if (block) {
+            target[StyleKeys.DISPLAY] = 3;
+            target[StyleKeys.DISPLAY_MODE] = 0 /* DisplayMode.None */;
+        }
+        text.SyncStyle(d0, d1, d2, d3);
     }
     setOrAppendState(value) {
         if (this._turnSnapshot === undefined) {
@@ -1703,6 +1880,24 @@ export class Style {
             this.commitState(StateKeys.BOX_SIZING);
         }
     }
+    get direction() {
+        switch (getUint8(this.style_view, StyleKeys.DIRECTION)) {
+            case 1:
+                return 'ltr';
+            case 2:
+                return 'rtl';
+            default:
+                return 'inherit';
+        }
+    }
+    set direction(value) {
+        const direction = value === 'ltr' ? 1 : value === 'rtl' ? 2 : 0;
+        if (getUint8(this.style_view, StyleKeys.DIRECTION) === direction)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.DIRECTION, direction);
+        this.commitState(StateKeys.DIRECTION);
+    }
     get listStyleType() {
         switch (getUint8(this.style_view, StyleKeys.LIST_STYLE_TYPE)) {
             case 1:
@@ -1732,6 +1927,18 @@ export class Style {
         setInt8(this.style_view, StyleKeys.LIST_STYLE_TYPE_STATE, 1);
         this.commitState(StateKeys.LIST_STYLE_TYPE);
     }
+    get listStylePosition() {
+        return getUint8(this.style_view, StyleKeys.LIST_STYLE_POSITION) === 1 ? 'inside' : 'outside';
+    }
+    set listStylePosition(value) {
+        if (value !== 'outside' && value !== 'inside') {
+            return;
+        }
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.LIST_STYLE_POSITION, value === 'inside' ? 1 : 0);
+        setInt8(this.style_view, StyleKeys.LIST_STYLE_POSITION_STATE, 1);
+        this.commitState(StateKeys.LIST_STYLE_POSITION);
+    }
     get fontSize() {
         if (!this.style_view) {
             // BLACK ?
@@ -1926,6 +2133,12 @@ export class Style {
         }
         const normalized = normalizeColorValue(value);
         if (normalized == null) {
+            // Leaving :active on Windows resets an unset color, which then inherits again.
+            if (__WINDOWS__ && getInt8(this.style_view, StyleKeys.FONT_COLOR_STATE)) {
+                this.prepareMut();
+                setInt8(this.style_view, StyleKeys.FONT_COLOR_STATE, 0);
+                this.commitState(StateKeys.FONT_COLOR);
+            }
             return;
         }
         this.prepareMut();
@@ -1996,6 +2209,15 @@ export class Style {
     get styleView() {
         return this.style_view;
     }
+    get hasBoxStyle() {
+        const view = this.style_view;
+        if (!view)
+            return false;
+        if (getInt8(view, StyleKeys.WIDTH_TYPE) !== 0 || getInt8(view, StyleKeys.HEIGHT_TYPE) !== 0)
+            return true;
+        const sides = [StyleKeys.PADDING_LEFT_VALUE, StyleKeys.PADDING_RIGHT_VALUE, StyleKeys.PADDING_TOP_VALUE, StyleKeys.PADDING_BOTTOM_VALUE, StyleKeys.BORDER_LEFT_VALUE, StyleKeys.BORDER_RIGHT_VALUE, StyleKeys.BORDER_TOP_VALUE, StyleKeys.BORDER_BOTTOM_VALUE];
+        return sides.some((offset) => getFloat32(view, offset) > 0);
+    }
     get display() {
         const mode = getInt8(this.style_view, StyleKeys.DISPLAY_MODE);
         if (mode === 1 /* DisplayMode.Inline */) {
@@ -3762,7 +3984,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridAutoRows;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridAutoRowsCss ?? '') : '';
     }
     set gridAutoRows(value) {
         if (!this.nativeView) {
@@ -3790,7 +4012,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridAutoColumns;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridAutoColumnsCss ?? '') : '';
     }
     set gridAutoColumns(value) {
         if (!this.nativeView) {
@@ -3866,7 +4088,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridColumn;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridColumnCss ?? '') : '';
     }
     get gridColumnStart() {
         if (!this.nativeView) {
@@ -3878,7 +4100,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridColumnStart;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridColumnStartCss ?? '') : '';
     }
     set gridColumnStart(value) {
         if (!this.nativeView) {
@@ -3906,7 +4128,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridColumnEnd;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridColumnEndCss ?? '') : '';
     }
     set gridColumnEnd(value) {
         if (!this.nativeView) {
@@ -3950,7 +4172,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridRow;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridRowCss ?? '') : '';
     }
     get gridRowStart() {
         if (!this.nativeView) {
@@ -3962,7 +4184,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridRowStart;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridRowStartCss ?? '') : '';
     }
     set gridRowStart(value) {
         if (!this.nativeView) {
@@ -3990,7 +4212,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridRowEnd;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridRowEndCss ?? '') : '';
     }
     set gridRowEnd(value) {
         if (!this.nativeView) {
@@ -4034,7 +4256,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridArea;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridAreaCss ?? '') : '';
     }
     set gridTemplateRows(value) {
         if (!this.nativeView) {
@@ -4062,7 +4284,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridTemplateRows;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridTemplateRowsCss ?? '') : '';
     }
     get gridTemplateColumns() {
         if (!this.nativeView) {
@@ -4074,7 +4296,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridTemplateColumns;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridTemplateColumnsCss ?? '') : '';
     }
     set gridTemplateColumns(value) {
         if (!this.nativeView) {
@@ -4102,7 +4324,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.gridTemplateAreas;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridTemplateAreasCss ?? '') : '';
     }
     set gridTemplateAreas(value) {
         if (!this.nativeView) {
@@ -4469,7 +4691,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.background;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background') ?? '') : '';
     }
     set background(value) {
         value = this.coerceCssStringValue(value);
@@ -4485,7 +4707,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundImage;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-image') ?? '') : '';
     }
     set backgroundImage(value) {
         value = this.coerceCssStringValue(value);
@@ -4501,7 +4723,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundRepeat;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-repeat') ?? '') : '';
     }
     set backgroundRepeat(value) {
         value = this.coerceCssStringValue(value);
@@ -4517,7 +4739,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundPosition;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-position') ?? '') : '';
     }
     set backgroundPosition(value) {
         value = this.coerceCssStringValue(value);
@@ -4533,7 +4755,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundSize;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-size') ?? '') : '';
     }
     set backgroundSize(value) {
         value = this.coerceCssStringValue(value);
@@ -4549,7 +4771,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundClip;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-clip') ?? '') : '';
     }
     set backgroundClip(value) {
         value = this.coerceCssStringValue(value);
@@ -4565,7 +4787,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundPositionX;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-position-x') ?? '') : '';
     }
     set backgroundPositionX(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), '0%');
@@ -4581,7 +4803,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundPositionY;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-position-y') ?? '') : '';
     }
     set backgroundPositionY(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), '0%');
@@ -4597,7 +4819,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundOrigin;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-origin') ?? '') : '';
     }
     set backgroundOrigin(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'padding-box');
@@ -4613,7 +4835,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundAttachment;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-attachment') ?? '') : '';
     }
     set backgroundAttachment(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'scroll');
@@ -4629,7 +4851,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backgroundBlendMode;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-blend-mode') ?? '') : '';
     }
     set backgroundBlendMode(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'normal');
@@ -4735,7 +4957,7 @@ export class Style {
     }
     get objectFit() {
         const map = ['contain', 'cover', 'fill', 'none', 'scale-down'];
-        return map[getUint8(this.style_view, StyleKeys.OBJECT_FIT)] ?? 'contain';
+        return map[getUint8(this.style_view, StyleKeys.OBJECT_FIT)] ?? 'fill';
     }
     /** Read by `Img`; previously reachable only through the native HTML parser. */
     set objectFit(value) {
@@ -4784,7 +5006,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.fontFamily;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('font-family') ?? '') : '';
     }
     // `font-family` is a native Style property (builds a FontFace), not a
     // style-buffer field, so it can't be written through the shared buffer.
@@ -4864,7 +5086,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.border;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('border') ?? '') : '';
     }
     set border(value) {
         value = this.coerceCssStringValue(value);
@@ -4879,7 +5101,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.paddingCss;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('padding') ?? '') : '';
     }
     set paddingCss(value) {
         // a bare number is dip, matching other numeric setters; Android's
@@ -4896,7 +5118,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.marginCss;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('margin') ?? '') : '';
     }
     set marginCss(value) {
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
@@ -4912,7 +5134,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.insetCss;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('inset') ?? '') : '';
     }
     set insetCss(value) {
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
@@ -4957,7 +5179,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.filter;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('filter') ?? '') : '';
     }
     set filter(value) {
         value = this.coerceCssStringValue(value);
@@ -4973,7 +5195,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.boxShadow;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('box-shadow') ?? '') : '';
     }
     set 'box-shadow'(value) {
         this.boxShadow = value;
@@ -4995,7 +5217,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.transform;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('transform') ?? '') : '';
     }
     set transform(value) {
         value = this.coerceCssStringValue(value);
@@ -5159,7 +5381,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.textShadow;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('text-shadow') ?? '') : '';
     }
     set textShadow(value) {
         value = this.coerceCssStringValue(value);
@@ -5257,7 +5479,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.cornerShape;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape') ?? '') : '';
     }
     get cornerShapeTopLeft() {
         if (!this.nativeView)
@@ -5268,7 +5490,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.cornerShapeTopLeft;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-top-left') ?? '') : '';
     }
     set cornerShapeTopLeft(value) {
         value = this.coerceCssStringValue(value);
@@ -5283,7 +5505,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.cornerShapeTopRight;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-top-right') ?? '') : '';
     }
     set cornerShapeTopRight(value) {
         value = this.coerceCssStringValue(value);
@@ -5298,7 +5520,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.cornerShapeBottomRight;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-bottom-right') ?? '') : '';
     }
     set cornerShapeBottomRight(value) {
         value = this.coerceCssStringValue(value);
@@ -5313,7 +5535,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.cornerShapeBottomLeft;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-bottom-left') ?? '') : '';
     }
     set cornerShapeBottomLeft(value) {
         value = this.coerceCssStringValue(value);
@@ -5461,7 +5683,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.borderImage;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('border-image') ?? '') : '';
     }
     set borderImage(value) {
         value = this.coerceCssStringValue(value);
@@ -5508,7 +5730,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.fontFeatureSettings;
         }
-        return 'normal';
+        return __WINDOWS__ ? this._windowsCss.get('font-feature-settings') || 'normal' : 'normal';
     }
     set fontFeatureSettings(value) {
         value = this.coerceCssStringValue(value);
@@ -5614,7 +5836,7 @@ export class Style {
         if (__APPLE__) {
             return this.appleStyle.backdropFilter;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('backdrop-filter') ?? '') : '';
     }
     set backdropFilter(value) {
         value = this.coerceCssStringValue(value);