1323486 - CSS variables inside CSS animation are not cascaded

Status: RESOLVED DUPLICATE of bug 1763376

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Vincent MONIER]

Attachment: Showcase css-variables.html

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160623154057

Steps to reproduce:

Create a custom CSS property (CSS variable) inside an @keyframe rule. Apply the animation to an element.


Actual results:

The value of the custom property is well changing (if you use this value inside the @keyframe rules, it's well varying), but it is not cascaded to the element the animation is applied to nor to its child.


Expected results:

The value should be cascaded to the element and its child, since it's property (a custom one).

Currently, Opera (v41) does not consider the custom property inside the @keyframes (the border stays as if there is no animation). Chrome Canary (v57) does apply the animation but without any transition inbetween.

Comment 1

[Vincent MONIER]

And in code-tech words (see showcase):

This makes an animation

	@keyframes color2anim-expected {
		0% {
			--my-color2-expected: #f00;
			color: var(--my-color2-expected);
			box-shadow: 1px 1px 8px 1px var(--my-color2-expected);
			border-color: var(--my-color2-expected);
		}
		50% {
			--my-color2-expected: #ff0;
			color: var(--my-color2-expected);
			box-shadow: 1px 1px 8px 1px var(--my-color2-expected);
			border-color: var(--my-color2-expected);
		}
		100% {
			--my-color2-expected: #00f;
			color: var(--my-color2-expected);
			box-shadow: 1px 1px 8px 1px var(--my-color2-expected);
			border-color: var(--my-color2-expected);
		}
	}
	
	.text-anim-expected {
		padding: 1em;
		margin: 1em;
		border: 4px dotted black;
		animation: 5s linear 0s infinite alternate none running color2anim-expected;
	}



While this doesn't animate

	@keyframes color2anim {
		0% {
			--my-color2: #f00;
		}
		50% {
			--my-color2: #ff0;
		}
		100% {
			--my-color2: #00f;
		}
	}
			
	:root {
		/* No animation, no matter whether --my-color2 is set here */
		/*--my-color2: red;*/
		animation: 5s linear 0s infinite alternate none running color2anim;
	}
	
	.text-anim {
		color: var(--my-color2);
		box-shadow: 1px 1px 8px 1px var(--my-color2);
		border: 4px dotted black;
		border-color: var(--my-color2);
		padding: 1em;
		margin: 1em;
	}

Comment 2

[jbreuil]

In version 112.0.2 the problem remains. The repoduction link in this issue is still relevant.

Is there any more information required for this to be confirmed has an issue?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

This is a known problem. Bug 1763376 has some more diagnostics so duping there.