295 lines
11 KiB
HTML
295 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Support for obsolete tags and attributes in the default HTML 5.0 schema</title>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" />
|
||
|
|
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
|
||
|
|
<script src="../../js/qunit/reporter.js"></script>
|
||
|
|
<script src="../../js/utils.js"></script>
|
||
|
|
<script src="../../js/tinymce_loader.js"></script>
|
||
|
|
<script>
|
||
|
|
var editor;
|
||
|
|
|
||
|
|
QUnit.config.reorder = false;
|
||
|
|
QUnit.config.autostart = false;
|
||
|
|
module("tinymce.html.Schema", {
|
||
|
|
autostart: false
|
||
|
|
});
|
||
|
|
|
||
|
|
function getContent() {
|
||
|
|
return editor.getContent().replace(/[\r\n]+/g, '');
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Test whether attribute exists in a HTML string
|
||
|
|
*
|
||
|
|
* @param html The HTML string
|
||
|
|
* @param attr string|object When string, test for the first instance of attr.
|
||
|
|
* When object, break up the HTML string into individual tags and test for attr in the specified tag.
|
||
|
|
* Format: { tagName: 'attr1 attr2', ... }
|
||
|
|
* @return bool
|
||
|
|
*/
|
||
|
|
function hasAttr( html, attr ) {
|
||
|
|
var tagName, tags, tag, array, regex, i;
|
||
|
|
|
||
|
|
if ( typeof attr === 'string' ) {
|
||
|
|
return new RegExp( ' \\b' + attr + '\\b' ).test( html );
|
||
|
|
}
|
||
|
|
|
||
|
|
for ( tagName in attr ) {
|
||
|
|
if ( tags = html.match( new RegExp( '<' + tagName + ' [^>]+>', 'g' ) ) ) {
|
||
|
|
for ( tag in tags ) {
|
||
|
|
array = attr[tagName].split(' ');
|
||
|
|
|
||
|
|
for ( i in array ) {
|
||
|
|
regex = new RegExp( '\\b' + array[i] + '\\b' );
|
||
|
|
|
||
|
|
if ( regex.test( tags[tag] ) ) {
|
||
|
|
attr[tagName] = attr[tagName].replace( regex, '' );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( attr[tagName].replace( / +/g, '' ).length ) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Ref: http://www.w3.org/TR/html5/obsolete.html, http://developers.whatwg.org/obsolete.html
|
||
|
|
|
||
|
|
test('HTML elements non-conforming to HTML 5.0', function() {
|
||
|
|
var testString;
|
||
|
|
|
||
|
|
/*
|
||
|
|
Not supported, deprecated in HTML 4.0 or earlier, and/or proprietary:
|
||
|
|
applet
|
||
|
|
bgsound
|
||
|
|
dir
|
||
|
|
frame
|
||
|
|
frameset
|
||
|
|
noframes
|
||
|
|
isindex
|
||
|
|
listing
|
||
|
|
nextid
|
||
|
|
noembed
|
||
|
|
plaintext
|
||
|
|
rb
|
||
|
|
xmp
|
||
|
|
basefont
|
||
|
|
blink
|
||
|
|
marquee
|
||
|
|
multicol
|
||
|
|
nobr
|
||
|
|
spacer
|
||
|
|
|
||
|
|
The rest are still supported in TinyMCE but "...must not be used by authors".
|
||
|
|
*/
|
||
|
|
|
||
|
|
expect(6);
|
||
|
|
|
||
|
|
text = 'acronym';
|
||
|
|
testString = '<p><acronym title="www">WWW</acronym></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'strike, converted to span';
|
||
|
|
editor.setContent( '<strike>test</strike>' );
|
||
|
|
equal( getContent(), '<p><span style="text-decoration: line-through;">test</span></p>', text );
|
||
|
|
|
||
|
|
text = 'big';
|
||
|
|
testString = '<p><big>test</big></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'center';
|
||
|
|
testString = '<center>test</center>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'font, converted to span';
|
||
|
|
editor.setContent( '<p><font size="4">test</font></p>' );
|
||
|
|
equal( getContent(), '<p><span style="font-size: large;">test</span></p>', text );
|
||
|
|
|
||
|
|
text = 'tt';
|
||
|
|
testString = '<p><tt>test</tt></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Obsolete (but still conforming) HTML attributes', function() {
|
||
|
|
var testString;
|
||
|
|
|
||
|
|
expect(3);
|
||
|
|
|
||
|
|
text = 'border on <img>';
|
||
|
|
testString = '<p><img src="../../test.gif" alt="" border="5" /></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'Old style anchors';
|
||
|
|
testString = '<p><a name="test"></a></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'maxlength, size on input type="number"';
|
||
|
|
testString = '<p><input maxlength="5" size="10" type="number" value="" /></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { input: 'maxlength size' } ), text );
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Obsolete attributes in HTML 5.0', function() {
|
||
|
|
var testString, text;
|
||
|
|
|
||
|
|
expect(22);
|
||
|
|
|
||
|
|
text = 'charset, rev, shape, coords on <a> elements';
|
||
|
|
testString = '<p><a href="javascript;:" charset="en" rev="made" shape="rect" coords="5,5">test</a></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { a: 'charset rev shape coords' } ), text );
|
||
|
|
|
||
|
|
text = 'name, align, hspace, vspace on img elements';
|
||
|
|
testString = '<p><img src="../../test.gif" alt="" name="test" align="left" hspace="5" vspace="5" /></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { img: 'name align hspace vspace' } ), text );
|
||
|
|
|
||
|
|
text = 'name, align, hspace, vspace, on embed elements';
|
||
|
|
testString = '<p><embed width="100" height="100" src="test.swf" vspace="5" hspace="5" align="left" name="test"></embed></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { embed: 'name align hspace vspace' } ), text );
|
||
|
|
|
||
|
|
text = 'archive, classid, code, codebase, codetype, declare, standby on object elements';
|
||
|
|
testString = '<p><object width="100" height="100" classid="clsid" codebase="clsid" standby="standby" codetype="1" code="1" archive="1" declare="declare"></object></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { object: 'archive classid code codebase codetype declare standby' } ), text );
|
||
|
|
|
||
|
|
text = 'type, valuetype on param elements';
|
||
|
|
testString = '<p><object width="100" height="100"><param type="" valuetype="" /></object></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { param: 'type valuetype' } ), text );
|
||
|
|
|
||
|
|
text = 'align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width on table elements';
|
||
|
|
testString = '<table border="1" summary="" width="100" frame="" rules="" cellspacing="5" cellpadding="5" align="left" bgcolor="blue"><tbody><tr><td>test</td></tr></tbody></table>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { table: 'align bgcolor border cellpadding cellspacing frame rules summary width' } ), text );
|
||
|
|
|
||
|
|
text = 'align, char, charoff, valign on tbody, thead, and tfoot elements';
|
||
|
|
testString = '<table><thead align="left" char="" charoff="" valign="top"></thead><tfoot align="left" char="" charoff="" valign="top"></tfoot><tbody align="left" char="" charoff="" valign="top"><tr><th>test</th><td>test</td></tr></tbody></table>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), {
|
||
|
|
thead: 'align char charoff valign',
|
||
|
|
tfoot: 'align char charoff valign',
|
||
|
|
tbody: 'align char charoff valign'
|
||
|
|
} ), text );
|
||
|
|
|
||
|
|
text = 'axis, align, bgcolor, char, charoff, height, nowrap, valign, width on td and th elements, scope on td elements';
|
||
|
|
testString = '<table><tbody><tr><th axis="" align="left" char="" charoff="" valign="top" nowrap="nowrap" bgcolor="blue" width="100" height="10">test</th><td axis="" align="left" char="" charoff="" valign="top" nowrap="nowrap" bgcolor="blue" width="100" height="10" scope="">test</td></tr></tbody></table>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), {
|
||
|
|
th: 'axis align bgcolor char charoff height nowrap valign width',
|
||
|
|
td: 'axis align bgcolor char charoff height nowrap valign width scope'
|
||
|
|
} ), text );
|
||
|
|
|
||
|
|
text = 'align, bgcolor, char, charoff, valign on tr elements';
|
||
|
|
testString = '<table><tbody><tr align="left" char="" charoff="" valign="top" bgcolor="blue"><td>test</td></tr></tbody></table>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { tr: 'align bgcolor char charoff valign' } ), text );
|
||
|
|
|
||
|
|
text = 'clear on br elements';
|
||
|
|
testString = '<p>test<br clear="all" />test</p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'align on caption elements';
|
||
|
|
testString = '<table><caption align="left">test</caption><tbody><tr><td>test</td></tr></tbody></table>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'align, char, charoff, valign, width on col elements';
|
||
|
|
testString = '<table><colgroup><col width="100" align="left" char="a" charoff="1" valign="top" /><col /></colgroup><tbody><tr><td>test</td><td>test</td></tr></tbody></table>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { col: 'align char charoff valign width' } ), text );
|
||
|
|
|
||
|
|
text = 'align on div, h1—h6, input, legend, p elements';
|
||
|
|
testString = '<div align="left">1</div><h3 align="left">1</h3><p align="left">1</p><form><fieldset><legend align="left">test</legend><input type="text" align="left" /></fieldset></form>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'compact on dl elements';
|
||
|
|
testString = '<dl compact="compact"><dd>1</dd></dl>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'align, hspace, vspace on embed elements';
|
||
|
|
testString = '<p><embed width="100" height="100" vspace="5" hspace="5" align="left"></embed></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { embed: 'align hspace vspace' } ), text );
|
||
|
|
|
||
|
|
text = 'align, noshade, size, width on hr elements';
|
||
|
|
testString = '<hr align="left" noshade="noshade" size="1" width="100" />';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { hr: 'align noshade size width' } ), text );
|
||
|
|
|
||
|
|
text = 'align, frameborder, marginheight, marginwidth, scrolling on iframe elements';
|
||
|
|
testString = '<p><iframe width="100" height="100" frameborder="1" marginwidth="5" marginheight="5" scrolling="" align="left"></iframe></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { iframe: 'align frameborder marginheight marginwidth scrolling' } ), text );
|
||
|
|
|
||
|
|
text = 'type on li elements';
|
||
|
|
testString = '<ul><li type="disc">test</li></ul>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'align, border, hspace, vspace on object elements';
|
||
|
|
testString = '<p><object width="100" height="100" border="1" vspace="5" hspace="5" align="left"></object></p>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { object: 'align border hspace vspace' } ), text );
|
||
|
|
|
||
|
|
text = 'compact on ol elements';
|
||
|
|
testString = '<ol compact="compact"><li>test</li></ol>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
|
||
|
|
text = 'compact, type on ul elements';
|
||
|
|
testString = '<ul type="disc" compact="compact"><li>test</li></ul>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
ok( hasAttr( getContent(), { ul: 'compact type' } ), text );
|
||
|
|
|
||
|
|
text = 'width on pre elements';
|
||
|
|
testString = '<pre width="100">1</pre>';
|
||
|
|
editor.setContent( testString );
|
||
|
|
equal( getContent(), testString, text );
|
||
|
|
});
|
||
|
|
|
||
|
|
tinymce.init({
|
||
|
|
mode : "exact",
|
||
|
|
elements : "elm1",
|
||
|
|
add_unload_trigger : false,
|
||
|
|
indent : false,
|
||
|
|
entities : 'raw',
|
||
|
|
plugins: 'media',
|
||
|
|
convert_urls : false,
|
||
|
|
init_instance_callback : function(ed) {
|
||
|
|
editor = ed;
|
||
|
|
QUnit.start();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 id="qunit-header">Support for obsolete tags and attributes in the default HTML 5.0 schema</h1>
|
||
|
|
<h2 id="qunit-banner"></h2>
|
||
|
|
<div id="qunit-testrunner-toolbar"></div>
|
||
|
|
<h2 id="qunit-userAgent"></h2>
|
||
|
|
<ol id="qunit-tests"></ol>
|
||
|
|
<textarea id="elm1" name="elm1"></textarea>
|
||
|
|
<div>
|
||
|
|
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent({format : 'raw'}));">[getRawContents]</a>
|
||
|
|
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent());">[getContents]</a>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|