feat(ivy): properly apply style="", [style], [style.foo] and [attr.style] bindings (#24602)
PR Close #24602
This commit is contained in:
Matias Niemelä
committed by
Miško Hevery
Miško Hevery
parent
52d43a99ef
commit
3980640d53
@@ -321,15 +321,23 @@ describe('compiler compliance', () => {
|
||||
|
||||
const factory = 'factory: function MyComponent_Factory() { return new MyComponent(); }';
|
||||
const template = `
|
||||
template: function MyComponent_Template(rf: IDENT, ctx: IDENT) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵEe(0, 'div');
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵkn(0, 'error', $r3$.ɵb(ctx.error));
|
||||
$r3$.ɵsn(0, 'background-color', $r3$.ɵb(ctx.color));
|
||||
}
|
||||
}
|
||||
const _c0 = ['background-color'];
|
||||
class MyComponent {
|
||||
static ngComponentDef = i0.ɵdefineComponent({type:MyComponent,selectors:[['my-component']],
|
||||
factory:function MyComponent_Factory(){
|
||||
return new MyComponent();
|
||||
},template:function MyComponent_Template(rf:number,ctx:any){
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, 'div');
|
||||
$r3$.ɵs(1, _c0);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵsp(1, 0, ctx.color);
|
||||
$r3$.ɵsa(1);
|
||||
$r3$.ɵkn(0, 'error', $r3$.ɵb(ctx.error));
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {InitialStylingFlags} from '../../src/core';
|
||||
import {MockDirectory, setup} from '../aot/test_util';
|
||||
|
||||
import {compile, expectEmit} from './mock_compile';
|
||||
|
||||
describe('compiler compliance: styling', () => {
|
||||
@@ -16,7 +18,7 @@ describe('compiler compliance: styling', () => {
|
||||
compileCommon: true,
|
||||
});
|
||||
|
||||
describe('[style]', () => {
|
||||
describe('[style] and [style.prop]', () => {
|
||||
it('should create style instructions on the element', () => {
|
||||
const files = {
|
||||
app: {
|
||||
@@ -40,10 +42,13 @@ describe('compiler compliance: styling', () => {
|
||||
const template = `
|
||||
template: function MyComponent_Template(rf: $RenderFlags$, $ctx$: $MyComponent$) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵEe(0, 'div');
|
||||
$r3$.ɵE(0, 'div');
|
||||
$r3$.ɵs(1);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵs(0,$r3$.ɵb($ctx$.myStyleExp));
|
||||
$r3$.ɵsm(1, $ctx$.myStyleExp);
|
||||
$r3$.ɵsa(1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -51,6 +56,63 @@ describe('compiler compliance: styling', () => {
|
||||
const result = compile(files, angularFiles);
|
||||
expectEmit(result.source, template, 'Incorrect template');
|
||||
});
|
||||
|
||||
it('should place initial, multi, singular and application followed by attribute styling instructions in the template code in that order',
|
||||
() => {
|
||||
const files = {
|
||||
app: {
|
||||
'spec.ts': `
|
||||
import {Component, NgModule} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-component',
|
||||
template: \`<div style="opacity:1"
|
||||
[attr.style]="'border-width: 10px'"
|
||||
[style.width]="myWidth"
|
||||
[style]="myStyleExp"
|
||||
[style.height]="myHeight"></div>\`
|
||||
})
|
||||
export class MyComponent {
|
||||
myStyleExp = [{color:'red'}, {color:'blue', duration:1000}]
|
||||
myWidth = '100px';
|
||||
myHeight = '100px';
|
||||
}
|
||||
|
||||
@NgModule({declarations: [MyComponent]})
|
||||
export class MyModule {}
|
||||
`
|
||||
}
|
||||
};
|
||||
|
||||
const template = `
|
||||
const _c0 = ['opacity','width','height',${InitialStylingFlags.INITIAL_STYLES},'opacity','1'];
|
||||
class MyComponent {
|
||||
static ngComponentDef = i0.ɵdefineComponent({
|
||||
type: MyComponent,
|
||||
selectors:[['my-component']],
|
||||
factory:function MyComponent_Factory(){
|
||||
return new MyComponent();
|
||||
},
|
||||
template: function MyComponent_Template(rf: $RenderFlags$, $ctx$: $MyComponent$) {
|
||||
if (rf & 1) {
|
||||
$r3$.ɵE(0, 'div');
|
||||
$r3$.ɵs(1, _c0);
|
||||
$r3$.ɵe();
|
||||
}
|
||||
if (rf & 2) {
|
||||
$r3$.ɵsm(1, $ctx$.myStyleExp);
|
||||
$r3$.ɵsp(1, 1, $ctx$.myWidth);
|
||||
$r3$.ɵsp(1, 2, $ctx$.myHeight);
|
||||
$r3$.ɵsa(1);
|
||||
$r3$.ɵa(0, 'style', $r3$.ɵb('border-width: 10px'));
|
||||
}
|
||||
}
|
||||
});
|
||||
`;
|
||||
|
||||
const result = compile(files, angularFiles);
|
||||
expectEmit(result.source, template, 'Incorrect template');
|
||||
});
|
||||
});
|
||||
|
||||
describe('[class]', () => {
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* @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 {hyphenate, parseStyle, stripUnnecessaryQuotes} from '../../src/render3/view/styling';
|
||||
|
||||
describe('inline css style parsing', () => {
|
||||
it('should parse empty or blank strings', () => {
|
||||
const result1 = parseStyle('');
|
||||
expect(result1).toEqual({});
|
||||
|
||||
const result2 = parseStyle(' ');
|
||||
expect(result2).toEqual({});
|
||||
});
|
||||
|
||||
it('should parse a string into a key/value map', () => {
|
||||
const result = parseStyle('width:100px;height:200px;opacity:0');
|
||||
expect(result).toEqual({width: '100px', height: '200px', opacity: '0'});
|
||||
});
|
||||
|
||||
it('should trim values and properties', () => {
|
||||
const result = parseStyle('width :333px ; height:666px ; opacity: 0.5;');
|
||||
expect(result).toEqual({width: '333px', height: '666px', opacity: '0.5'});
|
||||
});
|
||||
|
||||
it('should chomp out start/end quotes', () => {
|
||||
const result = parseStyle(
|
||||
'content: "foo"; opacity: \'0.5\'; font-family: "Verdana", Helvetica, "sans-serif"');
|
||||
expect(result).toEqual(
|
||||
{content: 'foo', opacity: '0.5', 'font-family': '"Verdana", Helvetica, "sans-serif"'});
|
||||
});
|
||||
|
||||
it('should not mess up with quoted strings that contain [:;] values', () => {
|
||||
const result = parseStyle('content: "foo; man: guy"; width: 100px');
|
||||
expect(result).toEqual({content: 'foo; man: guy', width: '100px'});
|
||||
});
|
||||
|
||||
it('should not mess up with quoted strings that contain inner quote values', () => {
|
||||
const quoteStr = '"one \'two\' three \"four\" five"';
|
||||
const result = parseStyle(`content: ${quoteStr}; width: 123px`);
|
||||
expect(result).toEqual({content: quoteStr, width: '123px'});
|
||||
});
|
||||
|
||||
it('should respect parenthesis that are placed within a style', () => {
|
||||
const result = parseStyle('background-image: url("foo.jpg")');
|
||||
expect(result).toEqual({'background-image': 'url("foo.jpg")'});
|
||||
});
|
||||
|
||||
it('should respect multi-level parenthesis that contain special [:;] characters', () => {
|
||||
const result = parseStyle('color: rgba(calc(50 * 4), var(--cool), :5;); height: 100px;');
|
||||
expect(result).toEqual({color: 'rgba(calc(50 * 4), var(--cool), :5;)', height: '100px'});
|
||||
});
|
||||
|
||||
it('should hyphenate style properties from camel case', () => {
|
||||
const result = parseStyle('borderWidth: 200px');
|
||||
expect(result).toEqual({
|
||||
'border-width': '200px',
|
||||
});
|
||||
});
|
||||
|
||||
describe('quote chomping', () => {
|
||||
it('should remove the start and end quotes', () => {
|
||||
expect(stripUnnecessaryQuotes('\'foo bar\'')).toEqual('foo bar');
|
||||
expect(stripUnnecessaryQuotes('"foo bar"')).toEqual('foo bar');
|
||||
});
|
||||
|
||||
it('should not remove quotes if the quotes are not at the start and end', () => {
|
||||
expect(stripUnnecessaryQuotes('foo bar')).toEqual('foo bar');
|
||||
expect(stripUnnecessaryQuotes(' foo bar ')).toEqual(' foo bar ');
|
||||
expect(stripUnnecessaryQuotes('\'foo\' bar')).toEqual('\'foo\' bar');
|
||||
expect(stripUnnecessaryQuotes('foo "bar"')).toEqual('foo "bar"');
|
||||
});
|
||||
|
||||
it('should not remove quotes if there are inner quotes', () => {
|
||||
const str = '"Verdana", "Helvetica"';
|
||||
expect(stripUnnecessaryQuotes(str)).toEqual(str);
|
||||
});
|
||||
});
|
||||
|
||||
describe('camelCasing => hyphenation', () => {
|
||||
it('should convert a camel-cased value to a hyphenated value', () => {
|
||||
expect(hyphenate('fooBar')).toEqual('foo-bar');
|
||||
expect(hyphenate('fooBarMan')).toEqual('foo-bar-man');
|
||||
expect(hyphenate('-fooBar-man')).toEqual('-foo-bar-man');
|
||||
});
|
||||
|
||||
it('should make everything lowercase',
|
||||
() => { expect(hyphenate('-WebkitAnimation')).toEqual('-webkit-animation'); });
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user