From 29786e856ddab764aba1379c99c4c7f7d9314881 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 8 May 2019 09:27:44 -0400
Subject: [PATCH] fix(ivy): unable to bind SafeStyle as camel case property
 (#30328)

Fixes not being able to bind a `SafeStyle` as a camel cased style property (e.g. `[style.backgroundImage]="someSafeStyle"`). The issue was due to the fact that we only check the dash case property names to determine whether to sanitize a value.

This PR resolves FW-1279.

PR Close #30328
---
 .../src/render3/view/styling_builder.ts        |  8 ++++++--
 packages/core/test/acceptance/styling_spec.ts  | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/compiler/src/render3/view/styling_builder.ts b/packages/compiler/src/render3/view/styling_builder.ts
index 280b64245c..16f7b43e87 100644
--- a/packages/compiler/src/render3/view/styling_builder.ts
+++ b/packages/compiler/src/render3/view/styling_builder.ts
@@ -494,8 +494,12 @@ function registerIntoMap(map: Map<string, number>, key: string) {
 }
 
 function isStyleSanitizable(prop: string): boolean {
-  return prop === 'background-image' || prop === 'background' || prop === 'border-image' ||
-      prop === 'filter' || prop === 'list-style' || prop === 'list-style-image';
+  // Note that browsers support both the dash case and
+  // camel case property names when setting through JS.
+  return prop === 'background-image' || prop === 'backgroundImage' || prop === 'background' ||
+      prop === 'border-image' || prop === 'borderImage' || prop === 'filter' ||
+      prop === 'list-style' || prop === 'listStyle' || prop === 'list-style-image' ||
+      prop === 'listStyleImage';
 }
 
 /**
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
index 21443b152f..6dd86a9876 100644
--- a/packages/core/test/acceptance/styling_spec.ts
+++ b/packages/core/test/acceptance/styling_spec.ts
@@ -7,6 +7,7 @@
  */
 import {Component, Directive, ElementRef} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
+import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 describe('styling', () => {
@@ -130,4 +131,21 @@ describe('styling', () => {
 
     expect(fixture.nativeElement.innerHTML).toBe('<div></div>');
   });
+
+  it('should be able to bind a SafeValue to backgroundImage', () => {
+    @Component({template: '<div [style.backgroundImage]="image"></div>'})
+    class Cmp {
+      image !: SafeStyle;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+    const sanitizer: DomSanitizer = TestBed.get(DomSanitizer);
+
+    fixture.componentInstance.image = sanitizer.bypassSecurityTrustStyle('url("#test")');
+    fixture.detectChanges();
+
+    const div = fixture.nativeElement.querySelector('div') as HTMLDivElement;
+    expect(div.style.backgroundImage).toBe('url("#test")');
+  });
 });