diff --git a/components/style/animation.rs b/components/style/animation.rs
index c36cde3caea..a4600418023 100644
--- a/components/style/animation.rs
+++ b/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
+}
+
diff --git a/components/style/matching.rs b/components/style/matching.rs
index 2c4dfc990cd..2cd51352355 100644
--- a/components/style/matching.rs
+++ b/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 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);
-        }
+        let had_animations_to_expire =
+            animation::complete_expired_transitions(this_opaque, style, context);
 
         // Merge any running transitions into the current style, and cancel them.
         let had_running_animations = context.running_animations
diff --git a/components/style/traversal.rs b/components/style/traversal.rs
index efdf96b0c35..d1cf9eb833b 100644
--- a/components/style/traversal.rs
+++ b/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();
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 0263cda1704..d150aa4538c 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/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",
diff --git a/tests/wpt/mozilla/tests/css/animations/basic-transition.html b/tests/wpt/mozilla/tests/css/animations/basic-transition.html
new file mode 100644
index 00000000000..b80e8a666a6
--- /dev/null
+++ b/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>