From 3fb6eee4477ecbcab6c2ebd4d924968420c6b054 Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Tue, 4 Jan 2022 11:55:06 +0000 Subject: [PATCH] [FIX] web_editor: round conversion from grid to percentage to 2 decimals When converting from grid to tables, we need to convert values from x/12 to x/100. The rounding error was a little too big, making it too visible at times. With this commit we now round to 2 decimal places instead of rounding to the nearest integer. Part-of: odoo/odoo#83233 --- .../static/src/js/backend/convert_inline.js | 3 +- .../static/tests/convert_inline_tests.js | 68 +++++++++---------- 2 files changed, 36 insertions(+), 35 deletions(-) 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 040b87c348e..7c9ad207405 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -728,7 +728,8 @@ function normalizeRem($editable) { */ function _applyColspan($element, colspan) { $element.attr('colspan', colspan); - const width = Math.round(+$element.attr('colspan') * 100 / 12) + '%'; + // Round to 2 decimal places. + const width = (Math.round(+$element.attr('colspan') * 10000 / 12) / 100) + '%'; $element.attr('width', width); $element.css('width', width); } diff --git a/addons/web_editor/static/tests/convert_inline_tests.js b/addons/web_editor/static/tests/convert_inline_tests.js index 6322dbf4b2d..0a642959dcf 100644 --- a/addons/web_editor/static/tests/convert_inline_tests.js +++ b/addons/web_editor/static/tests/convert_inline_tests.js @@ -28,13 +28,13 @@ QUnit.module('convert_inline', {}, function () { // 1x3 $editable = $(`
${getRegularGridHtml(1, 3)}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getRegularTableHtml(1, 3, 4, 33), + assert.strictEqual($editable.html(), getRegularTableHtml(1, 3, 4, 33.33), "should have converted a 1x3 grid to an equivalent table"); // 1x12 $editable = $(`
${getRegularGridHtml(1, 12)}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getRegularTableHtml(1, 12, 1, 8), + assert.strictEqual($editable.html(), getRegularTableHtml(1, 12, 1, 8.33), "should have converted a 1x12 grid to an equivalent table"); }); QUnit.test('convert a single-row regular overflowing grid', async function (assert) { @@ -44,7 +44,7 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getRegularGridHtml(1, 13)}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(1, 12, 1, 8).slice(0, -8) + + getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + `(0, 12)`, "should have converted a 1x13 grid to an equivalent table (overflowing)"); @@ -52,17 +52,17 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getRegularGridHtml(1, 14)}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(1, 12, 1, 8).slice(0, -8) + - `(0, 12)` + - `(0, 13)`, + getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + + `(0, 12)` + + `(0, 13)`, "should have converted a 1x14 grid to an equivalent table (overflowing)"); // 1x25 $editable = $(`
${getRegularGridHtml(1, 25)}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(1, 12, 1, 8).slice(0, -8) + - getRegularTableHtml(1, 12, 1, 8).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) + getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + + getRegularTableHtml(1, 12, 1, 8.33).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) .replace(/^/, '').slice(0, -8) + `(0, 24)`, "should have converted a 1x25 grid to an equivalent table (overflowing)"); @@ -71,11 +71,11 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getRegularGridHtml(1, 26)}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(1, 12, 1, 8).slice(0, -8) + - getRegularTableHtml(1, 12, 1, 8).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) + getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + + getRegularTableHtml(1, 12, 1, 8.33).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) .replace(/^/, '').slice(0, -8) + - `(0, 24)` + - `(0, 25)`, + `(0, 24)` + + `(0, 25)`, "should have converted a 1x26 grid to an equivalent table (overflowing)"); }); QUnit.test('convert a multi-row regular grid', async function (assert) { @@ -96,13 +96,13 @@ QUnit.module('convert_inline', {}, function () { // 3x3 $editable = $(`
${getRegularGridHtml(3, 3)}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getRegularTableHtml(3, 3, 4, 33), + assert.strictEqual($editable.html(), getRegularTableHtml(3, 3, 4, 33.33), "should have converted a 3x3 grid to an equivalent table"); // 3x[3,2,1] $editable = $(`
${getRegularGridHtml(3, [3,2,1])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getRegularTableHtml(3, [3, 2, 1], [4, 6, 12], [33, 50, 100]), + assert.strictEqual($editable.html(), getRegularTableHtml(3, [3, 2, 1], [4, 6, 12], [33.33, 50, 100]), "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) { @@ -112,7 +112,7 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getRegularGridHtml(2, [13, 1])}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(1, 12, 1, 8).slice(0, -8) + + getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + `(0, 12)` + `(1, 0)`, "should have converted a 2x[13,1] grid to an equivalent table (overflowing)"); @@ -121,7 +121,7 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getRegularGridHtml(2, [1, 13])}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(2, [1, 12], [12, 1], [100, 8]).slice(0, -8) + + getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) + `(1, 12)`, "should have converted a 2x[1,13] grid to an equivalent table (overflowing)"); @@ -129,16 +129,16 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getRegularGridHtml(3, [1, 13, 6])}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(2, [1, 12], [12, 1], [100, 8]).slice(0, -8) + + getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) + `(1, 12)` + - getRegularTableHtml(1, 6, 2, 17).replace(/\(0,/g, `(2,`).replace(/^/, ''), + getRegularTableHtml(1, 6, 2, 16.67).replace(/\(0,/g, `(2,`).replace(/^/, ''), "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)"); // 3x[1,6,13] $editable = $(`
${getRegularGridHtml(3, [1, 6, 13])}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), - getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 17, 8]).slice(0, -8) + + getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33]).slice(0, -8) + `(2, 12)`, "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)"); }); @@ -148,13 +148,13 @@ QUnit.module('convert_inline', {}, function () { // 1x2 $editable = $(`
${getGridHtml([[8, 4]])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getTableHtml([[[8, 67], [4, 33]]]), + assert.strictEqual($editable.html(), getTableHtml([[[8, 66.67], [4, 33.33]]]), "should have converted a 1x2 irregular grid to an equivalent table"); // 1x3 $editable = $(`
${getGridHtml([[2, 3, 7]])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getTableHtml([[[2, 17], [3, 25], [7, 58]]]), + assert.strictEqual($editable.html(), getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]]), "should have converted a 1x3 grid to an equivalent table"); }); QUnit.test('convert a single-row irregular overflowing grid', async function (assert) {assert.expect(4); @@ -164,8 +164,8 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getGridHtml([[8, 5]])}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), getTableHtml([ - [[8, 67], [4, 33, '']], - [[5, 42, '(0, 1)'], [7, 58, '']], + [[8, 66.67], [4, 33.33, '']], + [[5, 41.67, '(0, 1)'], [7, 58.33, '']], ]), "should have converted a 1x2 irregular overflowing grid to an equivalent table"); @@ -173,7 +173,7 @@ QUnit.module('convert_inline', {}, function () { $editable = $(`
${getGridHtml([[7, 6, 9]])}
`); convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), getTableHtml([ - [[7, 58], [5, 42, '']], + [[7, 58.33], [5, 41.67, '']], [[6, 50, '(0, 1)'], [6, 50, '']], [[9, 75, '(0, 2)'], [3, 25, '']], ]), @@ -185,13 +185,13 @@ QUnit.module('convert_inline', {}, function () { // 2x2 $editable = $(`
${getGridHtml([[1, 11], [2, 10]])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getTableHtml([[[1, 8], [11, 92]], [[2, 17], [10, 83]]]), + assert.strictEqual($editable.html(), getTableHtml([[[1, 8.33], [11, 91.67]], [[2, 16.67], [10, 83.33]]]), "should have converted a 2x2 irregular grid to an equivalent table"); // 2x[2,3] $editable = $(`
${getGridHtml([[3, 9], [4, 6, 2]])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual($editable.html(), getTableHtml([[[3, 25], [9, 75]], [[4, 33], [6, 50], [2, 17]]]), + assert.strictEqual($editable.html(), getTableHtml([[[3, 25], [9, 75]], [[4, 33.33], [6, 50], [2, 16.67]]]), "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) { @@ -203,8 +203,8 @@ QUnit.module('convert_inline', {}, function () { assert.strictEqual($editable.html(), getTableHtml([ [[6, 50], [6, 50, '']], - [[8, 67, '(0, 1)'], [4, 33, '']], - [[7, 58, '(1, 0)'], [5, 42, '']], + [[8, 66.67, '(0, 1)'], [4, 33.33, '']], + [[7, 58.33, '(1, 0)'], [5, 41.67, '']], [[9, 75, '(1, 1)'], [3, 25, '']], ]), "should have converted a 2x[1,13] irregular grid to an equivalent table (both rows overflowing)"); @@ -214,9 +214,9 @@ QUnit.module('convert_inline', {}, function () { convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), getTableHtml([ - [[5, 42], [7, 58, '']], - [[8, 67, '(0, 1)'], [4, 33, '']], - [[4, 33, '(1, 0)'], [2, 17, '(1, 1)'], [6, 50, '(1, 2)']], + [[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)']], ]), "should have converted a 2x[2,3] irregular grid to an equivalent table (first row overflowing)"); @@ -225,9 +225,9 @@ QUnit.module('convert_inline', {}, function () { convertInline.bootstrapToTable($editable); assert.strictEqual($editable.html(), getTableHtml([ - [[4, 33], [2, 17], [6, 50]], - [[5, 42], [7, 58, '']], - [[8, 67, '(1, 1)'], [4, 33, '']], + [[4, 33.33], [2, 16.67], [6, 50]], + [[5, 41.67], [7, 58.33, '']], + [[8, 66.67, '(1, 1)'], [4, 33.33, '']], ]), "should have converted a 2x[3,2] irregular grid to an equivalent table (second row overflowing)"); });