import { Pipeline } from '@ephox/agar';
import { LegacyUnit } from '@ephox/mcagar';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import Schema from 'tinymce/core/api/html/Schema';
import HtmlUtils from '../../module/test/HtmlUtils';
import Tools from 'tinymce/core/api/util/Tools';
import { UnitTest } from '@ephox/bedrock';

UnitTest.asynctest('browser.tinymce.core.dom.DomUtilsTest', function () {
  const DOM = DOMUtils(document, { keep_values : true, schema : Schema() });
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  suite.test('parseStyle', function () {
    let dom;

    DOM.add(document.body, 'div', { id : 'test' });

    dom = DOMUtils(document, { hex_colors : true, keep_values : true, url_converter (u) {
      return 'X' + u + 'Y';
    } });

    LegacyUnit.equal(
      dom.serializeStyle(dom.parseStyle('border: 1px solid red; color: green')),
      'border: 1px solid red; color: green;'
    );

    LegacyUnit.equal(
      dom.serializeStyle(dom.parseStyle('border: 1px solid rgb(0, 255, 255); color: green')),
      'border: 1px solid #00ffff; color: green;'
    );

    LegacyUnit.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;'
    );

    LegacyUnit.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;'
    );

    LegacyUnit.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;'
    );

    LegacyUnit.equal(
      dom.serializeStyle(dom.parseStyle('background: transparent url(test.gif);')),
      'background: transparent url(\'Xtest.gifY\');'
    );

    LegacyUnit.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', '<span id="test2" style="   margin-left: 1px;    margin-top: 1px;   margin-right: 1px;   margin-bottom: 1px   "></span>');
    LegacyUnit.equal(dom.getAttrib('test2', 'style'), 'margin: 1px;');

    dom.setHTML('test', '<span id="test2" style="background-image: url(test.gif);"></span>');
    LegacyUnit.equal(dom.getAttrib('test2', 'style'), 'background-image: url(\'Xtest.gifY\');');

    // dom.get('test').innerHTML = '<span id="test2" style="border: 1px solid #00ff00"></span>';
    // LegacyUnit.equal(dom.getAttrib('test2', 'style'), Env.ue && !window.getSelection ?
    // 'border: #00ff00 1px solid;' : 'border: 1px solid #00ff00;'); // IE has a separate output

    dom.get('test').innerHTML = '<span id="test2" style="background-image: url(http://www.site.com/test.gif);"></span>';
    LegacyUnit.equal(dom.getAttrib('test2', 'style'), 'background-image: url(\'Xhttp://www.site.com/test.gifY\');');

    DOM.remove('test');
  });

  suite.test('addClass', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').className = '';
    DOM.addClass('test', 'abc');
    LegacyUnit.equal(DOM.get('test').className, 'abc');

    DOM.addClass('test', '123');
    LegacyUnit.equal(DOM.get('test').className, 'abc 123');

    DOM.get('test').innerHTML = '<span id="test2"></span><span id="test3"></span><span id="test4"></span>';
    DOM.addClass(DOM.select('span', 'test'), 'abc');
    LegacyUnit.equal(DOM.get('test2').className, 'abc');
    LegacyUnit.equal(DOM.get('test3').className, 'abc');
    LegacyUnit.equal(DOM.get('test4').className, 'abc');
    DOM.get('test').innerHTML = '';

    DOM.remove('test');
  });

  suite.test('removeClass', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').className = 'abc 123 xyz';
    DOM.removeClass('test', '123');
    LegacyUnit.equal(DOM.get('test').className, 'abc xyz');

    DOM.get('test').innerHTML = (
      '<span id="test2" class="test1"></span><span id="test3" class="test test1 test"></span><span id="test4" class="test1 test"></span>'
    );
    DOM.removeClass(DOM.select('span', 'test'), 'test1');
    LegacyUnit.equal(DOM.get('test2').className, '');
    LegacyUnit.equal(DOM.get('test3').className, 'test test');
    LegacyUnit.equal(DOM.get('test4').className, 'test');

    DOM.get('test').innerHTML = '<span id="test2" class="test"></span>';
    DOM.removeClass('test2', 'test');
    LegacyUnit.equal(HtmlUtils.normalizeHtml(DOM.get('test').innerHTML), '<span id="test2"></span>');

    DOM.remove('test');
  });

  suite.test('hasClass', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').className = 'abc 123 xyz';
    LegacyUnit.equal(DOM.hasClass('test', 'abc'), true);
    LegacyUnit.equal(DOM.hasClass('test', '123'), true);
    LegacyUnit.equal(DOM.hasClass('test', 'xyz'), true);
    LegacyUnit.equal(DOM.hasClass('test', 'aaa'), false);

    DOM.get('test').className = 'abc';
    LegacyUnit.equal(DOM.hasClass('test', 'abc'), true);

    DOM.get('test').className = 'aaa abc';
    LegacyUnit.equal(DOM.hasClass('test', 'abc'), true);

    DOM.get('test').className = 'abc aaa';
    LegacyUnit.equal(DOM.hasClass('test', 'abc'), true);

    DOM.remove('test');
  });

  suite.test('add', function () {
    let e;

    DOM.add(document.body, 'div', { id : 'test' });

    DOM.add('test', 'span', { class : 'abc 123' }, 'content <b>abc</b>');
    e = DOM.get('test').getElementsByTagName('span')[0];
    LegacyUnit.equal(e.className, 'abc 123');
    LegacyUnit.equal(e.innerHTML.toLowerCase(), 'content <b>abc</b>');
    DOM.remove(e);

    DOM.add('test', 'span', { class : 'abc 123' });
    e = DOM.get('test').getElementsByTagName('span')[0];
    LegacyUnit.equal(e.className, 'abc 123');
    DOM.remove(e);

    DOM.add('test', 'span');
    e = DOM.get('test').getElementsByTagName('span')[0];
    LegacyUnit.equal(e.nodeName, 'SPAN');
    DOM.remove(e);

    DOM.get('test').innerHTML = '<span id="test2"></span><span id="test3"></span><span id="test4"></span>';
    DOM.add(['test2', 'test3', 'test4'], 'span', { class : 'abc 123' });
    LegacyUnit.equal(DOM.select('span', 'test').length, 6);

    DOM.remove('test');
  });

  suite.test('create', function () {
    let e;

    e = DOM.create('span', { class : 'abc 123' }, 'content <b>abc</b>');

    LegacyUnit.equal(e.nodeName, 'SPAN');
    LegacyUnit.equal(e.className, 'abc 123');
    LegacyUnit.equal(e.innerHTML.toLowerCase(), 'content <b>abc</b>');
  });

  suite.test('createHTML', function () {
    LegacyUnit.equal(
      DOM.createHTML('span', { id: 'id1', class: 'abc 123' }, 'content <b>abc</b>'),
      '<span id="id1" class="abc 123">content <b>abc</b></span>'
    );
    LegacyUnit.equal(DOM.createHTML('span', { id: 'id1', class: 'abc 123' }), '<span id="id1" class="abc 123" />');
    LegacyUnit.equal(DOM.createHTML('span', { id: null, class: undefined }), '<span />');
    LegacyUnit.equal(DOM.createHTML('span'), '<span />');
    LegacyUnit.equal(DOM.createHTML('span', null, 'content <b>abc</b>'), '<span>content <b>abc</b></span>');
  });

  suite.test('uniqueId', function () {
    LegacyUnit.equal(DOM.uniqueId(), 'mce_0');
    LegacyUnit.equal(DOM.uniqueId(), 'mce_1');
    LegacyUnit.equal(DOM.uniqueId(), 'mce_2');
  });

  suite.test('showHide', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.show('test');
    LegacyUnit.equal(DOM.get('test').style.display, '');
    LegacyUnit.equal(DOM.isHidden('test'), false);

    DOM.hide('test');
    LegacyUnit.equal(DOM.get('test').style.display, 'none');
    LegacyUnit.equal(DOM.isHidden('test'), true);

    // Cleanup
    DOM.setAttrib('test', 'style', '');

    DOM.remove('test');
  });

  suite.test('select', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setHTML('test', '<div>test 1</div><div>test 2 <div>test 3</div></div><div>test 4</div>');
    LegacyUnit.equal(DOM.select('div', 'test').length, 4);
    LegacyUnit.equal(DOM.select('div', 'test').reverse !== undefined, true);

    DOM.setHTML('test', '<div class="test1 test2 test3">test 1</div><div class="test2">test 2 <div>test 3</div></div><div>test 4</div>');
    LegacyUnit.equal(DOM.select('div.test2', 'test').length, 2);

    DOM.setHTML('test', '<div class="test1 test2 test3">test 1</div><div class="test2">test 2 <div>test 3</div></div><div>test 4</div>');
    LegacyUnit.equal(DOM.select('div div', 'test').length, 1); // 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');
  });

  suite.test('is', function () {
    DOM.add(document.body, 'div', { id : 'test' });
    DOM.setHTML('test', '<div id="textX" class="test">test 1</div>');

    LegacyUnit.equal(DOM.is(DOM.get('textX'), 'div'), true);
    LegacyUnit.equal(DOM.is(DOM.get('textX'), 'div#textX.test'), true);
    LegacyUnit.equal(DOM.is(DOM.get('textX'), 'div#textX2'), false);
    LegacyUnit.equal(DOM.is(null, 'div#textX2'), false);

    DOM.remove('test');
  });

  suite.test('encode', function () {
    LegacyUnit.equal(DOM.encode('abc<>"&\'\u00e5\u00e4\u00f6'), 'abc&lt;&gt;&quot;&amp;&#39;\u00e5\u00e4\u00f6');
  });

  suite.test('setGetAttrib', function () {
    let dom;

    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setAttrib('test', 'class', 'test 123');
    LegacyUnit.equal(DOM.getAttrib('test', 'class'), 'test 123');

    DOM.setAttrib('test', 'src', 'url');
    LegacyUnit.equal(DOM.getAttrib('test', 'src'), 'url');
    LegacyUnit.equal(DOM.getAttrib('test', 'data-mce-src'), 'url');
    LegacyUnit.equal(DOM.getAttrib('test', 'abc'), '');

    DOM.setAttribs('test', { class : '123', title : 'abc' });
    LegacyUnit.equal(DOM.getAttrib('test', 'class'), '123');
    LegacyUnit.equal(DOM.getAttrib('test', 'title'), 'abc');

    DOM.setAttribs('test', {});
    LegacyUnit.equal(DOM.getAttrib('test', 'class'), '123');
    LegacyUnit.equal(DOM.getAttrib('test', 'title'), 'abc');

    dom = DOMUtils(document, { keep_values : true, url_converter (u, n) {
      return '&<>"' + u + '&<>"' + n;
    } });

    dom.setAttribs('test', { src : '123', href : 'abc' });
    LegacyUnit.equal(DOM.getAttrib('test', 'src'), '&<>"123&<>"src');
    LegacyUnit.equal(DOM.getAttrib('test', 'href'), '&<>"abc&<>"href');

    LegacyUnit.equal(DOM.getAttrib(document, 'test'), '');
    LegacyUnit.equal(DOM.getAttrib(document, 'test', ''), '');
    LegacyUnit.equal(DOM.getAttrib(document, 'test', 'x'), 'x');

    DOM.remove('test');
  });

  suite.test('setGetAttrib on null', function () {
    LegacyUnit.equal(DOM.getAttrib(null, 'test'), '');
    DOM.setAttrib(null, 'test', null);
  });

  suite.test('getAttribs', function () {
    const check = function (obj, val) {
      let count = 0;

      val = val.split(',');

      Tools.each(obj, function (o) {
        if (Tools.inArray(val, o.nodeName.toLowerCase()) !== -1 && o.specified) {
          count++;
        }
      });

      return count === obj.length;
    };

    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').innerHTML = '<span id="test2" class="test"></span>';
    LegacyUnit.equal(check(DOM.getAttribs('test2'), 'id,class'), true);

    DOM.get('test').innerHTML = '<input id="test2" type="checkbox" name="test" value="1" disabled readonly checked></span>';
    LegacyUnit.equal(
      check(DOM.getAttribs('test2'), 'id,type,name,value,disabled,readonly,checked'),
      true,
      'Expected attributed: type,name,disabled,readonly,checked'
    );

    DOM.remove('test');
  });

  suite.test('setGetStyles', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setStyle('test', 'font-size', '20px');
    LegacyUnit.equal(DOM.getStyle('test', 'font-size'), '20px');

    DOM.setStyle('test', 'fontSize', '21px');
    LegacyUnit.equal(DOM.getStyle('test', 'fontSize'), '21px');

    DOM.setStyles('test', { fontSize : '22px', display : 'inline' });
    LegacyUnit.equal(DOM.getStyle('test', 'fontSize'), '22px');
    LegacyUnit.equal(DOM.getStyle('test', 'display'), 'inline');

    DOM.setStyle('test', 'fontSize', 23);
    LegacyUnit.equal(DOM.getStyle('test', 'fontSize'), '23px');

    DOM.setStyle('test', 'fontSize', 23);
    DOM.setStyle('test', 'fontSize', '');
    LegacyUnit.equal(DOM.getStyle('test', 'fontSize'), '');

    DOM.setStyle('test', 'fontSize', 23);
    DOM.setStyle('test', 'fontSize', null);
    LegacyUnit.equal(DOM.getStyle('test', 'fontSize'), '');

    DOM.setAttrib('test', 'style', '');
    LegacyUnit.equal(typeof DOM.getStyle(null, 'fontSize'), 'undefined');

    DOM.remove('test');
  });

  suite.test('getPos', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setStyles('test', { position : 'absolute', left : 100, top : 110 });
    LegacyUnit.equal(DOM.getPos('test').x, 100);
    LegacyUnit.equal(DOM.getPos('test').y, 110);

    DOM.setAttrib('test', 'style', '');

    DOM.remove('test');
  });

  const eqNodeName = function (name) {
    return function (n) {
      return n.nodeName === name;
    };
  };

  suite.test('getParent', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').innerHTML = '<div><span>ab<a id="test2" href="">abc</a>c</span></div>';

    LegacyUnit.equal(DOM.getParent('test2', eqNodeName('SPAN')).nodeName, 'SPAN');
    LegacyUnit.equal(DOM.getParent('test2', eqNodeName('BODY')).nodeName, 'BODY');
    LegacyUnit.equal(DOM.getParent('test2', eqNodeName('BODY'), document.body), null);
    LegacyUnit.equal(DOM.getParent('test2', eqNodeName('X')), null);
    LegacyUnit.equal(DOM.getParent('test2', 'SPAN').nodeName, 'SPAN');
    LegacyUnit.equal(DOM.getParent('test2', 'body', DOM.get('test')), null);

    DOM.get('test').innerHTML = '';

    DOM.remove('test');
  });

  suite.test('getParents', function () {
    DOM.add(document.body, 'div', { id : 'test' });
    DOM.get('test').innerHTML = '<div><span class="test">ab<span><a id="test2" href="">abc</a>c</span></span></div>';

    LegacyUnit.equal(DOM.getParents('test2', eqNodeName('SPAN')).length, 2);
    LegacyUnit.equal(DOM.getParents('test2', 'span').length, 2);
    LegacyUnit.equal(DOM.getParents('test2', 'span.test').length, 1);
    LegacyUnit.equal(DOM.getParents('test2', 'body', DOM.get('test')).length, 0);

    DOM.remove('test');
  });

  suite.test('is', function () {
    DOM.add(document.body, 'div', { id : 'test' });
    DOM.get('test').innerHTML = '<div><span class="test">ab<span><a id="test2" href="">abc</a>c</span></span></div>';

    LegacyUnit.equal(DOM.is(DOM.select('span', 'test'), 'span'), true);
    LegacyUnit.equal(DOM.is(DOM.select('#test2', 'test'), '#test2'), true);

    DOM.remove('test');
  });

  suite.test('getViewPort', function () {
    let wp;

    wp = DOM.getViewPort();
    LegacyUnit.equal(wp.x, 0);
    LegacyUnit.equal(wp.y, 0);
    LegacyUnit.equal(wp.w > 0, true);
    LegacyUnit.equal(wp.h > 0, true);
  });

  suite.test('getRect', function () {
    let 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');
    LegacyUnit.equal(r.x, 100);
    LegacyUnit.equal(r.y, 110);
    LegacyUnit.equal(r.w, 320);
    LegacyUnit.equal(r.h, 240);

    DOM.setAttrib('test', 'style', '');

    DOM.get('test').innerHTML = '<div style="width:320px;height:240px"><div id="test2" style="width:50%;height:240px"></div></div>';
    r = DOM.getRect('test2');
    LegacyUnit.equal(r.w, 160);

    DOM.remove('test');
  });

  suite.test('getSize', function () {
    let r;

    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').innerHTML = '<div style="width:320px;height:240px"><div id="test2" style="width:50%;height:240px"></div></div>';
    r = DOM.getSize('test2');
    LegacyUnit.equal(r.w, 160);

    DOM.get('test').innerHTML = '<div style="width:320px;height:240px"><div id="test2" style="width:100px;height:240px"></div></div>';
    r = DOM.getSize('test2');
    LegacyUnit.equal(r.w, 100);

    DOM.remove('test');
  });

  suite.test('getNext', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').innerHTML = '<strong>A</strong><span>B</span><em>C</em>';
    LegacyUnit.equal(DOM.getNext(DOM.get('test').firstChild, '*').nodeName, 'SPAN');
    LegacyUnit.equal(DOM.getNext(DOM.get('test').firstChild, 'em').nodeName, 'EM');
    LegacyUnit.equal(DOM.getNext(DOM.get('test').firstChild, 'div'), null);
    LegacyUnit.equal(DOM.getNext(null, 'div'), null);
    LegacyUnit.equal(DOM.getNext(DOM.get('test').firstChild, eqNodeName('EM')).nodeName, 'EM');

    DOM.remove('test');
  });

  suite.test('getPrev', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.get('test').innerHTML = '<strong>A</strong><span>B</span><em>C</em>';
    LegacyUnit.equal(DOM.getPrev(DOM.get('test').lastChild, '*').nodeName, 'SPAN');
    LegacyUnit.equal(DOM.getPrev(DOM.get('test').lastChild, 'strong').nodeName, 'STRONG');
    LegacyUnit.equal(DOM.getPrev(DOM.get('test').lastChild, 'div'), null);
    LegacyUnit.equal(DOM.getPrev(null, 'div'), null);
    LegacyUnit.equal(DOM.getPrev(DOM.get('test').lastChild, eqNodeName('STRONG')).nodeName, 'STRONG');

    DOM.remove('test');
  });

  suite.test('loadCSS', function () {
    let c = 0;

    DOM.loadCSS('tinymce/dom/test.css?a=1,tinymce/dom/test.css?a=2,tinymce/dom/test.css?a=3');

    Tools.each(document.getElementsByTagName('link'), function (n) {
      if (n.href.indexOf('test.css?a=') !== -1) {
        c++;
      }
    });

    LegacyUnit.equal(c, 3);
  });

  suite.test('insertAfter', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setHTML('test', '<span id="test2"></span>');
    DOM.insertAfter(DOM.create('br'), 'test2');
    LegacyUnit.equal(DOM.get('test2').nextSibling.nodeName, 'BR');

    DOM.setHTML('test', '<span>test</span><span id="test2"></span><span>test</span>');
    DOM.insertAfter(DOM.create('br'), 'test2');
    LegacyUnit.equal(DOM.get('test2').nextSibling.nodeName, 'BR');

    DOM.remove('test');
  });

  suite.test('isBlock', function () {
    LegacyUnit.equal(DOM.isBlock(DOM.create('div')), true);
    LegacyUnit.equal(DOM.isBlock('DIV'), true);
    LegacyUnit.equal(DOM.isBlock('SPAN'), false);
    LegacyUnit.equal(DOM.isBlock('div'), true);
  });

  suite.test('remove', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    DOM.remove('test2', true);
    LegacyUnit.equal(DOM.get('test').innerHTML.toLowerCase(), '<span>test</span><span>test2</span>');

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    LegacyUnit.equal(DOM.remove('test2').nodeName, 'SPAN');

    DOM.remove('test');
  });

  suite.test('replace', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    DOM.replace(DOM.create('div', { id : 'test2' }), 'test2', true);
    LegacyUnit.equal(DOM.get('test2').innerHTML.toLowerCase(), '<span>test</span><span>test2</span>');

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    DOM.replace(DOM.create('div', { id : 'test2' }), 'test2');
    LegacyUnit.equal(DOM.get('test2').innerHTML, '');

    DOM.remove('test');
  });

  suite.test('toHex', function () {
    LegacyUnit.equal(DOM.toHex('rgb(0, 255, 255)'), '#00ffff');
    LegacyUnit.equal(DOM.toHex('rgb(255, 0, 0)'), '#ff0000');
    LegacyUnit.equal(DOM.toHex('rgb(0, 0, 255)'), '#0000ff');
    LegacyUnit.equal(DOM.toHex('rgb  (  0  , 0  , 255  )  '), '#0000ff');
    LegacyUnit.equal(DOM.toHex('   RGB  (  0  , 0  , 255  )  '), '#0000ff');
  });

  suite.test('getOuterHTML', function () {
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    LegacyUnit.equal(DOM.getOuterHTML('test2').toLowerCase().replace(/\"/g, ''), '<span id=test2><span>test</span><span>test2</span></span>');

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    DOM.setOuterHTML('test2', '<div id="test2">123</div>');
    LegacyUnit.equal(Tools.trim(DOM.getOuterHTML('test2') || '').toLowerCase().replace(/\"/g, ''), '<div id=test2>123</div>');

    DOM.setHTML('test', '<span id="test2"><span>test</span><span>test2</span></span>');
    DOM.setOuterHTML('test2', '<div id="test2">123</div><div id="test3">abc</div>');
    LegacyUnit.equal(
      Tools.trim(DOM.get('test').innerHTML).toLowerCase().replace(/>\s+</g, '><').replace(/\"/g, ''),
      '<div id=test2>123</div><div id=test3>abc</div>'
    );

    DOM.setHTML('test', 'test');
    LegacyUnit.equal(Tools.trim(DOM.getOuterHTML(DOM.get('test').firstChild)), 'test');

    DOM.remove('test');
  });

  suite.test('encodeDecode', function () {
    LegacyUnit.equal(DOM.encode('\u00e5\u00e4\u00f6&<>"'), '\u00e5\u00e4\u00f6&amp;&lt;&gt;&quot;');
    LegacyUnit.equal(DOM.decode('&aring;&auml;&ouml;&amp;&lt;&gt;&quot;'), '\u00e5\u00e4\u00f6&<>"');
  });

  suite.test('split', function () {
    let point, parent;
    DOM.add(document.body, 'div', { id : 'test' });

    DOM.setHTML('test', '<p><b>text1<span>inner</span>text2</b></p>');
    parent = DOM.select('p', DOM.get('test'))[0];
    point = DOM.select('span', DOM.get('test'))[0];
    DOM.split(parent, point);
    LegacyUnit.equal(DOM.get('test').innerHTML.toLowerCase().replace(/\s+/g, ''), '<p><b>text1</b></p><span>inner</span><p><b>text2</b></p>');

    DOM.setHTML('test', '<ul><li>first line<br><ul><li><span>second</span> <span>line</span></li><li>third line<br></li></ul></li></ul>');
    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);
    LegacyUnit.equal(
      HtmlUtils.cleanHtml(DOM.get('test').innerHTML),
      '<ul><li>first line<br><ul><li><span>second</span> <span>line</span></li></ul></li><li>third line<br></li></ul>'
    );

    DOM.remove('test');
  });

  suite.test('nodeIndex', function () {
    DOM.add(document.body, 'div', { id : 'test' }, 'abc<b>abc</b>abc');

    LegacyUnit.equal(DOM.nodeIndex(DOM.get('test').childNodes[0]), 0, 'Index of first child.');
    LegacyUnit.equal(DOM.nodeIndex(DOM.get('test').childNodes[1]), 1, 'Index of second child.');
    LegacyUnit.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);

    LegacyUnit.equal(DOM.nodeIndex(DOM.get('test').lastChild), 4, 'Index of last child with fragmented DOM.');
    LegacyUnit.equal(DOM.nodeIndex(DOM.get('test').lastChild, true), 2, 'Normalized index of last child with fragmented DOM.');

    DOM.remove('test');
  });

  suite.test('isEmpty without defined schema', function () {
    DOM.add(document.body, 'div', { id : 'test' }, '');

    const domUtils = DOMUtils(document);

    DOM.setHTML('test', '<hr>');
    LegacyUnit.equal(domUtils.isEmpty(DOM.get('test')), false, 'Should be false since hr is something');

    DOM.setHTML('test', '<p><br></p>');
    LegacyUnit.equal(domUtils.isEmpty(DOM.get('test')), true, 'Should be true since the paragraph is empty');

    DOM.remove('test');
  });

  suite.test('isEmpty', function () {
    DOM.schema = Schema(); // A schema will be added when used within a editor instance
    DOM.add(document.body, 'div', { id : 'test' }, '');

    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'No children');

    DOM.setHTML('test', '<br />');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Br child');

    DOM.setHTML('test', '<br /><br />');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Br children');

    DOM.setHTML('test', 'text');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Text child');

    DOM.setHTML('test', '<span>text</span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Text child in span');

    DOM.setHTML('test', '<span></span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Empty span child');

    DOM.setHTML('test', '<div><span><b></b></span><b></b><em></em></div>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Empty complex HTML');

    DOM.setHTML('test', '<div><span><b></b></span><b></b><em>X</em></div>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Non empty complex HTML');

    DOM.setHTML('test', '<div><span><b></b></span><b></b><em> </em></div>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Non empty complex HTML with space');

    DOM.setHTML('test', '<div><span><b></b></span><b></b><em><a name="x"></a></em></div>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Non empty complex HTML with achor name');

    DOM.setHTML('test', '<img src="tinymce/ui/img/raster.gif">');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Non empty html with img element');

    DOM.setHTML('test', '<span data-mce-bookmark="1"></span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Span with bookmark attribute.');

    DOM.setHTML('test', '<span data-mce-style="color:Red"></span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Span with data-mce attribute.');

    DOM.setHTML('test', '<div><!-- comment --></div>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Element with comment.');

    DOM.setHTML('test', '<span data-mce-bogus="1"></span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Contains just a bogus element.');

    DOM.setHTML('test', '<span data-mce-bogus="1">a</span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Contains a text node in a bogus element.');

    DOM.setHTML('test', '<span data-mce-bogus="all">a</span>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), true, 'Contains just a bogus all element.');

    DOM.setHTML('test', '<span data-mce-bogus="all">a</span>b');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Contains a bogus all element but some text as well.');

    DOM.setHTML('test', '<code> </code>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Contains a code element should be treated as content.');

    DOM.setHTML('test', '<pre> </pre>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Contains a pre element should be treated as content.');

    DOM.setHTML('test', '<code></code>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Contains a code element should be treated as content.');

    DOM.setHTML('test', '<pre></pre>');
    LegacyUnit.equal(DOM.isEmpty(DOM.get('test')), false, 'Contains a pre element should be treated as content.');

    DOM.remove('test');
  });

  suite.test('isEmpty with list of elements considered non-empty', function () {
    const elm = DOM.create('p', null, '<img>');
    LegacyUnit.equal(false, DOM.isEmpty(elm, { img: true }));
  });

  suite.test('isEmpty on pre', function () {
    const elm = DOM.create('pre', null, '  ');
    LegacyUnit.equal(false, DOM.isEmpty(elm));
  });

  suite.test('isEmpty with list of elements considered non-empty without schema', function () {
    const domWithoutSchema = DOMUtils(document, { keep_values: true });

    const elm = domWithoutSchema.create('p', null, '<img>');
    LegacyUnit.equal(false, domWithoutSchema.isEmpty(elm, { img: true }));
  });

  suite.test('isEmpty on P with BR in EM', function () {
    const elm = DOM.create('p', null, '<em><br></em>');
    LegacyUnit.equal(DOM.isEmpty(elm), true, 'No children');
  });

  suite.test('isEmpty on P with two BR in EM', function () {
    const elm = DOM.create('p', null, '<em><br><br></em>');
    LegacyUnit.equal(false, DOM.isEmpty(elm));
  });

  suite.test('bind/unbind/fire', function () {
    let count = 0;

    DOM.bind(document, 'click', function () {
      count++;
    });
    DOM.fire(document, 'click');
    DOM.unbind(document, 'click');
    LegacyUnit.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');
    LegacyUnit.equal(count, 2);

    count = 0;
    DOM.fire(document, 'click');
    DOM.fire(window, 'click');
    LegacyUnit.equal(count, 0);
  });

  Pipeline.async({}, suite.toSteps({}), function () {
    DOM.remove('test');
    success();
  }, failure);
});