Revert the translateX/Y to be in dip

tests/app/ui/styling/style-properties-tests.ts

@@ -48,15 +48,15 @@ export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Sty
 }
 
 export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5", true);
+    test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5, "5", true);
 }
 
 export function test_setting_borderWidth_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5dip", true);
+    test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5, "5dip", true);
 }
 
 export function test_setting_borderWidth_multiple_values_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
+    test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1 2 3 4", "1 2dip 3 4dip");
 }
 
 export function test_setting_borderColor_property_from_CSS_is_applied_to_Style() {
@@ -72,52 +72,51 @@ export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Sty
 }
 
 export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20", true);
+    test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20, "20", true);
 }
 
 export function test_setting_borderRadius_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20dip", true);
+    test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20, "20dip", true);
 }
 
 export function test_setting_borderRadius_multiple_values_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
+    test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1 2 3 4", "1 2dip 3 4dip");
 }
 
 export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() {
     test_property_from_CSS_is_applied_to_style("textAlignment", "text-align", "center");
 }
 
-const testLength: PercentLength = { value: 200, unit: "dip" };
 export function test_setting_width_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200", true);
+    test_property_from_CSS_is_applied_to_style("width", "width", 200, "200", true);
 }
 
 export function test_setting_width_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200dip", true);
+    test_property_from_CSS_is_applied_to_style("width", "width", 200, "200dip", true);
 }
 
 export function test_setting_height_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200", true);
+    test_property_from_CSS_is_applied_to_style("height", "height", 200, "200", true);
 }
 
 export function test_setting_height_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200dip", true);
+    test_property_from_CSS_is_applied_to_style("height", "height", 200, "200dip", true);
 }
 
 export function test_setting_minWidth_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200", true);
+    test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200, "200", true);
 }
 
 export function test_setting_minWidth_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200dip", true);
+    test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200, "200dip", true);
 }
 
 export function test_setting_minHeight_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200", true);
+    test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200, "200", true);
 }
 
 export function test_setting_minHeight_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200dip", true);
+    test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200, "200dip", true);
 }
 
 export function test_setting_verticalAlignment_property_from_CSS_is_applied_to_Style() {
@@ -137,11 +136,11 @@ export function test_setting_visibility_property_from_CSS_is_applied_to_Style()
 }
 
 export function test_setting_margin_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10", true);
+    test_property_from_CSS_is_applied_to_style("margin", "margin", 10, "10", true);
 }
 
 export function test_setting_margin_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10dip", true);
+    test_property_from_CSS_is_applied_to_style("margin", "margin", 10, "10dip", true);
 }
 
 export function test_setting_margin_percent_property_from_CSS_is_applied_to_Style() {
@@ -149,19 +148,19 @@ export function test_setting_margin_percent_property_from_CSS_is_applied_to_Styl
 }
 
 export function test_setting_margin_multiple_values_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("margin", "margin", "1dip 2% 3dip 4dip", "1 2% 3 4dip");
+    test_property_from_CSS_is_applied_to_style("margin", "margin", "1 2% 3 4", "1 2% 3 4dip");
 }
 
 export function test_setting_padding_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10", true);
+    test_property_from_CSS_is_applied_to_style("padding", "padding", 10, "10", true);
 }
 
 export function test_setting_padding_dip_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10dip", true);
