[css-animations] How should relative-length values be interpreted when used in the <keyframe-selector> production in the @keyframes prelude?

[weinig]

Assuming calc() is allowed here (see #10879), how should relative-length values be interpreted when used with in it?

The <keyframe-selector> production in the @keyframes prelude is defined via the grammar:

<keyframe-selector> = from | to | <percentage [0,100]>

So, for example, you could have:

@keyframes foo {
  from {
    margin-left: 0px;  
  }
  calc(50% * sign(10em - 2px)) {
    margin-left: 100px;
  }
  from {
    margin-left: 200px;  
  }
}

So the question is, what does 10em evaluate to? @font-palette-values contains this text:

Math functions, such as calc(), and also var(), and env(), are valid within descriptor values in a @font-palette-values rule. They are evaluated within the context of the root element. Relative units are also evaluated within the context of the root element.

but I can't find any similar text for @Keyframes.

[fantasai]

For keyframes I suspect the ideal behavior would be to reference the element the animation is specified on, if that's possible. CC @flackr @bramus who probably have a good sense of what we should do here.

[tabatkins]

That's how we resolve var() in keyframes already, so yes, that's definitely the behavior we want.

[bramus]

For keyframes I suspect the ideal behavior would be to reference the element the animation is specified on

+1

[cdoublev]

50% * sign(10em - 2px) has type [percent → 1] with a length percent hint and does not match <percentage> in this context.

I do not think a math function including <length>(s) calculation values can match a keyframe selector <percentage>.

[weinig]

I don’t believe there is anything in there that would cause a length percent hint.

The sign expression will have the type “number” made consistent with the input. Since the input has no percent hint, the “number” will also not have a percent hint.

Then, the 50% has type “percentage”, which, multiplied by “number” is still “percentage”.

[cdoublev]

You are right, sorry! I misinterpreted "the return type is <number> made consistent with <length>". <number> and <length> are not consistent types (adding them is a failure) but you can make <number> consistent with <length>, which means making their percent hint consistent...

[astearns]

@tabatkins @fantasai could this be an async resolution?