diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 53ab2e47204..8f602d793a2 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -103,10 +103,9 @@ function attachmentThumbnailToLinkImg($editable) {
  * support the mixing and matching of column options (e.g., "col-4 col-sm-6" and
  * "col col-4" aren't supported).
  *
- * @param {JQuery} $editable
+ * @param {Element} editable
  */
-function bootstrapToTable($editable) {
-    const editable = $editable.get(0);
+function bootstrapToTable(editable) {
     // First give all rows in columns a separate container parent.
     for (const rowInColumn of [...editable.querySelectorAll('.row')].filter(row => RE_COL_MATCH.test(row.parentElement.className))) {
         const previous = rowInColumn.previousElementSibling;
@@ -291,10 +290,9 @@ function bootstrapToTable($editable) {
 /**
  * Convert Bootstrap cards to table structures.
  *
- * @param {JQuery} $editable
+ * @param {Element} editable
  */
-function cardToTable($editable) {
-    const editable = $editable.get(0);
+function cardToTable(editable) {
     for (const card of editable.querySelectorAll('.card')) {
         const table = _createTable(card.attributes);
         table.style.removeProperty('overflow');
@@ -598,9 +596,9 @@ async function toInline($editable, cssRules, $iframe) {
     fontToImg($editable);
     await svgToPng($editable);
     classToStyle($editable, cssRules);
-    bootstrapToTable($editable);
-    cardToTable($editable);
-    listGroupToTable($editable);
+    bootstrapToTable(editable);
+    cardToTable(editable);
+    listGroupToTable(editable);
     addTables($editable);
     normalizeColors($editable);
     const rootFontSizeProperty = getComputedStyle(editable.ownerDocument.documentElement).fontSize;
@@ -931,10 +929,9 @@ function getCSSRules(doc) {
 /**
  * Convert Bootstrap list groups and their items to table structures.
  *
- * @param {JQuery} $editable
+ * @param {Element} editable
  */
-function listGroupToTable($editable) {
-    const editable = $editable.get(0);
+function listGroupToTable(editable) {
     for (const listGroup of editable.querySelectorAll('.list-group')) {
         let table;
         if (listGroup.querySelectorAll('.list-group-item').length) {
diff --git a/addons/web_editor/static/tests/convert_inline_tests.js b/addons/web_editor/static/tests/convert_inline_tests.js
index 20de7775de3..ab73b76ad01 100644
--- a/addons/web_editor/static/tests/convert_inline_tests.js
+++ b/addons/web_editor/static/tests/convert_inline_tests.js
@@ -8,9 +8,16 @@ const TEST_HEIGHT = 600;
 QUnit.module('web_editor', {}, function () {
 QUnit.module('convert_inline', {}, function () {
     QUnit.module('Convert Bootstrap grids to tables', {
-        beforeEach: function () {
-            this.$editable = $(`<div style="width: ${TEST_WIDTH}px; height: ${TEST_HEIGHT}px;"/>`);
-            $('#qunit-fixture').append(this.$editable);
+        beforeEach: function (assert) {
+            this.editable = document.createElement('div');
+            this.editable.style.setProperty('width', TEST_WIDTH + 'px');
+            this.editable.style.setProperty('height', TEST_HEIGHT + 'px');
+            document.querySelector('#qunit-fixture').append(this.editable);
+            this.testConvertGrid = ({ before, after, title, stepFunction }) => {
+                this.editable.innerHTML = before;
+                (stepFunction || convertInline.bootstrapToTable)(this.editable);
+                assert.strictEqual(removeComments(this.editable.innerHTML), after, title);
+            }
         }
     });
     // Test bootstrapToTable, cardToTable and listGroupToTable
@@ -19,260 +26,275 @@ QUnit.module('convert_inline', {}, function () {
         assert.expect(4);
 
         // 1x1
-        this.$editable.html(getRegularGridHtml(1, 1));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 1, 12, 100, TEST_WIDTH),
-            "should have converted a 1x1 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 1),
+            after: getRegularTableHtml(1, 1, 12, 100, TEST_WIDTH),
+            title: "should have converted a 1x1 grid to an equivalent table",
+        });
 
         // 1x2
-        this.$editable.html(getRegularGridHtml(1, 2));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 2, 6, 50, TEST_WIDTH),
-            "should have converted a 1x2 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 2),
+            after: getRegularTableHtml(1, 2, 6, 50, TEST_WIDTH),
+            title: "should have converted a 1x2 grid to an equivalent table",
+        });
 
         // 1x3
-        this.$editable.html(getRegularGridHtml(1, 3));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 3, 4, 33.33, TEST_WIDTH),
-            "should have converted a 1x3 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 3),
+            after: getRegularTableHtml(1, 3, 4, 33.33, TEST_WIDTH),
+            title: "should have converted a 1x3 grid to an equivalent table",
+        });
 
         // 1x12
-        this.$editable.html(getRegularGridHtml(1, 12));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH),
-            "should have converted a 1x12 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 12),
+            after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH),
+            title: "should have converted a 1x12 grid to an equivalent table",
+        });
     });
     QUnit.test('convert a single-row regular overflowing grid', async function (assert) {
         assert.expect(4);
 
         // 1x13
-        this.$editable.html(getRegularGridHtml(1, 13));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 13),
+            after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(0, 12)', TEST_WIDTH) + getTdHtml(11, '', TEST_WIDTH) +
                 `</tr></table>`,
-            "should have converted a 1x13 grid to an equivalent table (overflowing)");
+            title: "should have converted a 1x13 grid to an equivalent table (overflowing)",
+        });
 
         // 1x14
-        this.$editable.html(getRegularGridHtml(1, 14));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 14),
+            after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(0, 12)', TEST_WIDTH) + getTdHtml(1, '(0, 13)', TEST_WIDTH) + getTdHtml(10, '', TEST_WIDTH) +
                 `</tr></table>`,
-            "should have converted a 1x14 grid to an equivalent table (overflowing)");
+            title: "should have converted a 1x14 grid to an equivalent table (overflowing)",
+        });
 
         // 1x25
-        this.$editable.html(getRegularGridHtml(1, 25));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
-                .replace(/^<table[^<]*>/, '').slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 25),
+            after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
+                getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
+                    .replace(/^<table[^<]*>/, '').slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(0, 24)', TEST_WIDTH) + getTdHtml(11, '', TEST_WIDTH) +
                 `</tr></table>`,
