├── .eslintrc.json
├── .github
    └── CODEOWNERS
├── .gitignore
├── .travis.yml
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── template.js
├── tests
    ├── .eslintrc.json
    ├── basic.html
    ├── document-fragment.html
    └── runner.html
└── wct.conf.json


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint:recommended",
 3 |   "env": {
 4 |     "browser": true
 5 |   },
 6 |   "plugins": [
 7 |     "html"
 8 |   ],
 9 |   "rules": {
10 |     "semi": "error",
11 |     "strict": "error"
12 |   },
13 |   "parserOptions": {
14 |     "ecmaVersion": 5
15 |   }
16 | }


--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @azakus
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: false
 3 | dist: trusty
 4 | node_js: '9'
 5 | addons:
 6 |   firefox: latest
 7 |   chrome: stable
 8 | before_script:
 9 | - npm run lint
10 | script:
11 | - xvfb-run wct --npm
12 | - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --npm -s 'windows 10/microsoftedge@13' -s 'windows 10/microsoftedge@14' -s 'windows 10/microsoftedge@15' -s 'windows 10/microsoftedge@16'
13 |   -s 'windows 8.1/internet explorer@11' -s 'macos 10.13/safari@11' -s 'os x 10.12/safari@10' -s 'os x 10.11/safari@9' -s 'Linux/chrome@41';
14 |   fi
15 | env:
16 |   global:
17 |   - secure: oucYIKHVGwlwga761L4VtSlIDA1rFOnglofd8A3DwbDG7yAJG8/5knkzB/1KiveGGswbfgLyi74ni43Ge1c6AUvEQOeKvaDmjvw4BZ59lRMD+ADWcSFHIhvQ7ArxFiWt/jusFoacMfxdX3ExnWFPfYOctb96olpIIyN6eif5vx13knmW+0iE9upuO1fkPKms7Ym/XjXDsv79SJ+wVrs8iqguO1oXoxwPP/RRAKhK3pyhSIqKnCFeU7UIVHFFEcfOSHm5LtrDvqqTfUGdG2poGo26A0DOUfNqcItp66Xd7MeshZLgnO5GarO1uzx7XffSQveTZWKgolnsee18KNb6cSTmzaa5VxLgUUUG7tRtBuwbJJfXJCTm53zr1608H5gYUcPCqkM1qK2cj9jjDCLzSPyJGPZIMppXCRl+Z9jyheubLYYEznyFHgXwC3+a1qCJLxrsSLMJZEKRSvkQI8j0acoxEqUWgm4ANAbsaswH4bwzz46dU7OIy2Pmw2lJJ1dtAGdJESVgHe6wuAyQjyt9zcw8n1SLkxZYcXGwby7h4iAUoKnhOKziamDFiWVT93Sj0GhmOsRi7lPb0uy8Cjvhy+0/qH0hTotdomPHDf89vVLrciRXqnNIW2l/P9hUKYi/rhf/46ik/k6MFx0WGHL/bmQmnJmpM4HmIpgT8EV8yvU=
18 |   - secure: 1/TYMa53/TEqJ9GvuJSZTW4a4PO5n/+SASWrb4khg6CQhlBTOm/5Gc9M6d8dTruqzND2jyVzeqpU+IhqjACItNCGx/i3Vu7rPAC4Psk6Fq+O/aD7UndDp5wEVER4fCrVlkK5s5tua0pPICLeEoOw58nYHn2KC9HtTHY0qZevAzq3WiR6W2fedFgwchSVGm01l8aoefXeeBYWqygi2uZBqHGLUmlAICGFU7iIixIyzt78M5PhH/env/RBO4oKTLjb921J7k0QTI6oz/3IVeVmrPRCnR5cRNxNJdA+ZqugLzzx5AnQ4HuOkFYsDMIzE2ZQjDcz+AZ3TL+kbedYr814CcA5cT1TbX8UC8sLdPMT+CYEFaL8cyH5olf4JsiMcAh+uRqaBop5op+NbsB2Gfd6/WQeY+85ZKSgm/uiJfXlCn4u38juVGTAkFzBSti8S5iHJldxZyCGHm2JCS4kx3V+TCczeKtKtX2MnPulGUFfqzvQKs7MQQ8hSZ7z/5YCO/UYntuQXxyQpqtyKpRWGAxBSqfT3IFXyt2cKsGbCG+07hxDtaWNmIfUkhYGBqfgQGuEXqYb8VeA7icHyCJhpfMuiJpmsOtNLsi1QSGrl/+9ShUXXLaP/vTgoxiWc3VyQ5k65/zIYJPjT8tpX8zWGeLX4KQNf0GYILNqgsWA8bjh4ws=
19 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # License
 2 | 
 3 | Everything in this repo is BSD style license unless otherwise specified.
 4 | 
 5 | Copyright (c) 2016 The Polymer Authors. All rights reserved.
 6 | 
 7 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright
