Open Bug 1894873 Opened 1 year ago Updated 1 year ago

Keyframes with same name are all displayed in the rules view, but only the last one in the document should

Categories

(DevTools :: Inspector: Rules, defect, P3)

Product:
DevTools
Component:
Inspector: Rules
Type:
defect

Tracking

(Not tracked)

People

(Reporter: nchevobbe, Unassigned)

References

Details

Steps to reproduce

  1. Go to data:text/html,<meta charset=utf8><style>body {animation: 10s foo infinite alternate;}@keyframes foo {from { color: white; }to { color: gold; }}@keyframes foo {from { background-color: red; }to { background-color: blue; }}</style>hello
  2. Open the inspector and inspect the <body> element

Expected results

In the rule view, I'm seeing 1 Keyframes foo section, the one animating background-color

Actual results

The Keyframes foo for background-color is displayed, but also another one, animating color
The first @keyframes rule of the stylesheet is ignored by the engine, and we shouldn't display it (or display it all crossed out ?)

From the https://drafts.csswg.org/css-animations-1/#keyframes:

If multiple @keyframes rules are defined with the same name, the last one in document order wins, and all preceding ones are ignored.

This seems to hold true for @keyframes rules defined in @container and @starting-style:

Global, name-defining at-rules such as @keyframes, […] that are defined inside container queries are not constrained by the container query conditions.

Global, name-defining at-rules such as @keyframes, […] are allowed inside @starting-style, and when present behave as if they were outside of @starting-style.

But for @keyframes inside @layer, the layer order applies:

Name-defining at-rules such as @keyframes, […] that are defined inside cascade layers also use the layer order when resolving name collisions.

Unfortunately I can't find anything about @media but (in Firefox at least), it seems that the keyframes declaration will only be taken into account if the media query is matched (so @keyframes in @media print won't be picked up)

Bug 1894603 will show @keyframes rules nested in other rules.
Let's wait until this is fixed before only showing the applied keyframes

Depends on: 1894603

From emilio in Element:

So ordering key is: layer, then prefix, then source order
https://searchfox.org/mozilla-central/rev/386c7f17b2421374930a447c9f424910551b659d/servo/components/style/stylist.rs#1905-1915

// Don't let a prefixed keyframes animation override
// a non-prefixed one.
fn compare_keyframes_in_same_layer(v1: &KeyframesAnimation, v2: &KeyframesAnimation) -> Ordering {
    if v1.vendor_prefix.is_some() == v2.vendor_prefix.is_some() {
        Ordering::Equal
    } else if v2.vendor_prefix.is_some() {
        Ordering::Greater
    } else {
        Ordering::Less
    }
}
Severity: -- → S3
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.