Skip to content

Commit

Permalink
Better computation of animation keyframes
Browse files Browse the repository at this point in the history 
This begins to address #26625 by properly applying CSS variables during
keyframe computation and no longer using `apply_declarations`. Instead,
walk the declarations, combining them into IntermediateComputedKeyframe,
maintaining declarations that modify CSS custom properties. Then compute
a set of AnimationValues for each keyframe and use those to produce
interpolated animation values.
  • Loading branch information
@mrobinson
mrobinson committed Jun 5, 2020
1 parent 83fa1b9 commit b875f14
Show file tree
Hide file tree
Showing 69 changed files with 264 additions and 1,604 deletions.
4 changes: 4 additions & 0 deletions components/layout_thread/dom_wrapper.rs
View file
Expand Up @@ -341,6 +341,10 @@ impl<'ld> TDocument for ServoLayoutDocument<'ld> {
fn is_html_document(&self) -> bool {
self.document.is_html_document_for_layout()
}

fn shared_lock(&self) -> &StyleSharedRwLock {
self.document.style_shared_lock()
}
}

impl<'ld> ServoLayoutDocument<'ld> {
Expand Down
4 changes: 4 additions & 0 deletions components/layout_thread_2020/dom_wrapper.rs
View file
Expand Up @@ -349,6 +349,10 @@ impl<'ld> TDocument for ServoLayoutDocument<'ld> {
fn is_html_document(&self) -> bool {
self.document.is_html_document_for_layout()
}

fn shared_lock(&self) -> &StyleSharedRwLock {
self.document.style_shared_lock()
}
}

impl<'ld> ServoLayoutDocument<'ld> {
Expand Down
349 changes: 230 additions & 119 deletions components/style/animation.rs
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion components/style/dom.rs
View file
Expand Up @@ -17,7 +17,7 @@ use crate::font_metrics::FontMetricsProvider;
use crate::media_queries::Device;
use crate::properties::{AnimationRules, ComputedValues, PropertyDeclarationBlock};
use crate::selector_parser::{AttrValue, Lang, PseudoElement, SelectorImpl};
use crate::shared_lock::Locked;
use crate::shared_lock::{Locked, SharedRwLock};
use crate::stylist::CascadeData;
use crate::traversal_flags::TraversalFlags;
use crate::{Atom, LocalName, Namespace, WeakAtom};
Expand Down Expand Up @@ -128,6 +128,9 @@ pub trait TDocument: Sized + Copy + Clone {
{
Err(())
}

/// This document's shared lock.
fn shared_lock(&self) -> &SharedRwLock;
}

/// The `TNode` trait. This is the main generic trait over which the style
Expand Down
6 changes: 5 additions & 1 deletion components/style/gecko/wrapper.rs
View file
Expand Up @@ -64,7 +64,7 @@ use crate::properties::{ComputedValues, LonghandId};
use crate::properties::{Importance, PropertyDeclaration, PropertyDeclarationBlock};
use crate::rule_tree::CascadeLevel as ServoCascadeLevel;
use crate::selector_parser::{AttrValue, HorizontalDirection, Lang};
use crate::shared_lock::Locked;
use crate::shared_lock::{Locked, SharedRwLock};
use crate::string_cache::{Atom, Namespace, WeakAtom, WeakNamespace};
use crate::stylist::CascadeData;
use crate::values::computed::font::GenericFontFamily;
Expand Down Expand Up @@ -139,6 +139,10 @@ impl<'ld> TDocument for GeckoDocument<'ld> {
bindings::Gecko_Document_GetElementsWithId(self.0, id.as_ptr())
}))
}

fn shared_lock(&self) -> &SharedRwLock {
&GLOBAL_STYLE_DATA.shared_lock
}
}

