mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
fd57784705
Fix for overriding mixin properties, fixes #1873 Added awareness from `@apply()` position among other rules so that it is preserved after CSS variables/mixing substitution. `Polymer.StyleUtil.clearStyleRules()` method removed as it is not used anywhere. Some unused variables removed. Typos, unused variables and unnecessary escaping in regexps corrected. Tests added.
218 lines
7.4 KiB
HTML
218 lines
7.4 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">
|
|
<link rel="import" href="styling-remote-elements.html">
|
|
<style>
|
|
#priority[style-scope=x-styled], #priority.style-scope.x-styled {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="scoped">no margin</div>
|
|
|
|
<x-styled>
|
|
<div class="content1">Foo</div>
|
|
<div class="content2">Bar</div>
|
|
<div class="content">Content</div>
|
|
</x-styled>
|
|
|
|
<x-styled class="wide"></x-styled>
|
|
|
|
<button is="x-button"></button>
|
|
<button class="special" is="x-button"></button>
|
|
|
|
<x-dynamic-scope></x-dynamic-scope>
|
|
|
|
<x-order></x-order>
|
|
|
|
<script>
|
|
suite('scoped-styling', function() {
|
|
|
|
function assertComputed(element, value) {
|
|
var computed = getComputedStyle(element);
|
|
assert.equal(computed['border-top-width'], value, 'computed style incorrect');
|
|
}
|
|
|
|
var styled = document.querySelector('x-styled');
|
|
var styledWide = document.querySelector('x-styled.wide');
|
|
var unscoped = document.querySelector('.scoped');
|
|
var button = document.querySelector('[is=x-button]');
|
|
var specialButton = document.querySelector('[is=x-button].special');
|
|
|
|
test(':host, :host(...)', function() {
|
|
assertComputed(styled, '1px');
|
|
assertComputed(styledWide, '2px');
|
|
|
|
});
|
|
|
|
test('scoped selectors, simple and complex', function() {
|
|
assertComputed(styled.$.simple, '3px');
|
|
assertComputed(styled.$.complex1, '4px');
|
|
assertComputed(styled.$.complex2, '4px');
|
|
});
|
|
|
|
test('media query scoped selectors', function() {
|
|
assertComputed(styled.$.media, '5px');
|
|
});
|
|
|
|
test('upper bound encapsulation', function() {
|
|
assertComputed(unscoped, '0px');
|
|
});
|
|
|
|
test('lower bound encapsulation', function() {
|
|
assertComputed(styled.$.child.$.simple, '0px');
|
|
assertComputed(styled.$.child.$.complex1, '0px');
|
|
assertComputed(styled.$.child.$.complex2, '0px');
|
|
assertComputed(styled.$.child.$.media, '0px');
|
|
});
|
|
|
|
test('::content selectors', function() {
|
|
var content = document.querySelector('.content');
|
|
var content1 = document.querySelector('.content1');
|
|
var content2 = document.querySelector('.content2');
|
|
assertComputed(content, '6px');
|
|
assertComputed(content1, '13px');
|
|
assertComputed(content2, '14px');
|
|
});
|
|
|
|
test('::shadow selectors', function() {
|
|
assertComputed(styled.$.child.$.shadow, '7px');
|
|
});
|
|
|
|
test('/deep/ selectors', function() {
|
|
assertComputed(styled.$.child.$.deep, '8px');
|
|
});
|
|
|
|
test('elements dynamically added/removed from root', function() {
|
|
var d = document.createElement('div');
|
|
d.classList.add('scoped');
|
|
d.textContent = 'Dynamically... Scoped!';
|
|
Polymer.dom(styled.root).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assertComputed(d, '4px');
|
|
Polymer.dom(document.body).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assert.notInclude(d.getAttribute('style-scoped'), styled.is, 'scoping attribute not removed when added to other root');
|
|
assert.notInclude(d.className, styled.is, 'scoping class not removed when added to other root');
|
|
Polymer.dom(styled.root).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assertComputed(d, '4px');
|
|
Polymer.dom(styled.root).removeChild(d);
|
|
Polymer.dom.flush();
|
|
assert.notInclude(d.getAttribute('style-scoped'), styled.is, 'scoping attribute not removed when removed from root');
|
|
assert.notInclude(d.className, styled.is, 'scoping class not removed when removed from root');
|
|
Polymer.dom(styled.root).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assertComputed(d, '4px');
|
|
});
|
|
|
|
test('elements dynamically added/removed from host', function() {
|
|
var d = document.createElement('div');
|
|
d.classList.add('scoped');
|
|
d.classList.add('blank');
|
|
d.textContent = 'Dynamically... unScoped!';
|
|
Polymer.dom(styled).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assertComputed(d, '0px');
|
|
Polymer.dom(document.body).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assert.notInclude(d.getAttribute('style-scoped'), styled.is, 'scoping attribute not removed when added to other root');
|
|
assert.notInclude(d.className, styled.is, 'scoping class not removed when added to other root');
|
|
Polymer.dom(styled).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assertComputed(d, '0px');
|
|
Polymer.dom(styled).removeChild(d);
|
|
Polymer.dom.flush();
|
|
assert.notInclude(d.getAttribute('style-scoped'), styled.is, 'scoping attribute not removed when removed from root');
|
|
assert.notInclude(d.className, styled.is, 'scoping class not removed when removed from root');
|
|
Polymer.dom(styled).appendChild(d);
|
|
Polymer.dom.flush();
|
|
assertComputed(d, '0px');
|
|
});
|
|
|
|
test('elements with computed classes', function() {
|
|
assertComputed(styled.$.computed, '0px');
|
|
styled.aClass = 'computed';
|
|
assertComputed(styled.$.computed, '15px');
|
|
});
|
|
|
|
test('elements with hostAttributes: class', function() {
|
|
assertComputed(styled.$.child, '16px');
|
|
});
|
|
|
|
test('type extension elements', function() {
|
|
assertComputed(button, '10px');
|
|
assertComputed(specialButton, '11px');
|
|
});
|
|
|
|
test('element subtree added via dom api', function() {
|
|
var container = document.querySelector('x-dynamic-scope').$.container;
|
|
var a = container.querySelector('.added');
|
|
assertComputed(a, '17px');
|
|
var b = container.querySelector('.sub-added');
|
|
assertComputed(b, '18px');
|
|
});
|
|
|
|
test('styles ordered correctly when remote and static resources are mixed', function() {
|
|
var order = document.querySelector('x-order');
|
|
assertComputed(order.$.me, '10px');
|
|
});
|
|
|
|
test('style paths in included dom-modules loaded in import', function() {
|
|
var el = styled.$.url;
|
|
var url = getComputedStyle(el).backgroundImage;
|
|
assert.include(url, 'sub/google.png');
|
|
});
|
|
|
|
test('paths in remote sheets using custom properties', function() {
|
|
var el = styled.$.bg;
|
|
var url = getComputedStyle(el).backgroundImage;
|
|
assert.include(url, 'sub/foo.png');
|
|
});
|
|
|
|
test('include style data applied before textContent', function() {
|
|
assertComputed(styled.$.zazz, '20px');
|
|
});
|
|
|
|
// weird check allows testing under HTMLImports polyfill
|
|
if (!window.Polymer || !Polymer.Settings.useNativeShadow) {
|
|
|
|
suite('scoped-styling-shady-only', function() {
|
|
|
|
test('element style precedence below document styles', function() {
|
|
assertComputed(styledWide.$.priority, '1px');
|
|
});
|
|
|
|
test('styles shimmed in registration order', function() {
|
|
var s$ = document.head.querySelectorAll('style[scope]');
|
|
var expected = ['x-order', 'x-child2', 'x-styled', 'x-styled-0', 'x-button', 'x-dynamic-scope'];
|
|
var actual = [];
|
|
for (var i=0; i<s$.length; i++) {
|
|
actual.push(s$[i].getAttribute('scope'));
|
|
}
|
|
assert.deepEqual(actual, expected);
|
|
});
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|