mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
279 lines
6.6 KiB
HTML
279 lines
6.6 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 charset="utf-8">
|
|
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
<script src="../../../web-component-tester/browser.js"></script>
|
|
<link rel="import" href="../../polymer.html">
|
|
</head>
|
|
<body>
|
|
|
|
<x-scope></x-scope>
|
|
|
|
<dom-module id="story-card">
|
|
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
#story-card .story-content {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1.2em;
|
|
@apply(--story-content);
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div id="story-card">
|
|
<div class="story-content" id="content">Content</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
HTMLImports.whenReady(function() {
|
|
Polymer({is: 'story-card'});
|
|
});
|
|
</script>
|
|
</dom-module>
|
|
|
|
<dom-module id="x-child-scope">
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
|
|
--mixin2: {
|
|
border: 3px solid seagreen;
|
|
background: url(http://www.google.com/icon.png);
|
|
};
|
|
}
|
|
|
|
#mixin1 {
|
|
@apply(--mixin1);
|
|
}
|
|
|
|
#mixin2 {
|
|
@apply(--mixin2);
|
|
}
|
|
|
|
#mixin3 {
|
|
padding: 3px;
|
|
@apply(--mixin3);
|
|
}
|
|
|
|
#mixin4 {
|
|
@apply(--mixin4);
|
|
}
|
|
|
|
#mixin6 {
|
|
@apply(--mixin6)
|
|
}
|
|
|
|
#mixin7 {@apply(--mixin7)}
|
|
</style>
|
|
|
|
<template>
|
|
<div id="mixin1">mixin1</div>
|
|
<div id="mixin2">mixin2</div>
|
|
<div id="mixin3">mixin3</div>
|
|
<div id="mixin4">mixin4</div>
|
|
<div id="mixin6">mixin6</div>
|
|
<div id="mixin7">mixin7</div>
|
|
</template>
|
|
<script>
|
|
HTMLImports.whenReady(function() {
|
|
Polymer({is: 'x-child-scope'});
|
|
});
|
|
</script>
|
|
</dom-module>
|
|
|
|
<dom-module id="x-scope">
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
padding: 8px;
|
|
|
|
--override-me: {
|
|
border: 11px solid black;
|
|
};
|
|
|
|
--mixin1: {
|
|
border: 1px solid black;
|
|
};
|
|
|
|
--b: 2px solid orange;
|
|
|
|
--m1: 1px;
|
|
--m2: 2px;
|
|
|
|
--c1: 5px;
|
|
--c2: 10px;
|
|
|
|
--mixin2: {
|
|
border: var(--b);
|
|
};
|
|
|
|
--mixin3: {
|
|
@apply(--mixin2);
|
|
};
|
|
|
|
--mixin4: {
|
|
padding: 2px;
|
|
@apply(--mixin3);
|
|
margin: var(--m2);
|
|
};
|
|
|
|
--mixin5: {
|
|
border: calc(var(--c1) + var(--c2)) solid orange;
|
|
};
|
|
|
|
--mixin6: {
|
|
border: 16px solid orange;
|
|
}
|
|
|
|
--mixin7: {
|
|
border: 17px solid navy;
|
|
}}
|
|
|
|
#mixin1 {
|
|
@apply(--mixin1);
|
|
}
|
|
|
|
#mixin2 {
|
|
@apply(--mixin2);
|
|
}
|
|
|
|
#mixin3 {
|
|
padding: 1px;
|
|
margin: var(--m1);
|
|
@apply(--mixin3);
|
|
}
|
|
|
|
#mixin4 {
|
|
@apply(--mixin4);
|
|
}
|
|
|
|
#mixin5 {
|
|
@apply(--mixin5);
|
|
}
|
|
|
|
x-child-scope {
|
|
padding: 10px;
|
|
}
|
|
|
|
#card {
|
|
--story-content: {
|
|
border: 11px solid orange;
|
|
};
|
|
}
|
|
|
|
#override {
|
|
@apply(--override-me);
|
|
border: 19px solid steelblue;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<div id="mixin1">mixin1</div>
|
|
<div id="mixin2">mixin2</div>
|
|
<div id="mixin3">mixin3</div>
|
|
<div id="mixin4">mixin4</div>
|
|
<div id="mixin5">mixin5</div>
|
|
<hr>
|
|
<x-child-scope id="child"></x-child-scope>
|
|
<story-card id="card"></story-card>
|
|
<div id="override">override</div>
|
|
</template>
|
|
<script>
|
|
HTMLImports.whenReady(function() {
|
|
Polymer({is: 'x-scope'});
|
|
});
|
|
</script>
|
|
</dom-module>
|
|
|
|
|
|
<script>
|
|
suite('scoped-styling-apply', function() {
|
|
|
|
function assertComputed(element, value, property) {
|
|
var computed = getComputedStyle(element);
|
|
property = property || 'border-top-width';
|
|
assert.equal(computed[property], value, 'computed style incorrect for ' + property);
|
|
}
|
|
|
|
var styled = document.querySelector('x-scope');
|
|
|
|
test('variable mixins calculated correctly and inherit', function() {
|
|
var e = styled;
|
|
assert.property(e._styleProperties, '--mixin1');
|
|
assert.property(e._styleProperties, '--mixin2');
|
|
assert.property(e._styleProperties, '--mixin3');
|
|
assert.property(e._styleProperties, '--mixin4');
|
|
e = styled.$.child;
|
|
assert.property(e._styleProperties, '--mixin1');
|
|
assert.property(e._styleProperties, '--mixin2');
|
|
assert.property(e._styleProperties, '--mixin3');
|
|
assert.property(e._styleProperties, '--mixin4');
|
|
});
|
|
|
|
test('variable mixins apply', function() {
|
|
assertComputed(styled.$.mixin1, '1px');
|
|
assertComputed(styled.$.mixin2, '2px');
|
|
assertComputed(styled.$.mixin3, '2px');
|
|
assertComputed(styled.$.mixin3, '1px', 'padding-top');
|
|
assertComputed(styled.$.mixin3, '1px', 'margin-top');
|
|
assertComputed(styled.$.mixin4, '2px');
|
|
assertComputed(styled.$.mixin4, '2px', 'padding-top');
|
|
assertComputed(styled.$.mixin4, '2px', 'margin-top');
|
|
});
|
|
|
|
test('mixins apply with url values', function() {
|
|
var url = 'http://www.google.com/icon.png';
|
|
var e = styled.$.child;
|
|
assert.include(e._styleProperties['--mixin2'], url);
|
|
assert.include(e._customStyle.textContent, url);
|
|
});
|
|
|
|
test('variable mixins inherit and override', function() {
|
|
var e = styled.$.child;
|
|
assertComputed(e.$.mixin1, '1px');
|
|
assertComputed(e.$.mixin2, '3px');
|
|
assertComputed(e.$.mixin3, '2px');
|
|
assertComputed(e.$.mixin3, '3px', 'padding-top');
|
|
assertComputed(e.$.mixin4, '2px');
|
|
assertComputed(e.$.mixin4, '2px', 'padding-top');
|
|
assertComputed(e.$.mixin4, '2px', 'margin-top');
|
|
});
|
|
|
|
test('calc can be used in mixins', function() {
|
|
assertComputed(styled.$.mixin5, '15px');
|
|
});
|
|
|
|
test('mixins work with selectors that contain element name', function() {
|
|
assertComputed(styled.$.card.$.content, '11px');
|
|
});
|
|
|
|
test('mixins with trailing new line or } apply', function() {
|
|
assertComputed(styled.$.child.$.mixin6, '16px');
|
|
assertComputed(styled.$.child.$.mixin7, '17px');
|
|
});
|
|
|
|
// TODO(sorvell): fix for #1761 was reverted; include test once this issue is addressed
|
|
// test('mixin values can be overridden by subsequent concrete properties', function() {
|
|
// assertComputed(styled.$.override, '19px');
|
|
// });
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|