Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

style: Fix timing-function overriding from the keyframe declaration list.

Browse source 
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.
This commit is contained in:
Emilio Cobos Álvarez 2016-07-01 15:52:04 -07:00 • committed by Emilio Cobos Álvarez
parent 8bbebd0514
commit 8ba676533b
No known key found for this signature in database
GPG key ID: 056B727BB9C1027C
3 changed files with 44 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/style/animation.rs
View file

@ -626,7 +626,9 @@ where Impl: SelectorImplExt,
// NB: The spec says that the timing function can be overwritten // NB: The spec says that the timing function can be overwritten
// from the keyframe style. // from the keyframe style.
let mut timing_function = style.get_box().animation_timing_function_mod(index); 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); timing_function = from_style.get_box().animation_timing_function_at(0);
} }

18
components/style/keyframes.rs
View file

@ -114,15 +114,33 @@ pub struct KeyframesStep {
/// Declarations that will determine the final style during the step, or /// Declarations that will determine the final style during the step, or
/// `ComputedValues` if this is an autogenerated step. /// `ComputedValues` if this is an autogenerated step.
pub value: KeyframesStepValue, 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 { impl KeyframesStep {
#[inline] #[inline]
fn new(percentage: KeyframePercentage, fn new(percentage: KeyframePercentage,
value: KeyframesStepValue) -> Self { 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 { KeyframesStep {
start_percentage: percentage, start_percentage: percentage,
value: value, value: value,
declared_timing_function: declared_timing_function,
} }
} }
} }

23
tests/html/animation-timing-function-override-from-keyframes.html Normal file
View file

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