diff --git a/apps/app/ui-tests-app/css/layouts-border-overlap.xml b/apps/app/ui-tests-app/css/layouts-border-overlap.xml
index fde4f543d..77046656e 100644
--- a/apps/app/ui-tests-app/css/layouts-border-overlap.xml
+++ b/apps/app/ui-tests-app/css/layouts-border-overlap.xml
@@ -1,25 +1,25 @@
 <Page>
     <GridLayout rows="*,*,*,*,*" columns="*,*,*" id="root">
 
-        <StackLayout  class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
-        <StackLayout  class="s1" row="0" col="1"><Label textWrap="true" text="padding: 5;"/></StackLayout>
-        <StackLayout  class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></StackLayout>
+        <StackLayout  class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 20;"/></StackLayout>
+        <StackLayout  class="s1" row="0" col="1"><Label textWrap="true" text="padding: 20;"/></StackLayout>
+        <StackLayout  class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></StackLayout>
         
-        <AbsoluteLayout  class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 5;"/></AbsoluteLayout>
-        <AbsoluteLayout  class="s1" row="1" col="1"><Label textWrap="true" text="padding: 5;"/></AbsoluteLayout>
-        <AbsoluteLayout  class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></AbsoluteLayout>
+        <AbsoluteLayout  class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 20;"/></AbsoluteLayout>
+        <AbsoluteLayout  class="s1" row="1" col="1"><Label textWrap="true" text="padding: 20;"/></AbsoluteLayout>
+        <AbsoluteLayout  class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></AbsoluteLayout>
         
-        <DockLayout  class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 5;"/></DockLayout>
-        <DockLayout  class="s1" row="2" col="1"><Label textWrap="true" text="padding: 5;"/></DockLayout>
-        <DockLayout  class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></DockLayout>
+        <DockLayout  class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 20;"/></DockLayout>
+        <DockLayout  class="s1" row="2" col="1"><Label textWrap="true" text="padding: 20;"/></DockLayout>
+        <DockLayout  class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></DockLayout>
         
-        <GridLayout  class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 5;"/></GridLayout>
-        <GridLayout  class="s1" row="3" col="1"><Label textWrap="true" text="padding: 5;"/></GridLayout>
-        <GridLayout  class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></GridLayout>
+        <GridLayout  class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 20;"/></GridLayout>
+        <GridLayout  class="s1" row="3" col="1"><Label textWrap="true" text="padding: 20;"/></GridLayout>
+        <GridLayout  class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></GridLayout>
         
-        <WrapLayout  class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 5;"/></WrapLayout>
-        <WrapLayout  class="s1" row="4" col="1"><Label textWrap="true" text="padding: 5;"/></WrapLayout>
-        <WrapLayout  class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></WrapLayout>
+        <WrapLayout  class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 20;"/></WrapLayout>
+        <WrapLayout  class="s1" row="4" col="1"><Label textWrap="true" text="padding: 20;"/></WrapLayout>
+        <WrapLayout  class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></WrapLayout>
         
     </GridLayout>
 </Page>
\ No newline at end of file
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
index be1d0653c..1996d66d4 100644
--- a/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
+++ b/apps/app/ui-tests-app/css/margins-paddings-with-percentage.ts
@@ -3,8 +3,29 @@ import * as pages from "tns-core-modules/ui/page";
 import { EventData } from "tns-core-modules/data/observable";
 import * as button from "tns-core-modules/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 }"
+const 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: 1; } 
+    StackLayout * { border-color: blue; border-width: 1; } 
+    GridLayout { border-color: green; border-width: 1; } 
+    .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 }`;
+
+const 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: 1; } 
+    StackLayout * { border-color: blue; border-width: 1; } 
+    GridLayout { border-color: green; border-width: 1; } 
+    .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;