Merge pull request #2968 from NativeScript/tsenov/uitests

Add new test page for layouts

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);

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);
+        }
+    }
+}

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>

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;