[Gmail Android] inline linear-gradient() and radial-gradient() incorrectly rewritten

[husseinalhammad]

When the linear-gradient() and radial-gradient() functional notations are used inline, they are rewritten as invalid values when:

• used inline as value of the background-image CSS property
• used inline as value of the background and background-image CSS properties when both used on the same element and have the same value

This doesn't seem to affect embedded CSS in <style> tags.

Email Client

Gmail for Android (tested on 2024.01.14.599541078.Release and 2023.11.26.586591930.Release)

Operating System

Android 14

Expected Result

If the email client is meant to support the linear-gradient() notation as a value of the background-image or the background property, then the email client is expected to keep the inline CSS as is:

<div style="color:red; background-image:linear-gradient(orange, pink);"></div>

If the email client is not meant to support this, then the email client is expected to strip the relevant CSS property and its value only:

<div style="color:red;"></div>

Actual Result

• When only background-image is used
  • linear-gradient() and radial-gradient() get wrapped in url()
  • the first 3 characters in linear and radial get stripped
• When only background is used
  • linear-gradient() and radial-gradient() seem to be kept as is
• When both background-image and background are present,
  • background-image is stripped
  • linear-gradient() and radial-gradient() in background get the same treatment it gets if it was used in background-image (wrapped in url() and first 3 characters get stripped)

Here is the test code rendered by Gmail Android:

<div id="m#msg-f:1789761868417562721" class="mail-message expanded" style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br class="Apple-interchange-newline">
	<div class="mail-message-header spacer" style="height: 138px;"></div>
	<div class="mail-message-content collapsible zoom-normal mail-show-images msg3347146197074238750" style="overflow-wrap: break-word; width: 352px; display: block; margin: 16px 0px; user-select: auto;">
		<div class="clear"><u></u>
			<div>
				<div style="max-width: 600px; margin: 0px auto;">
					<h1 style="margin: 0px 0px 1em; font: 38px Palatino, serif; color: rgb(0, 0, 0); background: none; border: none;">CSS Gradients</h1>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(#e66465, #9198e5);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test1" style="background: url('ar-gradient(rgb(230, 100, 101), rgb(145, 152, 229)'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test2" style="background: url('ar-gradient(0.25turn, rgb(63, 135, 166), rgb(235, 248, 225), rgb(246, 157, 60)'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test3" style="background: url('ar-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test4" style="background: url('ar-gradient(to right, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, green 60%, green 80%, blue 80%'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<hr>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">radial-gradient(#e66465, #9198e5);</h2>
					<div style="font: 20px serif;">
						<div class="m_3347146197074238750test5" style="background: url('al-gradient(rgb(230, 100, 101), rgb(145, 152, 229)'); width: 480px; height: 160px; max-width: 100%;"></div>
					</div>
					<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">radial-gradient(farthest-<wbr>corner at 40px 40px, #f35 0%, #43e 100%);</h2>
						<div style="font: 20px serif;">
							<div class="m_3347146197074238750test6" style="background: url('al-gradient(at 40px 40px, rgb(255, 51, 85) 0%, rgb(68, 51, 238) 100%'); width: 480px; height: 160px; max-width: 100%;"></div>
						</div>
						<h2 style="margin: 2em 0px 1em; font: bold 16px monospace;">conic-gradient(red, orange, yellow, green, blue);</h2>
						<div style="font: 20px serif;">
							<div class="m_3347146197074238750test7" style="width: 480px; height: 160px; max-width: 100%;"></div>
						</div>
						<p style="margin-top: 1.6em; font: 20px serif;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()" target="_blank" rel="noreferrer" data-saferedirecturl="https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()&amp;source=gmail&amp;ust=1706936349946000&amp;usg=AOvVaw2ZwLSTE5fQlJfSUQgYtlG6" style="text-decoration: none; color: rgb(66, 133, 244);">https://developer.mozilla.org/<wbr>en-US/docs/Web/CSS/gradient/<wbr>linear-gradient()</a></p>
						<p style="margin-top: 1.6em; font: 20px serif;"><a href="https://www.caniemail.com/" target="_blank" rel="noreferrer" data-saferedirecturl="https://www.google.com/url?q=https://www.caniemail.com&amp;source=gmail&amp;ust=1706936349946000&amp;usg=AOvVaw3IdspkzKbOaoalfQZhJf7-" style="text-decoration: none; color: rgb(0, 0, 0);">caniemail.com</a>, 2021.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="mail-message-footer spacer collapsible" style="display: block; height: 0px;"></div>
</div><br class="Apple-interchange-newline">

Steps to reproduce

N/A

Code sample

The CanIEmail? test is what is rendered above: https://github.com/hteumeuleu/caniemail/blob/master/tests/css-gradients.html

Additional context

This was first reported by @aOpenbrier on hteumeuleu/caniemail#395