@polymer/polymer
Version:
The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to
124 lines (109 loc) • 3.65 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>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>
<dom-module id="shared-styles">
<template>
<style>
#zot {
border: 1px solid black;
}
</style>
</template>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#foo {
border: 2px solid green;
}
</style>
<style>
#bar {
border: 3px solid orange;
}
</style>
<div id="foo">foo</div>
<div id="bar">bar</div>
</template>
</dom-module>
<dom-module id="my-element2">
<template>
<style include="shared-styles">
#zug {
border: 4px solid red;
}
</style>
<div id="zug">zug</div>
<div id="zot">zot</div>
</template>
<script>
</script>
</dom-module>
<script>
suite('elements including multiple styles', function() {
suiteSetup(function() {
const skip = window.ShadyDOM || !window.Polymer;
if (skip) {
this.skip();
} else {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
class MyElement2 extends MyElement {
static get is() { return 'my-element2'; }
static get template() {
Object.getPrototypeOf(this.prototype).constructor.template;
const t = Polymer.DomModule.import(MyElement2.is, 'template');
const superT = MyElement.template;
t.content.insertBefore(superT.content.cloneNode(true), t.content.firstElementChild.nextElementSibling);
return t;
}
}
customElements.define(MyElement2.is, MyElement2);
}
});
function assertComputed(element, value, property, pseudo) {
var computed = getComputedStyle(element, pseudo);
property = property || 'border-top-width';
if (Array.isArray(value)) {
assert.oneOf(computed[property], value, 'computed style incorrect for ' + property);
} else {
assert.equal(computed[property], value, 'computed style incorrect for ' + property);
}
}
test('multiple styles preserved separately in element root and apply', function() {
const e = document.createElement('my-element');
document.body.appendChild(e);
const styles = e.shadowRoot.querySelectorAll('style');
assert.equal(styles.length, 2);
assertComputed(e.$.foo, '2px');
assertComputed(e.$.bar, '3px');
});
test('super class and included styles preserved separately in element root and apply', function() {
const e = document.createElement('my-element2');
document.body.appendChild(e);
const styles = e.shadowRoot.querySelectorAll('style');
assert.equal(styles.length, 4);
assertComputed(e.$.foo, '2px');
assertComputed(e.$.bar, '3px');
assertComputed(e.$.zug, '4px');
assertComputed(e.$.zot, '1px');
});
});
</script>
</body>
</html>