Bug 1762088 - Implement parsing / serialization for container{,-type,…

…-name} CSS properties. r=firefox-style-system-reviewers,layout-reviewers,boris 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 w3c/csswg-drafts#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: w3c/csswg-drafts#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: w3c/csswg-drafts#7179 Differential Revision: https://phabricator.services.mozilla.com/D142419
jamienicol · Mar 31, 2022 · 0b9e375 · 0b9e375
1 parent 91f2891
commit 0b9e375
Show file tree

Hide file tree

Showing 97 changed files with 1,086 additions and 136 deletions.
diff --git a/devtools/server/actors/animation-type-longhand.js b/devtools/server/actors/animation-type-longhand.js
@@ -206,6 +206,8 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "border-inline-start-color",
       "border-inline-start-style",
       "border-inline-start-width",
+      "container-name",
+      "container-type",
       "content-visibility",
       "-moz-context-properties",
       "-moz-control-character-visibility",

diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js
@@ -2994,6 +2994,8 @@ exports.CSS_PROPERTIES = {
       "transform-origin",
       "contain",
       "content-visibility",
+      "container-type",
+      "container-name",
       "appearance",
       "-moz-orient",
       "will-change",
@@ -11594,6 +11596,10 @@ exports.PREFERENCES = [
     "aspect-ratio",
     "layout.css.aspect-ratio.enabled"
   ],
+  [
+    "container-type",
+    "layout.css.container-queries.enabled"
+  ],
   [
     "content-visibility",
     "layout.css.content-visibility.enabled"
@@ -11694,6 +11700,10 @@ exports.PREFERENCES = [
     "color-scheme",
     "layout.css.color-scheme.enabled"
   ],
+  [
+    "container-name",
+    "layout.css.container-queries.enabled"
+  ],
   [
     "d",
     "layout.css.d-property.enabled"
@@ -11754,6 +11764,10 @@ exports.PREFERENCES = [
     "overscroll-behavior",
     "layout.css.overscroll-behavior.enabled"
   ],
+  [
+    "container",
+    "layout.css.container-queries.enabled"
+  ],
   [
     "offset",
     "layout.css.motion-path.enabled"

diff --git a/layout/style/ServoBindings.toml b/layout/style/ServoBindings.toml
@@ -494,6 +494,8 @@ cbindgen-types = [
     { gecko = "StyleGenericLineHeight", servo = "crate::values::generics::text::LineHeight" },
     { gecko = "StyleCaretColor", servo = "crate::values::computed::color::CaretColor" },
     { gecko = "StyleContain", servo = "crate::values::computed::Contain" },
+    { gecko = "StyleContainerType", servo = "crate::values::computed::ContainerType" },
+    { gecko = "StyleContainerName", servo = "crate::values::computed::ContainerName" },
     { gecko = "StyleRestyleHint", servo = "crate::invalidation::element::restyle_hints::RestyleHint" },
     { gecko = "StyleTouchAction", servo = "crate::values::computed::TouchAction" },
     { gecko = "StyleWillChange", servo = "crate::values::specified::box_::WillChange" },

diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp
@@ -2186,11 +2186,11 @@ nsStyleDisplay::nsStyleDisplay(const Document& aDocument)
       mAnimationPlayStateCount(1),
       mAnimationIterationCountCount(1),
       mAnimationTimelineCount(1),
-      mWillChange{{}, {0}},
       mDisplay(StyleDisplay::Inline),
       mOriginalDisplay(StyleDisplay::Inline),
       mContain(StyleContain::NONE),
       mContentVisibility(StyleContentVisibility::Visible),
+      mContainerType(StyleContainerType::NONE),
       mAppearance(StyleAppearance::None),
       mDefaultAppearance(StyleAppearance::None),
       mPosition(StylePositionProperty::Static),
@@ -2217,13 +2217,13 @@ nsStyleDisplay::nsStyleDisplay(const Document& aDocument)
                        StyleScrollSnapAlignKeyword::None},
       mScrollSnapType{StyleScrollSnapAxis::Both,
                       StyleScrollSnapStrictness::None},
-      mLineClamp(0),
-      mRotate(StyleRotate::None()),
-      mTranslate(StyleTranslate::None()),
-      mScale(StyleScale::None()),
       mBackfaceVisibility(StyleBackfaceVisibility::Visible),
       mTransformStyle(StyleTransformStyle::Flat),
       mTransformBox(StyleGeometryBox::BorderBox),
+      mRotate(StyleRotate::None()),
+      mTranslate(StyleTranslate::None()),
+      mScale(StyleScale::None()),
+      mWillChange{{}, {0}},
       mOffsetPath(StyleOffsetPath::None()),
       mOffsetDistance(LengthPercentage::Zero()),
       mOffsetRotate{true, StyleAngle{0.0}},
@@ -2235,6 +2235,7 @@ nsStyleDisplay::nsStyleDisplay(const Document& aDocument)
       mPerspectiveOrigin(Position::FromPercentage(0.5f)),
       mVerticalAlign(
           StyleVerticalAlign::Keyword(StyleVerticalAlignKeyword::Baseline)),
+      mLineClamp(0),
       mShapeMargin(LengthPercentage::Zero()),
       mShapeOutside(StyleShapeOutside::None()) {
   MOZ_COUNT_CTOR(nsStyleDisplay);
@@ -2259,11 +2260,11 @@ nsStyleDisplay::nsStyleDisplay(const nsStyleDisplay& aSource)
       mAnimationPlayStateCount(aSource.mAnimationPlayStateCount),
       mAnimationIterationCountCount(aSource.mAnimationIterationCountCount),
       mAnimationTimelineCount(aSource.mAnimationTimelineCount),
-      mWillChange(aSource.mWillChange),
       mDisplay(aSource.mDisplay),
       mOriginalDisplay(aSource.mOriginalDisplay),
       mContain(aSource.mContain),
       mContentVisibility(aSource.mContentVisibility),
+      mContainerType(aSource.mContainerType),
       mAppearance(aSource.mAppearance),
       mDefaultAppearance(aSource.mDefaultAppearance),
       mPosition(aSource.mPosition),
@@ -2288,14 +2289,15 @@ nsStyleDisplay::nsStyleDisplay(const nsStyleDisplay& aSource)
       mOverflowAnchor(aSource.mOverflowAnchor),
       mScrollSnapAlign(aSource.mScrollSnapAlign),
       mScrollSnapType(aSource.mScrollSnapType),
-      mLineClamp(aSource.mLineClamp),
+      mBackfaceVisibility(aSource.mBackfaceVisibility),
+      mTransformStyle(aSource.mTransformStyle),
+      mTransformBox(aSource.mTransformBox),
       mTransform(aSource.mTransform),
       mRotate(aSource.mRotate),
       mTranslate(aSource.mTranslate),
       mScale(aSource.mScale),
-      mBackfaceVisibility(aSource.mBackfaceVisibility),
-      mTransformStyle(aSource.mTransformStyle),
-      mTransformBox(aSource.mTransformBox),
+      mContainerName(aSource.mContainerName),
+      mWillChange(aSource.mWillChange),
       mOffsetPath(aSource.mOffsetPath),
       mOffsetDistance(aSource.mOffsetDistance),
       mOffsetRotate(aSource.mOffsetRotate),
@@ -2304,6 +2306,7 @@ nsStyleDisplay::nsStyleDisplay(const nsStyleDisplay& aSource)
       mChildPerspective(aSource.mChildPerspective),
       mPerspectiveOrigin(aSource.mPerspectiveOrigin),
       mVerticalAlign(aSource.mVerticalAlign),
+      mLineClamp(aSource.mLineClamp),
       mShapeImageThreshold(aSource.mShapeImageThreshold),
       mShapeMargin(aSource.mShapeMargin),
       mShapeOutside(aSource.mShapeOutside) {
@@ -2406,6 +2409,8 @@ nsChangeHint nsStyleDisplay::CalcDifference(
     // values such as 'none'.) We need to reframe since we want to use
     // nsTextControlFrame instead of nsNumberControlFrame if the author
     // specifies 'textfield'.
+    // TODO: Now that we have -moz-default appearance we should do this only if
+    // `mDefaultAppearance` is or was `number-input`.
     return nsChangeHint_ReconstructFrame;
   }
 
@@ -2656,6 +2661,7 @@ nsChangeHint nsStyleDisplay::CalcDifference(
   // But we still need to return nsChangeHint_NeutralChange for these
   // properties, since some data did change in the style struct.
 
+  // TODO(emilio): Figure out change hints for container-type/name.
   if (!hint && (mTransitions != aNewData.mTransitions ||
                 mTransitionTimingFunctionCount !=
                     aNewData.mTransitionTimingFunctionCount ||
@@ -2675,7 +2681,9 @@ nsChangeHint nsStyleDisplay::CalcDifference(
                     aNewData.mAnimationIterationCountCount ||
                 mAnimationTimelineCount != aNewData.mAnimationTimelineCount ||
                 mWillChange != aNewData.mWillChange ||
-                mOverflowAnchor != aNewData.mOverflowAnchor)) {
+                mOverflowAnchor != aNewData.mOverflowAnchor ||
+                mContainerName != aNewData.mContainerName ||
+                mContainerType != aNewData.mContainerType)) {
     hint |= nsChangeHint_NeutralChange;
   }
 

diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h
@@ -1179,8 +1179,6 @@ struct StyleAnimation {
 }  // namespace mozilla
 
 struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
-  typedef mozilla::StyleGeometryBox StyleGeometryBox;
-
   explicit nsStyleDisplay(const mozilla::dom::Document&);
   nsStyleDisplay(const nsStyleDisplay& aOther);
   ~nsStyleDisplay();
@@ -1214,7 +1212,6 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
   uint32_t mAnimationIterationCountCount;
   uint32_t mAnimationTimelineCount;
 
-  mozilla::StyleWillChange mWillChange;
   mozilla::StyleDisplay mDisplay;
   mozilla::StyleDisplay mOriginalDisplay;  // saved mDisplay for
                                            //         position:absolute/fixed
@@ -1223,6 +1220,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
                                            //         mDisplay
   mozilla::StyleContain mContain;
   mozilla::StyleContentVisibility mContentVisibility;
+  mozilla::StyleContainerType mContainerType;
 
  private:
   mozilla::StyleAppearance mAppearance;
@@ -1253,16 +1251,19 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
   mozilla::StyleOverflowAnchor mOverflowAnchor;
   mozilla::StyleScrollSnapAlign mScrollSnapAlign;
   mozilla::StyleScrollSnapType mScrollSnapType;
-  uint32_t mLineClamp;
+
+  mozilla::StyleBackfaceVisibility mBackfaceVisibility;
+  mozilla::StyleTransformStyle mTransformStyle;
+  mozilla::StyleGeometryBox mTransformBox;
 
   mozilla::StyleTransform mTransform;
   mozilla::StyleRotate mRotate;
+
   mozilla::StyleTranslate mTranslate;
   mozilla::StyleScale mScale;
 
-  mozilla::StyleBackfaceVisibility mBackfaceVisibility;
-  mozilla::StyleTransformStyle mTransformStyle;
-  StyleGeometryBox mTransformBox;
+  mozilla::StyleContainerName mContainerName;
+  mozilla::StyleWillChange mWillChange;
 
   mozilla::StyleOffsetPath mOffsetPath;
   mozilla::LengthPercentage mOffsetDistance;
@@ -1275,6 +1276,16 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
 
   mozilla::StyleVerticalAlign mVerticalAlign;
 
+  uint32_t mLineClamp;
+
+  // The threshold used for extracting a shape from shape-outside: <image>.
+  float mShapeImageThreshold = 0.0f;
+
+  // The margin around a shape-outside: <image>.
+  mozilla::NonNegativeLengthPercentage mShapeMargin;
+
+  mozilla::StyleShapeOutside mShapeOutside;
+
   nsCSSPropertyID GetTransitionProperty(uint32_t aIndex) const {
     return mTransitions[aIndex % mTransitionPropertyCount].GetProperty();
   }
@@ -1327,14 +1338,6 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay {
     return mAnimations[aIndex % mAnimationTimelineCount].GetTimeline();
   }
 
-  // The threshold used for extracting a shape from shape-outside: <image>.
-  float mShapeImageThreshold = 0.0f;
-
-  // The margin around a shape-outside: <image>.
-  mozilla::NonNegativeLengthPercentage mShapeMargin;
-
-  mozilla::StyleShapeOutside mShapeOutside;
-
   bool HasAppearance() const {
     return EffectiveAppearance() != mozilla::StyleAppearance::None;
   }

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
@@ -12880,7 +12880,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.hyphenate-character.enabled")) {
 
 if (IsCSSPropertyPrefEnabled("layout.css.content-visibility.enabled")) {
   gCSSProperties["content-visibility"] = {
-    domProp: "content-visibility",
+    domProp: "contentVisibility",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: ["visible"],
@@ -12889,6 +12889,52 @@ if (IsCSSPropertyPrefEnabled("layout.css.content-visibility.enabled")) {
   };
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.container-queries.enabled")) {
+  gCSSProperties["container-type"] = {
+    domProp: "containerType",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "style",
+      "inline-size",
+      "block-size",
+      "size",
+      "style inline-size",
+      "block-size style",
+      "size style",
+    ],
+    invalid_values: [
+      "none style",
+      "none inline-size",
+      "inline-size none",
+      "style none",
+      "style style",
+      "inline-size style inline-size",
+      "inline-size block-size",
+      "size inline-size",
+      "size block-size",
+    ],
+  };
+  gCSSProperties["container-name"] = {
+    domProp: "containerName",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["foo bar", "foo", "baz bazz", "foo foo"],
+    invalid_values: ["foo unset", "none bar", "foo initial", "initial foo"],
+  };
+  gCSSProperties["container"] = {
+    domProp: "container",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["container-type", "container-name"],
+    initial_values: ["none"],
+    other_values: ["size", "size / foo bar", "inline-size style / foo"],
+    invalid_values: ["foo / size", "foo bar / size"],
+  };
+}
+
 if (false) {
   // TODO These properties are chrome-only, and are not exposed via CSSOM.
   // We may still want to find a way to test them. See bug 1206999.

diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
@@ -7276,6 +7276,13 @@
   mirror: always
   rust: true
 
+# Whether Container Queries are enabled
+- name: layout.css.container-queries.enabled
+  type: RelaxedAtomicBool
+  value: false
+  mirror: always
+  rust: true
+
 # Whether Constructable Stylesheets are enabled in script.
 - name: layout.css.constructable-stylesheets.enabled
   type: bool

diff --git a/servo/components/style/properties/data.py b/servo/components/style/properties/data.py
@@ -463,6 +463,7 @@ def specified_is_copy(self):
                 "ColumnCount",
                 "Contain",
                 "ContentVisibility",
+                "ContainerType",
                 "Display",
                 "FillRule",
                 "Float",

diff --git a/servo/components/style/properties/longhands/box.mako.rs b/servo/components/style/properties/longhands/box.mako.rs
@@ -620,6 +620,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",