style: Order keyframe rules by layer

@counter-style/@font-face/@scroll-timeline need similar fixes, but tests
for those haven't been synced yet so waiting for that before writing
them.

Differential Revision: https://phabricator.services.mozilla.com/D126616

components/style/stylesheets/keyframes_rule.rs

@@ -14,6 +14,7 @@ use crate::properties::{PropertyDeclarationId, SourcePropertyDeclaration};
 use crate::shared_lock::{DeepCloneParams, DeepCloneWithLock, SharedRwLock, SharedRwLockReadGuard};
 use crate::shared_lock::{Locked, ToCssWithGuard};
 use crate::str::CssStringWriter;
+use crate::stylesheets::layer_rule::LayerOrder;
 use crate::stylesheets::rule_parser::VendorPrefix;
 use crate::stylesheets::{CssRuleType, StylesheetContents};
 use crate::values::{serialize_percentage, KeyframesName};
@@ -357,6 +358,8 @@ pub struct KeyframesAnimation {
     pub properties_changed: LonghandIdSet,
     /// Vendor prefix type the @keyframes has.
     pub vendor_prefix: Option<VendorPrefix>,
+    /// The order of the cascade layer the keyframe rule was in.
+    pub layer_order: LayerOrder,
 }
 
 /// Get all the animated properties in a keyframes animation.
@@ -409,12 +412,14 @@ impl KeyframesAnimation {
     pub fn from_keyframes(
         keyframes: &[Arc<Locked<Keyframe>>],
         vendor_prefix: Option<VendorPrefix>,
+        layer_order: LayerOrder,
         guard: &SharedRwLockReadGuard,
     ) -> Self {
         let mut result = KeyframesAnimation {
             steps: vec![],
             properties_changed: LonghandIdSet::new(),
             vendor_prefix,
+            layer_order,
         };
 
         if keyframes.is_empty() {