From f00bb85b58315e8970345f9b46ab312d457cc6d1 Mon Sep 17 00:00:00 2001
From: cexbrayat <cedric@ninja-squad.com>
Date: Fri, 16 Aug 2019 15:46:06 +0200
Subject: [PATCH] refactor(ivy): migrate content spec from render3 (#32474)

Migrate the remaining `render3/content_spec.ts` to `acceptance` (some JS block ones were already migrated with `ngIf`).

PR Close #32474
---
 packages/core/test/acceptance/content_spec.ts |  397 +++++
 packages/core/test/render3/content_spec.ts    | 1345 -----------------
 2 files changed, 397 insertions(+), 1345 deletions(-)
 delete mode 100644 packages/core/test/render3/content_spec.ts

diff --git a/packages/core/test/acceptance/content_spec.ts b/packages/core/test/acceptance/content_spec.ts
index d0915c9538..24ca05122f 100644
--- a/packages/core/test/acceptance/content_spec.ts
+++ b/packages/core/test/acceptance/content_spec.ts
@@ -155,6 +155,84 @@ describe('projection', () => {
             `<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>`);
   });
 
+  it('should project with multiple instances of a component with projection', () => {
+    @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
+    class Child {
+    }
+
+    @Component({selector: 'projected-comp', template: `Before<ng-content></ng-content>After`})
+    class ProjectedComp {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `
+        <child>
+          <projected-comp><div>A</div><p>123</p></projected-comp>
+          <projected-comp><div>B</div><p>456</p></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>Before<div>A</div><p>123</p>After</projected-comp>' +
+            '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
+            '</div></child>');
+  });
+
+  it('should re-project with multiple instances of a component with projection', () => {
+    @Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
+    class Child {
+    }
+
+    @Component({selector: 'projected-comp', template: `Before<ng-content></ng-content>After`})
+    class ProjectedComp {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `
+        <child>
+          <projected-comp><div>A</div><ng-content></ng-content><p>123</p></projected-comp>
+          <projected-comp><div>B</div><p>456</p></projected-comp>
+        </child>`,
+    })
+    class Parent {
+    }
+
+    @Component({
+      selector: 'app',
+      template: `
+        <parent>**ABC**</parent>
+        <parent>**DEF**</parent>
+     `,
+    })
+    class App {
+    }
+
+    TestBed.configureTestingModule({declarations: [App, Parent, Child, ProjectedComp]});
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML)
+        .toBe(
+            '<parent><child><div>' +
+            '<projected-comp>Before<div>A</div>**ABC**<p>123</p>After</projected-comp>' +
+            '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
+            '</div></child></parent>' +
+            '<parent><child><div>' +
+            '<projected-comp>Before<div>A</div>**DEF**<p>123</p>After</projected-comp>' +
+            '<projected-comp>Before<div>B</div><p>456</p>After</projected-comp>' +
+            '</div></child></parent>');
+  });
+
   it('should project into dynamic views (with createEmbeddedView)', () => {
     @Component({
       selector: 'child',
@@ -280,6 +358,27 @@ describe('projection', () => {
            .toBe(`<button></button>Some content<comp></comp>`);
      });
 
+  it('should project nodes into the last ng-content', () => {
+    @Component({
+      selector: 'child',
+      template: `<div><ng-content></ng-content></div>
+          <span><ng-content></ng-content></span>`
+    })
+    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></div><span>content</span></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', () => {
     @Component({
@@ -408,6 +507,64 @@ describe('projection', () => {
     expect(fixture.nativeElement.querySelectorAll('div').length).toBe(0);
   });
 
+  it('should project ng-container at the content root', () => {
+    @Component({selector: 'child', template: `<ng-content></ng-content>`})
+    class Child {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `<child>
+      <ng-container>
+        <ng-container>content</ng-container>
+      </ng-container>
+    </child>
+      `
+    })
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child]});
+    const fixture = TestBed.createComponent(Parent);
+
+    fixture.detectChanges();
+    expect(getElementHtml(fixture.nativeElement)).toBe('<child>content</child>');
+  });
+
+  it('should re-project ng-container at the content root', () => {
+    @Component({selector: 'grand-child', template: `<ng-content></ng-content>`})
+    class GrandChild {
+    }
+
+    @Component({
+      selector: 'child',
+      template: `<grand-child>
+      <ng-content></ng-content>
+    </grand-child>`
+    })
+    class Child {
+    }
+
+    @Component({
+      selector: 'parent',
+      template: `<child>
+      <ng-container>
+        <ng-container>content</ng-container>
+      </ng-container>
+    </child>
+      `
+    })
+    class Parent {
+    }
+
+    TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
+    const fixture = TestBed.createComponent(Parent);
+
+    fixture.detectChanges();
+    expect(getElementHtml(fixture.nativeElement))
+        .toBe('<child><grand-child>content</grand-child></child>');
+  });
+
   it('should handle re-projection at the root of an embedded view', () => {
     @Component({
       selector: 'child-comp',
@@ -442,6 +599,246 @@ describe('projection', () => {
   });
 
   describe('with selectors', () => {
+    it('should project nodes using attribute selectors', () => {
+      @Component({
+        selector: 'child',
+        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>`,
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `<child><span title="toFirst">1</span><span title="toSecond">2</span></child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>');
+    });
+
+    it('should project nodes using class selectors', () => {
+      @Component({
+        selector: 'child',
+        template: `<div id="first"><ng-content select="span.toFirst"></ng-content></div>
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`,
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `<child><span class="toFirst">1</span><span class="toSecond">2</span></child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span class="toSecond">2</span></div></child>');
+    });
+
+    it('should project nodes using class selectors when element has multiple classes', () => {
+      @Component({
+        selector: 'child',
+        template: `<div id="first"><ng-content select="span.toFirst"></ng-content></div>
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template:
+            `<child><span class="other toFirst">1</span><span class="noise toSecond">2</span></child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><div id="first"><span class="other toFirst">1</span></div><div id="second"><span class="noise toSecond">2</span></div></child>');
+    });
+
+    it('should project nodes into the first matching selector', () => {
+      @Component({
+        selector: 'child',
+        template: `<div id="first"><ng-content select="span"></ng-content></div>
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `<child><span class="toFirst">1</span><span class="toSecond">2</span></child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><div id="first"><span class="toFirst">1</span><span class="toSecond">2</span></div><div id="second"></div></child>');
+    });
+
+    it('should allow mixing ng-content with and without selectors', () => {
+      @Component({
+        selector: 'child',
+        template: `<div id="first"><ng-content select="span.toFirst"></ng-content></div>
+          <div id="second"><ng-content></ng-content></div>`
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template:
+            `<child><span class="toFirst">1</span><span>remaining</span>more remaining</child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span>remaining</span>more remaining</div></child>');
+    });
+
+    it('should allow mixing ng-content with and without selectors - ng-content first', () => {
+      @Component({
+        selector: 'child',
+        template: `<div id="first"><ng-content></ng-content></div>
+          <div id="second"><ng-content select="span.toSecond"></ng-content></div>`
+      })
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template: `<child><span>1</span><span class="toSecond">2</span>remaining</child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><div id="first"><span>1</span>remaining</div><div id="second"><span class="toSecond">2</span></div></child>');
+    });
+
+    /**
+     * Descending into projected content for selector-matching purposes is not supported
+     * today: http://plnkr.co/edit/MYQcNfHSTKp9KvbzJWVQ?p=preview
+     */
+    it('should not descend into re-projected content', () => {
+      @Component({
+        selector: 'grand-child',
+        template: `<ng-content select="span"></ng-content><hr><ng-content></ng-content>`
+      })
+      class GrandChild {
+      }
+
+      @Component({
+        selector: 'child',
+        template: `<grand-child>
+            <ng-content></ng-content>
+            <span>in child template</span>
+          </grand-child>`
+      })
+      class Child {
+      }
+
+      @Component({selector: 'parent', template: `<child><span>parent content</span></child>`})
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [GrandChild, Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<child><grand-child><span>in child template</span><hr><span>parent content</span></grand-child></child>');
+    });
+
+    it('should not descend into re-projected content', () => {
+      @Component({
+        selector: 'card',
+        template:
+            `<ng-content select="[card-title]"></ng-content><hr><ng-content select="[card-content]"></ng-content>`
+      })
+      class Card {
+      }
+
+      @Component({
+        selector: 'card-with-title',
+        template: `<card>
+         <h1 card-title>Title</h1>
+         <ng-content card-content></ng-content>
+       </card>`
+      })
+      class CardWithTitle {
+      }
+
+      @Component({selector: 'parent', template: `<card-with-title>content</card-with-title>`})
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Card, CardWithTitle, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual(
+              '<card-with-title><card><h1 card-title="">Title</h1><hr>content</card></card-with-title>');
+    });
+
+    it('should not match selectors against node having ngProjectAs attribute', () => {
+      @Component({selector: 'child', template: `<ng-content select="div"></ng-content>`})
+      class Child {
+      }
+
+      @Component({
+        selector: 'parent',
+        template:
+            `<child><div ngProjectAs="span">should not project</div><div>should project</div></child>`
+      })
+      class Parent {
+      }
+
+      TestBed.configureTestingModule({declarations: [Child, Parent]});
+      const fixture = TestBed.createComponent(Parent);
+      fixture.detectChanges();
+
+      expect(getElementHtml(fixture.nativeElement))
+          .toEqual('<child><div>should project</div></child>');
+    });
+
     // https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
     it('should project nodes where attribute selector matches a binding', () => {
       @Component({
diff --git a/packages/core/test/render3/content_spec.ts b/packages/core/test/render3/content_spec.ts
deleted file mode 100644
index c70a83e6f0..0000000000
--- a/packages/core/test/render3/content_spec.ts
+++ /dev/null
@@ -1,1345 +0,0 @@
-/**
- * @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 {SelectorFlags} from '@angular/core/src/render3/interfaces/projection';
-
-import {AttributeMarker, detectChanges} from '../../src/render3/index';
-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 {ComponentFixture, createComponent, getDirectiveOnNode, renderComponent, toHtml} from './render_util';
-
-describe('content projection', () => {
-  it('should project containers', () => {
-    /** <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>
-     *     (
-     *      % if (value) {
-     *        content
-     *      % }
-     *     )
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵtext(1, '(');
-          ɵɵcontainer(2);
-          ɵɵtext(3, ')');
-        }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(2);
-        {
-          if (ctx.value) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵtext(0, 'content');
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 4, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
-    parent.value = true;
-    detectChanges(parent);
-
-    expect(toHtml(parent)).toEqual('<child><div>(content)</div></child>');
-    parent.value = false;
-    detectChanges(parent);
-
-    expect(toHtml(parent)).toEqual('<child><div>()</div></child>');
-  });
-
-  it('should project containers into root', () => {
-    /** <ng-content></ng-content> */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-      }
-    }, 1);
-
-    /**
-     * <child>
-     *    % if (value) {
-     *      content
-     *    % }
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        { ɵɵcontainer(1); }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(1);
-        {
-          if (ctx.value) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵtext(0, 'content');
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 2, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child></child>');
-
-    parent.value = true;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child>content</child>');
-
-    parent.value = false;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child></child>');
-  });
-
-  it('should project containers with if-else.', () => {
-    /** <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>
-     *     (
-     *       % if (value) {
-     *         content
-     *       % } else {
-     *         else
-     *       % }
-     *     )
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵtext(1, '(');
-          ɵɵcontainer(2);
-          ɵɵtext(3, ')');
-        }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(2);
-        {
-          if (ctx.value) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵtext(0, 'content');
-            }
-            ɵɵembeddedViewEnd();
-          } else {
-            if (ɵɵembeddedViewStart(1, 1, 0)) {
-              ɵɵtext(0, 'else');
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 4, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>');
-    parent.value = true;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child><div>(content)</div></child>');
-    parent.value = false;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child><div>(else)</div></child>');
-  });
-
-  it('should support projection into embedded views', () => {
-    let childCmptInstance: any;
-
-    /**
-     * <div>
-     *  % if (!skipContent) {
-     *    <span>
-     *      <ng-content></ng-content>
-     *    </span>
-     *  % }
-     * </div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵcontainer(1); }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(1);
-        {
-          if (!ctx.skipContent) {
-            let rf0 = ɵɵembeddedViewStart(0, 2, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵelementStart(0, 'span');
-              ɵɵprojection(1);
-              ɵɵelementEnd();
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 2, 0);
-
-    /**
-     * <child>
-     *   <div>text</div>
-     *   content
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementStart(1, 'div');
-          { ɵɵtext(2, 'text'); }
-          ɵɵelementEnd();
-          ɵɵtext(3, 'content');
-        }
-        ɵɵelementEnd();
-
-        // testing
-        childCmptInstance = getDirectiveOnNode(0);
-      }
-    }, 4, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><div><span><div>text</div>content</span></div></child>');
-
-    childCmptInstance.skipContent = true;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child><div></div></child>');
-  });
-
-  it('should support projection into embedded views when no projected nodes', () => {
-    let childCmptInstance: any;
-
-    /**
-     * <div>
-     *  % if (!skipContent) {
-     *      <ng-content></ng-content>
-     *      text
-     *  % }
-     * </div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵcontainer(1); }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(1);
-        {
-          if (!ctx.skipContent) {
-            let rf0 = ɵɵembeddedViewStart(0, 2, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵprojection(0);
-              ɵɵtext(1, 'text');
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 2);
-
-    /** <child></child> */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelement(0, 'child');
-
-        // testing
-        childCmptInstance = getDirectiveOnNode(0);
-      }
-    }, 1, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><div>text</div></child>');
-
-    childCmptInstance.skipContent = true;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child><div></div></child>');
-  });
-
-  it('should support projection into embedded views when ng-content is a root node of an embedded view',
-     () => {
-       let childCmptInstance: any;
-
-       /**
-        * <div>
-        *  % if (!skipContent) {
-         *    <ng-content></ng-content>
-         *  % }
-        * </div>
-        */
-       const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-         if (rf & RenderFlags.Create) {
-           ɵɵprojectionDef();
-           ɵɵelementStart(0, 'div');
-           { ɵɵcontainer(1); }
-           ɵɵelementEnd();
-         }
-         if (rf & RenderFlags.Update) {
-           ɵɵcontainerRefreshStart(1);
-           {
-             if (!ctx.skipContent) {
-               let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-               if (rf0 & RenderFlags.Create) {
-                 ɵɵprojection(0);
-               }
-               ɵɵembeddedViewEnd();
-             }
-           }
-           ɵɵcontainerRefreshEnd();
-         }
-       }, 2);
-
-       /**
-        * <child>content</child>
-        */
-       const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-         if (rf & RenderFlags.Create) {
-           ɵɵelementStart(0, 'child');
-           {
-             childCmptInstance = getDirectiveOnNode(0);
-             ɵɵtext(1, 'content');
-           }
-           ɵɵelementEnd();
-         }
-       }, 2, 0, [Child]);
-
-       const parent = renderComponent(Parent);
-       expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
-
-       childCmptInstance.skipContent = true;
-       detectChanges(parent);
-       expect(toHtml(parent)).toEqual('<child><div></div></child>');
-     });
-
-  it('should project containers into containers', () => {
-    /**
-     * <div>
-     *  Before (inside)
-     *  % if (!skipContent) {
-     *    <ng-content></ng-content>
-     *  % }
-     *  After (inside)
-     * </div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        {
-          ɵɵtext(1, 'Before (inside)-');
-          ɵɵcontainer(2);
-          ɵɵtext(3, '-After (inside)');
-        }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(2);
-        {
-          if (!ctx.skipContent) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵprojection(0);
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 4);
-
-    /**
-     * <child>
-     *     Before text-
-     *     % if (!skipContent) {
-     *       content
-     *     % }
-     *     -After text
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵtext(1, 'Before text-');
-          ɵɵcontainer(2);
-          ɵɵtext(3, '-After text');
-        }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(2);
-        {
-          if (!ctx.skipContent) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵtext(0, 'content');
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 4, 0, [Child]);
-
-    const fixture = new ComponentFixture(Parent);
-    expect(fixture.html)
-        .toEqual(
-            '<child><div>Before (inside)-Before text-content-After text-After (inside)</div></child>');
-
-    fixture.component.skipContent = true;
-    fixture.update();
-    expect(fixture.html)
-        .toEqual(
-            '<child><div>Before (inside)-Before text--After text-After (inside)</div></child>');
-  });
-
-  it('should re-project containers into containers', () => {
-    /**
-     * <div>
-     *  % if (!skipContent) {
-     *    <ng-content></ng-content>
-     *  % }
-     * </div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵcontainer(1); }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(1);
-        {
-          if (!ctx.skipContent) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵprojection(0);
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 2);
-
-    /**
-     * <child>
-     *     Before text
-     *     % if (!skipContent) {
-     *       <ng-content></ng-content>
-     *     % }
-     *     -After text
-     * </child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵtext(1, 'Before text');
-          ɵɵcontainer(2);
-          ɵɵtext(3, '-After text');
-        }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(2);
-        {
-          if (!ctx.skipContent) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵprojection(0);
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 4, 0, [Child]);
-
-    let parent: any;
-    /** <parent><p>text</p></parent> */
-    const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'parent');
-        {
-          ɵɵelementStart(1, 'p');
-          { ɵɵtext(2, 'text'); }
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-        // testing
-        parent = getDirectiveOnNode(0);
-      }
-    }, 3, 0, [Parent]);
-
-    const fixture = new ComponentFixture(App);
-    expect(fixture.html)
-        .toEqual('<parent><child><div>Before text<p>text</p>-After text</div></child></parent>');
-
-    parent.skipContent = true;
-    fixture.update();
-    expect(fixture.html)
-        .toEqual('<parent><child><div>Before text-After text</div></child></parent>');
-  });
-
-  it('should support projection into embedded views when ng-content is a root node of an embedded view, with other nodes after',
-     () => {
-       let childCmptInstance: any;
-
-       /**
-        * <div>
-        *  % if (!skipContent) {
-         *    before-<ng-content></ng-content>-after
-         *  % }
-        * </div>
-        */
-       const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-         if (rf & RenderFlags.Create) {
-           ɵɵprojectionDef();
-           ɵɵelementStart(0, 'div');
-           { ɵɵcontainer(1); }
-           ɵɵelementEnd();
-         }
-         if (rf & RenderFlags.Update) {
-           ɵɵcontainerRefreshStart(1);
-           {
-             if (!ctx.skipContent) {
-               let rf0 = ɵɵembeddedViewStart(0, 3, 0);
-               if (rf0 & RenderFlags.Create) {
-                 ɵɵtext(0, 'before-');
-                 ɵɵprojection(1);
-                 ɵɵtext(2, '-after');
-               }
-               ɵɵembeddedViewEnd();
-             }
-           }
-           ɵɵcontainerRefreshEnd();
-         }
-       }, 2);
-
-       /**
-        * <child>content</child>
-        */
-       const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-         if (rf & RenderFlags.Create) {
-           ɵɵelementStart(0, 'child');
-           {
-             childCmptInstance = getDirectiveOnNode(0);
-             ɵɵtext(1, 'content');
-           }
-           ɵɵelementEnd();
-         }
-       }, 2, 0, [Child]);
-
-       const parent = renderComponent(Parent);
-       expect(toHtml(parent)).toEqual('<child><div>before-content-after</div></child>');
-
-       childCmptInstance.skipContent = true;
-       detectChanges(parent);
-       expect(toHtml(parent)).toEqual('<child><div></div></child>');
-     });
-
-  it('should project nodes into the last ng-content', () => {
-    /**
-     * <div><ng-content></ng-content></div>
-     * <span><ng-content></ng-content></span>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'div');
-        { ɵɵprojection(1); }
-        ɵɵelementEnd();
-        ɵɵelementStart(2, 'span');
-        { ɵɵprojection(3); }
-        ɵɵelementEnd();
-      }
-    }, 4);
-
-    /**
-     * <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></div><span>content</span></child>');
-  });
-
-  /**
-   * Warning: this test is _not_ in-line with what Angular does atm.
-   * Moreover the current implementation logic will result in DOM nodes
-   * being re-assigned from one parent to another. Proposal: have compiler
-   * to remove all but the latest occurrence of <ng-content> so we generate
-   * only one P(n, m, 0) instruction. It would make it consistent with the
-   * current Angular behavior:
-   * http://plnkr.co/edit/OAYkNawTDPkYBFTqovTP?p=preview
-   */
-  it('should project nodes into the last available ng-content', () => {
-    let childCmptInstance: any;
-    /**
-     *  <ng-content></ng-content>
-     *  <div>
-     *  % if (show) {
-     *    <ng-content></ng-content>
-     *  % }
-     *  </div>
-     */
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-        ɵɵelementStart(1, 'div');
-        { ɵɵcontainer(2); }
-        ɵɵelementEnd();
-      }
-      if (rf & RenderFlags.Update) {
-        ɵɵcontainerRefreshStart(2);
-        {
-          if (ctx.show) {
-            let rf0 = ɵɵembeddedViewStart(0, 1, 0);
-            if (rf0 & RenderFlags.Create) {
-              ɵɵprojection(0);
-            }
-            ɵɵembeddedViewEnd();
-          }
-        }
-        ɵɵcontainerRefreshEnd();
-      }
-    }, 3);
-
-    /**
-     * <child>content</child>
-     */
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          childCmptInstance = getDirectiveOnNode(0);
-          ɵɵtext(1, 'content');
-        }
-        ɵɵelementEnd();
-      }
-    }, 2, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child>content<div></div></child>');
-
-    childCmptInstance.show = true;
-    detectChanges(parent);
-    expect(toHtml(parent)).toEqual('<child><div>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) {
-        ɵɵprojectionDef();
-        ɵɵtext(0, 'Before');
-        ɵɵprojection(1);
-        ɵɵtext(2, 'After');
-      }
-    }, 3);
-
-    /**
-     * <projection-comp>
-     *     <div>A</div>
-     *     <p>123</p>
-     * </projection-comp>
-     * <projection-comp>
-     *     <div>B</div>
-     *     <p>456</p>
-     * </projection-comp>
-     */
-    const AppComp = createComponent('app-comp', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'projection-comp');
-        {
-          ɵɵelementStart(1, 'div');
-          { ɵɵtext(2, 'A'); }
-          ɵɵelementEnd();
-          ɵɵelementStart(3, 'p');
-          { ɵɵtext(4, '123'); }
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-        ɵɵelementStart(5, 'projection-comp');
-        {
-          ɵɵelementStart(6, 'div');
-          { ɵɵtext(7, 'B'); }
-          ɵɵelementEnd();
-          ɵɵelementStart(8, 'p');
-          { ɵɵtext(9, '456'); }
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-      }
-    }, 10, 0, [ProjectionComp]);
-
-    const fixture = new ComponentFixture(AppComp);
-    fixture.update();
-    expect(fixture.html)
-        .toEqual(
-            '<projection-comp>Before<div>A</div><p>123</p>After</projection-comp>' +
-            '<projection-comp>Before<div>B</div><p>456</p>After</projection-comp>');
-  });
-
-  it('should re-project with multiple instances of a component with projection', () => {
-    /**
-     * Before
-     * <ng-content></ng-content>
-     * After
-     */
-    const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵtext(0, 'Before');
-        ɵɵprojection(1);
-        ɵɵtext(2, 'After');
-      }
-    }, 3);
-
-    /**
-     * <projection-comp>
-     *     <div>A</div>
-     *     <ng-content></ng-content>
-     *     <p>123</p>
-     * </projection-comp>
-     * <projection-comp>
-     *     <div>B</div>
-     *     <p>456</p>
-     * </projection-comp>
-     */
-    const ProjectionParent = createComponent('parent-comp', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵelementStart(0, 'projection-comp');
-        {
-          ɵɵelementStart(1, 'div');
-          { ɵɵtext(2, 'A'); }
-          ɵɵelementEnd();
-          ɵɵprojection(3, 0);
-          ɵɵelementStart(4, 'p');
-          { ɵɵtext(5, '123'); }
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-        ɵɵelementStart(6, 'projection-comp');
-        {
-          ɵɵelementStart(7, 'div');
-          { ɵɵtext(8, 'B'); }
-          ɵɵelementEnd();
-          ɵɵelementStart(9, 'p');
-          { ɵɵtext(10, '456'); }
-          ɵɵelementEnd();
-        }
-        ɵɵelementEnd();
-      }
-    }, 11, 0, [ProjectionComp]);
-
-    /**
-     * <parent-comp>
-     *    **ABC**
-     * </parent-comp>
-     * <parent-comp>
-     *    **DEF**
-     * </parent-comp>
-     */
-    const AppComp = createComponent('app-comp', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'parent-comp');
-        { ɵɵtext(1, '**ABC**'); }
-        ɵɵelementEnd();
-        ɵɵelementStart(2, 'parent-comp');
-        { ɵɵtext(3, '**DEF**'); }
-        ɵɵelementEnd();
-      }
-    }, 4, 0, [ProjectionParent]);
-
-    const fixture = new ComponentFixture(AppComp);
-    fixture.update();
-    expect(fixture.html)
-        .toEqual(
-            '<parent-comp>' +
-            '<projection-comp>Before<div>A</div>**ABC**<p>123</p>After</projection-comp>' +
-            '<projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>' +
-            '<parent-comp>' +
-            '<projection-comp>Before<div>A</div>**DEF**<p>123</p>After</projection-comp>' +
-            '<projection-comp>Before<div>B</div><p>456</p>After</projection-comp></parent-comp>');
-  });
-
-  it('should project ng-container at the content root', () => {
-
-    `<ng-content></ng-content>`;
-    const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-      }
-    }, 1);
-
-    `<child>
-      <ng-container>
-        <ng-container>
-          content
-        </ng-container>
-      </ng-container>
-    </child>`;
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementContainerStart(1);
-          {
-            ɵɵelementContainerStart(2);
-            { ɵɵtext(3, 'content'); }
-            ɵɵelementContainerEnd();
-          }
-          ɵɵelementContainerEnd();
-        }
-        ɵɵelementEnd();
-      }
-    }, 4, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child>content</child>');
-  });
-
-  it('should re-project ng-container at the content root', () => {
-
-    `<ng-content></ng-content>`;
-    const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵprojectionDef();
-        ɵɵprojection(0);
-      }
-    }, 1);
-
-    `<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>
-      <ng-container>
-        <ng-container>
-          content
-        </ng-container>
-      </ng-container>
-    </child>`;
-    const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-      if (rf & RenderFlags.Create) {
-        ɵɵelementStart(0, 'child');
-        {
-          ɵɵelementContainerStart(1);
-          {
-            ɵɵelementContainerStart(2);
-            { ɵɵtext(3, 'content'); }
-            ɵɵelementContainerEnd();
-          }
-          ɵɵelementContainerEnd();
-        }
-        ɵɵelementEnd();
-      }
-    }, 4, 0, [Child]);
-
-    const parent = renderComponent(Parent);
-    expect(toHtml(parent)).toEqual('<child><grand-child>content</grand-child></child>');
-  });
-
-  describe('with selectors', () => {
-
-    it('should project nodes using attribute selectors', () => {
-      /**
-       *  <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
-       *  <div id="second"><ng-content select="span[title=toSecond]"></ng-content></div>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          // selectors are in lowercase once compiled
-          ɵɵprojectionDef(['*', [['span', 'title', 'tofirst']], [['span', 'title', 'tosecond']]]);
-          ɵɵelementStart(0, 'div', ['id', 'first']);
-          { ɵɵprojection(1, 1); }
-          ɵɵelementEnd();
-          ɵɵelementStart(2, 'div', ['id', 'second']);
-          { ɵɵprojection(3, 2); }
-          ɵɵelementEnd();
-        }
-      }, 4);
-
-      /**
-       * <child>
-       *  <span title="toFirst">1</span>
-       *  <span title="toSecond">2</span>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span', ['title', 'toFirst']);
-            { ɵɵtext(2, '1'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'span', ['title', 'toSecond']);
-            { ɵɵtext(4, '2'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 5, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>');
-    });
-
-    it('should project nodes using class selectors', () => {
-      /**
-       *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
-       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          // selectors are in lowercase once compiled
-          ɵɵprojectionDef([
-            '*', [['span', SelectorFlags.CLASS, 'tofirst']],
-            [['span', SelectorFlags.CLASS, 'tosecond']]
-          ]);
-          ɵɵelementStart(0, 'div', ['id', 'first']);
-          { ɵɵprojection(1, 1); }
-          ɵɵelementEnd();
-          ɵɵelementStart(2, 'div', ['id', 'second']);
-          { ɵɵprojection(3, 2); }
-          ɵɵelementEnd();
-        }
-      }, 4);
-
-      /**
-       * <child>
-       *  <span class="toFirst">1</span>
-       *  <span class="toSecond">2</span>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span', ['class', 'toFirst']);
-            { ɵɵtext(2, '1'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'span', ['class', 'toSecond']);
-            { ɵɵtext(4, '2'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 5, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span class="toSecond">2</span></div></child>');
-    });
-
-    it('should project nodes using class selectors when element has multiple classes', () => {
-      /**
-       *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
-       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          // selectors are in lowercase once compiled
-          ɵɵprojectionDef([
-            '*', [['span', SelectorFlags.CLASS, 'tofirst']],
-            [['span', SelectorFlags.CLASS, 'tosecond']]
-          ]);
-          ɵɵelementStart(0, 'div', ['id', 'first']);
-          { ɵɵprojection(1, 1); }
-          ɵɵelementEnd();
-          ɵɵelementStart(2, 'div', ['id', 'second']);
-          { ɵɵprojection(3, 2); }
-          ɵɵelementEnd();
-        }
-      }, 4);
-
-      /**
-       * <child>
-       *  <span class="other toFirst">1</span>
-       *  <span class="toSecond noise">2</span>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span', ['class', 'other toFirst']);
-            { ɵɵtext(2, '1'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'span', ['class', 'toSecond noise']);
-            { ɵɵtext(4, '2'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 5, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><div id="first"><span class="other toFirst">1</span></div><div id="second"><span class="toSecond noise">2</span></div></child>');
-    });
-
-    it('should project nodes into the first matching selector', () => {
-      /**
-       *  <div id="first"><ng-content select="span"></ng-content></div>
-       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef(['*', [['span']], [['span', SelectorFlags.CLASS, 'toSecond']]]);
-          ɵɵelementStart(0, 'div', ['id', 'first']);
-          { ɵɵprojection(1, 1); }
-          ɵɵelementEnd();
-          ɵɵelementStart(2, 'div', ['id', 'second']);
-          { ɵɵprojection(3, 2); }
-          ɵɵelementEnd();
-        }
-      }, 4);
-
-      /**
-       * <child>
-       *  <span class="toFirst">1</span>
-       *  <span class="toSecond">2</span>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span', ['class', 'toFirst']);
-            { ɵɵtext(2, '1'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'span', ['class', 'toSecond']);
-            { ɵɵtext(4, '2'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 5, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><div id="first"><span class="toFirst">1</span><span class="toSecond">2</span></div><div id="second"></div></child>');
-    });
-
-    it('should allow mixing ng-content with and without selectors', () => {
-      /**
-       *  <div id="first"><ng-content select="span.toFirst"></ng-content></div>
-       *  <div id="second"><ng-content></ng-content></div>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          // selectors are in lowercase once compiled
-          ɵɵprojectionDef(['*', [['span', SelectorFlags.CLASS, 'tofirst']]]);
-          ɵɵelementStart(0, 'div', ['id', 'first']);
-          { ɵɵprojection(1, 1); }
-          ɵɵelementEnd();
-          ɵɵelementStart(2, 'div', ['id', 'second']);
-          { ɵɵprojection(3); }
-          ɵɵelementEnd();
-        }
-      }, 4);
-
-      /**
-       * <child>
-       *  <span class="other toFirst">1</span>
-       *  <span class="toSecond noise">2</span>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span', ['class', 'toFirst']);
-            { ɵɵtext(2, '1'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'span');
-            { ɵɵtext(4, 'remaining'); }
-            ɵɵelementEnd();
-            ɵɵtext(5, 'more remaining');
-          }
-          ɵɵelementEnd();
-        }
-      }, 6, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><div id="first"><span class="toFirst">1</span></div><div id="second"><span>remaining</span>more remaining</div></child>');
-    });
-
-    it('should allow mixing ng-content with and without selectors - ng-content first', () => {
-      /**
-       *  <div id="first"><ng-content></ng-content></div>
-       *  <div id="second"><ng-content select="span.toSecond"></ng-content></div>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          // selectors are in lowercase once compiled
-          ɵɵprojectionDef(['*', [['span', SelectorFlags.CLASS, 'tosecond']]]);
-          ɵɵelementStart(0, 'div', ['id', 'first']);
-          { ɵɵprojection(1); }
-          ɵɵelementEnd();
-          ɵɵelementStart(2, 'div', ['id', 'second']);
-          { ɵɵprojection(3, 1); }
-          ɵɵelementEnd();
-        }
-      }, 4);
-
-      /**
-       * <child>
-       *  <span>1</span>
-       *  <span class="toSecond">2</span>
-       *  remaining
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span');
-            { ɵɵtext(2, '1'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'span', ['class', 'toSecond']);
-            { ɵɵtext(4, '2'); }
-            ɵɵelementEnd();
-            ɵɵtext(5, 'remaining');
-          }
-          ɵɵelementEnd();
-        }
-      }, 6, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><div id="first"><span>1</span>remaining</div><div id="second"><span class="toSecond">2</span></div></child>');
-    });
-
-    /**
-     * Descending into projected content for selector-matching purposes is not supported
-     * today: http://plnkr.co/edit/MYQcNfHSTKp9KvbzJWVQ?p=preview
-     */
-    it('should not descend into re-projected content', () => {
-
-      /**
-       *  <ng-content select="span"></ng-content>
-       *  <hr>
-       *  <ng-content></ng-content>
-       */
-      const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef(['*', [['span']]]);
-          ɵɵprojection(0, 1);
-          ɵɵelement(1, 'hr');
-          ɵɵprojection(2);
-        }
-      }, 3);
-
-      /**
-       *  <grand-child>
-       *    <ng-content></ng-content>
-       *    <span>in child template</span>
-       *  </grand-child>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef();
-          ɵɵelementStart(0, 'grand-child');
-          {
-            ɵɵprojection(1);
-            ɵɵelementStart(2, 'span');
-            { ɵɵtext(3, 'in child template'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 4, 0, [GrandChild]);
-
-      /**
-       * <child>
-       *  <div>
-       *    parent content
-       *  </div>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'span');
-            { ɵɵtext(2, 'parent content'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 3, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent))
-          .toEqual(
-              '<child><grand-child><span>in child template</span><hr><span>parent content</span></grand-child></child>');
-    });
-
-    it('should match selectors on ng-content nodes with attributes', () => {
-
-      /**
-       * <ng-content select="[card-title]"></ng-content>
-       * <hr>
-       * <ng-content select="[card-content]"></ng-content>
-       */
-      const Card = createComponent('card', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef(['*', [['', 'card-title', '']], [['', 'card-content', '']]]);
-          ɵɵprojection(0, 1);
-          ɵɵelement(1, 'hr');
-          ɵɵprojection(2, 2);
-        }
-      }, 3);
-
-      /**
-       * <card>
-       *  <h1 card-title>Title</h1>
-       *  <ng-content card-content></ng-content>
-       * </card>
-       */
-      const CardWithTitle = createComponent('card-with-title', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef();
-          ɵɵelementStart(0, 'card');
-          {
-            ɵɵelementStart(1, 'h1', ['card-title', '']);
-            { ɵɵtext(2, 'Title'); }
-            ɵɵelementEnd();
-            ɵɵprojection(3, 0, ['card-content', '']);
-          }
-          ɵɵelementEnd();
-        }
-      }, 4, 0, [Card]);
-
-      /**
-       * <card-with-title>
-       *  content
-       * </card-with-title>
-       */
-      const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'card-with-title');
-          { ɵɵtext(1, 'content'); }
-          ɵɵelementEnd();
-        }
-      }, 2, 0, [CardWithTitle]);
-
-      const app = renderComponent(App);
-      expect(toHtml(app))
-          .toEqual(
-              '<card-with-title><card><h1 card-title="">Title</h1><hr>content</card></card-with-title>');
-    });
-
-    it('should not match selectors against node having ngProjectAs attribute', function() {
-
-      /**
-       *  <ng-content select="div"></ng-content>
-       */
-      const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵprojectionDef(['*', [['div']]]);
-          ɵɵprojection(0, 1);
-        }
-      }, 1);
-
-      /**
-       * <child>
-       *  <div ngProjectAs="span">should not project</div>
-       *  <div>should project</div>
-       * </child>
-       */
-      const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
-        if (rf & RenderFlags.Create) {
-          ɵɵelementStart(0, 'child');
-          {
-            ɵɵelementStart(1, 'div', [AttributeMarker.ProjectAs, ['span']]);
-            { ɵɵtext(2, 'should not project'); }
-            ɵɵelementEnd();
-            ɵɵelementStart(3, 'div');
-            { ɵɵtext(4, 'should project'); }
-            ɵɵelementEnd();
-          }
-          ɵɵelementEnd();
-        }
-      }, 5, 0, [Child]);
-
-      const parent = renderComponent(Parent);
-      expect(toHtml(parent)).toEqual('<child><div>should project</div></child>');
-    });
-  });
-
-});