test added

Vladimir Enchev · Vladimir Enchev · commit 37aa72a7d2a0 · 2015-05-21T11:41:33.000+03:00
diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts
@@ -8,12 +8,26 @@ import helper = require("../../ui/helper");
 import styling = require("ui/styling");
 import types = require("utils/types");
 import viewModule = require("ui/core/view");
+import styleModule = require("ui/styling/style");
 import dependencyObservableModule = require("ui/core/dependency-observable");
 
 // <snippet module="ui/styling" title="styling">
 // # Styling
 // </snippet>
 
+export function test_css_dataURI_is_applied_to_backgroundImageSource() {
+    var stack = new stackModule.StackLayout();
+
+    helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
+        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 = stack.style._getValue(styleModule.backgroundImageSourceProperty);
+
+        TKUnit.assert(value !== undefined, "Style background-image not loaded correctly from data URI.");
+    });
+}
+
 // Test for inheritance in different containers
 export function test_css_is_applied_inside_StackLayout() {
     var testButton = new buttonModule.Button();
@@ -746,4 +760,4 @@ export var test_CSS_isAppliedOnPage = function () {
 
 // <snippet module="ui/styling" title="styling">
 // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 
-// </snippet>
+// </snippet>
diff --git a/ui/styling/style.ts b/ui/styling/style.ts
@@ -346,20 +346,26 @@ export var backgroundImageProperty = new styleProperty.Property("backgroundImage
 
 function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
     var style = <Style>data.object;
-    var pattern: RegExp = /url\(('|")(.*?)\1\)/;
-    var url = (<string>data.newValue).match(pattern)[2];
-
-    if (utils.isFileOrResourcePath(url)) {
-        style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local);
-    } else if (utils.isDataURI(url)) {
-        var base64Data = url.split(",")[1];
-        if (types.isDefined(base64Data)) {
-            style._setValue(backgroundImageSourceProperty, imageSource.fromBase64(base64Data), observable.ValueSource.Local);
+
+    if (types.isString(data.newValue)) {
+        var pattern: RegExp = /url\(('|")(.*?)\1\)/;
+        var match = data.newValue && (<string>data.newValue).match(pattern);
+        var url = match && match[2];
+
+        if (types.isDefined(url)) {
+            if (utils.isDataURI(url)) {
+                var base64Data = url.split(",")[1];
+                if (types.isDefined(base64Data)) {
+                    style._setValue(backgroundImageSourceProperty, imageSource.fromBase64(base64Data), observable.ValueSource.Local);
+                }
+            } else if (utils.isFileOrResourcePath(url)) {
+                style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local);
+            } else {
+                imageSource.fromUrl(url).then(r=> {
+                    style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
+                });
+            }
         }
-    } else if (types.isString(url)) {
-        imageSource.fromUrl(url).then(r=> {
-            style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
-        });
     }
 }
 
