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, 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('
'); }); + + it('should be able to bind a SafeValue to backgroundImage', () => { + @Component({template: '
'}) + 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")'); + }); });