(function() { module("tinymce.dom.DOMUtils", { teardownModule: function() { DOM = null; } }); var DOM = new tinymce.dom.DOMUtils(document, {keep_values : true, schema : new tinymce.html.Schema()}); test('parseStyle', 11, function() { var dom; DOM.add(document.body, 'div', {id : 'test'}); dom = new tinymce.dom.DOMUtils(document, {hex_colors : true, keep_values : true, url_converter : function(u) { return 'X' + u + 'Y'; }}); equal( dom.serializeStyle(dom.parseStyle('border: 1px solid red; color: green')), 'border: 1px solid red; color: green;' ); equal( dom.serializeStyle(dom.parseStyle('border: 1px solid rgb(0, 255, 255); color: green')), 'border: 1px solid #00ffff; color: green;' ); equal( dom.serializeStyle(dom.parseStyle('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( dom.serializeStyle(dom.parseStyle('border-width: 1pt 1pt 1pt 1pt; border-style: none none none none; border-color: black black black black;')), 'border: 1pt none black;' ); equal( dom.serializeStyle(dom.parseStyle('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( dom.serializeStyle(dom.parseStyle('background: transparent url(test.gif);')), 'background: transparent url(\'Xtest.gifY\');' ); equal( dom.serializeStyle(dom.parseStyle('background: transparent url(http://www.site.com/test.gif?a=1&b=2);')), 'background: transparent url(\'Xhttp://www.site.com/test.gif?a=1&b=2Y\');' ); dom.setHTML('test', ''); equal(dom.getAttrib('test2', 'style'), 'margin: 1px;'); dom.setHTML('test', ''); equal(dom.getAttrib('test2', 'style'), 'background-image: url(\'Xtest.gifY\');'); dom.get('test').innerHTML = ''; equal(dom.getAttrib('test2', 'style'), tinymce.isIE && !window.getSelection ? 'border: #00ff00 1px solid;' : 'border: 1px solid #00ff00;'); // IE has a separate output dom.get('test').innerHTML = ''; equal(dom.getAttrib('test2', 'style'), 'background-image: url(\'Xhttp://www.site.com/test.gifY\');'); DOM.remove('test'); }); test('addClass', function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').className = ''; DOM.addClass('test', 'abc'); equal(DOM.get('test').className, 'abc'); DOM.addClass('test', '123'); equal(DOM.get('test').className, 'abc 123'); DOM.get('test').innerHTML = ''; DOM.addClass(DOM.select('span', 'test'), 'abc'); equal(DOM.get('test2').className, 'abc'); equal(DOM.get('test3').className, 'abc'); equal(DOM.get('test4').className, 'abc'); DOM.get('test').innerHTML = ''; DOM.remove('test'); }); test('removeClass', 5, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').className = 'abc 123 xyz'; DOM.removeClass('test', '123'); equal(DOM.get('test').className, 'abc xyz'); DOM.get('test').innerHTML = ''; DOM.removeClass(DOM.select('span', 'test'), 'test1'); equal(DOM.get('test2').className, ''); equal(DOM.get('test3').className, 'test test'); equal(DOM.get('test4').className, 'test'); DOM.get('test').innerHTML = ''; DOM.removeClass('test2', 'test'); equal(Utils.normalizeHtml(DOM.get('test').innerHTML), ''); DOM.remove('test'); }); test('hasClass', 7, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').className = 'abc 123 xyz'; ok(DOM.hasClass('test', 'abc')); ok(DOM.hasClass('test', '123')); ok(DOM.hasClass('test', 'xyz')); ok(!DOM.hasClass('test', 'aaa')); DOM.get('test').className = 'abc'; ok(DOM.hasClass('test', 'abc')); DOM.get('test').className = 'aaa abc'; ok(DOM.hasClass('test', 'abc')); DOM.get('test').className = 'abc aaa'; ok(DOM.hasClass('test', 'abc')); DOM.remove('test'); }); test('add', 5, function() { var e; DOM.add(document.body, 'div', {id : 'test'}); DOM.add('test', 'span', {'class' : 'abc 123'}, 'content abc'); e = DOM.get('test').getElementsByTagName('span')[0]; equal(e.className, 'abc 123'); equal(e.innerHTML.toLowerCase(), 'content abc'); DOM.remove(e); DOM.add('test', 'span', {'class' : 'abc 123'}); e = DOM.get('test').getElementsByTagName('span')[0]; equal(e.className, 'abc 123'); DOM.remove(e); DOM.add('test', 'span'); e = DOM.get('test').getElementsByTagName('span')[0]; equal(e.nodeName, 'SPAN'); DOM.remove(e); DOM.get('test').innerHTML = ''; DOM.add(['test2', 'test3', 'test4'], 'span', {'class' : 'abc 123'}); equal(DOM.select('span', 'test').length, 6); DOM.remove('test'); }); test('create', 3, function() { var e; e = DOM.create('span', {'class' : 'abc 123'}, 'content abc'); equal(e.nodeName, 'SPAN'); equal(e.className, 'abc 123'); equal(e.innerHTML.toLowerCase(), 'content abc'); }); test('createHTML', 5, function() { equal(DOM.createHTML('span', {'id': 'id1', 'class': 'abc 123'}, 'content abc'), 'content abc'); equal(DOM.createHTML('span', {'id': 'id1', 'class': 'abc 123'}), ''); equal(DOM.createHTML('span', {'id': null, 'class': undefined}), ''); equal(DOM.createHTML('span'), ''); equal(DOM.createHTML('span', null, 'content abc'), 'content abc'); }); test('uniqueId', 3, function() { DOM.counter = 0; equal(DOM.uniqueId(), 'mce_0'); equal(DOM.uniqueId(), 'mce_1'); equal(DOM.uniqueId(), 'mce_2'); }); test('showHide', function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.show('test'); equal(DOM.get('test').style.display, ''); ok(!DOM.isHidden('test')); DOM.hide('test'); equal(DOM.get('test').style.display, 'none'); ok(DOM.isHidden('test')); // Cleanup DOM.setAttrib('test', 'style', ''); DOM.remove('test'); }); test('select', 4, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', '
test 1
test 2
test 3
test 4
'); equal(DOM.select('div', 'test').length, 4); ok(DOM.select('div', 'test').reverse); DOM.setHTML('test', '
test 1
test 2
test 3
test 4
'); equal(DOM.select('div.test2', 'test').length, 2); DOM.setHTML('test', '
test 1
test 2
test 3
test 4
'); equal(DOM.select('div div', 'test').length, 1, null, tinymce.isWebKit); // Issue: http://bugs.webkit.org/show_bug.cgi?id=17461 //alert(DOM.select('div div', 'test').length +","+DOM.get('test').querySelectorAll('div div').length); DOM.remove('test'); }); test('is', 3, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', '
test 1
'); ok(DOM.is(DOM.get('textX'), 'div')); ok(DOM.is(DOM.get('textX'), 'div#textX.test')); ok(!DOM.is(DOM.get('textX'), 'div#textX2')); DOM.remove('test'); }); test('encode', 1, function() { equal(DOM.encode('abc<>"&\'\u00e5\u00e4\u00f6'), 'abc<>"&'\u00e5\u00e4\u00f6'); }); test('setGetAttrib', function() { var dom; DOM.add(document.body, 'div', {id : 'test'}); DOM.setAttrib('test', 'class', 'test 123'); equal(DOM.getAttrib('test', 'class'), 'test 123'); DOM.setAttrib('test', 'src', 'url'); equal(DOM.getAttrib('test', 'src'), 'url'); equal(DOM.getAttrib('test', 'data-mce-src'), 'url'); equal(DOM.getAttrib('test', 'abc'), ''); DOM.setAttribs('test', {'class' : '123', title : 'abc'}); equal(DOM.getAttrib('test', 'class'), '123'); equal(DOM.getAttrib('test', 'title'), 'abc'); DOM.setAttribs('test'); equal(DOM.getAttrib('test', 'class'), '123'); equal(DOM.getAttrib('test', 'title'), 'abc'); dom = new tinymce.dom.DOMUtils(document, {keep_values : true, url_converter : function(u, n) { return '&<>"' + u + '&<>"' + n; }}); dom.setAttribs('test', {src : '123', href : 'abc'}); equal(DOM.getAttrib('test', 'src'), '&<>"123&<>"src'); equal(DOM.getAttrib('test', 'href'), '&<>"abc&<>"href'); equal(DOM.getAttrib(document, 'test'), false); equal(DOM.getAttrib(document, 'test', ''), ''); equal(DOM.getAttrib(document, 'test', 'x'), 'x'); DOM.remove('test'); }); test('setGetAttrib on null', function() { strictEqual(DOM.getAttrib(null, 'test'), ''); DOM.setAttrib(null, 'test'); }); test('getAttribs', 2, function() { function check(obj, val) { var count = 0; val = val.split(','); tinymce.each(obj, function(o) { if (tinymce.inArray(val, o.nodeName.toLowerCase()) != -1 && o.specified) { count++; } }); return count == obj.length; } DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = ''; ok(check(DOM.getAttribs('test2'), 'id,class')); DOM.get('test').innerHTML = '
'; ok(check(DOM.getAttribs('test2'), 'id,type,name,value,disabled,readonly,checked'), 'Expected attributed: type,name,disabled,readonly,checked'); DOM.remove('test'); }); test('setGetStyles', function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setStyle('test', 'font-size', '20px'); equal(DOM.getStyle('test', 'font-size'), '20px'); DOM.setStyle('test', 'fontSize', '21px'); equal(DOM.getStyle('test', 'fontSize'), '21px'); DOM.setStyles('test', {fontSize : '22px', display : 'inline'}); equal(DOM.getStyle('test', 'fontSize'), '22px'); equal(DOM.getStyle('test', 'display'), 'inline'); DOM.setStyle('test', 'fontSize', 23); equal(DOM.getStyle('test', 'fontSize'), '23px'); DOM.setStyle('test', 'fontSize', 23); DOM.setStyle('test', 'fontSize', ''); equal(DOM.getStyle('test', 'fontSize'), ''); DOM.setStyle('test', 'fontSize', 23); DOM.setStyle('test', 'fontSize', null); equal(DOM.getStyle('test', 'fontSize'), ''); DOM.setAttrib('test', 'style', ''); equal(typeof DOM.getStyle(null, 'fontSize'), 'undefined'); DOM.remove('test'); }); test('getPos', 2, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setStyles('test', {position : 'absolute', left : 100, top : 110}); equal(DOM.getPos('test').x, 100); equal(DOM.getPos('test').y, 110); DOM.setAttrib('test', 'style', ''); DOM.remove('test'); }); test('getParent', 6, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = '
ababcc
'; equal(DOM.getParent('test2', function(n) {return n.nodeName == 'SPAN';}).nodeName, 'SPAN'); equal(DOM.getParent('test2', function(n) {return n.nodeName == 'BODY';}).nodeName, 'BODY'); equal(DOM.getParent('test2', function(n) {return n.nodeName == 'BODY';}, document.body), null); equal(DOM.getParent('test2', function() {return false;}), null); equal(DOM.getParent('test2', 'SPAN').nodeName, 'SPAN'); equal(DOM.getParent('test2', 'body', DOM.get('test')), null); DOM.get('test').innerHTML = ''; DOM.remove('test'); }); test('getParents', 4, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = '
ababcc
'; equal(DOM.getParents('test2', function(n) {return n.nodeName == 'SPAN';}).length, 2); equal(DOM.getParents('test2', 'span').length, 2); equal(DOM.getParents('test2', 'span.test').length, 1); equal(DOM.getParents('test2', 'body', DOM.get('test')).length, 0); DOM.remove('test'); }); test('is', 2, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = '
ababcc
'; ok(DOM.is(DOM.select('span', 'test'), 'span')); ok(DOM.is(DOM.select('#test2', 'test'), '#test2')); DOM.remove('test'); }); test('getViewPort', 4, function() { var wp; wp = DOM.getViewPort(); equal(wp.x, 0); equal(wp.y, 0); ok(wp.w > 0); ok(wp.h > 0); }); test('getRect', 5, function() { var r; DOM.add(document.body, 'div', {id : 'test'}); DOM.setStyles('test', {position : 'absolute', left : 100, top : 110, width : 320, height : 240}); r = DOM.getRect('test'); equal(r.x, 100); equal(r.y, 110); equal(r.w, 320); equal(r.h, 240); DOM.setAttrib('test', 'style', ''); DOM.get('test').innerHTML = '
'; r = DOM.getRect('test2'); equal(r.w, 160); DOM.remove('test'); }); test('getSize', 2, function() { var r; DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = '
'; r = DOM.getSize('test2'); equal(r.w, 160); DOM.get('test').innerHTML = '
'; r = DOM.getSize('test2'); equal(r.w, 100); DOM.remove('test'); }); test('getNext', 5, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = 'ABC'; equal(DOM.getNext(DOM.get('test').firstChild, '*').nodeName, 'SPAN'); equal(DOM.getNext(DOM.get('test').firstChild, 'em').nodeName, 'EM'); equal(DOM.getNext(DOM.get('test').firstChild, 'div'), null); equal(DOM.getNext(null, 'div'), null); equal(DOM.getNext(DOM.get('test').firstChild, function(n) {return n.nodeName == 'EM';}).nodeName, 'EM'); DOM.remove('test'); }); test('getPrev', 5, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.get('test').innerHTML = 'ABC'; equal(DOM.getPrev(DOM.get('test').lastChild, '*').nodeName, 'SPAN'); equal(DOM.getPrev(DOM.get('test').lastChild, 'strong').nodeName, 'STRONG'); equal(DOM.getPrev(DOM.get('test').lastChild, 'div'), null); equal(DOM.getPrev(null, 'div'), null); equal(DOM.getPrev(DOM.get('test').lastChild, function(n) {return n.nodeName == 'STRONG';}).nodeName, 'STRONG'); DOM.remove('test'); }); test('loadCSS', 1, function() { var c = 0; DOM.loadCSS('tinymce/dom/test.css?a=1,tinymce/dom/test.css?a=2,tinymce/dom/test.css?a=3'); tinymce.each(document.getElementsByTagName('link'), function(n) { if (n.href.indexOf('test.css?a=') != -1) { c++; } }); equal(c, 3, null, tinymce.isOpera); }); test('insertAfter', 2, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', ''); DOM.insertAfter(DOM.create('br'), 'test2'); equal(DOM.get('test2').nextSibling.nodeName, 'BR'); DOM.setHTML('test', 'testtest'); DOM.insertAfter(DOM.create('br'), 'test2'); equal(DOM.get('test2').nextSibling.nodeName, 'BR'); DOM.remove('test'); }); test('isBlock', 4, function() { ok(DOM.isBlock(DOM.create('div'))); ok(DOM.isBlock('DIV')); ok(!DOM.isBlock('SPAN')); ok(DOM.isBlock('div')); }); test('remove', 2, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', 'testtest2'); DOM.remove('test2', 1); equal(DOM.get('test').innerHTML.toLowerCase(), 'testtest2'); DOM.setHTML('test', 'testtest2'); equal(DOM.remove('test2').nodeName, 'SPAN'); DOM.remove('test'); }); test('replace', 2, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', 'testtest2'); DOM.replace(DOM.create('div', {id : 'test2'}), 'test2', 1); equal(DOM.get('test2').innerHTML.toLowerCase(), 'testtest2'); DOM.setHTML('test', 'testtest2'); DOM.replace(DOM.create('div', {id : 'test2'}), 'test2'); equal(DOM.get('test2').innerHTML, ''); DOM.remove('test'); }); test('toHex', 5, function() { equal(DOM.toHex('rgb(0, 255, 255)'), '#00ffff'); equal(DOM.toHex('rgb(255, 0, 0)'), '#ff0000'); equal(DOM.toHex('rgb(0, 0, 255)'), '#0000ff'); equal(DOM.toHex('rgb ( 0 , 0 , 255 ) '), '#0000ff'); equal(DOM.toHex(' RGB ( 0 , 0 , 255 ) '), '#0000ff'); }); test('getOuterHTML', 4, function() { DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', 'testtest2'); equal(DOM.getOuterHTML('test2').toLowerCase().replace(/\"/g, ''), 'testtest2'); DOM.setHTML('test', 'testtest2'); DOM.setOuterHTML('test2', '
123
'); equal(tinymce.trim(DOM.getOuterHTML('test2') || '').toLowerCase().replace(/\"/g, ''), '
123
'); DOM.setHTML('test', 'testtest2'); DOM.setOuterHTML('test2', '
123
abc
'); equal(tinymce.trim(DOM.get('test').innerHTML).toLowerCase().replace(/>\s+<').replace(/\"/g, ''), '
123
abc
'); DOM.setHTML('test', 'test'); equal(tinymce.trim(DOM.getOuterHTML(DOM.get('test').firstChild)), 'test'); DOM.remove('test'); }); test('encodeDecode', 2, function() { equal(DOM.encode('\u00e5\u00e4\u00f6&<>"'), '\u00e5\u00e4\u00f6&<>"'); equal(DOM.decode('åäö&<>"'), '\u00e5\u00e4\u00f6&<>"'); }); test('split', 2, function() { var point, parent; DOM.add(document.body, 'div', {id : 'test'}); DOM.setHTML('test', '

text1innertext2

'); parent = DOM.select('p', DOM.get('test'))[0]; point = DOM.select('span', DOM.get('test'))[0]; DOM.split(parent, point); equal(DOM.get('test').innerHTML.toLowerCase().replace(/\s+/g, ''), '

text1

inner

text2

'); DOM.setHTML('test', ''); parent = DOM.select('li:nth-child(1)', DOM.get('test'))[0]; point = DOM.select('ul li:nth-child(2)', DOM.get('test'))[0]; DOM.split(parent, point); equal(Utils.cleanHtml(DOM.get('test').innerHTML), ''); DOM.remove('test'); }); test('nodeIndex', 5, function() { DOM.add(document.body, 'div', {id : 'test'}, 'abcabcabc'); equal(DOM.nodeIndex(DOM.get('test').childNodes[0]), 0, 'Index of first child.'); equal(DOM.nodeIndex(DOM.get('test').childNodes[1]), 1, 'Index of second child.'); equal(DOM.nodeIndex(DOM.get('test').childNodes[2]), 2, 'Index of third child.'); DOM.get('test').insertBefore(DOM.doc.createTextNode('a'), DOM.get('test').firstChild); DOM.get('test').insertBefore(DOM.doc.createTextNode('b'), DOM.get('test').firstChild); equal(DOM.nodeIndex(DOM.get('test').lastChild), 4, 'Index of last child with fragmented DOM.'); equal(DOM.nodeIndex(DOM.get('test').lastChild, true), 2, 'Normalized index of last child with fragmented DOM.'); DOM.remove('test'); }); test('isEmpty', 14, function() { DOM.schema = new tinymce.html.Schema(); // A schema will be added when used within a editor instance DOM.add(document.body, 'div', {id : 'test'}, ''); ok(DOM.isEmpty(DOM.get('test')), 'No children'); DOM.setHTML('test', '
'); ok(DOM.isEmpty(DOM.get('test')), 'Br child'); DOM.setHTML('test', '

'); ok(!DOM.isEmpty(DOM.get('test')), 'Br children'); DOM.setHTML('test', 'text'); ok(!DOM.isEmpty(DOM.get('test')), 'Text child'); DOM.setHTML('test', 'text'); ok(!DOM.isEmpty(DOM.get('test')), 'Text child in span'); DOM.setHTML('test', ''); ok(DOM.isEmpty(DOM.get('test')), 'Empty span child'); DOM.setHTML('test', '
'); ok(DOM.isEmpty(DOM.get('test')), 'Empty complex HTML'); DOM.setHTML('test', '
X
'); ok(!DOM.isEmpty(DOM.get('test')), 'Non empty complex HTML'); DOM.setHTML('test', '
'); ok(DOM.isEmpty(DOM.get('test')), 'Non empty complex HTML with space'); DOM.setHTML('test', '
'); ok(!DOM.isEmpty(DOM.get('test')), 'Non empty complex HTML with achor name'); DOM.setHTML('test', ''); ok(!DOM.isEmpty(DOM.get('test')), 'Non empty html with img element'); DOM.setHTML('test', ''); ok(!DOM.isEmpty(DOM.get('test')), 'Span with bookmark attribute.'); DOM.setHTML('test', ''); ok(DOM.isEmpty(DOM.get('test')), 'Span with data-mce attribute.'); DOM.setHTML('test', '
'); ok(!DOM.isEmpty(DOM.get('test')), 'Element with comment.'); DOM.remove('test'); }); test('isEmpty with list of elements considered non-empty', function() { var elm = DOM.create('p', null, ''); equal(false, DOM.isEmpty(elm, {img: true})); }); test('isEmpty with list of elements considered non-empty without schema', function() { var domWithoutSchema = new tinymce.dom.DOMUtils(document, {keep_values: true}); var elm = domWithoutSchema.create('p', null, ''); equal(false, domWithoutSchema.isEmpty(elm, {img: true})); }); test('isEmpty on P with BR in EM', function() { var elm = DOM.create('p', null, '
'); ok(DOM.isEmpty(elm, 'No children')); }); test('isEmpty on P with two BR in EM', function() { var elm = DOM.create('p', null, '

'); equal(false, DOM.isEmpty(elm)); }); test('bind/unbind/fire', function() { var count = 0; DOM.bind(document, 'click', function() {count++;}); DOM.fire(document, 'click'); DOM.unbind(document, 'click'); equal(count, 1); count = 0; DOM.bind([document, window], 'click', function(e) {e.stopPropagation(); count++;}); DOM.fire(document, 'click'); DOM.fire(window, 'click'); DOM.unbind([document, window], 'click'); equal(count, 2); count = 0; DOM.fire(document, 'click'); DOM.fire(window, 'click'); equal(count, 0); }); DOM.remove('test'); })();