diff options
| author | Emilio Cobos Álvarez <me@emiliocobos.me> | 2016-07-01 15:52:04 -0700 |
|---|---|---|
| committer | Emilio Cobos Álvarez <ecoal95@gmail.com> | 2016-07-07 16:05:28 -0700 |
| commit | 8ba676533bb1bba3e030041946caf3a5ac0d1d6c (patch) | |
| tree | ebfd9683dc9bbc6603fbe1d04fb462d5414b4bd7 | |
| parent | 8bbebd0514473e992535f10ae742467c0c071744 (diff) | |
| download | servo-8ba676533bb1bba3e030041946caf3a5ac0d1d6c.tar.gz servo-8ba676533bb1bba3e030041946caf3a5ac0d1d6c.zip | |
style: Fix timing-function overriding from the keyframe declaration list.
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.
| -rw-r--r-- | components/style/animation.rs | 4 | ||||
| -rw-r--r-- | components/style/keyframes.rs | 18 | ||||
| -rw-r--r-- | tests/html/animation-timing-function-override-from-keyframes.html | 23 |
3 files changed, 44 insertions, 1 deletions
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 @@ +<!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> |