mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
123 lines
2.9 KiB
HTML
123 lines
2.9 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 class="desktop">
|
|
|
|
<x-extended></x-extended>
|
|
|
|
<dom-module id="x-extended">
|
|
<link rel="import" type="css" href="styling-extends.css">
|
|
<style>
|
|
#container {
|
|
border: 2px solid orange;
|
|
padding: 10px;
|
|
}
|
|
|
|
#bar, .zow {
|
|
margin: 10px;
|
|
@extends(#foo);
|
|
}
|
|
|
|
#zot, .nug {
|
|
padding: 10px;
|
|
@extends(#bar);
|
|
}
|
|
|
|
.not {
|
|
border: 20px solid orange;
|
|
}
|
|
|
|
#use {
|
|
@extends(%use);
|
|
}
|
|
|
|
@media (max-width: 20000px) {
|
|
.baz {
|
|
padding: 15px;
|
|
}
|
|
|
|
#media {
|
|
@extends(#foo);
|
|
@extends(.baz);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1px) {
|
|
#media {
|
|
@extends(.not);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div id="container">
|
|
<div id="foo">Foo</div>
|
|
<div id="bar">Bar</div>
|
|
<div id="zot">Zot</div>
|
|
<div id="media">Media</div>
|
|
<div id="use">Use</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
HTMLImports.whenReady(function() {
|
|
Polymer({
|
|
is: 'x-extended'
|
|
});
|
|
});
|
|
</script>
|
|
</dom-module>
|
|
|
|
<script>
|
|
suite('styling-extends', 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 e = document.querySelector('x-extended');
|
|
|
|
test('styles extended', function() {
|
|
assertComputed(e.$.foo, '10px');
|
|
assertComputed(e.$.bar, '10px');
|
|
assertComputed(e.$.zot, '10px');
|
|
assertComputed(e.$.bar, '10px', 'margin-top');
|
|
assertComputed(e.$.zot, '10px', 'margin-top');
|
|
assertComputed(e.$.zot, '10px', 'padding-top');
|
|
});
|
|
|
|
test('nested styles extended (e.g. @media)', function() {
|
|
assertComputed(e.$.media, '10px');
|
|
assertComputed(e.$.media, '15px', 'padding-top');
|
|
});
|
|
|
|
test('% selector extended', function() {
|
|
assertComputed(e.$.use, '13px');
|
|
});
|
|
|
|
test('unused % selector stripped', function() {
|
|
var s = e._scopeStyle || e.root.querySelector('style');
|
|
assert.notMatch(s.textContent, /%remove/);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|