diff --git a/packages/elements/test/create-custom-element_spec.ts b/packages/elements/test/create-custom-element_spec.ts index 299ecaf015..4c6c938abe 100644 --- a/packages/elements/test/create-custom-element_spec.ts +++ b/packages/elements/test/create-custom-element_spec.ts @@ -9,6 +9,7 @@ import {Component, DoBootstrap, EventEmitter, Injector, Input, NgModule, Output, destroyPlatform} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {browserDetection} from '@angular/platform-browser/testing/src/browser_util'; import {Subject} from 'rxjs'; import {NgElementConstructor, createCustomElement} from '../src/create-custom-element'; @@ -19,7 +20,7 @@ type WithFooBar = { barBar: string }; -if (typeof customElements !== 'undefined') { +if (browserDetection.supportsCustomElements) { describe('createCustomElement', () => { let NgElementCtor: NgElementConstructor; let strategy: TestStrategy; diff --git a/packages/elements/test/slots_spec.ts b/packages/elements/test/slots_spec.ts index f0e37020ac..eff0d2a872 100644 --- a/packages/elements/test/slots_spec.ts +++ b/packages/elements/test/slots_spec.ts @@ -9,6 +9,7 @@ import {Component, ComponentFactoryResolver, EventEmitter, Injector, Input, NgModule, Output, ViewEncapsulation, destroyPlatform} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {browserDetection} from '@angular/platform-browser/testing/src/browser_util'; import {Subject} from 'rxjs'; import {NgElement, NgElementConstructor, createCustomElement} from '../src/create-custom-element'; @@ -18,8 +19,8 @@ type WithFooBar = { fooFoo: string, barBar: string }; - -if (typeof customElements !== 'undefined') { +// we only run these tests in browsers that support Shadom DOM slots natively +if (browserDetection.supportsCustomElements && browserDetection.supportsShadowDom) { describe('slots', () => { let testContainer: HTMLDivElement; diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts index 9e69d3d5ad..e0e82a8306 100644 --- a/packages/platform-browser/test/dom/dom_renderer_spec.ts +++ b/packages/platform-browser/test/dom/dom_renderer_spec.ts @@ -87,8 +87,7 @@ import {NAMESPACE_URIS} from '../../src/dom/dom_renderer'; }); }); - // other browsers don't support shadow dom - if (browserDetection.isChromeDesktop) { + if (browserDetection.supportsDeprecatedShadowDomV0) { it('should allow to style components with emulated encapsulation and no encapsulation inside of components with shadow DOM', () => { const fixture = TestBed.createComponent(SomeApp); diff --git a/packages/platform-browser/test/dom/shadow_dom_spec.ts b/packages/platform-browser/test/dom/shadow_dom_spec.ts index b7a1b8f1e5..0088d11f04 100644 --- a/packages/platform-browser/test/dom/shadow_dom_spec.ts +++ b/packages/platform-browser/test/dom/shadow_dom_spec.ts @@ -9,14 +9,11 @@ import {Component, EventEmitter, Injector, Input, NgModule, Output, Renderer2, ViewEncapsulation, destroyPlatform} from '@angular/core'; import {TestBed} from '@angular/core/testing'; import {BrowserModule} from '@angular/platform-browser'; +import {browserDetection} from '@angular/platform-browser/testing/src/browser_util'; import {expect} from '@angular/platform-browser/testing/src/matchers'; -function supportsShadowDOMV1() { - const testEl = document.createElement('div'); - return (typeof customElements !== 'undefined') && (typeof testEl.attachShadow !== 'undefined'); -} -if (supportsShadowDOMV1()) { +if (browserDetection.supportsShadowDom) { describe('ShadowDOM Support', () => { let testContainer: HTMLDivElement; diff --git a/packages/platform-browser/testing/src/browser_util.ts b/packages/platform-browser/testing/src/browser_util.ts index e5d7360da6..c7716ebad6 100644 --- a/packages/platform-browser/testing/src/browser_util.ts +++ b/packages/platform-browser/testing/src/browser_util.ts @@ -68,6 +68,23 @@ export class BrowserDetection { return this._ua.indexOf('Chrome') > -1 && this._ua.indexOf('Chrome/3') > -1 && this._ua.indexOf('Edge') == -1; } + + get supportsCustomElements() { return (typeof(global).customElements !== 'undefined'); } + + get supportsDeprecatedCustomCustomElementsV0() { + return (typeof(document as any).registerElement !== 'undefined'); + } + + get supportsShadowDom() { + const testEl = document.createElement('div'); + return (typeof customElements !== 'undefined') && (typeof testEl.attachShadow !== 'undefined'); + } + + get supportsDeprecatedShadowDomV0() { + const testEl = document.createElement('div') as any; + return (typeof customElements !== 'undefined') && + (typeof testEl.createShadowRoot !== 'undefined'); + } } BrowserDetection.setup();