Style tests fixes

tests/app/testRunner.ts

@@ -66,7 +66,7 @@ allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
 allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
 allTests["FRAME"] = require("./ui/frame/frame-tests");
 allTests["VIEW"] = require("./ui/view/view-tests");
-// allTests["STYLE"] = require("./ui/styling/style-tests");
+allTests["STYLE"] = require("./ui/styling/style-tests");
 // allTests["VISUAL-STATE"] = require("./ui/styling/visual-state-tests");
 // allTests["VALUE-SOURCE"] = require("./ui/styling/value-source-tests");
 allTests["CSS-SELECTOR-PARSER"] = require("./ui/styling/css-selector-parser");

tests/app/ui/styling/style-tests.ts

@@ -13,13 +13,13 @@ import { resolveFileNameFromUrl } from "ui/styling/style-scope";
 import { unsetValue } from "ui/core/view";
 
 export function test_css_dataURI_is_applied_to_backgroundImageSource() {
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
 
     helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
-        var page = <pageModule.Page>views[1];
+        const page = <pageModule.Page>views[1];
         page.css = "StackLayout { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC;') }";
 
-        var value = stack.style.backgroundInternal;
+        const value = stack.style.backgroundInternal;
 
         TKUnit.assert(types.isDefined(value), "Style background-image not loaded correctly from data URI.");
         TKUnit.assert(types.isDefined(value.image), "Style background-image not loaded correctly from data URI.");
@@ -27,22 +27,22 @@ export function test_css_dataURI_is_applied_to_backgroundImageSource() {
 }
 
 export function test_css_is_applied_to_normal_properties() {
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
 
     helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
-        var page = <pageModule.Page>views[1];
-        var expected = "horizontal";
+        const page = <pageModule.Page>views[1];
+        const expected = "horizontal";
         page.css = `StackLayout { orientation: ${expected}; }`;
         TKUnit.assertEqual(stack.orientation, expected);
     });
 }
 
 export function test_css_is_applied_to_special_properties() {
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
 
     helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
-        var page = <pageModule.Page>views[1];
-        var expected = "test";
+        const page = <pageModule.Page>views[1];
+        const expected = "test";
         page.css = `StackLayout { class: ${expected}; }`;
         TKUnit.assertEqual(stack.className, expected);
     });
@@ -86,44 +86,44 @@ export function test_applies_css_changes_to_application_rules_after_page_load_ne
 
 // Test for inheritance in different containers
 export function test_css_is_applied_inside_StackLayout() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
     stack.addChild(testButton);
 
     helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
-        var page = <pageModule.Page>views[1];
+        const page = <pageModule.Page>views[1];
         page.css = "button { color: red; }";
         helper.assertViewColor(testButton, "#FF0000");
     });
 }
 
 export function test_css_is_applied_inside_TabView() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
-    var tabView = new tabViewModule.TabView();
+    const tabView = new tabViewModule.TabView();
     let item = new tabViewModule.TabViewItem();
     item.title = "First tab";
     item.view = testButton;
     tabView.items = [item];
 
     helper.buildUIAndRunTest(tabView, function (views: Array<viewModule.View>) {
-        var page = <pageModule.Page>views[1];
+        const page = <pageModule.Page>views[1];
         page.css = "button { color: red; }";
         helper.assertViewColor(testButton, "#FF0000");
     });
 }
 
 export function test_css_is_applied_inside_NestedControls() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
-    var rootLayout = new stackModule.StackLayout();
-    var nestedLayout = new stackModule.StackLayout();
+    const rootLayout = new stackModule.StackLayout();
+    const nestedLayout = new stackModule.StackLayout();
     rootLayout.addChild(nestedLayout);
     nestedLayout.addChild(testButton);
 
     helper.buildUIAndRunTest(rootLayout, function (views: Array<viewModule.View>) {
-        var page = <pageModule.Page>views[1];
+        const page = <pageModule.Page>views[1];
         page.css = "button { color: red; }";
         helper.assertViewColor(testButton, "#FF0000");
     });
