Skip to content

Commit 0ac0e74

Browse files
BorisChiouaditj
authored andcommitted
style: Implement Animate for track lists on grid-template-{columns|rows}.
Based on https://bugzilla.mozilla.org/show_bug.cgi?id=1348519#c6 and w3c/csswg-drafts#3201: Currently grid-template-rows/columns interpolate “per computed value”, which means that if the number of tracks differs, or any track changes to/from a particular keyword value to any other value, or if a line name is added/removed at any position, the entire track listing is interpolated as “discrete”. But we "agree" with two more granular options: 1. Check interpolation type per track, rather than for the entire list, before falling back to discrete. I.e. a length-percentage track can animate between two values while an adjacent auto track flips discretely to min-content. 2. Allow discrete interpolation of line name changes independently of track sizes. Besides, for the repeat() function, it's complicated to support interpolation between different repeat types (i.e. auto-fill, auto-fit) and different repeat counts, so we always fall-back to discrete if the first parameter of repeat() is different. Differential Revision: https://phabricator.services.mozilla.com/D16129
1 parent ab230f4 commit 0ac0e74

File tree

4 files changed

+191
-7
lines changed

4 files changed

+191
-7
lines changed

components/style/properties/longhands/position.mako.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,7 @@ ${helpers.predefined_type(
383383
spec="https://drafts.csswg.org/css-grid/#propdef-grid-template-%ss" % kind,
384384
boxed=True,
385385
flags="GETCS_NEEDS_LAYOUT_FLUSH",
386-
animation_value_type="discrete",
386+
animation_value_type="ComputedValue",
387387
)}
388388

