@webcomponents/webcomponentsjs
Version:
Web Components Polyfills
70 lines (61 loc) • 2.7 kB
HTML
<!--
@license
Copyright (c) 2017 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>Integration Test</title>
<script>
if (window.customElements) {
var script = document.createElement('script');
script.src = '../custom-elements-es5-adapter.js';
document.write(script.outerHTML);
}
</script>
<script src="../webcomponents-loader.js"></script>
<script src="./wct-config.js"></script>
<script src="../node_modules/wct-browser-legacy/browser.js"></script>
<script src="imports/simple-element-es5.js" type="module"></script>
</head>
<body>
<!-- Don't break this into multiple lines or you'll have to count text nodes -->
<simple-element id="basic"><span>Light DOM</span></simple-element>
<script>
suite('integration es5', function() {
var el;
setup(function() {
el = document.querySelector('#basic');
});
test('element is imported & upgraded', function() {
assert.equal(el.bestName, 'batman',
'doesn\'t have property set in constructor');
});
test('element has shadow DOM content', function() {
var shadowRoot = el.shadowRoot;
assert.ok(shadowRoot, 'does not have a shadow root');
assert.equal(shadowRoot.querySelector('p').textContent, 'Shadow DOM',
'does not have <p> in the shadow dom');
assert.equal(getComputedStyle(shadowRoot.querySelector('p')).color, 'rgb(255, 0, 0)',
'does not style <p> in the shadow dom');
});
test('element has distributed content', function() {
var slot = el.shadowRoot.querySelector('slot');
assert.ok(slot, 'does not have a slot');
var distributedNodes = slot.assignedNodes()
assert.equal(distributedNodes.length, 1,
'does not have exactly one element distributed');
assert.equal(distributedNodes[0].textContent, 'Light DOM',
'does not have the right content distributed');
assert.equal(getComputedStyle(distributedNodes[0]).color, 'rgb(0, 0, 255)',
'does not style light dom');
});
});
</script>
</body>
</html>