Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix 1752 #1797

Merged
merged 3 commits into from
Jun 12, 2015
Merged

Fix 1752 #1797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94618d6
reify default properties
Jun 5, 2015
c3cec31
Merge branch 'master' into fix-1752
Jun 9, 2015
1273227
property cannot be late bound via inheritance.
Jun 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/lib/style-defaults.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
this._styles._scopeStyleProperties = null;
this._properties = styleProperties
.scopePropertiesFromStyles(this._styles);
styleProperties.reify(this._properties);
}
return this._properties;
},
Expand Down
62 changes: 62 additions & 0 deletions test/smoke/custom-reify.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!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
-->
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">

<body>
<style is="custom-style">
:root {
--mood1: orange;
--mood: var(--mood1);

/* --mood: yellow; */
}

</style>

<style is="custom-style">
.zonk {
--mood1: red;
}

.bar {
--mood1: blue;
}
</style>



<x-test class="zonk"></x-test>

<x-test class="bar"></x-test>

<dom-module id="x-test">
<style>
.mood {
/* background: var(--mood1, --mood); */
background: var(--mood);
}
</style>
<template>
<div class="mood">Mood</div>
</template>
<script>
addEventListener('HTMLImportsLoaded', function() {
Polymer({
is: 'x-test'
});
});
</script>
</dom-module>


</body>

2 changes: 1 addition & 1 deletion test/unit/custom-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
}, 0);
});

test('custom-styles apply normal and property values to elements', function() {
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');
});
Expand Down
81 changes: 66 additions & 15 deletions test/unit/styling-cross-scope-var.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,49 @@
</script>
</dom-module>

<dom-module id="x-late">
<style>
:host {
border: var(--late);
display: block;
}
</style>

<template>
late
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({is: 'x-late'});
});
</script>
</dom-module>

<dom-module id="x-overrides3">
<style>
:host {
border: 1px dashed gray;
margin: 8px;
padding: 8px;
display: block;
}

:root {
--fillin: 16px;
}
</style>

<template>
overrides:
<x-late id="late"></x-late>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({is: 'x-overrides3'});
});
</script>
</dom-module>

<dom-module id="x-has-if">
<style>
.iffy {
Expand Down Expand Up @@ -194,6 +237,7 @@
--a: 10px;
--b: 5px;
--primary-color: rgb(128, 128, 128);
--late: var(--fillin);
}

#me {
Expand Down Expand Up @@ -230,11 +274,11 @@
background-color: var(--default3);
}

#overrides1, #overrides2, #overrides3 {
#overrides1a, #overrides1b, #overrides2 {
--rename: 8px solid navy;
}

#overrides2, #overrides3 {
#overrides1b, #overrides2 {
--grand-child-scope-var: 9px solid orange;
}

Expand All @@ -261,9 +305,10 @@
<div id="me">x-scope</div>
<x-child-scope id="child"></x-child-scope>
<x-child-scope id="child2"></x-child-scope>
<x-overrides id="overrides1"></x-overrides>
<x-overrides id="overrides2"></x-overrides>
<x-overrides2 id="overrides3"></x-overrides2>
<x-overrides id="overrides1a"></x-overrides>
<x-overrides id="overrides1b"></x-overrides>
<x-overrides2 id="overrides2"></x-overrides2>
<x-overrides3 id="overrides3"></x-overrides3>
<div id="default1">default</div>
<div id="default2">var default</div>
<div id="default3">tricky property rgb(...) default</div>
Expand Down Expand Up @@ -398,20 +443,26 @@

test('variable precedence and overrides', function() {
// renamed property applied
var o1 = styled.$.overrides1;
assertStylePropertyValue(o1._styleProperties, '--rename', '8px');
assertStylePropertyValue(o1._styleProperties, '--grand-child-scope-var', '8px');
assertComputed(o1.$.gc1.$.me, '8px');
var o1a = styled.$.overrides1a;
assertStylePropertyValue(o1a._styleProperties, '--rename', '8px');
assertStylePropertyValue(o1a._styleProperties, '--grand-child-scope-var', '8px');
assertComputed(o1a.$.gc1.$.me, '8px');
// :host property overridden by outer scope
var o1b = styled.$.overrides1b;
assertStylePropertyValue(o1b._styleProperties, '--rename', '8px');
assertStylePropertyValue(o1b._styleProperties, '--grand-child-scope-var', '9px');
assertComputed(o1b.$.gc1.$.me, '9px');
// own scope property overrides outer scope
var o2 = styled.$.overrides2;
assertStylePropertyValue(o2._styleProperties, '--rename', '8px');
assertStylePropertyValue(o2._styleProperties, '--grand-child-scope-var', '9px');
assertComputed(o2.$.gc1.$.me, '9px');
// own scope property overrides outer scope
assertStylePropertyValue(o2._styleProperties, '--grand-child-scope-var', '8px');
assertComputed(o2.$.gc1.$.me, '8px');

// late bound property does *not* resolve using inherited value
var o3 = styled.$.overrides3;
assertStylePropertyValue(o3._styleProperties, '--rename', '8px');
assertStylePropertyValue(o3._styleProperties, '--grand-child-scope-var', '8px');
assertComputed(o3.$.gc1.$.me, '8px');
assert.equal(o3._styleProperties['--late'], '', 'property should not be late bound');
assertStylePropertyValue(o3._styleProperties, '--fillin', '16px');
assertComputed(o3.$.late, '0px');

});

Expand Down