389389
% endfor
Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this
3+
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4+
5+
//! Animation implementation for various grid-related types.
6+
7+
// Note: we can implement Animate on their generic types directly, but in this case we need to
8+
// make sure two trait bounds, L: Clone and I: PartialEq, are satisfied on almost all the
9+
// grid-related types and their other trait implementations because Animate needs them. So in
10+
// order to avoid adding these two trait bounds (or maybe more..) everywhere, we implement
11+
// Animate for the computed types, instead of the generic types.
12+
13+
use super::{Animate, Procedure, ToAnimatedZero};
14+
use crate::values::computed::{GridTemplateComponent, TrackList, TrackSize};
15+
use crate::values::computed::Integer;
16+
use crate::values::computed::LengthPercentage;
17+
use crate::values::distance::{ComputeSquaredDistance, SquaredDistance};
18+
use crate::values::generics::grid as generics;
19+
20+
fn discrete<T: Clone>(from: &T, to: &T, procedure: Procedure) -> Result<T, ()> {
21+
if let Procedure::Interpolate { progress } = procedure {
22+
Ok(if progress < 0.5 { from.clone() } else { to.clone() })
23+
} else {
24+
Err(())
25+
}
26+
}
27+
28+
fn animate_with_discrete_fallback<T: Animate + Clone>(
29+
from: &T,
30+
to: &T,
31+
procedure: Procedure
32+
) -> Result<T, ()> {
33+
from.animate(to, procedure).or_else(|_| discrete(from, to, procedure))
34+
}
35+
36+
impl Animate for TrackSize {
37+
fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
38+
match (self, other) {
39+
(&generics::TrackSize::Breadth(ref from),
40+
&generics::TrackSize::Breadth(ref to)) => {
41+
animate_with_discrete_fallback(from, to, procedure)
42+
.map(generics::TrackSize::Breadth)
43+
},
44+
(&generics::TrackSize::Minmax(ref from_min, ref from_max),
45+
&generics::TrackSize::Minmax(ref to_min, ref to_max)) => {
46+
Ok(generics::TrackSize::Minmax(
47+
animate_with_discrete_fallback(from_min, to_min, procedure)?,
48+
animate_with_discrete_fallback(from_max, to_max, procedure)?,
49+
))
50+
},
51+
(&generics::TrackSize::FitContent(ref from),
52+
&generics::TrackSize::FitContent(ref to)) => {
53+
animate_with_discrete_fallback(from, to, procedure)
54+
.map(generics::TrackSize::FitContent)
55+
},
56+
(_, _) => discrete(self, other, procedure),
57+
}
58+
}
59+
}
60+
61+
impl Animate for generics::TrackRepeat<LengthPercentage, Integer>
62+
where
63+
generics::RepeatCount<Integer>: PartialEq,
64+
{
65+
fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
66+
// If the keyword, auto-fit/fill, is the same it can result in different
67+
// number of tracks. For both auto-fit/fill, the number of columns isn't
68+
// known until you do layout since it depends on the container size, item
69+
// placement and other factors, so we cannot do the correct interpolation
70+
// by computed values. Therefore, return Err(()) if it's keywords. If it
71+
// is Number, we support animation only if the count is the same and the
72+
// length of track_sizes is the same.
73+
// https://github.com/w3c/csswg-drafts/issues/3503
74+
match (&self.count, &other.count) {
75+
(&generics::RepeatCount::Number(from),
76+
&generics::RepeatCount::Number(to)) if from == to => (),
77+
(_, _) => return Err(()),
78+
}
79+
80+
// The length of track_sizes should be matched.
81+
if self.track_sizes.len() != other.track_sizes.len() {
82+
return Err(());
83+
}
84+
85+
let count = self.count;
86+
let track_sizes = self.track_sizes
87+
.iter()
88+
.zip(other.track_sizes.iter())
89+
.map(|(a, b)| a.animate(b, procedure))
90+
.collect::<Result<Vec<_>, _>>()?;
91+
92+
// The length of |line_names| is always 0 or N+1, where N is the length
93+
// of |track_sizes|. Besides, <line-names> is always discrete.
94+
let line_names = discrete(&self.line_names, &other.line_names, procedure)?;
95+
96+
Ok(generics::TrackRepeat { count, line_names, track_sizes })
97+
}
98+
}
99+
100+
impl Animate for TrackList {
101+
// Based on https://github.com/w3c/csswg-drafts/issues/3201:
102+
// 1. Check interpolation type per track, so we need to handle discrete animations
103+
// in TrackSize, so any Err(()) returned from TrackSize doesn't make all TrackSize
104+
// fallback to discrete animation.
105+
// 2. line-names is always discrete.
106+
fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
107+
if self.values.len() != other.values.len() {
108+
return Err(());
109+
}
110+
111+
if self.list_type != other.list_type {
112+
return Err(());
113+
}
114+
115+
// For now, repeat(auto-fill/auto-fit, ...) is not animatable. TrackRepeat will
116+
// return Err(()) if we use keywords. Therefore, we can early return here to avoid
117+
// traversing |values| in <auto-track-list>. This may be updated in the future.
118+
// https://github.com/w3c/csswg-drafts/issues/3503
119+
if let generics::TrackListType::Auto(_) = self.list_type {
120+
return Err(());
121+
}
122+
123+
let list_type = self.list_type;
124+
let auto_repeat = self.auto_repeat.animate(&other.auto_repeat, procedure)?;
125+
let values = self.values
126+
.iter()
127+
.zip(other.values.iter())
128+
.map(|(a, b)| a.animate(b, procedure))
129+
.collect::<Result<Vec<_>, _>>()?;
130+
// The length of |line_names| is always 0 or N+1, where N is the length
131+
// of |track_sizes|. Besides, <line-names> is always discrete.
132+
let line_names = discrete(&self.line_names, &other.line_names, procedure)?;
133+
134+
Ok(TrackList { list_type, values, line_names, auto_repeat })
135+
}
136+
}
137+
138+
impl ComputeSquaredDistance for GridTemplateComponent {
139+
#[inline]
140+
fn compute_squared_distance(&self, _other: &Self) -> Result<SquaredDistance, ()> {
141+
// TODO: Bug 1518585, we should implement ComputeSquaredDistance.
142+
Err(())
143+
}
144+
}
145+
146+
impl ToAnimatedZero for GridTemplateComponent {
147+
#[inline]
148+
fn to_animated_zero(&self) -> Result<Self, ()> {
149+
// It's not clear to get a zero grid track list based on the current definition
150+
// of spec, so we return Err(()) directly.
151+
Err(())
152+
}
153+
}

