@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
513 lines (437 loc) • 15.1 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="custom-style-import.html">
</head>
<body>
<custom-style>
<style is="custom-style">
x-bar {
border: 1px solid red;
display: block;
}
html {
--bag2: {
border: 12px solid beige;
};
}
html {
--red-text : {
color : red;
};
}
html{--blue-text:{color:#0000ff};--dummy-mixin:{};--bold-text:{font-weight:700}}
html {
--italic: italic;
--bag: {
margin: 1px;
border: 1px solid black;
};
/* mocha.css in the testing environment is hosing this test;
use !important as a workaround */
margin: 10px ;
width: auto;
--special: var(--primary);
--after: 11px solid orange;
@apply --bag2;
}
x-foo {
--primary: 10px;
--x-foo-more: 6px solid orange;
}
</style>
</custom-style>
<custom-style>
<style is="custom-style">
.bag {
;@apply --bag;
}
.italic {
font-style: var(--italic);
}
.import-mixin {
@apply --import-mixin;
}
.import-var {
border: var(--import-var);
}
.dynamic {
border: var(--dynamic);
}
#after::after {
content: 'after';
border: var(--after);
}
</style>
</custom-style>
<custom-style>
<style is="custom-style" include="shared-style2">
.zazz {
border: 20px solid blue;
}
</style>
<style>
.foo--bar {
border-top : 3px solid red;
}
</style>
</custom-style>
<custom-style>
<style is="custom-style">
@media (min-width: 1px) {
.foo--bar {
border-top : 20px solid blue;
}
}
</style>
</custom-style>
<div class="italic">italic</div>
<div class="bag">bag</div>
<div class="mix">mix</div>
<div class="dynamic">dynamic</div>
<div class="import-mixin">import-mixin</div>
<div class="import-var">import-var</div>
<x-bar></x-bar>
<x-foo></x-foo>
<x-red-text></x-red-text>
<x-blue-bold-text></x-blue-bold-text>
<parent-variable-with-var></parent-variable-with-var>
<br><br>
<div id="after"></div>
<div class="foo"></div>
<div class="foo--bar"></div>
<dom-module id="x-baz">
<template>
<style>
:host {
display: block;
}
</style>
<div id="me">x-baz</div>
</template>
</dom-module>
<dom-module id="x-bar">
<template>
<style>
:host {
display: block;
}
</style>
<div>x-bar</div>
<x-baz id="baz"></x-baz>
</template>
</dom-module>
<dom-module id="x-foo">
<template>
<style>
:host {
display: block;
border: solid tomato;
border-width: var(--special);
}
div {
@apply --bag;
}
#more {
border: var(--x-foo-more);
}
</style>
<div id="me">x-foo</div>
<x-bar id="bar1"></x-bar>
<x-bar id="bar2"></x-bar>
<x-bar id="bar3"></x-bar>
<div id="more">deep</div>
</template>
</dom-module>
<dom-module id="x-red-text">
<template>
<style>
:host {
@apply --red-text;
}
</style>
x-red-text
</template>
</dom-module>
<dom-module id="x-blue-bold-text">
<template>
<style>
:host {@apply --blue-text;@apply --bold-text;}
</style>
x-blue-bold-text
</template>
</dom-module>
<dom-module id="parent-variable-with-var">
<template>
<style>
child-variable-with-var {
--variable-property-own-line: 1px;
--variable-property-preceded-property: 2px;
--variable-property-before-property: yellow;
--variable-property-after-property: 3px;
--variable-property-after-assignment: 4px;
--variable-property-before-assignment: 5px;
--variable-into-first-variable: 9px;
--variable-into-second-variable: 10px;
--variable-into-third-variable: 11px;
}
</style>
<child-variable-with-var id="child"></child-variable-with-var>
</template>
</dom-module>
<dom-module id="child-variable-with-var">
<template>
<style>
child-of-child-with-var {
/* in certain browsers (e.g. Safari) `top`, `bottom`, `left`, `right` don't compute
when no explicit position is defined (`relative` / `absolute` / `fixed`) */
position: relative;
--variable-own-line: "Varela font";
margin-top: var(--variable-property-own-line);
margin-bottom: var(--variable-property-preceded-property);
--variable-between-properties: 6px;
background-color: var(--variable-property-before-property); padding-top: var(--variable-property-after-property);
--variable-assignment-before-property: 7px; padding-bottom: var(--variable-property-after-assignment);
padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px;
top: 12px;--variable-from-other-variable: var(--variable-into-first-variable);--variable-from-another-variable: var(--variable-into-second-variable); --variable-from-last-variable: var(--variable-into-third-variable);
height: 20px;
}
</style>
<child-of-child-with-var id="child"></child-of-child-with-var>
</template>
</dom-module>
<dom-module id="child-of-child-with-var">
<template>
<style>
:host {
font-family: var(--variable-own-line);
padding-right: var(--variable-between-properties);
margin-left: var(--variable-assignment-before-property);
margin-right: var(--variable-assignment-after-property);
bottom: var(--variable-from-other-variable);
left: var(--variable-from-another-variable);
right: var(--variable-from-last-variable);
}
</style>
Text
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-baz'
});
Polymer({
is: 'x-bar'
});
Polymer({
is: 'x-foo'
});
Polymer({
is: 'x-red-text'
});
Polymer({
is: 'x-blue-bold-text'
});
});
</script>
<script>
suite('custom-style', function() {
var xBar, xFoo, stylesBuilt;
suiteSetup(function() {
xBar = document.querySelector('x-bar');
xFoo = document.querySelector('x-foo');
});
test('root styles applied', function() {
assertComputed(xBar, '1px');
});
test('root styles have lower bound encapsulation', function() {
assertComputed(xFoo.$.bar1, '0px');
});
test('custom properties registered as defaults', function() {
var propsToCheck = ['--italic'];
if (!window.ShadyCSS || ShadyCSS.nativeCss || stylesBuilt) {
var sep = window.ShadyCSS.ApplyShim._separator;
propsToCheck.push('--bag' + sep + 'margin', '--bag' + sep + 'border');
} else {
propsToCheck.push('--bag');
}
if (!window.ShadyCSS || ShadyCSS.nativeCss) {
var cs = getComputedStyle(document.documentElement);
propsToCheck.forEach(function(p) {
assert.ok(cs.getPropertyValue(p));
});
} else {
propsToCheck.forEach(function(p) {
assert.ok(ShadyCSS.ScopingShim.getComputedStyleValue(document.documentElement, p));
});
}
});
test('custom properties with space before semicolon', function() {
var red = document.querySelector('x-red-text');
assertComputed(red, 'rgb(255, 0, 0)', 'color');
});
test('custom properties in minified css', function() {
var blue = document.querySelector('x-blue-bold-text');
assertComputed(blue, 'rgb(0, 0, 255)', 'color');
var computed = getComputedStyle(blue);
// Firefox returns `700`, while Chrome returns original `bold`
assert.ok(computed.fontWeight == '700' || computed.fontWeight == 'bold', 'computed style incorrect for fontWeight');
});
test('custom-styles apply normal and property values to main document', function() {
var bag = document.querySelector('.bag');
var italic = document.querySelector('.italic');
assertComputed(bag, '1px');
assertComputed(italic, 'italic', 'font-style');
});
test('imported custom-styles apply', function() {
if (stylesBuilt && window.ShadyCSS && !ShadyCSS.nativeCss) {
// css build will test this by using vulcanize.
// this inlines the custom-style after the consumption point, and changes the timing for custom property shim
// Force an update style for this weird corner case in the tests
Polymer.updateStyles();
}
var v = document.querySelector('.import-var');
var m = document.querySelector('.import-mixin');
assertComputed(v, '3px');
assertComputed(m, '4px');
});
test('dynamic custom-styles apply', function() {
var dynamic = document.querySelector('.dynamic');
assertComputed(dynamic, '0px');
var cs = document.createElement('custom-style');
var s = document.createElement('style');
s.textContent = ':root { --dynamic: 11px solid orange; }';
cs.appendChild(s);
document.body.appendChild(cs);
Polymer.updateStyles();
assertComputed(dynamic, '11px');
});
test('custom-styles apply normal and property values to elements and cannot be late bound via inheritance', function() {
var e = document.querySelector('x-foo').$.me;
assertComputed(e, '1px');
});
test('custom-styles apply to pseudo elements', function() {
var e = document.querySelector('#after');
assertComputed(e, '11px', null, '::after');
});
test('style paths in included dom-modules loaded in import', function() {
var foo = document.querySelector('.foo');
var url = getComputedStyle(foo).backgroundImage;
assert.include(url, 'sub/google.png');
});
test('style paths can have arbitrary whitespace', function() {
var foo = document.querySelector('.foo');
assertComputed(foo, '4px', 'width');
});
test('imperative custom style', function() {
var cs = document.createElement('custom-style');
var style = document.createElement('style');
style.textContent = '.zonk { border: 13px solid tomato;}';
cs.appendChild(style);
var d = document.createElement('div');
d.classList.add('zonk');
document.body.appendChild(d);
document.body.appendChild(cs);
Polymer.updateStyles();
if (window.ShadyDOM) {
assert.ok(style.textContent.match(':not'));
}
assertComputed(d, '13px');
document.body.removeChild(d);
document.body.removeChild(cs);
});
test('imperative custom style with include', function() {
var cs = document.createElement('custom-style');
var style = document.createElement('style');
style.setAttribute('include', 'shared-style2');
cs.appendChild(style);
var d = document.createElement('div');
d.classList.add('zazz');
document.body.appendChild(d);
document.body.appendChild(cs);
Polymer.updateStyles();
assertComputed(d, '16px');
document.body.removeChild(d);
document.body.removeChild(cs);
});
test('imperative custom style with non-existent include', function() {
var s1 = document.createElement('custom-style');
var style = document.createElement('style');
s1.appendChild(style);
style.setAttribute('include', 'does-not-exist');
style.textContent = '.ziz { border: 14px solid tomato;}';
var d = document.createElement('div');
d.classList.add('ziz');
document.body.appendChild(d);
document.body.appendChild(s1);
Polymer.updateStyles();
assertComputed(d, '14px');
document.body.removeChild(d);
document.body.removeChild(s1);
});
test('include style data applied before textContent', function() {
var d = document.createElement('div');
d.classList.add('zazz');
document.body.appendChild(d);
assertComputed(d, '20px');
document.body.removeChild(d);
});
test('variable name with assignment including var correctly applied', function() {
Polymer({
is: 'parent-variable-with-var'
});
Polymer({
is: 'child-variable-with-var'
});
Polymer({
is: 'child-of-child-with-var'
});
var d = document.querySelector('parent-variable-with-var');
var el = d.$.child.$.child;
assertComputed(el, '1px', 'margin-top');
assertComputed(el, '2px', 'margin-bottom');
assertComputed(el, '3px', 'padding-top');
assertComputed(el, '4px', 'padding-bottom');
assertComputed(el, '5px', 'padding-left');
assertComputed(el, '6px', 'padding-right');
assertComputed(el, '7px', 'margin-left');
assertComputed(el, '8px', 'margin-right');
assertComputed(el, 'rgb(255, 255, 0)', 'background-color');
assertComputed(el, '9px', 'bottom');
assertComputed(el, '10px', 'left');
assertComputed(el, '11px', 'right');
assertComputed(el, '12px', 'top');
// Avoid Edge bug with CSS Custom Properties and Fonts.
if (navigator.userAgent.match('Edge') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
return;
}
// Because FireFox and Chrome parse font-family differently...
var computed = getComputedStyle(el);
assert.equal(computed['font-family'].replace(/['"]+/g, ''), 'Varela font');
});
test('BEM-like CSS selectors under media queries', function() {
assertComputed(document.querySelector('.foo--bar'), '20px');
});
});
function assertComputed(element, value, property, pseudo) {
var computed = getComputedStyle(element, pseudo);
property = property || 'border-top-width';
assert.equal(computed[property], value, 'computed style incorrect for ' + property);
}
</script>
</body>
</html>