Wordpress/tests/qunit/editor/tinymce/html/Styles.js
Andrew Ozz 0898014ebd Update the TinyMCE tests.
In 4.0.20 all tests were reworked. The 'testrunner' was removed and the PhantomJS Runner QUnit plugin was added making it possible to run the tests from cli. However it is still necessary to run the tests in all supported browsers to test the fixes for all browser quirks and normalization. Also all tests are loaded in one html file.

See #27014

git-svn-id: https://develop.svn.wordpress.org/trunk@27679 602fd350-edb4-49c9-b593-d223f7449a82
2014-03-24 05:59:45 +00:00

153 lines
7.0 KiB
JavaScript

module("tinymce.html.Styles");
test('Basic parsing/serializing', function() {
var styles = new tinymce.html.Styles();
expect(11);
equal(styles.serialize(styles.parse('FONT-SIZE:10px')), "font-size: 10px;");
equal(styles.serialize(styles.parse('FONT-SIZE:10px;COLOR:red')), "font-size: 10px; color: red;");
equal(styles.serialize(styles.parse(' FONT-SIZE : 10px ; COLOR : red ')), "font-size: 10px; color: red;");
equal(styles.serialize(styles.parse('key:"value"')), "key: 'value';");
equal(styles.serialize(styles.parse('key:"value1" \'value2\'')), "key: 'value1' 'value2';");
equal(styles.serialize(styles.parse('key:"val\\"ue1" \'val\\\'ue2\'')), "key: 'val\"ue1' 'val\\'ue2';");
equal(styles.serialize(styles.parse('width:100%')), 'width: 100%;');
equal(styles.serialize(styles.parse('value:_; value2:"_"')), 'value: _; value2: \'_\';');
equal(styles.serialize(styles.parse('value: "&"')), "value: '&';");
equal(styles.serialize(styles.parse('value: "&"')), "value: '&';");
equal(styles.serialize(styles.parse('value: ')), "");
});
test('Colors force hex and lowercase', function() {
var styles = new tinymce.html.Styles();
expect(6);
equal(styles.serialize(styles.parse('color: rgb(1,2,3)')), "color: #010203;");
equal(styles.serialize(styles.parse('color: RGB(1,2,3)')), "color: #010203;");
equal(styles.serialize(styles.parse('color: #FF0000')), "color: #ff0000;");
equal(styles.serialize(styles.parse(' color: RGB ( 1 , 2 , 3 ) ')), "color: #010203;");
equal(styles.serialize(styles.parse(' FONT-SIZE : 10px ; COLOR : RGB ( 1 , 2 , 3 ) ')), "font-size: 10px; color: #010203;");
equal(styles.serialize(styles.parse(' FONT-SIZE : 10px ; COLOR : RED ')), "font-size: 10px; color: red;");
});
test('Urls convert urls and force format', function() {
var styles = new tinymce.html.Styles({url_converter : function(url) {
return '|' + url + '|';
}});
expect(9);
equal(styles.serialize(styles.parse('background: url(a)')), "background: url('|a|');");
equal(styles.serialize(styles.parse('background: url("a")')), "background: url('|a|');");
equal(styles.serialize(styles.parse("background: url('a')")), "background: url('|a|');");
equal(styles.serialize(styles.parse('background: url( a )')), "background: url('|a|');");
equal(styles.serialize(styles.parse('background: url( "a" )')), "background: url('|a|');");
equal(styles.serialize(styles.parse("background: url( 'a' )")), "background: url('|a|');");
equal(styles.serialize(styles.parse('background1: url(a); background2: url("a"); background3: url(\'a\')')), "background1: url('|a|'); background2: url('|a|'); background3: url('|a|');");
equal(styles.serialize(styles.parse("background: url('http://www.site.com/a?a=b&c=d')")), "background: url('|http://www.site.com/a?a=b&c=d|');");
equal(styles.serialize(styles.parse("background: url('http://www.site.com/a_190x144.jpg');")), "background: url('|http://www.site.com/a_190x144.jpg|');");
});
test('Compress styles', function() {
var styles = new tinymce.html.Styles();
equal(
styles.serialize(styles.parse('border-top: 1px solid red; border-left: 1px solid red; border-bottom: 1px solid red; border-right: 1px solid red;')),
'border: 1px solid red;'
);
equal(
styles.serialize(styles.parse('border-width: 1pt 1pt 1pt 1pt; border-style: none none none none; border-color: black black black black;')),
'border: 1pt none black;'
);
equal(
styles.serialize(styles.parse('border-width: 1pt 4pt 2pt 3pt; border-style: solid dashed dotted none; border-color: black red green blue;')),
'border-width: 1pt 4pt 2pt 3pt; border-style: solid dashed dotted none; border-color: black red green blue;'
);
equal(
styles.serialize(styles.parse('border-top: 1px solid red; border-left: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red')),
'border: 1px solid red;'
);
equal(
styles.serialize(styles.parse('border-top: 1px solid red; border-right: 2px solid red; border-bottom: 3px solid red; border-left: 4px solid red')),
'border-top: 1px solid red; border-right: 2px solid red; border-bottom: 3px solid red; border-left: 4px solid red;'
);
equal(
styles.serialize(styles.parse('padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px')),
'padding: 1px 2px 3px 4px;'
);
equal(
styles.serialize(styles.parse('margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px')),
'margin: 1px 2px 3px 4px;'
);
equal(
styles.serialize(styles.parse('margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 2px')),
'margin: 1px 1px 1px 2px;'
);
equal(
styles.serialize(styles.parse('margin-top: 2px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px')),
'margin: 2px 1px 1px 1px;'
);
equal(
styles.serialize(styles.parse('border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow')),
'border-color: red green blue yellow;'
);
equal(
styles.serialize(styles.parse('border-width: 1px; border-style: solid; border-color: red')),
'border: 1px solid red;'
);
equal(
styles.serialize(styles.parse('border-width: 1px; border-color: red')),
'border-width: 1px; border-color: red;'
);
});
test('Font weight', function() {
var styles = new tinymce.html.Styles();
expect(1);
equal(styles.serialize(styles.parse('font-weight: 700')), "font-weight: bold;");
});
test('Valid styles', function() {
var styles = new tinymce.html.Styles({}, new tinymce.html.Schema({valid_styles : {'*' : 'color,font-size', 'a' : 'margin-left'}}));
expect(2);
equal(styles.serialize(styles.parse('color: #ff0000; font-size: 10px; margin-left: 10px; invalid: 1;'), 'b'), "color: #ff0000; font-size: 10px;");
equal(styles.serialize(styles.parse('color: #ff0000; font-size: 10px; margin-left: 10px; invalid: 2;'), 'a'), "color: #ff0000; font-size: 10px; margin-left: 10px;");
});
test('Script urls denied', function() {
var styles = new tinymce.html.Styles();
equal(styles.serialize(styles.parse('behavior:url(test.htc)')), "");
equal(styles.serialize(styles.parse('color:expression(alert(1))')), "");
equal(styles.serialize(styles.parse('color: expression ( alert(1))')), "");
equal(styles.serialize(styles.parse('background:url(jAvaScript:alert(1)')), "");
equal(styles.serialize(styles.parse('background:url(javascript:alert(1)')), "");
equal(styles.serialize(styles.parse('background:url(vbscript:alert(1)')), "");
equal(styles.serialize(styles.parse('background:url(j\navas\u0000cr\tipt:alert(1)')), "");
});
test('Script urls allowed', function() {
var styles = new tinymce.html.Styles({allow_script_urls: true});
equal(styles.serialize(styles.parse('behavior:url(test.htc)')), "behavior: url('test.htc');");
equal(styles.serialize(styles.parse('color:expression(alert(1))')), "color: expression(alert(1));");
equal(styles.serialize(styles.parse('background:url(javascript:alert(1)')), "background: url('javascript:alert(1');");
equal(styles.serialize(styles.parse('background:url(vbscript:alert(1)')), "background: url('vbscript:alert(1');");
});