+    test_property_from_CSS_is_applied_to_style("padding", "padding", 10, "10dip", true);
 }
 
 export function test_setting_padding_multiple_values_property_from_CSS_is_applied_to_Style() {
-    test_property_from_CSS_is_applied_to_style("padding", "padding", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
+    test_property_from_CSS_is_applied_to_style("padding", "padding", "1 2 3 4", "1 2dip 3 4dip");
 }
 
 export function test_setting_opacity_property_from_CSS_is_applied_to_Style() {

tests/app/ui/view/view-tests-common.ts

@@ -714,7 +714,7 @@ export function test_binding_style_minHeight() {
 };
 
 export function test_binding_style_margin() {
-    property_binding_style_test("margin", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip");
+    property_binding_style_test("margin", "1 2 3 4", "2 3 2 3");
 };
 
 export function test_binding_style_marginLeft() {
@@ -734,7 +734,7 @@ export function test_binding_style_marginBottom() {
 };
 
 export function test_binding_style_padding() {
-    property_binding_style_test("padding", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip");
+    property_binding_style_test("padding", "1 2 3 4", "2 3 2 3");
 };
 
 export function test_binding_style_paddingLeft() {

tns-core-modules/ui/animation/animation.ios.ts

@@ -1,9 +1,9 @@
 import { AnimationDefinition } from ".";
-import { View, layout } from "../core/view";
+import { View } from "../core/view";
 
 import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, traceWrite, traceEnabled, traceCategories } from "./animation-common";
 import {
-    Length, opacityProperty, backgroundColorProperty, rotateProperty,
+    opacityProperty, backgroundColorProperty, rotateProperty,
     translateXProperty, translateYProperty, scaleXProperty, scaleYProperty
 } from "../styling/style-properties";
 
@@ -590,8 +590,8 @@ export class Animation extends AnimationBase {
 export function _getTransformMismatchErrorMessage(view: View): string {
     // Order is important: translate, rotate, scale
     let result: CGAffineTransform = CGAffineTransformIdentity;
-    const tx = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.translateX || 0, 0));
+    const tx = view.translateX;
-    const ty = layout.toDeviceIndependentPixels(Length.toDevicePixels(view.translateY || 0, 0));
+    const ty = view.translateY;
     result = CGAffineTransformTranslate(result, tx, ty);
     result = CGAffineTransformRotate(result, (view.rotate || 0) * Math.PI / 180);
     result = CGAffineTransformScale(result, view.scaleX || 1, view.scaleY || 1);

tns-core-modules/ui/core/view/view-common.ts

@@ -1,5 +1,5 @@
 // Definitions.
-import { View as ViewDefinition, Point, Size, Color } from ".";
+import { View as ViewDefinition, Point, Size, Color, dip } from ".";
 import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
 
 // Types.
@@ -366,17 +366,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.rotate = value;
     }
 
-    get translateX(): Length {
+    get translateX(): dip {
         return this.style.translateX;
     }
-    set translateX(value: Length) {
+    set translateX(value: dip) {
         this.style.translateX = value;
     }
 
-    get translateY(): Length {
+    get translateY(): dip {
         return this.style.translateY;
     }
-    set translateY(value: Length) {
+    set translateY(value: dip) {
         this.style.translateY = value;
     }
 

tns-core-modules/ui/core/view/view.android.ts

@@ -1,5 +1,5 @@
 // Definitions.
-import { Point, CustomLayoutView as CustomLayoutViewDefinition } from ".";
+import { Point, CustomLayoutView as CustomLayoutViewDefinition, dip } from ".";
 import { GestureTypes, GestureEventData } from "../../gestures";
 
 // Types.
@@ -415,18 +415,18 @@ export class View extends ViewCommon {
         org.nativescript.widgets.ViewHelper.setScaleY(this.nativeView, float(value));
     }
 
-    [translateXProperty.getDefault](): Length | number {
+    [translateXProperty.getDefault](): dip {
-        return org.nativescript.widgets.ViewHelper.getTranslateX(this.nativeView);
+        return layout.toDeviceIndependentPixels(org.nativescript.widgets.ViewHelper.getTranslateX(this.nativeView));
     }
-    [translateXProperty.setNative](value: Length) {
+    [translateXProperty.setNative](value: dip) {
-        org.nativescript.widgets.ViewHelper.setTranslateX(this.nativeView, Length.toDevicePixels(value, 0));
+        org.nativescript.widgets.ViewHelper.setTranslateX(this.nativeView, layout.toDevicePixels(value));
     }
 
-    [translateYProperty.getDefault](): Length | number {
+    [translateYProperty.getDefault](): dip {
-        return org.nativescript.widgets.ViewHelper.getTranslateY(this.nativeView);
+        return layout.toDeviceIndependentPixels(org.nativescript.widgets.ViewHelper.getTranslateY(this.nativeView));
     }
-    [translateYProperty.setNative](value: Length) {
+    [translateYProperty.setNative](value: dip) {
-        org.nativescript.widgets.ViewHelper.setTranslateY(this.nativeView, Length.toDevicePixels(value, 0));
+        org.nativescript.widgets.ViewHelper.setTranslateY(this.nativeView, layout.toDevicePixels(value));
     }
 
     [zIndexProperty.getDefault](): number {

tns-core-modules/ui/core/view/view.d.ts

@@ -13,6 +13,24 @@ export * from "../../styling/style-properties";
 
 export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
 
+/**
+ * Denotes a length number that is in device independent pixels units.
+ */
+export type dip = number;
+
+/**
+ * Denotes a length number that is in phisical device pixels.
+ */
+export type px = number;
+
+/**
+ * Denotes a normalized percent number.
+ * 0% is represented as 0
+ * 50% is represented as 0.5
+ * 100% is represented as 1
+ */
+export type percent = number;
+
 /**
  * The Point interface describes a two dimensional location. 
  * It has two properties x and y, representing the x and y coordinate of the location. 
@@ -228,14 +246,14 @@ export abstract class View extends ViewBase implements ApplyXmlAttributes {
     rotate: number;
 
     /**
-     * Gets or sets the translateX affine transform of the view.
+     * Gets or sets the translateX affine transform of the view in device independent pixels.
      */
-    translateX: Length;
+    translateX: dip;
 
     /**
-     * Gets or sets the translateY affine transform of the view.
+     * Gets or sets the translateY affine transform of the view in device independent pixels.
      */
-    translateY: Length;
+    translateY: dip;
 
     /**
      * Gets or sets the scaleX affine transform of the view.

tns-core-modules/ui/core/view/view.ios.ts

@@ -1,5 +1,5 @@
 // Definitions.
-import { Point, View as ViewDefinition } from ".";
+import { Point, View as ViewDefinition, dip } from ".";
 
 import { ios, Background } from "../../styling/background";
 import {
@@ -8,7 +8,7 @@ import {
 } from "./view-common";
 
 import {
-    Visibility, Length,
+    Visibility,
     visibilityProperty, opacityProperty,
     rotateProperty, scaleXProperty, scaleYProperty,
     translateXProperty, translateYProperty, zIndexProperty,
@@ -232,13 +232,11 @@ export class View extends ViewCommon {
     }
 
     public updateNativeTransform() {
-        let translateX = layout.toDeviceIndependentPixels(Length.toDevicePixels(this.translateX || 0, 0));
-        let translateY = layout.toDeviceIndependentPixels(Length.toDevicePixels(this.translateY || 0, 0));
         let scaleX = this.scaleX || 1e-6;
         let scaleY = this.scaleY || 1e-6;
         let rotate = this.rotate || 0;
         let newTransform = CGAffineTransformIdentity;
-        newTransform = CGAffineTransformTranslate(newTransform, translateX, translateY);
+        newTransform = CGAffineTransformTranslate(newTransform, this.translateX, this.translateY);
         newTransform = CGAffineTransformRotate(newTransform, rotate * Math.PI / 180);
         newTransform = CGAffineTransformScale(newTransform, scaleX, scaleY);
         if (!CGAffineTransformEqualToTransform(this.nativeView.transform, newTransform)) {
@@ -370,17 +368,17 @@ export class View extends ViewCommon {
         this.updateNativeTransform();
     }
 
-    [translateXProperty.getDefault](): Length | number {
+    [translateXProperty.getDefault](): dip {
         return 0;
     }
-    [translateXProperty.setNative](value: Length) {
+    [translateXProperty.setNative](value: dip) {
         this.updateNativeTransform();
     }
 
-    [translateYProperty.getDefault](): Length | number {
+    [translateYProperty.getDefault](): dip {
         return 0;
     }
-    [translateYProperty.setNative](value: Length) {
+    [translateYProperty.setNative](value: dip) {
         this.updateNativeTransform();
     }
 

tns-core-modules/ui/styling/style-properties.d.ts

@@ -6,11 +6,14 @@ import { Color } from "../../color";
 import { Style, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty } from "../core/properties";
 import { Font, FontStyle, FontWeight } from "./font";
 import { Background } from "./background";
+import { dip, px, percent } from "../core/view";
 
-export type Length = "auto" | number | {
+export type LengthDipUnit = { readonly unit: "dip", readonly value: dip };
-    readonly unit: "dip" | "px";
+export type LengthPxUnit = { readonly unit: "px", readonly value: px };
-    readonly value: number;
+export type LengthPercentUnit = { readonly unit: "%", readonly value: percent };
-}
+
+export type Length = "auto" | dip | LengthDipUnit | LengthPxUnit;
+export type PercentLength = "auto" | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit;
 
 export namespace Length {
     export function parse(text: string): Length;
@@ -18,19 +21,10 @@ export namespace Length {
     /**
      * Converts Length unit to device pixels.
      * @param length The Length to convert.
-     * @param auto Value to use for conversion of "auto".
+     * @param auto Value to use for conversion of "auto". By default is Math.NaN.
      */
-    export function toDevicePixels(length: Length, auto: number): number;
+    export function toDevicePixels(length: Length, auto?: number): number;
     export function convertToString(length: Length): string;
-
-}
-
-export type PercentLength = "auto" | number | {
-    readonly unit: "%" | "dip" | "px";
-    /**
-     * Length value. When unit is "%" the value is normalized (ex. for 5% the value is 0.05)
-     */
-    readonly value: number;
 }
 
 export namespace PercentLength {
@@ -39,10 +33,10 @@ export namespace PercentLength {
     /**
      * Converts PercentLength unit to device pixels.
      * @param length The PercentLength to convert.
-     * @param auto Value to use for conversion of "auto".
+     * @param auto Value to use for conversion of "auto". By default is Math.NaN.
-     * @param parentAvailableWidth Value to use as base when converting percent unit.
+     * @param parentAvailableWidth Value to use as base when converting percent unit. By default is Math.NaN.
      */
-    export function toDevicePixels(length: PercentLength, auto: number, parentAvailableWidth: number): number;
+    export function toDevicePixels(length: PercentLength, auto?: number, parentAvailableWidth?: px): number;
     export function convertToString(length: PercentLength): string;
 }
 
@@ -51,8 +45,8 @@ export const zeroLength: Length;
 export const rotateProperty: CssAnimationProperty<Style, number>;
 export const scaleXProperty: CssAnimationProperty<Style, number>;
 export const scaleYProperty: CssAnimationProperty<Style, number>;
-export const translateXProperty: CssAnimationProperty<Style, Length>;
+export const translateXProperty: CssAnimationProperty<Style, dip>;
-export const translateYProperty: CssAnimationProperty<Style, Length>;
+export const translateYProperty: CssAnimationProperty<Style, dip>;
 
 export const clipPathProperty: CssProperty<Style, string>;
 export const colorProperty: InheritedCssProperty<Style, Color>;
@@ -85,10 +79,10 @@ export const zIndexProperty: CssProperty<Style, number>;
 export const visibilityProperty: CssProperty<Style, Visibility>;
 export const opacityProperty: CssAnimationProperty<Style, number>;
 
-export const minWidthProperty: CssProperty<Style, Length>;
+export const minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
-export const minHeightProperty: CssProperty<Style, Length>;
+export const minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
-export const widthProperty: CssProperty<Style, Length>;
+export const widthProperty: CssProperty<Style, PercentLength>;
-export const heightProperty: CssProperty<Style, Length>;
+export const heightProperty: CssProperty<Style, PercentLength>;
 export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
 export const marginLeftProperty: CssProperty<Style, PercentLength>;
 export const marginRightProperty: CssProperty<Style, PercentLength>;

tns-core-modules/ui/styling/style-properties.ts

@@ -1,3 +1,6 @@
+// Types
+import { dip, px, percent } from "../core/view";
+
 import { Color } from "../../color";
 import { Font, parseFont, FontStyle, FontWeight } from "./font";
 import { layout } from "../../utils/utils";
@@ -8,6 +11,13 @@ import { Style } from "./style";
 
 import { unsetValue, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty, makeValidator, makeParser } from "../core/properties";
 
+export type LengthDipUnit = { readonly unit: "dip", readonly value: dip };
+export type LengthPxUnit = { readonly unit: "px", readonly value: px };
+export type LengthPercentUnit = { readonly unit: "%", readonly value: percent };
+
+export type Length = "auto" | dip | LengthDipUnit | LengthPxUnit;
+export type PercentLength = "auto" | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit;
+
 function equalsCommon(a: Length, b: Length): boolean;
 function equalsCommon(a: PercentLength, b: PercentLength): boolean;
 function equalsCommon(a: PercentLength, b: PercentLength): boolean {
@@ -49,9 +59,7 @@ function convertToStringCommon(length: Length | PercentLength): string {
     return val + length.unit;
 }
 
-function toDevicePixelsCommon(length: Length, auto: number): number;
+function toDevicePixelsCommon(length: PercentLength, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number {
-function toDevicePixelsCommon(length: PercentLength, auto: number, parentSize: number): number;
-function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailableWidth?: number): number {
     if (length == "auto") { // tslint:disable-line
         return auto;
     }
@@ -69,50 +77,43 @@ function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailab
     }
 }
 
-export type PercentLength = "auto" | number | {
-    readonly unit: "%" | "dip" | "px";
-    readonly value: number;
-}
-
 export namespace PercentLength {
-    export function parse(value: string | Length): PercentLength {
+    export function parse(fromValue: string | Length): PercentLength {
-        if (value == "auto") { // tslint:disable-line
+        if (fromValue == "auto") { // tslint:disable-line
             return "auto";
         }
-        if (typeof value === "string") {
+        if (typeof fromValue === "string") {
-            let type: "%" | "dip" | "px";
+            let stringValue = fromValue.trim();
-            let numberValue = 0;
-            let stringValue = value.trim();
             let percentIndex = stringValue.indexOf("%");
             if (percentIndex !== -1) {
-                type = "%";
+                let value: percent;
                 // if only % or % is not last we treat it as invalid value.
                 if (percentIndex !== (stringValue.length - 1) || percentIndex === 0) {
-                    numberValue = Number.NaN;
+                    value = Number.NaN;
                 } else {
-                    numberValue = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
+                    value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
                 }
+
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${fromValue}`);
+                }
+                return { unit: "%", value }
+            } else if (stringValue.indexOf("px") !== -1) {
+                stringValue = stringValue.replace("px", "").trim();
+                let value: px = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${fromValue}`);
+                }
+                return { unit: "px", value };
             } else {
-                if (stringValue.indexOf("px") !== -1) {
+                let value: dip = parseFloat(stringValue);
-                    type = "px";
+                if (isNaN(value) || !isFinite(value)) {
-                    stringValue = stringValue.replace("px", "").trim();
+                    throw new Error(`Invalid value: ${fromValue}`);
-                } else {
-                    type = "dip";
                 }
-
+                return value;
-                numberValue = parseFloat(stringValue);
             }
-
-            if (isNaN(numberValue) || !isFinite(numberValue)) {
-                throw new Error(`Invalid value: ${value}`);
-            }
-
-            return {
-                value: numberValue,
-                unit: type
-            };
         } else {
-            return value;
+            return fromValue;
         }
     }
 
@@ -121,42 +122,33 @@ export namespace PercentLength {
     export const convertToString: { (length: PercentLength): string } = convertToStringCommon;
 }
 
-export type Length = "auto" | number | {
-    readonly unit: "dip" | "px";
-    readonly value: number;
-};
-
 export namespace Length {
-    export function parse(value: string | Length): Length {
+    export function parse(fromValue: string | Length): Length {
-        if (value == "auto") { // tslint:disable-line
+        if (fromValue == "auto") { // tslint:disable-line
             return "auto";
-        } else if (typeof value === "string") {
+        }
-            let type: "dip" | "px";
+        if (typeof fromValue === "string") {
-            let numberValue = 0;
+            let stringValue = fromValue.trim();
-            let stringValue = value.trim();
             if (stringValue.indexOf("px") !== -1) {
-                type = "px";
                 stringValue = stringValue.replace("px", "").trim();
+                let value: px = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${stringValue}`);
+                }
+                return { unit: "px", value };
             } else {
-                type = "dip";
+                let value: dip = parseFloat(stringValue);
+                if (isNaN(value) || !isFinite(value)) {
+                    throw new Error(`Invalid value: ${stringValue}`);
+                }
+                return value;
             }
-
-            numberValue = parseFloat(stringValue);
-
-            if (isNaN(numberValue) || !isFinite(numberValue)) {
-                throw new Error(`Invalid value: ${value}`);
-            }
-
-            return {
-                value: numberValue,
-                unit: type
-            };
         } else {
-            return value;
+            return fromValue;
         }
     }
     export const equals: { (a: Length, b: Length): boolean } = equalsCommon;
-    export const toDevicePixels: { (length: Length, auto: number): number } = toDevicePixelsCommon;
+    export const toDevicePixels: { (length: Length, auto?: number): number } = toDevicePixelsCommon;
     export const convertToString: { (length: Length): string } = convertToStringCommon;
 }
 
@@ -387,10 +379,18 @@ scaleXProperty.register(Style);
 export const scaleYProperty = new CssAnimationProperty<Style, number>({ name: "scaleY", cssName: "scaleY", defaultValue: 1, valueConverter: parseFloat });
 scaleYProperty.register(Style);
 
-export const translateXProperty = new CssAnimationProperty<Style, Length>({ name: "translateX", cssName: "translateX", defaultValue: 0, valueConverter: Length.parse, equalityComparer: Length.equals });
+function parseDIPs(value: string): dip {
+    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<Style, dip>({ name: "translateX", cssName: "translateX", defaultValue: 0, valueConverter: parseDIPs });
 translateXProperty.register(Style);
 
-export const translateYProperty = new CssAnimationProperty<Style, Length>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: Length.parse, equalityComparer: Length.equals });
+export const translateYProperty = new CssAnimationProperty<Style, dip>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: parseDIPs });
 translateYProperty.register(Style);
 
 const transformProperty = new ShorthandProperty<Style, string>({

tns-core-modules/ui/styling/style/style.d.ts

@@ -2,7 +2,7 @@
  * @module "ui/styling/style"
  */ /** */
 
-import { Length, PercentLength, ViewBase, Observable, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment} from "../../core/view";
+import { Length, PercentLength, ViewBase, Observable, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment, dip } from "../../core/view";
 import { Color } from "../../../color";
 import { Background } from "../background";
 import { Font, FontStyle, FontWeight } from "../font";
@@ -55,8 +55,8 @@ export class Style extends Observable {
     public rotate: number;
     public scaleX: number;
     public scaleY: number;
-    public translateX: Length;
+    public translateX: dip;
-    public translateY: Length;
+    public translateY: dip;
 
     public clipPath: string;
     public color: Color;

tns-core-modules/ui/styling/style/style.ts

@@ -2,7 +2,7 @@ import { Style as StyleDefinition } from ".";
 import { Color } from "../../../color";
 import { Font, FontStyle, FontWeight } from "../font";
 import { Background } from "../background";
-import { Length, PercentLength, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment } from "../../core/view";
+import { Length, PercentLength, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment, dip } from "../../core/view";
 import { Observable } from "../../../data/observable";
 
 import {
@@ -23,8 +23,8 @@ export class Style extends Observable implements StyleDefinition {
     public rotate: number;
     public scaleX: number;
     public scaleY: number;
-    public translateX: Length;
+    public translateX: dip;
-    public translateY: Length;
+    public translateY: dip;
 
     public clipPath: string;
     public color: Color;

tns-core-modules/utils/utils.d.ts

@@ -2,6 +2,8 @@
  * @module "utils/utils"
  */ /** */
 
+import { dip, px } from "../ui/core/view";
+
 export const RESOURCE_PREFIX: string;
 export const FILE_PREFIX: string;
 
@@ -29,9 +31,6 @@ interface CacheLayerType {
  * Utility module related to layout.
  */
 export module layout {
-    export type px = number;
-    export type dip = number;
-
     /**
      * Bits that provide the actual measured size.
      */
@@ -68,12 +67,12 @@ export module layout {
      */
     export function getDisplayDensity(): number;
     /**
-     * Convert value to device pixels.
+     * Convert device independent pixels to device pixels - dip to px.
      * @param value - The pixel to convert.
      */
     export function toDevicePixels(value: dip): px;
     /**
-     * Convert value to device independent pixels.
+     * Convert device pixels to device independent pixels - px to dip.
      * @param value - The pixel to convert.
      */
     export function toDeviceIndependentPixels(value: px): dip;