TypeScript DOM.supportsNativeShadowDOM方法代码示例

  describe('NativeShadowDomStrategy', () => {
    beforeEach(() => {
      var urlResolver = new UrlResolver();
      var styleUrlResolver = new StyleUrlResolver(urlResolver);
      strategy = new NativeShadowDomStrategy(styleUrlResolver);
    });

    if (DOM.supportsNativeShadowDOM()) {
      it('should use the native shadow root', () => {
        var host = el('<div><span>original content</span></div>');
        expect(strategy.prepareShadowRoot(host)).toBe(DOM.getShadowRoot(host));
      });
    }

    it('should rewrite style urls', () => {
      var styleElement = el('<style>.foo {background-image: url("img.jpg");}</style>');
      strategy.processStyleElement('someComponent', 'http://base', styleElement);
      expect(styleElement)
          .toHaveText(".foo {" + "background-image: url('http://base/img.jpg');" + "}");
    });

    it('should not inline import rules', () => {
      var styleElement = el('<style>@import "other.css";</style>');
      strategy.processStyleElement('someComponent', 'http://base', styleElement);
      expect(styleElement).toHaveText("@import 'http://base/other.css';");
    });
  });

  describe('NativeShadowDomStrategy', () => {
    beforeEach(() => { strategy = new NativeShadowDomStrategy(); });

    if (DOM.supportsNativeShadowDOM()) {
      it('should use the native shadow root', () => {
        var host = el('<div><span>original content</span></div>');
        expect(strategy.prepareShadowRoot(host)).toBe(DOM.getShadowRoot(host));
      });
    }
  });

  describe('ShadowDom integration tests', function() {
    var styleHost;
    var strategies = {
      "scoped":
          bind(ShadowDomStrategy)
              .toFactory((styleInliner, styleUrlResolver) => new EmulatedScopedShadowDomStrategy(
                             styleInliner, styleUrlResolver, styleHost),
                         [StyleInliner, StyleUrlResolver]),
      "unscoped":
          bind(ShadowDomStrategy)
              .toFactory((styleInliner, styleUrlResolver) => new EmulatedUnscopedShadowDomStrategy(
                             styleInliner, styleUrlResolver, null),
                         [StyleInliner, StyleUrlResolver])
    };
    if (DOM.supportsNativeShadowDOM()) {
      StringMapWrapper.set(
          strategies, "native",
          bind(ShadowDomStrategy)
              .toFactory((styleInliner, styleUrlResolver) =>
                             new NativeShadowDomStrategy(styleInliner, styleUrlResolver),
                         [StyleInliner, StyleUrlResolver]));
    }
    beforeEach(() => { styleHost = el('<div></div>'); });

    StringMapWrapper.forEach(strategies, (strategyBinding, name) => {
      describe(`${name} shadow dom strategy`, () => {
        beforeEachBindings(() => { return [strategyBinding, DomTestbed]; });

        // GH-2095 - https://github.com/angular/angular/issues/2095
        // important as we are adding a content end element during compilation,
        // which could skrew up text node indices.
        it('should support text nodes after content tags',
           inject([DomTestbed, AsyncTestCompleter], (tb, async) => {
             tb.compileAll([
                 simple,
                 new ViewDefinition({
                   componentId: 'simple',
                   template: '<content></content><p>P,</p>{{a}}',
                   directives: []
                 })
               ])
                 .then((protoViewDtos) => {
                   var rootView = tb.createRootView(protoViewDtos[0]);
                   var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);

                   tb.renderer.setText(cmpView.viewRef, 0, 'text');
                   expect(tb.rootEl).toHaveText('P,text');
                   async.done();
                 });
           }));

        // important as we are moving style tags around during compilation,
        // which could skrew up text node indices.
        it('should support text nodes after style tags',
           inject([DomTestbed, AsyncTestCompleter], (tb, async) => {
             tb.compileAll([
                 simple,
                 new ViewDefinition({
                   componentId: 'simple',
                   template: '<style></style><p>P,</p>{{a}}',
                   directives: []
                 })
               ])
                 .then((protoViewDtos) => {
                   var rootView = tb.createRootView(protoViewDtos[0]);
                   var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);

                   tb.renderer.setText(cmpView.viewRef, 0, 'text');
                   expect(tb.rootEl).toHaveText('P,text');
                   async.done();
                 });
           }));

        it('should support simple components',
           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
             tb.compileAll([
                 mainDir,
                 new ViewDefinition({
                   componentId: 'main',
                   template: '<simple>' +
                                 '<div>A</div>' +
                                 '</simple>',
                   directives: [simple]
                 }),
                 simpleTemplate
               ])
                 .then((protoViews) => {
                   tb.createRootViews(protoViews);

                   expect(tb.rootEl).toHaveText('SIMPLE(A)');

                   async.done();
                 });
           }));

        it('should support simple components with text interpolation as direct children',
           inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
             tb.compileAll([
                 mainDir,
                 new ViewDefinition({
//.........这里部分代码省略.........

 describe('ShadowDom integration tests', function() {
   var urlResolver,
       styleUrlResolver,
       styleInliner;
   var strategies = {
     "scoped": () => new EmulatedScopedShadowDomStrategy(styleInliner, styleUrlResolver, null),
     "unscoped": () => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, null)
   };
   if (DOM.supportsNativeShadowDOM()) {
     StringMapWrapper.set(strategies, "native", () => new NativeShadowDomStrategy(styleUrlResolver));
   }
   StringMapWrapper.forEach(strategies, (strategyFactory, name) => {
     describe(`${name} shadow dom strategy`, () => {
       var testbed,
           renderer,
           rootEl,
           compile,
           strategy;
       beforeEach(() => {
         urlResolver = new UrlResolver();
         styleUrlResolver = new StyleUrlResolver(urlResolver);
         styleInliner = new StyleInliner(null, styleUrlResolver, urlResolver);
         strategy = strategyFactory();
         testbed = new IntegrationTestbed({
           shadowDomStrategy: strategy,
           templates: templates
         });
         renderer = testbed.renderer;
         rootEl = testbed.rootEl;
         compile = (template, directives) => testbed.compile(template, directives);
       });
       it('should support simple components', inject([AsyncTestCompleter], (async) => {
         var temp = '<simple>' + '<div>A</div>' + '</simple>';
         compile(temp, [simple]).then((pvRefs) => {
           renderer.createView(pvRefs[0]);
           expect(rootEl).toHaveText('SIMPLE(A)');
           async.done();
         });
       }));
       it('should support multiple content tags', inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div>B</div>' + '<div>C</div>' + '<div class="left">A</div>' + '</multiple-content-tags>';
         compile(temp, [multipleContentTagsComponent]).then((pvRefs) => {
           renderer.createView(pvRefs[0]);
           expect(rootEl).toHaveText('(A, BC)');
           async.done();
         });
       }));
       it('should redistribute only direct children', inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div>B<div class="left">A</div></div>' + '<div>C</div>' + '</multiple-content-tags>';
         compile(temp, [multipleContentTagsComponent]).then((pvRefs) => {
           renderer.createView(pvRefs[0]);
           expect(rootEl).toHaveText('(, BAC)');
           async.done();
         });
       }));
       it("should redistribute direct child viewcontainers when the light dom changes", inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div><div template="manual" class="left">A</div></div>' + '<div>B</div>' + '</multiple-content-tags>';
         compile(temp, [multipleContentTagsComponent, manualViewportDirective]).then((pvRefs) => {
           var viewRefs = renderer.createView(pvRefs[0]);
           var vcRef = new ViewContainerRef(viewRefs[1], 1);
           var vcProtoViewRef = pvRefs[2];
           var childViewRef = renderer.createView(vcProtoViewRef)[0];
           expect(rootEl).toHaveText('(, B)');
           renderer.insertViewIntoContainer(vcRef, childViewRef);
           expect(rootEl).toHaveText('(, AB)');
           renderer.detachViewFromContainer(vcRef, 0);
           expect(rootEl).toHaveText('(, B)');
           async.done();
         });
       }));
       it("should redistribute when the light dom changes", inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div template="manual" class="left">A</div>' + '<div>B</div>' + '</multiple-content-tags>';
         compile(temp, [multipleContentTagsComponent, manualViewportDirective]).then((pvRefs) => {
           var viewRefs = renderer.createView(pvRefs[0]);
           var vcRef = new ViewContainerRef(viewRefs[1], 1);
           var vcProtoViewRef = pvRefs[2];
           var childViewRef = renderer.createView(vcProtoViewRef)[0];
           expect(rootEl).toHaveText('(, B)');
           renderer.insertViewIntoContainer(vcRef, childViewRef);
           expect(rootEl).toHaveText('(A, B)');
           renderer.detachViewFromContainer(vcRef, 0);
           expect(rootEl).toHaveText('(, B)');
           async.done();
         });
       }));
       it("should support nested components", inject([AsyncTestCompleter], (async) => {
         var temp = '<outer-with-indirect-nested>' + '<div>A</div>' + '<div>B</div>' + '</outer-with-indirect-nested>';
         compile(temp, [outerWithIndirectNestedComponent]).then((pvRefs) => {
           renderer.createView(pvRefs[0]);
           expect(rootEl).toHaveText('OUTER(SIMPLE(AB))');
           async.done();
         });
       }));
       it("should support nesting with content being direct child of a nested component", inject([AsyncTestCompleter], (async) => {
         var temp = '<outer>' + '<div template="manual" class="left">A</div>' + '<div>B</div>' + '<div>C</div>' + '</outer>';
         compile(temp, [outerComponent, manualViewportDirective]).then((pvRefs) => {
           var viewRefs = renderer.createView(pvRefs[0]);
           var vcRef = new ViewContainerRef(viewRefs[1], 1);
           var vcProtoViewRef = pvRefs[2];
           var childViewRef = renderer.createView(vcProtoViewRef)[0];
//.........这里部分代码省略.........

 describe('integration tests', function() {
   var urlResolver;
   var styleUrlResolver;
   var styleInliner;
   var strategies = {
     "scoped": () => new EmulatedScopedShadowDomStrategy(styleInliner, styleUrlResolver, DOM.createElement('div')),
     "unscoped": () => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, DOM.createElement('div'))
   };
   if (DOM.supportsNativeShadowDOM()) {
     StringMapWrapper.set(strategies, "native", () => new NativeShadowDomStrategy(styleUrlResolver));
   }
   StringMapWrapper.forEach(strategies, (strategyFactory, name) => {
     describe(`${name} shadow dom strategy`, () => {
       var compiler,
           tplResolver;
       beforeEach(() => {
         urlResolver = new UrlResolver();
         styleUrlResolver = new StyleUrlResolver(urlResolver);
         styleInliner = new StyleInliner(null, styleUrlResolver, urlResolver);
         tplResolver = new MockTemplateResolver();
         compiler = new Compiler(dynamicChangeDetection, new TemplateLoader(null, null), new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(), strategyFactory(), tplResolver, new ComponentUrlMapper(), urlResolver);
       });
       function compile(template, directives, assertions) {
         tplResolver.setTemplate(MyComp, new Template({
           inline: template,
           directives: directives
         }));
         compiler.compile(MyComp).then(createView).then((view) => {
           var lc = new LifeCycle(new ExceptionHandler(), view.changeDetector, false);
           assertions(view, lc);
         });
       }
       Object.defineProperty(compile, "parameters", {get: function() {
           return [[], [assert.genericType(List, Type)], []];
         }});
       it('should support simple components', inject([AsyncTestCompleter], (async) => {
         var temp = '<simple>' + '<div>A</div>' + '</simple>';
         compile(temp, [Simple], (view, lc) => {
           expect(view.nodes).toHaveText('SIMPLE(A)');
           async.done();
         });
       }));
       it('should support multiple content tags', inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div>B</div>' + '<div>C</div>' + '<div class="left">A</div>' + '</multiple-content-tags>';
         compile(temp, [MultipleContentTagsComponent], (view, lc) => {
           expect(view.nodes).toHaveText('(A, BC)');
           async.done();
         });
       }));
       it('should redistribute only direct children', inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div>B<div class="left">A</div></div>' + '<div>C</div>' + '</multiple-content-tags>';
         compile(temp, [MultipleContentTagsComponent], (view, lc) => {
           expect(view.nodes).toHaveText('(, BAC)');
           async.done();
         });
       }));
       it("should redistribute direct child viewcontainers when the light dom changes", inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div><div template="manual" class="left">A</div></div>' + '<div>B</div>' + '</multiple-content-tags>';
         compile(temp, [MultipleContentTagsComponent, ManualViewportDirective], (view, lc) => {
           var dir = view.elementInjectors[1].get(ManualViewportDirective);
           expect(view.nodes).toHaveText('(, B)');
           dir.show();
           lc.tick();
           expect(view.nodes).toHaveText('(, AB)');
           dir.hide();
           lc.tick();
           expect(view.nodes).toHaveText('(, B)');
           async.done();
         });
       }));
       it("should redistribute when the light dom changes", inject([AsyncTestCompleter], (async) => {
         var temp = '<multiple-content-tags>' + '<div template="manual" class="left">A</div>' + '<div>B</div>' + '</multiple-content-tags>';
         compile(temp, [MultipleContentTagsComponent, ManualViewportDirective], (view, lc) => {
           var dir = view.elementInjectors[1].get(ManualViewportDirective);
           expect(view.nodes).toHaveText('(, B)');
           dir.show();
           lc.tick();
           expect(view.nodes).toHaveText('(A, B)');
           dir.hide();
           lc.tick();
           expect(view.nodes).toHaveText('(, B)');
           async.done();
         });
       }));
       it("should support nested components", inject([AsyncTestCompleter], (async) => {
         var temp = '<outer-with-indirect-nested>' + '<div>A</div>' + '<div>B</div>' + '</outer-with-indirect-nested>';
         compile(temp, [OuterWithIndirectNestedComponent], (view, lc) => {
           expect(view.nodes).toHaveText('OUTER(SIMPLE(AB))');
           async.done();
         });
       }));
       it("should support nesting with content being direct child of a nested component", inject([AsyncTestCompleter], (async) => {
         var temp = '<outer>' + '<div template="manual" class="left">A</div>' + '<div>B</div>' + '<div>C</div>' + '</outer>';
         compile(temp, [OuterComponent, ManualViewportDirective], (view, lc) => {
           var dir = view.elementInjectors[1].get(ManualViewportDirective);
           expect(view.nodes).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
           dir.show();
           lc.tick();
           expect(view.nodes).toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
           async.done();
//.........这里部分代码省略.........