TypeScript Theme.default函數代碼示例

UnitTest.asynctest('browser.tinymce.core.EditorSettingsTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const detection = PlatformDetection.detect();
  const isTouch = detection.deviceType.isTouch();

  Theme();

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, [
      Logger.t('getEditorSettings tests', GeneralSteps.sequence([
        Logger.t('Override defaults plugins', Step.sync(function () {
          const settings = EditorSettings.getEditorSettings(
            editor,
            'id',
            'documentBaseUrl',
            {
              defaultSetting: 'a',
              plugins: ['a']
            },
            {
              validate: false,
              userSetting: 'b'
            }
          );

          Assertions.assertEq('Should have the specified id', 'id', settings.id);
          Assertions.assertEq('Should have the specified documentBaseUrl', 'documentBaseUrl', settings.document_base_url);
          Assertions.assertEq('Should have the specified userSetting', 'b', settings.userSetting);
          Assertions.assertEq('Should have the forced validate setting', true, settings.validate);
          Assertions.assertEq('Should have the default theme', 'modern', settings.theme);
          Assertions.assertEq('Should have the specified default plugin', 'a', settings.plugins);
          Assertions.assertEq('Should have the default setting', 'a', settings.defaultSetting);
        })),

        Logger.t('Override defaults with forced_plugins using arrays', Step.sync(function () {
          const defaultSettings = {
            forced_plugins: ['a', 'b']
          };

          const userSettings = {
            plugins: ['c', 'd']
          };

          const settings = EditorSettings.getEditorSettings(editor, 'id', 'documentBaseUrl', defaultSettings, userSettings);

          Assertions.assertEq('Should be both forced and user plugins', 'a b c d', settings.plugins);
        })),

        Logger.t('Override defaults with forced_plugins using strings', Step.sync(function () {
          const defaultSettings = {
            forced_plugins: 'a b'
          };

          const userSettings = {
            plugins: 'c d'
          };

          const settings = EditorSettings.getEditorSettings(editor, 'id', 'documentBaseUrl', defaultSettings, userSettings);

          Assertions.assertEq('Should be both forced and user plugins', 'a b c d', settings.plugins);
        })),

        Logger.t('Override defaults with forced_plugins using mixed types and spaces', Step.sync(function () {
          const defaultSettings = {
            forced_plugins: '  a   b'
          };

          const userSettings = {
            plugins: [' c ', '  d   e ']
          };

          const settings = EditorSettings.getEditorSettings(editor, 'id', 'documentBaseUrl', defaultSettings, userSettings);

          Assertions.assertEq('Should be both forced and user plugins', 'a b c d e', settings.plugins);
        })),

        Logger.t('Override defaults with just default forced_plugins', Step.sync(function () {
          const defaultSettings = {
            forced_plugins: ['a', 'b']
          };

          const userSettings = {
          };

          const settings = EditorSettings.getEditorSettings(editor, 'id', 'documentBaseUrl', defaultSettings, userSettings);

          Assertions.assertEq('Should be just default plugins', 'a b', settings.plugins);
        })),

        Logger.t('Override defaults with just user plugins', Step.sync(function () {
          const defaultSettings = {
          };

          const userSettings = {
            plugins: ['a', 'b']
          };

          const settings = EditorSettings.getEditorSettings(editor, 'id', 'documentBaseUrl', defaultSettings, userSettings);

//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.plugins.table.TableRowDialogTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  Plugin();
  Theme();

  const getFrontmostWindow = function (editor) {
    return editor.windowManager.windows[editor.windowManager.windows.length - 1];
  };

  const closeTopMostWindow = function (editor) {
    const win = getFrontmostWindow(editor);
    if (win) {
      getFrontmostWindow(editor).close();
    }
  };

  const fillAndSubmitWindowForm = function (editor, data) {
    const win = getFrontmostWindow(editor);

    win.fromJSON(data);
    win.find('form')[0].submit();
    win.close();
  };

  const cleanTableHtml = function (html) {
    return html.replace(/<p>(&nbsp;|<br[^>]+>)<\/p>$/, '');
  };

  suite.test('Table row properties dialog (get data from plain cell)', function (editor) {
    editor.focus();
    editor.setContent('<table><tr><td>X</td></tr></table>');
    LegacyUnit.setSelection(editor, 'td', 0);
    editor.execCommand('mceTableRowProps');

    LegacyUnit.deepEqual(getFrontmostWindow(editor).toJSON(), {
      align: '',
      height: '',
      type: 'tbody',
      backgroundColor: '',
      borderStyle: '',
      borderColor: '',
      style: ''
    });

    closeTopMostWindow(editor);
  });

  suite.test('Table row properties dialog (get data from complex row)', function (editor) {
    editor.setContent(
      '<table><thead>' +
        '<tr style="height: 10px; text-align: right; border-color: red; background-color: blue"><td>X</td></tr>' +
      '</thead></table>'
    );
    LegacyUnit.setSelection(editor, 'td', 0);
    editor.execCommand('mceTableRowProps');

    LegacyUnit.deepEqual(getFrontmostWindow(editor).toJSON(), {
      align: 'right',
      height: '10px',
      type: 'thead',
      backgroundColor: 'blue',
      borderColor: 'red',
      borderStyle: '',
      style: 'height: 10px; text-align: right; border-color: red; background-color: blue;'
    });

    closeTopMostWindow(editor);
  });

  suite.test('Table row properties dialog (update all)', function (editor) {
    editor.setContent('<table><tr><td>X</td></tr></table>');
    LegacyUnit.setSelection(editor, 'td', 0);
    editor.execCommand('mceTableRowProps');

    fillAndSubmitWindowForm(editor, {
      align: 'right',
      height: '10',
      type: 'thead'
    });

    LegacyUnit.equal(
      cleanTableHtml(editor.getContent()),
      '<table><thead><tr style="height: 10px; text-align: right;"><td>X</td></tr></thead></table>'
    );

    closeTopMostWindow(editor);
  });

  suite.test('Caption should always stay the firstChild of the table (see TINY-1167)', function (editor) {
    editor.setContent('<table><caption>CAPTION</caption><tbody><tr><td>X</td></tr><tr><td>Y</td></tr></tbody></table>');
    LegacyUnit.setSelection(editor, 'td', 0);
    editor.execCommand('mceTableRowProps');

    fillAndSubmitWindowForm(editor, {
      type: 'thead'
    });

//.........這裏部分代碼省略.........

UnitTest.asynctest('tinymce.lists.browser.OutdentTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  Plugin();
  Theme();

  suite.test('Outdent inside LI in beginning of OL in LI', function (editor) {
    editor.getBody().innerHTML = LegacyUnit.trimBrs(
      '<ol>' +
      '<li>a' +
      '<ol>' +
      '<li>b</li>' +
      '<li>c</li>' +
      '</ol>' +
      '</li>' +
      '</ol>'
    );

    editor.focus();
    LegacyUnit.setSelection(editor, 'li li', 1);
    LegacyUnit.execCommand(editor, 'Outdent');

    LegacyUnit.equal(editor.getContent(),
      '<ol>' +
      '<li>a</li>' +
      '<li>b' +
      '<ol>' +
      '<li>c</li>' +
      '</ol>' +
      '</li>' +
      '</ol>'
    );

    LegacyUnit.equal(editor.selection.getNode().nodeName, 'LI');
  });

  suite.test('Outdent inside LI in middle of OL in LI', function (editor) {
    editor.getBody().innerHTML = LegacyUnit.trimBrs(
      '<ol>' +
      '<li>a' +
      '<ol>' +
      '<li>b</li>' +
      '<li>c</li>' +
      '<li>d</li>' +
      '</ol>' +
      '</li>' +
      '</ol>'
    );

    editor.focus();
    LegacyUnit.setSelection(editor, 'li li:nth-child(2)', 1);
    LegacyUnit.execCommand(editor, 'Outdent');

    LegacyUnit.equal(editor.getContent(),
      '<ol>' +
      '<li>a' +
      '<ol>' +
      '<li>b</li>' +
      '</ol>' +
      '</li>' +
      '<li>c' +
      '<ol>' +
      '<li>d</li>' +
      '</ol>' +
      '</li>' +
      '</ol>'
    );

    LegacyUnit.equal(editor.selection.getNode().nodeName, 'LI');
  });

  suite.test('Outdent inside LI in end of OL in LI', function (editor) {
    editor.getBody().innerHTML = LegacyUnit.trimBrs(
      '<ol>' +
      '<li>a' +
      '<ol>' +
      '<li>b</li>' +
      '<li>c</li>' +
      '</ol>' +
      '</li>' +
      '</ol>'
    );

    editor.focus();
    LegacyUnit.setSelection(editor, 'li li:last', 1);
    LegacyUnit.execCommand(editor, 'Outdent');

    LegacyUnit.equal(editor.getContent(),
      '<ol>' +
      '<li>a' +
      '<ol>' +
      '<li>b</li>' +
      '</ol>' +
      '</li>' +
      '<li>c</li>' +
      '</ol>'
    );

//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  Plugin();
  Theme();

  const cleanTableHtml = function (html) {
    return html.replace(/<p>(&nbsp;|<br[^>]+>)<\/p>$/, '');
  };

  const selectOne = function (editor, start) {
    start = editor.$(start)[0];

    editor.fire('mousedown', { target: start, button: 0 });
    editor.fire('mouseup', { target: start, button: 0 });

    LegacyUnit.setSelection(editor, start, 0);
  };

  const selectRangeXY = function (editor, start, end) {
    start = editor.$(start)[0];
    end = editor.$(end)[0];

    editor.fire('mousedown', { target: start, button: 0 });
    editor.fire('mouseover', { target: end, button: 0 });
    editor.fire('mouseup', { target: end, button: 0 });

    LegacyUnit.setSelection(editor, end, 0);
  };

  suite.test('mceTablePasteRowBefore command', function (editor) {
    editor.focus();
    editor.setContent(
      '<table>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>2</td><td>3</td></tr>' +
      '</table>'
    );

    selectOne(editor, 'tr:nth-child(1) td');
    editor.execCommand('mceTableCopyRow');
    selectOne(editor, 'tr:nth-child(2) td');
    editor.execCommand('mceTablePasteRowBefore');

    LegacyUnit.equal(
      cleanTableHtml(editor.getContent()),

      '<table>' +
      '<tbody>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>2</td><td>3</td></tr>' +
      '</tbody>' +
      '</table>'
    );

    selectOne(editor, 'tr:nth-child(2) td');
    editor.execCommand('mceTablePasteRowBefore');

    LegacyUnit.equal(
      cleanTableHtml(editor.getContent()),

      '<table>' +
      '<tbody>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>2</td><td>3</td></tr>' +
      '</tbody>' +
      '</table>'
    );
  });

  suite.test('mceTablePasteRowAfter command', function (editor) {
    editor.setContent(
      '<table>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>2</td><td>3</td></tr>' +
      '</table>'
    );

    selectOne(editor, 'tr:nth-child(1) td');
    editor.execCommand('mceTableCopyRow');
    selectOne(editor, 'tr:nth-child(2) td');
    editor.execCommand('mceTablePasteRowAfter');

    LegacyUnit.equal(
      cleanTableHtml(editor.getContent()),

      '<table>' +
      '<tbody>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '<tr><td>2</td><td>3</td></tr>' +
      '<tr><td>1</td><td>2</td></tr>' +
      '</tbody>' +
      '</table>'
    );

//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.core.UndoManager', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  Theme();

  const ok = function (value, label?) {
    return LegacyUnit.equal(value, true, label);
  };

  suite.test('Initial states', function (editor) {
    ok(!editor.undoManager.hasUndo());
    ok(!editor.undoManager.hasRedo());
    ok(!editor.undoManager.typing);
  });

  suite.test('One undo level', function (editor) {
    editor.undoManager.clear();
    editor.setContent('test');

    editor.focus();
    editor.execCommand('SelectAll');
    editor.execCommand('Bold');

    ok(editor.undoManager.hasUndo());
    ok(!editor.undoManager.hasRedo());
    ok(!editor.undoManager.typing);
  });

  suite.test('Two undo levels', function (editor) {
    editor.undoManager.clear();
    editor.setContent('test');

    editor.execCommand('SelectAll');
    editor.execCommand('Bold');
    editor.execCommand('SelectAll');
    editor.execCommand('Italic');

    ok(editor.undoManager.hasUndo());
    ok(!editor.undoManager.hasRedo());
    ok(!editor.undoManager.typing);
  });

  suite.test('No undo levels and one redo', function (editor) {
    editor.undoManager.clear();
    editor.setContent('test');

    editor.execCommand('SelectAll');
    editor.execCommand('Bold');
    editor.undoManager.undo();

    ok(!editor.undoManager.hasUndo());
    ok(editor.undoManager.hasRedo());
    ok(!editor.undoManager.typing);
  });

  suite.test('One undo levels and one redo', function (editor) {
    editor.undoManager.clear();
    editor.setContent('test');

    editor.execCommand('SelectAll');
    editor.execCommand('Bold');
    editor.execCommand('SelectAll');
    editor.execCommand('Italic');
    editor.undoManager.undo();

    ok(editor.undoManager.hasUndo());
    ok(editor.undoManager.hasRedo());
    ok(!editor.undoManager.typing);
  });

  suite.test('Typing state', function (editor) {
    let selectAllFlags;

    editor.undoManager.clear();
    editor.setContent('test');

    ok(!editor.undoManager.typing);

    editor.dom.fire(editor.getBody(), 'keydown', { keyCode: 65 });
    ok(editor.undoManager.typing);

    editor.dom.fire(editor.getBody(), 'keydown', { keyCode: 13 });
    ok(!editor.undoManager.typing);

    selectAllFlags = { keyCode: 65, ctrlKey: false, altKey: false, shiftKey: false };

    if (Env.mac) {
      selectAllFlags.metaKey = true;
    } else {
      selectAllFlags.ctrlKey = true;
    }

    editor.dom.fire(editor.getBody(), 'keydown', selectAllFlags);
    ok(!editor.undoManager.typing);
  });

  suite.test('Undo and add new level', function (editor) {
    editor.undoManager.clear();
//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.core.keyboard.InsertKeysTest', (success, failure) => {
  Theme();

  const sFireInsert = (editor: Editor) => {
    return Step.sync(() => {
      editor.fire('input', { isComposing: false });
    });
  };

  const sFireKeyPress = (editor: Editor) => {
    return Step.sync(() => {
      editor.fire('keypress');
    });
  };

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);

    Pipeline.async({}, [
      Logger.t('Insert key in text with in nbsp text node', GeneralSteps.sequence([
        Logger.t('Nbsp at first character position', GeneralSteps.sequence([
          Logger.t('Insert in text node with nbsp at start of block', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>&nbsp;a</p>'),
            tinyApis.sSetCursor([0, 0], 2),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 0], 2, [0, 0], 2),
            tinyApis.sAssertContent('<p>&nbsp;a</p>')
          ])),
          Logger.t('Insert in text in node with leading nbsp after inline with trailing space', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a<em>b </em>&nbsp;c</p>'),
            tinyApis.sSetCursor([0, 2], 2),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 2], 2, [0, 2], 2),
            tinyApis.sAssertContent('<p>a<em>b </em>&nbsp;c</p>')
          ])),
          Logger.t('Insert in text in node with leading nbsp after inline', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a<em>b</em>&nbsp;c</p>'),
            tinyApis.sSetCursor([0, 2], 2),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 2], 2, [0, 2], 2),
            tinyApis.sAssertContent('<p>a<em>b</em> c</p>')
          ])),
          Logger.t('Insert in text in node with leading nbsp after inline with trailing nbsp', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a<em>b&nbsp;</em>&nbsp;c</p>'),
            tinyApis.sSetCursor([0, 2], 2),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 2], 2, [0, 2], 2),
            tinyApis.sAssertContent('<p>a<em>b&nbsp;</em> c</p>')
          ])),
          Logger.t('Insert at beginning of text node with leading nbsp after a br', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a<br />&nbsp;b</p>'),
            tinyApis.sSetCursor([0, 2], 0),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 2], 0, [0, 2], 0),
            tinyApis.sAssertContent('<p>a<br />&nbsp;b</p>')
          ])),
          Logger.t('Insert at beginning of text node with leading nbsp within inline element followed by br', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a<br /><em>&nbsp;b</em></p>'),
            tinyApis.sSetCursor([0, 2, 0], 0),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 2, 0], 0, [0, 2, 0], 0),
            tinyApis.sAssertContent('<p>a<br /><em>&nbsp;b</em></p>')
          ]))
        ])),

        Logger.t('Nbsp at last character position', GeneralSteps.sequence([
          Logger.t('Insert in text node with nbsp at end of block', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a&nbsp;</p>'),
            tinyApis.sSetCursor([0, 0], 0),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 0], 0, [0, 0], 0),
            tinyApis.sAssertContent('<p>a&nbsp;</p>')
          ])),
          Logger.t('Insert in text in node with leading nbsp after inline with trailing space', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a&nbsp;<em> b</em>c</p>'),
            tinyApis.sSetCursor([0, 0], 0),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 0], 0, [0, 0], 0),
            tinyApis.sAssertContent('<p>a&nbsp;<em> b</em>c</p>')
          ])),
          Logger.t('Insert in text in node with traling nbsp before inline', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a&nbsp;<em>b</em>c</p>'),
            tinyApis.sSetCursor([0, 0], 0),
            sFireInsert(editor),
            tinyApis.sAssertSelection([0, 0], 0, [0, 0], 0),
            tinyApis.sAssertContent('<p>a <em>b</em>c</p>')
          ])),
          Logger.t('Insert in text in node with trailing nbsp before inline with leading nbsp', GeneralSteps.sequence([
            tinyApis.sFocus,
            tinyApis.sSetContent('<p>a&nbsp;<em>&nbsp;b</em>c</p>'),
            tinyApis.sSetCursor([0, 0], 0),
//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.plugins.textcolor.TextcolorCommandsTest', (success, failure) => {
    const browser = PlatformDetection.detect().browser;

    ModernTheme();
    TextcolorPlugin();

    const state = Cell(null);

    const sAssertState = function (expected) {
      return Step.sync(function () {
        RawAssertions.assertEq('should be same', expected, state.get());
      });
    };

    const sResetState = Step.sync(function () {
      state.set(null);
    });

    TinyLoader.setup(function (editor, onSuccess, onFailure) {

      editor.on('execCommand', function (e) {
        state.set(e.command);
      });

      const tinyUi = TinyUi(editor);
      const tinyApis = TinyApis(editor);

      Pipeline.async({}, browser.isIE() ? [] : [
        Logger.t('apply and remove forecolor and make sure of the right command has been executed', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('hello test'),
          tinyApis.sSetSelection([0, 0], 0, [0, 0], 5),
          tinyUi.sClickOnToolbar('click forecolor', 'div[aria-label="Text color"] > button.mce-open'),
          tinyUi.sClickOnUi('click green color', 'div[data-mce-color="#00FF00"]:first'),
          sAssertState('mceApplyTextcolor'),
          tinyApis.sSetSelection([0, 0, 0], 0, [0, 0, 0], 5),
          tinyUi.sClickOnToolbar('click forecolor', 'div[aria-label="Text color"] > button.mce-open'),
          tinyUi.sClickOnUi('click green color', 'div[data-mce-color="transparent"]:first'),
          sAssertState('mceRemoveTextcolor'),
          sResetState
        ])),
        Logger.t('apply and remove forecolor and make sure of the right command has been executed', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('hello test'),
          tinyApis.sSetSelection([0, 0], 0, [0, 0], 5),
          tinyUi.sClickOnToolbar('click backcolor', 'div[aria-label="Background color"] > button.mce-open'),
          tinyUi.sClickOnUi('click green color', 'div[data-mce-color="#00FF00"]:last'),
          sAssertState('mceApplyTextcolor'),
          tinyApis.sSetSelection([0, 0, 0], 0, [0, 0, 0], 5),
          tinyUi.sClickOnToolbar('click backcolor', 'div[aria-label="Background color"] > button.mce-open'),
          tinyUi.sClickOnUi('click green color', 'div[data-mce-color="transparent"]:first'),
          sAssertState('mceRemoveTextcolor'),
          sResetState
        ]))
      ], onSuccess, onFailure);
    }, {
      plugins: 'textcolor',
      toolbar: 'forecolor backcolor',
      skin_url: '/project/js/tinymce/skins/lightgray'
    }, success, failure);
  }

