fixing issues with running tests

PhantomJS has a bug when using fragments in ranges, and es6 doesn't support changing internal flags.
Globals was introduced to control all viewers created (for webgl2 disable and disable init)

.gitignore

@@ -176,3 +176,4 @@ dist/preview release/package/
 /Viewer/dist/viewer.min.js
 dist/preview release/viewer/babylon.d.ts
 Viewer/dist/viewer.max.js
+Viewer/tests/**/*.js

Viewer/src/configuration/globals.ts

@@ -0,0 +1,8 @@
+export class ViewerGlobals {
+
+    public disableInit: boolean = false;
+    public disableWebGL2Support: boolean = false;
+
+}
+
+export let viewerGlobals: ViewerGlobals = new ViewerGlobals();

Viewer/src/index.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../dist/babylon.glTF2Interface.d.ts"/>
 import { mapperManager } from './configuration/mappers';
+import { viewerGlobals } from './configuration/globals';
 import { viewerManager } from './viewer/viewerManager';
 import { DefaultViewer } from './viewer/defaultViewer';
 import { AbstractViewer } from './viewer/viewer';
@@ -13,7 +14,7 @@ import { AnimationPlayMode, AnimationState } from './model/modelAnimation';
  * An HTML-Based viewer for 3D models, based on BabylonJS and its extensions.
  */
 
-import { PromisePolyfill } from 'babylonjs';
+import * as BABYLON from 'babylonjs';
 
 // load needed modules.
 import 'babylonjs-loaders';
@@ -23,13 +24,13 @@ import 'pep';
 import { InitTags } from './initializer';
 
 // promise polyfill, if needed!
-PromisePolyfill.Apply();
+BABYLON.PromisePolyfill.Apply();
 
 export let disableInit: boolean = false;
 document.addEventListener("DOMContentLoaded", init);
 function init(event) {
     document.removeEventListener("DOMContentLoaded", init);
-    if (disableInit) return;
+    if (viewerGlobals.disableInit || disableInit) return;
     InitTags();
 }
 
@@ -42,4 +43,4 @@ function disposeAll() {
 }
 
 // public API for initialization
-export { InitTags, DefaultViewer, AbstractViewer, viewerManager, mapperManager, disposeAll, ModelLoader, ViewerModel, AnimationPlayMode, AnimationState, ModelState };
+export { BABYLON, InitTags, DefaultViewer, AbstractViewer, viewerGlobals, viewerManager, mapperManager, disposeAll, setDisableInit, ModelLoader, ViewerModel, AnimationPlayMode, AnimationState, ModelState };

Viewer/src/templateManager.ts

