opentiny 6.9.0

package/src/plugins/media/test/ts/browser/ContentFormatsTest.ts

@@ -0,0 +1,187 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { McEditor, TinyAssertions, TinyHooks } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/media/Plugin';
+
+describe('browser.tinymce.plugins.media.ContentFormatsTest', () => {
+  const settings = {
+    plugins: 'media',
+    toolbar: 'media',
+    base_url: '/project/tinymce/js/tinymce',
+    media_live_embeds: false,
+    document_base_url: '/tinymce/tinymce/trunk/tests/',
+    extended_valid_elements: 'script[src|type]',
+    allow_conditional_comments: true,
+    convert_unsafe_embeds: false
+  };
+  const hook = TinyHooks.bddSetupLight<Editor>(settings, [ Plugin ]);
+
+  it('TBA: Object retained as is', () => {
+    const editor = hook.editor();
+    editor.setContent(
+      '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355">' +
+      '<param name="movie" value="someurl">' +
+      '<param name="wmode" value="transparent">' +
+      '<embed src="someurl" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355" />' +
+      '</object>'
+    );
+
+    TinyAssertions.assertContent(editor,
+      '<p><object width="425" height="355" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">' +
+      '<param name="movie" value="someurl">' +
+      '<param name="wmode" value="transparent">' +
+      '<embed src="someurl" type="application/x-shockwave-flash" width="425" height="355" wmode="transparent">' +
+      '</object></p>'
+    );
+  });
+
+  it('TBA: Embed retained as is', () => {
+    const editor = hook.editor();
+    editor.setContent(
+      '<embed src="320x240.ogg" width="100" height="200">text<a href="#">link</a></embed>'
+    );
+
+    TinyAssertions.assertContent(editor,
+      '<p><embed src="320x240.ogg" width="100" height="200">text<a href="#">link</a></p>'
+    );
+  });
+
+  it('TBA: Video retained as is', () => {
+    const editor = hook.editor();
+    editor.setContent(
+      '<video src="320x240.ogg" autoplay loop controls>text<a href="#">link</a></video>'
+    );
+
+    TinyAssertions.assertContent(editor,
+      '<p><video src="320x240.ogg" autoplay="autoplay" loop="loop" controls="controls" width="300" height="150">text<a href="#">link</a></video></p>'
+    );
+  });
+
+  it('TINY-10348: Iframe retained as is with sandbox_iframes: false', async () => {
+    const editor = await McEditor.pFromSettings({ ...settings, sandbox_iframes: false });
+    editor.setContent('<iframe src="320x240.ogg" allowfullscreen></iframe>');
+    TinyAssertions.assertContent(editor,
+      '<p><iframe src="320x240.ogg" width="300" height="150" allowfullscreen="allowfullscreen"></iframe></p>'
+    );
+    McEditor.remove(editor);
+  });
+
+  it('TINY-10348: Iframe retained as is with sandbox_iframes: true', async () => {
+    const editor = await McEditor.pFromSettings({ ...settings, sandbox_iframes: true });
+    editor.setContent('<iframe src="320x240.ogg" allowfullscreen></iframe>');
+    TinyAssertions.assertContent(editor,
+      '<p><iframe src="320x240.ogg" width="300" height="150" sandbox="" allowfullscreen="allowfullscreen"></iframe></p>'
+    );
+    McEditor.remove(editor);
+  });
+
+  it('TBA: Iframe with innerHTML retained as is with xss_sanitization: false', async () => {
+    // TINY-8363: Iframe with innerHTML is removed by DOMPurify, so disable sanitization for this test
+    const editor = await McEditor.pFromSettings<Editor>({
+      ...settings,
+      xss_sanitization: false
+    });
+    editor.setContent(
+      '<iframe src="320x240.ogg" allowfullscreen>text<a href="#">link</a></iframe>'
+    );
+    TinyAssertions.assertContent(editor,
+      '<p><iframe src="320x240.ogg" width="300" height="150" sandbox="" allowfullscreen="allowfullscreen">text<a href="#">link</a></iframe></p>'
+    );
+    McEditor.remove(editor);
+  });
+
+  it('TBA: Audio retained as is', () => {
+    const editor = hook.editor();
+    editor.setContent(
+      '<audio src="sound.mp3">' +
+      '<track kind="captions" src="foo.en.vtt" srclang="en" label="English">' +
+      '<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">' +
+      'text<a href="#">link</a>' +
+      '</audio>'
+    );
+
+    TinyAssertions.assertContent(editor,
+      '<p>' +
+      '<audio src="sound.mp3">' +
+      '<track kind="captions" src="foo.en.vtt" srclang="en" label="English">' +
+      '<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">' +
+      'text<a href="#">link</a>' +
+      '</audio>' +
+      '</p>'
+    );
+  });
+
+  it('TBA: Resize complex object', () => {
+    const editor = hook.editor();
+    editor.options.set('media_live_embeds', false);
+    editor.setContent(
+      '<video width="300" height="150" controls="controls">' +
+      '<source src="s" />' +
+      '<object type="application/x-shockwave-flash" data="../../js/tinymce/plugins/media/moxieplayer.swf" width="300" height="150">' +
+      '<param name="allowfullscreen" value="true" />' +
+      '<param name="allowscriptaccess" value="always" />' +
+      '<param name="flashvars" value="video_src=s" />' +
+      '<!--[if IE]><param name="movie" value="../../js/tinymce/plugins/media/moxieplayer.swf" /><![endif]-->' +
+      '</object>' +
+      '</video>'
+    );
+
+    const placeholderElm = editor.dom.select('img')[0];
+    placeholderElm.width = 100;
+    placeholderElm.height = 200;
+    editor.dispatch('ObjectResized', { target: placeholderElm, width: placeholderElm.width, height: placeholderElm.height, origin: 'corner-se' });
+    editor.options.set('media_filter_html', false);
+
+    TinyAssertions.assertContent(editor,
+      '<p>' +
+      '<video controls="controls" width="100" height="200">' +
+      '<source src="s">' +
+      '<object data="../../js/tinymce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash" width="100" height="200">' +
+      '<param name="allowfullscreen" value="true">' +
+      '<param name="allowscriptaccess" value="always">' +
+      '<param name="flashvars" value="video_src=s">' +
+      '<!--[if IE]>' +
+      '<param name="movie" value="../../js/tinymce/plugins/media/moxieplayer.swf" />' +
+      '<![endif]-->' +
+      '</object>' +
+      '</video>' +
+      '</p>'
+    );
+
+    editor.options.unset('media_filter_html');
+    editor.options.unset('media_live_embeds');
+  });
+
+  it('TBA: XSS content', () => {
+    const editor = hook.editor();
+    const testXss = (input: string, expectedOutput: string) => {
+      editor.setContent(input);
+      TinyAssertions.assertContent(editor, expectedOutput);
+    };
+
+    testXss('<video><a href="javascript:alert(1);">a</a></video>', '<p><video width="300" height="150"><a>a</a></video></p>');
+    testXss('<video><img src="x" onload="alert(1)"></video>', '<p><video width="300" height=\"150\"><img src="x"></video></p>');
+    testXss('<video><img src="x"></video>', '<p><video width="300" height="150"><img src="x"></video></p>');
+    testXss('<p><audio src=x onerror=alert(1)></audio></p>', '<p><audio src="x"></audio></p>');
+    testXss('<p><html><audio><br /><audio src=x onerror=alert(1)></p>', '<p><audio><br></audio><audio src="x"></audio></p>');
+    testXss('<p><audio><img src="javascript:alert(1)"></audio>', '<p><audio><img></audio></p>');
+    testXss(
+      '<p><video><noscript><svg onload="javascript:alert(1)"></svg></noscript></video>',
+      '<p><video width="300" height="150"><noscript></noscript></video></p>'
+    );
+    testXss(
+      '<p><video><script><svg onload="javascript:alert(1)"></svg></s' + 'cript></video>',
+      '<p><video width="300" height="150"></video></p>'
+    );
+    testXss(
+      '<p><audio><noscript><svg onload="javascript:alert(1)"></svg></noscript></audio>',
+      '<p><audio><noscript></noscript></audio></p>'
+    );
+    testXss(
+      '<p><audio><script><svg onload="javascript:alert(1)"></svg></s' + 'cript></audio>',
+      '<p><audio></audio></p>'
+    );
+    testXss('<p><audio><script><svg></svg></script></audio>', '<p><audio></audio></p>');
+  });
+});

