feat(ShadowDomStrategy): implemented EmulatedUnscopedShadowDomStrategy

- The new strategy do not scope component styles but make them global,
- The former EmulatedShadowStrategy has been renamed to
EmulatedScopedShadowDomStrategy. It does scope the styles.

modules/angular2/test/core/compiler/shadow_dom/shadow_dom_emulation_integration_spec.js

@@ -13,7 +13,9 @@ import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {ShadowDomStrategy,
         NativeShadowDomStrategy,
-        EmulatedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
+        EmulatedScopedShadowDomStrategy,
+        EmulatedUnscopedShadowDomStrategy,
+} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
 import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
 import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';
@@ -35,7 +37,8 @@ export function main() {
 
     StringMapWrapper.forEach({
         "native" : new NativeShadowDomStrategy(styleUrlResolver),
-        "emulated" : new EmulatedShadowDomStrategy(styleInliner, styleUrlResolver, DOM.createElement('div'))
+        "scoped" : new EmulatedScopedShadowDomStrategy(styleInliner, styleUrlResolver, DOM.createElement('div')),
+        "unscoped" : new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, DOM.createElement('div')),
       },
       (strategy, name) => {
 

modules/angular2/test/core/compiler/shadow_dom_strategy_spec.js

@@ -2,7 +2,8 @@ import {describe, beforeEach, it, expect, ddescribe, iit, SpyObject, el} from 'a
 
 import {
   NativeShadowDomStrategy,
-  EmulatedShadowDomStrategy,
+  EmulatedScopedShadowDomStrategy,
+  EmulatedUnscopedShadowDomStrategy,
   resetShadowDomCache,
 } from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';
@@ -53,7 +54,7 @@ export function main() {
     });
   });
 
-  describe('EmulatedShadowDomStratgey', () => {
+  describe('EmulatedScopedShadowDomStratgey', () => {
     var xhr, styleHost;
 
     beforeEach(() => {
@@ -62,7 +63,7 @@ export function main() {
       xhr = new FakeXHR();
       var styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
       styleHost = el('<div></div>');
-      strategy = new EmulatedShadowDomStrategy(styleInliner, styleUrlResolver, styleHost);
+      strategy = new EmulatedScopedShadowDomStrategy(styleInliner, styleUrlResolver, styleHost);
       resetShadowDomCache();
     });
 
@@ -141,6 +142,71 @@ export function main() {
       expect(DOM.getAttribute(elt, '_nghost-0')).toEqual('');
     });
   });
+
+  describe('EmulatedUnscopedShadowDomStratgey', () => {
+    var styleHost;
+
+    beforeEach(() => {
+      var urlResolver = new UrlResolver();
+      var styleUrlResolver = new StyleUrlResolver(urlResolver);
+      styleHost = el('<div></div>');
+      strategy = new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, styleHost);
+      resetShadowDomCache();
+    });
+
+    it('should attach the view nodes as child of the host element', () => {
+      var host = el('<div><span>original content</span></div>');
+      var nodes = el('<div>view</div>');
+      var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null), null);
+      var view = pv.instantiate(null, null);
+
+      strategy.attachTemplate(host, view);
+      var firstChild = DOM.firstChild(host);
+      expect(DOM.tagName(firstChild)).toEqual('DIV');
+      expect(firstChild).toHaveText('view');
+      expect(host).toHaveText('view');
+    });
+
+    it('should rewrite style urls', () => {
+      var css = '.foo {background-image: url("img.jpg");}';
+      expect(strategy.transformStyleText(css, 'http://base', null))
+        .toEqual(".foo {background-image: url('http://base/img.jpg');}");
+    });
+
+    it('should not inline import rules', () => {
+      var css = '@import "other.css";';
+      expect(strategy.transformStyleText(css, 'http://base', null))
+        .toEqual("@import 'http://base/other.css';");
+    });
+
+    it('should move the style element to the style host', () => {
+      var originalHost = el('<div></div>');
+      var styleEl = el('<style>/*css*/</style>');
+      DOM.appendChild(originalHost, styleEl);
+      expect(originalHost).toHaveText('/*css*/');
+
+      strategy.handleStyleElement(styleEl);
+      expect(originalHost).toHaveText('');
+      expect(styleHost).toHaveText('/*css*/');
+    });
+
+    it('should insert the same style only once in the style host', () => {
+      var originalHost = el('<div></div>');
+      var styleEl1 = el('<style>/*css 1*/</style>');
+      var styleEl2 = el('<style>/*css 2*/</style>');
+      var styleEl1bis = el('<style>/*css 1*/</style>');
+
+      DOM.appendChild(originalHost, styleEl1);
+      DOM.appendChild(originalHost, styleEl2);
+      DOM.appendChild(originalHost, styleEl1bis);
+
+      strategy.handleStyleElement(styleEl1);
+      strategy.handleStyleElement(styleEl2);
+      strategy.handleStyleElement(styleEl1bis);
+      expect(originalHost).toHaveText('');
+      expect(styleHost).toHaveText('/*css 1*//*css 2*/');
+    });
+  });
 }
 
 class FakeXHR extends XHR {

modules/angular2/test/core/compiler/view_spec.js

@@ -1,7 +1,7 @@
 import {describe, xit, it, expect, beforeEach, ddescribe, iit, el, proxy} from 'angular2/test_lib';
 import {ProtoView, ElementPropertyMemento, DirectivePropertyMemento} from 'angular2/src/core/compiler/view';
 import {ProtoElementInjector, ElementInjector, DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
-import {EmulatedShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
+import {EmulatedScopedShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {Component, Decorator, Viewport, Directive, onChange} from 'angular2/src/core/annotations/annotations';
 import {Lexer, Parser, DynamicProtoChangeDetector,
@@ -396,7 +396,7 @@ export function main() {
             new DynamicProtoChangeDetector(null), null);
 
           var pv = new ProtoView(el('<cmp class="ng-binding"></cmp>'),
-            new DynamicProtoChangeDetector(null), new EmulatedShadowDomStrategy(null, null, null));
+            new DynamicProtoChangeDetector(null), new EmulatedScopedShadowDomStrategy(null, null, null));
           var binder = pv.bindElement(new ProtoElementInjector(null, 0, [SomeComponent], true));
           binder.componentDirective = new DirectiveMetadataReader().read(SomeComponent);
           binder.nestedProtoView = subpv;