style: Fix timing-function overriding from the keyframe declaration l…

…ist. The previous behavior is plain wrong, since that array has always at least one element, so we effectively couldn't specify anything else than "ease" in our animations.
servo · Jul 7, 2016 · 8ba6765 · 8ba6765
1 parent 8bbebd0
commit 8ba6765
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/components/style/animation.rs b/components/style/animation.rs
@@ -626,7 +626,9 @@ where Impl: SelectorImplExt,
             // NB: The spec says that the timing function can be overwritten
             // from the keyframe style.
             let mut timing_function = style.get_box().animation_timing_function_mod(index);
-            if from_style.get_box().animation_timing_function_count() != 0 {
+            if last_keyframe.declared_timing_function {
+                // NB: animation_timing_function can never be empty, always has
+                // at least the default value (`ease`).
                 timing_function = from_style.get_box().animation_timing_function_at(0);
             }
 

diff --git a/components/style/keyframes.rs b/components/style/keyframes.rs
@@ -114,15 +114,33 @@ pub struct KeyframesStep {
     /// Declarations that will determine the final style during the step, or
     /// `ComputedValues` if this is an autogenerated step.
     pub value: KeyframesStepValue,
+    /// Wether a animation-timing-function declaration exists in the list of
+    /// declarations.
+    ///
+    /// This is used to know when to override the keyframe animation style.
+    pub declared_timing_function: bool,
 }
 
 impl KeyframesStep {
     #[inline]
     fn new(percentage: KeyframePercentage,
            value: KeyframesStepValue) -> Self {
+        let declared_timing_function = match value {
+            KeyframesStepValue::Declarations(ref declarations) => {
+                declarations.iter().any(|prop_decl| {
+                    match *prop_decl {
+                        PropertyDeclaration::AnimationTimingFunction(..) => true,
+                        _ => false,
+                    }
+                })
+            }
+            _ => false,
+        };
+
         KeyframesStep {
             start_percentage: percentage,
             value: value,
+            declared_timing_function: declared_timing_function,
         }
     }
 }

diff --git a/tests/html/animation-timing-function-override-from-keyframes.html b/tests/html/animation-timing-function-override-from-keyframes.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  @keyframes foo {
+    from { background: white; animation-timing-function: ease; }
+    to { background: black; }
+  }
+
+  @keyframes bar {
+    from { background: white }
+    to { background: black }
+  }
+
+  div {
+    height: 50px;
+    width: 100px;
+    animation: foo 1s infinite steps(4, end);
+  }
+  .bar { animation-name: bar }
+</style>
+<p>You should see an eased animation in the first-element, and a stepped one in the second one</p>
+<div></div>
+<div class="bar"></div>