Hide polyfill templates from rendering

Fixes #481
This commit is contained in:
Daniel Freedman
2016-01-28 11:35:54 -08:00
parent 6d0f05a7f0
commit cee5845a5b
2 changed files with 26 additions and 3 deletions

View File

@@ -17,6 +17,12 @@ if (typeof HTMLTemplateElement === 'undefined') {
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.
*/

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() {
@@ -63,6 +74,12 @@
assert.equal(imp.innerHTML, escaped);
assert.equal(imp.content.childNodes.length, div.childNodes.length);
});
test('No rendering', function() {
var bcr = template.getBoundingClientRect();
assert.equal(bcr.height, 0);
assert.equal(bcr.width, 0);
});
});
</script>
</body>