Auto merge of #16945 - hiikezoe:update-css-animations-by-css-rule-changes, r=birtles,heycam

Update css animations by css rule changes

<!-- Please describe your changes on the following line: -->
This is a PR for https://bugzilla.mozilla.org/show_bug.cgi?id=1364799

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes do not require tests because it's for stylo

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/16945)
<!-- Reviewable:end -->

components/style/matching.rs

@@ -366,6 +366,7 @@ trait PrivateMatchMethods: TElement {
 
     #[cfg(feature = "gecko")]
     fn needs_animations_update(&self,
+                               context: &mut StyleContext<Self>,
                                old_values: Option<&Arc<ComputedValues>>,
                                new_values: &ComputedValues)
                                -> bool {
@@ -378,7 +379,10 @@ trait PrivateMatchMethods: TElement {
             let old_box_style = old.get_box();
             let old_display_style = old_box_style.clone_display();
             let new_display_style = new_box_style.clone_display();
-            // FIXME: Bug 1344581: We still need to compare keyframe rules.
+
+            // If the traverse is triggered by CSS rule changes,
+            // we need to try to update all CSS animations.
+            context.shared.traversal_flags.for_css_rule_changes() ||
             !old_box_style.animations_equals(&new_box_style) ||
              (old_display_style == display::T::none &&
               new_display_style != display::T::none &&
@@ -400,7 +404,7 @@ trait PrivateMatchMethods: TElement {
         use context::UpdateAnimationsTasks;
 
         let mut tasks = UpdateAnimationsTasks::empty();
-        if self.needs_animations_update(old_values.as_ref(), new_values) {
+        if self.needs_animations_update(context, old_values.as_ref(), new_values) {
             tasks.insert(CSS_ANIMATIONS);
         }
 

components/style/traversal.rs

@@ -37,6 +37,10 @@ bitflags! {
         const ANIMATION_ONLY = 0x02,
         /// Traverse without generating any change hints.
         const FOR_RECONSTRUCT = 0x04,
+        /// Traverse triggered by CSS rule changes.
+        /// Traverse and update all elements with CSS animations since
+        /// @keyframes rules may have changed
+        const FOR_CSS_RULE_CHANGES = 0x08,
     }
 }
 
@@ -55,6 +59,11 @@ impl TraversalFlags {
     pub fn for_reconstruct(&self) -> bool {
         self.contains(FOR_RECONSTRUCT)
     }
+
+    /// Returns true if the traversal is triggered by CSS rule changes.
+    pub fn for_css_rule_changes(&self) -> bool {
+        self.contains(FOR_CSS_RULE_CHANGES)
+    }
 }
 
 /// This structure exists to enforce that callers invoke pre_traverse, and also