Add legacy bundle to test old browser compatibility

.travis.yml

@@ -9,10 +9,8 @@ env:
 node_js: node
 addons:
   chrome: stable
-  firefox: latest
 script:
-- xvfb-run npm run test
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --plugin sauce; fi
+- xvfb-run npm run test && if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then ./scripts/run-sauce-tests.sh; fi
 dist: trusty
 cache:
   directories:

POLYFILLS.md

@@ -81,3 +81,16 @@ the rest of your application code:
 </html>
 ```
 
+## Legacy Browser Support
+
+If you are using the "legacy" browser bundle, or otherwise targeting old
+browsers such as Internet Explorer 11 with your build, you **MUST** also include
+the Custom Elements ES5 Adapter in your document before loading `<model-viewer>`.
+
+The Adapter is included as part of the Web Components Polyfill, and can be
+included with a script tag:
+
+```html
+<!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+<script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+```

README.md

@@ -2,7 +2,7 @@
 > `<model-viewer>` is currently in the Experimentation phase. Someone on the team thinks it’s an idea worth exploring, but it may not go any further than this. Use at your own risk.
 
 
-# `<model-viewer>` 
+# `<model-viewer>`
 
  [![Build Status](https://api.travis-ci.org/GoogleWebComponents/model-viewer.svg?branch=master)](https://travis-ci.org/GoogleWebComponents/model-viewer)
  [![NPM](https://img.shields.io/npm/v/@google/model-viewer.svg)](https://www.npmjs.com/package/@google/model-viewer)
@@ -122,8 +122,22 @@ Custom Elements           |     ✅ |     ✅ |        ✅ |         🚧 |
 Shadow DOM                |     ✅ |     ✅ |        ✅ |         ✅ |         🚧 |    🚧 |   🚧
 Intersection Observer     |     ✅ |     ✅ |        🚧 |         ✅ |         ✅ |    ✅ |   🚧
 Fullscreen API            |     🚧 |     ✅ |        🚧 |         🚧 |         🚧 |    🚧 |   🚧
-WebXR Device API         |     🚫 |     🎌 |        🚫 |         🚫 |         🚫 |    🚫 |   🚫
-WebXR HitTest API        |     🚫 |     🎌 |        🚫 |         🚫 |         🚫 |    🚫 |   🚫
+WebXR Device API          |     🚫 |     🎌 |        🚫 |         🚫 |         🚫 |    🚫 |   🚫
+WebXR HitTest API         |     🚫 |     🎌 |        🚫 |         🚫 |         🚫 |    🚫 |   🚫
+
+### IE 11 Support
+
+We currently test and support Internet Explorer 11. We also distribute a special
+["legacy" bundle](https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js)
+that is compatible with IE 11 but comes with the following important caveats:
+
+ - In order to use the "legacy" bundle in Chrome, you must also use the [Custom
+   Elements ES5 Adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)
+   (see [POLYFILLS.md](https://github.com/PolymerLabs/model-viewer/blob/master/POLYFILLS.md#legacy-browser-support)
+   for more detail on this).
+ - The "legacy" bundle includes JavaScript language feature polyfills and code
+   transformations that will incur a byte size and execution time penalty
+   compared to the non-legacy versions of the code.
 
 ## API
 
@@ -150,7 +164,7 @@ Optional parameters (not required for display):
   URL to an [equirectangular projection image](https://en.wikipedia.org/wiki/Equirectangular_projection) that's used for the skybox, as well as applied as an environment map on the model. Currently only supports traditional image formats (png, jpg), and does not yet support HDR (#65). Setting `background-image` supercedes `background-color`.
 * *`controls`*: Enables controls via mouse/touch when in flat view.
 * *`ios-src`*: The url to a [USDZ][USDZ] model which will be used on
-  [supported iOS 12+ devices](https://www.apple.com/ios/augmented-reality/) via 
+  [supported iOS 12+ devices](https://www.apple.com/ios/augmented-reality/) via
   [AR Quick Look](https://developer.apple.com/videos/play/wwdc2018/603/) on Safari.
   See [Augmented Reality](#augmented-reality).
 * *`magic-leap`*: Enables the ability to view models in AR when viewing content on

examples/augmented-reality.html

@@ -27,6 +27,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/background-color.html

@@ -28,6 +28,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/background-image.html

@@ -28,6 +28,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/default.html

@@ -27,6 +27,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/index.html

@@ -27,6 +27,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/loading.html

@@ -28,6 +28,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/multiple-elements.html

@@ -27,6 +27,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 

examples/pbr.html

@@ -27,6 +27,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
@@ -95,6 +98,7 @@ <h2>Barramundi Fish</h2>
           licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>
           (<a href="https://hdrihaven.com/hdri/?h=whipple_creek_regional_park_04">source</a>)
         </div>
+    </div>
     <script src="./scripts/helpers.js"></script>
     <script src="./scripts/lazy-inject.js"></script>
     <script src="./built/dependencies.js"></script>

examples/sources.html

@@ -28,6 +28,9 @@
   <!-- Include prismatic.js for Magic Leap support: -->
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
+  <!-- Include the Custom Elements ES5 adapter shim if you are loading an IE11-compatible bundle -->
+  <!--<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>-->
+
   <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>