diff --git a/components/style/animation.rs b/components/style/animation.rs
index 87184928eb8..1f0cbcaefde 100644
--- 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
index 82dc4c9200f..a6e667e9282 100644
--- 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
new file mode 100644
index 00000000000..7e37c2d19cb
--- /dev/null
+++ b/tests/html/animation-timing-function-override-from-keyframes.html
@@ -0,0 +1,23 @@
+
+
+
+You should see an eased animation in the first-element, and a stepped one in the second one
+
+