fix(StyleObserver): parse complex styles

fixes templating-resources/issues/248

Author: Brooks

src/element-observation.js

@@ -74,14 +74,15 @@ export class StyleObserver {
           }
         }
       } else if (newValue.length) {
-        let pairs = newValue.split(/(?:;|:(?!\/))\s*/);
-        for (let i = 0, length = pairs.length; i < length; i++) {
-          style = pairs[i].trim();
+        let rx = /\s*([\w\-]+)\s*:\s*((?:(?:[\w\-]+\(\s*(?:"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[\w\-]+\(\s*(?:^"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^\)]*)\),?|[^\)]*)\),?|"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^;]*),?\s*)+);?/g;
+        let pair;
+        while( (pair = rx.exec(newValue)) !== null )
+        {
+          style = pair[1];
           if ( !style ) { continue; }
 
           styles[style] = version;
-
-          this.element.style[style] = pairs[++i];
+          this.element.style[style] = pair[2];
         }
       }
     }

test/element-observation.spec.js

@@ -168,6 +168,34 @@ describe('element observation', () => {
       expect(el.style.backgroundColor).toBe('');
       expect(el.style.backgroundImage).toBe('');
 
+      observer.setValue(` width : 25px ; background: url("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~:/?#[]%@!$&'()*+,;=");`);
+      expect(observer.getValue()).toBe(`width: 25px; background: url("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~:/?#[]%@!$&'()*+,;=");`);
+
+      observer.setValue('');
+      expect(el.style.width).toBe('');
+      expect(el.style.background).toBe('');
+
+      observer.setValue(` width : 25px ; background: url('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~:/?#[]%@!$&\\'()*+,;=');`);
+      expect(observer.getValue()).toBe(`width: 25px; background: url("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~:/?#[]%@!$&'()*+,;=");`);
+
+      observer.setValue('');
+      expect(el.style.width).toBe('');
+      expect(el.style.background).toBe('');
+
+      observer.setValue(`    color : rgb( 255 , 255 , 255 ) ; background: url(abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~:/?#[]%@!$&*+,;=);`);
+      expect(observer.getValue()).toBe(`color: rgb(255, 255, 255); background: url("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~:/?#[]%@!$&*+,;=");`);
+
+      observer.setValue('');
+      expect(el.style.color).toBe('');
+      expect(el.style.background).toBe('');
+
+      observer.setValue(`background: url(data:image/gif;base64,R0lGODh0o/XBs/fNl3/zy7//wA7);`);
+      expect(observer.getValue()).toBe(`background: url("data:image/gif;base64,R0lGODh0o/XBs/fNl3/zy7//wA7");`);
+
+      observer.setValue('');
+      expect(el.style.width).toBe('');
+      expect(el.style.background).toBe('');
+
       observer.setValue({ width: '50px', height: '40px', 'background-color': 'blue', 'background-image': 'url("http://aurelia.io/test2.png")' });
       expect(observer.getValue()).toBe('width: 50px; height: 40px; background-image: url("http://aurelia.io/test2.png"); background-color: blue;');
       expect(el.style.height).toBe('40px');