Merge pull request #201 from NativeScript/data-URI

CSS background-image data URI support added

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();

ui/styling/style.ts

@@ -10,6 +10,7 @@ import styleProperty = require("ui/styling/style-property");
 import converters = require("ui/styling/converters");
 import enums = require("ui/enums");
 import imageSource = require("image-source");
+import utils = require("utils/utils");
 
 // key is the property id and value is Dictionary<string, StylePropertyChangedHandler>;
 var _registeredHandlers = {};
@@ -345,17 +346,28 @@ 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 (imageSource.isFileOrResourcePath(url)) {
+    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 if (types.isString(url)) {
+            } else {
                 imageSource.fromUrl(url).then(r=> {
                     style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
                 });
             }
         }
+    }
+}
 
 export var backgroundImageSourceProperty = new styleProperty.Property("backgroundImageSource", "background-image-source",
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, undefined));

utils/utils-common.ts

@@ -63,3 +63,13 @@ export function isFileOrResourcePath(path: string): boolean {
         path.indexOf("/") === 0 ||      // absolute path
         path.indexOf(RESOURCE_PREFIX) === 0;    // resource
 }
+
+export function isDataURI(uri: string): boolean {
+    if (!types.isString(uri)) {
+        return false;
+    }
+
+    var firstSegment = uri.trim().split(',')[0];
+
+    return firstSegment && firstSegment.indexOf("data:") === 0 && firstSegment.indexOf('base64') >= 0;
+}

utils/utils.d.ts

@@ -140,4 +140,10 @@
      * @param path The path.
      */
     export function isFileOrResourcePath(path: string): boolean
+
+    /**
+     * Returns true if the specified URI is data URI (http://en.wikipedia.org/wiki/Data_URI_scheme).
+     * @param uri The URI.
+     */
+    export function isDataURI(uri: string): boolean
 }