package/src/plugins/media/test/ts/browser/DataAttributeTest.ts

@@ -0,0 +1,58 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/media/Plugin';
+
+import * as Utils from '../module/test/Utils';
+
+describe('browser.tinymce.plugins.media.DataAttributeTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: [ 'media' ],
+    toolbar: 'media',
+    media_url_resolver: (data: { url: string }, resolve: (response: { html: string }) => void) => {
+      resolve({ html: '<div data-ephox-embed-iri="' + data.url + '" style="max-width: 300px; max-height: 150px"></div>' });
+    },
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const pTestEmbedContentFromUrlWithAttribute = async (editor: Editor, url: string, content: string) => {
+    editor.setContent('');
+    await Utils.pOpenDialog(editor);
+    await Utils.pPasteSourceValue(editor, url);
+    // We can't assert the DOM because tab panels don't render hidden tabs, so we check the data model
+    await Utils.pAssertEmbedData(editor, content);
+    await Utils.pSubmitAndReopen(editor);
+    await Utils.pAssertSourceValue(editor, url);
+    TinyUiActions.closeDialog(editor);
+  };
+
+  const pTestEmbedContentFromUrl2 = async (editor: Editor, url: string, url2: string, content: string, content2: string) => {
+    editor.setContent('');
+    await Utils.pOpenDialog(editor);
+    await Utils.pPasteSourceValue(editor, url);
+    await Utils.pAssertEmbedData(editor, content);
+    await Utils.pSubmitAndReopen(editor);
+    await Utils.pAssertSourceValue(editor, url);
+    await Utils.pPasteSourceValue(editor, url2);
+    await Utils.pAssertEmbedData(editor, content2);
+    TinyUiActions.closeDialog(editor);
+  };
+
+  it('TBA: Test embedded content from url with attribute', async () => {
+    const editor = hook.editor();
+    await pTestEmbedContentFromUrlWithAttribute(editor, 'a',
+      '<div data-ephox-embed-iri="a" style="max-width: 300px; max-height: 150px"></div>'
+    );
+    await pTestEmbedContentFromUrl2(editor, 'a', 'b',
+      '<div data-ephox-embed-iri="a" style="max-width: 300px; max-height: 150px"></div>',
+      '<div data-ephox-embed-iri="b" style="max-width: 300px; max-height: 150px"></div>'
+    );
+    await Utils.pTestEmbedContentFromUrl(editor, 'a',
+      '<div data-ephox-embed-iri="a" style="max-width: 300px; max-height: 150px"></div>'
+    );
+    await Utils.pAssertSizeRecalcConstrained(editor);
+    await Utils.pAssertSizeRecalcUnconstrained(editor);
+    await Utils.pAssertSizeRecalcConstrainedReopen(editor);
+  });
+});

