From 8b5803c2937aa63dd0a31c64681e8ba0acbf94eb Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Mon, 30 Apr 2018 10:55:18 -0700
Subject: [PATCH] Fixes IE11 test issues

Use <template>.innerHTML when adding test elements to main document. Works around a template polyfill issue (https://github.com/webcomponents/template/issues/40) by setting innerHTML on a <template> element so that inner templates are correctly updated.
---
 test/unit/custom-style-async-import.js    |   4 +-
 test/unit/custom-style-import.js          |   4 +-
 test/unit/custom-style.html               | 112 +++++++++++-----------
 test/unit/shady-unscoped-style-import.js  |   4 +-
 test/unit/styling-import-shared-styles.js |   4 +-
 test/unit/sub/resolveurl-elements.js      |   4 +-
 test/unit/sub/style-import.js             |   4 +-
 7 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/test/unit/custom-style-async-import.js b/test/unit/custom-style-async-import.js
index be7293a937..a1d21a7e66 100644
--- a/test/unit/custom-style-async-import.js
+++ b/test/unit/custom-style-async-import.js
@@ -1,6 +1,6 @@
 import { Polymer } from '../../lib/legacy/polymer-fn.js';
 
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
 <style is="custom-style">
@@ -24,7 +24,7 @@ $_documentContainer.innerHTML = `<custom-style>
 </template>
 </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 
 Polymer({
   is: 'x-client'
diff --git a/test/unit/custom-style-import.js b/test/unit/custom-style-import.js
index f8e65a2367..f6722ccedd 100644
--- a/test/unit/custom-style-import.js
+++ b/test/unit/custom-style-import.js
@@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 */
 
 import './sub/style-import.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="shared-style">
@@ -42,4 +42,4 @@ $_documentContainer.innerHTML = `<dom-module id="shared-style">
 </style>
 </custom-style>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index c77bab220b..3bfece8e0e 100644
--- a/test/unit/custom-style.html
+++ b/test/unit/custom-style.html
@@ -27,7 +27,7 @@
         See: https://github.com/Polymer/polymer-modulizer/issues/154
         -->
     <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style">
@@ -79,10 +79,10 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style">
@@ -113,11 +113,11 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
 <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style" include="shared-style2">
@@ -132,10 +132,10 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style">
@@ -147,100 +147,100 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="italic">italic</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="bag">bag</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="mix">mix</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="dynamic">dynamic</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="import-mixin">import-mixin</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="import-var">import-var</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-bar></x-bar>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-foo></x-foo>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-red-text></x-red-text>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-blue-bold-text></x-blue-bold-text>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<parent-variable-with-var></parent-variable-with-var>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<br>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script><script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<br>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div id="after"></div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="foo"></div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="foo--bar"></div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-baz">
     <template>
@@ -253,11 +253,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-bar">
     <template>
@@ -271,11 +271,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-foo">
     <template>
@@ -302,11 +302,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-red-text">
     <template>
@@ -319,11 +319,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-blue-bold-text">
     <template>
@@ -334,11 +334,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="parent-variable-with-var">
     <template>
@@ -359,11 +359,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="child-variable-with-var">
     <template>
@@ -387,11 +387,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="child-of-child-with-var">
     <template>
@@ -410,7 +410,7 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
diff --git a/test/unit/shady-unscoped-style-import.js b/test/unit/shady-unscoped-style-import.js
index f18ddad093..13a0029e8d 100644
--- a/test/unit/shady-unscoped-style-import.js
+++ b/test/unit/shady-unscoped-style-import.js
@@ -8,7 +8,7 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="global-shared1">
@@ -33,4 +33,4 @@ $_documentContainer.innerHTML = `<dom-module id="global-shared1">
 </dom-module><dom-module id="global-shared2">
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
diff --git a/test/unit/styling-import-shared-styles.js b/test/unit/styling-import-shared-styles.js
index 7647f6d1ba..a5c3636a36 100644
--- a/test/unit/styling-import-shared-styles.js
+++ b/test/unit/styling-import-shared-styles.js
@@ -8,7 +8,7 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="shared-styles">
@@ -28,4 +28,4 @@ $_documentContainer.innerHTML = `<dom-module id="shared-styles">
   </template>
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
diff --git a/test/unit/sub/resolveurl-elements.js b/test/unit/sub/resolveurl-elements.js
index 11b2e40f88..59ba24447e 100644
--- a/test/unit/sub/resolveurl-elements.js
+++ b/test/unit/sub/resolveurl-elements.js
@@ -14,11 +14,11 @@ import { DomModule } from '../../../lib/elements/dom-module.js';
 import { Polymer } from '../../../lib/legacy/polymer-fn.js';
 import { pathFromUrl } from '../../../lib/utils/resolve-url.js';
 
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 const baseAssetPath = pathFromUrl(import.meta.url);
 $_documentContainer.innerHTML = `<dom-module id="p-r-ap" assetpath="${baseAssetPath}../../assets/"></dom-module>`;
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 
 class PR extends PolymerElement {
   static get template() {
diff --git a/test/unit/sub/style-import.js b/test/unit/sub/style-import.js
index 2838fd98e2..c7cfbe46cf 100644
--- a/test/unit/sub/style-import.js
+++ b/test/unit/sub/style-import.js
@@ -1,6 +1,6 @@
 import { pathFromUrl } from '../../../lib/utils/resolve-url.js';
 
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 const baseAssetPath = pathFromUrl(import.meta.url);
 $_documentContainer.innerHTML = `<dom-module id="style-import" assetpath="${baseAssetPath}">
@@ -23,4 +23,4 @@ $_documentContainer.innerHTML = `<dom-module id="style-import" assetpath="${base
   </template>
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);