/// A simple wrapper over `ShadowRoot`.
Expand Down
13 changes: 10 additions & 3 deletions components/style/matching.rs
View file
Expand Up @@ -20,6 +20,8 @@ use crate::properties::ComputedValues;
use crate::rule_tree::{CascadeLevel, StrongRuleNode};
use crate::selector_parser::{PseudoElement, RestyleDamage};
use crate::style_resolver::ResolvedElementStyles;
use crate::style_resolver::{PseudoElementResolution, StyleResolverForElement};
use crate::stylist::RuleInclusion;
use crate::traversal_flags::TraversalFlags;
use selectors::matching::ElementSelectorFlags;
use servo_arc::{Arc, ArcBorrow};
Expand Down Expand Up @@ -199,8 +201,6 @@ trait PrivateMatchMethods: TElement {
primary_style: &Arc<ComputedValues>,
) -> Option<Arc<ComputedValues>> {
use crate::context::CascadeInputs;
use crate::style_resolver::{PseudoElementResolution, StyleResolverForElement};
use crate::stylist::RuleInclusion;

let rule_node = primary_style.rules();
let without_transition_rules = context
Expand Down Expand Up @@ -455,11 +455,18 @@ trait PrivateMatchMethods: TElement {
// for all the keyframes. We only want to do this if we think that there's a
// chance that the animations really changed.
if needs_animations_update {
let mut resolver = StyleResolverForElement::new(
*self,
context,
RuleInclusion::All,
PseudoElementResolution::IfApplicable,
);

animation_set.update_animations_for_new_style::<Self>(
*self,
&shared_context,
&new_values,
&context.thread_local.font_metrics_provider,
&mut resolver,
);
}

Expand Down
7 changes: 7 additions & 0 deletions components/style/properties/declaration_block.rs
View file
Expand Up @@ -321,6 +321,13 @@ impl PropertyDeclarationBlock {
self.longhands.contains_any_reset()
}

/// Returns a `LonghandIdSet` representing the properties that are changed in
/// this block.
#[inline]
pub fn longhands(&self) -> &LonghandIdSet {
&self.longhands
}

/// Get a declaration for a given property.
///
/// NOTE: This is linear time in the case of custom properties or in the
Expand Down
36 changes: 0 additions & 36 deletions ...s/wpt/metadata-layout-2020/css/CSS2/linebox/animations/line-height-interpolation.html.ini
View file
Expand Up @@ -335,9 +335,6 @@
[CSS Animations: property <line-height> from [14px\] to [normal\] at (0.5) should be [normal\]]
expected: FAIL

[CSS Animations: property <line-height> from [inherit\] to [20px\] at (0) should be [30px\]]
expected: FAIL

[CSS Animations: property <line-height> from [4\] to [14px\] at (0.3) should be [4\]]
expected: FAIL

Expand Down Expand Up @@ -365,15 +362,9 @@
[CSS Animations: property <line-height> from [normal\] to [4\] at (0.5) should be [4\]]
expected: FAIL

[CSS Animations: property <line-height> from [unset\] to [20px\] at (-0.3) should be [33px\]]
expected: FAIL

[CSS Animations: property <line-height> from [initial\] to [20px\] at (0.6) should be [20px\]]
expected: FAIL

[CSS Animations: property <line-height> from [unset\] to [20px\] at (0) should be [30px\]]
expected: FAIL

[CSS Animations: property <line-height> from [4\] to [14q\] at (0) should be [4\]]
expected: FAIL

Expand Down Expand Up @@ -404,9 +395,6 @@
[CSS Animations: property <line-height> from [normal\] to [14px\] at (0) should be [normal\]]
expected: FAIL

[CSS Animations: property <line-height> from [unset\] to [20px\] at (0.3) should be [27px\]]
expected: FAIL

[CSS Animations: property <line-height> from [4\] to [14q\] at (0.6) should be [14q\]]
expected: FAIL

Expand All @@ -428,9 +416,6 @@
[CSS Animations: property <line-height> from [14px\] to [normal\] at (0.6) should be [normal\]]
expected: FAIL

[CSS Animations: property <line-height> from [inherit\] to [20px\] at (0.6) should be [24px\]]
expected: FAIL

[CSS Animations: property <line-height> from [14px\] to [normal\] at (0.3) should be [14px\]]
expected: FAIL

Expand Down Expand Up @@ -473,27 +458,15 @@
[CSS Animations: property <line-height> from [normal\] to [4\] at (1) should be [4\]]
expected: FAIL

[CSS Animations: property <line-height> from [inherit\] to [20px\] at (1.5) should be [15px\]]
expected: FAIL

[CSS Animations: property <line-height> from [14q\] to [normal\] at (1) should be [normal\]]
expected: FAIL

[CSS Animations: property <line-height> from [unset\] to [20px\] at (1.5) should be [15px\]]
expected: FAIL

[CSS Animations: property <line-height> from [initial\] to [20px\] at (1.5) should be [20px\]]
expected: FAIL

[CSS Animations: property <line-height> from [unset\] to [20px\] at (0.6) should be [24px\]]
expected: FAIL

[CSS Animations: property <line-height> from [4\] to [normal\] at (1) should be [normal\]]
expected: FAIL

[CSS Animations: property <line-height> from [inherit\] to [20px\] at (-1) should be [40px\]]
expected: FAIL

[CSS Animations: property <line-height> from [14px\] to [normal\] at (0) should be [14px\]]
expected: FAIL

Expand All @@ -503,9 +476,6 @@
[CSS Animations: property <line-height> from [14px\] to [normal\] at (1.5) should be [normal\]]
expected: FAIL

[CSS Animations: property <line-height> from [inherit\] to [20px\] at (0.3) should be [27px\]]
expected: FAIL

[CSS Animations: property <line-height> from [normal\] to [14px\] at (0.6) should be [14px\]]
expected: FAIL

Expand All @@ -521,9 +491,6 @@
[CSS Animations: property <line-height> from [initial\] to [20px\] at (0.5) should be [20px\]]
expected: FAIL

[CSS Animations: property <line-height> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
expected: FAIL

[CSS Animations: property <line-height> from [normal\] to [4\] at (-0.3) should be [normal\]]
expected: FAIL

Expand Down Expand Up @@ -554,6 +521,3 @@
[CSS Animations: property <line-height> from [normal\] to [14px\] at (1) should be [14px\]]
expected: FAIL

[CSS Animations: property <line-height> from [unset\] to [20px\] at (-1) should be [40px\]]
expected: FAIL

15 changes: 0 additions & 15 deletions ...tadata-layout-2020/css/css-backgrounds/animations/background-color-interpolation.html.ini
View file
Expand Up @@ -128,18 +128,3 @@
[Web Animations: property <background-color> from neutral to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
expected: FAIL

[CSS Animations: property <background-color> from [inherit\] to [green\] at (0.3) should be [rgb(167, 205, 167)\]]
expected: FAIL

[CSS Animations: property <background-color> from [inherit\] to [green\] at (-0.3) should be [rgb(255, 255, 255)\]]
expected: FAIL

[CSS Animations: property <background-color> from [inherit\] to [green\] at (0) should be [rgb(238, 238, 238)\]]
expected: FAIL

[CSS Animations: property <background-color> from [inherit\] to [green\] at (0.6) should be [rgb(95, 172, 95)\]]
expected: FAIL

[CSS Animations: property <background-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 73, 0)\]]
expected: FAIL

18 changes: 0 additions & 18 deletions ...a-layout-2020/css/css-backgrounds/animations/background-position-x-interpolation.html.ini
View file
Expand Up @@ -83,21 +83,3 @@
[Web Animations: property <background-position-x> from [inherit\] to [80px\] at (0.25) should be [65px\]]
expected: FAIL

[CSS Animations: property <background-position-x> from [inherit\] to [80px\] at (-0.25) should be [55px\]]
expected: FAIL

[CSS Animations: property <background-position-x> from [inherit\] to [80px\] at (0.75) should be [75px\]]
expected: FAIL

[CSS Animations: property <background-position-x> from [inherit\] to [80px\] at (1.25) should be [85px\]]
expected: FAIL

[CSS Animations: property <background-position-x> from [inherit\] to [80px\] at (0.5) should be [70px\]]
expected: FAIL

[CSS Animations: property <background-position-x> from [inherit\] to [80px\] at (0) should be [60px\]]
expected: FAIL

[CSS Animations: property <background-position-x> from [inherit\] to [80px\] at (0.25) should be [65px\]]
expected: FAIL

18 changes: 0 additions & 18 deletions ...a-layout-2020/css/css-backgrounds/animations/background-position-y-interpolation.html.ini
View file
Expand Up @@ -83,21 +83,3 @@
[Web Animations: property <background-position-y> from neutral to [80px\] at (0.25) should be [50px\]]
expected: FAIL

[CSS Animations: property <background-position-y> from [inherit\] to [80px\] at (0) should be [60px\]]
expected: FAIL

[CSS Animations: property <background-position-y> from [inherit\] to [80px\] at (-0.25) should be [55px\]]
expected: FAIL

[CSS Animations: property <background-position-y> from [inherit\] to [80px\] at (1.25) should be [85px\]]
expected: FAIL

[CSS Animations: property <background-position-y> from [inherit\] to [80px\] at (0.5) should be [70px\]]
expected: FAIL

[CSS Animations: property <background-position-y> from [inherit\] to [80px\] at (0.75) should be [75px\]]
expected: FAIL

[CSS Animations: property <background-position-y> from [inherit\] to [80px\] at (0.25) should be [65px\]]
expected: FAIL

15 changes: 0 additions & 15 deletions ...t/metadata-layout-2020/css/css-backgrounds/animations/border-color-interpolation.html.ini
View file
Expand Up @@ -161,18 +161,3 @@
[Web Animations: property <border-top-color> from [white\] to [orange\] at (0.3) should be [rgb(255, 228, 179)\]]
expected: FAIL

[CSS Animations: property <border-top-color> from [inherit\] to [orange\] at (0.3) should be [rgb(255, 228, 179)\]]
expected: FAIL

[CSS Animations: property <border-top-color> from [inherit\] to [orange\] at (1.5) should be [rgb(255, 120, 0)\]]
expected: FAIL

[CSS Animations: property <border-top-color> from [inherit\] to [orange\] at (0) should be [rgb(255, 255, 255)\]]
expected: FAIL

[CSS Animations: property <border-top-color> from [inherit\] to [orange\] at (0.6) should be [rgb(255, 201, 102)\]]
expected: FAIL

[CSS Animations: property <border-top-color> from [inherit\] to [orange\] at (-0.3) should be [rgb(255, 255, 255)\]]
expected: FAIL

15 changes: 0 additions & 15 deletions ...ata-layout-2020/css/css-backgrounds/animations/border-image-outset-interpolation.html.ini
View file
Expand Up @@ -125,18 +125,3 @@
[Web Animations: property <border-image-outset> from [0\] to [1\] at (-0.3) should be [0\]]
expected: FAIL

[CSS Animations: property <border-image-outset> from [inherit\] to [2px\] at (0.6) should be [5.2px\]]
expected: FAIL

[CSS Animations: property <border-image-outset> from [inherit\] to [2px\] at (0.3) should be [7.6px\]]
expected: FAIL

[CSS Animations: property <border-image-outset> from [inherit\] to [2px\] at (1.5) should be [0px\]]
expected: FAIL

[CSS Animations: property <border-image-outset> from [inherit\] to [2px\] at (-0.3) should be [12.4px\]]
expected: FAIL

[CSS Animations: property <border-image-outset> from [inherit\] to [2px\] at (0) should be [10px\]]
expected: FAIL

18 changes: 0 additions & 18 deletions ...data-layout-2020/css/css-backgrounds/animations/border-image-slice-interpolation.html.ini
View file
Expand Up @@ -302,15 +302,9 @@
[CSS Animations: property <border-image-slice> from [0% fill\] to [50%\] at (1.5) should be [50%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [inherit\] to [10%\] at (0.6) should be [26%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [0% fill\] to [50%\] at (0.3) should be [0% fill\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [inherit\] to [10%\] at (0) should be [50%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [50% fill\] to [100 fill\] at (1.5) should be [100 fill\]]
expected: FAIL

Expand All @@ -326,12 +320,6 @@
[CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill\] to [40% 50 60% 70\] at (1) should be [40% 50 60% 70\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [inherit\] to [10%\] at (0.5) should be [30%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [inherit\] to [10%\] at (-0.3) should be [62%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [0% 10 20 30 fill\] to [40 50 60% 70\] at (0.3) should be [0% 10 20 30 fill\]]
expected: FAIL

Expand All @@ -350,9 +338,6 @@
[CSS Animations: property <border-image-slice> from [50% fill\] to [100 fill\] at (0) should be [50% fill\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [inherit\] to [10%\] at (0.3) should be [38%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill\] to [40% 50 60% 70\] at (0) should be [0% 10 20% 30 fill\]]
expected: FAIL

Expand All @@ -368,9 +353,6 @@
[CSS Animations: property <border-image-slice> from [0% 10 20 30 fill\] to [40 50 60% 70\] at (0) should be [0% 10 20 30 fill\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [inherit\] to [10%\] at (1.5) should be [0%\]]
expected: FAIL

[CSS Animations: property <border-image-slice> from [0% fill\] to [50%\] at (0) should be [0% fill\]]
expected: FAIL

Expand Down
9 changes: 0 additions & 9 deletions ...ata-layout-2020/css/css-backgrounds/animations/border-image-source-interpolation.html.ini
View file
Expand Up @@ -146,15 +146,6 @@
[Web Animations: property <border-image-source> from [linear-gradient(-45deg, red, yellow)\] to [linear-gradient(45deg, blue, orange)\] at (-0.3) should be [linear-gradient(-45deg, red, yellow)\]]
expected: FAIL

[CSS Animations: property <border-image-source> from [inherit\] to [url(../support/orange_color.png)\] at (-0.3) should be [inherit\]]
expected: FAIL

[CSS Animations: property <border-image-source> from [inherit\] to [url(../support/orange_color.png)\] at (0) should be [inherit\]]
expected: FAIL

[CSS Animations: property <border-image-source> from [inherit\] to [url(../support/orange_color.png)\] at (0.3) should be [inherit\]]
expected: FAIL

[CSS Transitions: property <border-image-source> from [inherit\] to [url(../support/orange_color.png)\] at (-0.3) should be [url(../support/orange_color.png)\]]
expected: FAIL

Expand Down

0 comments on commit b875f14

Please sign in to comment.