Bug 1808409 - Part 2: Support view-timeline-inset in style system. r=emilio

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

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

devtools/server/actors/animation-type-longhand.js

@@ -254,6 +254,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "transition-property",
       "transition-timing-function",
       "view-timeline-axis",
+      "view-timeline-inset",
       "view-timeline-name",
       "-moz-window-shadow",
     ]),

devtools/shared/css/generated/properties-db.js

@@ -3261,6 +3261,7 @@ exports.CSS_PROPERTIES = {
       "scroll-timeline-axis",
       "view-timeline-name",
       "view-timeline-axis",
+      "view-timeline-inset",
       "-moz-box-align",
       "-moz-box-direction",
       "-moz-box-flex",
@@ -12115,6 +12116,10 @@ exports.PREFERENCES = [
     "view-timeline-axis",
     "layout.css.scroll-driven-animations.enabled"
   ],
+  [
+    "view-timeline-inset",
+    "layout.css.scroll-driven-animations.enabled"
+  ],
   [
     "view-timeline-name",
     "layout.css.scroll-driven-animations.enabled"

layout/style/ServoBindings.toml

@@ -466,6 +466,7 @@ cbindgen-types = [
     { gecko = "StyleScrollSnapType", servo = "crate::values::computed::ScrollSnapType" },
     { gecko = "StyleScrollTimelineName", servo = "crate::values::computed::ScrollTimelineName" },
     { gecko = "StyleScrollAxis", servo = "crate::values::computed::ScrollAxis" },
+    { gecko = "StyleViewTimelineInset", servo = "crate::values::computed::ViewTimelineInset" },
     { gecko = "StyleResize", servo = "crate::values::computed::Resize" },
     { gecko = "StyleOverflowClipBox", servo = "crate::values::computed::OverflowClipBox" },
     { gecko = "StyleFloat", servo = "crate::values::computed::Float" },

layout/style/ServoStyleConstsInlines.h

@@ -1105,6 +1105,17 @@ inline double StyleComputedTimingFunction::GetPortion(
   return aFn ? aFn->At(aPortion, aBeforeFlag) : aPortion;
 }
 
+/* static */
+template <>
+inline LengthPercentageOrAuto LengthPercentageOrAuto::Zero() {
+  return LengthPercentage(LengthPercentage::Zero());
+}
+
+template <>
+inline StyleViewTimelineInset::StyleGenericViewTimelineInset()
+    : start(LengthPercentageOrAuto::Zero()),
+      end(LengthPercentageOrAuto::Zero()) {}
+
 }  // namespace mozilla
 
 #endif

layout/style/nsStyleStruct.cpp

@@ -3253,7 +3253,8 @@ nsStyleUIReset::nsStyleUIReset(const Document& aDocument)
       mViewTimelines(
           nsStyleAutoArray<StyleViewTimeline>::WITH_SINGLE_INITIAL_ELEMENT),
       mViewTimelineNameCount(1),
-      mViewTimelineAxisCount(1) {
+      mViewTimelineAxisCount(1),
+      mViewTimelineInsetCount(1) {
   MOZ_COUNT_CTOR(nsStyleUIReset);
   mTransitions[0].SetInitialValues();
   mAnimations[0].SetInitialValues();
@@ -3291,7 +3292,8 @@ nsStyleUIReset::nsStyleUIReset(const nsStyleUIReset& aSource)
       mScrollTimelineAxis(aSource.mScrollTimelineAxis),
       mViewTimelines(aSource.mViewTimelines.Clone()),
       mViewTimelineNameCount(aSource.mViewTimelineNameCount),
-      mViewTimelineAxisCount(aSource.mViewTimelineAxisCount) {
+      mViewTimelineAxisCount(aSource.mViewTimelineAxisCount),
+      mViewTimelineInsetCount(aSource.mViewTimelineInsetCount) {
   MOZ_COUNT_CTOR(nsStyleUIReset);
 }
 
@@ -3355,7 +3357,8 @@ nsChangeHint nsStyleUIReset::CalcDifference(
        mScrollTimelineAxis != aNewData.mScrollTimelineAxis ||
        mViewTimelines != aNewData.mViewTimelines ||
        mViewTimelineNameCount != aNewData.mViewTimelineNameCount ||
-       mViewTimelineAxisCount != aNewData.mViewTimelineAxisCount)) {
+       mViewTimelineAxisCount != aNewData.mViewTimelineAxisCount ||
+       mViewTimelineInsetCount != aNewData.mViewTimelineInsetCount)) {
     hint |= nsChangeHint_NeutralChange;
   }
 

layout/style/nsStyleStruct.h

@@ -1278,7 +1278,8 @@ struct StyleViewTimeline {
   void SetInitialValues() {}
 
   bool operator==(const StyleViewTimeline& aOther) const {
-    return mName == aOther.mName && mAxis == aOther.mAxis;
+    return mName == aOther.mName && mAxis == aOther.mAxis &&
+           mInset == aOther.mInset;
   }
   bool operator!=(const StyleViewTimeline& aOther) const {
     return !(*this == aOther);
@@ -1287,6 +1288,7 @@ struct StyleViewTimeline {
  private:
   StyleScrollTimelineName mName;
   StyleScrollAxis mAxis = StyleScrollAxis::Block;
+  StyleViewTimelineInset mInset;
 };
 
 }  // namespace mozilla
@@ -1911,6 +1913,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleUIReset {
   nsStyleAutoArray<mozilla::StyleViewTimeline> mViewTimelines;
   uint32_t mViewTimelineNameCount;
   uint32_t mViewTimelineAxisCount;
+  uint32_t mViewTimelineInsetCount;
 };
 
 struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleUI {

layout/style/test/property_database.js

@@ -13732,6 +13732,15 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-driven-animations.enabled")) {
     other_values: ["inline", "vertical", "horizontal", "inline, block"],
     invalid_values: ["auto", "none", "abc", "inline block"],
   };
+
+  gCSSProperties["view-timeline-inset"] = {
+    domProp: "viewTimelineInset",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["auto", "1%", "1px 1%", "auto auto", "calc(0px) auto"],
+    invalid_values: ["none", "rgb(1, 2, 3)", "foo bar", "1px 2px 3px"],
+  };
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-gutter.enabled")) {

servo/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">

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

@@ -376,3 +376,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,
+)}

servo/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};

servo/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(),
+        }
+    }
+}

