Stabilizing layout tests

apps/tests/layouts/absolute-layout-tests.ts

@@ -56,15 +56,15 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
     public testAll() {
 
         let absoluteLayout = this.testView;
-        absoluteLayout.width = 230;
+        absoluteLayout.width = layoutHelper.dp(230);
-        absoluteLayout.height = 230;
+        absoluteLayout.height = layoutHelper.dp(230);
         absoluteLayout.style.backgroundColor = new colorModule.Color("LightGray");
         let label = new labelModule.Label();
         
-        absoluteLayoutModule.AbsoluteLayout.setLeft(label, 10);
+        absoluteLayoutModule.AbsoluteLayout.setLeft(label, layoutHelper.dp(10));
-        absoluteLayoutModule.AbsoluteLayout.setTop(label, 10);
+        absoluteLayoutModule.AbsoluteLayout.setTop(label, layoutHelper.dp(10));
-        label.width = 100;
+        label.width = layoutHelper.dp(100);
-        label.height = 100;
+        label.height = layoutHelper.dp(100);
         label.text = "LT";
         label.style.backgroundColor = new colorModule.Color("Red");
         absoluteLayout.addChild(label);
@@ -74,25 +74,25 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
         let actualValue = label._getCurrentLayoutBounds();
         let width = actualValue.right - actualValue.left;
         let height = actualValue.bottom - actualValue.top;
-        TKUnit.assertEqual(actualValue.left, layoutHelper.dip(10), "ActualLeft");
+        TKUnit.assertEqual(actualValue.left, 10, "ActualLeft");
-        TKUnit.assertEqual(actualValue.top, layoutHelper.dip(10), "ActualTop");
+        TKUnit.assertEqual(actualValue.top, 10, "ActualTop");
-        TKUnit.assertEqual(width, layoutHelper.dip(100), "ActualWidth");
+        TKUnit.assertEqual(width, 100, "ActualWidth");
-        TKUnit.assertEqual(height, layoutHelper.dip(100), "Actualheight");
+        TKUnit.assertEqual(height, 100, "Actualheight");
     }
 
     public test_padding() {
         let absoluteLayout = this.testView;
-        absoluteLayout.width = 200;
+        absoluteLayout.width = layoutHelper.dp(200);
-        absoluteLayout.height = 200;
+        absoluteLayout.height = layoutHelper.dp(200);
-        absoluteLayout.paddingLeft = 5;
+        absoluteLayout.paddingLeft = layoutHelper.dp(5);
-        absoluteLayout.paddingTop = 15;
+        absoluteLayout.paddingTop = layoutHelper.dp(15);
 
         // Left Top
         let btn = new layoutHelper.MyButton();
-        btn.width = 100;
+        btn.width = layoutHelper.dp(100);
-        btn.height = 100;
+        btn.height = layoutHelper.dp(100);
-        absoluteLayoutModule.AbsoluteLayout.setLeft(btn, 20);
+        absoluteLayoutModule.AbsoluteLayout.setLeft(btn, layoutHelper.dp(20));
-        absoluteLayoutModule.AbsoluteLayout.setTop(btn, 20);
+        absoluteLayoutModule.AbsoluteLayout.setTop(btn, layoutHelper.dp(20));
         absoluteLayout.addChild(btn);
 
         this.waitUntilTestElementLayoutIsValid();

apps/tests/layouts/dock-layout-tests.ts

@@ -5,6 +5,7 @@ import TKUnit = require("../TKUnit");
 import helper = require("./layout-helper");
 import navHelper = require("../ui/helper");
 import testModule = require("../ui-test");
+import layoutHelper = require("./layout-helper");
 
 // <snippet module="ui/layouts/dock-layout" title="dock-layout">
 // # DockLayout
@@ -37,8 +38,8 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
     public create(): DockLayout {
         let rootLayout = new DockLayout();
-        rootLayout.height = 300;
+        rootLayout.height = layoutHelper.dp(300);
-        rootLayout.width = 300;
+        rootLayout.width = layoutHelper.dp(300);
         return rootLayout;
     }
 
@@ -62,7 +63,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
     public test_dock_left() {
         var testBtn = new helper.MyButton();
-        testBtn.width = 20;
+        testBtn.width = layoutHelper.dp(20);
         this.testView.stretchLastChild = false;
         this.testView.addChild(testBtn);
 
@@ -73,7 +74,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
     public test_dock_right() {
         var testBtn = new helper.MyButton();
-        testBtn.width = 20;
+        testBtn.width = layoutHelper.dp(20);
         dockModule.DockLayout.setDock(testBtn, enums.Dock.right);
         this.testView.stretchLastChild = false;
         this.testView.addChild(testBtn);
@@ -85,7 +86,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
     public test_dock_top() {
         var testBtn = new helper.MyButton();
-        testBtn.height = 20;
+        testBtn.height = layoutHelper.dp(20);
         dockModule.DockLayout.setDock(testBtn, enums.Dock.top);
         this.testView.stretchLastChild = false;
         this.testView.addChild(testBtn);
@@ -97,7 +98,7 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
     public test_dock_button() {
         var testBtn = new helper.MyButton();
-        testBtn.height = 20;
+        testBtn.height = layoutHelper.dp(20);
         dockModule.DockLayout.setDock(testBtn, enums.Dock.bottom);
         this.testView.stretchLastChild = false;
         this.testView.addChild(testBtn);
@@ -118,21 +119,21 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
 
     public test_dock_left_top_righ_bottom_fill() {
         var testBtnLeft = new helper.MyButton();
-        testBtnLeft.width = 20;
+        testBtnLeft.width = layoutHelper.dp(20);
         this.testView.addChild(testBtnLeft);
 
         var testBtnTop = new helper.MyButton();
-        testBtnTop.height = 20;
+        testBtnTop.height = layoutHelper.dp(20);
         dockModule.DockLayout.setDock(testBtnTop, enums.Dock.top);
         this.testView.addChild(testBtnTop);
 
         var testBtnRight = new helper.MyButton();
-        testBtnRight.width = 20;
+        testBtnRight.width = layoutHelper.dp(20);
         dockModule.DockLayout.setDock(testBtnRight, enums.Dock.right);
         this.testView.addChild(testBtnRight);
 
         var testBtnBottom = new helper.MyButton();
-        testBtnBottom.height = 20;
+        testBtnBottom.height = layoutHelper.dp(20);
         dockModule.DockLayout.setDock(testBtnBottom, enums.Dock.bottom);
         this.testView.addChild(testBtnBottom);
 
@@ -152,10 +153,10 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
     public test_padding() {
         var testBtn = new helper.MyButton();
         this.testView.addChild(testBtn);
-        this.testView.paddingLeft = 10;
+        this.testView.paddingLeft = layoutHelper.dp(10);
-        this.testView.paddingTop = 20;
+        this.testView.paddingTop = layoutHelper.dp(20);
-        this.testView.paddingRight = 30;
+        this.testView.paddingRight = layoutHelper.dp(30);
-        this.testView.paddingBottom = 40;
+        this.testView.paddingBottom = layoutHelper.dp(40);
 
         this.waitUntilTestElementLayoutIsValid();
 

apps/tests/layouts/grid-layout-tests.ts

@@ -9,6 +9,7 @@ import utils = require("utils/utils");
 import builder = require("ui/builder");
 import enums = require("ui/enums");
 import testModule = require("../ui-test");
+import layoutHelper = require("./layout-helper");
 
 var DELTA = 1;
 
@@ -61,12 +62,12 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
 
         this.testView.addRow(new layout.ItemSpec(1, layout.GridUnitType.star));
         this.testView.addRow(new layout.ItemSpec(2, layout.GridUnitType.star));
-        this.testView.addRow(new layout.ItemSpec(50, layout.GridUnitType.pixel));
+        this.testView.addRow(new layout.ItemSpec(layoutHelper.dp(50), layout.GridUnitType.pixel));
         this.testView.addRow(new layout.ItemSpec(50, layout.GridUnitType.auto));
 
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
         this.testView.addColumn(new layout.ItemSpec(2, layout.GridUnitType.star));
-        this.testView.addColumn(new layout.ItemSpec(50, layout.GridUnitType.pixel));
+        this.testView.addColumn(new layout.ItemSpec(layoutHelper.dp(50), layout.GridUnitType.pixel));
         this.testView.addColumn(new layout.ItemSpec(50, layout.GridUnitType.auto));
 
         for (var r = 0; r < 4; r++) {
@@ -76,19 +77,19 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
                 layout.GridLayout.setColumn(btn, c);
                 layout.GridLayout.setRow(btn, r);
                 if (c === 3) {
-                    btn.width = 100; // Auto column should take 100px for this test.
+                    btn.width = layoutHelper.dp(100); // Auto column should take 100px for this test.
                 }
 
                 if (r === 3) {
-                    btn.height = 100; // Auto row should take 100px for this test.
+                    btn.height = layoutHelper.dp(100); // Auto row should take 100px for this test.
                 }
 
                 this.testView.addChild(btn);
             }
         }
 
-        this.testView.width = 300;
+        this.testView.width = layoutHelper.dp(300);
-        this.testView.height = 300;
+        this.testView.height = layoutHelper.dp(300);
 
         if (wait) {
             this.waitUntilTestElementLayoutIsValid();
@@ -245,58 +246,55 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
         this.waitUntilTestElementLayoutIsValid();
 
         TKUnit.assertTrue(btn.getMeasuredWidth() === this.testView.getMeasuredWidth());
+        TKUnit.assertTrue(this.testView.getMeasuredWidth() < 50);
     }
 
     public test_measuredWidth_when_not_stretched_two_columns() {
         this.testView.horizontalAlignment = enums.HorizontalAlignment.center;
-        this.testView.addColumn(new layout.ItemSpec(80, layout.GridUnitType.pixel));
+        this.testView.addColumn(new layout.ItemSpec(layoutHelper.dp(80), layout.GridUnitType.pixel));
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
 
         let btn = new Button();
         btn.text = "A";
-        btn.width = 100;
+        btn.width = layoutHelper.dp(100);
         MyGridLayout.setColumnSpan(btn, 2);
         this.testView.addChild(btn);
 
         this.waitUntilTestElementLayoutIsValid();
 
-        var density = utils.layout.getDisplayDensity();
-        var delta = Math.floor(density) !== density ? 2 : DELTA;
         var cols = this.testView.getColumns();
-        TKUnit.assertAreClose(cols[0].actualLength, 80, delta);
+        TKUnit.assertAreClose(cols[0].actualLength, 80, DELTA);
-        TKUnit.assertAreClose(cols[1].actualLength, 20, delta);
+        TKUnit.assertAreClose(cols[1].actualLength, 20, DELTA);
-        TKUnit.assertAreClose(this.testView.getMeasuredWidth(), 100 * density, delta);
+        TKUnit.assertAreClose(this.testView.getMeasuredWidth(), 100, DELTA);
     }
 
     public test_measuredWidth_when_not_stretched_three_columns() {
         this.testView.horizontalAlignment = enums.HorizontalAlignment.center;
-        this.testView.addColumn(new layout.ItemSpec(80, layout.GridUnitType.pixel));
+        this.testView.addColumn(new layout.ItemSpec(layoutHelper.dp(80), layout.GridUnitType.pixel));
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.auto));
 
         for (let i = 1; i < 4; i++) {
             let btn = new Button();
             btn.text = "A";
-            btn.width = i * 20;
+            btn.width = layoutHelper.dp(i * 20);
             MyGridLayout.setColumn(btn, i - 1);
             this.testView.addChild(btn);
         }
 
         let btn = new Button();
         btn.text = "B";
-        btn.width = 100;
+        btn.width = layoutHelper.dp(100);
         MyGridLayout.setColumnSpan(btn, 3);
         this.testView.addChild(btn);
 
         this.waitUntilTestElementLayoutIsValid();
 
-        var density = utils.layout.getDisplayDensity();
-        var delta = Math.floor(density) !== density ? 2 : DELTA;
         var cols = this.testView.getColumns();
-        TKUnit.assertAreClose(cols[0].actualLength, 80, delta);
+        TKUnit.assertAreClose(cols[0].actualLength, 80, DELTA);
-        TKUnit.assertAreClose(cols[1].actualLength, 40, delta);
+        TKUnit.assertAreClose(cols[1].actualLength, 40, DELTA);
-        TKUnit.assertAreClose(cols[2].actualLength, 60, delta);
+        TKUnit.assertAreClose(cols[2].actualLength, 60, DELTA);
-        TKUnit.assertAreClose(this.testView.getMeasuredWidth(), 180 * density, delta);
+        TKUnit.assertAreClose(this.testView.getMeasuredWidth(), 180, DELTA);
     }
 
     public test_getRows_shouldNotReturnNULL() {
@@ -405,12 +403,10 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
             }
         }
 
-        var delta = 1.1; // Set to an overly high value to avoid failing on some emulators.
-
         let measuredWidth = this.testView.getMeasuredWidth();
         let measuredHeight = this.testView.getMeasuredHeight();
-        TKUnit.assertAreClose(measuredWidth, maxWidth, delta, "GridLayout incorrect measured width");
+        TKUnit.assertAreClose(measuredWidth, maxWidth, DELTA, "GridLayout incorrect measured width");
-        TKUnit.assertAreClose(measuredHeight, maxHeight, delta, "GridLayout incorrect measured height");
+        TKUnit.assertAreClose(measuredHeight, maxHeight, DELTA, "GridLayout incorrect measured height");
     }
 
     public test_columnsActualWidth_isCorrect() {
@@ -427,10 +423,10 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
         this.prepareGridLayout(true);
 
         var rows = this.testView.getRows();
-        TKUnit.assertEqual(rows[0].actualLength, 50, "Star row should be 50px width");
+        TKUnit.assertEqual(rows[0].actualLength, layoutHelper.dip(50), "Star row should be 50px width");
-        TKUnit.assertEqual(rows[1].actualLength, 100, "2*Star row should be 100px width");
+        TKUnit.assertEqual(rows[1].actualLength, layoutHelper.dip(100), "2*Star row should be 100px width");
-        TKUnit.assertEqual(rows[2].actualLength, 50, "Absolute row should be 50px width");
+        TKUnit.assertEqual(rows[2].actualLength, layoutHelper.dip(50), "Absolute row should be 50px width");
-        TKUnit.assertEqual(rows[3].actualLength, 100, "Auto row should be 100px width");
+        TKUnit.assertEqual(rows[3].actualLength, layoutHelper.dip(100), "Auto row should be 100px width");
     }
 
     public test_Measure_and_Layout_Children_withCorrect_size() {
@@ -440,8 +436,6 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
         var rows = this.testView.getRows();
         var cols = this.testView.getColumns();
         var i = 0;
-        var density = utils.layout.getDisplayDensity();
-        var delta = Math.floor(density) !== density ? 1.1 : DELTA;
 
         for (var r = 0; r < 4; r++) {
 
@@ -453,31 +447,28 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
                 var h = r % 2 === 0 ? 50 : 100;
                 var w = c % 2 === 0 ? 50 : 100;
 
-                h = Math.round(h * density);
-                w = Math.round(w * density);
-
                 if (row.isAuto) {
-                    TKUnit.assertAreClose(btn.layoutHeight, btn.getMeasuredHeight(), delta, "Auto rows should layout with measured height");
+                    TKUnit.assertAreClose(btn.layoutHeight, btn.getMeasuredHeight(), DELTA, "Auto rows should layout with measured height");
                 }
                 else if (row.isAbsolute) {
-                    TKUnit.assertAreClose(btn.measureHeight, h, delta, "Absolute rows should measure with specific height");
+                    TKUnit.assertAreClose(btn.measureHeight, h, DELTA, "Absolute rows should measure with specific height");
-                    TKUnit.assertAreClose(btn.layoutHeight, h, delta, "Absolute rows should layout with specific height");
+                    TKUnit.assertAreClose(btn.layoutHeight, h, DELTA, "Absolute rows should layout with specific height");
                 }
                 else {
-                    TKUnit.assertAreClose(btn.measureHeight, h, delta, "Star rows should measure with specific height");
+                    TKUnit.assertAreClose(btn.measureHeight, h, DELTA, "Star rows should measure with specific height");
-                    TKUnit.assertAreClose(btn.layoutHeight, h, delta, "Star rows should layout with exact length");
+                    TKUnit.assertAreClose(btn.layoutHeight, h, DELTA, "Star rows should layout with exact length");
                 }
 
                 if (col.isAuto) {
-                    TKUnit.assertAreClose(btn.layoutWidth, btn.getMeasuredWidth(), delta, "Auto columns should layout with measured width");
+                    TKUnit.assertAreClose(btn.layoutWidth, btn.getMeasuredWidth(), DELTA, "Auto columns should layout with measured width");
                 }
                 else if (col.isAbsolute) {
-                    TKUnit.assertAreClose(btn.measureWidth, w, delta, "Absolute columns should measure with specific width");
+                    TKUnit.assertAreClose(btn.measureWidth, w, DELTA, "Absolute columns should measure with specific width");
-                    TKUnit.assertAreClose(btn.layoutWidth, w, delta, "Absolute columns should layout with specific width");
+                    TKUnit.assertAreClose(btn.layoutWidth, w, DELTA, "Absolute columns should layout with specific width");
                 }
                 else {
-                    TKUnit.assertAreClose(btn.measureWidth, w, delta, "Star columns should measure with specific width");
+                    TKUnit.assertAreClose(btn.measureWidth, w, DELTA, "Star columns should measure with specific width");
-                    TKUnit.assertAreClose(btn.layoutWidth, w, delta, "Star columns should layout with exact length");
+                    TKUnit.assertAreClose(btn.layoutWidth, w, DELTA, "Star columns should layout with exact length");
                 }
             }
         }
@@ -485,7 +476,7 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
 
     public test_ColumnWidth_when_4stars_and_width_110() {
 
-        this.testView.width = 110;
+        this.testView.width = layoutHelper.dp(110);
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
         this.testView.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
@@ -495,34 +486,28 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
 
         var cols = this.testView.getColumns();
 
-        var density = utils.layout.getDisplayDensity();
+        TKUnit.assertAreClose(cols[0].actualLength, layoutHelper.dip(28), DELTA, "Column[0] actual length should be 28");
-        var delta = Math.floor(density) !== density ? 1.1 : DELTA;
+        TKUnit.assertAreClose(cols[1].actualLength, layoutHelper.dip(27), DELTA, "Column[1] actual length should be 27");
-
+        TKUnit.assertAreClose(cols[2].actualLength, layoutHelper.dip(28), DELTA, "Column[2] actual length should be 28");
-        TKUnit.assertAreClose(cols[0].actualLength, 28, delta, "Column[0] actual length should be 28");
+        TKUnit.assertAreClose(cols[3].actualLength, layoutHelper.dip(27), DELTA, "Column[3] actual length should be 27");
-        TKUnit.assertAreClose(cols[1].actualLength, 27, delta, "Column[1] actual length should be 27");
-        TKUnit.assertAreClose(cols[2].actualLength, 28, delta, "Column[2] actual length should be 28");
-        TKUnit.assertAreClose(cols[3].actualLength, 27, delta, "Column[3] actual length should be 27");
     }
 
     public test_margins_and_verticalAlignment_center() {
 
-        this.testView.height = 200;
+        this.testView.height = layoutHelper.dp(200);
-        this.testView.width = 200;
+        this.testView.width = layoutHelper.dp(200);
         var btn = new helper.MyButton();
         btn.text = "btn";
-        btn.height = 100;
+        btn.height = layoutHelper.dp(100);
-        btn.width = 100;
+        btn.width = layoutHelper.dp(100);
-        btn.marginBottom = 50;
+        btn.marginBottom = layoutHelper.dp(50);
-        btn.marginRight = 50;
+        btn.marginRight = layoutHelper.dp(50);
         this.testView.addChild(btn);
 
         this.waitUntilTestElementLayoutIsValid();
 
-        var density = utils.layout.getDisplayDensity();
+        TKUnit.assertAreClose(btn.layoutTop, 25, DELTA, "vertical margins");
-        var delta = Math.floor(density) !== density ? 1.1 : DELTA;
+        TKUnit.assertAreClose(btn.layoutLeft, 25, DELTA, "horizontal margins");
-
-        TKUnit.assertAreClose(btn.layoutTop, 25 * density, delta, "vertical margins");
-        TKUnit.assertAreClose(btn.layoutLeft, 25 * density, delta, "horizontal margins");
     }
 
     public test_set_columns_in_XML() {
@@ -564,13 +549,13 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
     }
 
     public test_padding() {
-        this.testView.paddingLeft = 10;
+        this.testView.paddingLeft = layoutHelper.dp(10);
-        this.testView.paddingTop = 20;
+        this.testView.paddingTop = layoutHelper.dp(20);
-        this.testView.paddingRight = 30;
+        this.testView.paddingRight = layoutHelper.dp(30);
-        this.testView.paddingBottom = 40;
+        this.testView.paddingBottom = layoutHelper.dp(40);
 
-        this.testView.width = 300;
+        this.testView.width = layoutHelper.dp(300);
-        this.testView.height = 300;
+        this.testView.height = layoutHelper.dp(300);
 
         var btn = new helper.MyButton();
         this.testView.addChild(btn);

apps/tests/layouts/layout-helper.android.ts

@@ -155,28 +155,25 @@ export class MyStackLayout extends StackLayout implements def.MyStackLayout {
 }
 
 export function assertMeasure(btn: MyButton, width: number, height: number, name?: string) {
-    var density = utils.layout.getDisplayDensity();
-
-    var delta = Math.floor(density) !== density ? 1.1 : DELTA;
     name = name ? "[" + name + "]" : "";
 
-    TKUnit.assertAreClose(Math.floor(btn.measureWidth / density), width, delta, name + "width");
+    TKUnit.assertAreClose(btn.measureWidth, width, DELTA, name + "width");
-    TKUnit.assertAreClose(Math.floor(btn.measureHeight / density), height, delta, name + "height");
+    TKUnit.assertAreClose(btn.measureHeight, height, DELTA, name + "height");
 }
 
 export function assertLayout(btn: MyButton, left: number, top: number, width: number, height: number, name?: string): void {
-    var density = utils.layout.getDisplayDensity();
-
-    var delta = Math.floor(density) !== density ? 1.1 : DELTA;
     name = name ? "[" + name + "]" : "";
 
-    TKUnit.assertAreClose(Math.floor(btn.layoutLeft / density), left, delta, name + "left");
+    TKUnit.assertAreClose(btn.layoutLeft, left, DELTA, name + "left");
-    TKUnit.assertAreClose(Math.floor(btn.layoutTop / density), top, delta, name + "top");
+    TKUnit.assertAreClose(btn.layoutTop, top, DELTA, name + "top");
-    TKUnit.assertAreClose(Math.floor(btn.layoutWidth / density), width, delta, name + "width");
+    TKUnit.assertAreClose(btn.layoutWidth, width, DELTA, name + "width");
-    TKUnit.assertAreClose(Math.floor(btn.layoutHeight / density), height, delta, name + "height");
+    TKUnit.assertAreClose(btn.layoutHeight, height, DELTA, name + "height");
+}
+
+export function dp(value: number): number {
+    return utils.layout.toDevicePixels(value);
 }
 
 export function dip(value: number): number {
-    var density = utils.layout.getDisplayDensity();
+    return utils.layout.toDeviceIndependentPixels(value);
-    return Math.floor(value * density);
 }

apps/tests/layouts/layout-helper.d.ts

@@ -29,3 +29,4 @@ export class MyStackLayout extends StackLayout {
 export function assertMeasure(btn: MyButton, width: number, height: number, name?: string);
 export function assertLayout(btn: MyButton, left: number, top: number, width: number, height: number, name?: string): void;
 export function dip(value: number): number;
+export function dp(value: number): number;

apps/tests/layouts/layout-helper.ios.ts

@@ -119,7 +119,10 @@ export function assertLayout(btn: MyButton, left: number, top: number, width: nu
     TKUnit.assertAreClose(Math.floor(btn.layoutHeight / density), height, delta, name + "height");
 }
 
-export function dip(value: number): number {
+export function dp(value: number): number {
-    var density = utils.layout.getDisplayDensity();
+    return utils.layout.toDevicePixels(value);
-    return Math.floor(value * density);
+}
+
+export function dip(value: number): number {
+    return utils.layout.toDeviceIndependentPixels(value);
 }

apps/tests/layouts/stack-layout-tests.ts

@@ -7,6 +7,7 @@ import navHelper = require("../ui/helper");
 import enums = require("ui/enums");
 import utils = require("utils/utils");
 import testModule = require("../ui-test");
+import layoutHelper = require("./layout-helper");
 
 export class StackLayoutTest extends testModule.UITest<StackLayout> {
 
@@ -38,7 +39,7 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
         this.waitUntilTestElementLayoutIsValid();
 
         var arrangeCount = this.rootLayout.arrangeCount;
-        TKUnit.assert(this.rootLayout.orientation === enums.Orientation.vertical, "Default orientation should be Vertical.");
+        TKUnit.assertEqual(this.rootLayout.orientation, enums.Orientation.vertical, "Default orientation should be Vertical.");
 
         this.rootLayout.orientation = enums.Orientation.horizontal;
         this.waitUntilTestElementLayoutIsValid();
@@ -51,8 +52,8 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
         this.waitUntilTestElementLayoutIsValid();
 
         TKUnit.assertEqual(this.rootLayout.orientation, enums.Orientation.vertical, "StackLayout should be vertical.");
-        TKUnit.assert(this.rootLayout.measured, "Layout should be measured.");
+        TKUnit.assertTrue(this.rootLayout.measured, "Layout should be measured.");
-        TKUnit.assert(this.rootLayout.arranged, "Layout should be arranged.");
+        TKUnit.assertTrue(this.rootLayout.arranged, "Layout should be arranged.");
 
         var specs = this.btn1._getCurrentMeasureSpecs();
 
@@ -97,16 +98,16 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
     }
 
     public test_Padding_Vertical() {
-        this.rootLayout.width = 300;
+        this.rootLayout.width = layoutHelper.dp(300);
-        this.rootLayout.height = 300;
+        this.rootLayout.height = layoutHelper.dp(300);
 
-        this.rootLayout.paddingLeft = 10;
+        this.rootLayout.paddingLeft = layoutHelper.dp(10);
-        this.rootLayout.paddingTop = 20;
+        this.rootLayout.paddingTop = layoutHelper.dp(20);
-        this.rootLayout.paddingRight = 30;
+        this.rootLayout.paddingRight = layoutHelper.dp(30);
-        this.rootLayout.paddingBottom = 40;
+        this.rootLayout.paddingBottom = layoutHelper.dp(40);
 
-        this.btn1.height = 50;
+        this.btn1.height = layoutHelper.dp(50);
-        this.btn2.height = 50;
+        this.btn2.height = layoutHelper.dp(50);
 
         this.waitUntilTestElementLayoutIsValid();
 
@@ -118,17 +119,17 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
     }
 
     public test_Padding_Horizontal() {
-        this.rootLayout.width = 300;
+        this.rootLayout.width = layoutHelper.dp(300);
-        this.rootLayout.height = 300;
+        this.rootLayout.height = layoutHelper.dp(300);
         this.rootLayout.orientation = enums.Orientation.horizontal;
 
-        this.rootLayout.paddingLeft = 10;
+        this.rootLayout.paddingLeft = layoutHelper.dp(10);
-        this.rootLayout.paddingTop = 20;
+        this.rootLayout.paddingTop = layoutHelper.dp(20);
-        this.rootLayout.paddingRight = 30;
+        this.rootLayout.paddingRight = layoutHelper.dp(30);
-        this.rootLayout.paddingBottom = 40;
+        this.rootLayout.paddingBottom = layoutHelper.dp(40);
 
-        this.btn1.width = 50;
+        this.btn1.width = layoutHelper.dp(50);
-        this.btn2.width = 50;
+        this.btn2.width = layoutHelper.dp(50);
 
         this.waitUntilTestElementLayoutIsValid();
 

apps/tests/layouts/wrap-layout-tests.ts

@@ -41,8 +41,8 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         //```
         // </snippet>
 
-        wrapLayout.width = 200;
+        wrapLayout.width = layoutHelper.dp(200);
-        wrapLayout.height = 200;
+        wrapLayout.height = layoutHelper.dp(200);
 
         var label;
         var i;
@@ -51,8 +51,8 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
             label.text = "" + i;
             label.id = "" + i;
 
-            label.width = 100;
+            label.width = layoutHelper.dp(100);
-            label.height = 100;
+            label.height = layoutHelper.dp(100);
             wrapLayout.addChild(label);
         }
 
@@ -67,14 +67,14 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         let actualValue = this.testView.getChildAt(0)._getCurrentLayoutBounds();
         TKUnit.assertEqual(actualValue.left, 0, "ActualLeft on Index 0");
         TKUnit.assertEqual(actualValue.top, 0, "ActualTop on Index 0");
-        TKUnit.assertEqual(actualValue.right, layoutHelper.dip(100), "ActualRight on Index 0");
+        TKUnit.assertEqual(actualValue.right, 100, "ActualRight on Index 0");
-        TKUnit.assertEqual(actualValue.bottom, layoutHelper.dip(100), "ActualBottom on Index 0");
+        TKUnit.assertEqual(actualValue.bottom, 100, "ActualBottom on Index 0");
 
         actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds();
-        TKUnit.assertEqual(actualValue.left, layoutHelper.dip(100), "ActualLeft on Index 1");
+        TKUnit.assertEqual(actualValue.left, 100, "ActualLeft on Index 1");
         TKUnit.assertEqual(actualValue.top, 0, "ActualTop on Index 1");
-        TKUnit.assertEqual(actualValue.right, layoutHelper.dip(200), "ActualRight on Index 1");
+        TKUnit.assertEqual(actualValue.right, 200, "ActualRight on Index 1");
-        TKUnit.assertEqual(actualValue.bottom, layoutHelper.dip(100), "ActualBottom on Index 1");
+        TKUnit.assertEqual(actualValue.bottom, 100, "ActualBottom on Index 1");
     }
 
     public testVerticalOrientation() {
@@ -90,14 +90,14 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         let actualValue = this.testView.getChildAt(0)._getCurrentLayoutBounds();
         TKUnit.assertEqual(actualValue.left, 0, "ActualLeft on Index 0");
         TKUnit.assertEqual(actualValue.top, 0, "ActualTop on Index 0");
-        TKUnit.assertEqual(actualValue.right, layoutHelper.dip(100), "ActualRight on Index 0");
+        TKUnit.assertEqual(actualValue.right, 100, "ActualRight on Index 0");
-        TKUnit.assertEqual(actualValue.bottom, layoutHelper.dip(100), "ActualBottom on Index 0");
+        TKUnit.assertEqual(actualValue.bottom, 100, "ActualBottom on Index 0");
 
         actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds();
         TKUnit.assertEqual(actualValue.left, 0, "ActualLeft on Index 1");
-        TKUnit.assertEqual(actualValue.top, layoutHelper.dip(100), "ActualTop on Index 1");
+        TKUnit.assertEqual(actualValue.top, 100, "ActualTop on Index 1");
-        TKUnit.assertEqual(actualValue.right, layoutHelper.dip(100), "ActualRight on Index 1");
+        TKUnit.assertEqual(actualValue.right, 100, "ActualRight on Index 1");
-        TKUnit.assertEqual(actualValue.bottom, layoutHelper.dip(200), "ActualBottom on Index 1");
+        TKUnit.assertEqual(actualValue.bottom, 200, "ActualBottom on Index 1");
     }
 
     public testChangeOrientation() {
@@ -109,60 +109,60 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         let actualValue = this.testView.getChildAt(0)._getCurrentLayoutBounds();
         TKUnit.assertEqual(actualValue.left, 0, "ActualLeft on Index 0");
         TKUnit.assertEqual(actualValue.top, 0, "ActualTop on Index 0");
-        TKUnit.assertEqual(actualValue.right, layoutHelper.dip(100), "ActualRight on Index 0");
+        TKUnit.assertEqual(actualValue.right, 100, "ActualRight on Index 0");
-        TKUnit.assertEqual(actualValue.bottom, layoutHelper.dip(100), "ActualBottom on Index 0");
+        TKUnit.assertEqual(actualValue.bottom, 100, "ActualBottom on Index 0");
 
         actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds();
         TKUnit.assertEqual(actualValue.left, 0, "ActualLeft on Index 1");
-        TKUnit.assertEqual(actualValue.top, layoutHelper.dip(100), "ActualTop on Index 1");
+        TKUnit.assertEqual(actualValue.top, 100, "ActualTop on Index 1");
-        TKUnit.assertEqual(actualValue.right, layoutHelper.dip(100), "ActualRight on Index 1");
+        TKUnit.assertEqual(actualValue.right, 100, "ActualRight on Index 1");
-        TKUnit.assertEqual(actualValue.bottom, layoutHelper.dip(200), "ActualBottom on Index 1");
+        TKUnit.assertEqual(actualValue.bottom, 200, "ActualBottom on Index 1");
     }
 
     public testItemWidth() {
-        this.testView.itemWidth = 50;
+        this.testView.itemWidth = layoutHelper.dp(50);
         this.waitUntilTestElementLayoutIsValid();
 
         let actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds().left;
-        TKUnit.assertEqual(actualValue, layoutHelper.dip(50), "ActualLeft on Index 1");
+        TKUnit.assertEqual(actualValue, 50, "ActualLeft on Index 1");
     }
 
     public testChangeItemWidth() {
         this.waitUntilTestElementLayoutIsValid();
-        this.testView.itemWidth = 50;
+        this.testView.itemWidth = layoutHelper.dp(50);
         this.waitUntilTestElementLayoutIsValid();
 
         let actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds().left;
-        TKUnit.assertEqual(actualValue, layoutHelper.dip(50), "ActualLeft on Index 1");
+        TKUnit.assertEqual(actualValue, 50, "ActualLeft on Index 1");
     }
 
     public testItemHeight() {
-        this.testView.itemHeight = 50;
+        this.testView.itemHeight = layoutHelper.dp(50);
         this.testView.orientation = enums.Orientation.vertical;
         this.waitUntilTestElementLayoutIsValid();
 
         let actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds().top;
-        TKUnit.assertEqual(actualValue, layoutHelper.dip(50), "ActualTop on Index 1");
+        TKUnit.assertEqual(actualValue, 50, "ActualTop on Index 1");
     }
 
     public testChangeItemHeight() {
         this.testView.orientation = enums.Orientation.vertical;
         this.waitUntilTestElementLayoutIsValid();
-        this.testView.itemHeight = 50;
+        this.testView.itemHeight = layoutHelper.dp(50);
         this.waitUntilTestElementLayoutIsValid();
 
         let actualValue = this.testView.getChildAt(1)._getCurrentLayoutBounds().top;
-        TKUnit.assertEqual(actualValue, layoutHelper.dip(50), "ActualTop on Index 1");
+        TKUnit.assertEqual(actualValue, 50, "ActualTop on Index 1");
     }
 
     public testPaddingLeftAndTop() {
         this.testView.removeChildren();
-        this.testView.paddingLeft = 20;
+        this.testView.paddingLeft = layoutHelper.dp(20);
-        this.testView.paddingTop = 30;
+        this.testView.paddingTop = layoutHelper.dp(30);
 
         var btn = new layoutHelper.MyButton();
-        btn.width = 50;
+        btn.width = layoutHelper.dp(50);
-        btn.height = 50;
+        btn.height = layoutHelper.dp(50);
         this.testView.addChild(btn);
 
         this.waitUntilTestElementLayoutIsValid();
@@ -172,17 +172,17 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
 
     public testPaddingRight() {
         this.testView.removeChildren();
-        this.testView.paddingRight = 30;
+        this.testView.paddingRight = layoutHelper.dp(30);
-        this.testView.width = 200;
+        this.testView.width = layoutHelper.dp(200);
 
         var btn1 = new layoutHelper.MyButton();
         this.testView.addChild(btn1);
-        btn1.width = 100;
+        btn1.width = layoutHelper.dp(100);
-        btn1.height = 50;
+        btn1.height = layoutHelper.dp(50);
 
         var btn2 = new layoutHelper.MyButton();
-        btn2.width = 80;
+        btn2.width = layoutHelper.dp(80);
-        btn2.height = 50;
+        btn2.height = layoutHelper.dp(50);
         this.testView.addChild(btn2);
 
         this.waitUntilTestElementLayoutIsValid();
@@ -198,18 +198,18 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
 
     public testPaddingBottom() {
         this.testView.removeChildren();
-        this.testView.paddingBottom = 30;
+        this.testView.paddingBottom = layoutHelper.dp(30);
-        this.testView.height = 200;
+        this.testView.height = layoutHelper.dp(200);
         this.testView.orientation = enums.Orientation.vertical;
 
         var btn1 = new layoutHelper.MyButton();
         this.testView.addChild(btn1);
-        btn1.width = 50;
+        btn1.width = layoutHelper.dp(50);
-        btn1.height = 100;
+        btn1.height = layoutHelper.dp(100);
 
         var btn2 = new layoutHelper.MyButton();
-        btn2.width = 50;
+        btn2.width = layoutHelper.dp(50);
-        btn2.height = 80;
+        btn2.height = layoutHelper.dp(80);
         this.testView.addChild(btn2);
 
         this.waitUntilTestElementLayoutIsValid();

utils/utils.android.ts

@@ -28,6 +28,14 @@ export module layout {
         return (size & ~MODE_MASK) | (mode & MODE_MASK);
     }
 
+    export function getDisplayMetrics(): android.util.DisplayMetrics {
+        if (!metrics) {
+            metrics = ad.getApplicationContext().getResources().getDisplayMetrics();
+        }
+
+        return metrics;
+    }
+
     export function getDisplayDensity(): number {
         if (density === -1) {
             density = getDisplayMetrics().density;
@@ -36,12 +44,12 @@ export module layout {
         return density;
     }
 
-    function getDisplayMetrics(): android.util.DisplayMetrics {
+    export function toDevicePixels(value: number): number {
-        if (!metrics) {
+        return value * getDisplayDensity();
-            metrics = ad.getApplicationContext().getResources().getDisplayMetrics();
+    }
-        }
 
-        return metrics;
+    export function toDeviceIndependentPixels(value: number): number {
+        return value / getDisplayDensity();
     }
 }
 
@@ -74,8 +82,8 @@ export module ad {
     }
 
     export module collections {
-        export function stringArrayToStringSet(str: string[]): any {
+        export function stringArrayToStringSet(str: string[]): java.util.HashSet<string> {
-            var hashSet = new java.util.HashSet();
+            var hashSet = new java.util.HashSet<string>();
             if ("undefined" !== typeof str) {
                 for (var element in str) {
                     hashSet.add('' + str[element]);

utils/utils.d.ts

@@ -50,6 +50,16 @@
          * Gets display density for the current device.
          */
         export function getDisplayDensity(): number;
+        /**
+         * Convert value to device pixels.
+         * @param value - The pixel to convert.
+         */
+        export function toDevicePixels(value: number): number;
+        /**
+         * Convert value to device independent pixels.
+         * @param value - The pixel to convert.
+         */
+        export function toDeviceIndependentPixels(value: number): number;
     }
 
     /**

utils/utils.ios.ts

@@ -18,24 +18,27 @@ export module layout {
     export function getDisplayDensity(): number {
         return 1;
     }
+
+    export function toDevicePixels(value: number): number {
+        return value * getDisplayDensity();
+    }
+
+    export function toDeviceIndependentPixels(value: number): number {
+        return value / getDisplayDensity();
+    }
 }
 
 export module ios {
     export module collections {
-        export function jsArrayToNSArray(str: string[]): any {
+        export function jsArrayToNSArray(str: string[]): NSArray {
-            var arr = new NSMutableArray();
+            return NSArray.arrayWithArray(<any>str);
-            if ("undefined" !== typeof str) {
-                for (var element in str) {
-                    arr.addObject(str[element]);
-                }
-            }
-            return arr;
         }
 
-        export function nsArrayToJSArray(a: any): string[] {
+        export function nsArrayToJSArray(a: NSArray): Array<Object> {
             var arr = [];
             if ("undefined" !== typeof a) {
-                for (var i = 0; i < a.count; i++) {
+                let count = a.count;
+                for (let i = 0; i < count; i++) {
                     arr.push(a.objectAtIndex(i));
                 }
             }