@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
125 lines (106 loc) • 3.56 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="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
<link rel="import" href="shady-unscoped-style-import.html">
</head>
<body>
<custom-style>
<style is="custom-style">
html {
--foo: {
padding: 10px;
}
}
</style>
</custom-style>
<dom-module id="my-element">
<template>
<style include="global-shared1 global-shared2">
:host {
display: block;
}
.happy {
@apply --foo;
}
</style>
<div id="fromStyle" class="happy">Happy: green</div>
<div id="fromImport" class="import">Happy: yellow</div>
<div id="normal" class="normal">Happy: orange</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element'
});
});
</script>
</dom-module>
<dom-module id="my-element2">
<template>
<style include="global-shared1">
:host {
display: block;
}
</style>
<div id="fromStyle" class="happy">Happy: green</div>
<div id="fromImport" class="import">Happy: yellow</div>
<div id="normal" class="normal">Happy: orange</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'my-element2'});
});
</script>
</dom-module>
<my-element></my-element>
<my-element2></my-element2>
<script>
suite('shady-unscoped styles', function() {
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);
}
}
var el1 = document.querySelector('my-element');
var el2 = document.querySelector('my-element2');
test('unscoped styles apply', function() {
assertComputed(el1.$.fromStyle, '1px');
assertComputed(el1.$.fromImport, '2px');
assertComputed(el2.$.fromStyle, '1px');
assertComputed(el2.$.fromImport, '2px');
});
test('shared and @apply apply when used with unscoped styles', function() {
assertComputed(el1.$.fromStyle, '10px', 'padding-top');
assertComputed(el1.$.normal, '3px');
assertComputed(el2.$.normal, '3px');
});
test('unscoped styling de-duped in ShadyDOM', function() {
if (!window.ShadyDOM) {
this.skip();
}
assert.equal(document.head.querySelectorAll('style[shady-unscoped]').length, 2);
});
test('@apply does not apply under ShadyDOM for shady-unscoped styles', function() {
assertComputed(el1.$.fromStyle, '0px', 'margin-top');
assertComputed(el2.$.fromStyle, '0px', 'margin-top');
});
});
</script>
</body>
</html>