10 | notice, this list of conditions and the following disclaimer.
11 | * Redistributions in binary form must reproduce the above
12 | copyright notice, this list of conditions and the following disclaimer
13 | in the documentation and/or other materials provided with the
14 | distribution.
15 | * Neither the name of Google Inc. nor the names of its
16 | contributors may be used to endorse or promote products derived from
17 | this software without specific prior written permission.
18 | 
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 🚨 Moved to [`webcomponents/polyfills/packages/template`][1] 🚨
 2 | 
 3 | The [`webcomponents/template`][2] repo has been migrated to [`packages/template`][1] folder of the [`webcomponents/polyfills`][3] 🚝  *monorepo*.
 4 | 
 5 | We are *actively* working on migrating open Issues and PRs to the new repo. New Issues and PRs should be filed at [`webcomponents/polyfills`][3].
 6 | 
 7 | [1]: https://github.com/webcomponents/polyfills/tree/master/packages/template
 8 | [2]: https://github.com/webcomponents/template
 9 | [3]: https://github.com/webcomponents/polyfills
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@webcomponents/template",
 3 |   "version": "1.4.0",
 4 |   "description": "Minimal template polyfills needed by webcomponents.js",
 5 |   "main": "template.js",
 6 |   "directories": {
 7 |     "test": "tests"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/webcomponents/template.git"
12 |   },
13 |   "author": "The Polymer Authors",
14 |   "license": "BSD-3-Clause",
15 |   "bugs": {
16 |     "url": "https://github.com/webcomponents/template/issues"
17 |   },
18 |   "scripts": {
19 |     "test": "npm run lint && wct",
20 |     "lint": "eslint template.js tests/**/*.html"
21 |   },
22 |   "homepage": "http://webcomponents.org",
23 |   "devDependencies": {
24 |     "eslint": "^5.2.0",
25 |     "eslint-plugin-html": "^4.0.3",
26 |     "wct-browser-legacy": "^1.0.1",
27 |     "web-component-tester": "^6.7.1"
28 |   },
29 |   "publishConfig": {
30 |     "access": "public"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/template.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license
  3 |  * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
  4 |  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 |  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 |  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 |  * Code distributed by Google as part of the polymer project is also
  8 |  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 |  */
 10 | 
 11 | // minimal template polyfill
 12 | (function() {
 13 |   'use strict';
 14 | 
 15 |   var needsTemplate = (typeof HTMLTemplateElement === 'undefined');
 16 |   var brokenDocFragment = !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment);
 17 |   var needsDocFrag = false;
 18 | 
 19 |   // NOTE: Replace DocumentFragment to work around IE11 bug that
 20 |   // causes children of a document fragment modified while
 21 |   // there is a mutation observer to not have a parentNode, or
 22 |   // have a broken parentNode (!?!)
 23 |   if (/Trident/.test(navigator.userAgent)) {
 24 |     (function() {
 25 | 
 26 |       needsDocFrag = true;
 27 | 
 28 |       var origCloneNode = Node.prototype.cloneNode;
 29 |       Node.prototype.cloneNode = function cloneNode(deep) {
 30 |         var newDom = origCloneNode.call(this, deep);
 31 |         if (this instanceof DocumentFragment) {
 32 |           newDom.__proto__ = DocumentFragment.prototype;
 33 |         }
 34 |         return newDom;
 35 |       };
 36 | 
 37 |       // IE's DocumentFragment querySelector code doesn't work when
 38 |       // called on an element instance
 39 |       DocumentFragment.prototype.querySelectorAll = HTMLElement.prototype.querySelectorAll;
 40 |       DocumentFragment.prototype.querySelector = HTMLElement.prototype.querySelector;
 41 | 
 42 |       Object.defineProperties(DocumentFragment.prototype, {
 43 |         'nodeType': {
 44 |           get: function () {
 45 |             return Node.DOCUMENT_FRAGMENT_NODE;
 46 |           },
 47 |           configurable: true
 48 |         },
 49 | 
 50 |         'localName': {
 51 |           get: function () {
 52 |             return undefined;
 53 |           },
 54 |           configurable: true
 55 |         },
 56 | 
 57 |         'nodeName': {
 58 |           get: function () {
 59 |             return '#document-fragment';
 60 |           },
 61 |           configurable: true
 62 |         }
 63 |       });
 64 | 
 65 |       var origInsertBefore = Node.prototype.insertBefore;
 66 |       function insertBefore(newNode, refNode) {
 67 |         if (newNode instanceof DocumentFragment) {
 68 |           var child;
 69 |           while ((child = newNode.firstChild)) {
 70 |             origInsertBefore.call(this, child, refNode);
 71 |           }
 72 |         } else {
 73 |           origInsertBefore.call(this, newNode, refNode);
 74 |         }
 75 |         return newNode;
 76 |       }
 77 |       Node.prototype.insertBefore = insertBefore;
 78 | 
 79 |       var origAppendChild = Node.prototype.appendChild;
 80 |       Node.prototype.appendChild = function appendChild(child) {
 81 |         if (child instanceof DocumentFragment) {
 82 |           insertBefore.call(this, child, null);
 83 |         } else {
 84 |           origAppendChild.call(this, child);
 85 |         }
 86 |         return child;
 87 |       };
 88 | 
 89 |       var origRemoveChild = Node.prototype.removeChild;
 90 |       var origReplaceChild = Node.prototype.replaceChild;
 91 |       Node.prototype.replaceChild = function replaceChild(newChild, oldChild) {
 92 |         if (newChild instanceof DocumentFragment) {
 93 |           insertBefore.call(this, newChild, oldChild);
 94 |           origRemoveChild.call(this, oldChild);
 95 |         } else {
 96 |           origReplaceChild.call(this, newChild, oldChild);
 97 |         }
 98 |         return oldChild;
 99 |       };
100 | 
101 |       Document.prototype.createDocumentFragment = function createDocumentFragment() {
102 |         var frag = this.createElement('df');
103 |         frag.__proto__ = DocumentFragment.prototype;
104 |         return frag;
105 |       };
106 | 
107 |       var origImportNode = Document.prototype.importNode;
108 |       Document.prototype.importNode = function importNode(impNode, deep) {
109 |         deep = deep || false;
110 |         var newNode = origImportNode.call(this, impNode, deep);
111 |         if (impNode instanceof DocumentFragment) {
112 |           newNode.__proto__ = DocumentFragment.prototype;
113 |         }
114 |         return newNode;
115 |       };
116 |     })();
117 |   }
118 | 
119 |   // NOTE: we rely on this cloneNode not causing element upgrade.
120 |   // This means this polyfill must load before the CE polyfill and
121 |   // this would need to be re-worked if a browser supports native CE
122 |   // but not <template>.
123 |   var capturedCloneNode = Node.prototype.cloneNode;
124 |   var capturedCreateElement = Document.prototype.createElement;
125 |   var capturedImportNode = Document.prototype.importNode;
126 |   var capturedRemoveChild = Node.prototype.removeChild;
127 |   var capturedAppendChild = Node.prototype.appendChild;
128 |   var capturedReplaceChild = Node.prototype.replaceChild;
129 |   var capturedParseFromString = DOMParser.prototype.parseFromString;
130 |   var capturedHTMLElementInnerHTML = Object.getOwnPropertyDescriptor(window.HTMLElement.prototype, 'innerHTML') || {
131 |     /**
132 |      * @this {!HTMLElement}
133 |      * @return {string}
134 |      */
135 |     get: function() {
136 |       return this.innerHTML;
137 |     },
138 |     /**
139 |      * @this {!HTMLElement}
140 |      * @param {string}
141 |      */
142 |     set: function(text) {
143 |       this.innerHTML = text;
144 |     }
145 |   };
146 |   var capturedChildNodes = Object.getOwnPropertyDescriptor(window.Node.prototype, 'childNodes') || {
147 |     /**
148 |      * @this {!Node}
149 |      * @return {!NodeList}
150 |      */
151 |     get: function() {
152 |       return this.childNodes;
153 |     }
154 |   };
155 | 
156 |   var elementQuerySelectorAll = Element.prototype.querySelectorAll;
157 |   var docQuerySelectorAll = Document.prototype.querySelectorAll;
158 |   var fragQuerySelectorAll = DocumentFragment.prototype.querySelectorAll;
159 | 
160 |   var scriptSelector = 'script:not([type]),script[type="application/javascript"],script[type="text/javascript"]';
161 | 
162 |   function QSA(node, selector) {
163 |     // IE 11 throws a SyntaxError with `scriptSelector` if the node has no children due to the `:not([type])` syntax
164 |     if (!node.childNodes.length) {
165 |       return [];
166 |     }
167 |     switch (node.nodeType) {
168 |       case Node.DOCUMENT_NODE:
169 |         return docQuerySelectorAll.call(node, selector);
170 |       case Node.DOCUMENT_FRAGMENT_NODE:
171 |         return fragQuerySelectorAll.call(node, selector);
172 |       default:
173 |         return elementQuerySelectorAll.call(node, selector);
174 |     }
175 |   }
176 | 
177 |   // returns true if nested templates cannot be cloned (they cannot be on
178 |   // some impl's like Safari 8 and Edge)
179 |   // OR if cloning a document fragment does not result in a document fragment
180 |   var needsCloning = (function() {
181 |     if (!needsTemplate) {
182 |       var t = document.createElement('template');
183 |       var t2 = document.createElement('template');
184 |       t2.content.appendChild(document.createElement('div'));
185 |       t.content.appendChild(t2);
186 |       var clone = t.cloneNode(true);
187 |       return (clone.content.childNodes.length === 0 || clone.content.firstChild.content.childNodes.length === 0
188 |         || brokenDocFragment);
189 |     }
190 |   })();
191 | 
192 |   var TEMPLATE_TAG = 'template';
193 |   var PolyfilledHTMLTemplateElement = function() {};
194 | 
195 |   if (needsTemplate) {
196 | 
197 |     var contentDoc = document.implementation.createHTMLDocument('template');
198 |     var canDecorate = true;
199 | 
200 |     var templateStyle = document.createElement('style');
201 |     templateStyle.textContent = TEMPLATE_TAG + '{display:none;}';
202 | 
203 |     var head = document.head;
204 |     head.insertBefore(templateStyle, head.firstElementChild);
205 | 
206 |     /**
207 |       Provides a minimal shim for the <template> element.
208 |     */
209 |     PolyfilledHTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
210 | 
211 | 
212 |     // if elements do not have `innerHTML` on instances, then
213 |     // templates can be patched by swizzling their prototypes.
214 |     var canProtoPatch =
215 |       !(document.createElement('div').hasOwnProperty('innerHTML'));
216 | 
217 |     /**
218 |       The `decorate` method moves element children to the template's `content`.
219 |       NOTE: there is no support for dynamically adding elements to templates.
220 |     */
221 |     PolyfilledHTMLTemplateElement.decorate = function(template) {
222 |       // if the template is decorated or not in HTML namespace, return fast
223 |       if (template.content ||
224 |           template.namespaceURI !== document.documentElement.namespaceURI) {
225 |         return;
226 |       }
227 |       template.content = contentDoc.createDocumentFragment();
228 |       var child;
229 |       while ((child = template.firstChild)) {
230 |         capturedAppendChild.call(template.content, child);
231 |       }
232 |       // NOTE: prefer prototype patching for performance and
233 |       // because on some browsers (IE11), re-defining `innerHTML`
234 |       // can result in intermittent errors.
235 |       if (canProtoPatch) {
236 |         template.__proto__ = PolyfilledHTMLTemplateElement.prototype;
237 |       } else {
238 |         template.cloneNode = function(deep) {
239 |           return PolyfilledHTMLTemplateElement._cloneNode(this, deep);
240 |         };
241 |         // add innerHTML to template, if possible
242 |         // Note: this throws on Safari 7
243 |         if (canDecorate) {
244 |           try {
245 |             defineInnerHTML(template);
246 |             defineOuterHTML(template);
247 |           } catch (err) {
248 |             canDecorate = false;
249 |           }
250 |         }
251 |       }
252 |       // bootstrap recursively
253 |       PolyfilledHTMLTemplateElement.bootstrap(template.content);
254 |     };
255 | 
256 |     // Taken from https://github.com/jquery/jquery/blob/73d7e6259c63ac45f42c6593da8c2796c6ce9281/src/manipulation/wrapMap.js
257 |     var topLevelWrappingMap = {
258 |       'option': ['select'],
259 |       'thead': ['table'],
260 |       'col': ['colgroup', 'table'],
261 |       'tr': ['tbody', 'table'],
262 |       'th': ['tr', 'tbody', 'table'],
263 |       'td': ['tr', 'tbody', 'table']
264 |     };
265 | 
266 |     var getTagName = function(text) {
267 |       // Taken from https://github.com/jquery/jquery/blob/73d7e6259c63ac45f42c6593da8c2796c6ce9281/src/manipulation/var/rtagName.js
268 |       return ( /<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
269 |     };
270 | 
271 |     var defineInnerHTML = function defineInnerHTML(obj) {
272 |       Object.defineProperty(obj, 'innerHTML', {
273 |         get: function() {
274 |           return getInnerHTML(this);
275 |         },
276 |         set: function(text) {
277 |           // For IE11, wrap the text in the correct (table) context
278 |           var wrap = topLevelWrappingMap[getTagName(text)];
279 |           if (wrap) {
280 |             for (var i = 0; i < wrap.length; i++) {
281 |               text = '<' + wrap[i] + '>' + text + '</' + wrap[i] + '>';
282 |             }
283 |           }
284 |           contentDoc.body.innerHTML = text;
285 |           PolyfilledHTMLTemplateElement.bootstrap(contentDoc);
286 |           while (this.content.firstChild) {
287 |             capturedRemoveChild.call(this.content, this.content.firstChild);
288 |           }
289 |           var body = contentDoc.body;
290 |           // If we had wrapped, get back to the original node
291 |           if (wrap) {
292 |             for (var j = 0; j < wrap.length; j++) {
293 |               body = body.lastChild;
294 |             }
295 |           }
296 |           while (body.firstChild) {
297 |             capturedAppendChild.call(this.content, body.firstChild);
298 |           }
299 |         },
300 |         configurable: true
301 |       });
302 |     };
303 | 
304 |     var defineOuterHTML = function defineOuterHTML(obj) {
305 |       Object.defineProperty(obj, 'outerHTML', {
306 |         get: function() {
307 |           return '<' + TEMPLATE_TAG + '>' + this.innerHTML + '</' + TEMPLATE_TAG + '>';
308 |         },
309 |         set: function(innerHTML) {
310 |           if (this.parentNode) {
311 |             contentDoc.body.innerHTML = innerHTML;
312 |             var docFrag = this.ownerDocument.createDocumentFragment();
313 |             while (contentDoc.body.firstChild) {
314 |               capturedAppendChild.call(docFrag, contentDoc.body.firstChild);
315 |             }
316 |             capturedReplaceChild.call(this.parentNode, docFrag, this);
317 |           } else {
318 |             throw new Error("Failed to set the 'outerHTML' property on 'Element': This element has no parent node.");
319 |           }
320 |         },
321 |         configurable: true
322 |       });
323 |     };
324 | 
325 |     defineInnerHTML(PolyfilledHTMLTemplateElement.prototype);
326 |     defineOuterHTML(PolyfilledHTMLTemplateElement.prototype);
327 | 
328 |     /**
329 |       The `bootstrap` method is called automatically and "fixes" all
330 |       <template> elements in the document referenced by the `doc` argument.
331 |     */
332 |     PolyfilledHTMLTemplateElement.bootstrap = function bootstrap(doc) {
333 |       var templates = QSA(doc, TEMPLATE_TAG);
334 |       for (var i=0, l=templates.length, t; (i<l) && (t=templates[i]); i++) {
335 |         PolyfilledHTMLTemplateElement.decorate(t);
336 |       }
337 |     };
338 | 
339 |     // auto-bootstrapping for main document
340 |     document.addEventListener('DOMContentLoaded', function() {
341 |       PolyfilledHTMLTemplateElement.bootstrap(document);
342 |     });
343 | 
344 |     // Patch document.createElement to ensure newly created templates have content
345 |     Document.prototype.createElement = function createElement() {
346 |       var el = capturedCreateElement.apply(this, arguments);
347 |       if (el.localName === 'template') {
348 |         PolyfilledHTMLTemplateElement.decorate(el);
349 |       }
350 |       return el;
351 |     };
352 | 
353 |     DOMParser.prototype.parseFromString = function() {
354 |       var el = capturedParseFromString.apply(this, arguments);
355 |       PolyfilledHTMLTemplateElement.bootstrap(el);
356 |       return el;
357 |     };
358 | 
359 |     Object.defineProperty(HTMLElement.prototype, 'innerHTML', {
360 |       get: function() {
361 |         return getInnerHTML(this);
362 |       },
363 |       set: function(text) {
364 |         capturedHTMLElementInnerHTML.set.call(this, text);
365 |         PolyfilledHTMLTemplateElement.bootstrap(this);
366 |       },
367 |       configurable: true,
368 |       enumerable: true
369 |     });
370 | 
371 |     // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#escapingString
372 |     var escapeAttrRegExp = /[&\u00A0"]/g;
373 |     var escapeDataRegExp = /[&\u00A0<>]/g;
374 | 
375 |     var escapeReplace = function(c) {
376 |       switch (c) {
377 |         case '&':
378 |           return '&amp;';
379 |         case '<':
380 |           return '&lt;';
381 |         case '>':
382 |           return '&gt;';
383 |         case '"':
384 |           return '&quot;';
385 |         case '\u00A0':
386 |           return '&nbsp;';
387 |       }
388 |     };
389 | 
390 |     var escapeAttr = function(s) {
391 |       return s.replace(escapeAttrRegExp, escapeReplace);
392 |     };
393 | 
394 |     var escapeData = function(s) {
395 |       return s.replace(escapeDataRegExp, escapeReplace);
396 |     };
397 | 
398 |     var makeSet = function(arr) {
399 |       var set = {};
400 |       for (var i = 0; i < arr.length; i++) {
401 |         set[arr[i]] = true;
402 |       }
403 |       return set;
404 |     };
405 | 
406 |     // http://www.whatwg.org/specs/web-apps/current-work/#void-elements
407 |     var voidElements = makeSet([
408 |       'area',
409 |       'base',
410 |       'br',
411 |       'col',
412 |       'command',
413 |       'embed',
414 |       'hr',
415 |       'img',
416 |       'input',
417 |       'keygen',
418 |       'link',
419 |       'meta',
420 |       'param',
421 |       'source',
422 |       'track',
423 |       'wbr'
424 |     ]);
425 | 
426 |     var plaintextParents = makeSet([
427 |       'style',
428 |       'script',
429 |       'xmp',
430 |       'iframe',
431 |       'noembed',
432 |       'noframes',
433 |       'plaintext',
434 |       'noscript'
435 |     ]);
436 | 
437 |     /**
438 |      * @param {Node} node
439 |      * @param {Node} parentNode
440 |      * @param {Function=} callback
441 |      */
442 |     var getOuterHTML = function(node, parentNode, callback) {
443 |       switch (node.nodeType) {
444 |         case Node.ELEMENT_NODE: {
445 |           var tagName = node.localName;
446 |           var s = '<' + tagName;
447 |           var attrs = node.attributes;
448 |           for (var i = 0, attr; (attr = attrs[i]); i++) {
449 |             s += ' ' + attr.name + '="' + escapeAttr(attr.value) + '"';
450 |           }
451 |           s += '>';
452 |           if (voidElements[tagName]) {
453 |             return s;
454 |           }
455 |           return s + getInnerHTML(node, callback) + '</' + tagName + '>';
456 |         }
457 |         case Node.TEXT_NODE: {
458 |           var data = /** @type {Text} */ (node).data;
459 |           if (parentNode && plaintextParents[parentNode.localName]) {
460 |             return data;
461 |           }
462 |           return escapeData(data);
463 |         }
464 |         case Node.COMMENT_NODE: {
465 |           return '<!--' + /** @type {Comment} */ (node).data + '-->';
466 |         }
467 |         default: {
468 |           window.console.error(node);
469 |           throw new Error('not implemented');
470 |         }
471 |       }
472 |     };
473 | 
474 |     /**
475 |      * @param {Node} node
476 |      * @param {Function=} callback
477 |      */
478 |     var getInnerHTML = function(node, callback) {
479 |       if (node.localName === 'template') {
480 |         node =  /** @type {HTMLTemplateElement} */ (node).content;
481 |       }
482 |       var s = '';
483 |       var c$ = callback ? callback(node) : capturedChildNodes.get.call(node);
484 |       for (var i=0, l=c$.length, child; (i<l) && (child=c$[i]); i++) {
485 |         s += getOuterHTML(child, node, callback);
486 |       }
487 |       return s;
488 |     };
489 | 
490 |   }
491 | 
492 |   // make cloning/importing work!
493 |   if (needsTemplate || needsCloning) {
494 | 
495 |     PolyfilledHTMLTemplateElement._cloneNode = function _cloneNode(template, deep) {
496 |       var clone = capturedCloneNode.call(template, false);
497 |       // NOTE: decorate doesn't auto-fix children because they are already
498 |       // decorated so they need special clone fixup.
499 |       if (this.decorate) {
500 |         this.decorate(clone);
501 |       }
502 |       if (deep) {
503 |         // NOTE: use native clone node to make sure CE's wrapped
504 |         // cloneNode does not cause elements to upgrade.
505 |         capturedAppendChild.call(clone.content, capturedCloneNode.call(template.content, true));
506 |         // now ensure nested templates are cloned correctly.
507 |         fixClonedDom(clone.content, template.content);
508 |       }
509 |       return clone;
510 |     };
511 | 
512 |     // Given a source and cloned subtree, find <template>'s in the cloned
513 |     // subtree and replace them with cloned <template>'s from source.
514 |     // We must do this because only the source templates have proper .content.
515 |     var fixClonedDom = function fixClonedDom(clone, source) {
516 |       // do nothing if cloned node is not an element
517 |       if (!source.querySelectorAll) return;
518 |       // these two lists should be coincident
519 |       var s$ = QSA(source, TEMPLATE_TAG);
520 |       if (s$.length === 0) {
521 |         return;
522 |       }
523 |       var t$ = QSA(clone, TEMPLATE_TAG);
524 |       for (var i=0, l=t$.length, t, s; i<l; i++) {
525 |         s = s$[i];
526 |         t = t$[i];
527 |         if (PolyfilledHTMLTemplateElement && PolyfilledHTMLTemplateElement.decorate) {
528 |           PolyfilledHTMLTemplateElement.decorate(s);
529 |         }
530 |         capturedReplaceChild.call(t.parentNode, cloneNode.call(s, true), t);
531 |       }
532 |     };
533 | 
534 |     // make sure scripts inside of a cloned template are executable
535 |     var fixClonedScripts = function fixClonedScripts(fragment) {
536 |       var scripts = QSA(fragment, scriptSelector);
537 |       for (var ns, s, i = 0; i < scripts.length; i++) {
538 |         s = scripts[i];
539 |         ns = capturedCreateElement.call(document, 'script');
540 |         ns.textContent = s.textContent;
541 |         var attrs = s.attributes;
542 |         for (var ai = 0, a; ai < attrs.length; ai++) {
543 |           a = attrs[ai];
544 |           ns.setAttribute(a.name, a.value);
545 |         }
546 |         capturedReplaceChild.call(s.parentNode, ns, s);
547 |       }
548 |     };
549 | 
550 |     // override all cloning to fix the cloned subtree to contain properly
551 |     // cloned templates.
552 |     var cloneNode = Node.prototype.cloneNode = function cloneNode(deep) {
553 |       var dom;
554 |       // workaround for Edge bug cloning documentFragments
555 |       // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8619646/
556 |       if (!needsDocFrag && brokenDocFragment && this instanceof DocumentFragment) {
557 |         if (!deep) {
558 |           return this.ownerDocument.createDocumentFragment();
559 |         } else {
560 |           dom = importNode.call(this.ownerDocument, this, true);
561 |         }
562 |       } else if (this.nodeType === Node.ELEMENT_NODE &&
563 |                  this.localName === TEMPLATE_TAG &&
564 |                  this.namespaceURI == document.documentElement.namespaceURI) {
565 |         dom = PolyfilledHTMLTemplateElement._cloneNode(this, deep);
566 |       } else {
567 |         dom = capturedCloneNode.call(this, deep);
568 |       }
569 |       // template.content is cloned iff `deep`.
570 |       if (deep) {
571 |         fixClonedDom(dom, this);
572 |       }
573 |       return dom;
574 |     };
575 | 
576 |     // NOTE: we are cloning instead of importing <template>'s.
577 |     // However, the ownerDocument of the cloned template will be correct!
578 |     // This is because the native import node creates the right document owned
579 |     // subtree and `fixClonedDom` inserts cloned templates into this subtree,
580 |     // thus updating the owner doc.
581 |     var importNode = Document.prototype.importNode = function importNode(element, deep) {
582 |       deep = deep || false;
583 |       if (element.localName === TEMPLATE_TAG) {
584 |         return PolyfilledHTMLTemplateElement._cloneNode(element, deep);
585 |       } else {
586 |         var dom = capturedImportNode.call(this, element, deep);
587 |         if (deep) {
588 |           fixClonedDom(dom, element);
589 |           fixClonedScripts(dom);
590 |         }
591 |         return dom;
592 |       }
593 |     };
594 |   }
595 | 
596 |   if (needsTemplate) {
597 |     window.HTMLTemplateElement = PolyfilledHTMLTemplateElement;
598 |   }
599 | 
600 | })();
601 | 


--------------------------------------------------------------------------------
/tests/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "rules": {
 6 |     "strict": "off"
 7 |   },
 8 |   "globals": {
 9 |     "assert": true,
10 |     "sinon": true,
11 |     "WCT": true,
12 |     "fixture": true
13 |   }
14 | }


--------------------------------------------------------------------------------
/tests/basic.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 |   <head>
 13 |     <title>Template Test</title>
 14 |     <script src="../template.js"></script>
 15 |     <script src="../node_modules/wct-browser-legacy/browser.js"></script>
 16 |   </head>
 17 |   <body>
 18 |     <style>
 19 |       .container {
 20 |         display: flex;
 21 |       }
 22 |       .container > *{
 23 |         flex: 1;
 24 |       }
 25 |     </style>
 26 | 
 27 |     <div class="container">
 28 |       <template>
 29 |         <span id="content">Hello World!</span>
 30 |       </template>
 31 |     </div>
 32 | 
 33 |     <script>
 34 |       suite('Template', function() {
 35 |         var template;
 36 |         suiteSetup(function() {
 37 |           template = document.querySelector('template');
 38 |         });
 39 | 
 40 |         var canInnerHTML = (function() {
 41 |           var el = document.createElement('div');
 42 |           try {
 43 |             Object.defineProperty(el, 'innerHTML', {
 44 |               get: function(){}, // eslint-disable-line getter-return
 45 |               set: function(){}
 46 |             });
 47 |             return true;
 48 |           } catch(e) {
 49 |             return false;
 50 |           }
 51 |         })();
 52 | 
 53 |         function setupTemplate(template, string) {
 54 |           if (canInnerHTML) {
 55 |             template.innerHTML = string;
 56 |           } else {
 57 |             var el = document.createElement('div');
 58 |             el.innerHTML = string;
 59 |             var nodes = Array.prototype.slice.call(el.childNodes, 0);
 60 |             for (var i = 0; i < nodes.length; i++) {
 61 |               template.content.appendChild(nodes[i]);
 62 |             }
 63 |           }
 64 |         }
 65 | 
 66 |         test('No rendering', function() {
 67 |           var bcr = template.getBoundingClientRect();
 68 |           assert.equal(bcr.height, 0);
 69 |           assert.equal(bcr.width, 0);
 70 |         });
 71 | 
 72 |         test('content', function() {
 73 |           assert.equal(template.childNodes.length, 0, 'template children evacipated');
 74 |           assert.isDefined(template.content, 'template content exists');
 75 |           assert.equal(template.content.childNodes.length, 3, 'template content has expected number of nodes');
 76 |           var content = document.querySelector('#content');
 77 |           assert.isNull(content, 'template content not in document');
 78 |         });
 79 | 
 80 |         test('stamping', function() {
 81 |           document.body.appendChild(document.importNode(template.content, true));
 82 |           var content = document.querySelector('#content');
 83 |           assert.isDefined(content, 'template content stamped into document');
 84 |         });
 85 | 
 86 |         test('innerHTML', function() {
 87 |           if (!canInnerHTML) {
 88 |             this.skip();
 89 |           }
 90 |           var imp = document.createElement('template');
 91 |           assert.equal(imp.innerHTML, '');
 92 |           var s = 'pre<div>Hi</div><div>Bye</div>post';
 93 |           imp.innerHTML = s;
 94 |           assert.equal(imp.innerHTML, s);
 95 |           assert.equal(imp.content.childNodes.length, 4);
 96 |           assert.equal(imp.content.firstChild.textContent, 'pre');
 97 |           s = 'foo';
 98 |           imp.innerHTML = s;
 99 |           assert.equal(imp.innerHTML, s);
100 |           assert.equal(imp.content.childNodes.length, 1);
101 |           assert.equal(imp.content.firstChild.textContent, s);
102 | 
103 |           s = '-<->-"-&-';
104 |           var escaped = '-&lt;-&gt;-"-&amp;-';
105 |           var div = document.createElement('div');
106 |           imp.innerHTML = s;
107 |           div.innerHTML = s;
108 |           // innerHTML is properly escaped
109 |           assert.equal(imp.innerHTML, escaped);
110 |           assert.equal(imp.content.textContent, div.textContent);
111 |         });
112 | 
113 |         test('innerHTML (nested)', function() {
114 |           if (!canInnerHTML) {
115 |             this.skip();
116 |           }
117 |           var imp = document.createElement('template');
118 |           assert.equal(imp.innerHTML, '');
119 |           var s = 'pre<div><template>Hi</template></div><div><template>Bye</template></div>post';
120 |           imp.innerHTML = s;
121 |           assert.equal(imp.innerHTML, s);
122 |         });
123 | 
124 |         test('innerHTML (comments)', function() {
125 |           if (!canInnerHTML) {
126 |             this.skip();
127 |           }
128 |           var imp = document.createElement('template');
129 |           assert.equal(imp.innerHTML, '');
130 |           var s = '<!-- This is a comment -->';
131 |           imp.innerHTML = s;
132 |           assert.equal(imp.innerHTML, s);
133 |         });
134 | 
135 |         test('innerHTML (tr element)', function() {
136 |           if (!canInnerHTML) {
137 |             this.skip();
138 |           }
139 |           var imp = document.createElement('template');
140 |           assert.equal(imp.innerHTML, '');
141 |           var s = '<tr><td class="record"></td><td></td><td><span class="extra">nothing</span></td></tr>';
142 |           imp.innerHTML = s;
143 |           assert.equal(imp.innerHTML, s);
144 |         });
145 | 
146 |         test('innerHTML (td element)', function() {
147 |           if (!canInnerHTML) {
148 |             this.skip();
149 |           }
150 |           var imp = document.createElement('template');
151 |           assert.equal(imp.innerHTML, '');
152 |           var s = '<td class="record"><span class="extra">nothing</span></td>';
153 |           imp.innerHTML = s;
154 |           assert.equal(imp.innerHTML, s);
155 |         });
156 | 
157 |         test('innerHTML (th element)', function() {
158 |           if (!canInnerHTML) {
159 |             this.skip();
160 |           }
161 |           var imp = document.createElement('template');
162 |           assert.equal(imp.innerHTML, '');
163 |           var s = '<th class="record"><span class="extra">nothing</span></th>';
164 |           imp.innerHTML = s;
165 |           assert.equal(imp.innerHTML, s);
166 |         });
167 | 
168 |         test('innerHTML (col element)', function() {
169 |           if (!canInnerHTML) {
170 |             this.skip();
171 |           }
172 |           var imp = document.createElement('template');
173 |           assert.equal(imp.innerHTML, '');
174 |           var s = '<col style="background-color: rgb(0, 0, 0);"><col span="2">';
175 |           imp.innerHTML = s;
176 |           assert.equal(imp.innerHTML, s);
177 |         });
178 | 
179 |         test('innerHTML (thead element)', function() {
180 |           if (!canInnerHTML) {
181 |             this.skip();
182 |           }
183 |           var imp = document.createElement('template');
184 |           assert.equal(imp.innerHTML, '');
185 |           var s = '<thead><tr><th>Header content 1</th><th>Header content 2</th></tr></thead>';
186 |           imp.innerHTML = s;
187 |           assert.equal(imp.innerHTML, s);
188 |         });
189 | 
190 |         test('innerHTML (option element)', function() {
191 |           if (!canInnerHTML) {
192 |             this.skip();
193 |           }
194 |           var imp = document.createElement('template');
195 |           assert.equal(imp.innerHTML, '');
196 |           var s = '<option value="one">One</option><option value="two">two</option>';
197 |           imp.innerHTML = s;
198 |           assert.equal(imp.innerHTML, s);
199 |         });
200 | 
201 |         test('clone', function() {
202 |           var imp = document.createElement('template');
203 |           var s = '<div>Hi</div>';
204 |           setupTemplate(imp, s);
205 |           var clone = imp.cloneNode();
206 |           assert.notEqual(clone, imp, 'element is not cloned');
207 |           assert.isDefined(clone.content, 'cloned template content dne');
208 |           assert.equal(clone.content.childNodes.length, 0,
209 |               'non-deep cloned template.content is not empty');
210 |           var deepClone = imp.cloneNode(true);
211 |           assert.equal(deepClone.content.childNodes.length, 1,
212 |               'deep cloned template.content is empty');
213 |           assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
214 |               'cloned content is not different from source');
215 |         });
216 | 
217 |         test('clone nested', function() {
218 |           var imp = document.createElement('template');
219 |           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
220 |           setupTemplate(imp, s);
221 |           var clone = imp.cloneNode(false);
222 |           assert.notEqual(clone, imp, 'element is not cloned');
223 |           assert.isDefined(clone.content, 'cloned template content dne');
224 |           assert.equal(clone.content.childNodes.length, 0,
225 |               'non-deep cloned template.content is not empty');
226 |           var deepClone = imp.cloneNode(true);
227 |           assert.equal(deepClone.content.childNodes.length, 2,
228 |               'deep cloned template.content is empty');
229 |           assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
230 |               'cloned content is not different from source');
231 |           var nested = deepClone.content.lastChild;
232 |           assert.isDefined(nested.content, 'nested cloned template content dne');
233 |           assert.equal(nested.content.childNodes.length, 2,
234 |               'deep cloned template.content is empty');
235 |           nested = nested.content.lastChild;
236 |           assert.isDefined(nested, 'nested cloned template content dne');
237 |           assert.equal(nested.content.childNodes.length, 2,
238 |               'deep cloned template.content is empty');
239 |           nested = nested.content.lastChild;
240 |           assert.isDefined(nested, 'nested cloned template content dne');
241 |           assert.equal(nested.content.childNodes.length, 1,
242 |               'deep cloned template.content is empty');
243 |         });
244 | 
245 |         test('clone node containing templates', function() {
246 |           var imp = document.createElement('div');
247 |           var t = document.createElement('template');
248 |           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
249 |           setupTemplate(t, s);
250 |           imp.appendChild(t);
251 |           var impClone = imp.cloneNode(true);
252 |           imp = imp.firstChild;
253 |           var deepClone = impClone.firstChild;
254 |           assert.equal(deepClone.content.childNodes.length, 2,
255 |               'deep cloned template.content is empty');
256 |           assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
257 |               'cloned content is not different from source');
258 |           var nested = deepClone.content.lastChild;
259 |           assert.isDefined(nested.content, 'nested cloned template content dne');
260 |           assert.equal(nested.content.childNodes.length, 2,
261 |               'deep cloned template.content is empty');
262 |           nested = nested.content.lastChild;
263 |           assert.isDefined(nested, 'nested cloned template content dne');
264 |           assert.equal(nested.content.childNodes.length, 2,
265 |               'deep cloned template.content is empty');
266 |           nested = nested.content.lastChild;
267 |           assert.isDefined(nested, 'nested cloned template content dne');
268 |           assert.equal(nested.content.childNodes.length, 1,
269 |               'deep cloned template.content is empty');
270 |         });
271 | 
272 |         test('importNode', function() {
273 |           var imp = document.createElement('template');
274 |           var s = '<div>Hi</div>';
275 |           setupTemplate(imp, s);
276 |           var clone = document.importNode(imp, false);
277 |           assert.notEqual(clone, imp, 'element is not cloned');
278 |           assert.isDefined(clone.content, 'cloned template content dne');
279 |           assert.equal(clone.content.childNodes.length, 0,
280 |               'non-deep cloned template.content is not empty');
281 |           var deepClone = document.importNode(imp, true);
282 |           assert.equal(deepClone.content.childNodes.length, 1,
283 |               'deep cloned template.content is empty');
284 |           assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
285 |               'cloned content is not different from source');
286 |         });
287 | 
288 |         test('importNode: nested', function() {
289 |           var imp = document.createElement('template');
290 |           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
291 |           setupTemplate(imp, s);
292 |           var clone = document.importNode(imp, false);
293 |           assert.notEqual(clone, imp, 'element is not cloned');
294 |           assert.isDefined(clone.content, 'cloned template content dne');
295 |           assert.equal(clone.content.childNodes.length, 0,
296 |               'non-deep cloned template.content is not empty');
297 |           var deepClone = document.importNode(imp, true);
298 |           assert.equal(deepClone.content.childNodes.length, 2,
299 |               'deep cloned template.content is empty');
300 |           assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
301 |               'cloned content is not different from source');
302 |           var nested = deepClone.content.lastChild;
303 |           assert.isDefined(nested.content, 'nested cloned template content dne');
304 |           assert.equal(nested.content.childNodes.length, 2,
305 |               'deep cloned template.content is empty');
306 |           nested = nested.content.lastChild;
307 |           assert.isDefined(nested, 'nested cloned template content dne');
308 |           assert.equal(nested.content.childNodes.length, 2,
309 |               'deep cloned template.content is empty');
310 |           nested = nested.content.lastChild;
311 |           assert.isDefined(nested, 'nested cloned template content dne');
312 |           assert.equal(nested.content.childNodes.length, 1,
313 |               'deep cloned template.content is empty');
314 |         });
315 | 
316 |         test('importNode: element containing nested templates', function() {
317 |           var imp = document.createElement('div');
318 |           var t = document.createElement('template');
319 |           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
320 |           setupTemplate(t, s);
321 |           imp.appendChild(t);
322 |           var impClone = document.importNode(imp, true);
323 |           imp = imp.firstChild;
324 |           var deepClone = impClone.firstChild;
325 |           assert.equal(deepClone.content.childNodes.length, 2,
326 |               'deep cloned template.content is empty');
327 |           assert.notEqual(imp.content.firstChild, deepClone.content.firstChild,
328 |               'cloned content is not different from source');
329 |           var nested = deepClone.content.lastChild;
330 |           assert.isDefined(nested.content, 'nested cloned template content dne');
331 |           assert.equal(nested.content.childNodes.length, 2,
332 |               'deep cloned template.content is empty');
333 |           nested = nested.content.lastChild;
334 |           assert.isDefined(nested, 'nested cloned template content dne');
335 |           assert.equal(nested.content.childNodes.length, 2,
336 |               'deep cloned template.content is empty');
337 |           nested = nested.content.lastChild;
338 |           assert.isDefined(nested, 'nested cloned template content dne');
339 |           assert.equal(nested.content.childNodes.length, 1,
340 |               'deep cloned template.content is empty');
341 |         });
342 | 
343 |         test('importNode: templates have proper owner document', function() {
344 |           var doc = document.implementation.createHTMLDocument('');
345 |           var imp = doc.createElement('div');
346 |           var t = doc.createElement('template');
347 |           var s = 'a<template id="a">b<template id="b">c<template id="c">d</template></template></template>';
348 |           t.innerHTML = s;
349 |           imp.appendChild(t);
350 |           var impClone = document.importNode(imp, true);
351 |           imp = imp.firstChild;
352 |           var deepClone = impClone.firstChild;
353 |           assert.notEqual(imp.ownerDocument, document);
354 |           assert.equal(impClone.ownerDocument, document);
355 |           assert.equal(deepClone.ownerDocument, document);
356 |         });
357 | 
358 |         test('outerHTML', function() {
359 |           var t = document.createElement('template');
360 |           setupTemplate(t, '<div>foo</div>');
361 |           assert.equal(t.outerHTML, '<template><div>foo</div></template>');
362 |           document.body.appendChild(t);
363 |           t.outerHTML = '<div>replaced</div>';
364 |           assert.equal(t.parentNode, null);
365 |           var replaced = document.body.lastElementChild;
366 |           assert.equal(replaced.outerHTML, '<div>replaced</div>');
367 |         });
368 | 
369 |         test('scripts added to template execute when stamped', function() {
370 |           var t = document.createElement('template');
371 |           var script = document.createElement('script');
372 |           script.textContent = 'window.executedTemplateScript=true';
373 |           t.content.appendChild(script);
374 | 
375 |           document.body.appendChild(document.importNode(t.content, true));
376 | 
377 |           assert.isDefined(window.executedTemplateScript, 'script should have executed but did not');
378 |         });
379 | 
380 |         test('importing empty template content works', function() {
381 |           var t = document.createElement('template');
382 |           document.importNode(t.content, true);
383 |         });
384 | 
385 |         test('can work with nested templates in a svg context (importNode)', function() {
386 |           var svgNamespace = 'http://www.w3.org/2000/svg';
387 |           var doc = document.implementation.createHTMLDocument('');
388 |           var imp = doc.createElement('div');
389 |           var t = document.createElement('template');
390 |           t.innerHTML = '<svg><template><circle cx="150" cy="150" r="100" fill="blue" /></template></svg>';
391 |           imp.appendChild(t);
392 | 
393 |           var impClone = document.importNode(imp, true);
394 |           imp = imp.firstChild;
395 |           var deepClone = impClone.firstChild;
396 | 
397 |           var svg = deepClone.content.firstChild;
398 |           assert.equal(svg.namespaceURI, svgNamespace);
399 | 
400 |           var svgTemplate = svg.firstChild;
401 |           assert.equal(svgTemplate.namespaceURI, svgNamespace);
402 |           assert.equal(svgTemplate.firstChild.namespaceURI, svgNamespace);
403 |         });
404 | 
405 |         test('can work with nested templates in a svg context (cloneNode)', function() {
406 |           var svgNamespace = 'http://www.w3.org/2000/svg';
407 |           var doc = document.implementation.createHTMLDocument('');
408 |           var imp = doc.createElement('div');
409 |           var t = document.createElement('template');
410 |           t.innerHTML = '<svg><template><circle cx="150" cy="150" r="100" fill="blue" /></template></svg>';
411 |           imp.appendChild(t);
412 | 
413 |           var impClone = imp.cloneNode(true);
414 |           imp = imp.firstChild;
415 |           var deepClone = impClone.firstChild;
416 | 
417 |           var svg = deepClone.content.firstChild;
418 |           assert.equal(svg.namespaceURI, svgNamespace);
419 | 
420 |           var svgTemplate = svg.firstChild;
421 |           assert.equal(svgTemplate.namespaceURI, svgNamespace);
422 |           assert.equal(svgTemplate.firstChild.namespaceURI, svgNamespace);
423 |         });
424 | 
425 |         test('DOMParser constructs correct templates', function() {
426 |           var DOM = (new DOMParser).parseFromString("<template></template>", "text/html");
427 |           assert.isTrue(DOM.querySelector("template") instanceof HTMLTemplateElement);
428 |         });
429 | 
430 |         test('innerHTML on regular HTMLElement upgrades nested template', function() {
431 |           var container = document.createElement('div');
432 |           assert.equal(container.innerHTML, '');
433 |           var innerHTML = "<template><span>In template</span></template>";
434 |           container.innerHTML = innerHTML;
435 |           assert.equal(container.innerHTML, innerHTML);
436 |           assert.isTrue(container.firstChild instanceof HTMLTemplateElement);
437 |           assert.isOk(container.firstChild.content);
438 |           assert.isTrue(container.firstChild.content.firstChild instanceof HTMLSpanElement);
439 |         });
440 |       });
441 |     </script>
442 |   </body>
443 | </html>
444 | 


