зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1875546 - [css-properties-values-api] Support interpolating custom properties in transitions r=firefox-style-system-reviewers,emilio
There are still some unhandled edge cases, like making the removal of an
@property rule not interpolate (bug 1885798).
Also, a todo is added to more granularly handle custom properties in
is_discrete_animatable (bug 1885995).
Differential Revision: https://phabricator.services.mozilla.com/D204863
This commit is contained in:
Zach Hoffman
Родитель
e18451e5d9
Коммит
09b59a7de6
|
|
@ -1273,9 +1273,10 @@ pub fn start_transitions_if_applicable(
|
|||
) -> PropertyDeclarationIdSet {
|
||||
let mut properties_that_transition = PropertyDeclarationIdSet::default();
|
||||
for transition in new_style.transition_properties() {
|
||||
let physical_property = PropertyDeclarationId::Longhand(
|
||||
transition.longhand_id.to_physical(new_style.writing_mode),
|
||||
);
|
||||
let physical_property = transition
|
||||
.property
|
||||
.as_borrowed()
|
||||
.to_physical(new_style.writing_mode);
|
||||
if properties_that_transition.contains(physical_property) {
|
||||
continue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -889,7 +889,11 @@ impl<'le> GeckoElement<'le> {
|
|||
AnimationValue::from_computed_values(property_declaration_id, before_change_style);
|
||||
let to = AnimationValue::from_computed_values(property_declaration_id, after_change_style);
|
||||
|
||||
debug_assert_eq!(to.is_some(), from.is_some());
|
||||
// If the declaration contains a custom property and getComputedValue was previously called
|
||||
// before that custom property was defined, `from` will be `None` here.
|
||||
debug_assert!(
|
||||
to.is_some() == from.is_some() || matches!(to, Some(AnimationValue::Custom(..)))
|
||||
);
|
||||
|
||||
from != to
|
||||
}
|
||||
|
|
@ -1551,14 +1555,13 @@ impl<'le> TElement for GeckoElement<'le> {
|
|||
|
||||
let mut transitions_to_keep = PropertyDeclarationIdSet::default();
|
||||
for transition_property in after_change_style.transition_properties() {
|
||||
let physical_longhand = PropertyDeclarationId::Longhand(
|
||||
transition_property
|
||||
.longhand_id
|
||||
.to_physical(after_change_style.writing_mode),
|
||||
);
|
||||
transitions_to_keep.insert(physical_longhand);
|
||||
let physical_property = transition_property
|
||||
.property
|
||||
.as_borrowed()
|
||||
.to_physical(after_change_style.writing_mode);
|
||||
transitions_to_keep.insert(physical_property);
|
||||
if self.needs_transitions_update_per_property(
|
||||
physical_longhand,
|
||||
physical_property,
|
||||
after_change_ui_style
|
||||
.transition_combined_duration_at(transition_property.index)
|
||||
.seconds(),
|
||||
|
|
|
|||
|
|
@ -737,7 +737,7 @@ impl<'a> TransitionPropertyIterator<'a> {
|
|||
/// A single iteration of the TransitionPropertyIterator.
|
||||
pub struct TransitionPropertyIteration {
|
||||
/// The id of the longhand for this property.
|
||||
pub longhand_id: LonghandId,
|
||||
pub property: OwnedPropertyDeclarationId,
|
||||
|
||||
/// The index of this property in the list of transition properties for this
|
||||
/// iterator's style.
|
||||
|
|
@ -753,7 +753,7 @@ impl<'a> Iterator for TransitionPropertyIterator<'a> {
|
|||
if let Some(ref mut longhand_iterator) = self.longhand_iterator {
|
||||
if let Some(longhand_id) = longhand_iterator.next() {
|
||||
return Some(TransitionPropertyIteration {
|
||||
longhand_id,
|
||||
property: OwnedPropertyDeclarationId::Longhand(longhand_id),
|
||||
index: self.index_range.start - 1,
|
||||
});
|
||||
}
|
||||
|
|
@ -766,7 +766,7 @@ impl<'a> Iterator for TransitionPropertyIterator<'a> {
|
|||
match id.longhand_or_shorthand() {
|
||||
Ok(longhand_id) => {
|
||||
return Some(TransitionPropertyIteration {
|
||||
longhand_id,
|
||||
property: OwnedPropertyDeclarationId::Longhand(longhand_id),
|
||||
index,
|
||||
});
|
||||
},
|
||||
|
|
@ -778,7 +778,13 @@ impl<'a> Iterator for TransitionPropertyIterator<'a> {
|
|||
},
|
||||
}
|
||||
}
|
||||
TransitionProperty::Custom(..) | TransitionProperty::Unsupported(..) => {}
|
||||
TransitionProperty::Custom(name) => {
|
||||
return Some(TransitionPropertyIteration {
|
||||
property: OwnedPropertyDeclarationId::Custom(name),
|
||||
index,
|
||||
})
|
||||
},
|
||||
TransitionProperty::Unsupported(..) => {},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1040,7 +1040,7 @@ impl<'a> PropertyDeclarationId<'a> {
|
|||
pub fn is_discrete_animatable(&self) -> bool {
|
||||
match self {
|
||||
Self::Longhand(longhand) => longhand.is_discrete_animatable(),
|
||||
// TODO(bug 1846516): Refine this?
|
||||
// TODO(bug 1885995): Refine this.
|
||||
Self::Custom(_) => true,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1211,6 +1211,11 @@ fn is_transitionable(prop: PropertyDeclarationId, behavior: computed::Transition
|
|||
if !prop.is_animatable() {
|
||||
return false;
|
||||
}
|
||||
// TODO(bug 1885995): Return `false` in is_discrete_animatable for interpolatable custom
|
||||
// property types.
|
||||
if matches!(prop, PropertyDeclarationId::Custom(..)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
match behavior {
|
||||
computed::TransitionBehavior::Normal => !prop.is_discrete_animatable(),
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-angle.html]
|
||||
[A custom property of type <angle> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-color.html]
|
||||
[A custom property of type <color> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-custom-ident.html]
|
||||
[A custom property of type <custom-ident> can yield a discrete CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-image.html]
|
||||
[A custom property of type <image> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-inherited-used-by-standard-property.html]
|
||||
[Running a transition an inherited CSS variable is reflected on a standard property using that variable as a value]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-integer.html]
|
||||
[A custom property of type <integer> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-length-percentage.html]
|
||||
[A custom property of type <length-percentage> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-length.html]
|
||||
[A custom property of type <length> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-mismatched-inherited-property-numbers.html]
|
||||
[Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition when the transition properties are set on a parent and the child inherits.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
[custom-property-transition-mismatched-list.html]
|
||||
[A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <length>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <integer>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <length-percentage># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <image>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <percentage># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <length-percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <color># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <length># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <image># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <custom-ident># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <time>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <color>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <integer># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <resolution>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <custom-ident>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <number>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <time># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <number># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <percentage>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <url># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
||||
[A custom property of type <resolution># yields a discrete CSS Transition if the lists do not contain the same number of values]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-mismatched-property-numbers.html]
|
||||
[Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-non-inherited-used-by-standard-property.html]
|
||||
[Running a transition a non-inherited CSS variable is reflected on a standard property using that variable as a value]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-number.html]
|
||||
[A custom property of type <number> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-percentage.html]
|
||||
[A custom property of type <percentage> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-resolution.html]
|
||||
[A custom property of type <resolution> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-time.html]
|
||||
[A custom property of type <time> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-transform-function-matrix.html]
|
||||
[A custom property of type <transform-function> can yield a CSS Transition between different function types]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-transform-function.html]
|
||||
[A custom property of type <transform-function> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-transform-list-matrix.html]
|
||||
[A custom property of type <transform-list> can yield a CSS Transition between different function types]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-transform-list.html]
|
||||
[A custom property of type <transform-list> can yield a CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[custom-property-transition-url.html]
|
||||
[A custom property of type <url> can yield a discrete CSS Transition]
|
||||
expected: FAIL
|
||||
|
|
@ -1,16 +1,7 @@
|
|||
[at-property-animation.html]
|
||||
[Transition triggered by initial value change]
|
||||
expected: FAIL
|
||||
|
||||
[No transition when removing @property rule]
|
||||
expected: FAIL
|
||||
|
||||
[Transitioning from specified value]
|
||||
expected: FAIL
|
||||
|
||||
[Transitioning from initial value]
|
||||
expected: FAIL
|
||||
|
||||
[JS-originated animation setting "currentColor" for a custom property on a keyframe is responsive to changing "color" on the parent.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
prefs: [layout.css.properties-and-values.enabled:true]
|
||||
|
|
@ -2,9 +2,6 @@
|
|||
[CSS Transitions: property <--my-angle> from [100deg\] to [calc(sign(20rem - 20px) * 180deg)\] at (-1) should be [20deg\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <--my-angle> from [100deg\] to [calc(sign(20rem - 20px) * 180deg)\] at (0) should be [100deg\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <--my-angle> from [100deg\] to [calc(sign(20rem - 20px) * 180deg)\] at (0.125) should be [110deg\]]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче