Add styles test page.

apps/ui-tests-app/app.css

@@ -0,0 +1,3 @@
+#app {
+    background-color: lightblue;
+}

apps/ui-tests-app/css/import.css

@@ -0,0 +1,3 @@
+#import {
+    background-color: lightpink;
+}

apps/ui-tests-app/css/styles.css

@@ -0,0 +1,5 @@
+#page {
+    background-color: lightcoral;
+}
+
+@import url('~/css/import.css');

apps/ui-tests-app/css/styles.ts

@@ -0,0 +1,4 @@
+export function onLoaded(args) {
+    var page = args.object;
+    page.addCss("#property { background-color: lightsalmon; }");
+}

apps/ui-tests-app/css/styles.xml

@@ -0,0 +1,9 @@
+<Page loaded="onLoaded">
+  <WrapLayout>
+    <Button id="app" text="app" />
+    <Button id="inline" text="inline" style="background-color: lightgreen;" />
+    <Button id="page" text="page" />
+    <Button id="property" text="property" />
+    <Button id="import" text="import" />
+  </WrapLayout>
+</Page>

apps/ui-tests-app/image-view/roundbtn.xml

@@ -1,6 +1,6 @@
 <Page>
   <StackLayout>
     <Button text="ButtonCircle" style="width:200;height:200;color:white;border-radius:100;border-width:2;border-color:red;background-color:blue" />
-    <Button text="ButtonImage"  style="width:200;height:200;color:white;border-radius:100;border-width:2;border-color:blue;background-image:url('~/pages/red.png')" />
+    <Button text="ButtonImage"  style="width:200;height:200;color:white;border-radius:100;border-width:2;border-color:blue;background-image:url('~/image-view/red.png')" />
   </StackLayout>
 </Page>

apps/ui-tests-app/mainPage.ts

@@ -10,7 +10,7 @@ import trace = require("trace");
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "layouts", "modal-view", "bindings", "dialogs", "web-view", "image-view"];
+var list: string[] = ["pages", "bindings", "css", "dialogs", "layouts", "modal-view", "web-view", "image-view"];
 
 // basePath is auto-changed when building multiple apps
 var basePath = "";