jlengrand/webcomponentsjs
1
0
Fork 0
mirror of https://github.com/jlengrand/webcomponentsjs.git synced 2026-03-10 08:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #483 from webcomponents/hide-template

Browse Source 
Hide polyfill templates from rendering
This commit is contained in:
Daniel Freedman
2016-02-18 16:22:38 -08:00
parent d72f57d8d1 f33444f0de
commit 84c6c670d1
3 changed files with 26 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Template/Template.js
View File

@@ -33,6 +33,12 @@
var contentDoc = document.implementation.createHTMLDocument('template');
var canDecorate = true;
var templateStyle = document.createElement('style');
templateStyle.textContent = TEMPLATE_TAG + '{display:none;}';
var head = document.head;
head.insertBefore(templateStyle, head.firstElementChild);
/**
Provides a minimal shim for the <template> element.
*/

72
tests/Template/html/Template.html
View File

@@ -1,72 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
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
-->
<html>
<head>
<title>Template Test</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../src/Template/Template.js"></script>
</head>
<body>
<template>
<span id="content">Hello World!</span>
</template>
<script>
addEventListener('DOMContentLoaded', function() {
var template = document.querySelector('template');
chai.assert.equal(template.childNodes.length, 0, 'template children evacipated');
chai.assert.isDefined(template.content, 'template content exists');
chai.assert.equal(template.content.childNodes.length, 3, 'template content has expected number of nodes');
var content = document.querySelector('#content');
chai.assert.isNull(content, 'template content not in document');
document.body.appendChild(document.importNode(template.content, true));
content = document.querySelector('#content');
chai.assert.isDefined(content, 'template content stamped into document');
var imp = document.createElement('template');
window.imp = imp;
chai.assert.equal(imp.innerHTML, '');
var s = 'pre<div>Hi</div><div>Bye</div>post';
imp.innerHTML = s;
chai.assert.equal(imp.innerHTML, s);
chai.assert.equal(imp.content.childNodes.length, 4);
chai.assert.equal(imp.content.firstChild.textContent, 'pre');
s = 'foo';
imp.innerHTML = s;
chai.assert.equal(imp.innerHTML, s);
chai.assert.equal(imp.content.childNodes.length, 1);
chai.assert.equal(imp.content.firstChild.textContent, s);
s = 'pre<template><div id="inert"></div></template>post';
imp.innerHTML = s;
// NOTE: we don't support reading nested template content via innerHTML,
// only setting it, hence the following won't work:
// chai.assert.equal(imp.innerHTML, s);
chai.assert.equal(imp.content.childNodes.length, 3);
chai.assert.equal(imp.content.childNodes[0].textContent, 'pre');
chai.assert.equal(imp.content.childNodes[1].content.childNodes.length, 1);
chai.assert.equal(imp.content.childNodes[1].content.firstChild.id, 'inert');
chai.assert.equal(imp.content.childNodes[2].textContent, 'post');
s = '-<->-"-&-';
var escaped = '-&lt;-&gt;-"-&amp;-';
var div = document.createElement('div');
div.innerHTML = s
imp.innerHTML = s;
// innerHTML is properly escaped
chai.assert.equal(imp.innerHTML, escaped);
chai.assert.equal(imp.content.childNodes.length, div.childNodes.length);
done();
});
</script>
</body>
</html>

23
tests/Template/tests.html
View File

@@ -15,9 +15,20 @@
<script src="../../../web-component-tester/browser.js"></script>
</head>
<body>
<template>
<span id="content">Hello World!</span>
</template>
<style>
.container {
display: flex;
}
.container > *{
flex: 1;
}
</style>
<div class="container">
<template>
<span id="content">Hello World!</span>
</template>
</div>
<script>
suite('Template', function() {
@@ -26,6 +37,12 @@
template = document.querySelector('template');
});
test('No rendering', function() {
var bcr = template.getBoundingClientRect();
assert.equal(bcr.height, 0);
assert.equal(bcr.width, 0);
});
test('content', function() {
assert.equal(template.childNodes.length, 0, 'template children evacipated');
assert.isDefined(template.content, 'template content exists');