layout: Layout for column flex-basis and minimum automatic size deter…

…mination (#33068) This change adds an expensive layout for the determination of minimum automatic size and flex basis in process of flexbox layout. Currently, the layout is not cached, so may be performed up to 2 more times than necessary. Signed-off-by: Martin Robinson <mrobinson@igalia.com> Co-authored-by: Oriol Brufau <obrufau@igalia.com>
servo · Aug 19, 2024 · 2f6745c · 2f6745c
1 parent 2a31fdd
commit 2f6745c
Show file tree

Hide file tree

Showing 45 changed files with 423 additions and 479 deletions.
diff --git a/components/layout_2020/flexbox/construct.rs b/components/layout_2020/flexbox/construct.rs
@@ -229,9 +229,6 @@ where
             FlexLevelBox::OutOfFlowAbsolutelyPositionedBox(_) => 0,
         });
 
-        FlexContainer {
-            children,
-            style: self.info.style.clone(),
-        }
+        FlexContainer::new(&self.info.style, children)
     }
 }
diff --git a/components/layout_2020/flexbox/geom.rs b/components/layout_2020/flexbox/geom.rs
@@ -4,11 +4,12 @@
 
 //! <https://drafts.csswg.org/css-flexbox/#box-model>
 
+use serde::Serialize;
 use style::properties::longhands::flex_direction::computed_value::T as FlexDirection;
 
 use crate::geom::{LogicalRect, LogicalSides, LogicalVec2};
 
