style: Implement parsing / serialization for container{,-type,-name} CSS properties

Two noteworthy details that may seem random otherwise:

 * Moving values around in nsStyleDisplay is needed so that the struct
   remains under the size limit that we have to avoid jumping allocator
   buckets.

 * All the test expectation churn is because tests depend on
   `container-type: size` parsing to run, and now they run. Tests for
   the relevant bits I implemented are passing, with the only exception
   of some `container-name-computed.html` failures which are
   https://github.com/w3c/csswg-drafts/issues/7181. Safari agrees with
   us there.

Other notes when looking at the spec and seeing how it matches the
implementation:

 * `container` syntax doesn't match spec, but matches tests and sanity:
   https://github.com/w3c/csswg-drafts/issues/7180

 * `container-type` syntax doesn't _quite_ match spec, but matches tests
   and I think it's a spec bug since the definition for the missing
   keyword is gone:
   https://github.com/w3c/csswg-drafts/issues/7179

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

components/style/properties/data.py

@@ -444,6 +444,7 @@ class Longhand(Property):
                 "ColumnCount",
                 "Contain",
                 "ContentVisibility",
+                "ContainerType",
                 "Display",
                 "FillRule",
                 "Float",

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

@@ -623,6 +623,26 @@ ${helpers.predefined_type(
     animation_value_type="none",
 )}
 
