mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
183 lines
5.7 KiB
HTML
183 lines
5.7 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>
|
|
|
|
<title>css-parse</title>
|
|
|
|
<link rel="import" href="../../polymer.html">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<style id="test">
|
|
:host {
|
|
background: red;
|
|
}
|
|
|
|
.foo .bar .baz, zonk[happy]:focus {
|
|
font-family: sans-serif;
|
|
font-size: 15px;
|
|
}
|
|
|
|
@-webkit-keyframes fill-unfill-rotate {
|
|
12.5% { transform: rotate(135deg); }
|
|
25% { transform: rotate(270deg); }
|
|
37.5% { transform: rotate(405deg); }
|
|
50% { transform: rotate(540deg); }
|
|
62.5% { transform: rotate(675deg); }
|
|
75% { transform: rotate(810deg); }
|
|
87.5% { transform: rotate(945deg); }
|
|
to { transform: rotate(1080deg); }
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
div {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style id="test-ignore">
|
|
@import '';
|
|
|
|
/* comment */
|
|
.stuff {
|
|
background: red;
|
|
}
|
|
/* comment */
|
|
|
|
/*
|
|
This is a multi-line comment
|
|
*/
|
|
|
|
/*.aclassThatShouldBeIgnored {
|
|
someProperty: thatMustNotShowUp
|
|
}*/
|
|
</style>
|
|
|
|
<style id="short-escape-sequence">
|
|
.\33 d-model {
|
|
border-top: 3px solid red;
|
|
}
|
|
.\a33 d-model {
|
|
border-top: 3px solid red;
|
|
}
|
|
.\b333 d-model {
|
|
border-top: 3px solid red;
|
|
}
|
|
.\c3333 d-model {
|
|
border-top: 3px solid red;
|
|
}
|
|
.\d33333 d-model {
|
|
border-top: 3px solid red;
|
|
}
|
|
.\e33333d-model {
|
|
border-top: 3px solid red;
|
|
}
|
|
</style>
|
|
|
|
<style id="multiple-spaces">
|
|
.foo .bar {}
|
|
.foo .bar {}
|
|
.foo
|
|
|
|
|
|
.bar {}
|
|
</style>
|
|
<script>
|
|
|
|
function sanitizeCss(text) {
|
|
return text.replace(/[\s]+/g, ' ').trim();
|
|
}
|
|
|
|
suite('css-parse', function() {
|
|
|
|
setup(function() {
|
|
css = Polymer.CssParse;
|
|
s = document.querySelector('style#test');
|
|
tree = css.parse(s.textContent);
|
|
});
|
|
|
|
test('css rules parse', function() {
|
|
assert.equal(tree.rules.length, 4, 'unexpected number of rules');
|
|
assert.equal(tree.rules[2].rules.length, 8, 'unexpected number of rules in keyframes');
|
|
assert.equal(tree.rules[3].rules.length, 1, 'unexpected number of rules in @media');
|
|
});
|
|
|
|
test('rule selectors parse', function() {
|
|
assert.equal(tree.rules[0].selector, ':host', 'unexpected selector');
|
|
assert.equal(tree.rules[2].selector, '@-webkit-keyframes fill-unfill-rotate', 'unexpected selector in keyframes');
|
|
assert.equal(tree.rules[3].selector, '@media (max-width: 400px)', 'unexpected selector in @media');
|
|
});
|
|
|
|
test('rule cssText parse', function() {
|
|
assert.equal(tree.rules[0].cssText, 'background: red;', 'unexpected cssText');
|
|
assert.match(tree.rules[2].cssText, /^12.5%/, 'unexpected cssText in keyframes');
|
|
assert.equal(tree.rules[2].rules[2].cssText, 'transform: rotate(405deg);', 'unexpected cssText in keyframes');
|
|
assert.match(tree.rules[3].cssText, /^div/, 'unexpected cssText in @media');
|
|
assert.equal(tree.rules[3].rules[0].cssText, 'margin-left: 0 !important;', 'unexpected cssText in @media');
|
|
});
|
|
|
|
test('rule types', function() {
|
|
assert.equal(tree.rules[0].type, css.types.STYLE_RULE);
|
|
assert.equal(tree.rules[1].type, css.types.STYLE_RULE);
|
|
assert.equal(tree.rules[2].type, css.types.KEYFRAMES_RULE);
|
|
assert.equal(tree.rules[3].type, css.types.MEDIA_RULE);
|
|
assert.equal(tree.rules[3].rules[0].type, css.types.STYLE_RULE);
|
|
|
|
});
|
|
|
|
test('rules stringify', function() {
|
|
var orig = sanitizeCss(s.textContent);
|
|
var result = sanitizeCss(css.stringify(tree));
|
|
assert.equal(result, orig, 'unexpected stringified output');
|
|
});
|
|
|
|
test('parse correctly ignores @import and comments', function() {
|
|
var s2 = document.querySelector('#test-ignore');
|
|
var t = css.parse(s2.textContent);
|
|
assert.equal(t.rules[0].selector, '.stuff', 'unexpected rule selector');
|
|
assert.equal(t.rules[0].cssText, 'background: red;', 'unexpected rule cssText');
|
|
var result = sanitizeCss(css.stringify(t));
|
|
assert.equal(result, '.stuff { background: red; }', 'unexpected stringified output');
|
|
});
|
|
|
|
test('short escape sequences', function() {
|
|
var s3 = document.querySelector('#short-escape-sequence');
|
|
var t = css.parse(s3.textContent);
|
|
assert.equal(t.rules[0].selector, '.\\000033d-model');
|
|
assert.equal(t.rules[1].selector, '.\\000a33d-model');
|
|
assert.equal(t.rules[2].selector, '.\\00b333d-model');
|
|
assert.equal(t.rules[3].selector, '.\\0c3333d-model');
|
|
assert.equal(t.rules[4].selector, '.\\d33333d-model');
|
|
assert.equal(t.rules[5].selector, '.\\e33333d-model');
|
|
});
|
|
|
|
test('multiple consequent spaces in CSS selector', function() {
|
|
var s4 = document.querySelector('#multiple-spaces');
|
|
var t = css.parse(s4.textContent);
|
|
assert.equal(t.rules[0].selector, '.foo .bar');
|
|
assert.equal(t.rules[1].selector, '.foo .bar');
|
|
assert.equal(t.rules[2].selector, '.foo .bar');
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|