-#[derive(Clone, Copy, Default)]
+#[derive(Clone, Copy, Debug, Default)]
 pub(super) struct FlexRelativeVec2<T> {
     pub main: T,
     pub cross: T,
@@ -67,7 +68,7 @@ impl<T> FlexRelativeSides<T> {
 
 /// One of the two bits set by the `flex-direction` property
 /// (The other is "forward" v.s. reverse.)
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Serialize)]
 pub(super) enum FlexAxis {
     /// The main axis is the inline axis of the container (not necessarily of flex items!),
     /// cross is block.
@@ -78,7 +79,7 @@ pub(super) enum FlexAxis {
 
 /// Which flow-relative sides map to the main-start and cross-start sides, respectively.
 /// See <https://drafts.csswg.org/css-flexbox/#box-model>
-#[derive(Clone, Copy)]
+#[derive(Clone, Copy, Debug, Serialize)]
 pub(super) enum MainStartCrossStart {
     InlineStartBlockStart,
     InlineStartBlockEnd,

diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
diff --git a/components/layout_2020/flexbox/mod.rs b/components/layout_2020/flexbox/mod.rs
@@ -2,24 +2,105 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+use geom::{FlexAxis, MainStartCrossStart};
 use serde::Serialize;
 use servo_arc::Arc as ServoArc;
+use style::properties::longhands::align_items::computed_value::T as AlignItems;
+use style::properties::longhands::flex_direction::computed_value::T as FlexDirection;
+use style::properties::longhands::flex_wrap::computed_value::T as FlexWrap;
 use style::properties::ComputedValues;
+use style::values::computed::{AlignContent, JustifyContent};
+use style::values::specified::align::AlignFlags;
 
 use crate::cell::ArcRefCell;
 use crate::formatting_contexts::IndependentFormattingContext;
+use crate::fragment_tree::BaseFragmentInfo;
 use crate::positioned::AbsolutelyPositionedBox;
 
 mod construct;
 mod geom;
 mod layout;
 
+/// A structure to hold the configuration of a flex container for use during layout
+/// and preferred width calculation.
+#[derive(Clone, Debug, Serialize)]
+pub(crate) struct FlexContainerConfig {
+    container_is_single_line: bool,
+    flex_axis: FlexAxis,
+    flex_direction: FlexDirection,
+    flex_direction_is_reversed: bool,
+    flex_wrap: FlexWrap,
+    flex_wrap_reverse: bool,
+    main_start_cross_start_sides_are: MainStartCrossStart,
+    align_content: AlignContent,
+    align_items: AlignItems,
+    justify_content: JustifyContent,
+}
+
+impl FlexContainerConfig {
+    fn new(container_style: &ComputedValues) -> FlexContainerConfig {
+        let flex_direction = container_style.clone_flex_direction();
+        let flex_axis = FlexAxis::from(flex_direction);
+        let flex_wrap = container_style.get_position().flex_wrap;
+        let container_is_single_line = match flex_wrap {
+            FlexWrap::Nowrap => true,
+            FlexWrap::Wrap | FlexWrap::WrapReverse => false,
+        };
+        let flex_direction_is_reversed = match flex_direction {
+            FlexDirection::Row | FlexDirection::Column => false,
+            FlexDirection::RowReverse | FlexDirection::ColumnReverse => true,
+        };
+        let flex_wrap_reverse = match flex_wrap {
+            FlexWrap::Nowrap | FlexWrap::Wrap => false,
+            FlexWrap::WrapReverse => true,
+        };
+
+        let align_content = container_style.clone_align_content();
+        let align_items = AlignItems(match container_style.clone_align_items().0 {
+            AlignFlags::AUTO | AlignFlags::NORMAL => AlignFlags::STRETCH,
+            align => align,
+        });
+        let justify_content = container_style.clone_justify_content();
+        let main_start_cross_start_sides_are =
+            MainStartCrossStart::from(flex_direction, flex_wrap_reverse);
+
+        FlexContainerConfig {
+            container_is_single_line,
+            flex_axis,
+            flex_direction,
+            flex_direction_is_reversed,
+            flex_wrap,
+            flex_wrap_reverse,
+            main_start_cross_start_sides_are,
+            align_content,
+            align_items,
+            justify_content,
+        }
+    }
+}
+
 #[derive(Debug, Serialize)]
 pub(crate) struct FlexContainer {
     children: Vec<ArcRefCell<FlexLevelBox>>,
 
     #[serde(skip_serializing)]
     style: ServoArc<ComputedValues>,
+
+    /// The configuration of this [`FlexContainer`].
+    config: FlexContainerConfig,
+}
+
+impl FlexContainer {
+    pub(crate) fn new(
+        style: &ServoArc<ComputedValues>,
+        children: Vec<ArcRefCell<FlexLevelBox>>,
+    ) -> Self {
+        Self {
+            children,
+            style: style.clone(),
+            config: FlexContainerConfig::new(style),
+        }
+    }
 }
 
 #[derive(Debug, Serialize)]
@@ -37,4 +118,8 @@ impl FlexItemBox {
     fn style(&self) -> &ServoArc<ComputedValues> {
         self.independent_formatting_context.style()
     }
+
+    fn base_fragment_info(&self) -> BaseFragmentInfo {
+        self.independent_formatting_context.base_fragment_info()
+    }
 }
diff --git a/tests/wpt/meta/css/css-flexbox/alignment/flex-align-baseline-flex-001.html.ini b/tests/wpt/meta/css/css-flexbox/alignment/flex-align-baseline-flex-001.html.ini
@@ -23,9 +23,6 @@
   [.target > * 27]
     expected: FAIL
 
-  [.target > * 29]
-    expected: FAIL
-
   [.target > * 31]
     expected: FAIL
 

diff --git a/tests/wpt/meta/css/css-flexbox/anonymous-flex-item-004.html.ini b/tests/wpt/meta/css/css-flexbox/anonymous-flex-item-004.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/anonymous-flex-item-005.html.ini b/tests/wpt/meta/css/css-flexbox/anonymous-flex-item-005.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/anonymous-flex-item-006.html.ini b/tests/wpt/meta/css/css-flexbox/anonymous-flex-item-006.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-aspect-ratio-img-column-011.html.ini b/tests/wpt/meta/css/css-flexbox/flex-aspect-ratio-img-column-011.html.ini
@@ -1,16 +1,10 @@
 [flex-aspect-ratio-img-column-011.html]
-  [.flexbox 10]
-    expected: FAIL
-
   [.flexbox 5]
     expected: FAIL
 
   [.flexbox 7]
     expected: FAIL
 
-  [.flexbox 6]
-    expected: FAIL
-
   [.flexbox 1]
     expected: FAIL
 

diff --git a/tests/wpt/meta/css/css-flexbox/flex-basis-011.html.ini b/tests/wpt/meta/css/css-flexbox/flex-basis-011.html.ini
@@ -0,0 +1,2 @@
+[flex-basis-011.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-flexbox/flex-basis-intrinsics-001.html.ini b/tests/wpt/meta/css/css-flexbox/flex-basis-intrinsics-001.html.ini
@@ -14,17 +14,5 @@
   [.flex-item 10]
     expected: FAIL
 
-  [.flex-item 4]
-    expected: FAIL
-
-  [.flex-item 5]
-    expected: FAIL
-
-  [.flex-item 6]
-    expected: FAIL
-
-  [.flex-item 11]
-    expected: FAIL
-
   [.flex-item 12]
     expected: FAIL
diff --git a/tests/wpt/meta/css/css-flexbox/flex-item-min-height-min-content.html.ini b/tests/wpt/meta/css/css-flexbox/flex-item-min-height-min-content.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-001.xht.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-001.xht.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-002.xht.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-002.xht.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-003.xht.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-003.xht.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-011.xht.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-011.xht.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-016.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-016.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-017.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-017.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-018.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-018.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-019.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-019.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-024.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-024.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-027.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-027.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-030.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-030.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flex-minimum-size-001.html.ini b/tests/wpt/meta/css/css-flexbox/flex-minimum-size-001.html.ini
@@ -1,6 +1,3 @@
 [flex-minimum-size-001.html]
-  [.flexbox, .inline-flexbox 2]
-    expected: FAIL
-
   [.flexbox, .inline-flexbox 3]
     expected: FAIL
diff --git a/tests/wpt/meta/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html.ini b/tests/wpt/meta/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html.ini
@@ -8,8 +8,5 @@
   [.flexbox 6]
     expected: FAIL
 
-  [.flexbox 1]
-    expected: FAIL
-
   [.flexbox 2]
     expected: FAIL
diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-basic-block-vert-001.xhtml.ini b/tests/wpt/meta/css/css-flexbox/flexbox-basic-block-vert-001.xhtml.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-flex-basis-content-004a.html.ini b/tests/wpt/meta/css/css-flexbox/flexbox-flex-basis-content-004a.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-flex-basis-content-004b.html.ini b/tests/wpt/meta/css/css-flexbox/flexbox-flex-basis-content-004b.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flexbox-single-line-clamp-2.html.ini b/tests/wpt/meta/css/css-flexbox/flexbox-single-line-clamp-2.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flexbox_flow-column-wrap-reverse.html.ini b/tests/wpt/meta/css/css-flexbox/flexbox_flow-column-wrap-reverse.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/flexbox_flow-column-wrap.html.ini b/tests/wpt/meta/css/css-flexbox/flexbox_flow-column-wrap.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/gap-007-lr.html.ini b/tests/wpt/meta/css/css-flexbox/gap-007-lr.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/gap-007-ltr.html.ini b/tests/wpt/meta/css/css-flexbox/gap-007-ltr.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/gap-007-rl.html.ini b/tests/wpt/meta/css/css-flexbox/gap-007-rl.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/gap-007-rtl.html.ini b/tests/wpt/meta/css/css-flexbox/gap-007-rtl.html.ini
diff --git a/tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-002.html.ini b/tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-002.html.ini
@@ -1,33 +1,3 @@
 [image-as-flexitem-size-002.html]
   [.flexbox > img 4]
     expected: FAIL
-
-  [.flexbox > img 11]
-    expected: FAIL
-
-  [.flexbox > img 10]
-    expected: FAIL
-
-  [.flexbox > img 1]
-    expected: FAIL
-
-  [.flexbox > img 2]
-    expected: FAIL
-
-  [.flexbox > img 5]
-    expected: FAIL
-
-  [.flexbox > img 8]
-    expected: FAIL
-
-  [.flexbox > img 9]
-    expected: FAIL
-
-  [.flexbox > img 12]
-    expected: FAIL
-
-  [.flexbox > img 13]
-    expected: FAIL
-
-  [.flexbox > img 16]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-002v.html.ini b/tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-002v.html.ini
@@ -1,33 +1,3 @@
 [image-as-flexitem-size-002v.html]
   [.flexbox > img 4]
     expected: FAIL
-
-  [.flexbox > img 11]
-    expected: FAIL
-
-  [.flexbox > img 10]
-    expected: FAIL
-
-  [.flexbox > img 1]
-    expected: FAIL
-
-  [.flexbox > img 2]
-    expected: FAIL
-
-  [.flexbox > img 5]
-    expected: FAIL
-
-  [.flexbox > img 8]
-    expected: FAIL
-
-  [.flexbox > img 9]
-    expected: FAIL
-
-  [.flexbox > img 12]
-    expected: FAIL
-
-  [.flexbox > img 13]
-    expected: FAIL
-
-  [.flexbox > img 16]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-004.html.ini b/tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-004.html.ini
@@ -1,10 +1,4 @@
 [image-as-flexitem-size-004.html]
-  [.flexbox > img 10]
-    expected: FAIL
-
-  [.flexbox > img 13]
-    expected: FAIL
-
   [.flexbox > img 8]
     expected: FAIL
 
@@ -19,18 +13,3 @@
 
   [.flexbox > img 1]
     expected: FAIL
-
-  [.flexbox > img 12]
-    expected: FAIL
-
-  [.flexbox > img 9]
-    expected: FAIL
-
-  [.flexbox > img 2]
-    expected: FAIL
-
-  [.flexbox > img 11]
-    expected: FAIL
-
-  [.flexbox > img 16]
-    expected: FAIL