Bug 1894873 Comment 0 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Original comment by
on 
**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`
1. 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, animation `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 [spec](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.
Revision 1 by
on 
**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`
1. 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, animation `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.

But also, from https://www.w3.org/TR/css-cascade-5/#layering

> Name-defining at-rules such as @keyframes or @font-face that are defined inside cascade layers also use the layer order when resolving name collisions.
Revision 2 by
on 
**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`
1. 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, animation `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.

But also, from https://www.w3.org/TR/css-cascade-5/#layering

> Name-defining at-rules such as @keyframes or @font-face that are defined inside cascade layers also use the layer order when resolving name collisions.

And in https://drafts.csswg.org/css-contain-3/#container-rule

> Global, name-defining at-rules such as @keyframes or @font-face or @layer that are defined inside container queries are not constrained by the container query conditions.

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)
Revision 3 by
on 
**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`
1. 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, animation `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`:

- https://drafts.csswg.org/css-contain-3/#container-rule
> Global, name-defining at-rules such as @keyframes, […] that are defined inside container queries are not constrained by the container query conditions.

- https://drafts.csswg.org/css-transitions-2/#defining-before-change-style
> 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:

- https://www.w3.org/TR/css-cascade-5/#layering
> 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)
Revision 4 by
on 
**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`
1. 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`:

- https://drafts.csswg.org/css-contain-3/#container-rule
> Global, name-defining at-rules such as @keyframes, […] that are defined inside container queries are not constrained by the container query conditions.

- https://drafts.csswg.org/css-transitions-2/#defining-before-change-style
> 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:

- https://www.w3.org/TR/css-cascade-5/#layering
> 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)

Back to Bug 1894873 Comment 0