mirror of
https://github.com/jlengrand/webcomponentsjs.git
synced 2026-04-04 15:54:07 +00:00
282 lines
9.3 KiB
HTML
282 lines
9.3 KiB
HTML
<!doctype html>
|
|
<!--
|
|
@license
|
|
Copyright (c) 2014 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 name="viewport" content="initial-scale=1.0">
|
|
<title>Using :host styling</title>
|
|
<script src="../../tools/chai/chai.js"></script>
|
|
<script src="../../tools/htmltest.js"></script>
|
|
|
|
<script src="../../../webcomponents.js"></script>
|
|
<script src="register.js"></script>
|
|
</head>
|
|
<body>
|
|
<template id="x-foo">
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
background: red;
|
|
}
|
|
|
|
:host(.foo) {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
:host-context(.opened:not(.animating)) div {
|
|
background: blue;
|
|
}
|
|
</style>
|
|
<div>background</div>
|
|
</template>
|
|
<template id="x-bar">
|
|
<style>
|
|
:host {
|
|
color: white;
|
|
}
|
|
</style>
|
|
<shadow></shadow>
|
|
<div>white text</div>
|
|
</template>
|
|
|
|
<template id="x-zot">
|
|
<style>
|
|
:host {
|
|
border: 5px solid orange;
|
|
}
|
|
</style>
|
|
<shadow></shadow>
|
|
<div>orange border & gray background</div>
|
|
</template>
|
|
|
|
<template id="x-scope">
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
background: red;
|
|
}
|
|
|
|
:host(.foo) {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
</style>
|
|
<div>background</div>
|
|
</template>
|
|
<template id="x-button">
|
|
<style>
|
|
:host {
|
|
background: green;
|
|
}
|
|
</style>
|
|
<content></content>
|
|
</template>
|
|
|
|
<template id="x-anchor">
|
|
<style>
|
|
:host(:link) {
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
Hello
|
|
</template>
|
|
|
|
<template id="x-zim">
|
|
<style>
|
|
:host {
|
|
padding: 20px;
|
|
border-top-color: brown;
|
|
}
|
|
</style>
|
|
<shadow></shadow>
|
|
<div>padding: 20px</div>
|
|
</template>
|
|
|
|
<template id="x-zim2">
|
|
<style>
|
|
:host {
|
|
padding: 20px;
|
|
}
|
|
|
|
:host(.foo), :host-context(.bar) {
|
|
background: green;
|
|
display: block;
|
|
}
|
|
</style>
|
|
<div>padding: 20px</div>
|
|
</template>
|
|
|
|
<script>
|
|
XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
|
|
XBar = register('x-bar', 'x-foo', XFoo.prototype, ['x-foo', 'x-bar']);
|
|
XBar2 = register('x-bar2', 'x-foo', XFoo.prototype, ['x-foo']);
|
|
XZot = register('x-zot', 'x-bar', XBar.prototype, ['x-foo', 'x-bar', 'x-zot']);
|
|
XZim = register('x-zim', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim']);
|
|
XZim2 = register('x-zim2', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim2']);
|
|
register('x-scope', '', HTMLElement.prototype, ['x-scope']);
|
|
register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
|
|
register('x-anchor', 'a', HTMLAnchorElement.prototype, ['x-anchor']);
|
|
</script>
|
|
|
|
<h4>Expected: red background</h4>
|
|
<x-foo></x-foo>
|
|
|
|
<h4>Expected: red background</h4>
|
|
<x-scope></x-scope>
|
|
|
|
<h4>Expected: green background</h4>
|
|
<button is="x-button">green</button>
|
|
|
|
<h4>Expected: black background</h4>
|
|
<x-foo class="foo"></x-foo>
|
|
|
|
<h4>Expected: black background</h4>
|
|
<x-scope class="foo"></x-scope>
|
|
|
|
<h4>Expected: red background with white text</h4>
|
|
<x-bar></x-bar>
|
|
|
|
<h4>Expected: red background with white text</h4>
|
|
<x-bar2></x-bar2>
|
|
|
|
<h4>Expected: red background with black text and orange border</h4>
|
|
<x-zot></x-zot>
|
|
|
|
<h4>Expected: red background with black text and orange border and 20px padding</h4>
|
|
<x-zim></x-zim>
|
|
|
|
<h4>Expected: 20px padding, background green</h4>
|
|
<x-zim2 class="foo"></x-zim2>
|
|
|
|
<h4>Expected: 20px padding, background green</h4>
|
|
<div class="bar">
|
|
<x-zim2></x-zim2>
|
|
</div>
|
|
<h4>Expected: 20px padding</h4>
|
|
<div class="foo">
|
|
<x-zim2></x-zim2>
|
|
</div>
|
|
|
|
<h4>Expected: blue background</h4>
|
|
<a href="#" is="x-anchor">Test Link</a>
|
|
</div>
|
|
<h4>Expected: blue background</h4>
|
|
<div class="opened">
|
|
<x-foo class="foo3"></x-foo>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('WebComponentsReady', function() {
|
|
var foo = document.querySelector('x-foo');
|
|
chai.assert.equal(getComputedStyle(foo).backgroundColor, 'rgb(255, 0, 0)',
|
|
':host styles matching * are applied (backgroundColor)');
|
|
|
|
var foo2 = document.querySelector('x-foo.foo');
|
|
chai.assert.equal(getComputedStyle(foo2).backgroundColor, 'rgb(0, 0, 0)',
|
|
':host styles are conditionally applied (backgroundColor)');
|
|
|
|
var foo3 = document.querySelector('x-foo.foo3');
|
|
var foo3div = foo3.shadowRoot.querySelector('div');
|
|
chai.assert.equal(getComputedStyle(foo3div).backgroundColor, 'rgb(0, 0, 255)',
|
|
':host(:not()) styles are applied (backgroundColor)');
|
|
|
|
var scope = document.querySelector('x-scope');
|
|
chai.assert.equal(getComputedStyle(scope).backgroundColor, 'rgb(255, 0, 0)',
|
|
':host styles matching :scope are applied (backgroundColor)');
|
|
|
|
var scope2 = document.querySelector('x-scope.foo');
|
|
chai.assert.equal(getComputedStyle(scope2).backgroundColor, 'rgb(0, 0, 0)',
|
|
':host styles matching :scope are conditionally applied (backgroundColor)');
|
|
|
|
var bar = document.querySelector('x-bar');
|
|
var barStyle = getComputedStyle(bar);
|
|
chai.assert.equal(barStyle.backgroundColor, 'rgb(255, 0, 0)',
|
|
':host styles are inherited (backgroundColor)');
|
|
chai.assert.equal(barStyle.color, 'rgb(255, 255, 255)',
|
|
':host styles are combined with inherited :host styles (color)');
|
|
|
|
var bar2 = document.querySelector('x-bar2');
|
|
var bar2Style = getComputedStyle(bar2);
|
|
chai.assert.equal(bar2Style.backgroundColor, 'rgb(255, 0, 0)',
|
|
':host styles are inherited (backgroundColor)');
|
|
|
|
var zot = document.querySelector('x-zot');
|
|
var zotStyle = getComputedStyle(zot);
|
|
chai.assert.equal(zotStyle.backgroundColor, 'rgb(255, 0, 0)',
|
|
':host styles are inherited (backgroundColor)');
|
|
chai.assert.equal(zotStyle.borderTopColor, 'rgb(255, 165, 0)',
|
|
':host styles are combined with inherited :host styles (borderTopColor)');
|
|
chai.assert.equal(zotStyle.color, 'rgb(255, 255, 255)',
|
|
':host styles are applied to given selector (color)');
|
|
|
|
var zim = document.querySelector('x-zim');
|
|
var zimStyle = getComputedStyle(zim);
|
|
chai.assert.equal(zimStyle.backgroundColor, 'rgb(255, 0, 0)',
|
|
':host styles are inherited (backgroundColor)');
|
|
|
|
chai.assert.equal(zimStyle.borderTopColor, 'rgb(165, 42, 42)',
|
|
':host styles are combined with inherited :host styles (borderTopColor)');
|
|
chai.assert.equal(zimStyle.borderBottomColor, 'rgb(255, 165, 0)',
|
|
':host styles are combined with inherited :host styles (borderBottomColor)');
|
|
chai.assert.equal(zimStyle.color, 'rgb(255, 255, 255)',
|
|
':host styles are applied to given selector (color)');
|
|
chai.assert.equal(zimStyle.paddingTop, '20px',
|
|
':host styles are loaded via external sheet in import (paddingTop)');
|
|
chai.assert.equal(zimStyle.paddingLeft, '20px',
|
|
':host styles are loaded via external sheet in import (paddingLeft)');
|
|
zim.offsetHeight;
|
|
|
|
var zim2 = document.querySelector('x-zim2');
|
|
var zimStyle2 = getComputedStyle(zim2);
|
|
chai.assert.equal(zimStyle2.borderTopColor, 'rgb(255, 165, 0)',
|
|
':host styles are combined without <shadow> (borderTopColor)');
|
|
chai.assert.equal(zimStyle2.borderBottomColor, 'rgb(255, 165, 0)',
|
|
':host styles are combined without <shadow> (borderBottomColor)');
|
|
chai.assert.equal(zimStyle2.paddingTop, '20px',
|
|
':host styles are loaded via external sheet in import (paddingTop)');
|
|
chai.assert.equal(zimStyle2.paddingLeft, '20px',
|
|
':host styles are loaded via external sheet in import (paddingLeft)');
|
|
|
|
chai.assert.equal(zimStyle2.backgroundColor, 'rgb(0, 128, 0)',
|
|
':host(.foo:host) styles are applied (backgroundColor)');
|
|
|
|
var zim2_2 = document.querySelector('.bar > x-zim2');
|
|
var zimStyle2_2 = getComputedStyle(zim2_2);
|
|
chai.assert.equal(zimStyle2_2.backgroundColor, 'rgb(0, 128, 0)',
|
|
':host(.foo:host) styles are applied (backgroundColor)');
|
|
|
|
var zim2_3 = document.querySelector('.foo > x-zim2');
|
|
var zimStyle2_3 = getComputedStyle(zim2_3);
|
|
chai.assert.notEqual(zimStyle2_3.backgroundColor, 'rgb(0, 128, 0)',
|
|
':host(.foo:host) styles are not applied when host doesn\'t contain .foo (backgroundColor)');
|
|
|
|
var btn = document.querySelector('[is=x-button]');
|
|
var btnStyle = getComputedStyle(btn);
|
|
chai.assert.equal(btnStyle.backgroundColor, 'rgb(0, 128, 0)',
|
|
':host styles are shimmed for type extension (backgroundColor)');
|
|
|
|
var a = document.querySelector('[is=x-anchor]');
|
|
a.dispatchEvent(new MouseEvent('click', {
|
|
'view': window,
|
|
'bubbles': true,
|
|
'cancelable': true
|
|
}));
|
|
var aStyle = getComputedStyle(a);
|
|
chai.assert.equal(aStyle.fontStyle, 'italic',
|
|
':host:pseudoclass styles are shimmed (font-style)');
|
|
|
|
done();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|