[css-animations-2] Set animation-trigger-type as the coordinating list base property

[cdoublev]

animation-name is currently defined as the coordinating list base property for animation-trigger. I presume this is an oversight and should be animation-trigger-type.

[ydaniv]

Thanks for opening! This was intentional.
The property that we use to coordinate all animation longhands is the animation-name.
I think it would be weird, if we tried to change that?
Example:

selector {
  animation-name: jump, turn, fade;
  animation-trigger: repeat view() contain cover, alternate view();
}

[cdoublev]

Yes, my first thought after creating this PR was that animation-trigger should be a subproperty of animation in order to be based on animation-name.

I preferred to wait for your answer to know if you plan do it soon or if I should create an issue.

[cdoublev]

Hmm, I realized that the definition of a coordinating list property group does not require this.

<style>
  div {
    animation: 1s;
  }
</style>
<div id="el"></div>
<script>
  el.style.animationTrigger = 'once, once'
  el.style.animationTrigger; // ??
</script>

If animation-trigger is not a subproperty of animation, the serialization of the specified value of animation-trigger does not need to be truncated, right?

[ydaniv]

Well animation-trigger is a longhand that can't be specified in the animation shorthand, but I intended for it to behave as a longhand of animation because triggers have not meaning by themselves. Exactly like animation-timeline.

If animation-trigger is not a subproperty of animation, the serialization of the specified value of animation-trigger does not need to be truncated, right?

I don't think other longhands get truncated if you specify more values in the list than specified animation names. So I guess this should behave the same.

[cdoublev]

Well animation-trigger is a longhand that can't be specified in the animation shorthand [...]. Exactly like animation-timeline.

animation-timeline can be specified in animation.

Anyway, part of my confusion was that animation-trigger seems to be the first coordinating list property that cannot be specified in the same shorthand than the other properties of the same coordinating list property group.¹

I don't think other longhands get truncated if you specify more values in the list than specified animation names. So I guess this should behave the same.

The other part is that I thought that a coordinating list shorthand property should have its specified value serialized to empty string if the coordinating list base property has a different number of values than some property in the same group, indicating that it cannot represent all its longhands yet.

This is what FF does. Chrome truncates/repeats specified values as needed, which is incorrect because the spec requires this only for used values:

The computed values of the coordinating list properties are not affected by such truncation or repetition.

So in the example in my previous comment, the used value of animation-trigger should be truncated (based on animation-name, declared via animation). I do not know how FF will serialize its specified value.

---

(nit)

The emphasized part of this paragraph should probably exclude animation-trigger:

CSS Animations are defined by binding keyframes to an element using the animation-* properties. These list-valued properties, which are all longhands of the animation shorthand, form a coordinating list property group with animation-name as the coordinating list base property and each item in the coordinated value list defining the properties of a single animation effect.

¹ as far as I know, all existing coordinating list properties are mapped by one of these shorthands:

• animation
• animation-range (not explicitly defined)
• background
• box-shadow
• mask (not explicitly defined)
• text-shadow (not explicitly defined)
• transition (not explicitly defined)
• scroll-timeline
• view-timeline

[ydaniv]

animation-timeline can be specified in animation.

Right, just not implemented anywhere yet, but yes. So consider animation-range or animation-easing for that matter.

Anyway, part of my confusion was that animation-trigger seems to be the first coordinating list property that cannot be specified in the same shorthand than the other properties of the same coordinating list property group.

And notice that animation-range is also a coordinating list property that cannot be specified in the same shorthand as its own group.
So I assume the list of animation-trigger-* properties should be coordinated the same way as animation-range-* properties do.

The emphasized part of this paragraph should probably exclude animation-trigger

I think that paragraph is fine, since animation-rage and animation-trigger are in fact longhands of the animation shorthand, they're simply not specifiable inside it.

---

Regarding:

The other part is that I thought that a coordinating list shorthand property should have its specified value serialized to empty string if the coordinating list base property has a different number of values than some property in the same group, indicating that it cannot represent all its longhands yet.

This is what FF does. Chrome truncates/repeats specified values as needed, which is incorrect because the spec requires this only for used values:

The computed values of the coordinating list properties are not affected by such truncation or repetition.

I think this warrants a separate issue, to decide how to make this interoperable and whether this also warrants a spec change as well, or just close as "no change" and file issues for engine vendors.

[cdoublev]

And notice that animation-range is also a coordinating list property that cannot be specified in the same shorthand as its own group.

I do not see this specified. I only see that its longhands are reset-only sub-properties of animation, which is different.

The emphasized part of this paragraph should probably exclude animation-trigger

I think that paragraph is fine, since animation-range and animation-trigger are in fact longhands of the animation shorthand, they're simply not specifiable inside it.

Here, it is the opposite. I see animation-trigger specified as a coordinating list property with animation-name as its base property, but not as reset-only sub-property of animation.

I opened #11659 about serializing animation before used value time. Let me know if I should open other issues.

[ydaniv]

And notice that animation-range is also a coordinating list property that cannot be specified in the same shorthand as its own group.

I do not see this specified.

OK, I think that's simply an oversight, but let's clear first what is the intent behind coordinating list properties. It means that each longhand (or sub-property) can also be specified as a coordinated value list, meaning, it applies its effect on the N th item in the list based on its position in the list, and the order of that list is defined by the coordinating property.
So in animation-trigger-*'s case (and animation-range's), the coordinating property should still be animation-name, and not animation-trigger-type, or some other property. Otherwise you'll have a new sub-list inside that coordinated list.

Example:

.target {
  animation: flip 1s, rotate 1s;
  animation-trigger-timeline: view(), view();
}

The values of animation-trigger-timeline correspond to each animation based on the list created in animation.

I only see that its longhands are reset-only sub-properties of animation.

Yes, that's a separate concern that was specified.

---

Here, it is the opposite. I see animation-trigger specified as a coordinating list property with animation-name as its base property, but not as reset-only sub-property of animation.

I checked the text again:

Animation Triggers are defined using the animation-trigger-* properties. These list-valued properties, which are all longhands of the animation-trigger shorthand, form a coordinating list property group with animation-name as the coordinating list base property and each item in the coordinated value list defining the properties of a single animation trigger.

I think it's correct. It says animation-trigger-* properties form a group with animation-name as the coordinating property.
I think it says what I intended.