Implemented percent support for width, height and margins

CrossPlatformModules.csproj

@@ -80,6 +80,7 @@
       <DependentUpon>data-binding.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\animations\opacity.ts" />
+    <TypeScriptCompile Include="apps\tests\layouts\common-layout-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.ts" />
     <TypeScriptCompile Include="apps\tests\ui\page\modal-page.ts">
       <DependentUpon>modal-page.xml</DependentUpon>

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

@@ -99,6 +99,27 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
         layoutHelper.assertMeasure(btn, 100, 100);
         layoutHelper.assertLayout(btn, 25, 35, 100, 100);
     }
+
+    public test_percent_support() {
+        let layout = this.testView;
+        layout.width = layoutHelper.dp(200);
+        layout.height = layoutHelper.dp(200);
+
+        let btn = new layoutHelper.MyButton();
+        (<any>btn).width = "50%";
+        (<any>btn).height = "50%";
+        btn.margin = "10%";
+        layout.addChild(btn);
+
+        this.waitUntilTestElementLayoutIsValid();
+
+        // AbsoluteLayout measures with 0/UNSPECIFIED so we cannot support percents in it.
+        layoutHelper.assertMeasure(btn, 100, 100);
+        layoutHelper.assertLayout(btn, 20, 20, btn.getMeasuredWidth(), btn.getMeasuredHeight());
+
+        TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
+        TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
+    }
 }
 
 export function createTestCase(): AbsoluteLayoutTest {

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

@@ -0,0 +1,86 @@
+import TKUnit = require("../TKUnit");
+import layoutHelper = require("./layout-helper");
+import enums = require("ui/enums");
+import testModule = require("../ui-test");
+import {LayoutBase} from "ui/layouts/layout-base";
+import {widthProperty} from "ui/styling/style"
+
+export function percent_support_test(test: testModule.UITest<LayoutBase>) {
+    let layout: LayoutBase = test.testView;
+    layout.removeChildren();
+    layout.width = layoutHelper.dp(200);
+    layout.height = layoutHelper.dp(200);
+
+    let btn = new layoutHelper.MyButton();
+    btn.horizontalAlignment = enums.HorizontalAlignment.left;
+    btn.verticalAlignment = enums.VerticalAlignment.top;
+    (<any>btn).width = "50%";
+    (<any>btn).height = "50%";
+    btn.margin = "10%";
+    btn.text = "1";
+    layout.addChild(btn);
+
+    test.waitUntilTestElementLayoutIsValid();
+
+    TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
+    TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
+
+    let bounds = btn._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
+    TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
+    TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
+    TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
+
+    btn.horizontalAlignment = enums.HorizontalAlignment.center;
+    btn.verticalAlignment = enums.VerticalAlignment.center;
+    test.waitUntilTestElementLayoutIsValid();
+
+    bounds = btn._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.left, 50, "Center layout LEFT incorrect");
+    TKUnit.assertEqual(bounds.top, 50, "Center layout TOP incorrect");
+    TKUnit.assertEqual(bounds.right, 150, "Center layout RIGHT incorrect");
+    TKUnit.assertEqual(bounds.bottom, 150, "Center layout BOTTOM incorrect");
+
+    btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
+    btn.verticalAlignment = enums.VerticalAlignment.stretch;
+    test.waitUntilTestElementLayoutIsValid();
+
+    bounds = btn._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.left, 50, "Stretch layout LEFT incorrect");
+    TKUnit.assertEqual(bounds.top, 50, "Stretch layout TOP incorrect");
+    TKUnit.assertEqual(bounds.right, 150, "Stretch layout RIGHT incorrect");
+    TKUnit.assertEqual(bounds.bottom, 150, "Stretch layout BOTTOM incorrect");
+
+    btn.horizontalAlignment = enums.HorizontalAlignment.right;
+    btn.verticalAlignment = enums.VerticalAlignment.bottom;
+    test.waitUntilTestElementLayoutIsValid();
+
+    bounds = btn._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.left, 200 - 100 - 20, "BottomRight layout LEFT incorrect");
+    TKUnit.assertEqual(bounds.top, 200 - 100 - 20, "BottomRight layout TOP incorrect");
+    TKUnit.assertEqual(bounds.right, 200 - 20, "BottomRight layout RIGHT incorrect");
+    TKUnit.assertEqual(bounds.bottom, 200 - 20, "BottomRight layout BOTTOM incorrect");
+
+    //reset values.
+    btn.height = Number.NaN;
+    (<any>btn.style)._resetValue(widthProperty);
+    btn.margin = "0";
+    btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
+    btn.verticalAlignment = enums.VerticalAlignment.stretch;
+    btn.height = Number.NaN;
+
+    TKUnit.assertEqual(btn.marginLeft, 0, "marginLeft");
+    TKUnit.assertEqual(btn.marginTop, 0, "marginTop");
+    TKUnit.assertEqual(btn.marginRight, 0, "marginRight");
+    TKUnit.assertEqual(btn.marginBottom, 0, "marginBottom");
+    TKUnit.assert(isNaN(btn.width), "width");
+    TKUnit.assert(isNaN(btn.height), "height");
+
+    test.waitUntilTestElementLayoutIsValid();
+
+    bounds = btn._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.left, 0, "Reset Stretch layout LEFT incorrect");
+    TKUnit.assertEqual(bounds.top, 0, "Reset Stretch layout TOP incorrect");
+    TKUnit.assertEqual(bounds.right, 200, "Reset Stretch layout RIGHT incorrect");
+    TKUnit.assertEqual(bounds.bottom, 200, "Reset Stretch layout BOTTOM incorrect");
+}

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

