Bug 1823901 - Add view-transition-name longhand in style system. r=la…

…yout-reviewers,firefox-style-system-reviewers,emilio

Add `view-transition-name` into style system, behind the preference,
"dom.viewTransitions.enabled".

We will use `view-transition-name` somewhere when we create the pseudo
elements. This patch only add this atom into style system for future
usage.

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

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

@@ -191,6 +191,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "-moz-user-modify",
       "user-select",
       "vector-effect",
+      "view-transition-name",
       "visibility",
       "white-space-collapse",
       "will-change",

dom/base/use_counter_metrics.yaml

@@ -20847,6 +20847,23 @@ use.counter.css.page:
     send_in_pings:
       - use-counters
 
+  css_view_transition_name:
+    type: counter
+    description: >
+      Whether a page used the CSS property view-transition-name.
+      Compare against `use.counter.top_level_content_documents_destroyed`
+      to calculate the rate.
+    bugs:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1852098
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1852098
+    notification_emails:
+      - [email protected]
+      - [email protected]
+    expires: never
+    send_in_pings:
+      - use-counters
+
   css_webkit_text_stroke_width:
     type: counter
     description: >
@@ -32817,6 +32834,23 @@ use.counter.css.doc:
     send_in_pings:
       - use-counters
 
+  css_view_transition_name:
+    type: counter
+    description: >
+      Whether a document used the CSS property view-transition-name.
+      Compare against `use.counter.content_documents_destroyed`
+      to calculate the rate.
+    bugs:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1852098
+    data_reviews:
+      - https://bugzilla.mozilla.org/show_bug.cgi?id=1852098
+    notification_emails:
+      - [email protected]
+      - [email protected]
+    expires: never
+    send_in_pings:
+      - use-counters
+
   css_webkit_text_stroke_width:
     type: counter
     description: >

layout/style/ServoBindings.toml

