diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index 4a6eaabc0..11db2efcb 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -35,6 +35,7 @@ export function pageLoaded(args: EventData) {
     examples.set("measure-tests", "css/measure-tests");
     examples.set("all-uniform-border", "css/all-uniform-border");
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
+    examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
     //examples.set("border-playground", "css/border-playground");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
diff --git a/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
new file mode 100644
index 000000000..6cfde54b6
--- /dev/null
+++ b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
@@ -0,0 +1,40 @@
+import view = require("ui/core/view");
+import pages = require("ui/page");
+import { EventData } from "data/observable";
+import button = require("ui/button");
+
+var cssPercentage = " Page { margin:5% 10% 15% 8%; background-color: orange; font-size:8; } GridLayout { margin:3%; background-color: lightgreen; font-size:8; } StackLayout { border-color:red; border-width:1px; } StackLayout * { border-color:blue; border-width:1px; } GridLayout { border-color:green;border-width:1px; } .test1 { padding:10%; } .test2 { padding:10%; background-color:lightblue; } .test3 { margin:1% 2% 3% 4%; } WrapLayout { orientation:vertical; width:75%; height:45% } Button { color:black }"
+var cssWithouPercentage = " Page { margin:15 10 15 30; background-color: orange; font-size:8; } GridLayout { margin:3; background-color: lightgreen; font-size:8; } StackLayout { border-color:red; border-width:1px; } StackLayout * { border-color:blue; border-width:1px; } GridLayout { border-color:green;border-width:1px; } .test1 { padding:10; } .test2 { padding:10; background-color:lightblue; } .test3 { margin:10 20 30 40; } WrapLayout { orientation:vertical; width:100; height:120 } Button { color:black }"
+
+var isSCCWithPercentage = true;
+
+export function pageLoaded(args: EventData) {
+    let page = <pages.Page>args.object;
+    page.css = cssPercentage;
+    getBtnText(args);
+}
+
+export function applyTap(args: EventData) {
+    let page = <pages.Page>(<view.View>args.object).page;
+    let css = isSCCWithPercentage ? cssWithouPercentage : cssPercentage;
+    isSCCWithPercentage = !isSCCWithPercentage;
+    console.log(css);
+    page.css = css;
+    getBtnText(args);
+}
+
+function getBtnText(args: EventData) {
+    var parent = (<view.View>args.object).parent;
+    if (parent) {
+        var btn = <button.Button>view.getViewById(parent, "button");
+        if (btn) {
+            if (isSCCWithPercentage) {
+                btn.text = "css with %";
+            } else {
+                btn.text = "css without %";
+            }
+
+            console.log(btn.text);
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/margins-paddings-with-percentage.xml b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.xml
new file mode 100644
index 000000000..89f5e1cbc
--- /dev/null
+++ b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.xml
@@ -0,0 +1,30 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <GridLayout rows="40,*, *, *, *">
+    <StackLayout>
+      <Button text="Change css of page" tap="applyTap" id="button"></Button>
+    </StackLayout>
+    <StackLayout row="1">
+      <StackLayout class="test1">
+        <Label text="padding 30" />
+      </StackLayout>
+    </StackLayout>
+    <StackLayout row="2">
+      <DockLayout class="test2">
+        <Label text="DockLayout padding: 30margin" autocorrect="false"/>
+      </DockLayout>
+    </StackLayout>
+    <StackLayout row="3">
+      <AbsoluteLayout class="test3">
+        <Label text="AbsoluteLayout margin: 30"/>
+      </AbsoluteLayout>
+    </StackLayout>
+    <StackLayout row="4">
+      <WrapLayout orientation="vertical">
+        <Label text="Label in WrapLayout " autocorrect="false"/>
+        <Label text="width=75%" autocorrect="false"/>
+        <Label text="height=45%" autocorrect="false"/>
+        <Label text="test" autocorrect="false"/>
+      </WrapLayout>
+    </StackLayout>
+  </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/tab-view/main-page.ts b/apps/app/ui-tests-app/tab-view/main-page.ts
index ec4b09fee..deba857b5 100644
--- a/apps/app/ui-tests-app/tab-view/main-page.ts
+++ b/apps/app/ui-tests-app/tab-view/main-page.ts
@@ -17,7 +17,7 @@ export function pageLoaded(args: EventData) {
     examples.set("tabSelected", "tab-view/selected");
     examples.set("tabStyle", "tab-view/all");
     examples.set("tabmore", "tab-view/tab-view-more");
-    examples.set("taViewCss", "tab-view/tab-view-css");
+    examples.set("tabViewCss", "tab-view/tab-view-css");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;