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

feat(ivy): Change static priority resolution to be same level as directive it belongs to (#34938)

Browse Source 
This change changes the priority order of static styling.

Current priority:
```
(least priority)
- Static
  - Component
  - Directives
  - Template
- Dynamic Binding
  - Component
    - Map/Interpolation
    - Property
  - Directives
    - Map/Interpolation
    - Property
  - Template
    - Map/Interpolation
    - Property
(highest priority)
```

The issue with the above priority is this use case:

```
<div style="color: red;" directive-which-sets-color-blue>
```
In the above case the directive will win and the resulting color will be `blue`. However a small change of adding interpolation to the example like so. (Style interpolation is coming in https://github.com/angular/angular/pull/34202)
```
<div style="color: red; width: {{exp}}px" directive-which-sets-color-blue>
```
Changes the priority from static binding to interpolated binding which means now the resulting color is `red`. It is very surprising that adding an unrelated interpolation and style can change the `color` which was not changed. To fix that we need to make sure that the static values are associated with priority of the source (directive or template) where they were declared. The new resulting priority is:

```
(least priority)
- Component
  - Static
  - Map/Interpolation
  - Property
- Directives
  - Static
  - Map/Interpolation
  - Property
- Template
  - Static
  - Map/Interpolation
  - Property
(highest priority)
```

PR Close #34938
This commit is contained in:
Misko Hevery
2020-01-26 12:29:03 -08:00
committed by Andrew Kushnir
parent cf07d428a1
commit ee8b8f52aa
16 changed files with 953 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/test/acceptance/integration_spec.ts
View File

@ -1184,7 +1184,7 @@ describe('acceptance integration tests', () => {
@Component({
template: `
<div DirWithSingleStylingBindings class="abc" style="width:100px; height:200px"></div>
<div DirWithSingleStylingBindings class="abc" style="width:100px;"></div>
`
})
class App {
@ -1198,7 +1198,7 @@ describe('acceptance integration tests', () => {
const dirInstance = fixture.componentInstance.dirInstance;
const target: HTMLDivElement = fixture.nativeElement.querySelector('div');
expect(target.style.getPropertyValue('width')).toEqual('100px');
expect(target.style.getPropertyValue('height')).toEqual('200px');
expect(target.style.getPropertyValue('height')).toEqual('');
expect(target.classList.contains('abc')).toBeTruthy();
expect(target.classList.contains('def')).toBeTruthy();
expect(target.classList.contains('xyz')).toBeFalsy();
@ -1208,7 +1208,7 @@ describe('acceptance integration tests', () => {
dirInstance.activateXYZClass = true;
fixture.detectChanges();
expect(target.style.getPropertyValue('width')).toEqual('444px');
expect(target.style.getPropertyValue('width')).toEqual('100px');
expect(target.style.getPropertyValue('height')).toEqual('999px');
expect(target.classList.contains('abc')).toBeTruthy();
expect(target.classList.contains('def')).toBeTruthy();
@ -1219,7 +1219,7 @@ describe('acceptance integration tests', () => {
fixture.detectChanges();
expect(target.style.getPropertyValue('width')).toEqual('100px');
expect(target.style.getPropertyValue('height')).toEqual('200px');
expect(target.style.getPropertyValue('height')).toEqual('');
expect(target.classList.contains('abc')).toBeTruthy();
expect(target.classList.contains('def')).toBeTruthy();
expect(target.classList.contains('xyz')).toBeTruthy();