@nativescript/core 8.9.0-next-02-02-2025-13100070003 → 8.9.0-next-02-04-2025-13145148797

package/ui/styling/style-properties.js

@@ -1,50 +1,42 @@
-// Types
 import { unsetValue, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty } from '../core/properties';
 import { Style } from './style';
 import { Color } from '../../color';
 import { Font, parseFont, FontStyle, FontWeight, FontVariationSettings } from './font';
 import { Background } from './background';
-import { layout, hasDuplicates } from '../../utils';
-import { radiansToDegrees } from '../../utils/number-utils';
-import { decompose2DTransformMatrix, getTransformMatrix, matrixArrayToCssMatrix, multiplyAffine2d } from '../../matrix';
+import { layout } from '../../utils';
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
 import { parseBackground } from '../../css/parser';
 import { LinearGradient } from './linear-gradient';
 import { parseCSSShadow } from './css-shadow';
+import { transformConverter } from './css-transform';
+import { ClipPathFunction } from './clip-path-function';
 function equalsCommon(a, b) {
     if (a == 'auto') {
-        // tslint:disable-line
-        return b == 'auto'; // tslint:disable-line
+        return b == 'auto';
+    }
+    if (b == 'auto') {
+        return false;
     }
     if (typeof a === 'number') {
-        if (b == 'auto') {
-            // tslint:disable-line
-            return false;
-        }
         if (typeof b === 'number') {
-            return a == b; // tslint:disable-line
+            return a == b;
         }
         if (!b) {
             return false;
         }
-        return b.unit == 'dip' && a == b.value; // tslint:disable-line
-    }
-    if (b == 'auto') {
-        // tslint:disable-line
-        return false;
+        return b.unit == 'dip' && a == b.value;
     }
     if (typeof b === 'number') {
-        return a ? a.unit == 'dip' && a.value == b : false; // tslint:disable-line
+        return a ? a.unit == 'dip' && a.value == b : false;
     }
     if (!a || !b) {
         return false;
     }
-    return a.value == b.value && a.unit == b.unit; // tslint:disable-line
+    return a.value == b.value && a.unit == b.unit;
 }
 function convertToStringCommon(length) {
     if (length == 'auto') {
-        // tslint:disable-line
         return 'auto';
     }
     if (typeof length === 'number') {
@@ -58,7 +50,6 @@ function convertToStringCommon(length) {
 }
 function toDevicePixelsCommon(length, auto = Number.NaN, parentAvailableWidth = Number.NaN) {
     if (length == 'auto') {
-        // tslint:disable-line
         return auto;
     }
     if (typeof length === 'number') {
@@ -81,7 +72,6 @@ export var PercentLength;
 (function (PercentLength) {
     function parse(fromValue) {
         if (fromValue == 'auto') {
-            // tslint:disable-line
             return 'auto';
         }
         if (typeof fromValue === 'string') {
@@ -127,13 +117,9 @@ export var PercentLength;
     PercentLength.toDevicePixels = toDevicePixelsCommon;
     PercentLength.convertToString = convertToStringCommon;
 })(PercentLength || (PercentLength = {}));
-export var Length;
-(function (Length) {
+export var FixedLength;
+(function (FixedLength) {
     function parse(fromValue) {
-        if (fromValue == 'auto') {
-            // tslint:disable-line
-            return 'auto';
-        }
         if (typeof fromValue === 'string') {
             let stringValue = fromValue.trim();
             if (stringValue.indexOf('px') !== -1) {
@@ -156,11 +142,188 @@ export var Length;
             return fromValue;
         }
     }
+    FixedLength.parse = parse;
+    FixedLength.equals = equalsCommon;
+    FixedLength.toDevicePixels = toDevicePixelsCommon;
+    FixedLength.convertToString = convertToStringCommon;
+})(FixedLength || (FixedLength = {}));
+export var Length;
+(function (Length) {
+    function parse(fromValue) {
+        if (fromValue == 'auto') {
+            return 'auto';
+        }
+        return FixedLength.parse(fromValue);
+    }
     Length.parse = parse;
     Length.equals = equalsCommon;
     Length.toDevicePixels = toDevicePixelsCommon;
     Length.convertToString = convertToStringCommon;
 })(Length || (Length = {}));
+function isNonNegativeFiniteNumber(value) {
+    return isFinite(value) && !isNaN(value) && value >= 0;
+}
+function parseClipPath(value) {
+    const functionStartIndex = value.indexOf('(');
+    if (functionStartIndex > -1) {
+        const functionName = value.substring(0, functionStartIndex).trim();
+        switch (functionName) {
+            case 'rect':
+            case 'circle':
+            case 'ellipse':
+            case 'polygon':
+            case 'inset': {
+                const rule = value.replace(`${functionName}(`, '').replace(')', '');
+                return new ClipPathFunction(functionName, rule);
+            }
+            default:
+                throw new Error(`Clip-path function ${functionName} is not valid.`);
+        }
+    }
+    else {
+        if (value === 'none') {
+            return null;
+        }
+        // Only shape functions and none are supported for now
+        throw new Error(`Clip-path value ${value} is not valid.`);
+    }
+}
+function parseShorthandPositioning(value) {
+    const arr = value.split(/[ ,]+/);
+    let top;
+    let right;
+    let bottom;
+    let left;
+    if (arr.length === 1) {
+        top = arr[0];
+        right = arr[0];
+        bottom = arr[0];
+        left = arr[0];
+    }
+    else if (arr.length === 2) {
+        top = arr[0];
+        bottom = arr[0];
+        right = arr[1];
+        left = arr[1];
+    }
+    else if (arr.length === 3) {
+        top = arr[0];
+        right = arr[1];
+        left = arr[1];
+        bottom = arr[2];
+    }
+    else if (arr.length === 4) {
+        top = arr[0];
+        right = arr[1];
+        bottom = arr[2];
+        left = arr[3];
+    }
+    else {
+        throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
+    }
+    return {
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+    };
+}
+function parseBorderColorPositioning(value) {
+    if (value.indexOf('rgb') === 0 || value.indexOf('hsl') === 0) {
+        return {
+            top: value,
+            right: value,
+            bottom: value,
+            left: value,
+        };
+    }
+    return parseShorthandPositioning(value);
+}
+function convertToBackgrounds(value) {
+    if (typeof value === 'string') {
+        const backgrounds = parseBackground(value).value;
+        let backgroundColor = unsetValue;
+        if (backgrounds.color) {
+            backgroundColor = backgrounds.color instanceof Color ? backgrounds.color : new Color(backgrounds.color);
+        }
+        let backgroundImage;
+        if (typeof backgrounds.image === 'object' && backgrounds.image) {
+            backgroundImage = LinearGradient.parse(backgrounds.image);
+        }
+        else {
+            backgroundImage = backgrounds.image || unsetValue;
+        }
+        const backgroundRepeat = backgrounds.repeat || unsetValue;
+        const backgroundPosition = backgrounds.position ? backgrounds.position.text : unsetValue;
+        return [
+            [backgroundColorProperty, backgroundColor],
+            [backgroundImageProperty, backgroundImage],
+            [backgroundRepeatProperty, backgroundRepeat],
+            [backgroundPositionProperty, backgroundPosition],
+        ];
+    }
+    else {
+        return [
+            [backgroundColorProperty, unsetValue],
+            [backgroundImageProperty, unsetValue],
+            [backgroundRepeatProperty, unsetValue],
+            [backgroundPositionProperty, unsetValue],
+        ];
+    }
+}
+function convertToMargins(value) {
+    if (typeof value === 'string' && value !== 'auto') {
+        const thickness = parseShorthandPositioning(value);
+        return [
+            [marginTopProperty, PercentLength.parse(thickness.top)],
+            [marginRightProperty, PercentLength.parse(thickness.right)],
+            [marginBottomProperty, PercentLength.parse(thickness.bottom)],
+            [marginLeftProperty, PercentLength.parse(thickness.left)],
+        ];
+    }
+    else {
+        return [
+            [marginTopProperty, value],
+            [marginRightProperty, value],
+            [marginBottomProperty, value],
+            [marginLeftProperty, value],
+        ];
+    }
+}
+function convertToPaddings(value) {
+    if (typeof value === 'string' && value !== 'auto') {
+        const thickness = parseShorthandPositioning(value);
+        return [
+            [paddingTopProperty, Length.parse(thickness.top)],
+            [paddingRightProperty, Length.parse(thickness.right)],
+            [paddingBottomProperty, Length.parse(thickness.bottom)],
+            [paddingLeftProperty, Length.parse(thickness.left)],
+        ];
+    }
+    else {
+        return [
+            [paddingTopProperty, value],
+            [paddingRightProperty, value],
+            [paddingBottomProperty, value],
+            [paddingLeftProperty, value],
+        ];
+    }
+}
+function convertToTransform(value) {
+    if (value === unsetValue) {
+        value = 'none';
+    }
+    const { translate, rotate, scale } = transformConverter(value);
+    return [
+        [translateXProperty, translate.x],
+        [translateYProperty, translate.y],
+        [scaleXProperty, scale.x],
+        [scaleYProperty, scale.y],
+        [rotateProperty, rotate.z],
+        [rotateXProperty, rotate.x],
+        [rotateYProperty, rotate.y],
+    ];
+}
 export const minWidthProperty = new CssProperty({
     name: 'minWidth',
     cssName: 'min-width',
@@ -381,89 +544,6 @@ export const verticalAlignmentProperty = new CssProperty({
     valueConverter: CoreTypes.VerticalAlignmentText.parse,
 });
 verticalAlignmentProperty.register(Style);
-function parseThickness(value) {
-    if (typeof value === 'string') {
-        const arr = value.split(/[ ,]+/);
-        let top;
-        let right;
-        let bottom;
-        let left;
-        if (arr.length === 1) {
-            top = arr[0];
-            right = arr[0];
-            bottom = arr[0];
-            left = arr[0];
-        }
-        else if (arr.length === 2) {
-            top = arr[0];
-            bottom = arr[0];
-            right = arr[1];
-            left = arr[1];
-        }
-        else if (arr.length === 3) {
-            top = arr[0];
-            right = arr[1];
-            left = arr[1];
-            bottom = arr[2];
-        }
-        else if (arr.length === 4) {
-            top = arr[0];
-            right = arr[1];
-            bottom = arr[2];
-            left = arr[3];
-        }
-        else {
-            throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
-        }
-        return {
-            top: top,
-            right: right,
-            bottom: bottom,
-            left: left,
-        };
-    }
-    else {
-        return value;
-    }
-}
-function convertToMargins(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseThickness(value);
-        return [
-            [marginTopProperty, PercentLength.parse(thickness.top)],
-            [marginRightProperty, PercentLength.parse(thickness.right)],
-            [marginBottomProperty, PercentLength.parse(thickness.bottom)],
-            [marginLeftProperty, PercentLength.parse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [marginTopProperty, value],
-            [marginRightProperty, value],
-            [marginBottomProperty, value],
-            [marginLeftProperty, value],
-        ];
-    }
-}
-function convertToPaddings(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseThickness(value);
-        return [
-            [paddingTopProperty, Length.parse(thickness.top)],
-            [paddingRightProperty, Length.parse(thickness.right)],
-            [paddingBottomProperty, Length.parse(thickness.bottom)],
-            [paddingLeftProperty, Length.parse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [paddingTopProperty, value],
-            [paddingRightProperty, value],
-            [paddingBottomProperty, value],
-            [paddingLeftProperty, value],
-        ];
-    }
-}
 export const rotateProperty = new CssAnimationProperty({
     name: 'rotate',
     cssName: 'rotate',
@@ -506,26 +586,20 @@ export const scaleYProperty = new CssAnimationProperty({
     valueConverter: parseFloat,
 });
 scaleYProperty.register(Style);
-function parseDIPs(value) {
-    if (value.indexOf('px') !== -1) {
-        return layout.toDeviceIndependentPixels(parseFloat(value.replace('px', '').trim()));
-    }
-    else {
-        return parseFloat(value.replace('dip', '').trim());
-    }
-}
 export const translateXProperty = new CssAnimationProperty({
     name: 'translateX',
     cssName: 'translateX',
     defaultValue: 0,
-    valueConverter: parseDIPs,
+    equalityComparer: FixedLength.equals,
+    valueConverter: FixedLength.parse,
 });
 translateXProperty.register(Style);
 export const translateYProperty = new CssAnimationProperty({
     name: 'translateY',
     cssName: 'translateY',
     defaultValue: 0,
-    valueConverter: parseDIPs,
+    equalityComparer: FixedLength.equals,
+    valueConverter: FixedLength.parse,
 });
 translateYProperty.register(Style);
 const transformProperty = new ShorthandProperty({
@@ -555,125 +629,6 @@ const transformProperty = new ShorthandProperty({
     converter: convertToTransform,
 });
 transformProperty.register(Style);
-const IDENTITY_TRANSFORMATION = {
-    translate: { x: 0, y: 0 },
-    rotate: { x: 0, y: 0, z: 0 },
-    scale: { x: 1, y: 1 },
-};
-const TRANSFORM_SPLITTER = new RegExp(/\s*(.+?)\((.*?)\)/g);
-const TRANSFORMATIONS = Object.freeze(['rotate', 'rotateX', 'rotateY', 'rotate3d', 'translate', 'translate3d', 'translateX', 'translateY', 'scale', 'scale3d', 'scaleX', 'scaleY']);
-const STYLE_TRANSFORMATION_MAP = Object.freeze({
-    scale: (value) => ({ property: 'scale', value }),
-    scale3d: (value) => ({ property: 'scale', value }),
-    scaleX: ({ x }) => ({
-        property: 'scale',
-        value: { x, y: IDENTITY_TRANSFORMATION.scale.y },
-    }),
-    scaleY: ({ y }) => ({
-        property: 'scale',
-        value: { y, x: IDENTITY_TRANSFORMATION.scale.x },
-    }),
-    translate: (value) => ({ property: 'translate', value }),
-    translate3d: (value) => ({ property: 'translate', value }),
-    translateX: ({ x }) => ({
-        property: 'translate',
-        value: { x, y: IDENTITY_TRANSFORMATION.translate.y },
-    }),
-    translateY: ({ y }) => ({
-        property: 'translate',
-        value: { y, x: IDENTITY_TRANSFORMATION.translate.x },
-    }),
-    rotate3d: (value) => ({ property: 'rotate', value }),
-    rotateX: (x) => ({
-        property: 'rotate',
-        value: {
-            x,
-            y: IDENTITY_TRANSFORMATION.rotate.y,
-            z: IDENTITY_TRANSFORMATION.rotate.z,
-        },
-    }),
-    rotateY: (y) => ({
-        property: 'rotate',
-        value: {
-            x: IDENTITY_TRANSFORMATION.rotate.x,
-            y,
-            z: IDENTITY_TRANSFORMATION.rotate.z,
-        },
-    }),
-    rotate: (z) => ({
-        property: 'rotate',
-        value: {
-            x: IDENTITY_TRANSFORMATION.rotate.x,
-            y: IDENTITY_TRANSFORMATION.rotate.y,
-            z,
-        },
-    }),
-});
-function convertToTransform(value) {
-    if (value === unsetValue) {
-        value = 'none';
-    }
-    const { translate, rotate, scale } = transformConverter(value);
-    return [
-        [translateXProperty, translate.x],
-        [translateYProperty, translate.y],
-        [scaleXProperty, scale.x],
-        [scaleYProperty, scale.y],
-        [rotateProperty, rotate.z],
-        [rotateXProperty, rotate.x],
-        [rotateYProperty, rotate.y],
-    ];
-}
-export function transformConverter(text) {
-    const transformations = parseTransformString(text);
-    if (text === 'none' || text === '' || !transformations.length) {
-        return IDENTITY_TRANSFORMATION;
-    }
-    const usedTransforms = transformations.map((t) => t.property);
-    if (!hasDuplicates(usedTransforms)) {
-        const fullTransformations = { ...IDENTITY_TRANSFORMATION };
-        transformations.forEach((transform) => {
-            fullTransformations[transform.property] = transform.value;
-        });
-        return fullTransformations;
-    }
-    const affineMatrix = transformations.map(getTransformMatrix).reduce(multiplyAffine2d);
-    const cssMatrix = matrixArrayToCssMatrix(affineMatrix);
-    return decompose2DTransformMatrix(cssMatrix);
-}
-// using general regex and manually checking the matched
-// properties is faster than using more specific regex
-// https://jsperf.com/cssparse
-function parseTransformString(text) {
-    const matches = [];
-    let match;
-    while ((match = TRANSFORM_SPLITTER.exec(text)) !== null) {
-        const property = match[1];
-        const value = convertTransformValue(property, match[2]);
-        if (TRANSFORMATIONS.indexOf(property) !== -1) {
-            matches.push(normalizeTransformation({ property, value }));
-        }
-    }
-    return matches;
-}
-function normalizeTransformation({ property, value }) {
-    return STYLE_TRANSFORMATION_MAP[property](value);
-}
-function convertTransformValue(property, stringValue) {
-    // eslint-disable-next-line prefer-const
-    let [x, y, z] = stringValue.split(',').map(parseFloat);
-    if (property === 'translate') {
-        y ?? (y = IDENTITY_TRANSFORMATION.translate.y);
-    }
-    else {
-        y ?? (y = x);
-        z ?? (z = y);
-    }
-    if (property === 'rotate' || property === 'rotateX' || property === 'rotateY') {
-        return stringValue.slice(-3) === 'rad' ? radiansToDegrees(x) : x;
-    }
-    return { x, y, z };
-}
 // Background properties.
 const backgroundProperty = new ShorthandProperty({
     name: 'background',
@@ -690,7 +645,6 @@ export const backgroundInternalProperty = new CssProperty({
     defaultValue: Background.default,
 });
 backgroundInternalProperty.register(Style);
-// const pattern: RegExp = /url\(('|")(.*?)\1\)/;
 export const backgroundImageProperty = new CssProperty({
     name: 'backgroundImage',
     cssName: 'background-image',
@@ -751,89 +705,6 @@ export const backgroundPositionProperty = new CssProperty({
     },
 });
 backgroundPositionProperty.register(Style);
-function convertToBackgrounds(value) {
-    if (typeof value === 'string') {
-        const backgrounds = parseBackground(value).value;
-        let backgroundColor = unsetValue;
-        if (backgrounds.color) {
-            backgroundColor = backgrounds.color instanceof Color ? backgrounds.color : new Color(backgrounds.color);
-        }
-        let backgroundImage;
-        if (typeof backgrounds.image === 'object' && backgrounds.image) {
-            backgroundImage = LinearGradient.parse(backgrounds.image);
-        }
-        else {
-            backgroundImage = backgrounds.image || unsetValue;
-        }
-        const backgroundRepeat = backgrounds.repeat || unsetValue;
-        const backgroundPosition = backgrounds.position ? backgrounds.position.text : unsetValue;
-        return [
-            [backgroundColorProperty, backgroundColor],
-            [backgroundImageProperty, backgroundImage],
-            [backgroundRepeatProperty, backgroundRepeat],
-            [backgroundPositionProperty, backgroundPosition],
-        ];
-    }
-    else {
-        return [
-            [backgroundColorProperty, unsetValue],
-            [backgroundImageProperty, unsetValue],
-            [backgroundRepeatProperty, unsetValue],
-            [backgroundPositionProperty, unsetValue],
-        ];
-    }
-}
-function parseBorderColor(value) {
-    const result = {
-        top: undefined,
-        right: undefined,
-        bottom: undefined,
-        left: undefined,
-    };
-    if (value.indexOf('rgb') === 0 || value.indexOf('hsl') === 0) {
-        result.top = result.right = result.bottom = result.left = new Color(value);
-        return result;
-    }
-    const arr = value.split(/[ ,]+/);
-    if (arr.length === 1) {
-        const arr0 = new Color(arr[0]);
-        result.top = arr0;
-        result.right = arr0;
-        result.bottom = arr0;
-        result.left = arr0;
-    }
-    else if (arr.length === 2) {
-        const arr0 = new Color(arr[0]);
-        const arr1 = new Color(arr[1]);
-        result.top = arr0;
-        result.right = arr1;
-        result.bottom = arr0;
-        result.left = arr1;
-    }
-    else if (arr.length === 3) {
-        const arr0 = new Color(arr[0]);
-        const arr1 = new Color(arr[1]);
-        const arr2 = new Color(arr[2]);
-        result.top = arr0;
-        result.right = arr1;
-        result.bottom = arr2;
-        result.left = arr1;
-    }
-    else if (arr.length === 4) {
-        const arr0 = new Color(arr[0]);
-        const arr1 = new Color(arr[1]);
-        const arr2 = new Color(arr[2]);
-        const arr3 = new Color(arr[3]);
-        result.top = arr0;
-        result.right = arr1;
-        result.bottom = arr2;
-        result.left = arr3;
-    }
-    else {
-        throw new Error(`Expected 1, 2, 3 or 4 parameters. Actual: ${value}`);
-    }
-    return result;
-}
 // Border Color properties.
 const borderColorProperty = new ShorthandProperty({
     name: 'borderColor',
@@ -848,12 +719,12 @@ const borderColorProperty = new ShorthandProperty({
     },
     converter: function (value) {
         if (typeof value === 'string') {
-            const fourColors = parseBorderColor(value);
+            const colors = parseBorderColorPositioning(value);
             return [
-                [borderTopColorProperty, fourColors.top],
-                [borderRightColorProperty, fourColors.right],
-                [borderBottomColorProperty, fourColors.bottom],
-                [borderLeftColorProperty, fourColors.left],
+                [borderTopColorProperty, new Color(colors.top)],
+                [borderRightColorProperty, new Color(colors.right)],
+                [borderBottomColorProperty, new Color(colors.bottom)],
+                [borderLeftColorProperty, new Color(colors.left)],
             ];
         }
         else {
@@ -921,12 +792,12 @@ const borderWidthProperty = new ShorthandProperty({
     },
     converter: function (value) {
         if (typeof value === 'string' && value !== 'auto') {
-            const borderWidths = parseThickness(value);
+            const borderWidths = parseShorthandPositioning(value);
             return [
-                [borderTopWidthProperty, borderWidths.top],
-                [borderRightWidthProperty, borderWidths.right],
-                [borderBottomWidthProperty, borderWidths.bottom],
-                [borderLeftWidthProperty, borderWidths.left],
+                [borderTopWidthProperty, Length.parse(borderWidths.top)],
+                [borderRightWidthProperty, Length.parse(borderWidths.right)],
+                [borderBottomWidthProperty, Length.parse(borderWidths.bottom)],
+                [borderLeftWidthProperty, Length.parse(borderWidths.left)],
             ];
         }
         else {
@@ -1044,12 +915,12 @@ const borderRadiusProperty = new ShorthandProperty({
     },
     converter: function (value) {
         if (typeof value === 'string') {
-            const borderRadius = parseThickness(value);
+            const borderRadius = parseShorthandPositioning(value);
             return [
-                [borderTopLeftRadiusProperty, borderRadius.top],
-                [borderTopRightRadiusProperty, borderRadius.right],
-                [borderBottomRightRadiusProperty, borderRadius.bottom],
-                [borderBottomLeftRadiusProperty, borderRadius.left],
+                [borderTopLeftRadiusProperty, Length.parse(borderRadius.top)],
+                [borderTopRightRadiusProperty, Length.parse(borderRadius.right)],
+                [borderBottomRightRadiusProperty, Length.parse(borderRadius.bottom)],
+                [borderBottomLeftRadiusProperty, Length.parse(borderRadius.left)],
             ];
         }
         else {
@@ -1147,53 +1018,49 @@ const boxShadowProperty = new CssProperty({
     },
 });
 boxShadowProperty.register(Style);
-function isNonNegativeFiniteNumber(value) {
-    return isFinite(value) && !isNaN(value) && value >= 0;
-}
-const supportedPaths = ['rect', 'circle', 'ellipse', 'polygon', 'inset'];
-function isClipPathValid(value) {
-    if (!value) {
-        return true;
-    }
-    const functionName = value.substring(0, value.indexOf('(')).trim();
-    return supportedPaths.indexOf(functionName) !== -1;
-}
 export const clipPathProperty = new CssProperty({
     name: 'clipPath',
     cssName: 'clip-path',
     valueChanged: (target, oldValue, newValue) => {
-        if (!isClipPathValid(newValue)) {
-            throw new Error('clip-path is not valid.');
-        }
         target.backgroundInternal = target.backgroundInternal.withClipPath(newValue);
     },
+    equalityComparer: (value1, value2) => {
+        if (value1 instanceof ClipPathFunction && value2 instanceof ClipPathFunction) {
+            return ClipPathFunction.equals(value1, value2);
+        }
+        return value1 === value2;
+    },
+    valueConverter(value) {
+        if (typeof value === 'string') {
+            return parseClipPath(value);
+        }
+        return value;
+    },
 });
 clipPathProperty.register(Style);
-function isFloatValueConverter(value) {
-    const newValue = parseFloat(value);
-    if (isNaN(newValue)) {
-        throw new Error(`Invalid value: ${newValue}`);
-    }
-    return newValue;
-}
 export const zIndexProperty = new CssProperty({
     name: 'zIndex',
     cssName: 'z-index',
-    valueConverter: isFloatValueConverter,
+    valueConverter: (value) => {
+        const newValue = parseFloat(value);
+        if (isNaN(newValue)) {
+            throw new Error(`Invalid value: ${newValue}`);
+        }
+        return newValue;
+    },
 });
 zIndexProperty.register(Style);
-function opacityConverter(value) {
-    const newValue = parseFloat(value);
-    if (!isNaN(newValue) && 0 <= newValue && newValue <= 1) {
-        return newValue;
-    }
-    throw new Error(`Opacity should be between [0, 1]. Value: ${newValue}`);
-}
 export const opacityProperty = new CssAnimationProperty({
     name: 'opacity',
     cssName: 'opacity',
     defaultValue: 1,
-    valueConverter: opacityConverter,
+    valueConverter: (value) => {
+        const newValue = parseFloat(value);
+        if (!isNonNegativeFiniteNumber(newValue) || newValue > 1) {
+            throw new Error(`Opacity should be between [0, 1]. Value: ${newValue}`);
+        }
+        return newValue;
+    },
 });
 opacityProperty.register(Style);
 export const colorProperty = new InheritedCssProperty({