Auto merge of #12623 - notriddle:master, r=emilio

Complete animations whether or not cascade needs done

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #12554 (github issue number if applicable).
- [x] There are tests for these changes

<!-- 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/12623)
<!-- Reviewable:end -->

components/style/animation.rs

@@ -668,3 +668,29 @@ where Damage: TRestyleDamage {
         }
     }
 }
+
+/// Update the style in the node when it finishes.
+pub fn complete_expired_transitions(node: OpaqueNode, style: &mut Arc<ComputedValues>,
+                                    context: &SharedStyleContext) -> bool {
+    let had_animations_to_expire;
+    {
+        let all_expired_animations = context.expired_animations.read().unwrap();
+        let animations_to_expire = all_expired_animations.get(&node);
+        had_animations_to_expire = animations_to_expire.is_some();
+        if let Some(ref animations) = animations_to_expire {
+            for animation in *animations {
+                // TODO: support animation-fill-mode
+                if let Animation::Transition(_, _, ref frame, _) = *animation {
+                    frame.property_animation.update(Arc::make_mut(style), 1.0);
+                }
+            }
+        }
+    }
+
+    if had_animations_to_expire {
+        context.expired_animations.write().unwrap().remove(&node);
+    }
+
+    had_animations_to_expire
+}
+

components/style/matching.rs

@@ -466,25 +466,8 @@ trait PrivateMatchMethods: TNode
 
         // Finish any expired transitions.
         let this_opaque = self.opaque();
-        let had_animations_to_expire;
+        let had_animations_to_expire =
-        {
+            animation::complete_expired_transitions(this_opaque, style, context);
-            let all_expired_animations = context.expired_animations.read().unwrap();
-            let animations_to_expire = all_expired_animations.get(&this_opaque);
-            had_animations_to_expire = animations_to_expire.is_some();
-            if let Some(ref animations) = animations_to_expire {
-                for animation in *animations {
-                    // NB: Expiring a keyframes animation is the same as not
-                    // applying the keyframes style to it, so we're safe.
-                    if let Animation::Transition(_, _, ref frame, _) = *animation {
-                        frame.property_animation.update(Arc::make_mut(style), 1.0);
-                    }
-                }
-            }
-        }
-
-        if had_animations_to_expire {
-            context.expired_animations.write().unwrap().remove(&this_opaque);
-        }
 
         // Merge any running transitions into the current style, and cancel them.
         let had_running_animations = context.running_animations

components/style/traversal.rs

@@ -4,6 +4,7 @@
 
 //! Traversing the DOM tree; the bloom filter.
 
+use animation;
 use context::{SharedStyleContext, StyleContext};
 use dom::{OpaqueNode, TElement, TNode, TRestyleDamage, UnsafeNode};
 use matching::{ApplicableDeclarations, ElementMatchMethods, MatchMethods, StyleSharingResult};
@@ -11,6 +12,7 @@ use selector_impl::SelectorImplExt;
 use selectors::Element;
 use selectors::bloom::BloomFilter;
 use std::cell::RefCell;
+use std::sync::Arc;
 use tid::tid;
 use util::opts;
 use values::HasViewportPercentage;
@@ -256,6 +258,13 @@ pub fn recalc_style_at<'a, N, C>(context: &'a C,
                 node.set_restyle_damage(damage);
             }
         }
+    } else {
+        // Finish any expired transitions.
+        animation::complete_expired_transitions(
+            node.opaque(),
+            node.mutate_data().unwrap().style.as_mut().unwrap(),
+            context.shared_context()
+        );
     }
 
     let unsafe_layout_node = node.to_unsafe();

tests/wpt/mozilla/meta/MANIFEST.json

@@ -6150,6 +6150,12 @@
             "url": "/_mozilla/css/animations/basic-linear-width.html"
           }
         ],
+        "css/animations/basic-transition.html": [
+          {
+            "path": "css/animations/basic-transition.html",
+            "url": "/_mozilla/css/animations/basic-transition.html"
+          }
+        ],
         "css/empty-keyframes.html": [
           {
             "path": "css/empty-keyframes.html",

tests/wpt/mozilla/tests/css/animations/basic-transition.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Transition test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#check-me, #check-me-2 {
+  background-color: #F00;
+  width: 10px;
+  height: 10px;
+  transition: background-color 1s linear;
+}
+#check-me-2 {
+  background-color: #000;
+}
+</style>
+<div id=check-me><span>a</span></div>
+<script>
+var div = document.getElementById('check-me');
+var span = div.childNodes[0];
+async_test(function(t) {
+  window.addEventListener('load', function() {
+    assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(255, 0, 0)');
+    div.id = "check-me-2";
+    requestAnimationFrame(function() {
+      var test = new window.TestBinding();
+      test.advanceClock(2000);
+      span.innerHTML = "a";
+      assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(0, 0, 0)');
+      t.done();
+    });
+  })
+})
+</script>