@@ -6,6 +6,7 @@ import helper = require("./layout-helper");
 import navHelper = require("../ui/helper");
 import testModule = require("../ui-test");
 import layoutHelper = require("./layout-helper");
+import commonTests = require("./common-layout-tests");
 
 // <snippet module="ui/layouts/dock-layout" title="dock-layout">
 // # DockLayout
@@ -190,6 +191,10 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
         // ```
         // </snippet>
     }
+
+    public test_percent_support() {
+        commonTests.percent_support_test(this);
+    }
 }
 
 export function createTestCase(): DockLayoutTest {

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

@@ -11,6 +11,7 @@ import enums = require("ui/enums");
 import testModule = require("../ui-test");
 import layoutHelper = require("./layout-helper");
 import platform = require("platform");
+import commonTests = require("./common-layout-tests");
 
 var DELTA = 1;
 
@@ -641,6 +642,10 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
         // ```
         // </snippet>
     }
+
+    public test_percent_support() {
+        commonTests.percent_support_test(this);
+    }
 }
 
 export function createTestCase(): GridLayoutTest {

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

@@ -8,6 +8,7 @@ import enums = require("ui/enums");
 import utils = require("utils/utils");
 import testModule = require("../ui-test");
 import layoutHelper = require("./layout-helper");
+import commonTests = require("./common-layout-tests");
 
 export class StackLayoutTest extends testModule.UITest<StackLayout> {
 
@@ -204,6 +205,113 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
 
         // </snippet>
     }
+
+    private setup_percent(): layoutHelper.MyButton {
+        let layout = this.testView;
+        layout.removeChildren();
+        layout.width = layoutHelper.dp(200);
+        layout.height = layoutHelper.dp(200);
+
+        let btn = new layoutHelper.MyButton();
+        btn.horizontalAlignment = enums.HorizontalAlignment.left;
+        btn.verticalAlignment = enums.VerticalAlignment.top;
+        (<any>btn).width = "50%";
+        (<any>btn).height = "50%";
+        btn.margin = "10%";
+        btn.text = "1";
+        layout.addChild(btn);
+        return btn;
+    }
+
+    public test_percent_support_vertical() {
+        let btn = this.setup_percent();
+
+        this.waitUntilTestElementLayoutIsValid();
+
+        TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
+        TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
+
+        let bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.center;
+        btn.verticalAlignment = enums.VerticalAlignment.center;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 50, "Center layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "Center layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 150, "Center layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "Center layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
+        btn.verticalAlignment = enums.VerticalAlignment.stretch;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 50, "Stretch layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "Stretch layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 150, "Stretch layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "Stretch layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.right;
+        btn.verticalAlignment = enums.VerticalAlignment.bottom;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 80, "BottomRight layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "BottomRight layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 180, "BottomRight layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "BottomRight layout BOTTOM incorrect");
+    }
+
+    public test_percent_support_horizontal() {
+        let btn = this.setup_percent();
+        this.testView.orientation = enums.Orientation.horizontal;
+        this.waitUntilTestElementLayoutIsValid();
+
+        TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
+        TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
+
+        let bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.center;
+        btn.verticalAlignment = enums.VerticalAlignment.center;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "Center layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 50, "Center layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "Center layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 150, "Center layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
+        btn.verticalAlignment = enums.VerticalAlignment.stretch;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "Stretch layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 50, "Stretch layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "Stretch layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 150, "Stretch layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.right;
+        btn.verticalAlignment = enums.VerticalAlignment.bottom;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "BottomRight layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 80, "BottomRight layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "BottomRight layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 180, "BottomRight layout BOTTOM incorrect");
+    }
 }
 
 export function createTestCase(): StackLayoutTest {

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

@@ -1,9 +1,9 @@
 import TKUnit = require("../TKUnit");
-import viewModule = require("ui/core/view");
-import labelModule = require("ui/label");
+import {Label} from "ui/label";
 import helper = require("../ui/helper");
 import layoutHelper = require("./layout-helper");
 import testModule = require("../ui-test");
+import commonTests = require("./common-layout-tests");
 
 // <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
 // # WrapLayout
@@ -47,7 +47,7 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         var label;
         var i;
         for (i = 0; i < 2; i++) {
-            label = new labelModule.Label();
+            label = new Label();
             label.text = "" + i;
             label.id = "" + i;
 
@@ -222,6 +222,63 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
         layoutHelper.assertLayout(btn1, 0, 0, 50, 100, "button1");
         layoutHelper.assertLayout(btn2, 50, 0, 50, 80, "button2");
     }
+
+    public test_percent_support() {
+        let layout = this.testView;
+        layout.removeChildren();
+        layout.width = layoutHelper.dp(200);
+        layout.height = layoutHelper.dp(200);
+
+        let btn = new layoutHelper.MyButton();
+        btn.horizontalAlignment = enums.HorizontalAlignment.left;
+        btn.verticalAlignment = enums.VerticalAlignment.top;
+        (<any>btn).width = "50%";
+        (<any>btn).height = "50%";
+        btn.margin = "10%";
+        btn.text = "1";
+        layout.addChild(btn);
+
+        this.waitUntilTestElementLayoutIsValid();
+
+        TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
+        TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
+
+        let bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.center;
+        btn.verticalAlignment = enums.VerticalAlignment.center;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "Center layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "Center layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "Center layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "Center layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
+        btn.verticalAlignment = enums.VerticalAlignment.stretch;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "Stretch layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "Stretch layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "Stretch layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "Stretch layout BOTTOM incorrect");
+
+        btn.horizontalAlignment = enums.HorizontalAlignment.right;
+        btn.verticalAlignment = enums.VerticalAlignment.bottom;
+        this.waitUntilTestElementLayoutIsValid();
+
+        bounds = btn._getCurrentLayoutBounds();
+        TKUnit.assertEqual(bounds.left, 20, "BottomRight layout LEFT incorrect");
+        TKUnit.assertEqual(bounds.top, 20, "BottomRight layout TOP incorrect");
+        TKUnit.assertEqual(bounds.right, 120, "BottomRight layout RIGHT incorrect");
+        TKUnit.assertEqual(bounds.bottom, 120, "BottomRight layout BOTTOM incorrect");
+    }
 }
 
 export function createTestCase(): WrapLayoutTest {

org.nativescript.widgets.d.ts

@@ -4,6 +4,14 @@
             export class CommonLayoutParams extends android.widget.FrameLayout.LayoutParams {
                 constructor();
 
+                public widthPercent: number;
+                public heightPercent: number;
+
+                public topMarginPercent: number;
+                public leftMarginPercent: number;
+                public bottomMarginPercent: number;
+                public rightMarginPercent: number;
+
                 public left: number;
                 public top: number;
 

trace/trace.ts

@@ -38,10 +38,7 @@ export function setCategories(categories: string) {
 
 export function addCategories(categories: string) {
     var split = categories.split(",");
-    _categories = {};
-
-    var i;
-    for (i = 0; i < split.length; i++) {
+    for (let i = 0; i < split.length; i++) {
         _categories[split[i].trim()] = true;
     }
 }