| <!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="./test-flags.js"></script> |
| <script src="../node_modules/wct-browser-legacy/browser.js"></script> |
| <script src="module/generated/css-parse.js"></script> |
| |
| <title>css-parse</title> |
| |
| </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> |
| |
| <style id="empty"></style> |
| <script> |
| |
| function sanitizeCss(text) { |
| return text.replace(/[\s]+/g, ' ').trim(); |
| } |
| |
| suite('css-parse', function() { |
| var s, tree; |
| |
| setup(function() { |
| s = document.querySelector('style#test'); |
| tree = window.CssParse.parse(s.textContent); |
| }); |
| |
| test('window.CssParse 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, window.CssParse.types.STYLE_RULE); |
| assert.equal(tree.rules[1].type, window.CssParse.types.STYLE_RULE); |
| assert.equal(tree.rules[2].type, window.CssParse.types.KEYFRAMES_RULE); |
| assert.equal(tree.rules[3].type, window.CssParse.types.MEDIA_RULE); |
| assert.equal(tree.rules[3].rules[0].type, window.CssParse.types.STYLE_RULE); |
| |
| }); |
| |
| test('rules stringify', function() { |
| var orig = sanitizeCss(s.textContent); |
| var result = sanitizeCss(window.CssParse.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 = window.CssParse.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(window.CssParse.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 = window.CssParse.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 = window.CssParse.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'); |
| }); |
| |
| test('empty styles are are handled', function() { |
| var s = document.querySelector('#empty'); |
| var t = window.CssParse.parse(s.textContent); |
| window.CssParse.stringify(t); |
| }); |
| |
| }); |
| </script> |
| |
| </body> |
| </html> |
