Skip to content
Permalink
Browse files

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.
  • Loading branch information
emilio committed Jul 7, 2016
1 parent 8bbebd0 commit 8ba676533bb1bba3e030041946caf3a5ac0d1d6c
@@ -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);
}

@@ -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,
}
}
}
@@ -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>

0 comments on commit 8ba6765

Please sign in to comment.
You can’t perform that action at this time.