Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 8ba6765
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 1 deletion.
4 changes: 3 additions & 1 deletion components/style/animation.rs
Expand Up @@ -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);
}

Expand Down
18 changes: 18 additions & 0 deletions components/style/keyframes.rs
Expand Up @@ -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,
}
}
}
Expand Down
23 changes: 23 additions & 0 deletions 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>

0 comments on commit 8ba6765

Please sign in to comment.