@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
118 lines (104 loc) • 3.44 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>
<meta charset="utf-8">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
<link rel="import" href="styling-import-shared-styles.html">
</head>
<body>
<dom-module id="x-include-module">
<template>
<style include="shared-styles"></style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-include-module'});
});
</script>
</dom-module>
<dom-module id="x-include-import">
<link rel="import" type="css" href="styling-import1.css">
<link rel="import" type="css" href="styling-import2.css">
<template>
<style>
#three {
border: 3px solid tomato;
}
</style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-include-import'});
});
</script>
</dom-module>
<dom-module id="x-import-order">
<link rel="import" type="css" href="styling-import2.css">
<template>
<style>
#two {
border: 1px solid black;
}
</style>
<div id="two"></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({is: 'x-import-order'});
});
</script>
</dom-module>
<script>
suite('style-imports', function() {
function assertComputed(element, value) {
var computed = getComputedStyle(element);
assert.equal(computed['border-top-width'], value, 'computed style incorrect');
}
test('styles included via link rel="import" type="css"', function() {
var el = document.createElement('x-include-import');
document.body.appendChild(el);
Polymer.flush();
assertComputed(el.$.one, '1px');
assertComputed(el.$.two, '2px');
assertComputed(el.$.three, '3px');
assertComputed(el, '0px', 'style outside template not ignored');
document.body.removeChild(el);
});
test('styles included via include that loads via link rel="import" type="css"', function() {
var el = document.createElement('x-include-module');
document.body.appendChild(el);
Polymer.flush();
assertComputed(el.$.one, '1px');
assertComputed(el.$.two, '2px');
assertComputed(el.$.three, '3px');
assertComputed(el, '0px', 'style outside template not ignored');
document.body.removeChild(el);
});
test('styles included via link rel="import" type="css" are overridden by styles in template', function() {
var el = document.createElement('x-import-order');
document.body.appendChild(el);
Polymer.flush();
assertComputed(el.$.two, '1px');
document.body.removeChild(el);
});
});
</script>
</body>
</html>