fix(test): solve CSS discrepancies across browsers

Closes #2177
This commit is contained in:
Marc Laval 2015-05-27 10:22:30 +02:00
parent 8609543ad0
commit fb42d5908e
4 changed files with 51 additions and 26 deletions

View File

@ -48,3 +48,14 @@ export function containsRegexp(input: string): RegExp {
return RegExpWrapper.create(
StringWrapper.replaceAllMapped(input, _ESCAPE_RE, (match) => `\\${match[0]}`));
}
export function normalizeCSS(css: string): string {
css = StringWrapper.replaceAll(css, RegExpWrapper.create('\\s+'), ' ');
css = StringWrapper.replaceAll(css, RegExpWrapper.create(':\\s'), ':');
css = StringWrapper.replaceAll(css, RegExpWrapper.create("\\'"), '"');
css = StringWrapper.replaceAllMapped(css, RegExpWrapper.create('url\\(\\"(.+)\\"\\)'),
(match) => `url(${match[1]})`);
css = StringWrapper.replaceAllMapped(css, RegExpWrapper.create('\\[(.+)=([^"\\]]+)\\]'),
(match) => `[${match[1]}="${match[2]}"]`);
return css;
}

View File

@ -10,6 +10,7 @@ import {
it,
xit,
SpyObject,
normalizeCSS
} from 'angular2/test_lib';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
@ -51,9 +52,8 @@ export function main() {
it('should rewrite style urls', () => {
var styleElement = el('<style>.foo {background-image: url("img.jpg");}</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(styleElement)
.toHaveText(".foo[_ngcontent-0] {\n" + "background-image: url(http://base/img.jpg);\n" +
"}");
expect(normalizeCSS(DOM.getText(styleElement)))
.toEqual(".foo[_ngcontent-0] { background-image:url(http://base/img.jpg); }");
});
it('should scope styles', () => {

View File

@ -46,8 +46,7 @@ export function main() {
it('should rewrite style urls', () => {
var styleElement = el('<style>.foo {background-image: url("img.jpg");}</style>');
strategy.processStyleElement('someComponent', 'http://base', styleElement);
expect(styleElement)
.toHaveText(".foo {" + "background-image: url('http://base/img.jpg');" + "}");
expect(styleElement).toHaveText(".foo {background-image: url('http://base/img.jpg');}");
});
it('should not inline import rules', () => {

View File

@ -1,7 +1,18 @@
import {describe, beforeEach, it, expect, ddescribe, iit, SpyObject, el} from 'angular2/test_lib';
import {
describe,
beforeEach,
it,
expect,
ddescribe,
iit,
SpyObject,
el,
normalizeCSS
} from 'angular2/test_lib';
import {ShadowCss} from 'angular2/src/render/dom/shadow_dom/shadow_css';
import {RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/dom/dom_adapter';
export function main() {
describe('ShadowCss', function() {
@ -10,7 +21,7 @@ export function main() {
var shadowCss = new ShadowCss();
var shim = shadowCss.shimCssText(css, contentAttr, hostAttr);
var nlRegexp = RegExpWrapper.create('\\n');
return StringWrapper.replaceAll(shim, nlRegexp, '');
return normalizeCSS(StringWrapper.replaceAll(shim, nlRegexp, ''));
}
it('should handle empty string', () => { expect(s('', 'a')).toEqual(''); });
@ -48,16 +59,18 @@ export function main() {
it('should handle keyframes rules', () => {
var css = '@keyframes foo {0% {transform: translate(-50%) scaleX(0);}}';
var passRe = RegExpWrapper.create(
'@keyframes foo {\\s*0% {\\s*transform: translate\\(-50%\\) scaleX\\(0\\);\\s*}}');
'@keyframes foo {\\s*0% {\\s*transform:translate\\(-50%\\) scaleX\\(0\\);\\s*}\\s*}');
expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
});
if (DOM.getUserAgent().indexOf('AppleWebKit') > -1) {
it('should handle -webkit-keyframes rules', () => {
var css = '@-webkit-keyframes foo {0% {transform: translate(-50%) scaleX(0);}}';
var passRe = RegExpWrapper.create(
'@-webkit-keyframes foo {\\s*0% {\\s*transform:translate\\(-50%\\) scaleX\\(0\\);\\s*}}');
expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true);
});
}
it('should handle complicated selectors', () => {
expect(s('one::before {}', 'a')).toEqual('one[a]::before {}');
@ -65,7 +78,9 @@ export function main() {
expect(s('one>two {}', 'a')).toEqual('one[a] > two[a] {}');
expect(s('one+two {}', 'a')).toEqual('one[a] + two[a] {}');
expect(s('one~two {}', 'a')).toEqual('one[a] ~ two[a] {}');
expect(s('.one.two > three {}', 'a')).toEqual('.one.two[a] > three[a] {}');
var res = s('.one.two > three {}', 'a'); // IE swap classes
expect(res == '.one.two[a] > three[a] {}' || res == '.two.one[a] > three[a] {}')
.toEqual(true);
expect(s('one[attr="value"] {}', 'a')).toEqual('one[attr="value"][a] {}');
expect(s('one[attr=value] {}', 'a')).toEqual('one[attr="value"][a] {}');
expect(s('one[attr^="value"] {}', 'a')).toEqual('one[attr^="value"][a] {}');