components/style/values/animated/mod.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ use std::cmp;
2323
pub mod color;
2424
pub mod effects;
2525
mod font;
26+
mod grid;
2627
mod length;
2728
mod svg;
2829
pub mod transform;

components/style/values/generics/grid.rs

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ impl Parse for GridLine<specified::Integer> {
151151
#[allow(missing_docs)]
152152
#[cfg_attr(feature = "servo", derive(Deserialize, Serialize))]
153153
#[derive(
154+
Animate,
154155
Clone,
155156
Copy,
156157
Debug,
@@ -172,7 +173,16 @@ pub enum TrackKeyword {
172173
/// avoid re-implementing it for the computed type.
173174
///
174175
/// <https://drafts.csswg.org/css-grid/#typedef-track-breadth>
175-
#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToComputedValue, ToCss)]
176+
#[derive(
177+
Animate,
178+
Clone,
179+
Debug,
180+
MallocSizeOf,
181+
PartialEq,
182+
SpecifiedValueInfo,
183+
ToComputedValue,
184+
ToCss,
185+
)]
176186
pub enum TrackBreadth<L> {
177187
/// The generic type is almost always a non-negative `<length-percentage>`
178188
Breadth(L),
@@ -481,12 +491,21 @@ impl<L: Clone> TrackRepeat<L, specified::Integer> {
481491
}
482492

483493
/// Track list values. Can be <track-size> or <track-repeat>
484-
#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToComputedValue, ToCss)]
494+
#[derive(
495+
Animate,
496+
Clone,
497+
Debug,
498+
MallocSizeOf,
499+
PartialEq,
500+
SpecifiedValueInfo,
501+
ToComputedValue,
502+
ToCss
503+
)]
485504
pub enum TrackListValue<LengthPercentage, Integer> {
486505
/// A <track-size> value.
487-
TrackSize(TrackSize<LengthPercentage>),
506+
TrackSize(#[animation(field_bound)] TrackSize<LengthPercentage>),
488507
/// A <track-repeat> value.
489-
TrackRepeat(TrackRepeat<LengthPercentage, Integer>),
508+
TrackRepeat(#[animation(field_bound)] TrackRepeat<LengthPercentage, Integer>),
490509
}
491510

492511
/// The type of a `<track-list>` as determined during parsing.
@@ -692,13 +711,24 @@ impl ToCss for LineNameList {
692711
/// Variants for `<grid-template-rows> | <grid-template-columns>`
693712
/// Subgrid deferred to Level 2 spec due to lack of implementation.
694713
/// But it's implemented in gecko, so we have to as well.
695-
#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToComputedValue, ToCss)]
714+
#[derive(
715+
Animate,
716+
Clone,
717+
Debug,
718+
MallocSizeOf,
719+
PartialEq,
720+
SpecifiedValueInfo,
721+
ToComputedValue,
722+
ToCss
723+
)]
696724
pub enum GridTemplateComponent<L, I> {
697725
/// `none` value.
698726
None,
699727
/// The grid `<track-list>`
700-
TrackList(#[compute(field_bound)] TrackList<L, I>),
728+
TrackList(#[animation(field_bound)] #[compute(field_bound)] TrackList<L, I>),
701729
/// A `subgrid <line-name-list>?`
730+
/// TODO: Support animations for this after subgrid is addressed in [grid-2] spec.
731+
#[animation(error)]
702732
Subgrid(LineNameList),
703733
}
704734

0 commit comments

Comments
 (0)