-            "should have converted a 1x25 grid to an equivalent table (overflowing)");
+            title: "should have converted a 1x25 grid to an equivalent table (overflowing)",
+        });
 
         // 1x26
-        this.$editable.html(getRegularGridHtml(1, 26));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
-                .replace(/^<table[^<]*>/, '').slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(1, 26),
+            after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
+                getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
+                    .replace(/^<table[^<]*>/, '').slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(0, 24)', TEST_WIDTH) + getTdHtml(1, '(0, 25)', TEST_WIDTH) + getTdHtml(10, '', TEST_WIDTH) +
                 `</tr></table>`,
-            "should have converted a 1x26 grid to an equivalent table (overflowing)");
+            title: "should have converted a 1x26 grid to an equivalent table (overflowing)",
+        });
     });
     QUnit.test('convert a multi-row regular grid', async function (assert) {
         assert.expect(4);
 
         // 2x1
-        this.$editable.html(getRegularGridHtml(2, 1));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(2, 1, 12, 100, TEST_WIDTH),
-            "should have converted a 2x1 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(2, 1),
+            after: getRegularTableHtml(2, 1, 12, 100, TEST_WIDTH),
+            title: "should have converted a 2x1 grid to an equivalent table",
+        });
 
         // 2x[1,2]
-        this.$editable.html(getRegularGridHtml(2, [1, 2]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(2, [1, 2], [12, 6], [100, 50], TEST_WIDTH),
-            "should have converted a 2x[1,2] grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(2, [1, 2]),
+            after: getRegularTableHtml(2, [1, 2], [12, 6], [100, 50], TEST_WIDTH),
+            title: "should have converted a 2x[1,2] grid to an equivalent table",
+        });
 
         // 3x3
-        this.$editable.html(getRegularGridHtml(3, 3));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(3, 3, 4, 33.33, TEST_WIDTH),
-            "should have converted a 3x3 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(3, 3),
+            after: getRegularTableHtml(3, 3, 4, 33.33, TEST_WIDTH),
+            title: "should have converted a 3x3 grid to an equivalent table",
+        });
 
         // 3x[3,2,1]