package/src/plugins/media/test/ts/browser/DataToHtmlTest.ts

@@ -0,0 +1,157 @@
+import { ApproxStructure, Assertions, StructAssert, Waiter } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { Fun } from '@ephox/katamari';
+import { SugarElement } from '@ephox/sugar';
+import { TinyHooks } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import * as DataToHtml from 'tinymce/plugins/media/core/DataToHtml';
+import { MediaData } from 'tinymce/plugins/media/core/Types';
+import Plugin from 'tinymce/plugins/media/Plugin';
+
+describe('browser.tinymce.plugins.media.core.DataToHtmlTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: [ 'media' ],
+    toolbar: 'media',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const pTestDataToHtml = async (editor: Editor, data: MediaData, expected: StructAssert) => {
+    const actual = SugarElement.fromHtml(DataToHtml.dataToHtml(editor, data));
+    await Waiter.pTryUntil('Wait for structure check',
+      () => Assertions.assertStructure('Assert equal', expected, actual),
+      10, 500
+    );
+  };
+
+  const videoStruct = ApproxStructure.build((s, str/* , arr*/) => {
+    return s.element('video', {
+      children: [
+        s.text(str.is('\n')),
+        s.element('source', {
+          attrs: {
+            src: str.is('a')
+          }
+        }),
+        s.text(str.is('\n'))
+      ],
+      attrs: {
+        height: str.is('150'),
+        width: str.is('300')
+      }
+    });
+  });
+
+  const iframeStruct = ApproxStructure.build((s, str/* , arr*/) => {
+    return s.element('iframe', {
+      attrs: {
+        height: str.is('150'),
+        width: str.is('300')
+      }
+    });
+  });
+
+  it('TBA: Assert html structure of a video element', () => pTestDataToHtml(hook.editor(),
+    {
+      'type': 'video',
+      'source': 'a',
+      'altsource': '',
+      'poster': '',
+      'data-ephox-embed': 'a'
+    },
+    videoStruct
+  ));
+
+  it('TBA: Assert html structure of an iframe element', () => pTestDataToHtml(hook.editor(),
+    {
+      'type': 'iframe',
+      'source': 'a',
+      'altsource': '',
+      'poster': '',
+      'data-ephox-embed': 'a'
+    },
+    iframeStruct
+  ));
+
+  it('TBA: Assert html structure of audio from template callback', async () => {
+    const editor = hook.editor();
+    const audioTemplateCallback = Fun.constant('<audio id="template" controls="controls"><source src="https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3"></audio>');
+    editor.options.set('audio_template_callback', audioTemplateCallback);
+    const input = {
+      source: 'https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3',
+      altsource: '',
+      poster: ''
+    };
+    const expected = ApproxStructure.build((s, str/* , arr*/) => {
+      return s.element('audio', {
+        children: [
+          s.element('source', {
+            attrs: {
+              src: str.is('https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3')
+            }
+          })
+        ],
+        attrs: {
+          id: str.is('template'),
+          controls: str.is('controls'),
+        }
+      });
+    });
+    await pTestDataToHtml(editor, input, expected);
+    editor.options.unset('audio_template_callback');
+  });
+
+  it('TBA: Assert html structure of video from template callback', async () => {
+    const editor = hook.editor();
+    const videoTemplateCallback = Fun.constant('<video id="template" controls="controls" width="500" height="300" ><source src="https://i.imgur.com/Tu4e5WX.mp4"></video>');
+    editor.options.set('video_template_callback', videoTemplateCallback);
+    const input = {
+      source: 'https://i.imgur.com/Tu4e5WX.mp4',
+      altsource: '',
+      poster: ''
+    };
+    const expected = ApproxStructure.build((s, str/* , arr*/) => {
+      return s.element('video', {
+        children: [
+          s.element('source', {
+            attrs: {
+              src: str.is('https://i.imgur.com/Tu4e5WX.mp4')
+            }
+          })
+        ],
+        attrs: {
+          id: str.is('template'),
+          controls: str.is('controls'),
+          height: str.is('300'),
+          width: str.is('500')
+        }
+      });
+    });
+    await pTestDataToHtml(editor, input, expected);
+    editor.options.unset('video_template_callback');
+  });
+
+  it('TINY-8684: Assert html structure of iframe from template callback', async () => {
+    const editor = hook.editor();
+    const iframeTemplateCallback = Fun.constant('<iframe id="template" title="testcallback" src="https://www.youtube.com/embed/IcgmSRJHu_8" width="500" height="300"></iframe>');
+    editor.options.set('iframe_template_callback', iframeTemplateCallback);
+    const input = {
+      source: 'https://www.youtube.com/embed/IcgmSRJHu_8',
+      altsource: '',
+      poster: ''
+    };
+    const expected = ApproxStructure.build((s, str/* , arr*/) => {
+      return s.element('iframe', {
+        attrs: {
+          src: str.is('https://www.youtube.com/embed/IcgmSRJHu_8'),
+          title: str.is('testcallback'),
+          id: str.is('template'),
+          height: str.is('300'),
+          width: str.is('500')
+        }
+      });
+    });
+    await pTestDataToHtml(editor, input, expected);
+    editor.options.unset('iframe_template_callback');
+  });
+});

