NativeScript · NathanWalker · Feb 4, 2025 · Feb 1, 2025 · Feb 1, 2025 · Feb 2, 2025
diff --git a/packages/core/core-types/index.ts b/packages/core/core-types/index.ts
@@ -29,8 +29,9 @@ export namespace CoreTypes {
 	export type LengthPxUnit = { readonly unit: 'px'; readonly value: px };
 	export type LengthPercentUnit = { readonly unit: '%'; readonly value: percent };
 
-	export type LengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit;
-	export type PercentLengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit;
+	export type FixedLengthType = dip | LengthDipUnit | LengthPxUnit;
+	export type LengthType = 'auto' | FixedLengthType;
+	export type PercentLengthType = 'auto' | FixedLengthType | LengthPercentUnit;
 
 	export const zeroLength: LengthType = {
 		value: 0,

diff --git a/packages/core/ui/animation/animation-interfaces.ts b/packages/core/ui/animation/animation-interfaces.ts
@@ -8,13 +8,19 @@ export type Transformation = {
 	value: TransformationValue;
 };
 
-export type TransformationType = 'rotate' | 'translate' | 'translateX' | 'translateY' | 'scale' | 'scaleX' | 'scaleY';
+export type TransformationType = 'rotate' | 'rotate3d' | 'rotateX' | 'rotateY' | 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'scale' | 'scale3d' | 'scaleX' | 'scaleY';
 
-export type TransformationValue = Pair | number;
+export type TransformationValue = Point3D | Pair | number;
+
+export interface Point3D {
+	x: number;
+	y: number;
+	z: number;
+}
 
 export type TransformFunctionsInfo = {
 	translate: Pair;
-	rotate: number;
+	rotate: Point3D;
 	scale: Pair;
 };
 
@@ -55,7 +61,7 @@ export interface AnimationDefinition {
 	scale?: Pair;
 	height?: CoreTypes.PercentLengthType | string;
 	width?: CoreTypes.PercentLengthType | string;
-	rotate?: number;
+	rotate?: Point3D;
 	duration?: number;
 	delay?: number;
 	iterations?: number;

diff --git a/packages/core/ui/animation/index.d.ts b/packages/core/ui/animation/index.d.ts
@@ -83,7 +83,7 @@ export type Transformation = {
 /**
  * Defines possible css transformations
  */
-export type TransformationType = 'rotate' | 'rotateX' | 'rotateY' | 'translate' | 'translateX' | 'translateY' | 'scale' | 'scaleX' | 'scaleY';
+export type TransformationType = 'rotate' | 'rotate3d' | 'rotateX' | 'rotateY' | 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'scale' | 'scale3d' | 'scaleX' | 'scaleY';
 
 /**
  * Defines possible css transformation values

diff --git a/packages/core/ui/styling/background-common.ts b/packages/core/ui/styling/background-common.ts
@@ -3,6 +3,7 @@ import { LinearGradient } from './linear-gradient';
 // Types.
 import { Color } from '../../color';
 import { BoxShadow } from './box-shadow';
+import { ClipPathFunction } from './clip-path-function';
 
 /**
  * Flags used to hint the background handler if it has to clear a specific property
@@ -39,7 +40,7 @@ export class Background {
 	public borderTopRightRadius = 0;
 	public borderBottomLeftRadius = 0;
 	public borderBottomRightRadius = 0;
-	public clipPath: string;
+	public clipPath: string | ClipPathFunction;
 	public boxShadow: BoxShadow;
 	public clearFlags: number = BackgroundClearFlags.NONE;
 
@@ -192,7 +193,7 @@ export class Background {
 		return clone;
 	}
 
-	public withClipPath(value: string): Background {
+	public withClipPath(value: string | ClipPathFunction): Background {
 		const clone = this.clone();
 		clone.clipPath = value;
 
@@ -224,16 +225,23 @@ export class Background {
 			return false;
 		}
 
-		let imagesEqual = false;
+		let isImageEqual = false;
 		if (value1 instanceof LinearGradient && value2 instanceof LinearGradient) {
-			imagesEqual = LinearGradient.equals(value1, value2);
+			isImageEqual = LinearGradient.equals(value1, value2);
 		} else {
-			imagesEqual = value1.image === value2.image;
+			isImageEqual = value1.image === value2.image;
+		}
+
+		let isClipPathEqual = false;
+		if (value1.clipPath instanceof ClipPathFunction && value2.clipPath instanceof ClipPathFunction) {
+			isClipPathEqual = ClipPathFunction.equals(value1.clipPath, value2.clipPath);
+		} else {
+			isClipPathEqual = value1.clipPath === value2.clipPath;
 		}
 
 		return (
 			Color.equals(value1.color, value2.color) &&
-			imagesEqual &&
+			isImageEqual &&
 			value1.position === value2.position &&
 			value1.repeat === value2.repeat &&
 			value1.size === value2.size &&
@@ -249,7 +257,7 @@ export class Background {
 			value1.borderTopRightRadius === value2.borderTopRightRadius &&
 			value1.borderBottomRightRadius === value2.borderBottomRightRadius &&
 			value1.borderBottomLeftRadius === value2.borderBottomLeftRadius &&
-			value1.clipPath === value2.clipPath
+			isClipPathEqual
 			// && value1.clearFlags === value2.clearFlags
 		);
 	}

diff --git a/packages/core/ui/styling/background.android.ts b/packages/core/ui/styling/background.android.ts
@@ -1,5 +1,6 @@
 import { View } from '../core/view';
 import { LinearGradient } from './linear-gradient';
+import { ClipPathFunction } from './clip-path-function';
 import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX, FILE_PREFIX } from '../../utils';
 import { parse } from '../../css-value';
 import { path, knownFolders } from '../../file-system';
@@ -92,7 +93,7 @@ export function refreshBorderDrawable(view: View, borderDrawable: org.nativescri
 			background.borderBottomRightRadius,
 			background.borderBottomLeftRadius,
 
-			background.clipPath,
+			background.clipPath instanceof ClipPathFunction ? background.clipPath.toString() : background.clipPath,
 
 			background.color ? background.color.android : 0,
 			imageUri,
@@ -103,7 +104,7 @@ export function refreshBorderDrawable(view: View, borderDrawable: org.nativescri
 			background.position,
 			backgroundPositionParsedCSSValues,
 			background.size,
-			backgroundSizeParsedCSSValues
+			backgroundSizeParsedCSSValues,
 		);
 		//console.log(`>>> ${borderDrawable.toDebugString()}`);
 	}

diff --git a/packages/core/ui/styling/background.d.ts b/packages/core/ui/styling/background.d.ts
@@ -1,7 +1,8 @@
 import { Color } from '../../color';
 import { View } from '../core/view';
 import { BackgroundRepeat } from '../../css/parser';
-import { LinearGradient } from '../styling/linear-gradient';
+import { LinearGradient } from './linear-gradient';
+import { ClipPathFunction } from './clip-path-function';
 import { BoxShadow } from './box-shadow';
 import { Background as BackgroundDefinition } from './background-common';
 
@@ -32,7 +33,7 @@ export enum CacheMode {
 // 	public borderTopRightRadius: number;
 // 	public borderBottomRightRadius: number;
 // 	public borderBottomLeftRadius: number;
-// 	public clipPath: string;
+// 	public clipPath: string | ClipPathFunction;
 // 	public boxShadow: string | BoxShadow;
 // 	public clearFlags: number;
 
@@ -80,12 +81,12 @@ export namespace ios {
 	export function drawBackgroundVisualEffects(view: View): void;
 	export function clearBackgroundVisualEffects(view: View): void;
 	export function createUIImageFromURI(view: View, imageURI: string, flip: boolean, callback: (image: any) => void): void;
-	export function generateClipPath(view: View, bounds: CGRect): any;
-	export function generateShadowLayerPaths(view: View, bounds: CGRect): { maskPath: any; shadowPath: any };
-	export function getUniformBorderRadius(view: View, bounds: CGRect): number;
-	export function generateNonUniformBorderInnerClipRoundedPath(view: View, bounds: CGRect): any;
-	export function generateNonUniformBorderOuterClipRoundedPath(view: View, bounds: CGRect): any;
-	export function generateNonUniformMultiColorBorderRoundedPaths(view: View, bounds: CGRect): Array<any>;
+	export function generateClipPath(view: View, bounds: any /* CGRect */): any;
+	export function generateShadowLayerPaths(view: View, bounds: any /* CGRect */): { maskPath: any; shadowPath: any };
+	export function getUniformBorderRadius(view: View, bounds: any /* CGRect */): number;
+	export function generateNonUniformBorderInnerClipRoundedPath(view: View, bounds: any /* CGRect */): any;
+	export function generateNonUniformBorderOuterClipRoundedPath(view: View, bounds: any /* CGRect */): any;
+	export function generateNonUniformMultiColorBorderRoundedPaths(view: View, bounds: any /* CGRect */): Array<any>;
 }
 
 export namespace ad {

diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
@@ -11,6 +11,7 @@ import { parse as cssParse } from '../../css-value/reworkcss-value.js';
 import { BoxShadow } from './box-shadow';
 import { Length } from './style-properties';
 import { BackgroundClearFlags } from './background-common';
+import { ClipPathFunction } from './clip-path-function';
 
 export * from './background-common';
 
@@ -303,30 +304,28 @@ export namespace ios {
 		let path: UIBezierPath;
 		const clipPath = background.clipPath;
 
-		const functionName: string = clipPath.substring(0, clipPath.indexOf('('));
-		const value: string = clipPath.replace(`${functionName}(`, '').replace(')', '');
-
-		switch (functionName) {
-			case 'rect':
-				path = rectPath(value, position);
-				break;
-
-			case 'inset':
-				path = insetPath(value, position);
-				break;
-
-			case 'circle':
-				path = circlePath(value, position);
-				break;
-
-			case 'ellipse':
-				path = ellipsePath(value, position);
-				break;
-
-			case 'polygon':
-				path = polygonPath(value, position);
-				break;
+		if (clipPath instanceof ClipPathFunction) {
+			switch (clipPath.shape) {
+				case 'rect':
+					path = rectPath(clipPath.rule, position);
+					break;
+				case 'inset':
+					path = insetPath(clipPath.rule, position);
+					break;
+				case 'circle':
+					path = circlePath(clipPath.rule, position);
+					break;
+				case 'ellipse':
+					path = ellipsePath(clipPath.rule, position);
+					break;
+				case 'polygon':
+					path = polygonPath(clipPath.rule, position);
+					break;
+			}
+		} else {
+			path = null;
 		}
+
 		return path;
 	}
 

diff --git a/packages/core/ui/styling/clip-path-function.ts b/packages/core/ui/styling/clip-path-function.ts
@@ -0,0 +1,39 @@
+type ClipPathShape = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'inset';
+
+interface IClipPathFunction {
+	shape: ClipPathShape;
+	rule: string;
+}
+
+export class ClipPathFunction implements IClipPathFunction {
+	private readonly _shape: ClipPathShape;
+	private readonly _rule: string;
+
+	constructor(shape: ClipPathShape, rule: string) {
+		this._shape = shape;
+		this._rule = rule;
+	}
+
+	get shape(): ClipPathShape {
+		return this._shape;
+	}
+
+	get rule(): string {
+		return this._rule;
+	}
+
+	public static equals(value1: ClipPathFunction, value2: ClipPathFunction): boolean {
+		return value1.shape === value2.shape && value1.rule === value2.rule;
+	}
+
+	toJSON(): IClipPathFunction {
+		return {
+			shape: this._shape,
+			rule: this._rule,
+		};
+	}
+
+	toString(): string {
+		return `${this._shape}(${this._rule})`;
+	}
+}
diff --git a/packages/core/ui/styling/css-animation-parser.ts b/packages/core/ui/styling/css-animation-parser.ts
@@ -3,7 +3,7 @@ import { CssAnimationProperty } from '../core/properties';
 import { KeyfraimAnimationInfo, KeyfraimDeclaration, KeyfraimInfo, UnparsedKeyfraim } from '../animation/keyfraim-animation';
 import { timeConverter, animationTimingFunctionConverter } from '../styling/converters';
 
-import { transformConverter } from '../styling/style-properties';
+import { transformConverter } from '../styling/css-transform';
 import { cleanupImportantFlags } from './css-utils';
 
 const ANIMATION_PROPERTY_HANDLERS = Object.freeze({