cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): unable to bind SafeStyle as camel case property (#30328)

Browse Source 
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
This commit is contained in:
Kristiyan Kostadinov 2019-05-08 09:27:44 -04:00 committed by Alex Rickabaugh
parent bf6bedd714
commit 29786e856d
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/compiler/src/render3/view/styling_builder.ts
View File

@ -494,8 +494,12 @@ function registerIntoMap(map: Map<string, number>, key: string) {
} }
function isStyleSanitizable(prop: string): boolean { function isStyleSanitizable(prop: string): boolean {
return prop === 'background-image' || prop === 'background' || prop === 'border-image' || // Note that browsers support both the dash case and
prop === 'filter' || prop === 'list-style' || prop === 'list-style-image'; // 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';
} }
/** /**

18
packages/core/test/acceptance/styling_spec.ts
View File

@ -7,6 +7,7 @@
*/ */
import {Component, Directive, ElementRef} from '@angular/core'; import {Component, Directive, ElementRef} from '@angular/core';
import {TestBed} from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {expect} from '@angular/platform-browser/testing/src/matchers'; import {expect} from '@angular/platform-browser/testing/src/matchers';
describe('styling', () => { describe('styling', () => {
@ -130,4 +131,21 @@ describe('styling', () => {
expect(fixture.nativeElement.innerHTML).toBe('<div></div>'); 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")');
});
}); });