style: Support view-timeline-inset in style system

Support view-timeline-inset: `[ [ auto | <length-percentage> ]{1,2} ]#`.
And its initial value is 0.

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

components/style/properties/gecko.mako.rs

@@ -1721,7 +1721,7 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
                           animation-timing-function animation-composition animation-timeline
                           transition-duration transition-delay
                           transition-timing-function transition-property
-                          view-timeline-name view-timeline-axis""" %>
+                          view-timeline-name view-timeline-axis view-timeline-inset""" %>
 
 <%self:impl_trait style_struct_name="UI" skip_longhands="${skip_ui_longhands}">
     ${impl_coordinated_property('transition', 'delay', 'Delay')}
@@ -1907,6 +1907,7 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
 
     ${impl_coordinated_property('view_timeline', 'name', 'Name')}
     ${impl_coordinated_property('view_timeline', 'axis', 'Axis')}
+    ${impl_coordinated_property('view_timeline', 'inset', 'Inset')}
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="XUL">

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

@@ -378,3 +378,16 @@ ${helpers.predefined_type(
     spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis",
     rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
 )}
+
+${helpers.predefined_type(
+    "view-timeline-inset",
+    "ViewTimelineInset",
+    "computed::ViewTimelineInset::zero()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}

components/style/values/computed/mod.rs

@@ -104,7 +104,7 @@ pub use self::transform::{Rotate, Scale, Transform, TransformOperation};
 pub use self::transform::{TransformOrigin, TransformStyle, Translate};
 #[cfg(feature = "gecko")]
 pub use self::ui::CursorImage;
-pub use self::ui::{BoolInteger, Cursor, UserSelect};
+pub use self::ui::{BoolInteger, Cursor, UserSelect, ViewTimelineInset};
 pub use super::specified::TextTransform;
 pub use super::specified::ViewportVariant;
 pub use super::specified::{BorderStyle, TextDecorationLine};

components/style/values/computed/ui.rs

@@ -6,7 +6,7 @@
 
 use crate::values::computed::color::Color;
 use crate::values::computed::image::Image;
-use crate::values::computed::Number;
+use crate::values::computed::{LengthPercentage, Number};
 use crate::values::generics::ui as generics;
 
 pub use crate::values::specified::ui::CursorKind;
@@ -20,3 +20,19 @@ pub type CursorImage = generics::GenericCursorImage<Image, Number>;
 
 /// A computed value for `scrollbar-color` property.
 pub type ScrollbarColor = generics::GenericScrollbarColor<Color>;
+
+/// A computed value for the `view-timeline-inset` property.
+pub type ViewTimelineInset = generics::GenericViewTimelineInset<LengthPercentage>;
+
+impl ViewTimelineInset {
+    /// Returns the initial value, `0`.
+    #[inline]
+    pub fn zero() -> Self {
+        use crate::Zero;
+
+        Self {
+            start: Zero::zero(),
+            end: Zero::zero(),
+        }
+    }
+}

components/style/values/generics/ui.rs

@@ -4,6 +4,7 @@
 
 //! Generic values for UI properties.
 
+use crate::values::generics::length::GenericLengthPercentageOrAuto;
 use crate::values::specified::ui::CursorKind;
 use std::fmt::{self, Write};
 use style_traits::{CssWriter, ToCss};
@@ -127,3 +128,44 @@ impl<Color> Default for ScrollbarColor<Color> {
         ScrollbarColor::Auto
     }
 }
+
+/// A generic value for the `[ [ auto | <length-percentage> ]{1,2} ]`.
+///
+/// https://drafts.csswg.org/scroll-animations-1/#view-timeline-inset
+#[derive(
+    Clone,
+    Copy,
+    Debug,
+    MallocSizeOf,
+    PartialEq,
+    SpecifiedValueInfo,
+    ToComputedValue,
+    ToResolvedValue,
+    ToShmem,
+)]
+#[repr(C)]
+pub struct GenericViewTimelineInset<LengthPercent> {
+    /// The start inset in the relevant axis.
+    pub start: GenericLengthPercentageOrAuto<LengthPercent>,
+    /// The end inset.
+    pub end: GenericLengthPercentageOrAuto<LengthPercent>,
+}
+
+pub use self::GenericViewTimelineInset as ViewTimelineInset;
+
+impl<LengthPercent> ToCss for ViewTimelineInset<LengthPercent>
+where
+    LengthPercent: ToCss + PartialEq,
+{
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        self.start.to_css(dest)?;
+        if self.end != self.start {
+            dest.write_char(' ')?;
+            self.end.to_css(dest)?;
+        }
+        Ok(())
+    }
+}

components/style/values/specified/box.rs

@@ -733,9 +733,11 @@ impl Default for Scroller {
     }
 }
 
-/// A value for the <Axis> used in scroll().
+/// A value for the <Axis> used in scroll(), or a value for {scroll|view}-timeline-axis.
 ///
-/// https://drafts.csswg.org/scroll-animations-1/rewrite#typedef-axis
+/// https://drafts.csswg.org/scroll-animations-1/#typedef-axis
+/// https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis
+/// https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis
 #[derive(
     Clone,
     Debug,
@@ -862,7 +864,7 @@ impl Parse for AnimationTimeline {
 /// Note: The spec doesn't mention `auto` for scroll-timeline-name. However, `auto` is a keyword in
 /// animation-timeline, so we reject `auto` for scroll-timeline-name now.
 ///
-/// https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-name
+/// https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name
 #[derive(
     Clone,
     Debug,

components/style/values/specified/mod.rs

@@ -100,7 +100,7 @@ pub use self::transform::{Rotate, Scale, Transform};
 pub use self::transform::{TransformOrigin, TransformStyle, Translate};
 #[cfg(feature = "gecko")]
 pub use self::ui::CursorImage;
-pub use self::ui::{BoolInteger, Cursor, UserSelect};
+pub use self::ui::{BoolInteger, Cursor, UserSelect, ViewTimelineInset};
 pub use super::generics::grid::GridTemplateComponent as GenericGridTemplateComponent;
 
 #[cfg(feature = "gecko")]

components/style/values/specified/ui.rs

@@ -8,7 +8,7 @@ use crate::parser::{Parse, ParserContext};
 use crate::values::generics::ui as generics;
 use crate::values::specified::color::Color;
 use crate::values::specified::image::Image;
-use crate::values::specified::Number;
+use crate::values::specified::{LengthPercentage, Number};
 use cssparser::Parser;
 use std::fmt::{self, Write};
 use style_traits::{
@@ -230,3 +230,23 @@ pub enum CursorKind {
     ZoomOut,
     Auto,
 }
+
+/// A specified value for the `view-timeline-inset` property.
+pub type ViewTimelineInset = generics::GenericViewTimelineInset<LengthPercentage>;
+
+impl Parse for ViewTimelineInset {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        use crate::values::specified::LengthPercentageOrAuto;
+
+        let start = LengthPercentageOrAuto::parse(context, input)?;
+        let end = match input.try_parse(|input| LengthPercentageOrAuto::parse(context, input)) {
+            Ok(end) => end,
+            Err(_) => start.clone(),
+        };
+
+        Ok(Self { start, end })
+    }
+}