Fix cloud bg in firefox

commit_hash:21b7dfd3b5d018ab6ec3720fdb7a3711c2287ded

client/web/divkit/src/components/text/Text.svelte

@@ -4,7 +4,7 @@
     import css from './Text.module.css';
     import rootCss from '../Root.module.css';
 
-    import type { DivTextData, TextImage, TextRange, TextStyles, TextVerticalAlignment } from '../../types/text';
+    import type { CloudBackground, DivTextData, TextImage, TextRange, TextStyles, TextVerticalAlignment } from '../../types/text';
     import type { Style } from '../../types/general';
     import type { LayoutParams } from '../../types/layoutParams';
     import type { AlignmentHorizontal } from '../../types/alignment';
@@ -23,7 +23,7 @@
     import { isPositiveNumber } from '../../utils/isPositiveNumber';
     import { correctAlignmentHorizontal } from '../../utils/correctAlignmentHorizontal';
     import { type AlignmentVerticalMapped, correctAlignmentVertical } from '../../utils/correctAlignmentVertical';
-    import { correctColor } from '../../utils/correctColor';
+    import { correctColor, parseColor } from '../../utils/correctColor';
     import { correctBooleanInt } from '../../utils/correctBooleanInt';
     import { propToString } from '../../utils/propToString';
     import { correctTintMode } from '../../utils/correctTintMode';
@@ -56,11 +56,13 @@
     let gradient = '';
     let selectable = false;
 
-    let renderList: ({
+    interface RenderItemText {
         text: string;
         textStyles: TextRange;
         actions?: MaybeMissing<Action[]>;
-    } | {
+    }
+
+    interface RenderItemImage {
         image: {
             url: string;
             width: string;
@@ -72,8 +74,12 @@
             description: string;
             a11yAttrs?: Record<string, unknown>;
         };
-    })[] = [];
+    }
+
+    let renderList: (RenderItemText | RenderItemImage)[] = [];
     let hasCloudBg = false;
+    let wholeTextCloudBgId = '';
+    let wholeTextCloudBgOpacity: number | undefined;
     let usedTintColors: [string, TintMode][] = [];
 
     $: if (componentContext.json) {
@@ -423,6 +429,15 @@
 
         renderList = newRenderList;
         hasCloudBg = newRenderList.some(it => 'text' in it && it.textStyles.background?.type === 'cloud');
+        // In Firefox, svg filters do not work with inline elements. If possible, we transfer them to the parent block.
+        wholeTextCloudBgId = (hasCloudBg && newRenderList.length === 1) ? rootCtx.genId('text-whole-bg') : '';
+        wholeTextCloudBgOpacity = wholeTextCloudBgId ?
+            (
+                parseColor(
+                    ((newRenderList[0] as RenderItemText).textStyles.background as CloudBackground).color
+                )?.a ?? 255
+            ) / 255 :
+            undefined;
     }
 
     $: updateRenderList(text, $jsonRanges, $jsonImages, $jsonRootTextStyles);
@@ -482,7 +497,9 @@
             })}
             style={makeStyle({
                 ...style,
-                padding: cloudPadding
+                padding: cloudPadding,
+                filter: wholeTextCloudBgId ? `url(#${wholeTextCloudBgId})` : undefined,
+                opacity: wholeTextCloudBgOpacity
             })}
         >
             {#each renderList as item}
@@ -495,6 +512,7 @@
                             textStyles={item.textStyles}
                             {singleline}
                             cloudBg
+                            cloudBgId={wholeTextCloudBgId}
                         />
                     {/if}
                 {:else if item.image}

client/web/divkit/src/components/text/TextRange.module.css

@@ -50,7 +50,9 @@
 }
 
 .text-range__cloud-svg {
-    display: none;
+    display: inline;
+    width: 0;
+    height: 0;
 }
 
 .text-range_relative-vertical-align {

client/web/divkit/src/components/text/TextRange.svelte

@@ -28,12 +28,13 @@
     export let singleline = false;
     export let actions: MaybeMissing<Action[]> | undefined = undefined;
     export let cloudBg = false;
+    export let cloudBgId = '';
     export let customLineHeight: number | null = null;
 
     const rootCtx = getContext<RootCtxValue>(ROOT_CTX);
     const direction = rootCtx.direction;
 
-    const cloudFilterId = cloudBg && rootCtx.genId('text-range') || '';
+    const cloudFilterId = cloudBg && cloudBgId || rootCtx.genId('text-range') || '';
 
     let decoration = 'none';
     let fontSize = 12;
@@ -227,10 +228,10 @@
         padding: cloudPadding ?
             edgeInsertsToCss(edgeInsertsMultiply(cloudPadding, 10 / fontSize), $direction) :
             undefined,
-        filter: cloudBg && hasCloudBg ? `url(#${cloudFilterId})` : shadow,
+        filter: cloudBg && hasCloudBg && !cloudBgId ? `url(#${cloudFilterId})` : shadow,
         color: colorOverride || color,
         background,
-        opacity: cloudBg && hasCloudBg ?
+        opacity: cloudBg && hasCloudBg && !cloudBgId ?
             (parseColor((textStyles.background as CloudBackground).color)?.a ?? 255) / 255 :
             undefined,
         /**