@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
65 lines (61 loc) • 2.33 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-loader.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="polymer-element-with-apply-import.html">
</head>
<body>
<custom-style>
<style>
html {
--mixin: {
height: 200px;
width: 200px;
background-color: rgb(0, 0, 255);
}
}
</style>
</custom-style>
<test-fixture id="apply">
<template>
<apply-element></apply-element>
</template>
</test-fixture>
<test-fixture id="outer">
<template>
<x-outer></x-outer>
</template>
</test-fixture>
<script>
suite('Polymer.Element with ApplyShim', function() {
test('mixin from custom style', function() {
var el = fixture('apply');
assert.equal(ShadyCSS.getComputedStyleValue(el, 'background-color'), 'rgb(0, 0, 255)');
assert.equal(ShadyCSS.getComputedStyleValue(el, 'height'), '200px');
assert.equal(ShadyCSS.getComputedStyleValue(el, 'width'), '200px');
});
test('nested', function() {
var el = fixture('outer');
var inner = el.shadowRoot.querySelector('apply-element');
assert.equal(ShadyCSS.getComputedStyleValue(el, 'background-color'), 'rgb(123, 123, 123)');
assert.equal(ShadyCSS.getComputedStyleValue(el, 'height'), '200px');
assert.equal(ShadyCSS.getComputedStyleValue(el, 'width'), '200px');
assert.equal(ShadyCSS.getComputedStyleValue(inner, 'background-color'), 'rgb(255, 0, 0)');
assert.equal(ShadyCSS.getComputedStyleValue(inner, 'height'), '100px');
assert.equal(ShadyCSS.getComputedStyleValue(inner, 'width'), '100px');
assert.equal(ShadyCSS.getComputedStyleValue(inner, 'margin-top'), '50px');
});
});
</script>
</body>
</html>