TF-3622 Synchronize all style attributes in html and write E2E for it.

Signed-off-by: dab246 <tdvu@linagora.com>

core/lib/data/network/download/download_client.dart

@@ -119,7 +119,7 @@ class DownloadClient {
       fileName = fileName.split('.').first;
     }
     mimeType = HtmlUtils.validateHtmlImageResourceMimeType(mimeType);
-    final base64Uri = '<img src="${HtmlUtils.convertBase64ToImageResourceData(base64Data: base64Data, mimeType: mimeType)}" alt="$fileName" style="max-width: $maxWidth;" data-mimetype="$mimeType" id="cid:$cid" />';
+    final base64Uri = '<img src="${HtmlUtils.convertBase64ToImageResourceData(base64Data: base64Data, mimeType: mimeType)}" alt="$fileName" style="max-width:$maxWidth;" data-mimetype="$mimeType" id="cid:$cid" />';
     return base64Uri;
   }
 }

core/lib/utils/html/html_interaction.dart

@@ -158,22 +158,9 @@ class HtmlInteraction {
         function normalizeStyleAttribute(attrs) {
           // Normalize style attribute to ensure proper responsive behavior
           let style = attrs['style'];
-          const widthStr = attrs['width'];
           
           if (!style) {
-            if (!widthStr) {
-              attrs['style'] = 'max-width: 100%;height: auto;display: inline;';
-            } else {
-              if (!style.includes('height')) {
-                style += 'height: auto;';
-              }
-        
-              if (!style.includes('display')) {
-                style += 'display: inline;';
-              }
-        
-              attrs['style'] = style;
-            }
+            attrs['style'] = 'max-width:100%;height:auto;display:inline;';
             return;
           }
     
@@ -199,15 +186,15 @@ class HtmlInteraction {
     
           // Add responsive defaults if missing
           if (!style.includes('max-width')) {
-            style += 'max-width: 100%;';
+            style += 'max-width:100%;';
           }
     
           if (!style.includes('height')) {
-            style += 'height: auto;';
+            style += 'height:auto;';
           }
     
           if (!style.includes('display')) {
-            style += 'display: inline;';
+            style += 'display:inline;';
           }
     
           attrs['style'] = style;

integration_test/scenarios/email_detailed/deformed_inlined_image_scenario.dart

@@ -19,10 +19,20 @@ class DeformedInlinedImageScenario extends BaseTestScenario {
       src="https://example.com/image.jpg"
       alt="inline-image-no-style"/>
     <br>
+    <img 
+      src="https://example.com/image.jpg"
+      style="width: 2000px; height: 200px;" 
+      alt="inline-image-oversize-with-style-have-full-whitespaces"/>
+    <br>
     <img 
       src="https://example.com/image.jpg"
       style="width: 2000px;height: 200px;" 
-      alt="inline-image-oversize-with-style"/>
+      alt="inline-image-oversize-with-style-have-whitespaces"/>
+    <br>
+    <img 
+      src="https://example.com/image.jpg"
+      style="width:2000px;height:200px;" 
+      alt="inline-image-oversize-with-style-no-whitespaces"/>
     <br>
     <img 
       src="https://example.com/image.jpg"
@@ -30,12 +40,26 @@ class DeformedInlinedImageScenario extends BaseTestScenario {
       height="200"
       alt="inline-image-oversize-with-width-attribute"/>
     <br>
+    <img 
+      src="https://example.com/image.jpg"
+      style="width: 2000px; height: 200px;" 
+      width="2000"
+      height="200"
+      alt="inline-image-oversize-with-style-and-width-attribute-have-full-whitespaces"/>
+    <br>
     <img 
       src="https://example.com/image.jpg"
       style="width: 2000px;height: 200px;" 
       width="2000"
       height="200"
-      alt="inline-image-oversize-with-style-and-width-attribute"/>
+      alt="inline-image-oversize-with-style-and-width-attribute-have-whitespaces"/>
+    <br>
+    <img 
+      src="https://example.com/image.jpg"
+      style="width:2000px;height:200px;" 
+      width="2000"
+      height="200"
+      alt="inline-image-oversize-with-style-and-width-attribute-no-whitespaces"/>
     <br>
     <img 
       src="https://example.com/image.jpg"
@@ -43,12 +67,26 @@ class DeformedInlinedImageScenario extends BaseTestScenario {
       height="100"
       alt="inline-image-normal-size-with-width-attribute"/>
     <br>
+    <img 
+      src="https://example.com/image.jpg"
+      style="width: 100px; height: 100px;" 
+      width="100"
+      height="100"
+      alt="inline-image-normal-size-with-style-and-width-attribute-have-full-whitespaces"/>
+    <br>
     <img 
       src="https://example.com/image.jpg"
       style="width: 100px;height: 100px;" 
       width="100"
       height="100"
-      alt="inline-image-normal-size-with-style-and-width-attribute"/>
+      alt="inline-image-normal-size-with-style-and-width-attribute-have-whitespaces"/>
+    <br>
+    <img 
+      src="https://example.com/image.jpg"
+      style="width:100px;height:100px;" 
+      width="100"
+      height="100"
+      alt="inline-image-normal-size-with-style-and-width-attribute-no-whitespaces"/>
   ''';
 
   @override
@@ -126,29 +164,34 @@ class DeformedInlinedImageScenario extends BaseTestScenario {
 
     final imageList = List<Map<String, dynamic>>.from(result);
 
-    expect(imageList.length, 6);
+    expect(imageList.length, 12);
 
     for (var img in imageList) {
       final imgWidth= img['width'];
       final imgHeight = img['height'];
       final imgStyle = img['style'];
-      final imgAlt = img['alt'];
+      final imgAlt = img['alt'] as String;
       final imgOuterHTML = img['outerHTML'];
       log("DeformedInlinedImageScenario::_expectEmailViewDisplaysNormalizedInlineImages:Image $imgOuterHTML");
+      expect(imgStyle.contains('max-width:100%'), isTrue);
+      expect(imgStyle.contains('display:inline'), isTrue);
+      expect(imgStyle.contains('height:'), isTrue);
 
-      if (imgAlt == 'inline-image-normal-size-with-width-attribute') {
-        expect(imgStyle, isNull);
-        expect(imgWidth, equals('100'));
-        expect(imgHeight, equals('100'));
-      } else if (imgAlt == 'inline-image-normal-size-with-style-and-width-attribute') {
-        expect(imgStyle.contains('width: 100px;height: 100px;'), isTrue);
-        expect(imgWidth, equals('100'));
-        expect(imgHeight, equals('100'));
-      } else {
-        expect(imgStyle, equals('max-width: 100%;height: auto;display: inline;'));
+      if (imgAlt.startsWith('inline-image-normal-size')) {
+        expect(imgWidth, isNotNull);
+        expect(imgHeight, isNotNull);
+      } else if (imgAlt.startsWith('inline-image-oversize')) {
         expect(imgWidth, isNull);
         expect(imgHeight, isNull);
       }
+
+      if (imgAlt.startsWith('inline-image-normal-size-with-style-and-width-attribute')) {
+        expect(imgStyle.contains('width:'), isTrue);
+        expect(imgStyle.contains('100px'), isTrue);
+      } else if (imgAlt.startsWith('inline-image-oversize-with-style-and-width-attribute')) {
+        expect(imgStyle.contains('style="width:2000px'), isFalse);
+        expect(imgStyle.contains('style="width: 2000px'), isFalse);
+      }
     }
   }
 }

lib/features/composer/presentation/controller/rich_text_web_controller.dart

@@ -284,7 +284,7 @@ class RichTextWebController extends BaseRichTextController {
       final base64Data = base64Encode(platformFile.bytes!);
       final mimeType = HtmlUtils.validateHtmlImageResourceMimeType('image/${platformFile.extension}');
       editorController.insertHtml(
-        '<img src="${HtmlUtils.convertBase64ToImageResourceData(base64Data: base64Data, mimeType: mimeType)}" data-filename="${platformFile.name}" alt="Image in my signature" style="max-width: ${maxWidth != null ? '${maxWidth}px' : '100%'};" data-mimetype="$mimeType"/>'
+        '<img src="${HtmlUtils.convertBase64ToImageResourceData(base64Data: base64Data, mimeType: mimeType)}" data-filename="${platformFile.name}" alt="Image in my signature" style="max-width:${maxWidth != null ? '${maxWidth}px' : '100%'};" data-mimetype="$mimeType"/>'
       );
     } else {
       logError("RichTextWebController::insertImageAsBase64: bytes is null");

lib/features/public_asset/presentation/public_asset_controller.dart

@@ -186,7 +186,7 @@ class PublicAssetController extends BaseController {
     newlyPickedPublicAssetIds.add(publicAsset.id!);
     final imageTag = '<img '
       'src="${publicAsset.publicURI!}" '
-      'style="max-width: 100%;" '
+      'style="max-width:100%;" '
       'public-asset-id="${publicAsset.id!.value}">';
     if (PlatformInfo.isWeb) {
       Get