MC-41569: "Image Size" sporadically changing from "%" to pixels

Author: yelahin-serhiy

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js

@@ -170,10 +170,18 @@ export function parseAttributesString(attributes: string): { [key: string]: stri
  * @param element
  */
 export function lockImageSize(element: HTMLElement) {
-    [].slice.call(element.querySelectorAll("img")).forEach((image: HTMLImageElement) => {
-        if (image.style.width.length === 0 && image.style.height.length === 0) {
-            image.style.width = `${image.width}px`;
-            image.style.height = `${image.height}px`;
+    [].slice.call(element.querySelectorAll('img')).forEach((image: HTMLImageElement) => {
+        if (image.style.width.length === 0) {
+            image.style.width = /^\d+$/.test(image.getAttribute('width')) ?
+                image.getAttribute('width') + 'px' :
+                image.getAttribute('width');
+            image.setAttribute('data-width-locked', 'true');
+        }
+        if (image.style.height.length === 0) {
+            image.style.height = /^\d+$/.test(image.getAttribute('height')) ?
+                image.getAttribute('height') + 'px':
+                image.getAttribute('height');
+            image.setAttribute('data-height-locked', 'true');
         }
     });
 }
@@ -184,9 +192,15 @@ export function lockImageSize(element: HTMLElement) {
  * @param element
  */
 export function unlockImageSize(element: HTMLElement) {
-    [].slice.call(element.querySelectorAll("img")).forEach((image: HTMLImageElement) => {
-        image.style.width = null;
-        image.style.height = null;
+    [].slice.call(element.querySelectorAll('img')).forEach((image: HTMLImageElement) => {
+        if (image.getAttribute('data-width-locked')) {
+            image.style.width = null;
+            image.removeAttribute('data-width-locked');
+        }
+        if (image.getAttribute('data-height-locked')) {
+            image.style.height = null;
+            image.removeAttribute('data-height-locked');
+        }
     });
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts

@@ -13,14 +13,30 @@ define([
     describe('Magento_PageBuilder/js/utils/editor.js', function () {
         describe('lockImageSize', function () {
             it('Should not change the defined image sizes', function () {
-                var image = new Image();
+                var image = document.createElement('img'),
+                    element = document.createElement('div');
 
-                $(document.body).append(image);
-                $(image).width('100%');
+                image.setAttribute('width', '100%');
+                $(element).append(image);
 
-                utils.lockImageSize(document.body);
+                utils.lockImageSize(element);
                 expect(image.style.width).toEqual('100%');
             });
         });
+
+        describe('unlockImageSize', function () {
+            it('Should unlock locked images sizes only', function () {
+                var image = document.createElement('img'),
+                    element = document.createElement('div');
+
+                $(image).css({'width' : '100%', 'height' : '100%'});
+                $(image).attr('data-height-locked', 'true');
+                $(element).append(image);
+
+                utils.unlockImageSize(element);
+                expect(image.style.width).toEqual('100%');
+                expect(image.style.height).toEqual('');
+            });
+        });
     });
 });