fix(ngStyle): do not truncate URLs (#938)

Fixes #935

Author: CaerusKaru

src/lib/extended/style/style-transforms.spec.ts

@@ -8,10 +8,12 @@
 import {customMatchers, expect} from '../../utils/testing/custom-matchers';
 import {
   NgStyleRawList,
+  NgStyleKeyValue,
   NgStyleMap,
   buildRawList,
   buildMapFromList,
   buildMapFromSet,
+  stringToKeyValue,
 } from './style-transforms';
 
 describe('ngStyleUtils', () => {
@@ -74,4 +76,15 @@ describe('ngStyleUtils', () => {
       });
     });
 
+  it('should convert string correctly to key value with URLs', () => {
+    const backgroundUrl = `background-url: url(${URL})`;
+    const keyValue: NgStyleKeyValue = stringToKeyValue(backgroundUrl);
+    expect(keyValue.key).toBe('background-url');
+    expect(keyValue.value).toBe(`url(${URL})`);
+  });
+
 });
+
+
+const URL = 'https://cloud.githubusercontent.com/assets/210413/' +
+  '21288118/917e3faa-c440-11e6-9b08-28aff590c7ae.png';

src/lib/extended/style/style-transforms.ts

@@ -79,8 +79,8 @@ export function buildMapFromSet(source: NgStyleType, sanitize?: NgStyleSanitizer
 
 /** Convert 'key:value' -> [key, value] */
 export function stringToKeyValue(it: string): NgStyleKeyValue {
-  let [key, val] = it.split(':');
-  return new NgStyleKeyValue(key, val);
+  const [key, ...vals] = it.split(':');
+  return new NgStyleKeyValue(key, vals.join(':'));
 }
 
 /** Convert [ [key,value] ] -> { key : value } */

src/lib/extended/style/style.spec.ts

@@ -145,6 +145,18 @@ describe('style directive', () => {
     expectNativeEl(fixture, {fontSize: 19}).toHaveStyle({'font-size': '19px'}, styler);
   });
 
+  it('should work with URLs', () => {
+    createTestComponent(`
+        <div [ngStyle]="{'background-image': 'url(' + testUrl + ')', 'height': '300px'}">
+        </div>
+    `);
+    fixture.detectChanges();
+    const url = styler.lookupStyle(fixture.debugElement.children[0].nativeElement,
+      'background-image');
+    const isUrl = url === `url("${URL}")` || url === `url(${URL})`;
+    expect(isUrl).toBeTruthy();
+  });
+
   it('should work with just ngStyle and preexisting styles', () => {
     createTestComponent(`
       <div style="background-color: red; height: 100px; width: 100px;" [ngStyle]="divStyle">
@@ -168,8 +180,9 @@ describe('style directive', () => {
 })
 class TestStyleComponent {
   fontSize: number = 0;
+  testUrl = URL;
   divStyle = {'border': '2px solid green'};
 }
 
-
-
+const URL = 'https://cloud.githubusercontent.com/assets/210413/' +
+  '21288118/917e3faa-c440-11e6-9b08-28aff590c7ae.png';