module("tinymce.Formatter - Apply", { setupModule: function() { document.getElementById('view').innerHTML = '
'; QUnit.stop(); tinymce.init({ selector: "#elm1", external_plugins: { noneditable: '../../../../tests/qunit/editor/external-plugins/noneditable/plugin.min.js' }, // WP add_unload_trigger: false, skin: false, indent: false, extended_valid_elements: 'b[id|style|title],i[id|style|title],span[id|class|style|title|contenteditable],font[face|size]', forced_root_block: '', convert_fonts_to_spans: false, disable_nodechange: true, entities: 'raw', valid_styles: { '*': 'color,font-size,font-family,background-color,font-weight,font-style,text-decoration,float,margin,margin-top,margin-right,margin-bottom,margin-left,display' }, init_instance_callback: function(ed) { window.editor = ed; if (inlineEditor) { QUnit.start(); } } }); tinymce.init({ selector: "#elm2", inline: true, add_unload_trigger: false, skin: false, indent: false, convert_fonts_to_spans: false, disable_nodechange: true, entities: 'raw', valid_styles: { '*': 'color,font-size,font-family,background-color,font-weight,font-style,text-decoration,float,margin,margin-top,margin-right,margin-bottom,margin-left,display' }, init_instance_callback: function(ed) { window.inlineEditor = ed; if (editor) { QUnit.start(); } } }); } }); function getContent() { return editor.getContent().toLowerCase().replace(/[\r]+/g, ''); } test('apply inline to a list', function() { editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '

1234

5678

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

5678

', 'selection of a list'); }); test('Toggle OFF - Inline element on selected text', function() { // Toggle OFF - Inline element on selected text editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('b')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '

1234

'); }); test('Toggle OFF - Inline element on partially selected text', function() { // Toggle OFF - Inline element on partially selected text editor.formatter.register('format', { inline: 'b', toggle: 0 }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('b')[0].firstChild, 2); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '

1234

'); }); test('Toggle OFF - Inline element on partially selected text in start/end elements', function() { // Toggle OFF - Inline element on partially selected text in start/end elements editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '

1234

1234

'; //'

1234

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('b')[1].firstChild, 3); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '

1234

1234

'); }); test('Toggle ON - NO inline element on selected text', function() { // Inline element on selected text editor.formatter.register('format', { inline: 'b', toggle: true }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element on selected text'); editor.formatter.toggle('format'); equal(getContent(), '

1234

', 'Toggle ON - NO inline element on selected text'); }); test('Selection spanning from within format to outside format with toggle off', function() { editor.formatter.register('format', { inline: 'b', toggle: false }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 2); editor.selection.setRng(rng); editor.formatter.toggle('format'); equal(getContent(), '

1234

', 'Extend formating if start of selection is already formatted'); }); test('Inline element on partially selected text', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[0].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element on partially selected text'); editor.formatter.toggle('format'); equal(getContent(), '

1234

', 'Toggle ON - NO inline element on partially selected text'); }); test('Inline element on partially selected text in start/end elements', function() { // Inline element on partially selected text in start/end elements editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[1].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

1234

'); }); test('Inline element on selected element', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element on selected element'); }); test('Inline element on multiple selected elements', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

1234

', 'Inline element on multiple selected elements'); }); test('Inline element on multiple selected elements with various childnodes', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

123456789

123456789

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

123456789

123456789

', 'Inline element on multiple selected elements with various childnodes'); }); test('Inline element with attributes', function() { editor.formatter.register('format', { inline: 'b', attributes: { title: 'value1', id: 'value2' } }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element with attributes'); }); test('Inline element with styles', function() { editor.formatter.register('format', { inline: 'b', styles: { color: '#ff0000', fontSize: '10px' } }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element with styles'); }); test('Inline element with attributes and styles', function() { editor.formatter.register('format', { inline: 'b', attributes: { title: 'value1', id: 'value2' }, styles: { color: '#ff0000', fontSize: '10px' } }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element with attributes and styles'); }); test('Inline element with wrapable parents', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

x1234y

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0].firstChild, 0); rng.setEnd(editor.dom.select('span')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

x1234y

', 'Inline element with wrapable parents'); }); test('Inline element with redundant child', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element with redundant child'); }); test('Inline element with redundant parent', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element with redundant parent'); }); test('Inline element with redundant child of similar type 1', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }]); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element with redundant child of similar type 1'); }); test('Inline element with redundant child of similar type 2', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element with redundant child of similar type 2'); }); test('Inline element with redundant children of similar types', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = '

a12345678b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a12345678b

', 'Inline element with redundant children of similar types'); }); test('Inline element with redundant parent 1', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }]); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element with redundant parent 1'); }); test('Inline element with redundant parent 2', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element with redundant parent 2'); }); test('Inline element with redundant parents of similar types', function() { editor.formatter.register('format', [{ inline: 'b' }, { inline: 'strong' }, { inline: 'span', styles: { fontWeight: 'bold' } }]); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('em')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element with redundant parents of similar types'); }); test('Inline element merged with parent and child', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

a123456b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('b')[0].firstChild, 1); rng.setEnd(editor.dom.select('b')[0].lastChild, 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a123456b

', 'Inline element merged with parent and child'); }); test('Inline element merged with child 1', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element merged with child 1'); }); test('Inline element merged with child 2', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element merged with child 2'); }); test('Inline element merged with child 3', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element merged with child 3'); }); test('Inline element merged with child 3', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' }, merge: true }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element merged with child 3'); }); test('Inline element merged with child 4', function() { editor.formatter.register('format', { inline: 'span', styles: { color: '#00ff00' } }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element merged with child 4'); }); test('Inline element with attributes merged with child 1', function() { editor.formatter.register('format', { inline: 'font', attributes: { face: 'arial' }, merge: true }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element with attributes merged with child 1'); }); test('Inline element with attributes merged with child 2', function() { editor.formatter.register('format', { inline: 'font', attributes: { size: '7' } }); editor.getBody().innerHTML = '

a1234b

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a1234b

', 'Inline element with attributes merged with child 2'); }); test('Inline element merged with left sibling', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

12345678

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].lastChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

12345678

', 'Inline element merged with left sibling'); }); test('Inline element merged with right sibling', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

12345678

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

12345678

', 'Inline element merged with right sibling'); }); test('Inline element merged with left and right siblings', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

123456

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].childNodes[1], 0); rng.setEnd(editor.dom.select('p')[0].childNodes[1], 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

123456

', 'Inline element merged with left and right siblings'); }); test('Don\'t merge siblings with whitespace between 1', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

a b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].lastChild, 1); rng.setEnd(editor.dom.select('p')[0].lastChild, 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a b

', 'Don\'t merge siblings with whitespace between 1'); }); test('Don\'t merge siblings with whitespace between 1', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

a b

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

a b

', 'Don\'t merge siblings with whitespace between 2'); }); test('Inline element not merged in exact mode', function() { editor.formatter.register('format', { inline: 'span', styles: { color: '#00ff00' }, exact: true }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element not merged in exact mode'); }); test('Inline element merged in exact mode', function() { editor.formatter.register('format', { inline: 'span', styles: { color: '#ff0000' }, exact: true }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Inline element merged in exact mode'); }); test('Deep left branch', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234text1text2

5678

9012

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('ins')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[2].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234text1text2

5678

9012

', 'Deep left branch'); }); test('Deep right branch', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

9012

5678

1234text1text2

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('em')[3].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

9012

5678

1234text1text2

', 'Deep right branch'); }); test('Full element text selection on two elements with a table in the middle', function() { editor.formatter.register('format', { inline: 'b' }); editor.getBody().innerHTML = '

1234

123

5678

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

123

5678

', 'Full element text selection on two elements with a table in the middle'); }); test('Inline element on selected text with variables', function() { editor.formatter.register('format', { inline: 'b', styles: { color: '%color' }, attributes: { title: '%title' } }, { color: '#ff0000', title: 'title' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format', { color: '#ff0000', title: 'title' }); equal(getContent(), '

1234

', 'Inline element on selected text'); }); test('Remove redundant children', function() { editor.formatter.register('format', { inline: 'span', styles: { fontFamily: 'arial' } }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0], 0); rng.setEnd(editor.dom.select('p')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Remove redundant children'); }); test('Inline element on selected text with function values', function() { editor.formatter.register('format', { inline: 'b', styles: { color: function(vars) { return vars.color + '00ff'; } }, attributes: { title: function(vars) { return vars.title + '2'; } } }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format', { color: '#ff', title: 'title' }); equal(getContent(), '

1234

', 'Inline element on selected text with function values'); }); test('Block element on selected text', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
', 'Block element on selected text'); }); test('Block element on partially selected text', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 1); rng.setEnd(editor.dom.select('p')[0].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
', 'Block element on partially selected text'); }); test('Block element on selected element', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
', 'Block element on selected element'); }); test('Block element on selected elements', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '

1234

5678

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
5678
', 'Block element on selected elements'); }); test('Block element on selected elements with attributes', function() { editor.formatter.register('format', { block: 'div', attributes: { 'title': 'test' } }); editor.getBody().innerHTML = '

1234

5678

'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
5678
', 'Block element on selected elements with attributes'); }); test('Block element on nested element', function() { editor.formatter.register('format', { block: 'p' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('h1')[0].firstChild, 0); rng.setEnd(editor.dom.select('h1')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Block element on nested element'); }); test('Block element on selected non wrapped text 1', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '1234'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody().firstChild, 0); rng.setEnd(editor.getBody().firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
', 'Block element on selected non wrapped text 1'); }); test('Block element on selected non wrapped text 2', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '1234
4567
8910'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody().firstChild, 0); rng.setEnd(editor.getBody().lastChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
4567
8910
', 'Block element on selected non wrapped text 2'); }); test('Block element on selected non wrapped text 3', function() { editor.formatter.register('format', { block: 'div' }); editor.getBody().innerHTML = '
1234

4567
8910
'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 7); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
1234
4567
8910
', 'Block element on selected non wrapped text 3'); }); test('Block element wrapper 1', function() { editor.formatter.register('format', { block: 'blockquote', wrapper: 1 }); editor.getBody().innerHTML = '

1234

5678

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('h1')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

5678

', 'Block element wrapper 1'); }); test('Block element wrapper 2', function() { editor.formatter.register('format', { block: 'blockquote', wrapper: 1 }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('h1')[0].firstChild, 0); rng.setEnd(editor.dom.select('h1')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Block element wrapper 2'); }); test('Block element wrapper 3', function() { editor.formatter.register('format', { block: 'blockquote', wrapper: 1 }); editor.getBody().innerHTML = '

1234


'; var rng = editor.dom.createRng(); rng.setStart(editor.getBody(), 0); rng.setEnd(editor.getBody(), 3); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Block element wrapper 3'); }); test('Apply format on single element that matches a selector 1', function() { editor.formatter.register('format', { selector: 'p', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Apply format on single element that matches a selector'); }); test('Apply format on single element parent that matches a selector 2', function() { editor.formatter.register('format', { selector: 'div', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '

1234

test

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('div')[0], 1); rng.setEnd(editor.dom.select('div')[0], 2); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

test

1234

', 'Apply format on single element parent that matches a selector'); }); test('Apply format on multiple elements that matches a selector 2', function() { editor.formatter.register('format', { selector: 'p', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '

1234

test

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

test

1234

', 'Apply format on multiple elements that matches a selector'); }); test('Apply format on top of existing selector element', function() { editor.formatter.register('format', { selector: 'p', attributes: { title: 'test2' }, styles: { 'color': '#00ff00' }, classes: 'a b c' }); editor.getBody().innerHTML = '

1234

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].firstChild, 4); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

1234

', 'Apply format on top of existing selector element'); }); test('Format on single li that matches a selector', function() { editor.formatter.register('format', { inline: 'span', selector: 'li', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '
text
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('div')[0], 0); rng.setEnd(editor.dom.select('div')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
text
', 'Apply format on single element that matches a selector'); }); test('Format on single div that matches a selector', function() { editor.formatter.register('format', { inline: 'span', selector: 'div', attributes: { title: 'test' }, styles: { 'color': '#ff0000' }, classes: 'a b c' }); editor.getBody().innerHTML = '
text
'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('div')[0], 0); rng.setEnd(editor.dom.select('div')[0], 1); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '
text
', 'Apply format on single element that matches a selector'); }); test('Bold and italics is applied to text that is not highlighted', function() { var rng = editor.dom.createRng(); editor.setContent('

test1 test2 test3 test4 test5 test6

'); rng.setStart(editor.dom.select('strong')[0].firstChild, 6); rng.setEnd(editor.dom.select('strong')[0].firstChild, 11); editor.focus(); editor.selection.setRng(rng); editor.execCommand('Italic'); equal(editor.getContent(), '

test1 test2 test3 test4 test5 test6

', 'Selected text should be bold.'); }); test('Apply color format to links as well', function() { editor.setContent('

123abc456

'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 3); editor.selection.setRng(rng); editor.formatter.register('format', { inline: 'span', styles: { color: '#FF0000' }, links: true }); editor.formatter.apply('format'); equal( editor.getContent(), '

123abc456

', 'Link should have it\'s own color.' ); }); test('Color on link element', function() { editor.setContent('

123abc456

'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0].firstChild, 0); rng.setEnd(editor.dom.select('span')[0].lastChild, 3); editor.selection.setRng(rng); editor.formatter.register('format', { inline: 'span', styles: { color: '#FF0000' }, links: true }); editor.formatter.apply('format'); equal( editor.getContent(), '

123abc456

', 'Link should have it\'s own color.' ); }); test("Applying formats in lists", function() { editor.setContent(''); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('li')[0].firstChild, 0); rng.setEnd(editor.dom.select('li')[0].firstChild, 1); editor.selection.setRng(rng); editor.formatter.apply("h1"); equal(editor.getContent(), '', "heading should not automatically apply to sublists"); }); test("Applying formats on a list including child nodes", function(){ editor.formatter.register('format', {inline: 'strong'}); editor.setContent('
  1. a
  2. b
  3. g
'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('li')[0].firstChild, 0); rng.setEnd(editor.dom.select('li')[6].firstChild, 1); editor.selection.setRng(rng); editor.formatter.apply("format"); equal(editor.getContent(), '
  1. a
  2. b
  3. g
', "should be applied to all sublists"); }); test('Block format on li element', function() { editor.setContent(''); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('li')[0].firstChild, 0); rng.setEnd(editor.dom.select('li')[1].firstChild, 1); editor.selection.setRng(rng); editor.formatter.apply("h1"); equal(editor.getContent(), '', "heading should automatically apply to sublists, when selection spans the sublist"); }); test('Block on li element 2', function() { editor.setContent(''); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('li')[0].lastChild, 1); rng.setEnd(editor.dom.select('li')[0].lastChild, 2); editor.selection.setRng(rng); editor.formatter.apply("h1"); equal(editor.getContent(), '', "heading should automatically apply to sublists, when selection spans the sublist"); }); test('Block on li element 3', function() { editor.setContent(''); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('li')[1].firstChild, 0); rng.setEnd(editor.dom.select('li')[0].lastChild, 1); editor.selection.setRng(rng); editor.formatter.apply("h1"); equal(editor.getContent(), '', "heading should automatically apply to sublists, when selection spans the sublist"); }); test('Block on li element 4', function() { editor.setContent(''); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('li')[0].firstChild, 0); rng.setEnd(editor.dom.select('li')[0].lastChild, 1); editor.selection.setRng(rng); editor.formatter.apply("h1"); equal(editor.getContent(), '', "heading should apply correctly when selection is after a sublist"); }); test('Underline colors 1', function() { editor.formatter.register('format', { inline: 'span', styles: { 'color': '#ff0000' } }); editor.setContent('

test

'); editor.execCommand('SelectAll'); editor.formatter.apply('format'); equal(editor.getContent(), '

test

', 'Coloring an underlined text should result in a colored underline'); }); test('Underline colors 2', function() { editor.formatter.register('format', { inline: "span", exact: true, styles: { 'textDecoration': 'underline' } }); editor.setContent('

test

'); editor.execCommand('SelectAll'); editor.formatter.apply('format'); equal(editor.getContent(), '

test

', 'Underlining colored text should result in a colored underline'); }); test('Underline colors 3', function() { editor.formatter.register('format', { inline: "span", exact: true, styles: { 'textDecoration': 'underline' } }); editor.setContent('

This is some example text

'); editor.execCommand('SelectAll'); editor.formatter.apply('format'); equal(editor.getContent(), '

This is some example text

', 'Underlining colored and underlined text should result in a colored underline'); }); test('Underline colors 4', function() { editor.formatter.register('format', { inline: 'span', styles: { 'color': '#ff0000' } }); editor.setContent('

yellowredyellow

'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[1].firstChild, 6); rng.setEnd(editor.dom.select('span')[1].firstChild, 9); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(getContent(), '

yellowredyellow

', 'Coloring an colored underdlined text should result in newly colored underline' ); }); test('Underline colors 5', function() { editor.formatter.register('format', { inline: "span", exact: true, styles: { 'textDecoration': 'underline' } }); editor.setContent('

This is some example text

This is some example text

This is some example text

'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('strong')[0].firstChild, 0); rng.setEnd(editor.dom.select('span')[4].lastChild, 5); editor.selection.setRng(rng); editor.formatter.apply('format'); equal(editor.getContent(), '

This is some example text

This is some example text

This is some example text

', 'Colored elements should be underlined when selection is across multiple paragraphs'); }); test('Underline colors 6', function() { editor.formatter.register('format', { inline: 'span', exact: true, styles: { 'color': '#ff0000' } }); editor.setContent('

This is some text.

'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0].firstChild, 8); rng.setEnd(editor.dom.select('span')[0].firstChild, 12); editor.selection.setRng(rng); editor.formatter.apply('format'); editor.formatter.remove('format'); equal(editor.getContent(), '

This is some text.

', 'Children nodes that are underlined should be removed if their parent nodes are underlined'); }); test('Underline colors 7', function() { editor.formatter.register('format', { inline: 'span', exact: true, styles: { 'color': '#ff0000' } }); editor.setContent('

This is some text.

'); var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[1].firstChild, 0); rng.setEnd(editor.dom.select('span')[1].firstChild, 4); editor.selection.setRng(rng); editor.formatter.remove('format'); equal(editor.getContent(), '

This is some text.

', 'Children nodes that are underlined should be removed if their parent nodes are underlined'); }); test('Caret format inside single block word', function() { editor.setContent('

abc

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 2, 'p', 2); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

'); }); test('Caret format inside first block word', function() { editor.setContent('

abc 123

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 2, 'p', 2); editor.formatter.apply('format'); equal(editor.getContent(), '

abc 123

'); }); test('Caret format inside last block word', function() { editor.setContent('

abc 123

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 5, 'p', 5); editor.formatter.apply('format'); equal(editor.getContent(), '

abc 123

'); }); test('Caret format inside middle block word', function() { editor.setContent('

abc 123 456

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 5, 'p', 5); editor.formatter.apply('format'); equal(editor.getContent(), '

abc 123 456

'); }); test('Caret format on word separated by non breaking space', function() { editor.setContent('

one two

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 1, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), '

one\u00a0two

'); }); test('Caret format inside single inline wrapped word', function() { editor.setContent('

abc 123 456

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('em', 1, 'em', 1); editor.formatter.apply('format'); equal(editor.getContent(), '

abc 123 456

'); }); test('Caret format inside word before similar format', function() { editor.setContent('

abc 123 456

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 1, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), '

abc 123 456

'); }); test('Caret format inside last inline wrapped word', function() { editor.setContent('

abc abc 123 456

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('em', 5, 'em', 5); editor.formatter.apply('format'); equal(editor.getContent(), '

abc abc 123 456

'); }); test('Caret format before text', function() { editor.setContent('

a

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); Utils.type('b'); equal(editor.getContent(), '

ba

'); }); test('Caret format after text', function() { editor.setContent('

a

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 1, 'p', 1); editor.formatter.apply('format'); Utils.type('b'); equal(editor.getContent(), '

ab

'); }); test('Caret format and no key press', function() { editor.setContent('

a

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); equal(editor.getContent(), '

a

'); }); test('Caret format and arrow left', function() { editor.setContent('

a

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); Utils.type({ keyCode: 37 }); equal(editor.getContent(), '

a

'); }); test('Caret format and arrow right', function() { editor.setContent('

a

'); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('p', 0, 'p', 0); editor.formatter.apply('format'); Utils.type({ keyCode: 39 }); equal(editor.getContent(), '

a

'); }); test('Caret format and backspace', function() { var rng; if (tinymce.isOpera) { ok(true, "Skip Opera since faking backspace doesn't work."); return; } editor.formatter.register('format', { inline: 'b' }); editor.setContent('

abc

'); rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 3); rng.setEnd(editor.dom.select('p')[0].firstChild, 3); editor.selection.setRng(rng); editor.formatter.apply('format'); Utils.type('\b'); equal(editor.getContent(), '

ab

'); }); test('Caret format on word in li with word in parent li before it', function() { editor.setContent(''); editor.formatter.register('format', { inline: 'b' }); Utils.setSelection('ul li li', 1, 'ul li li', 1); editor.formatter.apply('format'); equal(editor.getContent(), ''); }); test('Selector format on whole contents', function() { editor.setContent('

a

'); editor.formatter.register('format', { inline: 'span', selector: '*', classes: 'test' }); Utils.setSelection('p', 0, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), '

a

'); }); test('format inline on contentEditable: false block', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('

abc

def

'); Utils.setSelection('p:nth-child(2)', 0, 'p:nth-child(2)', 3); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

def

', 'Text is not bold'); }); test('format block on contentEditable: false block', function() { editor.formatter.register('format', { block: 'h1' }); editor.setContent('

abc

def

'); Utils.setSelection('p:nth-child(2)', 0, 'p:nth-child(2)', 3); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

def

', 'P is not h1'); }); test('contentEditable: false on start and contentEditable: true on end', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('

abc

def

ghi

'); Utils.setSelection('p:nth-child(2)', 0, 'p:nth-child(3)', 3); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

def

ghi

', 'Text in last paragraph is bold'); }); test('contentEditable: true on start and contentEditable: false on end', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('

abc

def

'); Utils.setSelection('p:nth-child(1)', 0, 'p:nth-child(2)', 3); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

def

', 'Text in first paragraph is bold'); }); test('contentEditable: true inside contentEditable: false', function() { editor.formatter.register('format', { inline: 'b' }); editor.setContent('

abc

def

'); Utils.setSelection('span', 0, 'span', 3); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

def

', 'Text is bold'); }); test('Del element wrapping blocks', function() { editor.setContent('

a

'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.register('format', { block: 'del', wrapper: true }); editor.formatter.apply('format'); equal(getContent(), '

a

'); }); test('Del element replacing block', function() { editor.setContent('

a

'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.register('format', { block: 'del' }); editor.formatter.apply('format'); equal(getContent(), 'a'); }); test('Del element as inline', function() { editor.setContent('

a

'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.register('format', { inline: 'del' }); editor.formatter.apply('format'); equal(getContent(), '

a

'); }); test('Align specified table element with collapsed: false and selection collapsed', function() { editor.setContent('
a
'); Utils.setSelection('td', 0, 'td', 0); editor.formatter.register('format', { selector: 'table', collapsed: false, styles: { 'float': 'right' } }); editor.formatter.apply('format', {}, editor.getBody().firstChild); equal(getContent(), '
a
'); }); test('Apply ID format to around existing bookmark node', function() { editor.getBody().innerHTML = '

ab

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('p')[0].firstChild, 0); rng.setEnd(editor.dom.select('p')[0].lastChild, 1); editor.selection.setRng(rng); editor.formatter.register('format', { inline: 'span', attributes: { id: 'id' } }); editor.formatter.apply('format'); equal(Utils.normalizeHtml(editor.getBody().innerHTML), '

ab

'); }); test('Bug #5134 - TinyMCE removes formatting tags in the getContent', function() { editor.setContent(''); editor.formatter.register('format', { inline: 'strong', toggle: false }); editor.formatter.apply('format'); equal(getContent(), '', 'empty TinyMCE'); editor.selection.setContent('a'); equal(getContent(), 'a', 'bold text inside TinyMCE'); }); test('Bug #5134 - TinyMCE removes formatting tags in the getContent - typing', function() { editor.setContent(''); editor.formatter.register('format', { inline: 'strong', toggle: false }); editor.formatter.apply('format'); equal(getContent(), '', 'empty TinyMCE'); Utils.type('a'); equal(getContent(), 'a', 'bold text inside TinyMCE'); }); test('Bug #5453 - TD contents with BR gets wrapped in block format', function() { editor.setContent('
abc
123
'); Utils.setSelection('td', 1, 'td', 1); editor.formatter.register('format', { block: 'h1' }); editor.formatter.apply('format'); equal(getContent(), '

abc

123
'); }); test('Bug #6471 - Merge left/right style properties', function() { editor.formatter.register('format', { inline: 'span', styles: { fontWeight: 'bold' } }); editor.setContent('

abc

'); Utils.setSelection('p', 2, 'p', 3); editor.formatter.apply('format'); Utils.setSelection('p', 1, 'p', 2); editor.formatter.apply('format'); Utils.setSelection('p', 0, 'p', 1); editor.formatter.apply('format'); equal(editor.getContent(), '

abc

'); }); test('Bug #6518 - Apply div blocks to inline editor paragraph', function() { inlineEditor.setContent('

a

b

'); inlineEditor.selection.select(inlineEditor.getBody().firstChild, true); inlineEditor.selection.collapse(true); inlineEditor.formatter.register('format', { block: 'div' }); inlineEditor.formatter.apply('format'); equal(inlineEditor.getContent(), '
a

b

'); }); asyncTest('Bug #7412 - valid_styles affects the Bold and Italic buttons, although it shouldn\'t', function() { tinymce.remove(); document.getElementById('view').innerHTML = ''; tinymce.init({ selector: "#elm1", add_unload_trigger: false, valid_styles: { span: 'color,background-color,font-size,text-decoration,padding-left' }, init_instance_callback: function(ed) { window.editor = ed; QUnit.start(); editor.getBody().innerHTML = '

1 1234 1

'; var rng = editor.dom.createRng(); rng.setStart(editor.dom.select('span')[0], 0); rng.setEnd(editor.dom.select('span')[0], 1); editor.selection.setRng(rng); editor.formatter.toggle('bold'); equal(getContent(), '

1 1234 1

'); } }); });