@@ -293,8 +293,9 @@ export class Template {
      */
     public initPromise: Promise<Template>;
 
-    private _fragment: DocumentFragment;
+    private _fragment: DocumentFragment | Element;
     private _htmlTemplate: string;
+    private _rawHtml: string;
 
     private loadRequests: Array<IFileRequest>;
 
@@ -317,8 +318,14 @@ export class Template {
                 this._htmlTemplate = htmlTemplate;
                 let compiledTemplate = Handlebars.compile(htmlTemplate);
                 let config = this._configuration.params || {};
-                let rawHtml = compiledTemplate(config);
-                this._fragment = document.createRange().createContextualFragment(rawHtml);
+                this._rawHtml = compiledTemplate(config);
+                try {
+                    this._fragment = document.createRange().createContextualFragment(this._rawHtml);
+                } catch (e) {
+                    let test = document.createElement(this.name);
+                    test.innerHTML = this._rawHtml;
+                    this._fragment = test;
+                }
                 this.isLoaded = true;
                 this.isShown = true;
                 this.onLoaded.notifyObservers(this);
@@ -342,8 +349,14 @@ export class Template {
         }
         let compiledTemplate = Handlebars.compile(this._htmlTemplate);
         let config = this._configuration.params || {};
-        let rawHtml = compiledTemplate(config);
-        this._fragment = document.createRange().createContextualFragment(rawHtml);
+        this._rawHtml = compiledTemplate(config);
+        try {
+            this._fragment = document.createRange().createContextualFragment(this._rawHtml);
+        } catch (e) {
+            let test = document.createElement(this.name);
+            test.innerHTML = this._rawHtml;
+            this._fragment = test;
+        }
         if (this.parent) {
             this.appendTo(this.parent, true);
         }
@@ -363,10 +376,16 @@ export class Template {
     public getChildElements(): Array<string> {
         let childrenArray: string[] = [];
         //Edge and IE don't support frage,ent.children
-        let children = this._fragment.children;
+        let children: HTMLCollection | NodeListOf<Element> = this._fragment && this._fragment.children;
+        if (!this._fragment) {
+            let fragment = this.parent.querySelector(this.name);
+            if (fragment) {
+                children = fragment.querySelectorAll('*');
+            }
+        }
         if (!children) {
             // casting to HTMLCollection, as both NodeListOf and HTMLCollection have 'item()' and 'length'.
-            children = <HTMLCollection>this._fragment.querySelectorAll('*');
+            children = this._fragment.querySelectorAll('*');
         }
         for (let i = 0; i < children.length; ++i) {
             childrenArray.push(kebabToCamel(children.item(i).nodeName.toLowerCase()));
@@ -382,7 +401,7 @@ export class Template {
      */
     public appendTo(parent: HTMLElement, forceRemove?: boolean) {
         if (this.parent) {
-            if (forceRemove) {
+            if (forceRemove && this._fragment) {
                 this.parent.removeChild(this._fragment);
             } else {
                 return;
@@ -393,7 +412,11 @@ export class Template {
         if (this._configuration.id) {
             this.parent.id = this._configuration.id;
         }
-        this._fragment = this.parent.appendChild(this._fragment);
+        if (this._fragment) {
+            this._fragment = this.parent.appendChild(this._fragment);
+        } else {
+            this.parent.insertAdjacentHTML("beforeend", this._rawHtml);
+        }
         // appended only one frame after.
         setTimeout(() => {
             this._registerEvents();

Viewer/src/viewer/viewer.ts

@@ -9,6 +9,7 @@ import { ViewerModel } from '../model/viewerModel';
 import { GroupModelAnimation } from '../model/modelAnimation';
 import { ModelLoader } from '../model/modelLoader';
 import { CameraBehavior } from '../interfaces';
+import { viewerGlobals } from '..';
 
 /**
  * The AbstractViewr is the center of Babylon's viewer.
@@ -55,6 +56,8 @@ export abstract class AbstractViewer {
      */
     public modelLoader: ModelLoader;
 
+    public runRenderLoop: boolean = true;
+
     /**
      * the viewer configuration object
      */
@@ -210,6 +213,20 @@ export abstract class AbstractViewer {
     }
 
     /**
+     * Is the engine currently set to rende even when the page is in background
+     */
+    public get renderInBackground() {
+        return this.engine.renderEvenInBackground;
+    }
+
+    /**
+     * Set the viewer's background rendering flag.
+     */
+    public set renderInBackground(value: boolean) {
+        this.engine.renderEvenInBackground = value;
+    }
+
+    /**
      * The resize function that will be registered with the window object
      */
     protected _resize = (): void => {
@@ -226,10 +243,19 @@ export abstract class AbstractViewer {
     }
 
     /**
+     * Force a single render loop execution.
+     */
+    public forceRender() {
+        this._render(true);
+    }
+
+    /**
      * render loop that will be executed by the engine
      */
-    protected _render = (): void => {
-        this.scene && this.scene.activeCamera && this.scene.render();
+    protected _render = (force: boolean = false): void => {
+        if (force || (this.runRenderLoop && this.scene && this.scene.activeCamera)) {
+            this.scene.render();
+        }
     }
 
     /**
@@ -779,6 +805,13 @@ export abstract class AbstractViewer {
         }
         let config = this._configuration.engine || {};
         // TDO enable further configuration
+
+        // check for webgl2 support, force-disable if needed.
+        if (viewerGlobals.disableWebGL2Support) {
+            config.engineOptions = config.engineOptions || {};
+            config.engineOptions.disableWebGL2Support = true;
+        }
+
         this.engine = new Engine(canvasElement, !!config.antialiasing, config.engineOptions);
 
         // Disable manifest checking