odoo16/addons/web_editor/static/tests/convert_inline_tests.js

/** @odoo-module **/
import convertInline from '@web_editor/js/backend/convert_inline';
import {getGridHtml, getTableHtml, getRegularGridHtml, getRegularTableHtml, getTdHtml, removeComments} from 'web_editor.test_utils';

const TEST_WIDTH = 800;
const TEST_HEIGHT = 600;

QUnit.module('web_editor', {}, function () {
QUnit.module('convert_inline', {}, function () {
    QUnit.module('Convert Bootstrap grids to tables', {
        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);
                // Remove class that is added by `bootstrapToTable` for use in
                // further methods of `toInline`, and removed at the end of it.
                this.editable.querySelectorAll('.o_converted_col').forEach(node => {
                    node.classList.remove('o_converted_col');
                    if (!node.classList.length) {
                        node.removeAttribute('class');
                    }
                });
                assert.strictEqual(removeComments(this.editable.innerHTML), after, title);
            }
        }
    });
    // Test bootstrapToTable, cardToTable and listGroupToTable

    QUnit.test('convert a single-row regular grid', async function (assert) {
        assert.expect(4);

        // 1x1
        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.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.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.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.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>`,
            title: "should have converted a 1x13 grid to an equivalent table (overflowing)",
        });

        // 1x14
        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>`,
            title: "should have converted a 1x14 grid to an equivalent table (overflowing)",
        });

        // 1x25
        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>`,
            title: "should have converted a 1x25 grid to an equivalent table (overflowing)",
        });

        // 1x26
        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>`,
            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.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.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.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.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.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
            title: "should have converted a 2x[13,1] grid to an equivalent table (overflowing)",
        });

        // 2x[1,13]
        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>`,
            title: "should have converted a 2x[1,13] grid to an equivalent table (overflowing)",
        });

        // 3x[1,13,6]
        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[^<]*>/, ''),
            title: "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)",
        });

        // 3x[1,6,13]
        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>`,
            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.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.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.testConvertGrid({
            before: getGridHtml([[8, 5]]),
            after: getTableHtml([
                [[8, 66.67], [4, 33.33, '']],
                [[5, 41.67, '(0, 1)'], [7, 58.33, '']],
            ], TEST_WIDTH),
            title: "should have converted a 1x2 irregular overflowing grid to an equivalent table",
        });

        // 1x3
        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),
            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.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.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.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),
            title: "should have converted a 2x[1,13] irregular grid to an equivalent table (both rows overflowing)",
        });

        // 2x[2,3] (first row overflows)
        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),
            title: "should have converted a 2x[2,3] irregular grid to an equivalent table (first row overflowing)",
        });

        // 2x[3,2] (second row overflows)
        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),
            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.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>` +
                        `<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"100%\" align=\"center\" ` +
                        `role=\"presentation\" style=\"width: 100% !important; border-collapse: collapse; text-align: inherit; ` +
                        `font-size: unset; line-height: inherit;\"><tr>` +
                            `<td class="card-header"><span>HEADER</span></td>` +
                        `</tr></table></td>`)
                .replace(/<td[^>]*>\(1, 0\)<\/td>/,
                    `<td>` +
                        `<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"100%\" align=\"center\" ` +
                        `role=\"presentation\" style=\"width: 100% !important; border-collapse: collapse; text-align: inherit; ` +
                        `font-size: unset; line-height: inherit;\"><tr>` +
                            `<td class="card-body"><h2 class="card-title">TITLE</h2><small>BODY <img></small></td>` +
                        `</tr></table></td>`)
                .replace(/<td[^>]*>\(2, 0\)<\/td>/,
                    `<td>` +
                        `<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"100%\" align=\"center\" ` +
                        `role=\"presentation\" style=\"width: 100% !important; border-collapse: collapse; text-align: inherit; ` +
                        `font-size: unset; line-height: inherit;\"><tr>` +
                            `<td class="card-footer"><a href="#" class="btn">FOOTER</a></td>` +
                        `</tr></table></td>`),
        });
    });
    QUnit.test('convert a list group to a table', async function (assert) {
        assert.expect(1);

        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>'),
        });
    });
    QUnit.test('convert a grid with offsets to a table', async function (assert) {
        assert.expect(2);

        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.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),
            title: "should have converted a column with an offset to two columns, then completed the column (overflowing)",
        });
    });

    QUnit.module('Normalize styles');
    // Test normalizeColors, normalizeRem and formatTables

    QUnit.test('convert rgb color to hexadecimal', async function (assert) {
        assert.expect(1);

        const $editable = $(
            `<div><div style="color: rgb(0, 0, 0);">` +
                `<div class="a" style="padding: 0; background-color:rgb(255,255,255)" width="100%">` +
                    `<p style="border: 1px rgb(50, 100,200 ) solid; color: rgb(35, 134, 54);">Test</p>` +
                `</div>` +
            `</div></div>`
        );
        convertInline.normalizeColors($editable);
        assert.strictEqual($editable.html(),
            `<div style="color: #000000;">` +
                `<div class="a" style="padding: 0; background-color:#ffffff" width="100%">` +
                    `<p style="border: 1px #3264c8 solid; color: #238636;">Test</p>` +
                `</div>` +
            `</div>`,
            "should have converted several rgb colors to hexadecimal"
        );
    });
    QUnit.test('convert rem sizes to px', async function (assert) {
        assert.expect(2);

        const testDom = `<div style="font-size: 2rem;">` +
            `<div class="a" style="color: #000000; padding: 2.5 rem" width="100%">` +
                `<p style="border: 1.2rem #aaaaaa solid; margin: 3.79rem;">Test</p>` +
            `</div>` +
        `</div>`;

        let $editable = $(`<div>${testDom}</div>`);
        document.body.append($editable[0]);
        convertInline.normalizeRem($editable);
        assert.strictEqual($editable.html(),
            `<div style="font-size: 32px;">` +
                `<div class="a" style="color: #000000; padding: 40px" width="100%">` +
                    `<p style="border: 19.2px #aaaaaa solid; margin: 60.64px;">Test</p>` +
                `</div>` +
            `</div>`,
            "should have converted several rem sizes to px using the default rem size"
        );
        $editable.remove();

        $editable = $(`<div>${testDom}</div>`);
        document.body.append($editable[0]);
        convertInline.normalizeRem($editable, 20);
        assert.strictEqual($editable.html(),
            `<div style="font-size: 40px;">` +
                `<div class="a" style="color: #000000; padding: 50px" width="100%">` +
                    `<p style="border: 24px #aaaaaa solid; margin: 75.8px;">Test</p>` +
                `</div>` +
            `</div>`,
            "should have converted several rem sizes to px using a set rem size"
        );
        $editable.remove();
    });
    QUnit.test('move padding from snippet containers to cells', async function (assert) {
        assert.expect(1);

        const testTable = `<table class="o_mail_snippet_general" style="padding: 10px 20px 30px 40px;">` +
            `<tbody>` +
                `<tr>` +
                    `<td style="padding-top: 1px; padding-right: 2px;">(0, 0, 0)</td>` +
                    `<td style="padding: 3px 4px 5px 6px;">(0, 1, 0)</td>` +
                    `<td style="padding: 7px;">(0, 2, 0)</td>` +
                    `<td style="padding: 8px 9px;">(0, 3, 0)</td>` +
                    `<td style="padding-right: 9.1px;">(0, 4, 0)</td>` +
                `</tr>` +
                `<tr>` +
                    `<td>` +
                        `<table style="padding: 50px 60px 70px 80px;">` +
                            `<tbody>` +
                                `<tr>` +
                                    `<td style="padding: 1px 2px 3px 4px;">(0, 0, 1)</td>` +
                                    `<td style="padding: 5px;">(0, 1, 1)</td>` +
                                    `<td style="padding: 6px 7px;">(0, 2, 1)</td>` +
                                    `<td style="padding-top: 8px; padding-right: 9px;">(0, 3, 1)</td>` +
                                `</tr>` +
                            `</tbody>` +
                        `</table>` +
                    `</td>` +
                `</tr>` +
                `<tr>` +
                    `<td style="padding-left: 9.1px;">(1, 0, 0)</td>` +
                    `<td style="padding: 9px 8px 7px 6px;">(1, 1, 0)</td>` +
                    `<td style="padding: 5px;">(1, 2, 0)</td>` +
                    `<td style="padding: 4px 3px;">(1, 3, 0)</td>` +
                    `<td style="padding-bottom: 2px; padding-right: 1px;">(1, 4, 0)</td>` +
                `</tr>` +
            `</tbody>` +
        `</table>`;

        const expectedTable = `<table class="o_mail_snippet_general" style="">` +
            `<tbody>` +
                `<tr>` +
                    `<td style="padding-top: 11px; padding-right: 2px; padding-left: 40px;">(0, 0, 0)</td>` + // TL
                    `<td style="padding: 13px 4px 5px 6px;">(0, 1, 0)</td>` + // T
                    `<td style="padding: 17px 7px 7px;">(0, 2, 0)</td>` + // T
                    `<td style="padding: 18px 9px 8px;">(0, 3, 0)</td>` + // T
                    `<td style="padding-right: 29.1px; padding-top: 10px;">(0, 4, 0)</td>` + // TR
                `</tr>` +
                `<tr>` +
                    `<td style="padding-right: 20px; padding-left: 40px;">` + // LR
                        `<table style="">` +
                            `<tbody>` +
                                `<tr>` +
                                    `<td style="padding: 51px 2px 73px 84px;">(0, 0, 1)</td>` + // TBL
                                    `<td style="padding: 55px 5px 75px;">(0, 1, 1)</td>` + // TB
                                    `<td style="padding: 56px 7px 76px;">(0, 2, 1)</td>` + // TB
                                    `<td style="padding-top: 58px; padding-right: 69px; padding-bottom: 70px;">(0, 3, 1)</td>` + // TBR
                                `</tr>` +
                            `</tbody>` +
                        `</table>` +
                    `</td>` +
                `</tr>` +
                `<tr>` +
                    `<td style="padding-left: 49.1px; padding-bottom: 30px;">(1, 0, 0)</td>` + // BL
                    `<td style="padding: 9px 8px 37px 6px;">(1, 1, 0)</td>` + // B
                    `<td style="padding: 5px 5px 35px;">(1, 2, 0)</td>` + // B
                    `<td style="padding: 4px 3px 34px;">(1, 3, 0)</td>` + // B
                    `<td style="padding-bottom: 32px; padding-right: 21px;">(1, 4, 0)</td>` + // BR
                `</tr>` +
            `</tbody>` +
        `</table>`;

        // table.o_mail_snippet_general
        const $editable = $(`<div>${testTable}</div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), expectedTable,
            "should have moved the padding from table.o_mail_snippet_general and table in it to their respective cells"
        );
    });
    QUnit.test('add a tbody to any table that doesn\'t have one', async function (assert) {
        assert.expect(1);

        const $editable = $(`<div>${`<table><tr><td>I don't have a body :'(</td></tr></table>`}</div>`);
        $editable.find('tr').unwrap();
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table><tbody style="vertical-align: top;"><tr><td>I don't have a body :'(</td></tr></tbody></table>`,
            "should have added a tbody to a table that didn't have one"
        );
    });
    QUnit.test('add number heights to parents of elements with percent heights', async function (assert) {
        assert.expect(3);

        let $editable = $(`<div>${`<table><tbody><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`}</div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table><tbody style="height: 0px;"><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`,
            "should have added a 0 height to the parent of a 100% height element"
        );

        $editable = $(`<div>${`<table><tbody style="height: 200px;"><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`}</div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table><tbody style="height: 200px;"><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`,
            "should not have changed the height of the parent of a 100% height element"
        );

        $editable = $(`<div>${`<table><tbody style="height: 50%;"><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`}</div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table style="height: 0px;"><tbody style="height: 50%;"><tr style="height: 100%;"><td>yup</td></tr></tbody></table>`,
            "should have changed the height of the grandparent of a 100% height element"
        );
    });
    QUnit.test('express align-self with vertical-align on table cells', async function (assert) {
        assert.expect(3);

        let $editable = $(`<div><table><tbody><tr><td style="align-self: start;">yup</td></tr></tbody></table></div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table><tbody><tr><td style="align-self: start; vertical-align: top;">yup</td></tr></tbody></table>`,
            "should have added a top vertical alignment"
        );

        $editable = $(`<div><table><tbody><tr><td style="align-self: center;">yup</td></tr></tbody></table></div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table><tbody><tr><td style="align-self: center; vertical-align: middle;">yup</td></tr></tbody></table>`,
            "should have added a middle vertical alignment"
        );

        $editable = $(`<div><table><tbody><tr><td style="align-self: end;">yup</td></tr></tbody></table></div>`);
        convertInline.formatTables($editable);
        assert.strictEqual($editable.html(), `<table><tbody><tr><td style="align-self: end; vertical-align: bottom;">yup</td></tr></tbody></table>`,
            "should have added a bottom vertical alignment"
        );
    });

    QUnit.module('Convert snippets and mailing bodies to tables');
    // Test addTables

    QUnit.test('convert snippets to tables', async function (assert) {
        assert.expect(2);

        let $editable = $(
            `<div><div class="o_mail_snippet_general">` +
                `<div>Snippet</div>` +
            `</div></div>`
        );
        convertInline.addTables($editable);
        assert.strictEqual($editable.html(),
            getRegularTableHtml(1, 1, 12, 100)
                .split('style=').join('class="o_mail_snippet_general" style=')
                .replace(/<td[^>]*>\(0, 0\)/, '<td>' + getRegularTableHtml(1, 1, 12, 100).replace(/<td[^>]*>\(0, 0\)/, '<td><div>Snippet</div>')),
            "should have converted .o_mail_snippet_general to a special table structure with a table in it"
        );

        $editable = $(
            `<div><div class="o_mail_snippet_general">` +
                `<table><tbody><tr><td>Snippet</td></tr></tbody></table>` +
            `</div></div>`
        );
        convertInline.addTables($editable);
        assert.strictEqual($editable.html(),
            getRegularTableHtml(1, 1, 12, 100)
                .split('style=').join('class="o_mail_snippet_general" style=')
                .replace(/<td[^>]*>\(0, 0\)/, '<td><table><tbody><tr><td>Snippet</td></tr></tbody></table>'),
            "should have converted .o_mail_snippet_general to a special table structure, keeping the table in it"
        );
    });
    QUnit.test('convert mailing bodies to tables', async function (assert) {
        assert.expect(2);

        let $editable = $(
            `<div><div class="o_layout">` +
                `<div>Mailing</div>` +
            `</div></div>`
        );
        convertInline.addTables($editable);
        assert.strictEqual($editable.html(),
            getRegularTableHtml(1, 1, 12, 100)
                .split('style=').join('class="o_layout" style=')
                .replace(' font-size: unset; line-height: inherit;', '') // o_layout keeps those default values
                .replace(/<td[^>]*>\(0, 0\)/, '<td>' + getRegularTableHtml(1, 1, 12, 100).replace(/<td[^>]*>\(0, 0\)/, '<td><div>Mailing</div>')),
            "should have converted .o_layout to a special table structure with a table in it"
        );

        $editable = $(
            `<div><div class="o_layout">` +
                `<table><tbody><tr><td>Mailing</td></tr></tbody></table>` +
            `</div></div>`
        );
        convertInline.addTables($editable);
        assert.strictEqual($editable.html(),
            getRegularTableHtml(1, 1, 12, 100)
                .split('style=').join('class="o_layout" style=')
                .replace(' font-size: unset; line-height: inherit;', '') // o_layout keeps those default values
                .replace(/<td[^>]*>\(0, 0\)/, '<td><table><tbody><tr><td>Mailing</td></tr></tbody></table>'),
            "should have converted .o_layout to a special table structure, keeping the table in it"
        );
    });

    QUnit.module('Convert classes to inline styles');
    // Test classToStyle

    QUnit.test('convert Bootstrap classes to inline styles', async function (assert) {
        assert.expect(1);

        const $editable = $(`<div><div class="container"><div class="row"><div class="col">Hello</div></div></div></div>`);
        $(document.body).append($editable); // editable needs to be in the DOM to compute its dynamic styles.
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        // Some positional properties (eg., padding-right, margin-left) are not
        // concatenated (eg., as padding, margin) because they were defined with
        // variables (var) or calculated (calc).
        const containerStyle = `margin: 0px auto; box-sizing: border-box; max-width: 1320px; padding-left: 16px; padding-right: 16px; width: 100%;`;
        const rowStyle = `box-sizing: border-box; margin-left: -16px; margin-right: -16px; margin-top: 0px;`;
        const colStyle = `box-sizing: border-box; margin-top: 0px; padding-left: 16px; padding-right: 16px; max-width: 100%; width: 100%;`;
        assert.strictEqual($editable.html(),
            `<div class="container" style="${containerStyle}" width="100%">` +
            `<div class="row" style="${rowStyle}">` +
            `<div class="col" style="${colStyle}" width="100%">Hello</div></div></div>`,
            "should have converted the classes of a simple Bootstrap grid to inline styles"
        );
        $editable.remove();
    });
    QUnit.test('simplify border/margin/padding styles', async function (assert) {
        assert.expect(12);

        const $styleSheet = $('<style type="text/css" title="test-stylesheet"/>');
        document.head.appendChild($styleSheet[0])
        const styleSheet = [...document.styleSheets].find(sheet => sheet.title === 'test-stylesheet');

        // border-radius
        styleSheet.insertRule(`
            .test-border-radius {
                border-top-right-radius: 10%;
                border-bottom-right-radius: 20%;
                border-bottom-left-radius: 30%;
                border-top-left-radius: 40%;
            }
        `, 0);
        let $editable = $(`<div>${`<div class="test-border-radius"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-border-radius" style="border-radius:30%;box-sizing:border-box;"></div>`,
            "should have converted border-[position]-radius styles (from class) to border-radius");
        styleSheet.deleteRule(0);

        // convert all positional styles to a style in the form `property: a b c d`

        styleSheet.insertRule(`
            .test-border {
                border-top-style: dotted;
                border-right-style: dashed;
                border-left-style: solid;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-border"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-border" style="border-style:dotted dashed none solid;box-sizing:border-box;"></div>`,
            "should have converted border-[position]-style styles (from class) to border-style");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-margin {
                margin-right: 20px;
                margin-bottom: 30px;
                margin-left: 40px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-margin"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-margin" style="margin:0 20px 30px 40px;box-sizing:border-box;"></div>`,
            "should have converted margin-[position] styles (from class) to margin");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-padding {
                padding-top: 10px;
                padding-bottom: 30px;
                padding-left: 40px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-padding"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-padding" style="padding:10px 0 30px 40px;box-sizing:border-box;"></div>`,
            "should have converted padding-[position] styles (from class) to padding");
        styleSheet.deleteRule(0);

        // convert all positional styles to a style in the form `property: a`

        styleSheet.insertRule(`
            .test-border-uniform {
                border-top-style: dotted;
                border-right-style: dotted;
                border-bottom-style: dotted;
                border-left-style: dotted;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-border-uniform"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-border-uniform" style="border-style:dotted;box-sizing:border-box;"></div>`,
            "should have converted uniform border-[position]-style styles (from class) to border-style");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-margin-uniform {
                margin-top: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
                margin-left: 10px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-margin-uniform"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-margin-uniform" style="margin:10px;box-sizing:border-box;"></div>`,
            "should have converted uniform margin-[position] styles (from class) to margin");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-padding-uniform {
                padding-top: 10px;
                padding-right: 10px;
                padding-bottom: 10px;
                padding-left: 10px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-padding-uniform"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-padding-uniform" style="padding:10px;box-sizing:border-box;"></div>`,
            "should have converted uniform padding-[position] styles (from class) to padding");
        styleSheet.deleteRule(0);

        // do not convert positional styles that include an "inherit" value

        styleSheet.insertRule(`
            .test-border-inherit {
                border-top-style: dotted;
                border-right-style: dashed;
                border-bottom-style: inherit;
                border-left-style: solid;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-border-inherit"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-border-inherit" style="box-sizing:border-box;border-left-style:solid;border-bottom-style:inherit;border-right-style:dashed;border-top-style:dotted;"></div>`,
            "should not have converted border-[position]-style styles (from class) to border-style as they include an inherit");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-margin-inherit {
                margin-top: 10px;
                margin-right: inherit;
                margin-bottom: 30px;
                margin-left: 40px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-margin-inherit"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-margin-inherit" style="box-sizing:border-box;margin-left:40px;margin-bottom:30px;margin-right:inherit;margin-top:10px;"></div>`,
            "should not have converted margin-[position] styles (from class) to margin as they include an inherit");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-padding-inherit {
                padding-top: 10px;
                padding-right: 20px;
                padding-bottom: inherit;
                padding-left: 40px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-padding-inherit"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-padding-inherit" style="box-sizing:border-box;padding-left:40px;padding-bottom:inherit;padding-right:20px;padding-top:10px;"></div>`,
            "should have converted padding-[position] styles (from class) to padding as they include an inherit");
        styleSheet.deleteRule(0);

        // do not convert positional styles that include an "initial" value

        // note: `border: initial` is automatically removed (tested in "remove
        // unsupported styles")
        styleSheet.insertRule(`
            .test-margin-initial {
                margin-top: initial;
                margin-right: 20px;
                margin-bottom: 30px;
                margin-left: 40px;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-margin-initial"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-margin-initial" style="box-sizing:border-box;margin-left:40px;margin-bottom:30px;margin-right:20px;margin-top:initial;"></div>`,
            "should not have converted margin-[position] styles (from class) to margin as they include an initial");
        styleSheet.deleteRule(0);

        styleSheet.insertRule(`
            .test-padding-initial {
                padding-top: 10px;
                padding-right: 20px;
                padding-bottom: 30px;
                padding-left: initial;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-padding-initial"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-padding-initial" style="box-sizing:border-box;padding-left:initial;padding-bottom:30px;padding-right:20px;padding-top:10px;"></div>`,
            "should not have converted padding-[position] styles (from class) to padding as they include an initial");
        styleSheet.deleteRule(0);

        $styleSheet.remove();
    });
    QUnit.test('remove unsupported styles', async function (assert) {
        assert.expect(9);

        const $styleSheet = $('<style type="text/css" title="test-stylesheet"/>');
        document.head.appendChild($styleSheet[0])
        const styleSheet = [...document.styleSheets].find(sheet => sheet.title === 'test-stylesheet');

        // text-decoration-[prop]
        styleSheet.insertRule(`
            .test-decoration {
                text-decoration-line: underline;
                text-decoration-color: red;
                text-decoration-style: solid;
                text-decoration-thickness: 10px;
            }
        `, 0);
        let $editable = $(`<div>${`<div class="test-decoration"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-decoration" style="text-decoration:underline;box-sizing:border-box;"></div>`,
            "should have removed all text-decoration-[prop] styles (from class) and kept a simple text-decoration");
        styleSheet.deleteRule(0);

        // border[\w-]*: initial
        styleSheet.insertRule(`
            .test-border-initial {
                border-top-style: dotted;
                border-right-style: dashed;
                border-bottom-style: double;
                border-left-style: initial;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-border-initial"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-border-initial" style="box-sizing:border-box;border-bottom-style:double;border-right-style:dashed;border-top-style:dotted;"></div>`,
            "should have removed border initial");
        styleSheet.deleteRule(0);

        // display: block
        styleSheet.insertRule(`
            .test-block {
                display: block;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-block"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-block" style="box-sizing:border-box;"></div>`,
            "should have removed display block");
        styleSheet.deleteRule(0);

        // !important
        styleSheet.insertRule(`
            .test-unimportant-color {
                color: blue;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-unimportant-color"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-unimportant-color" style="box-sizing:border-box;color:blue;"></div>`,
            "should have converted a simple color");
        styleSheet.insertRule(`
            .test-important-color {
                color: red !important;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-important-color test-unimportant-color"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-important-color test-unimportant-color" style="box-sizing:border-box;color:red;"></div>`,
            "should have converted an important color and removed the !important");
        styleSheet.deleteRule(0);
        styleSheet.deleteRule(0);

        // animation
        styleSheet.insertRule(`
            .test-animation {
                animation: example 5s linear 2s infinite alternate;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-animation"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-animation" style="box-sizing:border-box;"></div>`,
            "should have removed animation style");
        styleSheet.deleteRule(0);
        styleSheet.insertRule(`
            .test-animation-specific {
                animation-name: example;
                animation-duration: 5s;
                animation-timing-function: linear;
                animation-delay: 2s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-animation-specific"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-animation-specific" style="box-sizing:border-box;"></div>`,
            "should have removed all specific animation styles");
        styleSheet.deleteRule(0);

        // flex
        styleSheet.insertRule(`
            .test-flex {
                flex: 0 1 auto;
                flex-flow: column wrap;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-flex"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-flex" style="box-sizing:border-box;"></div>`,
            "should have removed all flex styles");
        styleSheet.deleteRule(0);
        styleSheet.insertRule(`
            .test-flex-specific {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                flex-basis: auto;
                flex-shrink: 3;
                flex-grow: 4;
            }
        `, 0);
        $editable = $(`<div>${`<div class="test-flex-specific"></div>`}</div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-flex-specific" style="box-sizing:border-box;"></div>`,
            "should have removed all specific flex styles");
        styleSheet.deleteRule(0);

        $styleSheet.remove();
    });
    QUnit.test('give .o_layout the styles of the body', async function (assert) {
        assert.expect(1);

        const $iframe = $('<iframe></iframe>');
        $(document.body).append($iframe);
        const $iframeEditable = $('<div/>');
        $iframe.contents().find('body').append($iframeEditable);
        const $styleSheet = $('<style type="text/css" title="test-stylesheet"/>');
        $iframe.contents().find('head').append($styleSheet);
        const styleSheet = [...$iframe.contents()[0].styleSheets].find(sheet => sheet.title === 'test-stylesheet');

        styleSheet.insertRule(`
            body {
                background-color: red;
                color: white;
                font-size: 50px;
            }
        `, 0);
        $iframeEditable.append(`<div class="o_layout" style="padding: 50px;"></div>`);
        convertInline.classToStyle($iframeEditable, convertInline.getCSSRules($iframeEditable[0].ownerDocument));
        assert.strictEqual($iframeEditable.html(),
            `<div class="o_layout" style="box-sizing:border-box;font-size:50px;color:white;background-color:red;padding: 50px;"></div>`,
            "should have given all styles of body to .o_layout");
        styleSheet.deleteRule(0);

        $iframe.remove();
    });
    QUnit.test('convert classes to styles, preserving specificity', async function (assert) {
        assert.expect(4);

        const $styleSheet = $('<style type="text/css" title="test-stylesheet"/>');
        document.head.appendChild($styleSheet[0])
        const styleSheet = [...document.styleSheets].find(sheet => sheet.title === 'test-stylesheet');

        styleSheet.insertRule(`
            div.test-color {
                color: green;
            }
        `, 0);
        styleSheet.insertRule(`
            .test-color {
                color: red;
            }
        `, 1);
        styleSheet.insertRule(`
            .test-color {
                color: blue;
            }
        `, 2);

        let $editable = $(`<div><span class="test-color"></span></div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<span class="test-color" style="box-sizing:border-box;color:blue;"></span>`,
            "should have prioritized the last defined style");

        $editable = $(`<div><div class="test-color"></div></div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-color" style="box-sizing:border-box;color:green;"></div>`,
            "should have prioritized the more specific style");

        $editable = $(`<div><div class="test-color" style="color: yellow;"></div></div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-color" style="box-sizing:border-box;color: yellow;"></div>`,
            "should have prioritized the inline style");

        styleSheet.insertRule(`
            .test-color {
                color: black !important;
            }
        `, 0);
        $editable = $(`<div><div class="test-color"></div></div>`);
        convertInline.classToStyle($editable, convertInline.getCSSRules($editable[0].ownerDocument));
        assert.strictEqual($editable.html(),
            `<div class="test-color" style="box-sizing:border-box;color:black;"></div>`,
            "should have prioritized the important style");

        styleSheet.deleteRule(0);
        styleSheet.deleteRule(0);
        styleSheet.deleteRule(0);
        styleSheet.deleteRule(0);

        $styleSheet.remove();
    });
});

});