[FIX] web_editor: fix dimensionless SVGs in media-dialog on firefox

Previously, dimensionless SVGs (SVGs with no intrinsic width or height)
were rendered with a width of 0 in the media-dialog on firefox. This is
caused by the fact that firefox reports a naturalWidth and naturalHeight
of 0 for dimensionless images, which we were relying on to compute the
image's aspect ratio. See:
https://github.com/whatwg/html/issues/3510#issuecomment-369982529
for more details on the way browsers handle dimensionless images.

This commit fixes that by giving the image a width, letting the browser
render the image, and reading the height of the rendered image to
compute the aspect ratio in the cases where the naturalHeight of the
image is 0.

task-2345120

closes odoo/odoo#59785

X-original-commit: b59208db376f738a8773d1ec88838af69fa3ef9d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 19 insertions, 1 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
index 65bceb1b053..9c284931bf6 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -904,7 +904,25 @@ var ImageWidget = FileWidget.extend({
                 console.error('CORS is misconfigured on the API server, image will be treated as non-dynamic.');
             }
         }
-        const aspectRatio = img.naturalWidth / img.naturalHeight;
+        let aspectRatio = img.naturalWidth / img.naturalHeight;
+        // Special case for SVGs with no instrinsic sizes on firefox
+        // See https://github.com/whatwg/html/issues/3510#issuecomment-369982529
+        if (img.naturalHeight === 0) {
+            img.width = 1000;
+            // Position fixed so that the image doesn't affect layout while rendering
+            img.style.position = 'fixed';
+            // Make invisible so the image doesn't briefly appear on the screen
+            img.style.opacity = '0';
+            // Image needs to be in the DOM for dimensions to be correct after render
+            const originalParent = img.parentElement;
+            document.body.appendChild(img);
+
+            aspectRatio = img.width / img.height;
+            originalParent.appendChild(img);
+            img.removeAttribute('width');
+            img.style.removeProperty('position');
+            img.style.removeProperty('opacity');
+        }
         const width = aspectRatio * this.MIN_ROW_HEIGHT;
         cell.style.flexGrow = width;
         cell.style.flexBasis = `${width}px`;