@@ -373,6 +373,111 @@ describe('ViewContainerRef', () => { 'http://www.w3.org/1999/xhtml', ); }); + + it('should use the HTML namespace inside a block that follows an SVG element', () => { + @Component({ + selector: 'div[dynamic-html]', + template: 'HTML content', + }) + class HtmlComp {} + + @Component({ + template: ` + + @if (true) { +

+ } + `, + }) + class TestComp { + @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef; + } + + TestBed.configureTestingModule({imports: [TestComp, HtmlComp]}); + const fixture = TestBed.createComponent(TestComp); + fixture.detectChanges(); + + const componentRef = fixture.componentInstance.container.createComponent(HtmlComp); + fixture.detectChanges(); + + expect(componentRef.location.nativeElement.namespaceURI).toBe( + 'http://www.w3.org/1999/xhtml', + ); + }); + + it('should use the HTML namespace inside a component rendered in an SVG element', () => { + @Component({ + selector: 'div[dynamic-html]', + template: 'HTML content', + }) + class HtmlComp {} + + @Component({ + selector: 'g[inner]', + template: ` + @if (true) { + + } + `, + }) + class InnerComp { + @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef; + } + + @Component({ + template: '', + imports: [InnerComp], + }) + class TestComp { + @ViewChild(InnerComp) inner!: InnerComp; + } + + TestBed.configureTestingModule({imports: [TestComp, InnerComp, HtmlComp]}); + const fixture = TestBed.createComponent(TestComp); + fixture.detectChanges(); + + const componentRef = fixture.componentInstance.inner.container.createComponent(HtmlComp); + fixture.detectChanges(); + + expect(componentRef.location.nativeElement.namespaceURI).toBe( + 'http://www.w3.org/1999/xhtml', + ); + }); + + it('should inherit the namespace of an element anchor across a view boundary', () => { + @Component({ + selector: 'g[dynamic-group]', + template: 'SVG content', + }) + class SvgGroupComp {} + + @Component({ + template: ` + +

+ `, + // Eager, because the `inner` query only resolves once the host view is refreshed + // again after the embedded view is created. + changeDetection: ChangeDetectionStrategy.Eager, + }) + class TestComp { + @ViewChild('anchor', {read: ViewContainerRef}) anchor!: ViewContainerRef; + @ViewChild('tpl', {read: TemplateRef}) tpl!: TemplateRef; + @ViewChild('inner', {read: ViewContainerRef}) inner!: ViewContainerRef; + } + + TestBed.configureTestingModule({imports: [TestComp, SvgGroupComp]});

lazerg analysis page

Lazizbek Ergashev