Setting inline style - resets local properties

apps/tests/pages/background-test.ts

@@ -4,7 +4,7 @@ import pages = require("ui/page");
 var vm = new observable.Observable();
 // Event handler for Page "loaded" event attached in main-page.xml
 export function pageLoaded(args: observable.EventData) {
-    vm.set("style", "background-image: url('~/tests/pages/test2.png'); \nborder-color: green; \nborder-radius: 20; \nborder-width: 4;");
+    vm.set("style", "background-image: url('~/pages/test2.png'); \nborder-color: green; \nborder-radius: 20; \nborder-width: 4;");
     // Get the event sender
     var page = <pages.Page>args.object;
     page.bindingContext = vm;

apps/tests/pages/background-test.xml

@@ -1,6 +1,6 @@
 <Page loaded="pageLoaded">
-  <GridLayout style="background-image: url('~/pages/test2.png'); border-color: green; border-radius: 20; border-width: 4;" rows="*, auto">
-    <TextView text="{{ style }}" />
+  <GridLayout style="background-image: url('~/pages/test2.png'); background-repeat:repeat-y; background-position: center bottom; background-color: green; background-size: 25% 50%; border-radius: 20; border-width: 4;" rows="*, auto">
+    <TextView text="{{ style }}" backgorundColor="transparent"/>
     <Button text="apply" horizontalAlignment="center" verticalAlignment="center" tap="applyTap" row="1"/>
   </GridLayout>
 </Page>

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

@@ -22,9 +22,10 @@ export function test_css_dataURI_is_applied_to_backgroundImageSource() {
         var 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 = undefined; //stack.style._getValue(styleModule.backgroundImageSourceProperty);
+        var value = stack.style._getValue(styleModule.backgroundInternalProperty);
 
-        TKUnit.assert(value !== undefined, "Style background-image not loaded correctly from data URI.");
+        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.");
     });
 }
 
@@ -747,6 +748,21 @@ export function test_setInlineStyle_setsLocalValues() {
     });
 }
 
+export function test_setInlineStyle_resetsLocalValues() {
+    var testButton = new buttonModule.Button();
+    testButton.text = "Test";
+    testButton.style.fontSize = 10;
+    var stack = new stackModule.StackLayout();
+    stack.addChild(testButton);
+
+    helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
+        (<any>testButton)._applyInlineStyle("color: red;");
+        helper.assertViewColor(testButton, "#FF0000", dependencyObservableModule.ValueSource.Local);
+        TKUnit.assert(types.isUndefined(testButton.style.fontSize), "Setting inline style should reset font size");
+        TKUnit.assertEqual(testButton.style._getValueSource(styling.properties.fontSizeProperty), dependencyObservableModule.ValueSource.Default, "valueSource");
+    });
+}
+
 export var test_CSS_isAppliedOnPage = function () {
     var testButton = new buttonModule.Button();
     testButton.text = "Test";

ui/core/view-common.ts

@@ -761,7 +761,13 @@ export class View extends proxy.ProxyObject implements definition.View {
 
     private _applyInlineStyle(inlineStyle) {
         if (types.isString(inlineStyle)) {
-            styleScope.applyInlineSyle(this, <string>inlineStyle);
+            try {
+                this.style._beginUpdate();
+                this.style._resetLocalValues();
+                styleScope.applyInlineSyle(this, <string>inlineStyle);
+            } finally {
+                this.style._endUpdate();
+            }
         }
     }
 

ui/styling/background.android.ts

@@ -79,8 +79,6 @@ export module ad {
             var boundsHeight = bounds.height();
 
             if (this.background && !this.background.isEmpty() && boundsWidth > 0 && boundsHeight > 0) {
-                var bitmap = this.background.image.android;
-
                 var radius = this._cornerRadius * this._density;
                 var stroke = this._borderWidth * this._density;
                 var bounds = this.getBounds();
@@ -96,7 +94,8 @@ export module ad {
                 }
 
                 if (this.background.image) {
-                    var params = this.background.getDrawParams(boundsWidth, boundsHeight);
+                    let bitmap = this.background.image.android;
+                    let params = this.background.getDrawParams(boundsWidth, boundsHeight);
 
                     var matrix = new android.graphics.Matrix();
                     if (params.sizeX > 0 && params.sizeY > 0) {

ui/styling/style.ts

@@ -282,6 +282,14 @@ export class Style extends observable.DependencyObservable implements styling.St
         });
     }
 
+    public _resetLocalValues() {
+        var that = this;
+        this._eachSetProperty(function (property: observable.Property) {
+            that._resetValue(property, observable.ValueSource.Local);
+            return true;
+        });
+    }
+
     public _onPropertyChanged(property: dependencyObservable.Property, oldValue: any, newValue: any) {
         trace.write(
             "Style._onPropertyChanged view:" + this._view +