UnitTest.asynctest('browser.tinymce.core.dom.ScrollIntoViewTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Theme();

  const sScrollReset = function (editor) {
    return Step.sync(function () {
      editor.getWin().scrollTo(0, 0);
    });
  };

  const sSetContent = function (editor, tinyApis, html) {
    return GeneralSteps.sequence([
      tinyApis.sSetContent(html),
      Waiter.sTryUntil('Wait for scrollHeight to be updated', Step.sync(function () {
        Assertions.assertEq('Scroll body should be more than 100', true, editor.getBody().scrollHeight > 100);
      }), 100, 1000)
    ]);
  };

  const sScrollIntoView = function (editor, selector, alignToTop) {
    return Step.sync(function () {
      editor.selection.scrollIntoView(editor.dom.select(selector)[0], alignToTop);
    });
  };

  const sScrollElementIntoView = function (editor, selector, alignToTop) {
    return Step.sync(function () {
      ScrollIntoView.scrollElementIntoView(editor, editor.dom.select(selector)[0], alignToTop);
    });
  };

  const sScrollRangeIntoView = (editor: Editor, path: number[], offset: number) => {
    return Step.sync(function () {
      const x = Cursors.calculateOne(Element.fromDom(editor.getBody()), path);
      const rng = editor.dom.createRng();
      rng.setStart(x.dom(), offset);
      rng.setEnd(x.dom(), offset);

      ScrollIntoView.scrollRangeIntoView(editor, rng);
    });
  };

  const sAssertScrollPosition = function (editor, x, y) {
    return Step.sync(function () {
      Assertions.assertEq('Scroll position X should be expected value', x, editor.dom.getViewPort(editor.getWin()).x);
      Assertions.assertEq('Scroll position Y should be expected value', y, editor.dom.getViewPort(editor.getWin()).y);
    });
  };

  const sAssertApproxScrollPosition = function (editor, x, y) {
    return Step.sync(function () {
      const actualX = editor.dom.getViewPort(editor.getWin()).x;
      const actualY = editor.dom.getViewPort(editor.getWin()).y;
      Assertions.assertEq(`Scroll position X should be expected value: ${x} got ${actualX}`, true, Math.abs(x - actualX) < 5);
      Assertions.assertEq(`Scroll position Y should be expected value: ${y} got ${actualY}`, true, Math.abs(y - actualY) < 5);
    });
  };

  const mBindScrollIntoViewEvent = function (editor) {
    return Step.stateful(function (value, next, die) {
      const state = Cell({});

      const handler = function (e) {
        e.preventDefault();
        state.set({
          elm: e.elm,
          alignToTop: e.alignToTop
        });
      };

      editor.on('ScrollIntoView', handler);

      next({
        handler,
        state
      });
    });
  };

  const mAssertScrollIntoViewEventInfo = function (editor, expectedElementSelector, expectedAlignToTop) {
    return Step.stateful(function (value: any, next, die) {
      const expectedTarget = Element.fromDom(editor.dom.select(expectedElementSelector)[0]);
      const actualTarget = Element.fromDom(value.state.get().elm);
      Assertions.assertDomEq('Target should be expected element', expectedTarget, actualTarget);
      Assertions.assertEq('Align to top should be expected value', expectedAlignToTop, value.state.get().alignToTop);
      editor.off('ScrollIntoView', value.handler);
      next({});
    });
  };

  const steps = function (editor, tinyApis) {
    return [
      tinyApis.sFocus,
      Logger.t('Public Selection API', GeneralSteps.sequence([
        Logger.t('Scroll to element align to bottom', GeneralSteps.sequence([
          sScrollReset(editor),
          sSetContent(editor, tinyApis, '<div style="height: 1000px">a</div><div style="height: 50px">b</div><div style="height: 1000px">a</div>'),
          sScrollIntoView(editor, 'div:nth-child(2)', false),
//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.plugins.textcolor.TextcolorSanityTest.js', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  ModernTheme();
  TextcolorPlugin();
  const forecolorStruct = ApproxStructure.build(function (s, str) {
    return s.element('body', {
      children: [
        s.element('p', {
          children: [
            s.element('span', {
              styles: {
                'color': str.is(Env.ie && Env.ie <= 11 ? '#0000ff' : 'rgb(0, 0, 255)'),
                'font-size': str.is('24pt')
              }
            }),
            s.text(str.is(' test'))
          ]
        })
      ]
    });
  });

  const backcolorStruct = ApproxStructure.build(function (s, str) {
    return s.element('body', {
      children: [
        s.element('p', {
          children: [
            s.element('span', {
              styles: {
                'background-color': str.is('rgb(204, 153, 255)'),
                'font-size': str.is('24pt')
              }
            }),
            s.text(str.is(' test'))
          ]
        })
      ]
    });
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);

    Pipeline.async({}, [
      // forecolor test
      tinyApis.sSetContent('hello test'),
      tinyApis.sSetSelection([0, 0], 0, [0, 0], 5),
      tinyUi.sClickOnToolbar('click forecolor', 'div[aria-label="Text color"] > button.mce-open'),
      tinyUi.sClickOnUi('click green color', 'div[data-mce-color="#00FF00"]:first'),
      tinyUi.sClickOnToolbar('click fontsize', 'div[aria-label="Font Sizes"] > button'),
      tinyUi.sClickOnUi('click 24pt', 'div.mce-floatpanel span.mce-text:contains("24pt")'),
      tinyUi.sClickOnToolbar('click forecolor again', 'div[aria-label="Text color"] > button.mce-open'),
      tinyUi.sClickOnUi('click blue color', 'div[data-mce-color="#0000FF"]:first'),
      tinyApis.sAssertContentStructure(forecolorStruct),
      // backcolor test
      tinyApis.sSetContent('hello test'),
      tinyApis.sSetSelection([0, 0], 0, [0, 0], 5),
      tinyUi.sClickOnToolbar('click backcolor', 'div[aria-label="Background color"] > button.mce-open'),
      tinyUi.sClickOnUi('click green color', 'div[data-mce-color="#00FF00"]:last'),
      tinyUi.sClickOnToolbar('click fontsize', 'div[aria-label="Font Sizes"] > button'),
      tinyUi.sClickOnUi('click 24pt', 'div.mce-floatpanel span.mce-text:contains("24pt")'),
      tinyUi.sClickOnToolbar('click backcolor again', 'div[aria-label="Background color"] > button.mce-open'),
      tinyUi.sClickOnUi('click a nice purple color', 'div[data-mce-color="#CC99FF"]:last'),
      tinyApis.sAssertContentStructure(backcolorStruct)
    ], onSuccess, onFailure);
  }, {
    plugins: 'textcolor',
    toolbar: 'forecolor backcolor fontsizeselect',
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.table.TableDialogTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Plugin();
  Theme();

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const ui = TinyUi(editor);
    const api = TinyApis(editor);

    const sAssertElementStructure = function (selector, expected) {
      return Step.sync(function () {
        const body = editor.getBody();
        body.normalize(); // consolidate text nodes

        Assertions.assertStructure(
          'Asserting HTML structure of the element: ' + selector,
          ApproxStructure.fromHtml(expected),
          SelectorFind.descendant(Element.fromDom(body), selector).getOrDie('Nothing in the Editor matches selector: ' + selector)
        );
      });
    };

    const cWaitForDialog = function (label) {
      // looking for dialogs by aria-label
      return ui.cWaitForPopup('wait for ' + label + ' dialog', 'div[aria-label="' + label + '"][role="dialog"]');
    };

    const cFakeEventOn = function (event) {
      return Chain.op(function (elm: Element) {
        DOMUtils.DOM.fire(elm.dom(), event);
      });
    };

    Pipeline.async({}, [
      Logger.t('Table properties dialog (get data from plain table)', GeneralSteps.sequence([
        api.sSetContent('<table><tr><td>X</td></tr></table>'),
        api.sSetCursor([0, 0, 0], 0),
        api.sExecCommand('mceTableProps'),
        Chain.asStep({}, [
          cWaitForDialog('Table properties'),
          ui.cAssertDialogContents({
            align: '',
            border: '',
            caption: false,
            cellpadding: '',
            cellspacing: '',
            height: '',
            width: '',
            backgroundColor: '',
            borderColor: '',
            borderStyle: '',
            style: ''
          }),
          ui.cSubmitDialog()
        ])
      ])),

      Logger.t('Table properties dialog (get/set data from/to plain table, no adv tab)', GeneralSteps.sequence([
        api.sSetSetting('table_advtab', false),
        api.sSetContent('<table><tr><td>X</td></tr></table>'),
        api.sSetCursor([0, 0, 0], 0),
        api.sExecCommand('mceTableProps'),
        Chain.asStep({}, [
          cWaitForDialog('Table properties'),
          ui.cAssertDialogContents({
            align: '',
            border: '',
            caption: false,
            cellpadding: '',
            cellspacing: '',
            height: '',
            width: ''
          }),
          ui.cFillDialogWith({
            width: '100',
            height: '101'
          }),
          ui.cSubmitDialog()
        ]),
        sAssertElementStructure('table', '<table style="width: 100px; height: 101px;"><tbody><tr><td>X</td></tr></tbody></table>'),
        api.sDeleteSetting('table_advtab')
      ])),

      Logger.t('Table cell properties dialog (get/set data from/to plain table, no adv tab)', GeneralSteps.sequence([
        api.sSetSetting('table_cell_advtab', false),
        api.sSetContent('<table><tr><td>X</td></tr></table>'),
        api.sSetCursor([0, 0, 0], 0),
        api.sExecCommand('mceTableCellProps'),
        Chain.asStep({}, [
          cWaitForDialog('Cell properties'),
          ui.cAssertDialogContents({
            width: '',
            height: '',
            type: 'td',
            scope: '',
            align: '',
            valign: ''
          }),
//.........這裏部分代碼省略.........