opentiny 6.9.0

package/src/core/test/ts/browser/fmt/DefaultFormatsWithSchemaTest.ts

@@ -0,0 +1,79 @@
+import { context, describe, it } from '@ephox/bedrock-client';
+import { TinyAssertions, TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+
+describe('browser.tinymce.core.fmt.DefaultFormatsWithSchemaTest', () => {
+  const defaultOptions = {
+    toolbar: 'forecolor backcolor | bold italic underline strikethrough | alignleft',
+    base_url: '/project/tinymce/js/tinymce'
+  };
+
+  const toggleInlineStyle = (editor: Editor, style: string) => {
+    TinyUiActions.clickOnToolbar(editor, `[aria-label="${style}"]`);
+  };
+
+  context(`schema version: html5`, () => {
+    const hook = TinyHooks.bddSetupLight<Editor>({
+      ...defaultOptions,
+      schema: 'html5'
+    }, []);
+
+    it('TINY-8262: should apply strikethrough using an "s" tag', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>Test</p>');
+      TinySelections.setCursor(editor, [ 0, 0 ], 2);
+      toggleInlineStyle(editor, 'Strikethrough');
+      TinyAssertions.assertContent(editor, '<p><s>Test</s></p>');
+      toggleInlineStyle(editor, 'Strikethrough');
+      editor.setContent('<p>Test</p>');
+    });
+
+    // Note: This test does not apply to html5-strict as "strike" is not valid in the schema
+    it('TINY-8262: should convert "strike" tag to an "s" tag', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><strike>Test</strike></p>');
+      TinyAssertions.assertContent(editor, '<p><s>Test</s></p>');
+    });
+  });
+
+  context(`schema version: html5-strict`, () => {
+    const hook = TinyHooks.bddSetupLight<Editor>({
+      ...defaultOptions,
+      schema: 'html5-strict'
+    }, []);
+
+    it('TINY-8262: should apply strikethrough using an "s" tag', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>Test</p>');
+      TinySelections.setCursor(editor, [ 0, 0 ], 2);
+      toggleInlineStyle(editor, 'Strikethrough');
+      TinyAssertions.assertContent(editor, '<p><s>Test</s></p>');
+      toggleInlineStyle(editor, 'Strikethrough');
+      editor.setContent('<p>Test</p>');
+    });
+  });
+
+  context('schema version: html4', () => {
+    const hook = TinyHooks.bddSetupLight<Editor>({
+      ...defaultOptions,
+      schema: 'html4'
+    }, []);
+
+    it('TINY-8262: should apply strikethrough using a "span" tag', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>Test</p>');
+      TinySelections.setCursor(editor, [ 0, 0 ], 2);
+      toggleInlineStyle(editor, 'Strikethrough');
+      TinyAssertions.assertContent(editor, '<p><span style="text-decoration: line-through;">Test</span></p>');
+      toggleInlineStyle(editor, 'Strikethrough');
+      editor.setContent('<p>Test</p>');
+    });
+
+    it('TINY-8262: should convert "strike" tag to a "span" tag', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><strike>Test</strike></p>');
+      TinyAssertions.assertContent(editor, '<p><span style="text-decoration: line-through;">Test</span></p>');
+    });
+  });
+});

package/src/core/test/ts/browser/fmt/ExpandRangeTest.ts