--------------------------------------------------------------------------------
/tests/document-fragment.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 |   <head>
 13 |     <title>Template Test</title>
 14 |     <script src="../template.js"></script>
 15 |     <script src="../node_modules/wct-browser-legacy/browser.js"></script>
 16 |   </head>
 17 |   <body>
 18 |     <script>
 19 |       suite('Document Fragment', function() {
 20 |         test('createDocumentFragment', function() {
 21 |           var frag = document.createDocumentFragment();
 22 |           assert.equal(frag.nodeType, Node.DOCUMENT_FRAGMENT_NODE);
 23 |           assert.instanceOf(frag, DocumentFragment);
 24 |         });
 25 | 
 26 |         test('localName', function() {
 27 |           var frag = document.createDocumentFragment();
 28 |           // may be null or undefined depending on browser vendor
 29 |           assert(frag.localName == null);
 30 |         });
 31 | 
 32 |         test('nodeType', function() {
 33 |           var frag = document.createDocumentFragment();
 34 |           assert.equal(frag.nodeType, Node.DOCUMENT_FRAGMENT_NODE);
 35 |         });
 36 | 
 37 |         test('nodeName', function() {
 38 |           var frag = document.createDocumentFragment();
 39 |           assert.equal(frag.nodeName, '#document-fragment');
 40 |         });
 41 | 
 42 |         test('tagName', function() {
 43 |           var frag = document.createDocumentFragment();
 44 |           assert(frag.tagName == null);
 45 |         });
 46 | 
 47 |         test('cloneNode', function() {
 48 |           var frag = document.createDocumentFragment();
 49 |           var child = document.createElement('div');
 50 |           var grandChild = document.createElement('span');
 51 |           grandChild.textContent = 'Hi!';
 52 |           child.appendChild(grandChild);
 53 |           frag.appendChild(child);
 54 |           var clone = frag.cloneNode();
 55 |           assert.equal(frag.childNodes.length, 1);
 56 |           assert.equal(clone.childNodes.length, 0);
 57 |           clone = frag.cloneNode(true);
 58 |           assert.equal(clone.childNodes.length, 1);
 59 |           assert.equal(clone.firstChild.childNodes.length, 1);
 60 |           assert.equal(clone.firstChild.firstChild.textContent, 'Hi!');
 61 |         });
 62 | 
 63 |         test('importNode', function() {
 64 |           var otherDoc = document.implementation.createHTMLDocument('other');
 65 |           var frag = otherDoc.createDocumentFragment();
 66 |           var child = otherDoc.createElement('div');
 67 |           child.innerHTML = '<span>foo!</span>';
 68 |           frag.appendChild(child);
 69 |           var newFrag;
 70 |           // Edge 14 throws NotSupportedError with importNode(docFrag, false) for some reason
 71 |           if (!navigator.userAgent.match('Edge/14')) {
 72 |             newFrag = document.importNode(frag, false);
 73 |             assert.equal(newFrag.ownerDocument, document);
 74 |             assert.equal(newFrag.childNodes.length, 0);
 75 |           }
 76 |           newFrag = document.importNode(frag, true);
 77 |           assert.equal(newFrag.childNodes.length, 1);
 78 |           assert.equal(newFrag.childNodes[0].innerHTML, '<span>foo!</span>');
 79 |         });
 80 | 
 81 |         test('appendChild with DocumentFragment', function() {
 82 |           var div = document.createElement('div');
 83 |           var frag = document.createDocumentFragment();
 84 |           var child = document.createElement('div');
 85 |           child.innerHTML = '<span>foo!</span>';
 86 |           frag.appendChild(child);
 87 |           div.appendChild(frag);
 88 |           assert.equal(div.innerHTML, '<div><span>foo!</span></div>');
 89 |         });
 90 | 
 91 |         test('insertBefore with DocumentFragment', function() {
 92 |           var div = document.createElement('div');
 93 |           var frag = document.createDocumentFragment();
 94 |           var child = document.createElement('div');
 95 |           child.innerHTML = '<span>foo!</span>';
 96 |           frag.appendChild(child);
 97 |           div.innerHTML = '<bar></bar>';
 98 |           div.insertBefore(frag, div.firstChild);
 99 |           assert.equal(div.innerHTML, '<div><span>foo!</span></div><bar></bar>');
100 |         });
101 | 
102 |         test('replaceChild with DocumentFragment', function() {
103 |           var div = document.createElement('div');
104 |           var frag = document.createDocumentFragment();
105 |           var child = document.createElement('div');
106 |           child.innerHTML = '<span>foo!</span>';
107 |           frag.appendChild(child);
108 |           div.innerHTML = '<bar></bar>';
109 |           div.replaceChild(frag, div.firstChild);
110 |           assert.equal(div.innerHTML, '<div><span>foo!</span></div>');
111 |         });
112 |       });
113 |     </script>
114 |   </body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/tests/runner.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | 
12 | <title>Template Tests</title>
13 | <meta charset="utf-8">
14 | <script src="../node_modules/wct-browser-legacy/browser.js"></script>
15 | 
16 | <script>
17 |   var suites = [
18 |     'basic.html',
19 |     'document-fragment.html'
20 |   ];
21 | 
22 |   WCT.loadSuites(suites);
23 | </script>
24 | 


--------------------------------------------------------------------------------
/wct.conf.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "suites": ["tests/runner.html"],
 3 |   "npm": true,
 4 |   "clientOptions": {
 5 |     "environmentImports": []
 6 |   },
 7 |   "plugins": {
 8 |     "local": {
 9 |       "browserOptions": {
10 |         "chrome": [
11 |           "no-sandbox"
12 |         ]
13 |       }
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------