Implement flex-wrap: balance and flex-line-count (CSS Flexbox Level 2)

style/properties/data.py

@@ -649,6 +649,7 @@ def specified_is_copy(self):
                 "Display",
                 "DominantBaseline",
                 "FillRule",
+                "FlexWrap",
                 "Float",
                 "FontLanguageOverride",
                 "FontSynthesis",

style/properties/longhands.toml

@@ -802,6 +802,17 @@ servo_restyle_damage = "rebuild_box"
 boxed = true
 affects = "layout"
 
+[flex-line-count]
+type = "Integer"
+initial = "1"
+struct = "position"
+engine = "servo"
+servo_pref = "layout.flexbox.balance"
+parse_method = "parse_positive"
+spec = "https://drafts.csswg.org/css-flexbox-2/#flex-line-count-property"
+servo_restyle_damage = "rebuild_box"
+affects = "layout"
+
 [flex-grow]
 type = "NonNegativeNumber"
 initial = "From::from(0.0)"
@@ -4003,13 +4014,14 @@ servo_restyle_damage = "rebuild_box"
 keyword = { values = ["row", "row-reverse", "column", "column-reverse"] }
 
 [flex-wrap]
+type = "FlexWrap"
+initial = "computed::FlexWrap::NOWRAP"
 struct = "position"
 spec = "https://drafts.csswg.org/css-flexbox/#flex-wrap-property"
 animation_type = "discrete"
 affects = "layout"
 extra_prefixes = ["webkit"]
 servo_restyle_damage = "rebuild_box"
-keyword = { values = ["nowrap", "wrap", "wrap-reverse"] }
 
 [box-sizing]
 struct = "position"

style/values/computed/mod.rs

@@ -104,7 +104,7 @@ pub use self::position::PositionTryOrder;
 pub use self::position::PositionVisibility;
 pub use self::position::ScopedName;
 pub use self::position::{
-    GridAutoFlow, GridTemplateAreas, MasonryAutoFlow, Position, PositionOrAuto, ZIndex,
+    FlexWrap, GridAutoFlow, GridTemplateAreas, MasonryAutoFlow, Position, PositionOrAuto, ZIndex,
 };
 pub use self::position::{PositionArea, PositionAreaKeyword};
 pub use self::ratio::Ratio;

style/values/computed/position.rs

@@ -20,10 +20,10 @@ use crate::values::generics::position::{
     PositionOrAuto as GenericPositionOrAuto, ZIndex as GenericZIndex,
 };
 pub use crate::values::specified::position::{
-    AnchorName, DashedIdentAndOrTryTactic, GridAutoFlow, GridTemplateAreas, MasonryAutoFlow,
-    PositionAnchor, PositionArea, PositionAreaAxis, PositionAreaKeyword, PositionAreaType,
-    PositionTryFallbacks, PositionTryFallbacksTryTactic, PositionTryFallbacksTryTacticKeyword,
-    PositionTryOrder, PositionVisibility, ScopedName,
+    AnchorName, DashedIdentAndOrTryTactic, FlexWrap, GridAutoFlow, GridTemplateAreas,
+    MasonryAutoFlow, PositionAnchor, PositionArea, PositionAreaAxis, PositionAreaKeyword,
+    PositionAreaType, PositionTryFallbacks, PositionTryFallbacksTryTactic,
+    PositionTryFallbacksTryTacticKeyword, PositionTryOrder, PositionVisibility, ScopedName,
 };
 use crate::Zero;
 use std::fmt::{self, Write};

style/values/specified/mod.rs

@@ -88,10 +88,10 @@ pub use self::page::{PageName, PageOrientation, PageSize, PageSizeOrientation, P
 pub use self::param::LinkParameters;
 pub use self::percentage::{NoCalcPercentage, NonNegativePercentage, Percentage};
 pub use self::position::{
-    AnchorFunction, AnchorName, AnchorNameIdent, AspectRatio, GridAutoFlow, GridTemplateAreas,
-    Inset, MasonryAutoFlow, MasonryItemOrder, MasonryPlacement, Position, PositionAnchor,
-    PositionAnchorKeyword, PositionArea, PositionAreaKeyword, PositionComponent, PositionOrAuto,
-    PositionTryFallbacks, PositionTryOrder, PositionVisibility, ScopedName, ZIndex,
+    AnchorFunction, AnchorName, AnchorNameIdent, AspectRatio, FlexWrap, GridAutoFlow,
+    GridTemplateAreas, Inset, MasonryAutoFlow, MasonryItemOrder, MasonryPlacement, Position,
+    PositionAnchor, PositionAnchorKeyword, PositionArea, PositionAreaKeyword, PositionComponent,
+    PositionOrAuto, PositionTryFallbacks, PositionTryOrder, PositionVisibility, ScopedName, ZIndex,
 };
 pub use self::ratio::Ratio;
 pub use self::rect::NonNegativeLengthOrNumberRect;

style/values/specified/position.rs

@@ -1782,6 +1782,71 @@ impl Parse for MasonryAutoFlow {
     }
 }
 
+/// Whether the `balance` value of `flex-wrap` is enabled.
+#[inline]
+fn flex_wrap_balance_enabled() -> bool {
+    #[cfg(feature = "servo")]
+    return static_prefs::pref!("layout.flexbox.balance");
+    #[cfg(not(feature = "servo"))]
+    return false;
+}
+
+/// The specified and computed value of the `flex-wrap` property:
+/// `nowrap | [ wrap | wrap-reverse ] || balance`
+///
+/// <https://drafts.csswg.org/css-flexbox-2/#flex-wrap-property>
+#[derive(
+    Clone,
+    Copy,
+    Debug,
+    Eq,
+    MallocSizeOf,
+    Parse,
+    PartialEq,
+    SpecifiedValueInfo,
+    ToComputedValue,
+    ToCss,
+    ToResolvedValue,
+    ToShmem,
+    ToTyped,
+)]
+#[css(bitflags(
+    single = "nowrap",
+    mixed = "wrap,wrap-reverse,balance",
+    validate_mixed = "Self::validate_and_simplify"
+))]
+#[repr(C)]
+pub struct FlexWrap(u8);
+bitflags! {
+    impl FlexWrap: u8 {
+        /// `nowrap`
+        const NOWRAP = 0;
+        /// `wrap` - mutually exclusive with `wrap-reverse`
+        const WRAP = 1 << 0;
+        /// `wrap-reverse` - mutually exclusive with `wrap`
+        const WRAP_REVERSE = 1 << 1;
+        /// `balance`
+        const BALANCE = 1 << 2;
+    }
+}
+
+impl FlexWrap {
+    /// `nowrap | [ wrap | wrap-reverse ] || balance`
+    fn validate_and_simplify(&mut self) -> bool {
+        if self.contains(Self::WRAP | Self::WRAP_REVERSE) {
+            return false;
+        }
+        if self.contains(Self::BALANCE) {
+            if !flex_wrap_balance_enabled() {
+                return false;
+            }
+            // `wrap balance` computes to `balance`.
+            self.remove(Self::WRAP);
+        }
+        true
+    }
+}
+
 #[derive(
     Clone,
     Debug,

stylo_static_prefs/preferences.toml

@@ -41,6 +41,7 @@
 "layout.css.tree-counting-functions.enabled" = false
 "layout.css.webkit-fill-available.all-size-properties.enabled" = true
 "layout.css.webkit-fill-available.enabled" = true
+"layout.flexbox.balance" = false
 "layout.grid.enabled" = false
 # Negative means auto, 0 disables the thread-pool (main-thread styling),
 # other numbers override as specified.