From 6c735aff10edc0f89e6c90c0f1711546fe19f21d Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 3 Feb 2017 14:43:48 +0200 Subject: [PATCH] View and css proeprties tests --- tests/app/ui/helper.ts | 2 +- tests/app/ui/view/view-tests-common.ts | 297 +++++++++++++++++++------ tns-core-modules/ui/core/view-base.ts | 21 +- 3 files changed, 238 insertions(+), 82 deletions(-) diff --git a/tests/app/ui/helper.ts b/tests/app/ui/helper.ts index 43df49b1c..b0322e52a 100644 --- a/tests/app/ui/helper.ts +++ b/tests/app/ui/helper.ts @@ -62,9 +62,9 @@ export function do_PageTest_WithStackLayout_AndButton(test: (views: [page.Page, export function buildUIAndRunTest(controlToTest: T, testFunction: (views: [T, page.Page]) => void, pageCss?) { clearPage(); let newPage = getCurrentPage(); - newPage.content = controlToTest; newPage.css = pageCss; + newPage.content = controlToTest; testFunction([controlToTest, newPage]); newPage.content = null; diff --git a/tests/app/ui/view/view-tests-common.ts b/tests/app/ui/view/view-tests-common.ts index 2c94b3913..a21883eac 100644 --- a/tests/app/ui/view/view-tests-common.ts +++ b/tests/app/ui/view/view-tests-common.ts @@ -1,5 +1,5 @@ import * as TKUnit from "../../TKUnit"; -import { View, eachDescendant, getViewById, InheritedProperty } from "ui/core/view"; +import { View, eachDescendant, getViewById, InheritedProperty, CssProperty, Property, Style } from "ui/core/view"; import { topmost } from "ui/frame"; import { Page } from "ui/page"; import { Button } from "ui/button"; @@ -15,7 +15,7 @@ import * as observable from "data/observable"; import * as bindable from "ui/core/bindable"; import * as definition from "./view-tests"; -export const test_eachDescendant = function () { +export function test_eachDescendant() { const test = function (views: Array) { // traverse the visual tree and verify the hierarchy @@ -34,7 +34,7 @@ export const test_eachDescendant = function () { helper.do_PageTest_WithButton(test); }; -export const test_getViewById_Static = function () { +export function test_getViewById_Static() { const test = function (views: Array) { views[1].id = "myLayout"; @@ -47,7 +47,7 @@ export const test_getViewById_Static = function () { helper.do_PageTest_WithButton(test); }; -export const test_getViewById_Instance = function () { +export function test_getViewById_Instance() { const test = function (views: Array) { views[1].id = "myLayout"; @@ -60,7 +60,7 @@ export const test_getViewById_Instance = function () { helper.do_PageTest_WithButton(test); }; -export const test_eachDescendant_Break_Iteration = function () { +export function test_eachDescendant_Break_Iteration() { const test = function (views: Array) { // traverse the visual tree and verify the hierarchy let counter = 0; @@ -77,7 +77,7 @@ export const test_eachDescendant_Break_Iteration = function () { helper.do_PageTest_WithButton(test); }; -export const test_parent_IsValid_WhenAttached_ToVisualTree = function () { +export function test_parent_IsValid_WhenAttached_ToVisualTree() { const test = function (views: Array) { // views[0] is a Page instance, its parent should be the topmost frame TKUnit.assert(types.isDefined(views[0].parent)); @@ -91,7 +91,7 @@ export const test_parent_IsValid_WhenAttached_ToVisualTree = function () { helper.do_PageTest_WithButton(test); }; -export const test_parent_IsReset_WhenDetached_FromVisualTree = function () { +export function test_parent_IsReset_WhenDetached_FromVisualTree() { let cachedViews: Array; const test = function (views: Array) { @@ -105,20 +105,20 @@ export const test_parent_IsReset_WhenDetached_FromVisualTree = function () { TKUnit.assert(cachedViews[2].parent === cachedViews[1]); }; -export const test_domId_IsUnique = function () { +export function test_domId_IsUnique() { const btn = new Button(); const topframe = topmost(); TKUnit.assert(btn._domId !== topframe._domId); TKUnit.assert(btn._domId !== topframe.currentPage._domId); }; -export const test_Id_WillNotCrash_WhenSetToNumber = function () { +export function test_Id_WillNotCrash_WhenSetToNumber() { const btn = new Button(); btn.id = "1"; TKUnit.assert(btn.id === "1"); }; -export const test_event_LoadedUnloaded_IsRaised = function () { +export function test_event_LoadedUnloaded_IsRaised() { const test = function (views: Array) { let i; for (i = 0; i < views.length; i++) { @@ -166,7 +166,7 @@ export function test_bindingContext_IsInherited() { topmost().bindingContext = undefined; } -export const test_isAddedToNativeVisualTree_IsUpdated = function () { +export function test_isAddedToNativeVisualTree_IsUpdated() { const test = function (views: Array) { for (let i = 0; i < views.length; i++) { @@ -185,7 +185,7 @@ export const test_isAddedToNativeVisualTree_IsUpdated = function () { helper.do_PageTest_WithStackLayout_AndButton(test); }; -export const test_addView_WillThrow_IfView_IsAlreadyAdded = function () { +export function test_addView_WillThrow_IfView_IsAlreadyAdded() { const test = function (views: Array) { const newButton = new Button(); views[1]._addView(newButton); @@ -204,7 +204,7 @@ export const test_addView_WillThrow_IfView_IsAlreadyAdded = function () { helper.do_PageTest_WithStackLayout_AndButton(test); }; -export const test_addToNativeVisualTree_WillThrow_IfView_IsAlreadyAdded = function () { +export function test_addToNativeVisualTree_WillThrow_IfView_IsAlreadyAdded() { const test = function (views: [Page, StackLayout, View, View]) { const newButton = new Button(); views[1]._addView(newButton); @@ -223,7 +223,7 @@ export const test_addToNativeVisualTree_WillThrow_IfView_IsAlreadyAdded = functi helper.do_PageTest_WithStackLayout_AndButton(test); }; -export const test_InheritableStyleProperties_AreInherited = function () { +export function test_InheritableStyleProperties_AreInherited() { helper.do_PageTest_WithStackLayout_AndButton((views) => { const redColor = new Color("red"); views[0].style.color = redColor; @@ -239,7 +239,7 @@ export class TestButton extends Button { } -export const test_InheritableStylePropertiesWhenUsedWithExtendedClass_AreInherited = function () { +export function test_InheritableStylePropertiesWhenUsedWithExtendedClass_AreInherited() { let page = topmost().currentPage; let redColor = new Color("red"); page.style.color = redColor; @@ -250,16 +250,33 @@ export const test_InheritableStylePropertiesWhenUsedWithExtendedClass_AreInherit TKUnit.assertEqual(newButton.style.color, redColor); }; +// TestView definition START +const customCssProperty = new CssProperty({ name: "customCssProperty", cssName: "custom-css-property" }); +const customViewProperty = new Property({ name: "custom" }); + class TestView extends Layout { + public inheritanceTest: number; + public booleanInheritanceTest: boolean; + public dummy: number; + + public cssPropCounter: number = 0; + public cssPropNativeValue: string; + + public viewPropCounter: number = 0; + public viewPropNativeValue: string; + + public custom: string; + get customCssProperty(): string { + return this.style["customCssProperty"]; + } + set customCssProperty(value: string) { + this.style["customCssProperty"] = value; + } constructor(public name: string) { super(); } - public inheritanceTest: number; - public booleanInheritanceTest: boolean; - public dummy: number; - public toString() { return super.toString() + "." + this.name; } @@ -267,8 +284,27 @@ class TestView extends Layout { public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { this.setMeasuredDimension(100, 100); } + + get [customCssProperty.native](): string { + return "customCssPropertyDefaultValue"; + } + set [customCssProperty.native](value: string) { + this.cssPropCounter++; + this.cssPropNativeValue = value; + } + + get [customViewProperty.native](): string { + return "customViewPropertyDefaultValue"; + } + set [customViewProperty.native](value: string) { + this.viewPropCounter++; + this.viewPropNativeValue = value; + } } +customCssProperty.register(Style); +customViewProperty.register(TestView); + const inheritanceTestDefaultValue = 42; const inheritanceTestProperty = new InheritedProperty({ name: "inheritanceTest", defaultValue: inheritanceTestDefaultValue }); inheritanceTestProperty.register(TestView); @@ -280,7 +316,120 @@ booleanInheritanceTestProperty.register(TestView); const dummyProperty = new InheritedProperty({ name: "dummy", defaultValue: 0 }); dummyProperty.register(TestView); -export const test_InheritableProperties_getValuesFromParent = function () { +/////// TestView definition END + +export function test_NativeSetter_not_called_when_property_is_not_set() { + const testView = new TestView("view"); + + helper.buildUIAndRunTest(testView, () => { + TKUnit.assertEqual(testView.viewPropCounter, 0, "Native setter should not be called if value is not set."); + TKUnit.assertEqual(testView.cssPropCounter, 0, "Native setter should not be called if value is not set."); + }); +}; + +export function test_NativeSetter_called_only_once_with_localValue() { + const testView = new TestView("view"); + testView.customCssProperty = "testCssValue"; + testView.custom = "testViewValue"; + + helper.buildUIAndRunTest(testView, () => { + TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value"); + TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value"); + + TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once"); + TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once"); + }); +}; + +export function test_NativeSetter_called_only_once_with_cssValue() { + const testView = new TestView("view"); + testView.id = "myID"; + const pageCSS = ` + #myID { + custom: testViewValue; + custom-css-property: testCssValue; + }`; + + helper.buildUIAndRunTest(testView, () => { + TKUnit.assertEqual(testView.cssPropCounter, 1, "CssNativeSetter count called once"); + TKUnit.assertEqual(testView.viewPropCounter, 1, "ViewNativeSetter count called once"); + + TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue", "Native value"); + TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue", "Native value"); + }, pageCSS); +}; + +export function test_NativeSetter_called_only_once_with_cssValue_and_localValue() { + const testView = new TestView("view"); + testView.id = "myID"; + testView.customCssProperty = "testCssValueLocal"; + testView.custom = "testViewValueLocal"; + const pageCSS = ` + #myID { + custom-css-property: testCssValueCSS; + custom: testViewValueCSS; + }`; + + helper.buildUIAndRunTest(testView, () => { + TKUnit.assertEqual(testView.cssPropCounter, 1, "CssNativeSetter count called once"); + TKUnit.assertEqual(testView.viewPropCounter, 1, "ViewNativeSetter count called once"); + + // CSS property set form css has CSS value source, which is weaker than local value + TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValueLocal", "Native value"); + // View property set from CSS sets local value + TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValueCSS", "Native value"); + }, pageCSS); +}; + +export function test_NativeSetter_called_only_once_with_multiple_sets() { + const testView = new TestView("view"); + testView.custom = "testViewValue1"; + testView.custom = "testViewValue2"; + testView.customCssProperty = "testCssValue1"; + testView.customCssProperty = "testCssValue2"; + + helper.buildUIAndRunTest(testView, () => { + TKUnit.assertEqual(testView.cssPropCounter, 1, "NativeSetter count called once"); + TKUnit.assertEqual(testView.viewPropCounter, 1, "NativeSetter count called once"); + + TKUnit.assertEqual(testView.cssPropNativeValue, "testCssValue2", "Native value"); + TKUnit.assertEqual(testView.viewPropNativeValue, "testViewValue2", "Native value"); + }); +}; + +export function test_NativeSetter_called_when_add_and_remove() { + const firstView = new TestView("firstView"); + const secondView = new TestView("secondView"); + secondView.customCssProperty = "testCssValue"; + secondView.custom = "testViewValue"; + + helper.buildUIAndRunTest(firstView, () => { + TKUnit.assertEqual(secondView.cssPropCounter, 0); + TKUnit.assertEqual(secondView.viewPropCounter, 0); + + // Add to visual tree + firstView.addChild(secondView); + TKUnit.assertEqual(secondView.cssPropCounter, 1); + TKUnit.assertEqual(secondView.viewPropCounter, 1); + secondView.cssPropCounter = 0; + secondView.viewPropCounter = 0; + + // Set new value + secondView.customCssProperty = "test2"; + secondView.custom = "test2"; + TKUnit.assertEqual(secondView.cssPropCounter, 1); + TKUnit.assertEqual(secondView.viewPropCounter, 1); + secondView.cssPropCounter = 0; + secondView.viewPropCounter = 0; + + // Remove from visual tree + firstView.removeChild(secondView); + TKUnit.assertEqual(secondView.cssPropCounter, 0); + TKUnit.assertEqual(secondView.viewPropCounter, 0); + }); +}; + +export function test_InheritableProperties_getValuesFromParent() { const testValue = 35; const test = function (views: Array) { const bottomView = views[3]; @@ -299,7 +448,7 @@ export const test_InheritableProperties_getValuesFromParent = function () { helper.do_PageTest(test, firstView, secondView, thirdView); }; -export const test_BooleanInheritableProperties_getValuesFromParent = function () { +export function test_BooleanInheritableProperties_getValuesFromParent() { const testValue = false; const test = function (views: Array) { const bottomView = views[3]; @@ -318,7 +467,7 @@ export const test_BooleanInheritableProperties_getValuesFromParent = function () helper.do_PageTest(test, firstView, secondView, thirdView); }; -export const test_InheritableProperties_resetValuesOnRemoveFromVisualTree = function () { +export function test_InheritableProperties_resetValuesOnRemoveFromVisualTree() { const testValue = 35; const test = function (views: Array) { const bottomView = views[3]; @@ -341,7 +490,7 @@ export const test_InheritableProperties_resetValuesOnRemoveFromVisualTree = func helper.do_PageTest(test, firstView, secondView, thirdView); }; -export const test_InheritableProperties_DefaultValue = function () { +export function test_InheritableProperties_DefaultValue() { const test = function (views: Array) { const bottomView = views[3]; @@ -358,7 +507,7 @@ export const test_InheritableProperties_DefaultValue = function () { helper.do_PageTest(test, firstView, secondView, thirdView); }; -export const test_InheritableProperties_ChangeNotification = function () { +export function test_InheritableProperties_ChangeNotification() { const testValue = 35; const test = function (views: Array) { const topView = views[1]; @@ -428,155 +577,155 @@ function property_binding_style_test(propName: string, firstValue: any, secondVa TKUnit.assertEqual(actualResult, secondValue); } -export const test_binding_width = function () { +export function test_binding_width() { property_binding_test("width", 42, 43); }; -export const test_binding_height = function () { +export function test_binding_height() { property_binding_test("height", 42, 43); }; -export const test_binding_minWidth = function () { +export function test_binding_minWidth() { property_binding_test("minWidth", 42, 43); }; -export const test_binding_minHeight = function () { +export function test_binding_minHeight() { property_binding_test("minHeight", 42, 43); }; -export const test_binding_horizontalAlignment = function () { +export function test_binding_horizontalAlignment() { property_binding_test("horizontalAlignment", "left", "right"); }; -export const test_binding_verticalAlignment = function () { +export function test_binding_verticalAlignment() { property_binding_test("verticalAlignment", "top", "bottom"); }; -export const test_binding_marginLeft = function () { +export function test_binding_marginLeft() { property_binding_test("marginLeft", 42, 43); }; -export const test_binding_marginTop = function () { +export function test_binding_marginTop() { property_binding_test("marginTop", 42, 43); }; -export const test_binding_marginRight = function () { +export function test_binding_marginRight() { property_binding_test("marginRight", 42, 43); }; -export const test_binding_marginBottom = function () { +export function test_binding_marginBottom() { property_binding_test("marginBottom", 42, 43); }; -export const test_binding_visibility = function () { +export function test_binding_visibility() { property_binding_test("visibility", "collapse", "visible"); }; -export const test_binding_isEnabled = function () { +export function test_binding_isEnabled() { property_binding_test("isEnabled", false, true); }; -export const test_binding_isUserInteractionEnabled = function () { +export function test_binding_isUserInteractionEnabled() { property_binding_test("isUserInteractionEnabled", false, true); }; -export const test_binding_id = function () { +export function test_binding_id() { property_binding_test("id", "id1", "id2"); }; -export const test_binding_cssClass = function () { +export function test_binding_cssClass() { property_binding_test("cssClass", "class1", "class2"); }; -export const test_binding_className = function () { +export function test_binding_className() { property_binding_test("className", "class1", "class2"); }; -export const test_binding_style_color = function () { +export function test_binding_style_color() { property_binding_style_test("color", new Color("#FF0000"), new Color("#00FF00")); }; -export const test_binding_style_backgroundColor = function () { +export function test_binding_style_backgroundColor() { property_binding_style_test("backgroundColor", new Color("#FF0000"), new Color("#00FF00")); }; -export const test_binding_style_fontSize = function () { +export function test_binding_style_fontSize() { property_binding_style_test("fontSize", 5, 10); }; -export const test_binding_style_textAlignment = function () { +export function test_binding_style_textAlignment() { property_binding_style_test("textAlignment", "right", "center"); }; -export const test_binding_style_width = function () { +export function test_binding_style_width() { property_binding_style_test("width", 42, 43); }; -export const test_binding_style_height = function () { +export function test_binding_style_height() { property_binding_style_test("height", 42, 43); }; -export const test_binding_style_minWidth = function () { +export function test_binding_style_minWidth() { property_binding_style_test("minWidth", 42, 43); }; -export const test_binding_style_minHeight = function () { +export function test_binding_style_minHeight() { property_binding_style_test("minHeight", 42, 43); }; -export const test_binding_style_margin = function () { +export function test_binding_style_margin() { property_binding_style_test("margin", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip"); }; -export const test_binding_style_marginLeft = function () { +export function test_binding_style_marginLeft() { property_binding_style_test("marginLeft", 42, 43); }; -export const test_binding_style_marginTop = function () { +export function test_binding_style_marginTop() { property_binding_style_test("marginTop", 42, 43); }; -export const test_binding_style_marginRight = function () { +export function test_binding_style_marginRight() { property_binding_style_test("marginRight", 42, 43); }; -export const test_binding_style_marginBottom = function () { +export function test_binding_style_marginBottom() { property_binding_style_test("marginBottom", 42, 43); }; -export const test_binding_style_padding = function () { +export function test_binding_style_padding() { property_binding_style_test("padding", "1dip 2dip 3dip 4dip", "2dip 3dip 2dip 3dip"); }; -export const test_binding_style_paddingLeft = function () { +export function test_binding_style_paddingLeft() { property_binding_style_test("paddingLeft", 42, 43); }; -export const test_binding_style_paddingTop = function () { +export function test_binding_style_paddingTop() { property_binding_style_test("paddingTop", 42, 43); }; -export const test_binding_style_paddingRight = function () { +export function test_binding_style_paddingRight() { property_binding_style_test("paddingRight", 42, 43); }; -export const test_binding_style_paddingBottom = function () { +export function test_binding_style_paddingBottom() { property_binding_style_test("paddingBottom", 42, 43); }; -export const test_binding_style_horizontalAlignment = function () { +export function test_binding_style_horizontalAlignment() { property_binding_style_test("horizontalAlignment", "left", "right"); }; -export const test_binding_style_verticalAlignment = function () { +export function test_binding_style_verticalAlignment() { property_binding_style_test("verticalAlignment", "top", "bottom"); }; -export const test_binding_style_visibility = function () { +export function test_binding_style_visibility() { property_binding_style_test("visibility", "collapse", "visible"); }; -export const test_binding_style_opacity = function () { +export function test_binding_style_opacity() { property_binding_style_test("opacity", 0.5, 0.6); }; @@ -590,7 +739,7 @@ function _createLabelWithBorder(): View { return lbl; } -export const testIsVisible = function () { +export function testIsVisible() { const lbl = new Label(); helper.buildUIAndRunTest(lbl, function (views: Array) { @@ -603,7 +752,7 @@ export const testIsVisible = function () { }); }; -export const testSetInlineStyle = function () { +export function testSetInlineStyle() { const lbl = new Label(); const expectedColor = "#ff0000"; @@ -617,7 +766,7 @@ export const testSetInlineStyle = function () { }); }; -export const testBorderWidth = function () { +export function testBorderWidth() { helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array) { const lbl = views[0]; const expectedValue = lbl.borderWidth * utils.layout.getDisplayDensity(); @@ -626,30 +775,30 @@ export const testBorderWidth = function () { }); }; -export const testCornerRadius = function () { +export function testCornerRadius() { helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array) { const lbl = views[0]; - const expectedValue = lbl.borderRadius * utils.layout.getDisplayDensity(); + const expectedValue = lbl.borderRadius * utils.layout.getDisplayDensity(); const actualValue = definition.getUniformNativeCornerRadius(lbl); TKUnit.assertAreClose(actualValue, expectedValue, 0.01, "borderRadius"); }); }; -export const testBorderColor = function () { +export function testBorderColor() { helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array) { const lbl = views[0]; TKUnit.assertEqual(definition.checkUniformNativeBorderColor(lbl), true, "BorderColor not applied correctly!"); }); }; -export const testBackgroundColor = function () { +export function testBackgroundColor() { helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array) { const lbl = views[0]; TKUnit.assertEqual(definition.checkNativeBackgroundColor(lbl), true, "BackgroundColor not applied correctly!"); }); }; -export const testBackgroundImage = function () { +export function testBackgroundImage() { const lbl = _createLabelWithBorder(); lbl.className = "myClass"; helper.buildUIAndRunTest(lbl, function (views: Array) { @@ -664,18 +813,18 @@ export function test_automation_text_default_value() { TKUnit.assertTrue(view.automationText === undefined, "AutomationText default value should be UNDEFINED."); } -export const test_getLocationInWindow_IsUndefinedWhenNotInTheVisualTree = function () { +export function test_getLocationInWindow_IsUndefinedWhenNotInTheVisualTree() { const label = new Label(); TKUnit.assertNull(label.getLocationInWindow()); }; -export const test_getLocationOnScreen_IsUndefinedWhenNotInTheVisualTree = function () { +export function test_getLocationOnScreen_IsUndefinedWhenNotInTheVisualTree() { const label = new Label(); TKUnit.assertNull(label.getLocationOnScreen()); }; const delta = 1; -export const test_getLocationRelativeToOtherView = function () { +export function test_getLocationRelativeToOtherView() { const a1 = new AbsoluteLayout(); a1.width = 200; a1.height = 200; @@ -718,7 +867,7 @@ export const test_getLocationRelativeToOtherView = function () { }); }; -export const test_getActualSize = function () { +export function test_getActualSize() { const label = new Label(); label.width = 100; label.height = 200; diff --git a/tns-core-modules/ui/core/view-base.ts b/tns-core-modules/ui/core/view-base.ts index 285afed01..9d71382b0 100644 --- a/tns-core-modules/ui/core/view-base.ts +++ b/tns-core-modules/ui/core/view-base.ts @@ -125,9 +125,10 @@ export class ViewBase extends Observable implements ViewBaseDefinition { public _domId: number; public _context: any; - public _isAddedToNativeVisualTree: any; - + public _isAddedToNativeVisualTree: boolean; + public _isCssApplied: boolean; public _cssState: ssm.CssState; + constructor() { super(); this._domId = viewIdCounter++; @@ -187,7 +188,6 @@ export class ViewBase extends Observable implements ViewBaseDefinition { public onLoaded() { this._isLoaded = true; this._loadEachChild(); - this._applyStyleFromScope(); this._emit("loaded"); } @@ -217,11 +217,13 @@ export class ViewBase extends Observable implements ViewBaseDefinition { public _applyStyleFromScope() { let rootPage = this.page; - if (!rootPage || !rootPage.isLoaded) { + if (!rootPage || this._isCssApplied) { return; } + let scope: ssm.StyleScope = (rootPage)._getStyleScope(); scope.applySelectors(this); + this._isCssApplied = true; } // TODO: Make sure the state is set to null and this is called on unloaded to clean up change listeners... @@ -448,13 +450,15 @@ export class ViewBase extends Observable implements ViewBaseDefinition { } protected _addViewCore(view: ViewBase, atIndex?: number) { - if (this._context) { - view._setupUI(this._context, atIndex); - } + this._applyStyleFromScope(); // TODO: Split this method - we want binding context before loaded. propagateInheritedProperties(this); + if (this._context) { + view._setupUI(this._context, atIndex); + } + // TODO: Discuss this. if (this._isLoaded) { view.onLoaded(); @@ -513,6 +517,8 @@ export class ViewBase extends Observable implements ViewBaseDefinition { } public _setupUI(context: android.content.Context, atIndex?: number) { + this._applyStyleFromScope(); + traceNotifyEvent(this, "_setupUI"); if (traceEnabled()) { traceWrite(`${this}._setupUI(${context})`, traceCategories.VisualTreeEvents); @@ -680,6 +686,7 @@ export const classNameProperty = new Property({ classNameProperty.register(ViewBase); function resetStyles(view: ViewBase): void { + view._isCssApplied = false; view._cancelAllAnimations(); resetCSSProperties(view.style); view._applyStyleFromScope();