package/src/plugins/media/test/ts/browser/DataUnwrapTest.ts

@@ -0,0 +1,61 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks } from '@ephox/wrap-mcagar';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+import { MediaData, MediaDialogData } from 'tinymce/plugins/media/core/Types';
+import Plugin from 'tinymce/plugins/media/Plugin';
+import * as Dialog from 'tinymce/plugins/media/ui/Dialog';
+
+describe('browser.tinymce.plugins.media.core.DataUnwrapTest', () => {
+  TinyHooks.bddSetupLight<Editor>({
+    plugins: [ 'media' ],
+    toolbar: 'media',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const inputData: MediaDialogData = {
+    source: {
+      value: 'www.test.com',
+      meta: {
+        altsource: 'www.newaltsource.com',
+        poster: 'www.newposter.com/image.jpg'
+      }
+    },
+    altsource: {
+      value: 'www.altsource.com',
+      meta: {}
+    },
+    poster: { value: '', meta: {}},
+    embed: ''
+  };
+
+  const outputData: MediaData = {
+    source: 'www.test.com',
+    altsource: 'www.newaltsource.com',
+    poster: 'www.newposter.com/image.jpg',
+    embed: ''
+  };
+
+  const inputDataWithDimensions: MediaDialogData = {
+    ...inputData,
+    dimensions: {
+      width: '100px',
+      height: '200px'
+    }
+  };
+
+  const outputDataWithDimensions: MediaData = {
+    ...outputData,
+    width: '100px',
+    height: '200px'
+  };
+
+  it('TINY-4163: Dialog.unwrap() without dimensions', () => {
+    assert.deepEqual(Dialog.unwrap(inputData, 'source'), outputData);
+  });
+
+  it('TINY-4163: Dialog.unwrap() with dimensions', () => {
+    assert.deepEqual(Dialog.unwrap(inputDataWithDimensions, 'source'), outputDataWithDimensions);
+  });
+});

package/src/plugins/media/test/ts/browser/DimensionsFalseEmbedTest.ts

@@ -0,0 +1,74 @@
+import { ApproxStructure, UiFinder, Waiter } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { SugarBody } from '@ephox/sugar';
+import { TinyAssertions, TinyHooks, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/media/Plugin';
+
+import * as Utils from '../module/test/Utils';
+
+describe('browser.tinymce.plugins.media.DimensionsFalseEmbedTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: [ 'media' ],
+    toolbar: 'media',
+    media_dimensions: false,
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const struct = ApproxStructure.build((s, str, arr) => {
+    return s.element('body', {
+      children: [
+        s.element('p', {
+          children: [
+            s.element('span', {
+              attrs: {
+                'data-mce-object': str.is('iframe')
+              },
+              children: [
+                s.element('iframe', {
+                  attrs: {
+                    width: str.is('200'),
+                    height: str.is('100')
+                  }
+                }),
+                s.element('span', {
+                  classes: [ arr.has('mce-shim') ]
+                })
+              ]
+            })
+          ]
+        }),
+        s.theRest()
+      ]
+    });
+  });
+
+  it('TBA: Open dialog, assert dimensions fields are not present while media_dimensions is false', async () => {
+    const editor = hook.editor();
+    const dialog = await Utils.pOpenDialog(editor);
+    UiFinder.exists(dialog, Utils.selectors.source);
+    UiFinder.notExists(dialog, Utils.selectors.width);
+    UiFinder.notExists(dialog, Utils.selectors.height);
+    TinyUiActions.submitDialog(editor);
+    await Waiter.pTryUntil(
+      'Wait for dialog to close',
+      () => UiFinder.notExists(SugarBody.body(), 'div[aria-label="Insert/edit media"][role="dialog"]')
+    );
+  });
+
+  it('TINY-950: Open dialog, set text area content, close dialog and assert content structure', async () => {
+    const editor = hook.editor();
+    await Utils.pOpenDialog(editor);
+    await Utils.pPasteTextareaValue(
+      editor,
+      '<iframe width="200" height="100" src="a" ' +
+      ' frameborder="0" allowfullscreen></iframe>'
+    );
+    TinyUiActions.submitDialog(editor);
+    await Waiter.pTryUntil(
+      'content was not expected structure',
+      () => TinyAssertions.assertContentStructure(editor, struct)
+    );
+  });
+});

package/src/plugins/media/test/ts/browser/EphoxEmbedTest.ts

@@ -0,0 +1,108 @@
+import { ApproxStructure, Assertions, StructAssert, Waiter } from '@ephox/agar';
+import { context, describe, it } from '@ephox/bedrock-client';
+import { Arr } from '@ephox/katamari';
+import { SugarElement } from '@ephox/sugar';
+import { TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import AstNode from 'tinymce/core/api/html/Node';
+import Plugin from 'tinymce/plugins/media/Plugin';
+
+import * as Utils from '../module/test/Utils';
+
+describe('browser.tinymce.plugins.media.core.EphoxEmbedTest', () => {
+  const ephoxEmbedStructure = ApproxStructure.build((s, str/* , arr*/) => {
+    return s.element('div', {
+      children: [
+        s.element('iframe', {
+          attrs: {
+            src: str.is('about:blank'),
+            sandbox: str.is('')
+          }
+        })
+      ],
+      attrs: {
+        'data-ephox-embed-iri': str.is('embed-iri'),
+        'contenteditable': str.is('false')
+      }
+    });
+  });
+
+  const assertDivStructure = (editor: Editor, expected: StructAssert) => {
+    const div = editor.dom.select('div')[0];
+    const actual = div ? SugarElement.fromDom(div) : SugarElement.fromHtml('');
+    Assertions.assertStructure('Should be the same structure', expected, actual);
+  };
+
+  context('embed', () => {
+    const hook = TinyHooks.bddSetupLight<Editor>({
+      plugins: [ 'media' ],
+      toolbar: 'media',
+      media_url_resolver: (data: { url: string }, resolve: (response: { html: string }) => void) => {
+        resolve({
+          html: '<video width="300" height="150" ' +
+            'controls="controls">\n<source src="' + data.url + '" />\n</video>'
+        });
+      },
+      base_url: '/project/tinymce/js/tinymce'
+    }, [ Plugin ], true);
+
+    it('TBA: Open dialog, assert embedded content, close dialog and assert div structure', async () => {
+      const editor = hook.editor();
+      const content = '<div contenteditable="false" data-ephox-embed-iri="embed-iri"><iframe src="about:blank"></iframe></div>';
+      const sandboxedContent = '<div contenteditable="false" data-ephox-embed-iri="embed-iri"><iframe src="about:blank" sandbox=""></iframe></div>';
+      editor.setContent(content);
+      assertDivStructure(editor, ephoxEmbedStructure);
+      TinySelections.select(editor, 'div', []);
+      await Utils.pOpenDialog(editor);
+      await Utils.pAssertSourceValue(editor, 'embed-iri');
+      await Utils.pAssertEmbedData(editor, sandboxedContent);
+      TinyUiActions.submitDialog(editor);
+      await Waiter.pTryUntil('wait for div structure', () => assertDivStructure(editor, ephoxEmbedStructure));
+    });
+  });
+
+  context('youtube embed', () => {
+    const hook = TinyHooks.bddSetup<Editor>({
+      plugins: [ 'media' ],
+      toolbar: 'media',
+      setup: (editor: Editor) => {
+        editor.on('PreInit', () => {
+          const converter = (nodes: AstNode[]): void => {
+            Arr.each(nodes, (node) => {
+              const shimNode = new AstNode('span', 1);
+              shimNode.attr('class', 'mce-shim');
+
+              node.append(shimNode);
+              node.attr('contenteditable', 'false');
+            });
+          };
+
+          editor.parser.addAttributeFilter('data-ephox-embed-iri', converter);
+        });
+      },
+      base_url: '/project/tinymce/js/tinymce'
+    }, [ Plugin ], true);
+
+    const responsiveEmbedData =
+      `<div style="max-width: 650px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=5auGeCM0knQ">
+      <div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+      <iframe style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;"
+      src="https://www.youtube.com/embed/5auGeCM0knQ?rel=0" scrolling="no" allow="accelerometer;
+      clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"
+      allowfullscreen="allowfullscreen"></iframe></div></div>`;
+
+    it('TINY-8714: Assert dimensions of responsive embed data', async () => {
+      const editor = hook.editor();
+      editor.setContent(responsiveEmbedData);
+      TinySelections.select(editor, 'div', []);
+      await Utils.pOpenDialog(editor);
+
+      const aspectRatio = 9 / 16;
+      const expectedWidth = 650;
+      const expectedHeight = Math.ceil(expectedWidth * aspectRatio);
+
+      await Utils.pAssertHeightAndWidth(editor, expectedHeight.toString(), expectedWidth.toString());
+    });
+  });
+});