@@ -0,0 +1,311 @@
+import { Assertions } from '@ephox/agar';
+import { context, describe, it } from '@ephox/bedrock-client';
+import { Hierarchy, SugarElement } from '@ephox/sugar';
+import { TinyApis, TinyDom, TinyHooks } from '@ephox/wrap-mcagar';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+import * as ExpandRange from 'tinymce/core/fmt/ExpandRange';
+import { Format } from 'tinymce/core/fmt/FormatTypes';
+import { RangeLikeObject } from 'tinymce/core/selection/RangeTypes';
+import { ZWSP } from 'tinymce/core/text/Zwsp';
+
+describe('browser.tinymce.core.fmt.ExpandRangeTest', () => {
+  const inlineFormat = [{ inline: 'b' }];
+  const blockFormat = [{ block: 'div' }];
+  const selectorFormat = [{ selector: 'div', classes: 'b' }];
+  const selectorFormatCollapsed = [{ selector: 'div', classes: 'b', collapsed: true }];
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    base_url: '/project/tinymce/js/tinymce'
+  }, [], true);
+
+  const expandRng = (editor: Editor, startPath: number[], startOffset: number, endPath: number[], endOffset: number, format: Format[], excludeTrailingSpaces: boolean = false) => {
+    const startContainer = Hierarchy.follow(TinyDom.body(editor), startPath).getOrDie();
+    const endContainer = Hierarchy.follow(TinyDom.body(editor), endPath).getOrDie();
+
+    const rng = editor.dom.createRng();
+    rng.setStart(startContainer.dom, startOffset);
+    rng.setEnd(endContainer.dom, endOffset);
+
+    return ExpandRange.expandRng(editor.dom, rng, format, excludeTrailingSpaces);
+  };
+
+  const assertRange = (editor: Editor, rng: RangeLikeObject, startPath: number[], startOffset: number, endPath: number[], endOffset: number) => {
+    const startContainer = Hierarchy.follow(TinyDom.body(editor), startPath).getOrDie();
+    const endContainer = Hierarchy.follow(TinyDom.body(editor), endPath).getOrDie();
+
+    Assertions.assertDomEq('Should be expected start container', startContainer, SugarElement.fromDom(rng.startContainer));
+    assert.equal(rng.startOffset, startOffset, 'Should be expected start offset');
+    Assertions.assertDomEq('Should be expected end container', endContainer, SugarElement.fromDom(rng.endContainer));
+    assert.equal(rng.endOffset, endOffset, 'Should be expected end offset');
+  };
+
+  context('TBA: Expand inline format words', () => {
+    it('TBA: In middle of single word in paragraph', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: In middle of single word in paragraph with paragraph siblings', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>a</p><p>bc</p><p>de</p>');
+      const rng = expandRng(editor, [ 1, 0 ], 1, [ 1, 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 1, [], 2);
+    });
+
+    it('TBA: In middle of single word wrapped in b', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><b>ab</b></p>');
+      const rng = expandRng(editor, [ 0, 0, 0 ], 1, [ 0, 0, 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: In middle of first word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab cd</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [ 0, 0 ], 2);
+    });
+
+    it('TBA: In middle of last word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab cd</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 4, [ 0, 0 ], 4, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 3, [], 1);
+    });
+
+    it('TBA: In middle of middle word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab cd ef</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 4, [ 0, 0 ], 4, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 3, [ 0, 0 ], 5);
+    });
+
+    it('TBA: In middle of word with bold siblings expand to sibling spaces', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><b>ab </b>cd<b> ef</b></p>');
+      const rng = expandRng(editor, [ 0, 1 ], 1, [ 0, 1 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0, 0 ], 3, [ 0, 2, 0 ], 0);
+    });
+
+    it('TBA: In middle of word with block sibling and inline sibling expand to sibling space to the right', () => {
+      const editor = hook.editor();
+      editor.setContent('<div><p>ab </p>cd<b> ef</b></div>');
+      const rng = expandRng(editor, [ 0, 1 ], 1, [ 0, 1 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 1 ], 0, [ 0, 2, 0 ], 0);
+    });
+
+    it('TBA: In middle of word with block sibling and inline sibling expand to sibling space to the left', () => {
+      const editor = hook.editor();
+      editor.setContent('<div><b>ab </b>cd<p> ef</p></div>');
+      const rng = expandRng(editor, [ 0, 1 ], 1, [ 0, 1 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0, 0 ], 3, [ 0, 1 ], 2);
+    });
+
+    it('TBA: In middle of middle word separated by nbsp characters', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab\u00a0cd\u00a0ef</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 4, [ 0, 0 ], 4, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 3, [ 0, 0 ], 5);
+    });
+
+    it('TBA: In empty paragraph', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><br></p>');
+      const rng = expandRng(editor, [ 0 ], 0, [ 0 ], 0, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: Fully selected word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 0, [ 0, 0 ], 2, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: Partially selected word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>abc</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 2, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 1, [ 0, 0 ], 2);
+    });
+
+    it('TBA: Whole word selected wrapped in multiple inlines', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><b><i>c</i></b></p>');
+      const rng = expandRng(editor, [ 0, 0, 0, 0 ], 0, [ 0, 0, 0, 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: Whole word inside td', () => {
+      const editor = hook.editor();
+      editor.setContent('<table><tbody><tr><td>a</td></tr></tbody></table>');
+      const rng = expandRng(editor, [ 0, 0, 0, 0, 0 ], 0, [ 0, 0, 0, 0, 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 0, 0 ], 0, [ 0, 0, 0 ], 1);
+    });
+
+    it('TBA: In middle of single word in paragraph (index based)', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab</p>');
+      const rng = expandRng(editor, [ 0 ], 0, [ 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: In middle of single word wrapped in bold in paragraph (index based)', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><b>ab</b></p>');
+      const rng = expandRng(editor, [ 0 ], 0, [ 0 ], 1, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: In middle of word inside bookmark then exclude bookmark', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><span data-mce-type="bookmark">ab cd ef</span></p>');
+      const rng = expandRng(editor, [ 0, 0, 0 ], 3, [ 0, 0, 0 ], 5, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+  });
+
+  context('TBA: Expand inline format words (remove format)', () => {
+    it('TBA: In middle of single word in paragraph', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 1, inlineFormat, true);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TINY-6268: Does not extend over space before', () => {
+      const editor = hook.editor();
+      TinyApis(editor).setRawContent('<p>ab<u> <span data-mce-type="bookmark">' + ZWSP + '</span>cd</u></p>');
+      const rng = expandRng(editor, [ 0, 1, 2 ], 0, [ 0, 1, 2 ], 2, inlineFormat, false);
+      assertRange(editor, rng, [ 0, 1, 2 ], 0, [], 1);
+    });
+
+    it('TINY-6268: Does not extend over space after', () => {
+      const editor = hook.editor();
+      TinyApis(editor).setRawContent('<p><u>ab<span data-mce-type="bookmark">' + ZWSP + '</span> </u>cd</p>');
+      const rng = expandRng(editor, [ 0, 0, 0 ], 0, [ 0, 0, 0 ], 2, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [ 0, 0, 0 ], 2);
+    });
+
+    it('TINY-6268: Does extend over collapsible space at start of block', () => {
+      const editor = hook.editor();
+      TinyApis(editor).setRawContent('<p><u> <span data-mce-type="bookmark">' + ZWSP + '</span>ab</u></p>');
+      const rng = expandRng(editor, [ 0, 0, 2 ], 0, [ 0, 0, 2 ], 2, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TINY-6268: Does extend over collapsible space at end of block', () => {
+      const editor = hook.editor();
+      TinyApis(editor).setRawContent('<p><u>ab<span data-mce-type="bookmark">' + ZWSP + '</span> </u></p>');
+      const rng = expandRng(editor, [ 0, 0, 0 ], 0, [ 0, 0, 0 ], 2, inlineFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+  });
+
+  context('TBA: Expand block format', () => {
+    it('TBA: In middle word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab cd ef</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 4, [ 0, 0 ], 4, blockFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: In middle bold word', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab <b>cd</b> ef</p>');
+      const rng = expandRng(editor, [ 0, 1, 0 ], 1, [ 0, 1, 0 ], 1, blockFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: Whole word inside td', () => {
+      const editor = hook.editor();
+      editor.setContent('<table><tbody><tr><td>a</td></tr></tbody></table>');
+      const rng = expandRng(editor, [ 0, 0, 0, 0, 0 ], 0, [ 0, 0, 0, 0, 0 ], 1, blockFormat, false);
+      assertRange(editor, rng, [ 0, 0, 0 ], 0, [ 0, 0, 0 ], 1);
+    });
+
+    it('TINY-10154: should expand over the nested summary content instead of parent details body element', () => {
+      const editor = hook.editor();
+      // eslint-disable-next-line max-len
+      editor.setContent(`<details class="mce-accordion" open="open"><summary class="mce-accordion-summary">Accordion summary 1</summary><div class="mce-accordion-body"><p>Accordion body1</p><details class="mce-accordion" open="open"><summary class="mce-accordion-summary">Accordion summary1.1</summary><div class="mce-accordion-body"><p>Accordion body 1.1</p></div></details></div></details>`);
+      const rng = expandRng(editor, [ 0, 1, 1, 0, 0 ], 2, [ 0, 1, 1, 0, 0 ], 2, [{ block: 'h1', deep: true, remove: 'all', split: true }], false);
+      assertRange(editor, rng, [ 0, 1, 1 ], 0, [ 0, 1, 1, 0, 0 ], 20);
+    });
+
+    it('TINY-10312: should expand over the whole `summary` content when the caret positioned between the words', () => {
+      const editor = hook.editor();
+      editor.setContent(`<details class="mce-accordion" open="open"><summary>Accordion summary</summary><p>Accordion body</p></details>`);
+      // caret before space character
+      const rng1 = expandRng(editor, [ 0, 0, 0 ], 9, [ 0, 0, 0 ], 9, [{ block: 'h4', deep: true, remove: 'all', split: true }], false);
+      // assertRange(editor, rng1, [ 0, 0, 0 ], 0, [ 0 ], 1 );
+      assertRange(editor, rng1, [ 0 ], 0, [ 0, 0, 0 ], 17 );
+
+      // caret after space character
+      const rng2 = expandRng(editor, [ 0, 0, 0 ], 10, [ 0, 0, 0 ], 10, [{ block: 'h4', deep: true, remove: 'all', split: true }], false);
+      assertRange(editor, rng2, [ 0, 0, 0 ], 0, [ 0 ], 1 );
+    });
+  });
+
+  context('TBA: Expand selector format', () => {
+    it('TBA: Do not expand over element if selector does not match', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab</p>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 1, selectorFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 0, [ 0, 0 ], 2);
+    });
+
+    it('TBA: Do not expand outside of element if selector does not match - from bookmark at middle', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>a<span data-mce-type="bookmark">&#65279;</span>b</p>');
+      const rng = expandRng(editor, [ 0, 1, 0 ], 0, [ 0, 1, 0 ], 0, selectorFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 0, [ 0, 2 ], 1);
+    });
+
+    it('TBA: Do not expand outside of element if selector does not match - from bookmark at start', () => {
+      const editor = hook.editor();
+      editor.setContent('<p><span data-mce-type="bookmark">&#65279;</span>ab</p>');
+      const rng = expandRng(editor, [ 0, 0, 0 ], 0, [ 0, 0, 0 ], 0, selectorFormat, false);
+      assertRange(editor, rng, [ 0 ], 0, [ 0, 1 ], 2);
+    });
+
+    it('TBA: Do not expand outside of element if selector does not match - from bookmark at end', () => {
+      const editor = hook.editor();
+      editor.setContent('<p>ab<span data-mce-type="bookmark">&#65279;</span></p>');
+      const rng = expandRng(editor, [ 0, 1, 0 ], 0, [ 0, 1, 0 ], 0, selectorFormat, false);
+      assertRange(editor, rng, [ 0, 0 ], 0, [ 0 ], 2);
+    });
+
+    it('TBA: Expand since selector matches', () => {
+      const editor = hook.editor();
+      editor.setContent('<div>ab</div>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 1, selectorFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: Expand since selector matches non collapsed', () => {
+      const editor = hook.editor();
+      editor.setContent('<div>ab</div>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 2, selectorFormat, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+  });
+
+  context('TBA: Expand selector format with collapsed property', () => {
+    it('TBA: Expand since selector matches collapsed on collapsed format', () => {
+      const editor = hook.editor();
+      editor.setContent('<div>ab</div>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 1, selectorFormatCollapsed, false);
+      assertRange(editor, rng, [], 0, [], 1);
+    });
+
+    it('TBA: Expand since selector matches non collapsed on collapsed format', () => {
+      const editor = hook.editor();
+      editor.setContent('<div>ab</div>');
+      const rng = expandRng(editor, [ 0, 0 ], 1, [ 0, 0 ], 2, selectorFormatCollapsed, false);
+      assertRange(editor, rng, [ 0, 0 ], 1, [ 0, 0 ], 2);
+    });
+  });
+});

package/src/core/test/ts/browser/fmt/FontInfoTest.ts

@@ -0,0 +1,158 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { Hierarchy, SugarElement } from '@ephox/sugar';
+import { assert } from 'chai';
+
+import * as FontInfo from 'tinymce/core/fmt/FontInfo';
+
+import * as ViewBlock from '../../module/test/ViewBlock';
+
+describe('browser.tinymce.core.fmt.FontInfoTest', () => {
+  const viewBlock = ViewBlock.bddSetup();
+
+  const assertComputedFontProp = (fontProp: 'fontSize' | 'fontFamily', html: string, path: number[], expected: string) => {
+    const fontGetProp = fontProp === 'fontSize' ? FontInfo.getFontSize : FontInfo.getFontFamily;
+
+    const div = viewBlock.get();
+    div.style[fontProp] = expected;
+    viewBlock.update(html);
+    const elm = Hierarchy.follow(SugarElement.fromDom(div), path).getOrDie('oh no! ' + path.toString() + '  path was bad');
+    const actual = fontGetProp(div, elm.dom);
+    assert.equal(
+      actual,
+      expected,
+      `Doesn't match the expected computed runtime style`
+    );
+  };
+
+  const assertSpecificFontProp = (fontProp: 'fontSize' | 'fontFamily', html: string, path: number[], expected: string) => {
+    const fontGetProp = fontProp === 'fontSize' ? FontInfo.getFontSize : FontInfo.getFontFamily;
+
+    const div = viewBlock.get();
+    viewBlock.update(html);
+    const elm = Hierarchy.follow(SugarElement.fromDom(div), path).getOrDie('oh no! ' + path.toString() + '  path was bad');
+    const actual = fontGetProp(div, elm.dom);
+    assert.equal(
+      actual,
+      expected,
+      `Doesn't match the expected specific element style`
+    );
+  };
+
+  it('toPt', () => {
+    assert.equal(FontInfo.toPt('10px'), '8pt');
+    assert.equal(FontInfo.toPt('10px', 1), '7.5pt');
+    assert.equal(FontInfo.toPt('11px'), '8pt');
+    assert.equal(FontInfo.toPt('12px'), '9pt');
+    assert.equal(FontInfo.toPt('13px', 2), '9.75pt');
+    assert.equal(FontInfo.toPt('13px', 1), '9.8pt');
+    assert.equal(FontInfo.toPt('14px'), '11pt');
+    assert.equal(FontInfo.toPt('36px'), '27pt');
+  });
+
+  it('getFontSize', () => {
+    assertComputedFontProp('fontSize', '<mark></mark>', [ 0 ], '10px');
+    assertComputedFontProp('fontSize', '<span><mark></mark></span>', [ 0, 0 ], '10px');
+    assertSpecificFontProp('fontSize', '<mark style="font-size: 10px"></mark>', [ 0 ], '10px');
+    assertSpecificFontProp('fontSize', '<mark style="font-size: 14px"></mark>', [ 0 ], '14px');
+    assertSpecificFontProp('fontSize', '<mark style="font-size: 14pt"></mark>', [ 0 ], '14pt');
+    assertSpecificFontProp('fontSize', '<mark style="font-size: 14em"></mark>', [ 0 ], '14em');
+    assertSpecificFontProp('fontSize', '<span style="font-size: 10px"><mark></mark></span>', [ 0, 0 ], '10px');
+    assertSpecificFontProp('fontSize', '<span style="font-size: 14px"><mark></mark></span>', [ 0, 0 ], '14px');
+    assertSpecificFontProp('fontSize', '<span style="font-size: 10px"><span><mark></mark></span></span>', [ 0, 0, 0 ], '10px');
+    assertSpecificFontProp('fontSize', '<span style="font-size: 14px"><span><mark></mark></span></span>', [ 0, 0, 0 ], '14px');
+    assertSpecificFontProp('fontSize', '<font size="2"></font>', [ 0 ], '2');
+    assertSpecificFontProp('fontSize', '<font size="4"><mark></mark></font>', [ 0, 0 ], '4');
+  });
+
+  it('getFontFamily', () => {
+    assertComputedFontProp('fontFamily', '<mark></mark>', [ 0 ], 'Arial,Verdana');
+    assertComputedFontProp('fontFamily', '<span><mark></mark></span>', [ 0, 0 ], 'Arial,Helvetica,Verdana');
+    assertSpecificFontProp('fontFamily', '<mark style="font-family: Arial, Verdana"></mark>', [ 0 ], 'Arial,Verdana');
+    assertSpecificFontProp('fontFamily', '<mark style="font-family: Comic Sans MS"></mark>', [ 0 ], 'Comic Sans MS');
+    assertSpecificFontProp('fontFamily', '<mark style="font-family: Arial, Helvetica, Verdana"></mark>', [ 0 ], 'Arial,Helvetica,Verdana');
+    assertSpecificFontProp('fontFamily', '<span style="font-family: Arial, Verdana"><mark></mark></span>', [ 0, 0 ], 'Arial,Verdana');
+    assertSpecificFontProp(
+      'fontFamily',
+      '<span style="font-family: Arial, Helvetica, Verdana"><mark></mark></span>',
+      [ 0, 0 ],
+      'Arial,Helvetica,Verdana'
+    );
+    assertSpecificFontProp(
+      'fontFamily',
+      '<span style="font-family: Arial, Verdana"><span><mark></mark></span>',
+      [ 0, 0, 0 ],
+      'Arial,Verdana'
+    );
+    assertSpecificFontProp(
+      'fontFamily',
+      '<span style="font-family: Arial, Helvetica, Verdana"><span><mark></mark></span></span>',
+      [ 0, 0, 0 ],
+      'Arial,Helvetica,Verdana'
+    );
+    assertSpecificFontProp('fontFamily', '<font face="Comic Sans MS"></font>', [ 0 ], 'Comic Sans MS');
+    assertSpecificFontProp('fontFamily', '<font face="Arial, Verdana"><mark></mark></font>', [ 0, 0 ], 'Arial,Verdana');
+  });
+
+  it('getFontFamily should always return string even if display: none (firefox specific bug)', (done) => {
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument as Document;
+
+    iframe.addEventListener('load', () => {
+      const body = iframeDoc.body;
+      const firstChildElement = iframeDoc.body.firstChild as Element;
+      const fontFamily = FontInfo.getFontFamily(body, firstChildElement);
+      assert.typeOf(fontFamily, 'string', 'Should always be a string');
+      iframe.parentNode?.removeChild(iframe);
+
+      done();
+    }, false);
+
+    iframeDoc.open();
+    iframeDoc.write('<html><body><p>a</p></body></html>');
+    iframeDoc.close();
+  });
+
+  it('getFontFamily should return a string when run on element in removed iframe', (done) => {
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument as Document;
+
+    iframe.addEventListener('load', () => {
+      const body = iframeDoc.body;
+      const firstChildElement = iframeDoc.body.firstChild as Element;
+
+      iframe.parentNode?.removeChild(iframe);
+
+      try {
+        const fontFamily = FontInfo.getFontFamily(body, firstChildElement);
+        assert.typeOf(fontFamily, 'string', 'Should return a string');
+        done();
+      } catch (error) {
+        done('getFontFamily did not return a string');
+      }
+    }, false);
+
+    iframeDoc.open();
+    iframeDoc.write('<html><body><p>a</p></body></html>');
+    iframeDoc.close();
+  });
+
+  it('comments should always return empty string', () => {
+    assertComputedFontProp('fontFamily', '<!-- comment -->', [ 0 ], '');
+    assertComputedFontProp('fontSize', '<!-- comment -->', [ 0 ], '');
+    assertSpecificFontProp('fontFamily', '<!-- comment -->', [ 0 ], '');
+    assertSpecificFontProp('fontSize', '<!-- comment -->', [ 0 ], '');
+  });
+
+  it('should not throw error when passed in element without parent', () => {
+    const rootDiv = document.createElement('div');
+    const element = document.createElement('p');
+
+    const actual = FontInfo.getFontSize(rootDiv, element);
+
+    assert.typeOf(actual, 'string', 'should return always string');
+  });
+});

package/src/core/test/ts/browser/fmt/FontsizeFormatTest.ts

@@ -0,0 +1,25 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks, TinyUiActions } from '@ephox/wrap-mcagar';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+
+describe('browser.tinymce.core.fmt.FontsizeFormatTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    toolbar: 'fontsize',
+    font_size_formats: '1em',
+    base_url: '/project/tinymce/js/tinymce'
+  }, []);
+
+  const assertMenuItemCount = (expected: number) => {
+    const actual = document.querySelectorAll('.tox-collection__item').length;
+    assert.equal(actual, expected, 'Should be correct count');
+  };
+
+  it('Check fontsize format toolbar button', async () => {
+    const editor = hook.editor();
+    TinyUiActions.clickOnToolbar(editor, 'button.tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke');
+    await TinyUiActions.pWaitForUi(editor, 'div.tox-menu.tox-collection.tox-collection--list.tox-selected-menu');
+    assertMenuItemCount(1);
+  });
+});