Skip to content
Permalink
Browse files

fix(ivy): reset style property value defined using [style.prop.px] (#…

…33780)

Prior to this change, setting style prop value to undefined or empty string would not result in resetting prop value in case the style prop is defined using [style.prop.px] syntax. The problem is that the check for empty value (and thus reseting the value) considered successful only in case of `null` value. This commit updates the check to use `isStylingValueDefined` function that also checks for undefined and empty string.

PR Close #33780
  • Loading branch information
AndrewKushnir authored and kara committed Nov 13, 2019
1 parent 5ad1e5f commit de8cf75ff5f750af8483db4871b9ea208812e8d7
@@ -585,7 +585,7 @@ function resolveStylePropValue(
if (value === NO_CHANGE) return value;

let resolvedValue: string|null = null;
if (value !== null) {
if (isStylingValueDefined(value)) {
if (suffix) {
// when a suffix is applied then it will bypass
// sanitization entirely (b/c a new string is created)
@@ -2310,6 +2310,34 @@ describe('styling', () => {
expect(fixture.debugElement.nativeElement.innerHTML).toContain('three');
});

it('should allow to reset style property value defined using [style.prop.px] binding', () => {
@Component({
template: '<div [style.left.px]="left"></div>',
})
class MyComp {
left = '';
}

TestBed.configureTestingModule({declarations: [MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();

const checks = [
['15', '15px'],
[undefined, ''],
[null, ''],
['', ''],
['0', '0px'],
];
const div = fixture.nativeElement.querySelector('div');
checks.forEach((check: any[]) => {
const [fieldValue, expectedValue] = check;
fixture.componentInstance.left = fieldValue;
fixture.detectChanges();
expect(div.style.left).toBe(expectedValue);
});
});

onlyInIvy('only ivy treats [class] in concert with other class bindings')
.it('should retain classes added externally', () => {
@Component({template: `<div [class]="exp"></div>`})

0 comments on commit de8cf75

Please sign in to comment.
You can’t perform that action at this time.