mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Auto merge of #12623 - notriddle:master, r=emilio
Complete animations whether or not cascade needs done - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors - [X] These changes fix #12554 (github issue number if applicable). - [x] There are tests for these changes <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/12623) <!-- Reviewable:end -->
This commit is contained in:
commit
27d8fb3807
5 changed files with 77 additions and 19 deletions
|
@ -668,3 +668,29 @@ where Damage: TRestyleDamage {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Update the style in the node when it finishes.
|
||||
pub fn complete_expired_transitions(node: OpaqueNode, style: &mut Arc<ComputedValues>,
|
||||
context: &SharedStyleContext) -> bool {
|
||||
let had_animations_to_expire;
|
||||
{
|
||||
let all_expired_animations = context.expired_animations.read().unwrap();
|
||||
let animations_to_expire = all_expired_animations.get(&node);
|
||||
had_animations_to_expire = animations_to_expire.is_some();
|
||||
if let Some(ref animations) = animations_to_expire {
|
||||
for animation in *animations {
|
||||
// TODO: support animation-fill-mode
|
||||
if let Animation::Transition(_, _, ref frame, _) = *animation {
|
||||
frame.property_animation.update(Arc::make_mut(style), 1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if had_animations_to_expire {
|
||||
context.expired_animations.write().unwrap().remove(&node);
|
||||
}
|
||||
|
||||
had_animations_to_expire
|
||||
}
|
||||
|
||||
|
|
|
@ -466,25 +466,8 @@ trait PrivateMatchMethods: TNode
|
|||
|
||||
// Finish any expired transitions.
|
||||
let this_opaque = self.opaque();
|
||||
let had_animations_to_expire;
|
||||
{
|
||||
let all_expired_animations = context.expired_animations.read().unwrap();
|
||||
let animations_to_expire = all_expired_animations.get(&this_opaque);
|
||||
had_animations_to_expire = animations_to_expire.is_some();
|
||||
if let Some(ref animations) = animations_to_expire {
|
||||
for animation in *animations {
|
||||
// NB: Expiring a keyframes animation is the same as not
|
||||
// applying the keyframes style to it, so we're safe.
|
||||
if let Animation::Transition(_, _, ref frame, _) = *animation {
|
||||
frame.property_animation.update(Arc::make_mut(style), 1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if had_animations_to_expire {
|
||||
context.expired_animations.write().unwrap().remove(&this_opaque);
|
||||
}
|
||||
let had_animations_to_expire =
|
||||
animation::complete_expired_transitions(this_opaque, style, context);
|
||||
|
||||
// Merge any running transitions into the current style, and cancel them.
|
||||
let had_running_animations = context.running_animations
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
//! Traversing the DOM tree; the bloom filter.
|
||||
|
||||
use animation;
|
||||
use context::{SharedStyleContext, StyleContext};
|
||||
use dom::{OpaqueNode, TElement, TNode, TRestyleDamage, UnsafeNode};
|
||||
use matching::{ApplicableDeclarations, ElementMatchMethods, MatchMethods, StyleSharingResult};
|
||||
|
@ -11,6 +12,7 @@ use selector_impl::SelectorImplExt;
|
|||
use selectors::Element;
|
||||
use selectors::bloom::BloomFilter;
|
||||
use std::cell::RefCell;
|
||||
use std::sync::Arc;
|
||||
use tid::tid;
|
||||
use util::opts;
|
||||
use values::HasViewportPercentage;
|
||||
|
@ -256,6 +258,13 @@ pub fn recalc_style_at<'a, N, C>(context: &'a C,
|
|||
node.set_restyle_damage(damage);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Finish any expired transitions.
|
||||
animation::complete_expired_transitions(
|
||||
node.opaque(),
|
||||
node.mutate_data().unwrap().style.as_mut().unwrap(),
|
||||
context.shared_context()
|
||||
);
|
||||
}
|
||||
|
||||
let unsafe_layout_node = node.to_unsafe();
|
||||
|
|
|
@ -6150,6 +6150,12 @@
|
|||
"url": "/_mozilla/css/animations/basic-linear-width.html"
|
||||
}
|
||||
],
|
||||
"css/animations/basic-transition.html": [
|
||||
{
|
||||
"path": "css/animations/basic-transition.html",
|
||||
"url": "/_mozilla/css/animations/basic-transition.html"
|
||||
}
|
||||
],
|
||||
"css/empty-keyframes.html": [
|
||||
{
|
||||
"path": "css/empty-keyframes.html",
|
||||
|
|
34
tests/wpt/mozilla/tests/css/animations/basic-transition.html
Normal file
34
tests/wpt/mozilla/tests/css/animations/basic-transition.html
Normal file
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Transition test</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#check-me, #check-me-2 {
|
||||
background-color: #F00;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transition: background-color 1s linear;
|
||||
}
|
||||
#check-me-2 {
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
<div id=check-me><span>a</span></div>
|
||||
<script>
|
||||
var div = document.getElementById('check-me');
|
||||
var span = div.childNodes[0];
|
||||
async_test(function(t) {
|
||||
window.addEventListener('load', function() {
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(255, 0, 0)');
|
||||
div.id = "check-me-2";
|
||||
requestAnimationFrame(function() {
|
||||
var test = new window.TestBinding();
|
||||
test.advanceClock(2000);
|
||||
span.innerHTML = "a";
|
||||
assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(0, 0, 0)');
|
||||
t.done();
|
||||
});
|
||||
})
|
||||
})
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue