const applyDataToElement = function (editor, tableElm, data) {
  const dom = editor.dom;
  const attrs: any = {};
  let styles: any = {};

  attrs.class = data.class;

  styles.height = Util.addSizeSuffix(data.height);

  if (dom.getAttrib(tableElm, 'width') && !editor.settings.table_style_by_css) {
    attrs.width = Util.removePxSuffix(data.width);
  } else {
    styles.width = Util.addSizeSuffix(data.width);
  }

  if (editor.settings.table_style_by_css) {
    styles['border-width'] = Util.addSizeSuffix(data.border);
    styles['border-spacing'] = Util.addSizeSuffix(data.cellspacing);

    Tools.extend(attrs, {
      'data-mce-border-color': data.borderColor,
      'data-mce-cell-padding': data.cellpadding,
      'data-mce-border': data.border
    });
  } else {
    Tools.extend(attrs, {
      border: data.border,
      cellpadding: data.cellpadding,
      cellspacing: data.cellspacing
    });
  }

  // TODO: this has to be reworked somehow, for example by introducing dedicated option, which
  // will control whether child TD/THs should be processed or not
  if (editor.settings.table_style_by_css) {
    if (tableElm.children) {
      for (let i = 0; i < tableElm.children.length; i++) {
        styleTDTH(dom, tableElm.children[i], {
          'border-width': Util.addSizeSuffix(data.border),
          'border-color': data.borderColor,
          'padding': Util.addSizeSuffix(data.cellpadding)
        });
      }
    }
  }

  if (data.style) {
    // merge the styles from Advanced tab on top
    Tools.extend(styles, dom.parseStyle(data.style));
  } else {
    // ... otherwise take styles from original elm and update them
    styles = Tools.extend({}, dom.parseStyle(dom.getAttrib(tableElm, 'style')), styles);
  }

  attrs.style = dom.serializeStyle(styles);
  dom.setAttribs(tableElm, attrs);
};