-        this.$editable.html(getRegularGridHtml(3, [3,2,1]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getRegularTableHtml(3, [3, 2, 1], [4, 6, 12], [33.33, 50, 100], TEST_WIDTH),
-            "should have converted a 3x[3,2,1] grid to an equivalent table");
+        this.testConvertGrid({
+            before: getRegularGridHtml(3, [3,2,1]),
+            after: getRegularTableHtml(3, [3, 2, 1], [4, 6, 12], [33.33, 50, 100], TEST_WIDTH),
+            title: "should have converted a 3x[3,2,1] grid to an equivalent table",
+        });
     });
     QUnit.test('convert a multi-row regular overflowing grid', async function (assert) {
         assert.expect(4);
 
         // 2x[13,1]
-        this.$editable.html(getRegularGridHtml(2, [13, 1]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(2, [13, 1]),
+            after: getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(0, 12)', TEST_WIDTH) +
                 getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
                 `</tr>` +
                 `<tr>${getTdHtml(12, '(1, 0)', TEST_WIDTH)}</tr></table>`, // 1 col with no size == col-12
-            "should have converted a 2x[13,1] grid to an equivalent table (overflowing)");
+            title: "should have converted a 2x[13,1] grid to an equivalent table (overflowing)",
+        });
 
         // 2x[1,13]
-        this.$editable.html(getRegularGridHtml(2, [1, 13]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(2, [1, 13]),
+            after: getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(1, 12)', TEST_WIDTH) +
                 getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
                 `</tr></table>`,
-            "should have converted a 2x[1,13] grid to an equivalent table (overflowing)");
+            title: "should have converted a 2x[1,13] grid to an equivalent table (overflowing)",
+        });
 
         // 3x[1,13,6]
-        this.$editable.html(getRegularGridHtml(3, [1, 13, 6]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(3, [1, 13, 6]),
+            after: getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(1, 12)', TEST_WIDTH) +
                 getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
                 `</tr>` +
                 getRegularTableHtml(1, 6, 2, 16.67, TEST_WIDTH).replace(/\(0,/g, `(2,`).replace(/^<table[^<]*>/, ''),
-            "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)");
+            title: "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)",
+        });
 
         // 3x[1,6,13]
-        this.$editable.html(getRegularGridHtml(3, [1, 6, 13]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], TEST_WIDTH).slice(0, -8) +
+        this.testConvertGrid({
+            before: getRegularGridHtml(3, [1, 6, 13]),
+            after: getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], TEST_WIDTH).slice(0, -8) +
                 `<tr>` +
                 getTdHtml(1, '(2, 12)', TEST_WIDTH) +
                 getTdHtml(11, '', TEST_WIDTH) + // 13 overflowed the row by 1 -> fill up
                 `</tr></table>`,