@@ -425,6 +425,7 @@ cbindgen-types = [
     { gecko = "StyleTimelineName", servo = "crate::values::computed::TimelineName" },
     { gecko = "StyleScrollAxis", servo = "crate::values::computed::ScrollAxis" },
     { gecko = "StyleViewTimelineInset", servo = "crate::values::computed::ViewTimelineInset" },
+    { gecko = "StyleViewTransitionName", servo = "crate::values::computed::ViewTransitionName" },
     { gecko = "StyleResize", servo = "crate::values::computed::Resize" },
     { gecko = "StyleOverflowClipBox", servo = "crate::values::computed::OverflowClipBox" },
     { gecko = "StyleFloat", servo = "crate::values::computed::Float" },

layout/style/nsStyleStruct.cpp

@@ -3161,7 +3161,8 @@ nsStyleUIReset::nsStyleUIReset(const nsStyleUIReset& aSource)
       mViewTimelineNameCount(aSource.mViewTimelineNameCount),
       mViewTimelineAxisCount(aSource.mViewTimelineAxisCount),
       mViewTimelineInsetCount(aSource.mViewTimelineInsetCount),
-      mFieldSizing(aSource.mFieldSizing) {
+      mFieldSizing(aSource.mFieldSizing),
+      mViewTransitionName(aSource.mViewTransitionName) {
   MOZ_COUNT_CTOR(nsStyleUIReset);
 }
 
@@ -3198,6 +3199,10 @@ nsChangeHint nsStyleUIReset::CalcDifference(
     hint |= nsChangeHint_SchedulePaint;
   }
 
+  if (mViewTransitionName != aNewData.mViewTransitionName) {
+    hint |= nsChangeHint_NeutralChange;
+  }
+
   if (!hint &&
       (mTransitions != aNewData.mTransitions ||
        mTransitionTimingFunctionCount !=

layout/style/nsStyleStruct.h

@@ -1740,6 +1740,8 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleUIReset {
   uint32_t mViewTimelineInsetCount;
 
   mozilla::StyleFieldSizing mFieldSizing;
+
+  mozilla::StyleViewTransitionName mViewTransitionName;
 };
 
 struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleUI {

layout/style/test/mochitest.toml

@@ -1,5 +1,6 @@
 [DEFAULT]
 prefs = [
+  "dom.viewTransitions.enabled=true",
   "gfx.omta.background-color=true",
   "gfx.font_loader.delay=0",
   "layout.css.motion-path-url.enabled=true",

layout/style/test/property_database.js

@@ -14306,6 +14306,32 @@ if (IsCSSPropertyPrefEnabled("layout.css.field-sizing.enabled")) {
   });
 }
 
+if (IsCSSPropertyPrefEnabled("dom.viewTransitions.enabled")) {
+  Object.assign(gCSSProperties, {
+    "view-transition-name": {
+      domProp: "viewTransitionName",
+      inherited: false,
+      type: CSS_TYPE_LONGHAND,
+      initial_values: ["none"],
+      other_values: [
+        "all",
+        "ball",
+        "mall",
+        "color",
+        "foobar",
+        "\\32bounce",
+        "-bounce",
+        "-\\32bounce",
+        "\\32 0bounce",
+        "-\\32 0bounce",
+        "\\2bounce",
+        "-\\2bounce",
+      ],
+      invalid_values: ["auto", "abc --bounce", "10px", "rgb(1, 2, 3)"],
+    },
+  });
+}
+
 // Copy aliased properties' fields from their alias targets. Keep this logic
 // at the bottom of this file to ensure all the aliased properties are
 // processed.

modules/libpref/init/StaticPrefList.yaml

@@ -4442,6 +4442,12 @@
   value: 128
   mirror: always
 
+# Is support for View Transitions Level 1 enabled?
+- name: dom.viewTransitions.enabled
+  type: RelaxedAtomicBool
+  value: false
+  mirror: always
+
 # Is support for WebVR APIs enabled?
 # Disabled everywhere, but not removed.
 - name: dom.vr.enabled

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

@@ -438,3 +438,14 @@ ${helpers.single_keyword(
     spec="https://drafts.csswg.org/css-ui/#field-sizing",
     affects="layout",
 )}
+
+${helpers.predefined_type(
+    "view-transition-name",
+    "ViewTransitionName",
+    "computed::ViewTransitionName::none()",
+    engines="gecko",
+    animation_type="discrete",
+    gecko_pref="dom.viewTransitions.enabled",
+    spec="https://drafts.csswg.org/css-view-transitions-1/#view-transition-name-prop",
+    affects="",
+)}

servo/components/style/values/computed/animation.rs

@@ -13,7 +13,7 @@ use style_traits::{CssWriter, ToCss};
 
 pub use crate::values::specified::animation::{
     AnimationComposition, AnimationDirection, AnimationFillMode, AnimationName, AnimationPlayState,
-    ScrollAxis, TimelineName, TransitionBehavior, TransitionProperty,
+    ScrollAxis, TimelineName, TransitionBehavior, TransitionProperty, ViewTransitionName,
 };
 
 /// A computed value for the `animation-duration` property.

servo/components/style/values/computed/mod.rs

@@ -44,7 +44,7 @@ pub use self::angle::Angle;
 pub use self::animation::{
     AnimationComposition, AnimationDirection, AnimationDuration, AnimationFillMode,
     AnimationIterationCount, AnimationName, AnimationPlayState, AnimationTimeline, ScrollAxis,
-    TimelineName, TransitionBehavior, TransitionProperty, ViewTimelineInset,
+    TimelineName, TransitionBehavior, TransitionProperty, ViewTimelineInset, ViewTransitionName,
 };
 pub use self::background::{BackgroundRepeat, BackgroundSize};
 pub use self::basic_shape::FillRule;

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

@@ -664,3 +664,67 @@ impl Parse for ViewTimelineInset {
         Ok(Self { start, end })
     }
 }
+
+/// The view-transition-name: `none | <custom-ident>`.
+///
+/// https://drafts.csswg.org/css-view-transitions-1/#view-transition-name-prop
+///
+/// We use a single atom for this. Empty atom represents `none`.
+#[derive(
+    Clone,
+    Debug,
+    Eq,
+    Hash,
+    PartialEq,
+    MallocSizeOf,
+    SpecifiedValueInfo,
+    ToComputedValue,
+    ToResolvedValue,
+    ToShmem,
+)]
+#[repr(C)]
+pub struct ViewTransitionName(Atom);
+
+impl ViewTransitionName {
+    /// Returns the `none` value.
+    pub fn none() -> Self {
+        Self(atom!(""))
+    }
+
+    /// Returns whether this is the special `none` value.
+    pub fn is_none(&self) -> bool {
+        self.0 == atom!("")
+    }
+}
+
+impl Parse for ViewTransitionName {
+    fn parse<'i, 't>(
+        _: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        let location = input.current_source_location();
+        let ident = input.expect_ident()?;
+        if ident.eq_ignore_ascii_case("none") {
+            return Ok(Self::none());
+        }
+
+        // We check none already, so don't need to exclude none here.
+        // Note: The values none and auto are excluded from <custom-ident> here.
+        Ok(Self(CustomIdent::from_ident(location, ident, &["auto"])?.0))
+    }
+}
+
+impl ToCss for ViewTransitionName {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        use crate::values::serialize_atom_identifier;
+
+        if self.is_none() {
+            return dest.write_str("none");
+        }
+
+        serialize_atom_identifier(&self.0, dest)
+    }
+}

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

@@ -31,7 +31,7 @@ pub use self::angle::{AllowUnitlessZeroAngle, Angle};
 pub use self::animation::{
     AnimationComposition, AnimationDirection, AnimationDuration, AnimationFillMode,
     AnimationIterationCount, AnimationName, AnimationPlayState, AnimationTimeline, ScrollAxis,
-    TimelineName, TransitionBehavior, TransitionProperty, ViewTimelineInset,
+    TimelineName, TransitionBehavior, TransitionProperty, ViewTimelineInset, ViewTransitionName,
 };
 pub use self::background::{BackgroundRepeat, BackgroundSize};
 pub use self::basic_shape::FillRule;

servo/ports/geckolib/cbindgen.toml

@@ -313,6 +313,7 @@ include = [
   "XTextScale",
   "Zoom",
   "TransitionProperty",
+  "ViewTransitionName",
 ]
 item_types = ["enums", "structs", "unions", "typedefs", "functions", "constants"]
 renaming_overrides_prefixing = true
@@ -1027,6 +1028,11 @@ renaming_overrides_prefixing = true
   inline StyleGenericViewTimelineInset();
 """
 
+"ViewTransitionName" = """
+ public:
+  StyleViewTransitionName() : _0(nsGkAtoms::_empty) {}
+"""
+
 "Time" = """
  float ToSeconds() const { return seconds; }
  float ToMilliseconds() const { return seconds * 1000.0f; }

testing/web-platform/meta/css/css-view-transitions/__dir__.ini

@@ -0,0 +1 @@
+prefs: [dom.viewTransitions.enabled:true]