const extractDataFromElement = function (editor, elm) {
  const dom = editor.dom;
  const data: any = {
    width: dom.getStyle(elm, 'width') || dom.getAttrib(elm, 'width'),
    height: dom.getStyle(elm, 'height') || dom.getAttrib(elm, 'height'),
    scope: dom.getAttrib(elm, 'scope'),
    class: dom.getAttrib(elm, 'class')
  };

  data.type = elm.nodeName.toLowerCase();

  Tools.each('left center right'.split(' '), function (name) {
    if (editor.formatter.matchNode(elm, 'align' + name)) {
      data.align = name;
    }
  });

  Tools.each('top middle bottom'.split(' '), function (name) {
    if (editor.formatter.matchNode(elm, 'valign' + name)) {
      data.valign = name;
    }
  });

  if (editor.settings.table_cell_advtab !== false) {
    Tools.extend(data, Helpers.extractAdvancedStyles(dom, elm));
  }

  return data;
};

    items.each(function (ctrl) {
      let formItem;
      const label = ctrl.settings.label;

      if (label) {
        formItem = new FormItem(Tools.extend({
          items: {
            type: 'label',
            id: ctrl._id + '-l',
            text: label,
            flex: 0,
            forId: ctrl._id,
            disabled: ctrl.disabled()
          }
        }, self.settings.formItemDefaults));

        formItem.type = 'formitem';
        ctrl.aria('labelledby', ctrl._id + '-l');

        if (typeof ctrl.settings.flex === 'undefined') {
          ctrl.settings.flex = 1;
        }

        self.replace(ctrl, formItem);
        formItem.add(ctrl);
      }
    });

  suite.test('Parse script elements', function () {
    let counter, parser;

    counter = createCounter(writer);
    parser = new SaxParser(counter, schema);
    writer.reset();
    parser.parse('text1<em><script>// <b>tag</b></s' + 'cript>text2</em>');
    LegacyUnit.equal(writer.getContent(), 'text1<em><script>// <b>tag</b></s' + 'cript>text2</em>', 'Parse script element.');
    LegacyUnit.deepEqual(counter.counts, { start: 2, end: 2, text: 3 }, 'Parse script element counts.');

    counter = createCounter(writer);
    parser = new SaxParser(counter, schema);
    writer.reset();
    parser.parse('text1<em><script id="id">// <b>tag</b></s' + 'cript>text2</em>');
    LegacyUnit.equal(
      writer.getContent(),
      'text1<em><script id="id">// <b>tag</b></s' + 'cript>text2</em>',
      'Parse script element with attributes.'
    );
    LegacyUnit.deepEqual(counter.counts, { start: 2, end: 2, text: 3 }, 'Parse script element with attributes counts.');

    counter = createCounter(writer);
    parser = new SaxParser(counter, schema);
    writer.reset();
    parser.parse('text1<em><script></s' + 'cript>text2</em>');
    LegacyUnit.equal(writer.getContent(), 'text1<em><script></s' + 'cript>text2</em>', 'Parse empty script element.');
    LegacyUnit.deepEqual(counter.counts, { text: 2, start: 2, end: 2 }, 'Parse empty script element counts.');

    counter = createCounter(writer);
    parser = new SaxParser(Tools.extend({ validate: true }, counter), Schema({ invalid_elements: 'script' }));
    writer.reset();
    parser.parse('text1<em><s' + 'cript>text2</s' + 'cript>text3</em>');
    LegacyUnit.equal(writer.getContent(), 'text1<em>text3</em>', 'Parse invalid script element.');
    LegacyUnit.deepEqual(counter.counts, { text: 2, start: 1, end: 1 }, 'Parse invalid script element (count).');
  });

  const createPanel = function (settings) {
    EventUtils.Event.clean(viewBlock.get());
    viewBlock.update('');

    return Factory.create(Tools.extend({
      type: 'panel'
    }, settings)).renderTo(viewBlock.get()).reflow();
  };

  const createColorButton = function (settings) {
    EventUtils.Event.clean(viewBlock.get());
    viewBlock.update('');

    return Factory.create(Tools.extend({
      type: 'colorbutton'
    }, settings)).renderTo(viewBlock.get());
  };

 const createPanel = function (settings) {
   return Factory.create(Tools.extend({
     type: 'panel',
     layout: 'absolute',
     width: 200,
     height: 200
   }, settings)).renderTo(viewBlock.get()).reflow();
 };

  const pressEnter = function (editor, evt?) {
    const dom = editor.dom, target = editor.selection.getNode();

    evt = Tools.extend({ keyCode: 13, shiftKey: false }, evt);

    dom.fire(target, 'keydown', evt);
    dom.fire(target, 'keypress', evt);
    dom.fire(target, 'keyup', evt);
  };

  suite.test('Event bubbling/removed state', function () {
    let lastName, lastState, data = '';

    const Class: any = function (parentObj) {
      this.toggleNativeEvent = function (name, state) {
        lastName = name;
        lastState = state;
      };

      this.parent = function () {
        return parentObj;
      };
    };

    Tools.extend(Class.prototype, Observable);

    const inst1 = new Class();

    inst1.on('click', function () {
      data += 'a';
    });
    LegacyUnit.strictEqual(lastName, 'click');
    LegacyUnit.strictEqual(lastState, true);

    lastName = lastState = null;
    inst1.on('click', function () {
      data += 'b';
    });
    LegacyUnit.strictEqual(lastName, null);
    LegacyUnit.strictEqual(lastState, null);

    const inst2 = new Class(inst1);
    inst2.on('click', function () {
      data += 'c';
    });

    inst2.fire('click');
    LegacyUnit.strictEqual(data, 'cab');

    inst2.on('click', function (e) {
      e.stopPropagation();
    });

    inst2.fire('click');
    LegacyUnit.strictEqual(data, 'cabc');

    inst1.on('remove', function () {
      data += 'r';
    });
    inst1.removed = true;
    inst1.fire('click');
    inst1.fire('remove');
    LegacyUnit.strictEqual(data, 'cabcr');
  });

  return function (response) {
    const html = response.html;
    const embed = win.find('#embed')[0];
    const data = Tools.extend(HtmlToData.htmlToData(Settings.getScripts(editor), html), { source1: response.url });
    win.fromJSON(data);

    if (embed) {
      embed.value(html);
      SizeManager.updateSize(win);
    }
  };