fix(ivy): "select" attribute on <ng-content> should not be case-sensitive (FW-789) (#27500)
While generating attributes for `projection` instruction, we checked whether attribute name is equal to 'select' in lower case. However in other cases we treat 'select' attribute name as case-insensitive. This PR makes 'select' attribute consistently case-insensitive. PR Close #27500
This commit is contained in:
parent
c71d7b5633
commit
cad67148b1
|
@ -1026,7 +1026,7 @@ describe('compiler compliance', () => {
|
|||
selector: 'complex',
|
||||
template: \`
|
||||
<div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
|
||||
<div id="second"><ng-content select="span[title=toSecond]"></ng-content></div>\`
|
||||
<div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>\`
|
||||
})
|
||||
export class ComplexComponent { }
|
||||
|
||||
|
@ -1104,7 +1104,7 @@ describe('compiler compliance', () => {
|
|||
@Component({
|
||||
template: \`
|
||||
<div id="second" *ngIf="visible">
|
||||
<ng-content select="span[title=toFirst]"></ng-content>
|
||||
<ng-content SELECT="span[title=toFirst]"></ng-content>
|
||||
</div>
|
||||
<div id="third" *ngIf="visible">
|
||||
No ng-content, no instructions generated.
|
||||
|
|
|
@ -59,7 +59,11 @@ export function renderFlagCheckIfStmt(
|
|||
}
|
||||
|
||||
// Default selector used by `<ng-content>` if none specified
|
||||
const DEFAULT_CONTENT_SELECTOR = '*';
|
||||
const DEFAULT_NG_CONTENT_SELECTOR = '*';
|
||||
|
||||
// Selector attribute name of `<ng-content>`
|
||||
const NG_CONTENT_SELECT_ATTR = 'select';
|
||||
|
||||
export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver {
|
||||
private _dataIndex = 0;
|
||||
private _bindingContext = 0;
|
||||
|
@ -411,7 +415,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
visitContent(ngContent: t.Content) {
|
||||
this._hasNgContent = true;
|
||||
const slot = this.allocateDataSlot();
|
||||
let selectorIndex = ngContent.selector === DEFAULT_CONTENT_SELECTOR ?
|
||||
let selectorIndex = ngContent.selector === DEFAULT_NG_CONTENT_SELECTOR ?
|
||||
0 :
|
||||
this._ngContentSelectors.push(ngContent.selector);
|
||||
const parameters: o.Expression[] = [o.literal(slot)];
|
||||
|
@ -419,9 +423,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
|||
const attributeAsList: string[] = [];
|
||||
|
||||
ngContent.attributes.forEach((attribute) => {
|
||||
const name = attribute.name;
|
||||
if (name !== 'select') {
|
||||
attributeAsList.push(name, attribute.value);
|
||||
const {name, value} = attribute;
|
||||
if (name.toLowerCase() !== NG_CONTENT_SELECT_ATTR) {
|
||||
attributeAsList.push(name, value);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -81,22 +81,21 @@ describe('projection', () => {
|
|||
expect(main.nativeElement).toHaveText('');
|
||||
});
|
||||
|
||||
fixmeIvy('FW-789: select attribute on <ng-content> should not be case-sensitive')
|
||||
.it('should support multiple content tags', () => {
|
||||
TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<multiple-content-tags>' +
|
||||
'<div>B</div>' +
|
||||
'<div>C</div>' +
|
||||
'<div class="left">A</div>' +
|
||||
'</multiple-content-tags>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
fixmeIvy('unknown').it('should support multiple content tags', () => {
|
||||
TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<multiple-content-tags>' +
|
||||
'<div>B</div>' +
|
||||
'<div>C</div>' +
|
||||
'<div class="left">A</div>' +
|
||||
'</multiple-content-tags>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.nativeElement).toHaveText('(A, BC)');
|
||||
});
|
||||
expect(main.nativeElement).toHaveText('(A, BC)');
|
||||
});
|
||||
|
||||
it('should redistribute only direct children', () => {
|
||||
TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
|
||||
|
|
Loading…
Reference in New Issue