+${helpers.predefined_type(
+    "container-type",
+    "ContainerType",
+    "computed::ContainerType::NONE",
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.container-queries.enabled",
+    spec="https://drafts.csswg.org/css-contain-3/#container-type",
+)}
+
+${helpers.predefined_type(
+    "container-name",
+    "ContainerName",
+    "computed::ContainerName::none()",
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.container-queries.enabled",
+    spec="https://drafts.csswg.org/css-contain-3/#container-name",
+)}
+
 ${helpers.predefined_type(
     "appearance",
     "Appearance",

components/style/properties/shorthands/box.mako.rs

@@ -345,6 +345,45 @@ ${helpers.two_properties_shorthand(
     spec="https://wicg.github.io/overscroll-behavior/#overscroll-behavior-properties",
 )}
 
+<%helpers:shorthand
+    engines="gecko"
+    name="container"
+    sub_properties="container-type container-name"
+    gecko_pref="layout.css.container-queries.enabled",
+    spec="https://drafts.csswg.org/css-contain-3/#container-shorthand"
+>
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::parser::Parse;
+        use crate::values::specified::box_::{ContainerName, ContainerType};
+        // See https://github.com/w3c/csswg-drafts/issues/7180 for why we don't
+        // match the spec.
+        let container_type = ContainerType::parse(context, input)?;
+        let container_name = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+            ContainerName::parse(context, input)?
+        } else {
+            ContainerName::none()
+        };
+        Ok(expanded! {
+            container_type: container_type,
+            container_name: container_name,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.container_type.to_css(dest)?;
+            if !self.container_name.is_none() {
+                dest.write_str(" / ")?;
+                self.container_name.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
 <%helpers:shorthand
     engines="gecko"
     name="page-break-before"

components/style/values/computed/box.rs

@@ -13,9 +13,10 @@ use crate::values::specified::box_ as specified;
 
 pub use crate::values::specified::box_::{
     AnimationName, AnimationTimeline, Appearance, BreakBetween, BreakWithin,
-    Clear as SpecifiedClear, Contain, ContentVisibility, Display, Float as SpecifiedFloat, Overflow,
-    OverflowAnchor, OverflowClipBox, OverscrollBehavior, ScrollSnapAlign, ScrollSnapAxis,
-    ScrollSnapStrictness, ScrollSnapType, ScrollbarGutter, TouchAction, TransitionProperty, WillChange,
+    Clear as SpecifiedClear, Contain, ContainerName, ContainerType, ContentVisibility, Display,
+    Float as SpecifiedFloat, Overflow, OverflowAnchor, OverflowClipBox,
+    OverscrollBehavior, ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStrictness,
+    ScrollSnapType, ScrollbarGutter, TouchAction, TransitionProperty, WillChange,
 };
 
 /// A computed value for the `vertical-align` property.

components/style/values/computed/mod.rs

@@ -44,7 +44,7 @@ pub use self::basic_shape::FillRule;
 pub use self::border::{BorderCornerRadius, BorderRadius, BorderSpacing};
 pub use self::border::{BorderImageRepeat, BorderImageSideWidth};
 pub use self::border::{BorderImageSlice, BorderImageWidth};
-pub use self::box_::{AnimationIterationCount, AnimationName, AnimationTimeline, Contain};
+pub use self::box_::{AnimationIterationCount, AnimationName, AnimationTimeline, Contain, ContainerName, ContainerType};
 pub use self::box_::{Appearance, BreakBetween, BreakWithin, Clear, ContentVisibility, Float};
 pub use self::box_::{Display, Overflow, OverflowAnchor, TransitionProperty};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective, Resize, ScrollbarGutter};

components/style/values/specified/box.rs

@@ -1288,6 +1288,61 @@ pub enum ContentVisibility {
     Visible,
 }
 
+bitflags! {
+    #[derive(MallocSizeOf, SpecifiedValueInfo, ToComputedValue, ToCss, Parse, ToResolvedValue, ToShmem)]
+    #[repr(C)]
+    #[allow(missing_docs)]
+    #[css(bitflags(single="none", mixed="style,size,inline-size", overlapping_bits))]
+    /// https://drafts.csswg.org/css-contain-3/#container-type
+    ///
+    /// TODO: block-size is on the spec but it seems it was removed? WPTs don't
+    /// support it, see https://github.com/w3c/csswg-drafts/issues/7179.
+    pub struct ContainerType: u8 {
+        /// The `none` variant.
+        const NONE = 0;
+        /// The `style` variant.
+        const STYLE = 1 << 0;
+        /// The `inline-size` variant.
+        const INLINE_SIZE = 1 << 1;
+        /// The `size` variant, exclusive with `inline-size` (they sharing bits
+        /// guarantees this).
+        const SIZE = 1 << 2 | Self::INLINE_SIZE.bits;
+    }
+}
+
+/// https://drafts.csswg.org/css-contain-3/#container-name
+#[repr(transparent)]
+#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToComputedValue, ToCss, ToResolvedValue, ToShmem)]
+pub struct ContainerName(#[css(iterable, if_empty = "none")] pub crate::OwnedSlice<CustomIdent>);
+
+impl ContainerName {
+    /// Return the `none` value.
+    pub fn none() -> Self {
+        Self(Default::default())
+    }
+
+    /// Returns whether this is the `none` value.
+    pub fn is_none(&self) -> bool {
+        self.0.is_empty()
+    }
+}
+
+impl Parse for ContainerName {
+    fn parse<'i, 't>( _: &ParserContext, input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i>> {
+        let mut idents = vec![];
+        let location = input.current_source_location();
+        let first = input.expect_ident()?;
+        if first.eq_ignore_ascii_case("none") {
+            return Ok(Self::none())
+        }
+        idents.push(CustomIdent::from_ident(location, first, &["none"])?);
+        while let Ok(ident) = input.try_parse(|input| input.expect_ident_cloned()) {
+            idents.push(CustomIdent::from_ident(location, &ident, &["none"])?);
+        }
+        Ok(ContainerName(idents.into()))
+    }
+}
+
 /// A specified value for the `perspective` property.
 pub type Perspective = GenericPerspective<NonNegativeLength>;
 

components/style/values/specified/mod.rs

@@ -37,7 +37,7 @@ pub use self::border::{BorderCornerRadius, BorderImageSlice, BorderImageWidth};
 pub use self::border::{BorderImageRepeat, BorderImageSideWidth};
 pub use self::border::{BorderRadius, BorderSideWidth, BorderSpacing, BorderStyle};
 pub use self::box_::{AnimationIterationCount, AnimationName, AnimationTimeline, Contain, Display};
-pub use self::box_::{Appearance, BreakBetween, BreakWithin};
+pub use self::box_::{Appearance, BreakBetween, BreakWithin, ContainerName, ContainerType};
 pub use self::box_::{Clear, ContentVisibility, Float, Overflow, OverflowAnchor};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective, Resize, ScrollbarGutter};
 pub use self::box_::{ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStrictness, ScrollSnapType};