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

fix(ivy): Add style="{{exp}}" based interpolation (#34202)

Browse Source 
Fixes #33575

Add support for interpolation in styles as shown:
```
<div style="color: {{exp1}}; width: {{exp2}};">
```

PR Close #34202
This commit is contained in:
Miško Hevery
2019-11-27 16:57:14 -08:00
parent 66c06eb1ad
commit 2562a3b1b0
16 changed files with 689 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/src/core_render3_private_export.ts
View File

@ -121,6 +121,15 @@ export {
ɵɵelementContainerEnd,
ɵɵelementContainer,
ɵɵstyleMap,
ɵɵstyleMapInterpolate1,
ɵɵstyleMapInterpolate2,
ɵɵstyleMapInterpolate3,
ɵɵstyleMapInterpolate4,
ɵɵstyleMapInterpolate5,
ɵɵstyleMapInterpolate6,
ɵɵstyleMapInterpolate7,
ɵɵstyleMapInterpolate8,
ɵɵstyleMapInterpolateV,
ɵɵstyleSanitizer,
ɵɵclassMap,
ɵɵclassMapInterpolate1,

9
packages/core/src/render3/index.ts
View File

@ -100,6 +100,15 @@ export {
ɵɵselect,
ɵɵadvance,
ɵɵstyleMap,
ɵɵstyleMapInterpolate1,
ɵɵstyleMapInterpolate2,
ɵɵstyleMapInterpolate3,
ɵɵstyleMapInterpolate4,
ɵɵstyleMapInterpolate5,
ɵɵstyleMapInterpolate6,
ɵɵstyleMapInterpolate7,
ɵɵstyleMapInterpolate8,
ɵɵstyleMapInterpolateV,
ɵɵstyleProp,
ɵɵstylePropInterpolate1,

1
packages/core/src/render3/instructions/all.ts
View File

@ -46,5 +46,6 @@ export * from './styling';
export * from './text';
export * from './text_interpolation';
export * from './class_map_interpolation';
export * from './style_map_interpolation';
export * from './style_prop_interpolation';
export * from './host_property';

6
packages/core/src/render3/instructions/attribute_interpolation.ts
View File

@ -413,9 +413,9 @@ export function ɵɵattributeInterpolate8(
}
/**
* Update an interpolated attribute on an element with 8 or more bound values surrounded by text.
* Update an interpolated attribute on an element with 9 or more bound values surrounded by text.
*
* Used when the number of interpolated values exceeds 7.
* Used when the number of interpolated values exceeds 8.
*
* ```html
* <div
@ -431,7 +431,7 @@ export function ɵɵattributeInterpolate8(
* ```
*
* @param attrName The name of the attribute to update.
* @param values The a collection of values and the strings in-between those values, beginning with
* @param values The collection of values and the strings in-between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
* @param sanitizer An optional sanitizer function

6
packages/core/src/render3/instructions/class_map_interpolation.ts
View File

@ -309,9 +309,9 @@ export function ɵɵclassMapInterpolate8(
}
/**
* Update an interpolated class on an element with 8 or more bound values surrounded by text.
* Update an interpolated class on an element with 9 or more bound values surrounded by text.
*
* Used when the number of interpolated values exceeds 7.
* Used when the number of interpolated values exceeds 8.
*
* ```html
* <div
@ -326,7 +326,7 @@ export function ɵɵclassMapInterpolate8(
* 'suffix']);
* ```
*.
* @param values The a collection of values and the strings in-between those values, beginning with
* @param values The collection of values and the strings in-between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
* @codeGenApi

6
packages/core/src/render3/instructions/property_interpolation.ts
View File

@ -469,9 +469,9 @@ export function ɵɵpropertyInterpolate8(
}
/**
* Update an interpolated property on an element with 8 or more bound values surrounded by text.
* Update an interpolated property on an element with 9 or more bound values surrounded by text.
*
* Used when the number of interpolated values exceeds 7.
* Used when the number of interpolated values exceeds 8.
*
* ```html
* <div
@ -491,7 +491,7 @@ export function ɵɵpropertyInterpolate8(
* be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled.
*
* @param propName The name of the property to update.
* @param values The a collection of values and the strings inbetween those values, beginning with a
* @param values The collection of values and the strings inbetween those values, beginning with a
* string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
* @param sanitizer An optional sanitizer function

343
packages/core/src/render3/instructions/style_map_interpolation.ts Normal file
View File

@ -0,0 +1,343 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {getLView} from '../state';
import {interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV} from './interpolation';
import {ɵɵstyleMap} from './styling';
/**
*
* Update an interpolated style on an element with single bound value surrounded by text.
*
* Used when the value passed to a property has 1 interpolated value in it:
*
* ```html
* <div style="key: {{v0}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate1('key: ', v0, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate1(prefix: string, v0: any, suffix: string): void {
const lView = getLView();
const interpolatedValue = interpolation1(lView, prefix, v0, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 2 bound values surrounded by text.
*
* Used when the value passed to a property has 2 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key1: {{v1}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate2('key: ', v0, '; key1: ', v1, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate2(
prefix: string, v0: any, i0: string, v1: any, suffix: string): void {
const lView = getLView();
const interpolatedValue = interpolation2(lView, prefix, v0, i0, v1, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 3 bound values surrounded by text.
*
* Used when the value passed to a property has 3 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key2: {{v1}}; key2: {{v2}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate3(
* 'key: ', v0, '; key1: ', v1, '; key2: ', v2, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate3(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string): void {
const lView = getLView();
const interpolatedValue = interpolation3(lView, prefix, v0, i0, v1, i1, v2, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 4 bound values surrounded by text.
*
* Used when the value passed to a property has 4 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate4(
* 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate4(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
suffix: string): void {
const lView = getLView();
const interpolatedValue = interpolation4(lView, prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 5 bound values surrounded by text.
*
* Used when the value passed to a property has 5 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate5(
* 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate5(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, suffix: string): void {
const lView = getLView();
const interpolatedValue =
interpolation5(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 6 bound values surrounded by text.
*
* Used when the value passed to a property has 6 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}};
* key5: {{v5}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate6(
* 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,
* 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate6(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, suffix: string): void {
const lView = getLView();
const interpolatedValue =
interpolation6(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 7 bound values surrounded by text.
*
* Used when the value passed to a property has 7 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}; key5: {{v5}};
* key6: {{v6}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate7(
* 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,
* '; key6: ', v6, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param i5 Static value used for concatenation only.
* @param v6 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate7(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): void {
const lView = getLView();
const interpolatedValue =
interpolation7(lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
*
* Update an interpolated style on an element with 8 bound values surrounded by text.
*
* Used when the value passed to a property has 8 interpolated values in it:
*
* ```html
* <div style="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}; key5: {{v5}};
* key6: {{v6}}; key7: {{v7}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolate8(
* 'key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,
* '; key6: ', v6, '; key7: ', v7, 'suffix');
* ```
*
* @param prefix Static value used for concatenation only.
* @param v0 Value checked for change.
* @param i0 Static value used for concatenation only.
* @param v1 Value checked for change.
* @param i1 Static value used for concatenation only.
* @param v2 Value checked for change.
* @param i2 Static value used for concatenation only.
* @param v3 Value checked for change.
* @param i3 Static value used for concatenation only.
* @param v4 Value checked for change.
* @param i4 Static value used for concatenation only.
* @param v5 Value checked for change.
* @param i5 Static value used for concatenation only.
* @param v6 Value checked for change.
* @param i6 Static value used for concatenation only.
* @param v7 Value checked for change.
* @param suffix Static value used for concatenation only.
* @codeGenApi
*/
export function ɵɵstyleMapInterpolate8(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
suffix: string): void {
const lView = getLView();
const interpolatedValue = interpolation8(
lView, prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
ɵɵstyleMap(interpolatedValue);
}
/**
* Update an interpolated style on an element with 9 or more bound values surrounded by text.
*
* Used when the number of interpolated values exceeds 8.
*
* ```html
* <div
* class="key: {{v0}}; key1: {{v1}}; key2: {{v2}}; key3: {{v3}}; key4: {{v4}}; key5: {{v5}};
* key6: {{v6}}; key7: {{v7}}; key8: {{v8}}; key9: {{v9}}suffix"></div>
* ```
*
* Its compiled representation is:
*
* ```ts
* ɵɵstyleMapInterpolateV(
* ['key: ', v0, '; key1: ', v1, '; key2: ', v2, '; key3: ', v3, '; key4: ', v4, '; key5: ', v5,
* '; key6: ', v6, '; key7: ', v7, '; key8: ', v8, '; key9: ', v9, 'suffix']);
* ```
*.
* @param values The collection of values and the strings in-between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '; key2: ', value1, '; key2: ', value2, ..., value99, 'suffix']`)
* @codeGenApi
*/
export function ɵɵstyleMapInterpolateV(values: any[]): void {
const lView = getLView();
const interpolatedValue = interpolationV(lView, values);
ɵɵstyleMap(interpolatedValue);
}

6
packages/core/src/render3/instructions/style_prop_interpolation.ts
View File

@ -358,10 +358,10 @@ export function ɵɵstylePropInterpolate8(
}
/**
* Update an interpolated style property on an element with 8 or more bound values surrounded by
* Update an interpolated style property on an element with 9 or more bound values surrounded by
* text.
*
* Used when the number of interpolated values exceeds 7.
* Used when the number of interpolated values exceeds 8.
*
* ```html
* <div
@ -380,7 +380,7 @@ export function ɵɵstylePropInterpolate8(
* @param styleIndex Index of style to update. This index value refers to the
* index of the style in the style bindings array that was passed into
* `styling`..
* @param values The a collection of values and the strings in-between those values, beginning with
* @param values The collection of values and the strings in-between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
* @param valueSuffix Optional suffix. Used with scalar values to add unit such as `px`.

2
packages/core/src/render3/instructions/styling.ts
View File

@ -655,7 +655,7 @@ export function toStylingKeyValueArray(
* @param key Style key to add. (This key will be checked if it needs sanitization)
* @param value The value to set (If key needs sanitization it will be sanitized)
*/
function styleKeyValueArraySet(keyValueArray: KeyValueArray<any>, key: string, value: any) {
export function styleKeyValueArraySet(keyValueArray: KeyValueArray<any>, key: string, value: any) {
if (stylePropNeedsSanitization(key)) {
value = ɵɵsanitizeStyle(value);
}

2
packages/core/src/render3/instructions/text_interpolation.ts
View File

@ -306,7 +306,7 @@ export function ɵɵtextInterpolate8(
* 'suffix']);
* ```
*.
* @param values The a collection of values and the strings in between those values, beginning with
* @param values The collection of values and the strings in between those values, beginning with
* a string prefix and ending with a string suffix.
* (e.g. `['prefix', value0, '-', value1, '-', value2, ..., value99, 'suffix']`)
*

9
packages/core/src/render3/jit/environment.ts
View File

@ -117,6 +117,15 @@ export const angularCoreEnv: {[name: string]: Function} =
'ɵɵclassMapInterpolate8': r3.ɵɵclassMapInterpolate8,
'ɵɵclassMapInterpolateV': r3.ɵɵclassMapInterpolateV,
'ɵɵstyleMap': r3.ɵɵstyleMap,
'ɵɵstyleMapInterpolate1': r3.ɵɵstyleMapInterpolate1,
'ɵɵstyleMapInterpolate2': r3.ɵɵstyleMapInterpolate2,
'ɵɵstyleMapInterpolate3': r3.ɵɵstyleMapInterpolate3,
'ɵɵstyleMapInterpolate4': r3.ɵɵstyleMapInterpolate4,
'ɵɵstyleMapInterpolate5': r3.ɵɵstyleMapInterpolate5,
'ɵɵstyleMapInterpolate6': r3.ɵɵstyleMapInterpolate6,
'ɵɵstyleMapInterpolate7': r3.ɵɵstyleMapInterpolate7,
'ɵɵstyleMapInterpolate8': r3.ɵɵstyleMapInterpolate8,
'ɵɵstyleMapInterpolateV': r3.ɵɵstyleMapInterpolateV,
'ɵɵstyleProp': r3.ɵɵstyleProp,
'ɵɵstylePropInterpolate1': r3.ɵɵstylePropInterpolate1,
'ɵɵstylePropInterpolate2': r3.ɵɵstylePropInterpolate2,

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

@ -757,15 +757,15 @@ describe('styling', () => {
`
})
class Cmp {
one = 'one';
two = 'two';
three = 'three';
four = 'four';
five = 'five';
six = 'six';
seven = 'seven';
eight = 'eight';
nine = 'nine';
one = '1';
two = '2';
three = '3';
four = '4';
five = '5';
six = '6';
seven = '7';
eight = '8';
nine = '9';
}
TestBed.configureTestingModule({declarations: [Cmp]});
@ -775,16 +775,16 @@ describe('styling', () => {
const divs = fixture.nativeElement.querySelectorAll('div');
expect(divs[0].getAttribute('class')).toBe('aonebtwocthreedfourefivefsixgsevenheightininej');
expect(divs[1].getAttribute('class')).toBe('aonebtwocthreedfourefivefsixgsevenheighti');
expect(divs[2].getAttribute('class')).toBe('aonebtwocthreedfourefivefsixgsevenh');
expect(divs[3].getAttribute('class')).toBe('aonebtwocthreedfourefivefsixg');
expect(divs[4].getAttribute('class')).toBe('aonebtwocthreedfourefivef');
expect(divs[5].getAttribute('class')).toBe('aonebtwocthreedfoure');
expect(divs[6].getAttribute('class')).toBe('aonebtwocthreed');
expect(divs[7].getAttribute('class')).toBe('aonebtwoc');
expect(divs[8].getAttribute('class')).toBe('aoneb');
expect(divs[9].getAttribute('class')).toBe('one');
expect(divs[0].getAttribute('class')).toBe('a1b2c3d4e5f6g7h8i9j');
expect(divs[1].getAttribute('class')).toBe('a1b2c3d4e5f6g7h8i');
expect(divs[2].getAttribute('class')).toBe('a1b2c3d4e5f6g7h');
expect(divs[3].getAttribute('class')).toBe('a1b2c3d4e5f6g');
expect(divs[4].getAttribute('class')).toBe('a1b2c3d4e5f');
expect(divs[5].getAttribute('class')).toBe('a1b2c3d4e');
expect(divs[6].getAttribute('class')).toBe('a1b2c3d');
expect(divs[7].getAttribute('class')).toBe('a1b2c');
expect(divs[8].getAttribute('class')).toBe('a1b');
expect(divs[9].getAttribute('class')).toBe('1');
instance.one = instance.two = instance.three = instance.four = instance.five = instance.six =
instance.seven = instance.eight = instance.nine = '';
@ -802,6 +802,69 @@ describe('styling', () => {
expect(divs[9].getAttribute('class')).toBeFalsy();
});
onlyInIvy('only Ivy supports style interpolation')
.it('should support interpolations inside a style binding', () => {
@Component({
template: `
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i{{nine}}j&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d{{four}}e&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c{{three}}d&quot;"></div>
<div style="content: &quot;a{{one}}b{{two}}c&quot;"></div>
<div style="content: &quot;a{{one}}b&quot;"></div>
<div style="{{self}}"></div>
`
})
class Cmp {
self = 'content: "self"';
one = '1';
two = '2';
three = '3';
four = '4';
five = '5';
six = '6';
seven = '7';
eight = '8';
nine = '9';
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const instance = fixture.componentInstance;
fixture.detectChanges();
const divs = fixture.nativeElement.querySelectorAll('div');
expect(divs[0].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g7h8i9j"');
expect(divs[1].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g7h8i"');
expect(divs[2].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g7h"');
expect(divs[3].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g"');
expect(divs[4].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f"');
expect(divs[5].style.getPropertyValue('content')).toBe('"a1b2c3d4e"');
expect(divs[6].style.getPropertyValue('content')).toBe('"a1b2c3d"');
expect(divs[7].style.getPropertyValue('content')).toBe('"a1b2c"');
expect(divs[8].style.getPropertyValue('content')).toBe('"a1b"');
expect(divs[9].style.getPropertyValue('content')).toBe('"self"');
instance.one = instance.two = instance.three = instance.four = instance.five =
instance.six = instance.seven = instance.eight = instance.nine = instance.self = '';
fixture.detectChanges();
expect(divs[0].style.getPropertyValue('content')).toBe('"abcdefghij"');
expect(divs[1].style.getPropertyValue('content')).toBe('"abcdefghi"');
expect(divs[2].style.getPropertyValue('content')).toBe('"abcdefgh"');
expect(divs[3].style.getPropertyValue('content')).toBe('"abcdefg"');
expect(divs[4].style.getPropertyValue('content')).toBe('"abcdef"');
expect(divs[5].style.getPropertyValue('content')).toBe('"abcde"');
expect(divs[6].style.getPropertyValue('content')).toBe('"abcd"');
expect(divs[7].style.getPropertyValue('content')).toBe('"abc"');
expect(divs[8].style.getPropertyValue('content')).toBe('"ab"');
expect(divs[9].style.getPropertyValue('content')).toBeFalsy();
});
it('should support interpolations inside a class binding when other classes are present', () => {
@Component({template: '<div class="zero i-{{one}} {{two}} three"></div>'})
class Cmp {