Merge pull request #407 from NativeScript/custom-components-css

CSS support for custom components added

apps/tests/ui/style/style-tests.ts

@@ -778,6 +778,17 @@ export var test_CSS_isAppliedOnPage_From_Import = function () {
     });
 }
 
+export var test_CSS_isAppliedOnPage_From_addCssFile = function () {
+    var testButton = new buttonModule.Button();
+    testButton.text = "Test";
+
+    helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
+        var page: pageModule.Page = <pageModule.Page> views[1];
+        page.addCssFile("~/ui/style/test.css");
+        helper.assertViewBackgroundColor(page, "#FF0000");
+    });
+}
+
 // <snippet module="ui/styling" title="styling">
 // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 
 // </snippet>

apps/tests/xml-declaration/mymodule/MyControl.css

@@ -0,0 +1,3 @@
+.MyStackLayout {
+    background-color: red;
+}

apps/tests/xml-declaration/mymodule/MyControl.ts

@@ -18,5 +18,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
 
         this.addChild(lbl);
         this.addChild(btn);
+
+        this.cssClass = "MyStackLayout";
     }
 }

apps/tests/xml-declaration/mymodulewithxml/MyControl.css

@@ -0,0 +1,3 @@
+.MySecondCustomStackLayout {
+    background-color: green;
+}

apps/tests/xml-declaration/mymodulewithxml/MyControl.xml

@@ -1,4 +1,4 @@
-<StackLayout xmlns:customControls="xml-declaration/mymodule">
+<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
   <Label id="Label1" text="mymodulewithxml" />
   <Button text="Click!" tap="buttonTap2" /> 
 </StackLayout>

apps/tests/xml-declaration/xml-declaration-tests.ts

@@ -50,6 +50,31 @@ export function test_loadWithOptionsNoXML() {
     TKUnit.assert(v instanceof view.View, "Expected result: View; Actual result: " + v + ";");
 };
 
+export function test_loadWithOptionsNoXML_CSSIsApplied() {
+    var newPage: page.Page;
+    var pageFactory = function (): page.Page {
+        newPage = new page.Page();
+
+        newPage.content = builder.load({
+            path: "~/xml-declaration/mymodule",
+            name: "MyControl",
+            exports: exports,
+            page: newPage
+        });
+
+        return newPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.assert(newPage.isLoaded, "The page should be loaded here.");
+    try {
+        helper.assertViewBackgroundColor(newPage.content, "#FF0000");
+    }
+    finally {
+        helper.goBack();
+    }
+};
+
 export function test_loadWithOptionsWithXML() {
     var v = builder.load({
         path: "~/xml-declaration/mymodulewithxml",
@@ -59,6 +84,31 @@ export function test_loadWithOptionsWithXML() {
     TKUnit.assert(v instanceof view.View, "Expected result: View; Actual result: " + v + ";");
 };
 
+export function test_loadWithOptionsWithXML_CSSIsApplied() {
+    var newPage: page.Page;
+    var pageFactory = function (): page.Page {
+        newPage = new page.Page();
+
+        newPage.content = builder.load({
+            path: "~/xml-declaration/mymodulewithxml",
+            name: "MyControl",
+            exports: exports,
+            page: newPage
+        });
+
+        return newPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.assert(newPage.isLoaded, "The page should be loaded here.");
+    try {
+        helper.assertViewBackgroundColor(newPage.content, "#008000");
+    }
+    finally {
+        helper.goBack();
+    }
+};
+
 export function test_loadWithOptionsFromTNS() {
     var v = builder.load({
         path: "ui/label",