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

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';
 }
 
 /**

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")');
+  });
 });