GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2025-02-25 18:55:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add test for overriding property based :host selector from outside.

Browse Source
This commit is contained in:
Steven Orvell 2016-02-11 11:12:45 -08:00
parent b0e16f07a2
commit 71c41ed62d
1 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
test/unit/styling-cross-scope-var.html
View File

@ -14,6 +14,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
<style>
.variable-override {
border-top-width: 10px;
}
</style>
</head>
<body>
@ -528,12 +533,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</dom-module>
<style>
.variable-override {
border-top-width: 10px;
}
</style>
<dom-module id="x-variable-override">
<template>
<style>
@ -553,6 +552,48 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</script>
</dom-module>
<dom-module id="x-variable-consumer">
<template>
<style>
:host(.foo) {
border: var(--consumer);
}
</style>
test
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-variable-consumer'
});
});
</script>
</dom-module>
<dom-module id="x-host-variable-consumer">
<template>
<style>
:host {
--consumer: 2px solid orange;
}
.foo {
display: block;
/* should override */
border: 10px solid black;
}
</style>
<x-variable-consumer id="consumer" class="foo"></x-variable-consumer>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-host-variable-consumer'
});
});
</script>
</dom-module>
<script>
suite('scoped-styling-var', function() {
@ -803,6 +844,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assertComputed(d, '10px');
});
test('class selector overrides :host(class) property on element with only dynamic styles', function() {
var d = document.createElement('x-host-variable-consumer');
document.body.appendChild(d);
CustomElements.takeRecords();
assertComputed(d.$.consumer, '10px');
});
// TODO(sorvell): fix for #1761 was reverted; include test once this issue is addressed
// test('var values can be overridden by subsequent concrete properties', function() {
// assertComputed(styled.$.overridesConcrete, '4px');