@@ -132,7 +132,7 @@ export function test_css_is_applied_inside_NestedControls() {
 // Basic selector tests
 export function test_setting_css() {
     // >> article-setting-css-page
-    var page = new pageModule.Page();
+    const page = new pageModule.Page();
     page.css = ".title { font-size: 20 }";
     // << article-setting-css-page
 
@@ -184,7 +184,7 @@ export function test_class_selector() {
     btnWithNoClass = new buttonModule.Button();
     // << article-using-class-selector
 
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
     page.content = stack;
     stack.addChild(btnWithClass);
     stack.addChild(btnWithNoClass);
@@ -203,7 +203,7 @@ export function test_multiple_class_selector() {
     btnWithClasses = new buttonModule.Button();
     btnWithClasses.className = "style1 style2";
 
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
     page.content = stack;
     stack.addChild(btnWithClasses);
 
@@ -228,7 +228,7 @@ export function test_id_selector() {
     btnWithNoId = new buttonModule.Button();
     // << article-using-id-selector
 
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
     page.content = stack;
     stack.addChild(btnWithId);
     stack.addChild(btnWithNoId);
@@ -242,7 +242,7 @@ export function test_state_selector() {
     let page = helper.getClearCurrentPage();
     page.style.color = unsetValue;
     let btn: buttonModule.Button;
-    var testStack = new stackModule.StackLayout();
+    const testStack = new stackModule.StackLayout();
     page.content = testStack;
 
     btn = new buttonModule.Button();
@@ -256,7 +256,7 @@ export function test_state_selector() {
 export function test_type_and_state_selector() {
     let page = helper.getClearCurrentPage();
     page.style.color = unsetValue;
-    var btn: buttonModule.Button;
+    let btn: buttonModule.Button;
 
     // >>article-using-state-selector
     page.css = "button:pressed { color: red; }";
@@ -264,7 +264,7 @@ export function test_type_and_state_selector() {
     //// Will be red when pressed
     btn = new buttonModule.Button();
     // << article-using-state-selector
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
     page.content = stack;
     stack.addChild(btn);
 
@@ -337,18 +337,18 @@ export function test_restore_original_values_when_state_is_changed() {
     helper.assertViewColor(btn, "#0000FF");
 }
 
-export var test_composite_selector_type_and_class = function () {
+export const test_composite_selector_type_and_class = function () {
     // Arrange
-    var testStack = new stackModule.StackLayout();
+    const testStack = new stackModule.StackLayout();
 
-    var btnWithClass = new buttonModule.Button();
+    const btnWithClass = new buttonModule.Button();
     btnWithClass.className = "test";
     testStack.addChild(btnWithClass);
 
-    var btnWithNoClass = new buttonModule.Button();
+    const btnWithNoClass = new buttonModule.Button();
     testStack.addChild(btnWithNoClass);
 
-    var lblWithClass = new labelModule.Label();
+    const lblWithClass = new labelModule.Label();
     lblWithClass.className = "test";
     testStack.addChild(lblWithClass);
 
@@ -364,16 +364,16 @@ export var test_composite_selector_type_and_class = function () {
     helper.buildUIAndRunTest(testStack, testFunc, testCss);
 }
 
-export var test_composite_selector_type_class_state = function () {
-    var testStack = new stackModule.StackLayout();
-    var btnWithClass = new buttonModule.Button();
+export const test_composite_selector_type_class_state = function () {
+    const testStack = new stackModule.StackLayout();
+    const btnWithClass = new buttonModule.Button();
     btnWithClass.className = "test";
     testStack.addChild(btnWithClass);
 
-    var btnWithNoClass = new buttonModule.Button();
+    const btnWithNoClass = new buttonModule.Button();
     testStack.addChild(btnWithNoClass);
 
-    var lblWithClass = new labelModule.Label();
+    const lblWithClass = new labelModule.Label();
     lblWithClass.className = "test";
     testStack.addChild(lblWithClass);
 
@@ -394,7 +394,7 @@ export var test_composite_selector_type_class_state = function () {
     helper.buildUIAndRunTest(testStack, testFunc, testCss);
 }
 
-export var test_style_is_applied_when_control_is_added_after_load = function () {
+export const test_style_is_applied_when_control_is_added_after_load = function () {
     let page = helper.getClearCurrentPage();
     let btn = new buttonModule.Button();
     let testStack = new stackModule.StackLayout();
@@ -406,7 +406,7 @@ export var test_style_is_applied_when_control_is_added_after_load = function ()
     TKUnit.assertEqual(btn.style.color.hex, "#FF0000", "Color property not applied correctly.");
 }
 
-var changeIdOrClassTestCss =
+const changeIdOrClassTestCss =
     "button { background-color: #111111 } " +
     ".button-class { background-color: #222222 } " +
     ".button-class-two { background-color: #333333 } " +
@@ -414,13 +414,13 @@ var changeIdOrClassTestCss =
     "#myButtonTwo { background-color: #555555 } ";
 
 export function test_styles_are_updated_when_cssClass_is_set() {
-    var testStack = new stackModule.StackLayout();
-    var btn = new buttonModule.Button();
-    var btn2 = new buttonModule.Button();
+    const testStack = new stackModule.StackLayout();
+    const btn = new buttonModule.Button();
+    const btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
 
-    var testFunc = () => {
+    const testFunc = () => {
         helper.assertViewBackgroundColor(btn, "#111111");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
@@ -434,14 +434,14 @@ export function test_styles_are_updated_when_cssClass_is_set() {
 }
 
 export function test_styles_are_updated_when_cssClass_is_changed() {
-    var testStack = new stackModule.StackLayout();
-    var btn = new buttonModule.Button();
+    const testStack = new stackModule.StackLayout();
+    const btn = new buttonModule.Button();
     btn.className = "button-class";
-    var btn2 = new buttonModule.Button();
+    const btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
 
-    var testFunc = () => {
+    const testFunc = () => {
         helper.assertViewBackgroundColor(btn, "#222222");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
@@ -455,14 +455,14 @@ export function test_styles_are_updated_when_cssClass_is_changed() {
 }
 
 export function test_styles_are_updated_when_cssClass_is_cleared() {
-    var testStack = new stackModule.StackLayout();
-    var btn = new buttonModule.Button();
+    const testStack = new stackModule.StackLayout();
+    const btn = new buttonModule.Button();
     btn.className = "button-class";
-    var btn2 = new buttonModule.Button();
+    const btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
 
-    var testFunc = () => {
+    const testFunc = () => {
         helper.assertViewBackgroundColor(btn, "#222222");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
@@ -476,13 +476,13 @@ export function test_styles_are_updated_when_cssClass_is_cleared() {
 }
 
 export function test_styles_are_updated_when_id_is_set() {
-    var testStack = new stackModule.StackLayout();
-    var btn = new buttonModule.Button();
-    var btn2 = new buttonModule.Button();
+    const testStack = new stackModule.StackLayout();
+    const btn = new buttonModule.Button();
+    const btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
 
-    var testFunc = () => {
+    const testFunc = () => {
         helper.assertViewBackgroundColor(btn, "#111111");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
@@ -496,14 +496,14 @@ export function test_styles_are_updated_when_id_is_set() {
 }
 
 export function test_styles_are_updated_when_id_is_changed() {
-    var testStack = new stackModule.StackLayout();
-    var btn = new buttonModule.Button();
+    const testStack = new stackModule.StackLayout();
+    const btn = new buttonModule.Button();
     btn.id = "myButton";
-    var btn2 = new buttonModule.Button();
+    const btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
 
-    var testFunc = () => {
+    const testFunc = () => {
         helper.assertViewBackgroundColor(btn, "#444444");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
@@ -517,14 +517,14 @@ export function test_styles_are_updated_when_id_is_changed() {
 }
 
 export function test_styles_are_updated_when_id_is_cleared() {
-    var testStack = new stackModule.StackLayout();
-    var btn = new buttonModule.Button();
+    const testStack = new stackModule.StackLayout();
+    const btn = new buttonModule.Button();
     btn.id = "myButton";
-    var btn2 = new buttonModule.Button();
+    const btn2 = new buttonModule.Button();
     testStack.addChild(btn);
     testStack.addChild(btn2);
 
-    var testFunc = () => {
+    const testFunc = () => {
         helper.assertViewBackgroundColor(btn, "#444444");
         helper.assertViewBackgroundColor(btn2, "#111111");
 
@@ -537,9 +537,9 @@ export function test_styles_are_updated_when_id_is_cleared() {
     helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
 }
 
-var typeSelector = "button { color: blue } ";
-var classSelector = ".button-class { color: green } ";
-var idSelector = "#myButton { color: red } ";
+const typeSelector = "button { color: blue } ";
+const classSelector = ".button-class { color: green } ";
+const idSelector = "#myButton { color: red } ";
 
 export function test_selector_priorities_1() {
     testSelectorsPrioritiesTemplate(typeSelector + classSelector + idSelector);
@@ -572,7 +572,7 @@ function testSelectorsPrioritiesTemplate(css: string) {
     let btnWithClass: buttonModule.Button;
     let btnWithId: buttonModule.Button;
 
-    var testStack = new stackModule.StackLayout();
+    const testStack = new stackModule.StackLayout();
     page.content = testStack;
 
     btn = new buttonModule.Button();
@@ -608,9 +608,9 @@ function testButtonPressedStateIsRed(btn: buttonModule.Button) {
 }
 
 export function test_setInlineStyle_setsLocalValues() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
-    var stack = new stackModule.StackLayout();
+    const stack = new stackModule.StackLayout();
     stack.addChild(testButton);
 
     helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
@@ -620,7 +620,7 @@ export function test_setInlineStyle_setsLocalValues() {
 }
 
 export function test_setStyle_throws() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
 
     TKUnit.assertThrows(function () {
         (<any>testButton).style = "background-color: red;";
@@ -628,50 +628,50 @@ export function test_setStyle_throws() {
 }
 
 export function test_CSS_isAppliedOnPage() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
 
     helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
-        var page: pageModule.Page = <pageModule.Page>views[1];
+        const page: pageModule.Page = <pageModule.Page>views[1];
         page.css = "page { background-color: red; }";
         helper.assertViewBackgroundColor(page, "#FF0000");
     });
 }
 
 export function test_CSS_isAppliedOnPage_From_Import() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
 
     helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
-        var page: pageModule.Page = <pageModule.Page>views[1];
+        const page: pageModule.Page = <pageModule.Page>views[1];
         page.css = "@import url('~/ui/styling/test.css');";
         helper.assertViewBackgroundColor(page, "#FF0000");
     });
 }
 
 export function test_CSS_isAppliedOnPage_From_Import_Without_Url() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
 
     helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
-        var page: pageModule.Page = <pageModule.Page>views[1];
+        const page: pageModule.Page = <pageModule.Page>views[1];
         page.css = "@import '~/ui/styling/test.css';";
         helper.assertViewBackgroundColor(page, "#FF0000");
     });
 }
 
 export function test_CSS_isAppliedOnPage_From_addCssFile() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
 
     helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
-        var page: pageModule.Page = <pageModule.Page>views[1];
+        const page: pageModule.Page = <pageModule.Page>views[1];
         page.addCssFile("~/ui/styling/test.css");
         helper.assertViewBackgroundColor(page, "#FF0000");
     });
 }
 
-var invalidCSS = ".invalid { " +
+const invalidCSS = ".invalid { " +
     "color: invalidValue; " +
     "background-color: invalidValue; " +
     "border-color: invalidValue; " +
@@ -689,24 +689,24 @@ var invalidCSS = ".invalid { " +
     "}";
 
 export function test_set_invalid_CSS_values_dont_cause_crash() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
     testButton.className = "invalid";
 
-    helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
+    helper.buildUIAndRunTest(testButton, (views: Array<viewModule.View>) => {
         TKUnit.assertEqual(30, testButton.style.fontSize);
     }, invalidCSS);
 }
 
 // Check Mixed, Upper and lower case properties
-var casedCSS = ".cased {" +
+const casedCSS = ".cased {" +
     "cOlOr: blue; " +
     "FONT-SIZE: 30; " +
     "background-color: red; " +
     "}";
 
 export function test_set_mixed_CSS_cases_works() {
-    var testButton = new buttonModule.Button();
+    const testButton = new buttonModule.Button();
     testButton.text = "Test";
     testButton.className = "cased";
 

tns-core-modules/color/color-common.ts

@@ -2,8 +2,8 @@
 import * as types from "utils/types";
 import * as knownColors from "color/known-colors";
 
-var AMP = "#";
-var HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i;
+const SHARP = "#";
+const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i;
 
 export class Color implements definition.Color {
     private _a: number;
@@ -19,7 +19,7 @@ export class Color implements definition.Color {
     constructor(a: number, r: number, g: number, b: number);
     constructor() {
         if (arguments.length === 1) {
-            var arg = arguments[0];
+            const arg = arguments[0];
             if (types.isString(arg)) {
                 if (isRgbOrRgba(arg)) {
                     this._argb = argbFromRgbOrRgba(arg);
@@ -28,10 +28,12 @@ export class Color implements definition.Color {
                     this._hex = knownColors.getKnownColor(arg);
                     this._name = arg;
                     this._argb = this._argbFromString(this._hex);
-                } else {
+                } else if (HEX_REGEX.test(arg)) {
                     // The parameter is a "#AARRGGBB" formatted string
                     this._hex = this._normalizeHex(arg);
                     this._argb = this._argbFromString(this._hex);
+                } else {
+                    throw new Error("Invalid color: " + arg);
                 }
             } else if (types.isNumber(arg)) {
                 // The parameter is a 32-bit unsigned integer where each 8 bits specify a color component
@@ -131,11 +133,11 @@ export class Color implements definition.Color {
     }
 
     private _buildHex(): string {
-        return AMP + this._componentToHex(this._a) + this._componentToHex(this._r) + this._componentToHex(this._g) + this._componentToHex(this._b);
+        return SHARP + this._componentToHex(this._a) + this._componentToHex(this._r) + this._componentToHex(this._g) + this._componentToHex(this._b);
     }
 
     private _componentToHex(component: number): string {
-        var hex = component.toString(16);
+        let hex = component.toString(16);
         if (hex.length === 1) {
             hex = "0" + hex;
         }
@@ -161,7 +163,7 @@ export class Color implements definition.Color {
     }
 
     private _normalizeHex(hexStr: string): string {
-        if (hexStr.charAt(0) === AMP && hexStr.length === 4) {
+        if (hexStr.charAt(0) === SHARP && hexStr.length === 4) {
             // Duplicate each char after the #, so "#123" becomes "#112233"
             hexStr = hexStr.charAt(0)
                 + hexStr.charAt(1) + hexStr.charAt(1)
@@ -177,18 +179,18 @@ export class Color implements definition.Color {
 }
 
 function isRgbOrRgba(value: string): boolean {
-    var toLower = value.toLowerCase();
+    const toLower = value.toLowerCase();
     return (toLower.indexOf("rgb(") === 0 || toLower.indexOf("rgba(") === 0) && toLower.indexOf(")") === (toLower.length - 1);
 }
 
 function argbFromRgbOrRgba(value: string): number {
-    var toLower = value.toLowerCase();
-    var parts = toLower.replace("rgba(", "").replace("rgb(", "").replace(")", "").trim().split(",");
+    const toLower = value.toLowerCase();
+    const parts = toLower.replace("rgba(", "").replace("rgb(", "").replace(")", "").trim().split(",");
 
-    var r = 255,
-        g = 255,
-        b = 255,
-        a = 255;
+    let r = 255;
+    let g = 255;
+    let b = 255;
+    let a = 255;
 
     if (parts[0]) {
         r = parseInt(parts[0].trim());
@@ -201,7 +203,7 @@ function argbFromRgbOrRgba(value: string): number {
     if (parts[2]) {
         b = parseInt(parts[2].trim());
     }
-    
+
     if (parts[3]) {
         a = Math.round(parseFloat(parts[3].trim()) * 255);
     }

tns-core-modules/ui/core/properties.ts

@@ -507,10 +507,10 @@ export class CssProperty<T extends Style, U> implements definitions.CssProperty<
                 value = defaultValue;
                 delete this[sourceKey];
             } else {
-                this[sourceKey] = ValueSource.Css;
                 if (valueConverter && typeof value === "string") {
                     value = valueConverter(value);
                 }
+                this[sourceKey] = ValueSource.Css;
             }
 
             const currentValue: U = key in this ? this[key] : defaultValue;

tns-core-modules/ui/core/view-base.ts

@@ -123,6 +123,9 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     get style(): Style {
         return this._style;
     }
+    set style(value) {
+        throw new Error("View.style property is read-only.");
+    }
 
     get android(): any {
         return undefined;

tns-core-modules/ui/frame/frame.ios.ts

@@ -34,7 +34,7 @@ export class Frame extends FrameBase {
     public get _context(): any {
         return FRAME_CONTEXT;
     }
-    public set _context(value:any) {
+    public set _context(value: any) {
         throw new Error("Frame _context is readonly");
     }
 

tns-core-modules/ui/styling/style-scope.ts

@@ -1,4 +1,4 @@
-import { ViewBase, resetStyleProperties } from "ui/core/view-base";
+import { ViewBase, resetCSSProperties } from "ui/core/view-base";
 import { SyntaxTree, Keyframes, parse as parseCss, Node } from "css";
 import { RuleSet, SelectorsMap, SelectorCore, SelectorsMatch, ChangeMap, fromAstNodes } from "ui/styling/css-selector";
 import { KeyframeAnimationInfo, KeyframeAnimation } from "ui/animation/keyframe-animation";
@@ -22,7 +22,7 @@ export class CssState {
 
     public apply(): void {
         this.view._cancelAllAnimations();
-        resetStyleProperties(this.view.style);
+        resetCSSProperties(this.view.style);
 
         let matchingSelectors = this.match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true);
         if (this.view.inlineStyleSelector) {
@@ -37,9 +37,13 @@ export class CssState {
         ruleset.declarations.forEach(d => {
             let name = `css-${d.property}`;
             if (name in style) {
-                style[name] = d.value;
+                try {
+                    style[name] = d.value;
+                } catch (e) {
+                    traceWrite(`Failed to apply property [${d.property}] with value [${d.value}] to ${view}. ${e}`, traceCategories.Error, traceMessageType.error)
+                }
             } else {
-                view[name] = d.value;
+                view[d.property] = d.value;
             }
         });
 
@@ -145,7 +149,7 @@ export class StyleScope {
                 let url = match && match[2];
 
                 if (url !== null && url !== undefined) {
-		    let appDirectory = knownFolders.currentApp().path;
+                    let appDirectory = knownFolders.currentApp().path;
                     let fileName = resolveFileNameFromUrl(url, appDirectory, File.exists);
 
                     if (fileName !== null) {