Fix native image recreated on layout even if the view is not resized

apps/tests/testRunner.ts

@@ -144,17 +144,41 @@ function log(): void {
     TKUnit.write(testsName + " COMPLETED for " + duration + " BACKSTACK DEPTH: " + topmost().backStack.length, messageType.info);
 }
 
-export var runAll = function (moduleName?: string) {
+export var runAll = function (testSelector?: string) {
     if (running) {
         // TODO: We may schedule pending run requests
         return;
     }
     
+    var singleModuleName, singleTestName;
+    if (testSelector) {
+        var pair = testSelector.split(".");
+        singleModuleName = pair[0];
+        if (singleModuleName) {
+            if (singleModuleName.length === 0) {
+                singleModuleName = undefined;
+            } else {
+                singleModuleName = singleModuleName.toLowerCase();
+            }
+        }
+        
+        singleTestName = pair[1];
+        if (singleTestName) {
+            if (singleTestName.length === 0) {
+                singleTestName = undefined;
+            } else {
+                singleTestName = singleTestName.toLowerCase();
+            }
+        }
+    }
+    
+    console.log("TESTS: " + singleModuleName + " " + singleTestName);
+
     var totalSuccess = 0;
     var totalFailed: Array<TKUnit.TestFailure> = [];
     testsQueue.push(new TestInfo(function () { running = true; }));
     for (var name in allTests) {
-        if (moduleName && (moduleName.toLowerCase() !== name.toLowerCase())) {
+        if (singleModuleName && (singleModuleName !== name.toLowerCase())) {
             continue;
         }
 
@@ -170,8 +194,11 @@ export var runAll = function (moduleName?: string) {
             testsQueue.push(new TestInfo(test.setUpModule, test));
         }
 
-
         for (var testName in test) {
+            if (singleTestName && (singleTestName !== testName.toLowerCase())) {
+                continue;
+            }
+            
             var testFunction = test[testName];
             if ((typeof (testFunction) === "function") && (testName.substring(0, 4) == "test")) {
                 if (test.setUp) {

apps/tests/ui/view/view-tests.ios.ts

@@ -1,6 +1,12 @@
 import commonTests = require("./view-tests-common");
 import view = require("ui/core/view");
 
+import grid = require("ui/layouts/grid-layout");
+import color = require("color");
+import helper = require("../helper");
+import page = require("ui/page");
+import TKUnit = require("../../TKUnit");
+
 global.moduleMerge(commonTests, exports);
 
 export function getNativeBorderWidth(v: view.View): number {
@@ -28,3 +34,54 @@ export function checkNativeBackgroundColor(v: view.View): boolean {
 export function checkNativeBackgroundImage(v: view.View): boolean {
     return (<UIView>v.ios).backgroundColor !== undefined;
 }
+
+export function testBackgroundInternalChangedOnceOnResize() {
+    
+    var layout = new grid.GridLayout();
+    layout.className = "myClass";
+    layout.backgroundColor = new color.Color(255, 255, 0, 0);
+    
+    var pageFactory = () => {
+        var root = new page.Page();
+        root.css = ".myClass { background-image: url('~/tests/logo.png') }";
+        root.content = layout;
+        return root;
+    }
+
+    helper.navigate(pageFactory);
+    
+    try {
+        var sizeChangedCount = 0;
+        function trackCount() {
+            var result = sizeChangedCount;
+            sizeChangedCount = 0;
+            return result;
+        }
+        
+        var base = (<any>layout.style)._applyStyleProperty;
+        (<any>layout.style)._applyStyleProperty = function(property) {
+            base.apply(layout.style, arguments);
+            if (property.name === "_backgroundInternal") {
+                ++sizeChangedCount;
+            }
+        }
+        
+        layout.requestLayout();
+        layout.layout(0, 0, 200, 200);
+        
+        TKUnit.assertEqual(trackCount(), 1, "Expected background to be re-applied at most once when the view is layed-out on 0 0 200 200.");
+        
+        layout.requestLayout();
+        layout.layout(50, 50, 250, 250);
+        
+        TKUnit.assertEqual(trackCount(), 0, "Expected background to NOT change when view is layed-out from 0 0 200 200 to 50 50 250 250.");
+        
+        layout.requestLayout();
+        layout.layout(0, 0, 250, 250);
+        
+        TKUnit.assertEqual(trackCount(), 1, "Expected background to be re-applied at most once when the view is layed-out from 50 50 250 250 to 0 0 250 250.");
+    }
+    finally {
+        helper.goBack();
+    }
+}

ui/core/view-common.ts

@@ -893,14 +893,18 @@ export class View extends proxy.ProxyObject implements definition.View {
         return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom }
     }
 
-    _setCurrentLayoutBounds(left: number, top: number, right: number, bottom: number): boolean {
+    /**
+     * Returns two booleans - the first if "boundsChanged" the second is "sizeChanged".
+     */
+    _setCurrentLayoutBounds(left: number, top: number, right: number, bottom: number): { boundsChanged: boolean, sizeChanged: boolean } {
         this._isLayoutValid = true;
-        var changed: boolean = this._oldLeft !== left || this._oldTop !== top || this._oldRight !== right || this._oldBottom !== bottom;
+        var boundsChanged: boolean = this._oldLeft !== left || this._oldTop !== top || this._oldRight !== right || this._oldBottom !== bottom;
+        var sizeChanged: boolean = (this._oldRight - this._oldLeft !== right - left) || (this._oldBottom - this._oldTop !== bottom - top);
         this._oldLeft = left;
         this._oldTop = top;
         this._oldRight = right;
         this._oldBottom = bottom;
-        return changed;
+        return { boundsChanged, sizeChanged };
     }
 
     private _applyStyleFromScope() {

ui/core/view.ios.ts

@@ -138,13 +138,14 @@ export class View extends viewCommon.View {
     }
 
     public layout(left: number, top: number, right: number, bottom: number): void {
-        var changed: boolean = this._setCurrentLayoutBounds(left, top, right, bottom);
+        var { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
         this.layoutNativeView(left, top, right, bottom);
-
-        if (changed || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
+        if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
             this.onLayout(left, top, right, bottom);
             this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
-            this._onBoundsChanged();
+        }
+        if (sizeChanged) {
+            this._onSizeChanged();
         }
         this._privateFlags &= ~PFLAG_FORCE_LAYOUT;
     }
@@ -246,8 +247,8 @@ export class View extends viewCommon.View {
         return false;
     }
 
-    private _onBoundsChanged() {
-        this.style._boundsChanged();
+    private _onSizeChanged() {
+        this.style._sizeChanged();
     }
 
     public _updateNativeTransform() {

ui/styling/style.ts

@@ -647,7 +647,7 @@ export class Style extends DependencyObservable implements styling.Style {
         });
     }
 
-    public _boundsChanged() {
+    public _sizeChanged() {
         if (!(<background.Background>this._getValue(backgroundInternalProperty)).isEmpty()) {
             this._applyProperty(backgroundInternalProperty, this._getValue(backgroundInternalProperty));
         }