[FIX] web_editor: bubble up pixel height to first applicable ancestor

A percentage height will only be applied on an element whose parent has
a set pixel height. This is why convert_inline applies a pixel height to
the parent of each element with a percentage height when possible. But
it failed in the case where said parent also had a percentage height.
This keeps looking up the tree until we find an appropriate suitor for
that pixel height.

X-original-commit: a9b0184087bec08db523a02068cc3d04b5f1381e
Part-of: odoo/odoo#81540

addons/web_editor/static/src/js/backend/convert_inline.js

@@ -693,7 +693,7 @@ function formatTables($editable) {
     }
     // Ensure a tbody in every table and cancel its default style.
     for (const table of $editable.find('table:not(:has(tbody))')) {
-        $(table).contents().wrap('<tbody style="vertical-align: top"/>');
+        $(table).contents().wrap('<tbody style="vertical-align: top;"/>');
     }
     // Children will only take 100% height if the parent has a height property.
     for (const node of $editable.find('*').filter((i, n) => (
@@ -701,7 +701,15 @@ function formatTables($editable) {
             !n.parentElement.style.getPropertyValue('height') ||
             n.parentElement.style.getPropertyValue('height').includes('%'))
     ))) {
-        node.parentElement.style.setProperty('height', '0');
+        let parent = node.parentElement;
+        let height = parent.style.getPropertyValue('height');
+        while (parent && height && height.includes('%')) {
+            parent = parent.parentElement;
+            height = parent.style.getPropertyValue('height');
+        }
+        if (parent) {
+            parent.style.setProperty('height', '0');
+        }
     }
 }