test(ivy): move content projection tests to acceptance (#30357)

Moves all manual `render3` content projection tests that use
the `ɵɵelementProperty` to acceptance tests. Additionally a
few other content projection tests were moved over to
acceptance. Eventually we'll be able to move all remaining
content projection tests to acceptance.

PR Close #30357

packages/core/test/acceptance/content_spec.ts

@@ -6,11 +6,393 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectorRef, Component, Directive} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ChangeDetectorRef, Component, Directive, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {Input} from '@angular/core/src/metadata';
 import {TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
 describe('projection', () => {
+
+  function getElementHtml(element: HTMLElement) {
+    return element.innerHTML.replace(/<!--(\W|\w)*?-->/g, '')
+        .replace(/\sng-reflect-\S*="[^"]*"/g, '');
+  }
+
+  it('should project content', () => {
+    @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
+    class Child {
+    }
+
+    @Component({selector: 'parent', template: '<child>content</child>'})
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML).toBe(`<child><div>content</div></child>`);
+  });
+
+  it('should project content when <ng-content> is at a template root', () => {
+    @Component({
+      selector: 'child',
+      template: '<ng-content></ng-content>',
+    })
+    class Child {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: '<child>content</child>',
+    })
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML).toBe(`<child>content</child>`);
+  });
+
+  it('should project content with siblings', () => {
+    @Component({selector: 'child', template: '<ng-content></ng-content>'})
+    class Child {
+    }
+
+    @Component({selector: 'parent', template: `<child>before<div>content</div>after</child>`})
+    class Parent {
+    }
+
+
+    TestBed.configureTestingModule({declarations: [Parent, Child]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML).toBe(`<child>before<div>content</div>after</child>`);
+  });
+
+  it('should be able to re-project content', () => {
+    @Component({selector: 'grand-child', template: `<div><ng-content></ng-content></div>`})
+    class GrandChild {
+    }
+
+    @Component(
+        {selector: 'child', template: `<grand-child><ng-content></ng-content></grand-child>`})
+    class Child {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `<child><b>Hello</b>World!</child>`,
+    })
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML)
+        .toBe('<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>');
+  });
+
+  it('should project components', () => {
+    @Component({
+      selector: 'child',
+      template: `<div><ng-content></ng-content></div>`,
+    })
+    class Child {
+    }
+
+    @Component({
+      selector: 'projected-comp',
+      template: 'content',
+    })
+    class ProjectedComp {
+    }
+
+    @Component({selector: 'parent', template: `<child><projected-comp></projected-comp></child>`})
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML)
+        .toBe('<child><div><projected-comp>content</projected-comp></div></child>');
+  });
+
+  it('should project components that have their own projection', () => {
+    @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
+    class Child {
+    }
+
+    @Component({selector: 'projected-comp', template: `<p><ng-content></ng-content></p>`})
+    class ProjectedComp {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `
+        <child>
+          <projected-comp><div>Some content</div>Other content</projected-comp>
+        </child>`,
+    })
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML)
+        .toBe(
+            `<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>`);
+  });
+
+  it('should project into dynamic views (with createEmbeddedView)', () => {
+    @Component({
+      selector: 'child',
+      template: `Before-<ng-template [ngIf]="showing"><ng-content></ng-content></ng-template>-After`
+    })
+    class Child {
+      showing = false;
+    }
+
+    @Component({selector: 'parent', template: `<child><div>A</div>Some text</child>`})
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
+
+    const fixture = TestBed.createComponent(Parent);
+    const childDebugEl = fixture.debugElement.query(By.directive(Child));
+    const childInstance = childDebugEl.injector.get(Child);
+    const childElement = childDebugEl.nativeElement as HTMLElement;
+
+    childInstance.showing = true;
+    fixture.detectChanges();
+
+    expect(getElementHtml(childElement)).toBe(`Before-<div>A</div>Some text-After`);
+
+    childInstance.showing = false;
+    fixture.detectChanges();
+
+    expect(getElementHtml(childElement)).toBe(`Before--After`);
+
+    childInstance.showing = true;
+    fixture.detectChanges();
+    expect(getElementHtml(childElement)).toBe(`Before-<div>A</div>Some text-After`);
+  });
+
+  it('should project into dynamic views with specific selectors', () => {
+    @Component({
+      selector: 'child',
+      template: `
+        <ng-content></ng-content>
+        Before-
+        <ng-template [ngIf]="showing">
+          <ng-content select="div"></ng-content>
+        </ng-template>
+        -After`
+    })
+    class Child {
+      showing = false;
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `
+        <child>
+          <div>A</div>
+          <span>B</span>
+        </child>
+      `
+    })
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
+
+    const fixture = TestBed.createComponent(Parent);
+    const childDebugEl = fixture.debugElement.query(By.directive(Child));
+    const childInstance = childDebugEl.injector.get(Child);
+
+    childInstance.showing = true;
+    fixture.detectChanges();
+
+    expect(getElementHtml(fixture.nativeElement))
+        .toBe('<child><span>B</span> Before- <div>A</div> -After</child>');
+
+    childInstance.showing = false;
+    fixture.detectChanges();
+    expect(getElementHtml(fixture.nativeElement))
+        .toBe('<child><span>B</span> Before-  -After</child>');
+
+    childInstance.showing = true;
+    fixture.detectChanges();
+    expect(getElementHtml(fixture.nativeElement))
+        .toBe('<child><span>B</span> Before- <div>A</div> -After</child>');
+  });
+
+  it('should project if <ng-content> is in a template that has different declaration/insertion points',
+     () => {
+       @Component(
+           {selector: 'comp', template: `<ng-template><ng-content></ng-content></ng-template>`})
+       class Comp {
+         @ViewChild(TemplateRef) template !: TemplateRef<any>;
+       }
+
+       @Directive({selector: '[trigger]'})
+       class Trigger {
+         @Input() trigger !: Comp;
+
+         constructor(public vcr: ViewContainerRef) {}
+
+         open() { this.vcr.createEmbeddedView(this.trigger.template); }
+       }
+
+       @Component({
+         selector: 'parent',
+         template: `
+        <button [trigger]="comp"></button>
+        <comp #comp>Some content</comp>
+      `
+       })
+       class Parent {
+       }
+
+       TestBed.configureTestingModule({declarations: [Parent, Trigger, Comp]});
+
+       const fixture = TestBed.createComponent(Parent);
+       const trigger = fixture.debugElement.query(By.directive(Trigger)).injector.get(Trigger);
+       fixture.detectChanges();
+
+       expect(getElementHtml(fixture.nativeElement)).toBe(`<button></button><comp></comp>`);
+
+       trigger.open();
+       expect(getElementHtml(fixture.nativeElement))
+           .toBe(`<button></button>Some content<comp></comp>`);
+     });
+
+  // https://stackblitz.com/edit/angular-ceqmnw?file=src%2Fapp%2Fapp.component.ts
+  it('should project nodes into the last ng-content unrolled by ngFor', () => {
+    @Component({
+      selector: 'child',
+      template:
+          `<div *ngFor="let item of [1, 2]; let i = index">({{i}}):<ng-content></ng-content></div>`
+    })
+    class Child {
+    }
+
+    @Component({selector: 'parent', template: `<child>content</child>`})
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
+    const fixture = TestBed.createComponent(Parent);
+    fixture.detectChanges();
+
+    expect(getElementHtml(fixture.nativeElement))
+        .toBe('<child><div>(0):</div><div>(1):content</div></child>');
+  });
+
+  it('should handle projected containers inside other containers', () => {
+    @Component({selector: 'nested-comp', template: `<div>Child content</div>`})
+    class NestedComp {
+    }
+
+    @Component({
+      selector: 'root-comp',
+      template: `<ng-content></ng-content>`,
+    })
+    class RootComp {
+    }
+
+    @Component({
+      selector: 'my-app',
+      template: `
+        <root-comp>
+          <ng-container *ngFor="let item of items; last as last">
+            <nested-comp *ngIf="!last"></nested-comp>
+          </ng-container>
+        </root-comp>
+      `
+    })
+    class MyApp {
+      items = [1, 2];
+    }
+
+    TestBed.configureTestingModule(
+        {declarations: [MyApp, RootComp, NestedComp], imports: [CommonModule]});
+    const fixture = TestBed.createComponent(MyApp);
+    fixture.detectChanges();
+
+    // expecting # of divs to be (items.length - 1), since last element is filtered out by *ngIf,
+    // this applies to all other assertions below
+    expect(fixture.nativeElement.querySelectorAll('div').length).toBe(1);
+
+    fixture.componentInstance.items = [3, 4, 5];
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelectorAll('div').length).toBe(2);
+
+    fixture.componentInstance.items = [6, 7, 8, 9];
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelectorAll('div').length).toBe(3);
+  });
+
+  describe('with selectors', () => {
+    // https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
+    it('should project nodes where attribute selector matches a binding', () => {
+      @Component({
+        selector: 'child',
+        template: `<ng-content select="[title]"></ng-content>`,
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `<child><span [title]="'Some title'">Has title</span></child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual('<child><span title="Some title">Has title</span></child>');
+
+    });
+
+    it('should match selectors against projected containers', () => {
+      @Component(
+          {selector: 'child', template: `<span><ng-content select="div"></ng-content></span>`})
+      class Child {
+      }
+
+      @Component({template: `<child><div *ngIf="value">content</div></child>`})
+      class Parent {
+        value = false;
+      }
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+
+      fixture.componentInstance.value = true;
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual('<child><span><div>content</div></span></child>');
+    });
+  });
+
   it('should handle projected containers inside other containers', () => {
     @Component({
       selector: 'child-comp',  //

packages/core/test/render3/content_spec.ts

@@ -6,231 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {QueryList, TemplateRef, ViewContainerRef} from '@angular/core';
 import {SelectorFlags} from '@angular/core/src/render3/interfaces/projection';
 
-import {AttributeMarker, detectChanges, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵloadViewQuery, ɵɵqueryRefresh, ɵɵreference, ɵɵtemplateRefExtractor, ɵɵviewQuery} from '../../src/render3/index';
+import {AttributeMarker, detectChanges} from '../../src/render3/index';
-import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵprojection, ɵɵprojectionDef, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵprojection, ɵɵprojectionDef, ɵɵtext} from '../../src/render3/instructions/all';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
-
-import {NgForOf, NgIf} from './common_with_def';
 import {ComponentFixture, createComponent, getDirectiveOnNode, renderComponent, toHtml} from './render_util';
 
 describe('content projection', () => {
-  it('should project content', () => {
-
-    /**
-     * <div><ng-content></ng-content></div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵprojection(1); }
-        ɵɵelementEnd();
-      }
-    }, 2);
-
-    /**
-     * <child>content</child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        { ɵɵtext(1, 'content'); }
-        ɵɵelementEnd();
-      }
-    }, 2, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
-  });
-
-  it('should project content when <ng-content> is at a template root', () => {
-    /** <ng-content></ng-content> */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-      }
-    }, 1);
-
-    /** <child>content</child> */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        { ɵɵtext(1, 'content'); }
-        ɵɵelementEnd();
-      }
-    }, 2, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child>content</child>');
-  });
-
-  it('should project content with siblings', () => {
-    /** <ng-content></ng-content> */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-      }
-    }, 1);
-
-    /**
-     * <child>
-     *  before
-     *  <div>content</div>
-     *  after
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵtext(1, 'before');
-          ɵɵelementStart(2, 'div');
-          { ɵɵtext(3, 'content'); }
-          ɵɵelementEnd();
-          ɵɵtext(4, 'after');
-        }
-        ɵɵelementEnd();
-      }
-    }, 5, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child>before<div>content</div>after</child>');
-  });
-
-  it('should re-project content when root.', () => {
-    /** <div><ng-content></ng-content></div> */
-    const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵprojection(1); }
-        ɵɵelementEnd();
-      }
-    }, 2);
-
-    /** <grand-child><ng-content></ng-content></grand-child> */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'grand-child');
-        { ɵɵprojection(1); }
-        ɵɵelementEnd();
-      }
-    }, 2, 0, [GrandChild]);
-
-    /** <child><b>Hello</b>World!</child> */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementStart(1, 'b');
-          ɵɵtext(2, 'Hello');
-          ɵɵelementEnd();
-          ɵɵtext(3, 'World!');
-        }
-        ɵɵelementEnd();
-      }
-    }, 4, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent))
-        .toEqual('<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>');
-  });
-
-  it('should project components', () => {
-
-    /** <div><ng-content></ng-content></div> */
-    const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵprojection(1); }
-        ɵɵelementEnd();
-      }
-    }, 2);
-
-    const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
-      if (rf & RenderFlags.Create) {
-        ɵɵtext(0, 'content');
-      }
-    }, 1);
-
-    /**
-     * <child>
-     *   <projected-comp></projected-comp>
-     * </child>
-     */
-    const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        { ɵɵelement(1, 'projected-comp'); }
-        ɵɵelementEnd();
-      }
-    }, 2, 0, [Child, ProjectedComp]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent))
-        .toEqual('<child><div><projected-comp>content</projected-comp></div></child>');
-  });
-
-  it('should project components that have their own projection', () => {
-    /** <div><ng-content></ng-content></div> */
-    const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵprojection(1); }
-        ɵɵelementEnd();
-      }
-    }, 2);
-
-    /** <p><ng-content></ng-content></p> */
-    const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'p');
-        ɵɵprojection(1);
-        ɵɵelementEnd();
-      }
-    }, 2);
-
-    /**
-     * <child>
-     *   <projected-comp>
-     *       <div> Some content </div>
-     *       Other content
-     *   </projected-comp>
-     * </child>
-     */
-    const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementStart(1, 'projected-comp');
-          {
-            ɵɵelementStart(2, 'div');
-            ɵɵtext(3, 'Some content');
-            ɵɵelementEnd();
-            ɵɵtext(4, 'Other content');
-          }
-
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-      }
-    }, 5, 0, [Child, ProjectedComp]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent))
-        .toEqual(
-            '<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>');
-  });
-
   it('should project containers', () => {
     /** <div><ng-content></ng-content></div> */
     const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
@@ -802,280 +585,6 @@ describe('content projection', () => {
        expect(toHtml(parent)).toEqual('<child><div></div></child>');
      });
 
-  it('should project into dynamic views (with createEmbeddedView)', () => {
-    /**
-     * Before-
-     * <ng-template [ngIf]="showing">
-     *     <ng-content></ng-content>
-     * </ng-template>
-     * -After
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵtext(0, 'Before-');
-        ɵɵtemplate(1, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
-        ɵɵtext(2, '-After');
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.showing));
-      }
-
-    }, 3, 1, [NgIf]);
-
-    function IfTemplate(rf1: RenderFlags, ctx: any) {
-      if (rf1 & RenderFlags.Create) {
-        ɵɵprojection(0);
-      }
-    }
-
-    let child: {showing: boolean};
-    /**
-     * <child>
-     *     <div>A</div>
-     *     Some text
-     * </child>
-     */
-    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementStart(1, 'div');
-          { ɵɵtext(2, 'A'); }
-          ɵɵelementEnd();
-          ɵɵtext(3, 'Some text');
-        }
-        ɵɵelementEnd();
-
-        // testing
-        child = getDirectiveOnNode(0);
-      }
-    }, 4, 0, [Child]);
-
-    const fixture = new ComponentFixture(App);
-    child !.showing = true;
-    fixture.update();
-    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
-
-    child !.showing = false;
-    fixture.update();
-    expect(fixture.html).toEqual('<child>Before--After</child>');
-
-    child !.showing = true;
-    fixture.update();
-    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
-  });
-
-  it('should project into dynamic views (with insertion)', () => {
-    /**
-     * Before-
-     * <ng-template [ngIf]="showing">
-     *     <ng-content></ng-content>
-     * </ng-template>
-     * -After
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵtext(0, 'Before-');
-        ɵɵtemplate(1, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
-        ɵɵtext(2, '-After');
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.showing));
-      }
-
-    }, 3, 1, [NgIf]);
-
-    function IfTemplate(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojection(0);
-      }
-    }
-
-    let child: {showing: boolean};
-    /**
-     * <child>
-     *     <div>A</div>
-     *     Some text
-     * </child>
-     */
-    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementStart(1, 'div');
-          { ɵɵtext(2, 'A'); }
-          ɵɵelementEnd();
-          ɵɵtext(3, 'Some text');
-        }
-        ɵɵelementEnd();
-
-        // testing
-        child = getDirectiveOnNode(0);
-      }
-    }, 4, 0, [Child]);
-
-    const fixture = new ComponentFixture(App);
-    child !.showing = true;
-    fixture.update();
-    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
-
-    child !.showing = false;
-    fixture.update();
-    expect(fixture.html).toEqual('<child>Before--After</child>');
-
-    child !.showing = true;
-    fixture.update();
-    expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
-  });
-
-  it('should project into dynamic views with specific selectors', () => {
-    /**
-     * <ng-content></ng-content>
-     * Before-
-     * <ng-template [ngIf]="showing">
-     *     <ng-content select="div"></ng-content>
-     * </ng-template>
-     * -After
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef([[['div']]]);
-        ɵɵprojection(0);
-        ɵɵtext(1, 'Before-');
-        ɵɵtemplate(2, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
-        ɵɵtext(3, '-After');
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵelementProperty(2, 'ngIf', ɵɵbind(ctx.showing));
-      }
-
-    }, 4, 1, [NgIf]);
-
-    function IfTemplate(rf1: RenderFlags) {
-      if (rf1 & RenderFlags.Create) {
-        ɵɵprojection(0, 1);
-      }
-    }
-
-    let child: {showing: boolean};
-    /**
-     * <child>
-     *     <div>A</div>
-     *     <span>B</span>
-     * </child>
-     */
-    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementStart(1, 'div');
-          { ɵɵtext(2, 'A'); }
-          ɵɵelementEnd();
-          ɵɵelementStart(3, 'span');
-          { ɵɵtext(4, 'B'); }
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-
-        // testing
-        child = getDirectiveOnNode(0);
-      }
-    }, 5, 0, [Child]);
-
-    const fixture = new ComponentFixture(App);
-    child !.showing = true;
-    fixture.update();
-    expect(fixture.html).toEqual('<child><span>B</span>Before-<div>A</div>-After</child>');
-
-    child !.showing = false;
-    fixture.update();
-    expect(fixture.html).toEqual('<child><span>B</span>Before--After</child>');
-
-    child !.showing = true;
-    fixture.update();
-    expect(fixture.html).toEqual('<child><span>B</span>Before-<div>A</div>-After</child>');
-  });
-
-  it('should project if <ng-content> is in a template that has different declaration/insertion points',
-     () => {
-       let triggerDir !: Trigger;
-
-       function NgTemplate(rf: RenderFlags, ctx: any) {
-         if (rf & RenderFlags.Create) {
-           ɵɵprojection(0);
-         }
-       }
-
-       /**
-        * <ng-template>
-        *     <ng-content></ng-content>
-        * </ng-template>
-        */
-       const Comp = createComponent(
-           'comp',
-           (rf: RenderFlags, ctx: any) => {
-             if (rf & RenderFlags.Create) {
-               ɵɵprojectionDef();
-               ɵɵtemplate(1, NgTemplate, 1, 0, 'ng-template', null, null, ɵɵtemplateRefExtractor);
-             }
-           },
-           2, 0, [], [],
-           function(rf: RenderFlags, ctx: any) {
-             /**  @ViewChild(TemplateRef) template: TemplateRef<any>  */
-             if (rf & RenderFlags.Create) {
-               ɵɵviewQuery(TemplateRef as any, true, null);
-             }
-             if (rf & RenderFlags.Update) {
-               let tmp: any;
-               ɵɵqueryRefresh(tmp = ɵɵloadViewQuery<QueryList<any>>()) &&
-                   (ctx.template = tmp.first);
-             }
-           });
-
-       class Trigger {
-         // @Input()
-         trigger: any;
-
-         constructor(public vcr: ViewContainerRef) {}
-
-         open() { this.vcr.createEmbeddedView(this.trigger.template); }
-
-         static ngComponentDef = ɵɵdefineDirective({
-           type: Trigger,
-           selectors: [['', 'trigger', '']],
-           factory: () => triggerDir = new Trigger(ɵɵdirectiveInject(ViewContainerRef as any)),
-           inputs: {trigger: 'trigger'}
-         });
-       }
-
-       /**
-        * <button [trigger]="comp"></button>
-        * <comp #comp>
-        *    Some content
-        * </comp>
-        */
-       const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
-         if (rf & RenderFlags.Create) {
-           ɵɵelement(0, 'button', [AttributeMarker.Bindings, 'trigger']);
-           ɵɵelementStart(1, 'comp', null, ['comp', '']);
-           { ɵɵtext(3, 'Some content'); }
-           ɵɵelementEnd();
-         }
-         if (rf & RenderFlags.Update) {
-           const comp = ɵɵreference(2);
-           ɵɵelementProperty(0, 'trigger', ɵɵbind(comp));
-         }
-       }, 4, 1, [Comp, Trigger]);
-
-       const fixture = new ComponentFixture(App);
-       expect(fixture.html).toEqual(`<button></button><comp></comp>`);
-
-       triggerDir.open();
-       expect(fixture.html).toEqual(`<button></button>Some content<comp></comp>`);
-     });
-
   it('should project nodes into the last ng-content', () => {
     /**
      * <div><ng-content></ng-content></div>
@@ -1172,52 +681,6 @@ describe('content projection', () => {
     expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
   });
 
-  // https://stackblitz.com/edit/angular-ceqmnw?file=src%2Fapp%2Fapp.component.ts
-  it('should project nodes into the last ng-content unrolled by ngFor', () => {
-    const items = [1, 2];
-
-    /**
-     <div *ngFor="let item of [1, 2]; let index = index">
-      ({{index}}): <ng-content></ng-content>
-     </div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        { ɵɵtemplate(0, ForTemplate, 3, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']); }
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵelementProperty(0, 'ngForOf', ɵɵbind(items));
-      }
-    }, 1, 1, [NgForOf]);
-
-    function ForTemplate(rf1: RenderFlags, ctx: {index: number}) {
-      if (rf1 & RenderFlags.Create) {
-        ɵɵelementStart(0, 'div');
-        ɵɵtext(1);
-        ɵɵprojection(2);
-        ɵɵelementEnd();
-      }
-      if (rf1 & RenderFlags.Update) {
-        ɵɵtextBinding(1, ɵɵinterpolation1('(', ctx.index, '):'));
-      }
-    }
-
-    /**
-     * <child>content</child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        { ɵɵtext(1, 'content'); }
-        ɵɵelementEnd();
-      }
-    }, 2, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><div>(0):</div><div>(1):content</div></child>');
-  });
-
   it('should project with multiple instances of a component with projection', () => {
     const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
       if (rf & RenderFlags.Create) {
@@ -1441,88 +904,6 @@ describe('content projection', () => {
     expect(toHtml(parent)).toEqual('<child><grand-child>content</grand-child></child>');
   });
 
-  it('should handle projected containers inside other containers', () => {
-    // <div>Child content</div>
-    const NestedComp = createComponent('nested-comp', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'div');
-        ɵɵtext(1, 'Child content');
-        ɵɵelementEnd();
-      }
-    }, 2, 0, []);
-
-    // <ng-content></ng-content>
-    const RootComp = createComponent('root-comp', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-      }
-    }, 1, 0, []);
-
-    // <root-comp>
-    //   <ng-container *ngFor="let item of items; last as last">
-    //     <nested-comp *ngIf="!last"></nested-comp>
-    //   </ng-container>
-    // </root-comp>
-    function MyApp_ng_container_1_child_comp_1_Template(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelement(0, 'nested-comp');
-      }
-    }
-    function MyApp_ng_container_1_Template(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementContainerStart(0);
-        ɵɵtemplate(
-            1, MyApp_ng_container_1_child_comp_1_Template, 1, 0, 'nested-comp',
-            [AttributeMarker.Template, 'ngIf']);
-        ɵɵelementContainerEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        const last_r2 = ctx.last;
-        ɵɵelementProperty(1, 'ngIf', ɵɵbind(!last_r2));
-      }
-    }
-    let myAppInstance: MyApp;
-    class MyApp {
-      items = [1, 2];
-
-      static ngComponentDef = ɵɵdefineComponent({
-        type: MyApp,
-        selectors: [['', 'my-app', '']],
-        factory: () => myAppInstance = new MyApp(),
-        consts: 2,
-        vars: 1,
-        template: function MyApp_Template(rf: RenderFlags, ctx: any) {
-          if (rf & RenderFlags.Create) {
-            ɵɵelementStart(0, 'root-comp');
-            ɵɵtemplate(
-                1, MyApp_ng_container_1_Template, 2, 1, 'ng-container',
-                [AttributeMarker.Template, 'ngFor', 'ngForOf']);
-            ɵɵelementEnd();
-          }
-          if (rf & RenderFlags.Update) {
-            ɵɵelementProperty(1, 'ngForOf', ɵɵbind(ctx.items));
-          }
-        },
-        directives: [NgForOf, NgIf, NestedComp, RootComp]
-      });
-    }
-    const fixture = new ComponentFixture(MyApp);
-    fixture.update();
-
-    // expecting # of divs to be (items.length - 1), since last element is filtered out by *ngIf,
-    // this applies to all other assertions below
-    expect(fixture.hostElement.querySelectorAll('div').length).toBe(1);
-
-    myAppInstance !.items = [3, 4, 5];
-    fixture.update();
-    expect(fixture.hostElement.querySelectorAll('div').length).toBe(2);
-
-    myAppInstance !.items = [6, 7, 8, 9];
-    fixture.update();
-    expect(fixture.hostElement.querySelectorAll('div').length).toBe(3);
-  });
-
   describe('with selectors', () => {
 
     it('should project nodes using attribute selectors', () => {
@@ -1569,43 +950,6 @@ describe('content projection', () => {
               '<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>');
     });
 
-    // https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
-    it('should project nodes where attribute selector matches a binding', () => {
-      /**
-       *  <ng-content select="[title]"></ng-content>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef([[['', 'title', '']]]);
-          { ɵɵprojection(0, 1); }
-        }
-      }, 1);
-
-      /**
-       * <child>
-       *  <span [title]="'Some title'">Has title</span>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span', [AttributeMarker.Bindings, 'title']);
-            { ɵɵtext(2, 'Has title'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-        if (rf & RenderFlags.Update) {
-          ɵɵelementProperty(1, 'title', ɵɵbind('Some title'));
-        }
-      }, 3, 1, [Child]);
-
-      const fixture = new ComponentFixture(Parent);
-      expect(fixture.html).toEqual('<child><span title="Some title">Has title</span></child>');
-
-    });
-
     it('should project nodes using class selectors', () => {
       /**
        *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
@@ -1991,54 +1335,6 @@ describe('content projection', () => {
       const parent = renderComponent(Parent);
       expect(toHtml(parent)).toEqual('<child><div>should project</div></child>');
     });
-
-    it('should match selectors against projected containers', () => {
-
-      /**
-       * <span>
-       *  <ng-content select="div"></ng-content>
-       * </span>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef([[['div']]]);
-          ɵɵelementStart(0, 'span');
-          { ɵɵprojection(1, 1); }
-          ɵɵelementEnd();
-        }
-      }, 2);
-
-      function IfTemplate(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'div');
-          { ɵɵtext(1, 'content'); }
-          ɵɵelementEnd();
-        }
-      }
-
-      /**
-       * <child>
-       *    <div *ngIf="value">content</div>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          { ɵɵtemplate(1, IfTemplate, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']); }
-          ɵɵelementEnd();
-        }
-        if (rf & RenderFlags.Update) {
-          ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.value));
-        }
-      }, 2, 1, [Child, NgIf]);
-
-
-      const fixture = new ComponentFixture(Parent);
-      fixture.component.value = true;
-      fixture.update();
-      expect(fixture.html).toEqual('<child><span><div>content</div></span></child>');
-    });
-
   });
 
 });