-            "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)");
+            title: "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)",
+        });
     });
     QUnit.test('convert a single-row irregular grid', async function (assert) {
         assert.expect(2);
 
         // 1x2
-        this.$editable.html(getGridHtml([[8, 4]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[8, 66.67], [4, 33.33]]], TEST_WIDTH),
-            "should have converted a 1x2 irregular grid to an equivalent table");
+        this.testConvertGrid({
+            before: getGridHtml([[8, 4]]),
+            after: getTableHtml([[[8, 66.67], [4, 33.33]]], TEST_WIDTH),
+            title: "should have converted a 1x2 irregular grid to an equivalent table",
+        });
 
         // 1x3
-        this.$editable.html(getGridHtml([[2, 3, 7]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]], TEST_WIDTH),
-            "should have converted a 1x3 grid to an equivalent table");
+        this.testConvertGrid({
+            before: getGridHtml([[2, 3, 7]]),
+            after: getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]], TEST_WIDTH),
+            title: "should have converted a 1x3 grid to an equivalent table",
+        });
     });
     QUnit.test('convert a single-row irregular overflowing grid', async function (assert) {
         assert.expect(2);
 
         // 1x2
-        this.$editable.html(getGridHtml([[8, 5]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([
+        this.testConvertGrid({
+            before: getGridHtml([[8, 5]]),
+            after: getTableHtml([
                 [[8, 66.67], [4, 33.33, '']],
                 [[5, 41.67, '(0, 1)'], [7, 58.33, '']],
             ], TEST_WIDTH),
-            "should have converted a 1x2 irregular overflowing grid to an equivalent table");
+            title: "should have converted a 1x2 irregular overflowing grid to an equivalent table",
+        });
 
         // 1x3
-        this.$editable.html(getGridHtml([[7, 6, 9]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([
+        this.testConvertGrid({
+            before: getGridHtml([[7, 6, 9]]),
+            after: getTableHtml([
                 [[7, 58.33], [5, 41.67, '']],
                 [[6, 50, '(0, 1)'], [6, 50, '']],
                 [[9, 75, '(0, 2)'], [3, 25, '']],
             ], TEST_WIDTH),
-            "should have converted a 1x3 irregular overflowing grid to an equivalent table");
+            title: "should have converted a 1x3 irregular overflowing grid to an equivalent table",
+        });
     });
     QUnit.test('convert a multi-row irregular grid', async function (assert) {
         assert.expect(2);
 
         // 2x2
-        this.$editable.html(getGridHtml([[1, 11], [2, 10]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[1, 8.33], [11, 91.67]], [[2, 16.67], [10, 83.33]]], TEST_WIDTH),
-            "should have converted a 2x2 irregular grid to an equivalent table");
+        this.testConvertGrid({
+            before: getGridHtml([[1, 11], [2, 10]]),
+            after: getTableHtml([[[1, 8.33], [11, 91.67]], [[2, 16.67], [10, 83.33]]], TEST_WIDTH),
+            title: "should have converted a 2x2 irregular grid to an equivalent table",
+        });
 
         // 2x[2,3]
-        this.$editable.html(getGridHtml([[3, 9], [4, 6, 2]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()), getTableHtml([[[3, 25], [9, 75]], [[4, 33.33], [6, 50], [2, 16.67]]], TEST_WIDTH),
-            "should have converted a 2x[2,3] irregular grid to an equivalent table");
+        this.testConvertGrid({
+            before: getGridHtml([[3, 9], [4, 6, 2]]),
+            after: getTableHtml([[[3, 25], [9, 75]], [[4, 33.33], [6, 50], [2, 16.67]]], TEST_WIDTH),
+            title: "should have converted a 2x[2,3] irregular grid to an equivalent table",
+        });
     });
     QUnit.test('convert a multi-row irregular overflowing grid', async function (assert) {
         assert.expect(3);
 
         // 2x2 (both rows overflow)
-        this.$editable.html(getGridHtml([[6, 8], [7, 9]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getTableHtml([
+        this.testConvertGrid({
+            before: getGridHtml([[6, 8], [7, 9]]),
+            after: getTableHtml([
                 [[6, 50], [6, 50, '']],
                 [[8, 66.67, '(0, 1)'], [4, 33.33, '']],
                 [[7, 58.33, '(1, 0)'], [5, 41.67, '']],
                 [[9, 75, '(1, 1)'], [3, 25, '']],
             ], TEST_WIDTH),
-            "should have converted a 2x[1,13] irregular grid to an equivalent table (both rows overflowing)");
+            title: "should have converted a 2x[1,13] irregular grid to an equivalent table (both rows overflowing)",
+        });
 
         // 2x[2,3] (first row overflows)
-        this.$editable.html(getGridHtml([[5, 8], [4, 2, 6]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getTableHtml([
+        this.testConvertGrid({
+            before: getGridHtml([[5, 8], [4, 2, 6]]),
+            after: getTableHtml([
                 [[5, 41.67], [7, 58.33, '']],
                 [[8, 66.67, '(0, 1)'], [4, 33.33, '']],
                 [[4, 33.33, '(1, 0)'], [2, 16.67, '(1, 1)'], [6, 50, '(1, 2)']],
             ], TEST_WIDTH),
-            "should have converted a 2x[2,3] irregular grid to an equivalent table (first row overflowing)");
+            title: "should have converted a 2x[2,3] irregular grid to an equivalent table (first row overflowing)",
+        });
 
         // 2x[3,2] (second row overflows)
-        this.$editable.html(getGridHtml([[4, 2, 6], [5, 8]]));
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(removeComments(this.$editable.html()),
-            getTableHtml([
+        this.testConvertGrid({
+            before: getGridHtml([[4, 2, 6], [5, 8]]),
+            after: getTableHtml([
                 [[4, 33.33], [2, 16.67], [6, 50]],
                 [[5, 41.67], [7, 58.33, '']],
                 [[8, 66.67, '(1, 1)'], [4, 33.33, '']],
             ], TEST_WIDTH),
-            "should have converted a 2x[3,2] irregular grid to an equivalent table (second row overflowing)");
+            title: "should have converted a 2x[3,2] irregular grid to an equivalent table (second row overflowing)",
+        });
     });
     QUnit.test('convert a card to a table', async function (assert) {
         assert.expect(1);
 
-        this.$editable.html(
-            `<div class="card">` +
-                `<div class="card-header">` +
-                    `<span>HEADER</span>` +
-                `</div>` +
-                `<div class="card-body">` +
-                    `<h2 class="card-title">TITLE</h2>` +
-                    `<small>BODY <img></small>` +
-                `</div>` +
-                `<div class="card-footer">` +
-                    `<a href="#" class="btn">FOOTER</a>` +
-                `</div>` +
-            `</div>`);
-        convertInline.cardToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getRegularTableHtml(3, 1, 12, 100)
+        this.testConvertGrid({
+            title: "should have converted a card structure into a table",
+            before:
+                `<div class="card">` +
+                    `<div class="card-header">` +
+                        `<span>HEADER</span>` +
+                    `</div>` +
+                    `<div class="card-body">` +
+                        `<h2 class="card-title">TITLE</h2>` +
+                        `<small>BODY <img></small>` +
+                    `</div>` +
+                    `<div class="card-footer">` +
+                        `<a href="#" class="btn">FOOTER</a>` +
+                    `</div>` +
+                `</div>`,
+            stepFunction: convertInline.cardToTable,
+            after: getRegularTableHtml(3, 1, 12, 100)
                 .replace('role=\"presentation\"', 'role=\"presentation\" class=\"card\"')
                 .replace(/<td[^>]*>\(0, 0\)<\/td>/,
                     `<td>` +
@@ -295,50 +317,51 @@ QUnit.module('convert_inline', {}, function () {
                         `font-size: unset; line-height: unset;\"><tr>` +
                             `<td class="card-footer"><a href="#" class="btn">FOOTER</a></td>` +
                         `</tr></table></td>`),
-            "should have converted a card structure into a table");
+        });
     });
     QUnit.test('convert a list group to a table', async function (assert) {
         assert.expect(1);
 
-        this.$editable.html(
-            `<ul class="list-group list-group-flush">` +
-                `<li class="list-group-item">` +
-                    `<strong>(0, 0)</strong>` +
-                `</li>` +
-                `<li class="list-group-item a">` +
-                    `(1, 0)` +
-                `</li>` +
-                `<li><img></li>` +
-                `<li class="list-group-item">` +
-                    `<strong class="b">(2, 0)</strong>` +
-                `</li>` +
-            `</ul>`);
-        convertInline.listGroupToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getRegularTableHtml(3, 1, 12, 100)
+        this.testConvertGrid({
+            title: "should have converted a list group structure into a table",
+            before:
+                `<ul class="list-group list-group-flush">` +
+                    `<li class="list-group-item">` +
+                        `<strong>(0, 0)</strong>` +
+                    `</li>` +
+                    `<li class="list-group-item a">` +
+                        `(1, 0)` +
+                    `</li>` +
+                    `<li><img></li>` +
+                    `<li class="list-group-item">` +
+                        `<strong class="b">(2, 0)</strong>` +
+                    `</li>` +
+                `</ul>`,
+            stepFunction: convertInline.listGroupToTable,
+            after: getRegularTableHtml(3, 1, 12, 100)
                 .split('style="').join('class="list-group-flush" style="')
                 .replace(/<td[^>]*>(\(0, 0\))<\/td>/, '<td><strong>$1</strong></td>')
                 .replace(/<td[^>]*>(\(1, 0\))<\/td>/, '<td class="a">$1</td>')
                 .replace(/<tr><td[^>]*>(\(2, 0\))<\/td>/, '<img><tr><td><strong class="b">$1</strong></td>'),
-            "should have converted a list group structure into a table");
+        });
     });
     QUnit.test('convert a grid with offsets to a table', async function (assert) {
         assert.expect(2);
 
-        this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div></div>');
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH),
-            "should have converted a column with an offset to two columns, then completed the column");
+        this.testConvertGrid({
+            before: '<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div></div>',
+            after: getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH),
+            title: "should have converted a column with an offset to two columns, then completed the column",
+        });
 
-        this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div><div class="col-6 offset-1">(0, 1)</div></div>');
-        convertInline.bootstrapToTable(this.$editable);
-        assert.strictEqual(this.$editable.html(),
-            getTableHtml([
+        this.testConvertGrid({
+            before: '<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div><div class="col-6 offset-1">(0, 1)</div></div>',
+            after: getTableHtml([
                 [[4, 33.33, ''], [6, 50, '(0, 0)'], [1, 8.33, ''], [1, 8.33, '']],
                 [[6, 50, '(0, 1)'], [6, 50, '']]
             ], TEST_WIDTH),
-            "should have converted a column with an offset to two columns, then completed the column (overflowing)");
+            title: "should have converted a column with an offset to two columns, then completed the column (overflowing)",
+        });
     });
 
     QUnit.module('Normalize styles');