style: Part 8: Hook scroll-timeline rule into Cascade data and use it for CSS animations

We hook the rule into cascade data, and so we can look it up by timeline
name. Now we only use StyleScrollDirection from @scroll-timeline rule.
`source` and `scroll-offsets` are skipped now and use the default values
instead because I'm pretty sure the syntax will be changed in Bug 1733260,
and `scroll-offsets` may be obsolete because the spec proposal intents to
make it be always 0% ~ 100%.

Also, add some reftests for the default `source` and `scroll-offsets`,
and different `orientation`s.

Besides, we disable at-scroll-timeline-start-end.html in Gecko because
we don't support start/end descriptors, and there are too many
intermittents in it.

Differential Revision: https://phabricator.services.mozilla.com/D126452

components/style/invalidation/stylesheets.rs

@@ -619,11 +619,12 @@ impl StylesheetInvalidationSet {
                     // existing elements.
                 }
             },
-            ScrollTimeline(..) => {
+            // TODO: Check if timeline name is referenced, though this might go away in bug 1737918.
-                // TODO: Bug 1676784: check if animation-timeline name is referenced.
+            ScrollTimeline(..) |
-                // Now we do nothing.
+            CounterStyle(..) |
-            },
+            Page(..) |
-            CounterStyle(..) | Page(..) | Viewport(..) | FontFeatureValues(..) => {
+            Viewport(..) |
+            FontFeatureValues(..) => {
                 debug!(
                     " > Found unsupported rule, marking the whole subtree \
                      invalid."

components/style/matching.rs

@@ -277,7 +277,7 @@ trait PrivateMatchMethods: TElement {
 
         let old_box_style = old_style.get_box();
 
-        let keyframes_could_have_changed = context
+        let keyframes_or_timeline_could_have_changed = context
             .shared
             .traversal_flags
             .contains(TraversalFlags::ForCSSRuleChanges);
@@ -287,9 +287,9 @@ trait PrivateMatchMethods: TElement {
         // element has or will have CSS animation style regardless of whether
         // the animation is running or not.
         //
-        // TODO: We should check which @keyframes were added/changed/deleted and
+        // TODO: We should check which @keyframes/@scroll-timeline were added/changed/deleted and
-        // update only animations corresponding to those @keyframes.
+        // update only animations corresponding to those @keyframes/@scroll-timeline.
-        if keyframes_could_have_changed {
+        if keyframes_or_timeline_could_have_changed {
             return true;
         }
 

components/style/stylist.rs

@@ -30,7 +30,9 @@ use crate::stylesheets::keyframes_rule::KeyframesAnimation;
 use crate::stylesheets::layer_rule::{LayerId, LayerName, LayerOrder};
 use crate::stylesheets::viewport_rule::{self, MaybeNew, ViewportRule};
 #[cfg(feature = "gecko")]
-use crate::stylesheets::{CounterStyleRule, FontFaceRule, FontFeatureValuesRule, PageRule};
+use crate::stylesheets::{
+    CounterStyleRule, FontFaceRule, FontFeatureValuesRule, PageRule, ScrollTimelineRule,
+};
 use crate::stylesheets::{
     CssRule, EffectiveRulesIterator, Origin, OriginSet, PerOrigin, PerOriginIter,
 };
@@ -1542,6 +1544,10 @@ pub struct ExtraStyleData {
     /// A map of effective page rules.
     #[cfg(feature = "gecko")]
     pub pages: Vec<Arc<Locked<PageRule>>>,
+
+    /// A map of effective scroll-timeline rules.
+    #[cfg(feature = "gecko")]
+    pub scroll_timelines: PrecomputedHashMap<Atom, Arc<Locked<ScrollTimelineRule>>>,
 }
 
 #[cfg(feature = "gecko")]
@@ -1570,6 +1576,18 @@ impl ExtraStyleData {
     fn add_page(&mut self, rule: &Arc<Locked<PageRule>>) {
         self.pages.push(rule.clone());
     }
+
+    /// Add the given @scroll-timeline rule.
+    fn add_scroll_timeline(
+        &mut self,
+        guard: &SharedRwLockReadGuard,
+        rule: &Arc<Locked<ScrollTimelineRule>>,
+    )-> Result<(), FailedAllocationError> {
+        let name = rule.read_with(guard).name.as_atom().clone();
+        self.scroll_timelines
+            .try_insert(name, rule.clone())
+            .map(|_| {})
+    }
 }
 
 impl ExtraStyleData {
@@ -1580,6 +1598,7 @@ impl ExtraStyleData {
             self.font_feature_values.clear();
             self.counter_styles.clear();
             self.pages.clear();
+            self.scroll_timelines.clear();
         }
     }
 }
@@ -1604,6 +1623,7 @@ impl MallocSizeOf for ExtraStyleData {
         n += self.font_feature_values.shallow_size_of(ops);
         n += self.counter_styles.shallow_size_of(ops);
         n += self.pages.shallow_size_of(ops);
+        n += self.scroll_timelines.shallow_size_of(ops);
         n
     }
 }
@@ -2351,12 +2371,10 @@ impl CascadeData {
                     }
                 },
                 #[cfg(feature = "gecko")]
-                CssRule::ScrollTimeline(..) => {
+                CssRule::ScrollTimeline(ref rule) => {
-                    // TODO: Bug 1676791: set the timeline into animation.
-                    // https://phabricator.services.mozilla.com/D126452
-                    //
                     // Note: Bug 1733260: we may drop @scroll-timeline rule once this spec issue
                     // https://github.com/w3c/csswg-drafts/issues/6674 gets landed.
+                    self.extra_data.add_scroll_timeline(guard, rule)?;
                 },
                 #[cfg(feature = "gecko")]
                 CssRule::FontFace(ref rule) => {