joicomponents
Version:
Design patterns to build native web components
103 lines (92 loc) • 4.34 kB
HTML
<html lang="en">
<head>
<script> /** Polyfill code **/
//Setup: declare the function for loading script sync
function loadScriptSync(url, onAsyncLoadAsString) {
var newScript = document.createElement('script');
newScript.src = url;
onAsyncLoadAsString && newScript.setAttribute("onload", onAsyncLoadAsString);
document.write(newScript.outerHTML);
}
//Setup: add methods for pausing customElements polyfill
window.WebComponents = window.WebComponents || {};
window.WebComponents.stopCEPolyfill = function(){
if(window.customElements && customElements.polyfillWrapFlushCallback){
customElements.polyfillWrapFlushCallback(function(){});
if (document.readyState === "loading")
document.addEventListener("DOMContentLoaded", function(){customElements.upgrade(document);});
}
};
window.WebComponents.startCEPolyfill = function(){
if(window.customElements && customElements.polyfillWrapFlushCallback){
customElements.polyfillWrapFlushCallback(function(flush){flush();});
customElements.upgrade(document);
}
};
//step 1: feature detection
var CE = window.customElements;
var SD = 'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype;
var ES6 = window.Promise && Array.from && window.URL && window.Symbol;
var TE = !(function() {
// no real <template> because no `content` property (IE and older browsers)
var t = document.createElement('template');
if (!('content' in t)) {
return true;
}
// broken doc fragment (older Edge)
if (!(t.content.cloneNode() instanceof DocumentFragment)) {
return true;
}
// broken <template> cloning (Edge up to at least version 17)
var t2 = document.createElement('template');
t2.content.appendChild(document.createElement('div'));
t.content.appendChild(t2);
var clone = t.cloneNode(true);
return clone.content.childNodes.length === 0 ||
clone.content.firstChild.content.childNodes.length === 0;
})();
//step 2: load polyfill async based on feature detection
const base = "https://rawgit.com/webcomponents/webcomponentsjs/master/bundles/";
if (CE && SD && TE && ES6) { //[1]
} else if (!CE && SD && TE && ES6) {
loadScriptSync(base + "webcomponents-ce.js", "WebComponents.stopCEPolyfill();");
} else if (!CE && !SD && TE && ES6) {
loadScriptSync(base + "webcomponents-sd-ce.js", "WebComponents.stopCEPolyfill();");
} else { /*if (!CE && !SD && !TE && !ES6) {*/
loadScriptSync(base + "webcomponents-sd-ce-pf.js",
"HTMLTemplateElement.bootstrap(document); WebComponents.stopCEPolyfill();");
}
//step 3: restart the customElements polyfill on DOMContentLoaded
window.addEventListener("DOMContentLoaded", function(){WebComponents.startCEPolyfill();});
</script>
<meta charset="UTF-8">
<title>Test Of Reactive Mixins for HTMLElement</title>
<script src="https://unpkg.com/chai@4.1.2/chai.js"></script>
<script src="https://unpkg.com/mocha@4.0.1/mocha.js"></script>
<link href="https://unpkg.com/mocha@4.0.1/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha">Mocha</div>
<script>
mocha.setup('bdd');
var assert = chai.assert;
var expect = chai.expect;
var should = chai.should();
</script>
<script type="module" src="slot/SlotchangeMixinTest.js"></script>
<script type="module" src="slot/GentleMomTest.js"></script>
<script type="module" src="slot/BlueFrameTest.js"></script>
<script type="module" src="fling/FlingEventMixinTest.js"></script>
<script type="module" src="resize/ResizeMixinTest.js"></script>
<script type="module">
// mocha.checkLeaks();
mocha.run();
</script>
<iframe src="route/route1.html" height="440px" frameborder="0">here comes a test relying on html being loaded</iframe>
<iframe src="slot/Slot1.html" height="440px" frameborder="0">here comes a test relying on html being loaded</iframe>
<iframe src="fling/Fling1.html" height="440px" frameborder="0">here comes a test relying on html being loaded</iframe>
<iframe src="fling/Fling2.html" height="440px" frameborder="0">here comes a test relying on html being loaded</iframe>
<iframe src="pinch/pinch1.html" height="440px" frameborder="0">here comes a test relying on html being loaded</iframe>
</body>
</html>