servo/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(())
+    }
+}

servo/components/style/values/specified/box.rs

@@ -762,9 +762,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,
@@ -891,7 +893,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,

servo/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")]

servo/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 })
+    }
+}

servo/ports/geckolib/cbindgen.toml

@@ -120,6 +120,7 @@ include = [
   "ScrollSnapStrictness",
   "ScrollSnapType",
   "ScrollTimelineName",
+  "ViewTimelineInset",
   "OverflowAnchor",
   "OverflowClipBox",
   "Resize",
@@ -419,6 +420,8 @@ renaming_overrides_prefixing = true
   // Just some convenient aliases for LengthOrAuto, to avoid confusing naming.
   inline bool IsLength() const;
   inline const StyleLength& AsLength() const;
+
+  static inline StyleGenericLengthPercentageOrAuto Zero();
 """
 
 "GenericSize" = """
@@ -951,6 +954,11 @@ renaming_overrides_prefixing = true
   StyleScrollTimelineName(): _0(RefPtr<nsAtom>(nsGkAtoms::_empty).forget()) {}
 """
 
+"GenericViewTimelineInset" = """
+ public:
+  inline StyleGenericViewTimelineInset();
+"""
+
 "Time" = """
  float ToSeconds() const { return seconds; }
  float ToMilliseconds() const { return seconds * 1000.0f; }

testing/web-platform/meta/scroll-animations/css/view-timeline-inset-computed.html.ini

@@ -1,53 +0,0 @@
-[view-timeline-inset-computed.html]
-  expected:
-    if (os == "android") and fission: [OK, TIMEOUT]
-  [Property view-timeline-inset value 'initial']
-    expected: FAIL
-
-  [Property view-timeline-inset value 'inherit']
-    expected: FAIL
-
-  [Property view-timeline-inset value 'unset']
-    expected: FAIL
-
-  [Property view-timeline-inset value 'revert']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1%']
-    expected: FAIL
-
-  [Property view-timeline-inset value 'calc(1% + 1px)']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px 2px']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px 2em']
-    expected: FAIL
-
-  [Property view-timeline-inset value 'calc(1px + 1em) 2px']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px 2px, 3px 4px']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px auto, auto 4px']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px, 2px, 3px']
-    expected: FAIL
-
-  [Property view-timeline-inset value '1px 1px, 2px 3px']
-    expected: FAIL
-
-  [Property view-timeline-inset value 'auto auto, auto auto']
-    expected: FAIL
-
-  [The view-timeline-inset property shows up in CSSStyleDeclaration enumeration]
-    expected: FAIL
-
-  [The view-timeline-inset property shows up in CSSStyleDeclaration.cssText]
-    expected: FAIL

testing/web-platform/meta/scroll-animations/css/view-timeline-inset-parsing.html.ini

@@ -1,41 +0,0 @@
-[view-timeline-inset-parsing.html]
-  expected:
-    if (os == "android") and fission: [OK, TIMEOUT]
-  [e.style['view-timeline-inset'\] = "initial" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "inherit" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "unset" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "revert" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px 2px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px 2em" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "calc(1em + 1px) 2px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px 2px, 3px 4px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px auto, auto 4px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px, 2px, 3px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "1px 1px, 2px 3px" should set the property value]
-    expected: FAIL
-
-  [e.style['view-timeline-inset'\] = "auto auto, auto auto" should set the property value]
-    expected: FAIL