diff --git a/client/web/divkit/src/components/text/Text.svelte b/client/web/divkit/src/components/text/Text.svelte index c5bc2499b..047c9dd99 100644 --- a/client/web/divkit/src/components/text/Text.svelte +++ b/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; - } | { + } + + interface RenderItemImage { image: { url: string; width: string; @@ -72,8 +74,12 @@ description: string; a11yAttrs?: Record; }; - })[] = []; + } + + 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} diff --git a/client/web/divkit/src/components/text/TextRange.module.css b/client/web/divkit/src/components/text/TextRange.module.css index 714650a7e..c4e048a70 100644 --- a/client/web/divkit/src/components/text/TextRange.module.css +++ b/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 { diff --git a/client/web/divkit/src/components/text/TextRange.svelte b/client/web/divkit/src/components/text/TextRange.svelte index 5e53dfa40..445e5348f 100644 --- a/client/web/divkit/src/components/text/TextRange.svelte +++ b/client/web/divkit/src/components/text/TextRange.svelte @@ -28,12 +28,13 @@ export let singleline = false; export let actions: MaybeMissing | undefined = undefined; export let cloudBg = false; + export let cloudBgId = ''; export let customLineHeight: number | null = null; const rootCtx = getContext(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, /** diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_range_with_cloud_background/firefoxMobile/text_range_with_cloud_background.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_range_with_cloud_background/firefoxMobile/text_range_with_cloud_background.png index 6bca22d79..a78c318f1 100644 Binary files a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_range_with_cloud_background/firefoxMobile/text_range_with_cloud_background.png and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_range_with_cloud_background/firefoxMobile/text_range_with_cloud_background.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_alignment/firefoxMobile/text_with_cloud_background_alignment.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_alignment/firefoxMobile/text_with_cloud_background_alignment.png index d0669b12a..1674572db 100644 Binary files a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_alignment/firefoxMobile/text_with_cloud_background_alignment.png and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_alignment/firefoxMobile/text_with_cloud_background_alignment.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_padding/firefoxMobile/text_with_cloud_background_padding.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_padding/firefoxMobile/text_with_cloud_background_padding.png index 3bfc63ed9..b46bb0be2 100644 Binary files a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_padding/firefoxMobile/text_with_cloud_background_padding.png and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/text_with_cloud_background_padding/firefoxMobile/text_with_cloud_background_padding.png differ