layout: Initial implementation of flex-direction: column and column-reverse (#33031)

This change removes restrictions on using the column layout mode of
flexbox and adds an initial implementation of sizing for that flex
direction. There's a lot of missing pieces still, but in some cases this
does render column flexbox.

In particular, there are now two code paths for preferred widths
(intrinsic size) calcuation: one in the main axis (row) and one in
the cross axis (column) corresponding to the flex direciton with
horizontal writing modes.

In addition, `FlexItemBox::inline_content_sizes` is removed in favor of
making `sizing::outer_inline` /
`IndependentFormattingContext::outer_inline_content_sizes` generic
enough to handle using a different value for auto minimum sizes, which
flexbox needs.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>

components/layout_2020/flexbox/geom.rs

@@ -67,7 +67,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, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq)]
 pub(super) enum FlexAxis {
     /// The main axis is the inline axis of the container (not necessarily of flex items!),
     /// cross is block.

components/layout_2020/flexbox/layout.rs

@@ -204,15 +204,62 @@ impl FlexContainer {
         &mut self,
         layout_context: &LayoutContext,
         writing_mode: WritingMode,
+    ) -> ContentSizes {
+        let flex_axis = FlexAxis::from(used_flex_direction(&*self.style));
+        match flex_axis {
+            FlexAxis::Row => self.main_content_sizes(layout_context, flex_axis, writing_mode),
+            FlexAxis::Column => self.cross_content_sizes(layout_context, flex_axis),
+        }
+    }
+
+    fn cross_content_sizes(
+        &mut self,
+        layout_context: &LayoutContext,
+        flex_axis: FlexAxis,
+    ) -> ContentSizes {
+        // <https://drafts.csswg.org/css-flexbox/#intrinsic-cross-sizes>
+        assert_eq!(
+            flex_axis,
+            FlexAxis::Column,
+            "The cross axis should be the inline one"
+        );
+        let mut content_sizes = ContentSizes::zero();
+        for kid in self.children.iter() {
+            let kid = &mut *kid.borrow_mut();
+            match kid {
+                FlexLevelBox::FlexItem(item) => {
+                    // TODO: For the max-content size we should distribute items into
+                    // columns, and sum the column sizes and gaps.
+                    content_sizes.max_assign(
+                        item.independent_formatting_context
+                            .inline_content_sizes(layout_context),
+                    );
+                },
+                FlexLevelBox::OutOfFlowAbsolutelyPositionedBox(_) => {},
+            }
+        }
+        content_sizes
+    }
+
+    fn main_content_sizes(
+        &mut self,
+        layout_context: &LayoutContext,
+        flex_axis: FlexAxis,
+        writing_mode: WritingMode,
     ) -> ContentSizes {
         // - TODO: calculate intrinsic cross sizes when container is a column
         // (and check for ‘writing-mode’?)
         // - TODO: Collapsed flex items need to be skipped for intrinsic size calculation.
 
-        // <https://drafts.csswg.org/css-flexbox/#intrinsic-cross-sizes>
+        // <https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes>
         // > It is calculated, considering only non-collapsed flex items, by:
         // > 1. For each flex item, subtract its outer flex base size from its max-content
         // > contribution size.
+        assert_eq!(
+            flex_axis,
+            FlexAxis::Row,
+            "The main axis should be the inline one"
+        );
         let mut chosen_max_flex_fraction = f32::NEG_INFINITY;
         let mut chosen_min_flex_fraction = f32::NEG_INFINITY;
         let mut sum_of_flex_grow_factors = 0.0;
@@ -236,7 +283,7 @@ impl FlexContainer {
                     sum_of_flex_grow_factors += item.style().get_position().flex_grow.0;
                     sum_of_flex_shrink_factors += item.style().get_position().flex_shrink.0;
 
-                    let info = item.inline_content_size_info(
+                    let info = item.main_content_size_info(
                         layout_context,
                         writing_mode,
                         container_is_horizontal,
@@ -455,7 +502,7 @@ impl FlexContainer {
                 // https://github.com/w3c/csswg-drafts/issues/4905
                 // Gecko reportedly uses `block-size: fit-content` in this case
                 // (which requires running another pass of the "full" layout algorithm)
-                todo!()
+                containing_block.block_size.auto_is(Au::zero)
                 // Note: this panic shouldn’t happen since the start of `FlexContainer::layout`
                 // forces `FlexAxis::Row`.
             },
@@ -842,9 +889,11 @@ impl<'a> FlexItem<'a> {
                 box_.automatic_min_size(
                     flex_context.layout_context,
                     cross_axis_is_item_block_axis,
-                    content_box_size,
+                    flex_context
-                    min_size,
+                        .flex_axis
-                    max_size,
+                        .vec2_to_flex_relative(content_box_size),
+                    flex_context.flex_axis.vec2_to_flex_relative(min_size),
+                    flex_context.flex_axis.vec2_to_flex_relative(max_size),
                 )
             }),
             block: min_size.block.auto_is(Au::zero),
@@ -969,7 +1018,7 @@ fn flex_base_size(
             } else {
                 // FIXME: block-axis content sizing requires another pass
                 // of "full" layout
-                todo!()
+                Au::zero()
                 // Note: this panic shouldn’t happen since the start of `FlexContainer::layout`
                 // forces `FlexAxis::Row` and the `writing-mode` property is disabled.
             }
@@ -989,13 +1038,7 @@ fn cross_axis_is_item_block_axis(
 }
 
 fn used_flex_direction(container_style: &ComputedValues) -> FlexDirection {
-    // Column flex containers are not fully implemented yet,
+    container_style.clone_flex_direction()
-    // so give a different layout instead of panicking.
-    // FIXME: implement `todo!`s for FlexAxis::Column below, and remove this
-    match container_style.clone_flex_direction() {
-        FlexDirection::Row | FlexDirection::Column => FlexDirection::Row,
-        FlexDirection::RowReverse | FlexDirection::ColumnReverse => FlexDirection::RowReverse,
-    }
 }
 
 // “Collect flex items into flex lines”
@@ -1596,111 +1639,139 @@ impl FlexItem<'_> {
                 .positioning_context
                 .collects_for_nearest_positioned_ancestor(),
         );
-        match flex_context.flex_axis {
-            FlexAxis::Row => {
-                // The main axis is the container’s inline axis
 
-                // https://drafts.csswg.org/css-writing-modes/#orthogonal-flows
+        // https://drafts.csswg.org/css-writing-modes/#orthogonal-flows
-                assert_eq!(
+        let container_writing_mode = flex_context.containing_block.style.writing_mode;
-                    flex_context.containing_block.style.writing_mode,
+        assert_eq!(
-                    self.box_.style().writing_mode,
+            container_writing_mode,
-                    "Mixed writing modes are not supported yet"
+            self.box_.style().writing_mode,
+            "Mixed writing modes are not supported yet"
+        );
+        // … and also the item’s inline axis.
+
+        match self.box_ {
+            IndependentFormattingContext::Replaced(replaced) => {
+                let pbm = replaced
+                    .style
+                    .padding_border_margin(flex_context.containing_block);
+                let box_size = used_cross_size_override.map(|size| LogicalVec2 {
+                    inline: replaced
+                        .style
+                        .content_box_size(flex_context.containing_block, &pbm)
+                        .inline
+                        .map(Au::from),
+                    block: AuOrAuto::LengthPercentage(size),
+                });
+                let size = replaced.contents.used_size_as_if_inline_element(
+                    flex_context.containing_block,
+                    &replaced.style,
+                    box_size,
+                    &pbm,
+                );
+                let cross_size = flex_context.vec2_to_flex_relative(size).cross;
+                let container_writing_mode = flex_context.containing_block.style.writing_mode;
+                let fragments = replaced.contents.make_fragments(
+                    &replaced.style,
+                    size.to_physical_size(container_writing_mode),
                 );
-                // … and also the item’s inline axis.
 
-                match self.box_ {
+                FlexItemLayoutResult {
-                    IndependentFormattingContext::Replaced(replaced) => {
+                    hypothetical_cross_size: cross_size,
-                        let pbm = replaced
+                    fragments,
-                            .style
+                    positioning_context,
-                            .padding_border_margin(flex_context.containing_block);
-                        let box_size = used_cross_size_override.map(|size| LogicalVec2 {
-                            inline: replaced
-                                .style
-                                .content_box_size(flex_context.containing_block, &pbm)
-                                .inline
-                                .map(Au::from),
-                            block: AuOrAuto::LengthPercentage(size),
-                        });
-                        let size = replaced.contents.used_size_as_if_inline_element(
-                            flex_context.containing_block,
-                            &replaced.style,
-                            box_size,
-                            &pbm,
-                        );
-                        let cross_size = flex_context.vec2_to_flex_relative(size).cross;
-                        let container_writing_mode =
-                            flex_context.containing_block.style.writing_mode;
-                        let fragments = replaced.contents.make_fragments(
-                            &replaced.style,
-                            size.to_physical_size(container_writing_mode),
-                        );
 
-                        FlexItemLayoutResult {
+                    // We will need to synthesize the baseline, but since the used cross
-                            hypothetical_cross_size: cross_size,
+                    // size can differ from the hypothetical cross size, we should defer
-                            fragments,
+                    // synthesizing until needed.
-                            positioning_context,
+                    baseline_relative_to_margin_box: None,
-
-                            // We will need to synthesize the baseline, but since the used cross
-                            // size can differ from the hypothetical cross size, we should defer
-                            // synthesizing until needed.
-                            baseline_relative_to_margin_box: None,
-                        }
-                    },
-                    IndependentFormattingContext::NonReplaced(non_replaced) => {
-                        let block_size = match used_cross_size_override {
-                            Some(s) => AuOrAuto::LengthPercentage(s),
-                            None => self.content_box_size.cross.map(|t| t),
-                        };
-
-                        let item_as_containing_block = ContainingBlock {
-                            inline_size: used_main_size,
-                            block_size,
-                            style: &non_replaced.style,
-                        };
-                        let IndependentLayout {
-                            fragments,
-                            content_block_size,
-                            baselines: content_box_baselines,
-                            ..
-                        } = non_replaced.layout(
-                            flex_context.layout_context,
-                            &mut positioning_context,
-                            &item_as_containing_block,
-                            flex_context.containing_block,
-                        );
-
-                        let baselines_relative_to_margin_box =
-                            self.layout_baselines_relative_to_margin_box(&content_box_baselines);
-
-                        let baseline_relative_to_margin_box = match self.align_self.0.value() {
-                            // ‘baseline’ computes to ‘first baseline’.
-                            AlignFlags::BASELINE => baselines_relative_to_margin_box.first,
-                            AlignFlags::LAST_BASELINE => baselines_relative_to_margin_box.last,
-                            _ => None,
-                        };
-
-                        let hypothetical_cross_size = self
-                            .content_box_size
-                            .cross
-                            .auto_is(|| content_block_size)
-                            .clamp_between_extremums(
-                                self.content_min_size.cross,
-                                self.content_max_size.cross,
-                            );
-
-                        FlexItemLayoutResult {
-                            hypothetical_cross_size,
-                            fragments,
-                            positioning_context,
-                            baseline_relative_to_margin_box,
-                        }
-                    },
                 }
             },
-            FlexAxis::Column => {
+            IndependentFormattingContext::NonReplaced(non_replaced) => {
-                todo!()
+                let cross_size = match used_cross_size_override {
-                // Note: this panic shouldn’t happen since the start of `FlexContainer::layout`
+                    Some(s) => AuOrAuto::LengthPercentage(s),
-                // forces `FlexAxis::Row`.
+                    None => self.content_box_size.cross.map(|t| t),
+                };
+
+                let item_writing_mode = non_replaced.style.writing_mode;
+                let item_is_horizontal = item_writing_mode.is_horizontal();
+                let cross_axis_is_item_block_axis = cross_axis_is_item_block_axis(
+                    flex_context
+                        .containing_block
+                        .style
+                        .writing_mode
+                        .is_horizontal(),
+                    item_is_horizontal,
+                    flex_context.flex_axis,
+                );
+                let (inline_size, block_size) = if cross_axis_is_item_block_axis {
+                    (used_main_size, cross_size)
+                } else {
+                    (
+                        cross_size.auto_is(|| {
+                            let content_contributions = non_replaced.outer_inline_content_sizes(
+                                flex_context.layout_context,
+                                container_writing_mode,
+                                Au::zero,
+                            );
+                            flex_context
+                                .containing_block
+                                .inline_size
+                                .min(content_contributions.max_content)
+                                .max(content_contributions.min_content) -
+                                self.pbm_auto_is_zero.cross
+                        }),
+                        AuOrAuto::LengthPercentage(used_main_size),
+                    )
+                };
+
+                let item_as_containing_block = ContainingBlock {
+                    inline_size,
+                    block_size,
+                    style: &non_replaced.style,
+                };
+                let IndependentLayout {
+                    fragments,
+                    content_block_size,
+                    baselines: content_box_baselines,
+                    ..
+                } = non_replaced.layout(
+                    flex_context.layout_context,
+                    &mut positioning_context,
+                    &item_as_containing_block,
+                    flex_context.containing_block,
+                );
+
+                let baselines_relative_to_margin_box =
+                    self.layout_baselines_relative_to_margin_box(&content_box_baselines);
+
+                let baseline_relative_to_margin_box = match self.align_self.0.value() {
+                    // ‘baseline’ computes to ‘first baseline’.
+                    AlignFlags::BASELINE => baselines_relative_to_margin_box.first,
+                    AlignFlags::LAST_BASELINE => baselines_relative_to_margin_box.last,
+                    _ => None,
+                };
+
+                let hypothetical_cross_size = self
+                    .content_box_size
+                    .cross
+                    .auto_is(|| {
+                        if cross_axis_is_item_block_axis {
+                            content_block_size
+                        } else {
+                            inline_size
+                        }
+                    })
+                    .clamp_between_extremums(
+                        self.content_min_size.cross,
+                        self.content_max_size.cross,
+                    );
+
+                FlexItemLayoutResult {
+                    hypothetical_cross_size,
+                    fragments,
+                    positioning_context,
+                    baseline_relative_to_margin_box,
+                }
             },
         }
     }
@@ -1841,7 +1912,7 @@ impl FlexItem<'_> {
 }
 
 impl FlexItemBox {
-    fn inline_content_size_info(
+    fn main_content_size_info(
         &mut self,
         layout_context: &LayoutContext,
         container_writing_mode: WritingMode,
@@ -1877,9 +1948,9 @@ impl FlexItemBox {
         let automatic_min_size = self.automatic_min_size(
             layout_context,
             cross_axis_is_item_block_axis,
-            content_box_size,
+            flex_axis.vec2_to_flex_relative(content_box_size),
-            content_min_size,
+            flex_axis.vec2_to_flex_relative(content_min_size),
-            content_max_size,
+            flex_axis.vec2_to_flex_relative(content_max_size),
         );
 
         let content_box_size = flex_axis.vec2_to_flex_relative(content_box_size);
@@ -1913,14 +1984,19 @@ impl FlexItemBox {
             padding_border,
         );
 
-        let content_contribution_sizes = self.inline_content_sizes(
+        // Compute the min-content and max-content contributions of the item.
-            layout_context,
+        // <https://drafts.csswg.org/css-flexbox/#intrinsic-item-contributions>
-            container_writing_mode,
+        assert_eq!(
-            content_box_size,
+            flex_axis,
-            content_min_size_no_auto,
+            FlexAxis::Row,
-            content_max_size,
+            "The main axis should be the inline one"
-            pbm_auto_is_zero,
         );
+        let content_contribution_sizes = self
+            .independent_formatting_context
+            .outer_inline_content_sizes(layout_context, container_writing_mode, || {
+                automatic_min_size
+            });
+
         let outer_flex_base_size = flex_base_size + pbm_auto_is_zero.main;
         let max_flex_factors = self.desired_flex_factors_for_preferred_width(
             content_contribution_sizes.max_content,
@@ -2012,69 +2088,14 @@ impl FlexItemBox {
         }
     }
 
-    fn inline_content_sizes(
-        &mut self,
-        layout_context: &LayoutContext,
-        writing_mode: WritingMode,
-        content_box_size: FlexRelativeVec2<GenericLengthPercentageOrAuto<Au>>,
-        content_min_size: FlexRelativeVec2<Au>,
-        content_max_size: FlexRelativeVec2<Option<Au>>,
-        pbm_auto_is_zero: FlexRelativeVec2<Au>,
-    ) -> ContentSizes {
-        // TODO: use cross sizes when container is a column
-        // (and check for ‘writing-mode’?)
-
-        // <https://drafts.csswg.org/css-flexbox/#intrinsic-item-contributions>
-        let outer_inline_content_sizes = self
-            .independent_formatting_context
-            .outer_inline_content_sizes(layout_context, writing_mode);
-        let outer_preferred_size = content_box_size
-            .main
-            .non_auto()
-            .map(|preferred_size| preferred_size + pbm_auto_is_zero.main);
-        let outer_min_main_size = content_min_size.main + pbm_auto_is_zero.main;
-        let outer_max_main_size = content_max_size
-            .main
-            .map(|max_main_size| max_main_size + pbm_auto_is_zero.main);
-
-        // > The main-size min-content contribution of a flex item is the larger of its
-        // > outer min-content size and outer preferred size if that is not auto, clamped by
-        // > its min/max main size.
-        let min_content_contribution = outer_preferred_size
-            .map_or(
-                outer_inline_content_sizes.min_content,
-                |outer_preferred_size| {
-                    outer_preferred_size.max(outer_inline_content_sizes.min_content)
-                },
-            )
-            .clamp_between_extremums(outer_min_main_size, outer_max_main_size);
-
-        // > The main-size max-content contribution of a flex item is the larger of its
-        // > outer max-content size and outer preferred size if that is not auto, clamped by
-        // > its min/max main size.
-        let max_content_contribution = outer_preferred_size
-            .map_or(
-                outer_inline_content_sizes.max_content,
-                |outer_preferred_size| {
-                    outer_preferred_size.max(outer_inline_content_sizes.max_content)
-                },
-            )
-            .clamp_between_extremums(outer_min_main_size, outer_max_main_size);
-
-        ContentSizes {
-            min_content: min_content_contribution,
-            max_content: max_content_contribution,
-        }
-    }
-
     /// This is an implementation of <https://drafts.csswg.org/css-flexbox/#min-size-auto>.
     fn automatic_min_size(
         &mut self,
         layout_context: &LayoutContext,
         cross_axis_is_item_block_axis: bool,
-        content_box_size: LogicalVec2<AuOrAuto>,
+        content_box_size: FlexRelativeVec2<AuOrAuto>,
-        min_size: LogicalVec2<GenericLengthPercentageOrAuto<Au>>,
+        min_size: FlexRelativeVec2<GenericLengthPercentageOrAuto<Au>>,
-        max_size: LogicalVec2<Option<Au>>,
+        max_size: FlexRelativeVec2<Option<Au>>,
     ) -> Au {
         // FIXME(stshine): Consider more situations when auto min size is not needed.
         if self
@@ -2085,80 +2106,78 @@ impl FlexItemBox {
             return Au::zero();
         }
 
-        if cross_axis_is_item_block_axis {
+        // > **specified size suggestion**
-            // > **specified size suggestion**
+        // > If the item’s preferred main size is definite and not automatic, then the specified
-            // > If the item’s preferred main size is definite and not automatic, then the specified
+        // > size suggestion is that size. It is otherwise undefined.
-            // > size suggestion is that size. It is otherwise undefined.
+        let specified_size_suggestion = content_box_size.main.non_auto();
-            let specified_size_suggestion = content_box_size.inline.non_auto();
 
-            // > **transferred size suggestion**
+        let (is_replaced, main_size_over_cross_size_intrinsic_ratio) =
-            // > If the item has a preferred aspect ratio and its preferred cross size is definite, then the
+            match self.independent_formatting_context {
-            // > transferred size suggestion is that size (clamped by its minimum and maximum cross sizes if they
-            // > are definite), converted through the aspect ratio. It is otherwise undefined.
-            let transferred_size_suggestion = match self.independent_formatting_context {
-                IndependentFormattingContext::NonReplaced(_) => None,
-                IndependentFormattingContext::Replaced(ref bfc) => {
-                    match (
-                        bfc.contents.inline_size_over_block_size_intrinsic_ratio(
-                            self.independent_formatting_context.style(),
-                        ),
-                        content_box_size.block,
-                    ) {
-                        (Some(ratio), AuOrAuto::LengthPercentage(block_size)) => {
-                            let block_size = block_size.clamp_between_extremums(
-                                min_size.block.auto_is(Au::zero),
-                                max_size.block,
-                            );
-                            Some(block_size.scale_by(ratio))
-                        },
-                        _ => None,
-                    }
-                },
-            };
-
-            // > **content size suggestion**
-            // > The content size suggestion is the min-content size in the main axis, clamped, if it has a
-            // > preferred aspect ratio, by any definite minimum and maximum cross sizes converted through the
-            // > aspect ratio.
-            let inline_content_size = self
-                .independent_formatting_context
-                .inline_content_sizes(layout_context)
-                .min_content;
-            let (is_replaced, aspect_ratio) = match self.independent_formatting_context {
                 IndependentFormattingContext::NonReplaced(_) => (false, None),
-                IndependentFormattingContext::Replaced(ref replaced) => (
+                IndependentFormattingContext::Replaced(ref replaced) => {
-                    true,
+                    let ratio = replaced
-                    replaced
                         .contents
                         .inline_size_over_block_size_intrinsic_ratio(
                             self.independent_formatting_context.style(),
-                        ),
+                        )
-                ),
+                        .map(|ratio| {
+                            if cross_axis_is_item_block_axis {
+                                ratio
+                            } else {
+                                1.0 / ratio
+                            }
+                        });
+                    (true, ratio)
+                },
             };
-            let content_size_suggestion = aspect_ratio
-                .map(|aspect_ratio| {
-                    inline_content_size.clamp_between_extremums(
-                        min_size.block.auto_is(Au::zero).scale_by(aspect_ratio),
-                        max_size.block.map(|l| l.scale_by(aspect_ratio)),
-                    )
-                })
-                .unwrap_or(inline_content_size);
 
-            // > The content-based minimum size of a flex item is the smaller of its specified size
+        // > **transferred size suggestion**
-            // > suggestion and its content size suggestion if its specified size suggestion exists;
+        // > If the item has a preferred aspect ratio and its preferred cross size is definite, then the
-            // > otherwise, the smaller of its transferred size suggestion and its content size
+        // > transferred size suggestion is that size (clamped by its minimum and maximum cross sizes if they
-            // > suggestion if the element is replaced and its transferred size suggestion exists;
+        // > are definite), converted through the aspect ratio. It is otherwise undefined.
-            // > otherwise its content size suggestion. In all cases, the size is clamped by the maximum
+        let transferred_size_suggestion = match (
-            // > main size if it’s definite.
+            main_size_over_cross_size_intrinsic_ratio,
-            match (specified_size_suggestion, transferred_size_suggestion) {
+            content_box_size.cross,
-                (Some(specified), _) => specified.min(content_size_suggestion),
+        ) {
-                (_, Some(transferred)) if is_replaced => transferred.min(content_size_suggestion),
+            (Some(ratio), AuOrAuto::LengthPercentage(cross_size)) => {
-                _ => content_size_suggestion,
+                let cross_size = cross_size
-            }
+                    .clamp_between_extremums(min_size.cross.auto_is(Au::zero), max_size.cross);
-            .clamp_below_max(max_size.inline)
+                Some(cross_size.scale_by(ratio))
+            },
+            _ => None,
+        };
+
+        // > **content size suggestion**
+        // > The content size suggestion is the min-content size in the main axis, clamped, if it has a
+        // > preferred aspect ratio, by any definite minimum and maximum cross sizes converted through the
+        // > aspect ratio.
+        let main_content_size = if cross_axis_is_item_block_axis {
+            self.independent_formatting_context
+                .inline_content_sizes(layout_context)
+                .min_content
         } else {
-            // FIXME(stshine): Implement this when main axis is item's block axis.
             Au::zero()
+        };
+        let content_size_suggestion = main_size_over_cross_size_intrinsic_ratio
+            .map(|ratio| {
+                main_content_size.clamp_between_extremums(
+                    min_size.cross.auto_is(Au::zero).scale_by(ratio),
+                    max_size.cross.map(|l| l.scale_by(ratio)),
+                )
+            })
+            .unwrap_or(main_content_size);
+
+        // > The content-based minimum size of a flex item is the smaller of its specified size
+        // > suggestion and its content size suggestion if its specified size suggestion exists;
+        // > otherwise, the smaller of its transferred size suggestion and its content size
+        // > suggestion if the element is replaced and its transferred size suggestion exists;
+        // > otherwise its content size suggestion. In all cases, the size is clamped by the maximum
+        // > main size if it’s definite.
+        match (specified_size_suggestion, transferred_size_suggestion) {
+            (Some(specified), _) => specified.min(content_size_suggestion),
+            (_, Some(transferred)) if is_replaced => transferred.min(content_size_suggestion),
+            _ => content_size_suggestion,
         }
+        .clamp_below_max(max_size.main)
     }
 }

components/layout_2020/flow/inline/mod.rs

@@ -2389,6 +2389,7 @@ impl<'a> ContentSizesComputation<'a> {
                 let outer = atomic.outer_inline_content_sizes(
                     self.layout_context,
                     self.containing_block_writing_mode,
+                    Au::zero,
                 );
 
                 if !inline_formatting_context

components/layout_2020/flow/mod.rs

@@ -366,7 +366,7 @@ fn calculate_inline_content_size_for_block_level_boxes(
             BlockLevelBox::OutOfFlowFloatBox(ref mut float_box) => {
                 let size = float_box
                     .contents
-                    .outer_inline_content_sizes(layout_context, writing_mode)
+                    .outer_inline_content_sizes(layout_context, writing_mode, Au::zero)
                     .max(ContentSizes::zero());
                 let style_box = &float_box.contents.style().get_box();
                 Some((size, style_box.float, style_box.clear))
@@ -374,9 +374,12 @@ fn calculate_inline_content_size_for_block_level_boxes(
             BlockLevelBox::SameFormattingContextBlock {
                 style, contents, ..
             } => {
-                let size = sizing::outer_inline(style, writing_mode, || {
+                let size = sizing::outer_inline(
-                    contents.inline_content_sizes(layout_context, style.writing_mode)
+                    style,
-                })
+                    writing_mode,
+                    || contents.inline_content_sizes(layout_context, style.writing_mode),
+                    Au::zero,
+                )
                 .max(ContentSizes::zero());
                 // A block in the same BFC can overlap floats, it's not moved next to them,
                 // so we shouldn't add its size to the size of the floats.
@@ -385,7 +388,7 @@ fn calculate_inline_content_size_for_block_level_boxes(
             },
             BlockLevelBox::Independent(ref mut independent) => {
                 let size = independent
-                    .outer_inline_content_sizes(layout_context, writing_mode)
+                    .outer_inline_content_sizes(layout_context, writing_mode, Au::zero)
                     .max(ContentSizes::zero());
                 Some((size, Float::None, independent.style().get_box().clear))
             },

components/layout_2020/formatting_contexts.rs

@@ -189,23 +189,20 @@ impl IndependentFormattingContext {
         &mut self,
         layout_context: &LayoutContext,
         containing_block_writing_mode: WritingMode,
+        get_auto_minimum: impl FnOnce() -> Au,
     ) -> ContentSizes {
         match self {
-            Self::NonReplaced(non_replaced) => {
+            Self::NonReplaced(non_replaced) => non_replaced.outer_inline_content_sizes(
-                let style = &non_replaced.style;
+                layout_context,
-                let content_sizes = &mut non_replaced.content_sizes;
+                containing_block_writing_mode,
-                let contents = &mut non_replaced.contents;
+                get_auto_minimum,
-                sizing::outer_inline(style, containing_block_writing_mode, || {
+            ),
-                    *content_sizes.get_or_insert_with(|| {
+            Self::Replaced(replaced) => sizing::outer_inline(
-                        contents.inline_content_sizes(layout_context, style.writing_mode)
+                &replaced.style,
-                    })
+                containing_block_writing_mode,
-                })
+                || replaced.contents.inline_content_sizes(&replaced.style),
-            },
+                get_auto_minimum,
-            Self::Replaced(replaced) => {
+            ),
-                sizing::outer_inline(&replaced.style, containing_block_writing_mode, || {
-                    replaced.contents.inline_content_sizes(&replaced.style)
-                })
-            },
         }
     }
 }
@@ -246,6 +243,25 @@ impl NonReplacedFormattingContext {
             .content_sizes
             .get_or_insert_with(|| contents.inline_content_sizes(layout_context, writing_mode))
     }
+
+    pub fn outer_inline_content_sizes(
+        &mut self,
+        layout_context: &LayoutContext,
+        containing_block_writing_mode: WritingMode,
+        get_auto_minimum: impl FnOnce() -> Au,
+    ) -> ContentSizes {
+        sizing::outer_inline(
+            &self.style,
+            containing_block_writing_mode,
+            || {
+                *self.content_sizes.get_or_insert_with(|| {
+                    self.contents
+                        .inline_content_sizes(layout_context, self.style.writing_mode)
+                })
+            },
+            get_auto_minimum,
+        )
+    }
 }
 
 impl NonReplacedFormattingContextContents {

components/layout_2020/sizing.rs

@@ -91,6 +91,7 @@ pub(crate) fn outer_inline(
     style: &ComputedValues,
     containing_block_writing_mode: WritingMode,
     get_content_size: impl FnOnce() -> ContentSizes,
+    get_auto_minimum: impl FnOnce() -> Au,
 ) -> ContentSizes {
     let padding = style.padding(containing_block_writing_mode);
     let border = style.border_width(containing_block_writing_mode);
@@ -100,9 +101,11 @@ pub(crate) fn outer_inline(
     // for determining intrinsic size contributions.
     // https://drafts.csswg.org/css-sizing-3/#min-percentage-contribution
     let zero = Length::zero();
-    let pb_lengths = border.inline_sum() +
+    let pb_lengths = Au::from(
-        padding.inline_start.percentage_relative_to(zero) +
+        border.inline_sum() +
-        padding.inline_end.percentage_relative_to(zero);
+            padding.inline_start.percentage_relative_to(zero) +
+            padding.inline_end.percentage_relative_to(zero),
+    );
     let mut m_lengths = zero;
     if let Some(m) = margin.inline_start.non_auto() {
         m_lengths += m.percentage_relative_to(zero)
@@ -123,22 +126,21 @@ pub(crate) fn outer_inline(
         .inline
         // Percentages for 'min-width' are treated as zero
         .percentage_relative_to(zero)
-        // FIXME: 'auto' is not zero in Flexbox
+        .map(Au::from)
-        .auto_is(Length::zero);
+        .auto_is(get_auto_minimum);
     let max_inline_size = style
         .max_box_size(containing_block_writing_mode)
         .inline
         // Percentages for 'max-width' are treated as 'none'
-        .and_then(|lp| lp.to_length());
+        .and_then(|lp| lp.to_length())
-    let clamp = |l: Au| {
+        .map(Au::from);
-        l.clamp_between_extremums(min_inline_size.into(), max_inline_size.map(|t| t.into()))
+    let clamp = |l: Au| l.clamp_between_extremums(min_inline_size, max_inline_size);
-    };
 
     let border_box_sizes = match inline_size {
         Some(non_auto) => {
             let clamped = clamp(non_auto.into());
             let border_box_size = match box_sizing {
-                BoxSizing::ContentBox => clamped + pb_lengths.into(),
+                BoxSizing::ContentBox => clamped + pb_lengths,
                 BoxSizing::BorderBox => clamped,
             };
             ContentSizes {
@@ -149,8 +151,8 @@ pub(crate) fn outer_inline(
         None => get_content_size().map(|content_box_size| {
             match box_sizing {
                 // Clamp to 'min-width' and 'max-width', which are sizing the…
-                BoxSizing::ContentBox => clamp(content_box_size) + pb_lengths.into(),
+                BoxSizing::ContentBox => clamp(content_box_size) + pb_lengths,
-                BoxSizing::BorderBox => clamp(content_box_size + pb_lengths.into()),
+                BoxSizing::BorderBox => clamp(content_box_size + pb_lengths),
             }
         }),
     };

tests/wpt/meta/MANIFEST.json

@@ -166126,6 +166126,19 @@
        {}
       ]
      ],
+     "column-flex-child-with-max-width.html": [
+      "b1a6a84ded65341c37d7048c07de2fb5ee9036a9",
+      [
+       null,
+       [
+        [
+         "/css/reference/ref-filled-green-100px-square.xht",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "content-height-with-scrollbars.html": [
       "1872d5f81d7f9a9fc5ae004f71b63d94b71df19a",
       [

tests/wpt/meta/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html.ini

@@ -0,0 +1,2 @@
+[self-align-safe-unsafe-flex-003.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/align-content-wrap-002.html.ini

@@ -1,9 +0,0 @@
-[align-content-wrap-002.html]
-  [.flex-horizontal, .flex-vertical 4]
-    expected: FAIL
-
-  [.flex-horizontal, .flex-vertical 5]
-    expected: FAIL
-
-  [.flex-horizontal, .flex-vertical 6]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/align-items-009.html.ini

@@ -1,2 +0,0 @@
-[align-items-009.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/align-self-015.html.ini

@@ -1,2 +0,0 @@
-[align-self-015.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/alignment/flex-align-baseline-001.html.ini

@@ -13,6 +13,3 @@
 
   [#target > div 6]
     expected: FAIL
-
-  [#target > div 4]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/alignment/flex-align-baseline-006.html.ini

@@ -1,3 +1,9 @@
 [flex-align-baseline-006.html]
   [#target > div 3]
     expected: FAIL
+
+  [#target > div 1]
+    expected: FAIL
+
+  [#target > div 2]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/alignment/flex-align-baseline-007.html.ini

@@ -1,3 +1,9 @@
 [flex-align-baseline-007.html]
   [#target > div 3]
     expected: FAIL
+
+  [#target > div 1]
+    expected: FAIL
+
+  [#target > div 2]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/alignment/flex-align-baseline-flex-001.html.ini

@@ -49,3 +49,9 @@
 
   [.target > * 25]
     expected: FAIL
+
+  [.target > * 43]
+    expected: FAIL
+
+  [.target > * 47]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/auto-height-column-with-border-and-padding.html.ini

@@ -0,0 +1,2 @@
+[auto-height-column-with-border-and-padding.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/box-sizing-001.html.ini

@@ -1,9 +1,3 @@
 [box-sizing-001.html]
-  [.flexbox 10]
+  [.flexbox 7]
-    expected: FAIL
-
-  [.flexbox 8]
-    expected: FAIL
-
-  [.flexbox 9]
     expected: FAIL

tests/wpt/meta/css/css-flexbox/box-sizing-min-max-sizes-001.html.ini

@@ -0,0 +1,3 @@
+[box-sizing-min-max-sizes-001.html]
+  [.flexbox 2]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/change-column-flex-width.html.ini

@@ -0,0 +1,3 @@
+[change-column-flex-width.html]
+  [#container 1]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/column-flex-child-with-overflow-scroll.html.ini

@@ -0,0 +1,6 @@
+[column-flex-child-with-overflow-scroll.html]
+  [.flexbox 1]
+    expected: FAIL
+
+  [.flexbox 2]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/columns-height-set-via-top-bottom.html.ini

@@ -1,7 +1,3 @@
 [columns-height-set-via-top-bottom.html]
-  [.flexbox 1]
-    expected: FAIL
-
   [.flexbox 2]
     expected: FAIL
-

tests/wpt/meta/css/css-flexbox/fieldset-as-container-justify-center.tentative.html.ini

@@ -1,3 +0,0 @@
-[fieldset-as-container-justify-center.tentative.html]
-  [.item 1]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-aspect-ratio-img-column-001.html.ini

@@ -1,2 +0,0 @@
-[flex-aspect-ratio-img-column-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-aspect-ratio-img-column-004.html.ini

@@ -1,2 +0,0 @@
-[flex-aspect-ratio-img-column-004.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-basis-010.html.ini

@@ -1,2 +0,0 @@
-[flex-basis-010.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-basis-011.html.ini

@@ -1,2 +0,0 @@
-[flex-basis-011.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-basis-intrinsics-001.html.ini

@@ -25,3 +25,6 @@
 
   [.flex-item 11]
     expected: FAIL
+
+  [.flex-item 12]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-column-relayout-assert.html.ini

@@ -0,0 +1,3 @@
+[flex-column-relayout-assert.html]
+  [.flexbox 1]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-direction-column-overlap-001.html.ini

@@ -0,0 +1,3 @@
+[flex-direction-column-overlap-001.html]
+  [#container 1]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-factor-less-than-one.html.ini

@@ -2,23 +2,23 @@
   [.flexbox 5]
     expected: FAIL
 
-  [.flexbox 7]
-    expected: FAIL
-
-  [.flexbox 3]
-    expected: FAIL
-
   [.flexbox 8]
     expected: FAIL
 
-  [.flexbox 16]
-    expected: FAIL
-
   [.flexbox 17]
     expected: FAIL
 
   [.flexbox 14]
     expected: FAIL
 
-  [.flexbox 12]
+  [.flexbox 4]
+    expected: FAIL
+
+  [.flexbox 9]
+    expected: FAIL
+
+  [.flexbox 13]
+    expected: FAIL
+
+  [.flexbox 18]
     expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-007.html.ini

@@ -1,2 +0,0 @@
-[flex-flow-007.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-008.html.ini

@@ -1,2 +0,0 @@
-[flex-flow-008.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-009.html.ini

@@ -1,2 +0,0 @@
-[flex-flow-009.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-010.html.ini

@@ -1,2 +0,0 @@
-[flex-flow-010.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-011.html.ini

@@ -1,2 +0,0 @@
-[flex-flow-011.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-012.html.ini

@@ -1,2 +0,0 @@
-[flex-flow-012.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-flow-013.html.ini

@@ -8,12 +8,6 @@
   [.flexbox 4]
     expected: FAIL
 
-  [.flexbox 5]
-    expected: FAIL
-
-  [.flexbox 6]
-    expected: FAIL
-
   [.flexbox 7]
     expected: FAIL
 
@@ -28,3 +22,9 @@
 
   [.flexbox 3]
     expected: FAIL
+
+  [.flexbox 9]
+    expected: FAIL
+
+  [.flexbox 10]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-height-min-content.html.ini

@@ -0,0 +1,2 @@
+[flex-height-min-content.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-item-compressible-002.html.ini

@@ -23,18 +23,6 @@
   [.flexbox 5]
     expected: FAIL
 
-  [.flexbox 6]
-    expected: FAIL
-
-  [.flexbox 7]
-    expected: FAIL
-
-  [.flexbox 1]
-    expected: FAIL
-
-  [.flexbox 2]
-    expected: FAIL
-
   [.flexbox 3]
     expected: FAIL
 

tests/wpt/meta/css/css-flexbox/flex-item-contains-strict.html.ini

@@ -1,12 +1,18 @@
 [flex-item-contains-strict.html]
-  [.inline-flex 1]
-    expected: FAIL
-
   [.inline-flex 2]
     expected: FAIL
 
-  [.inline-flex 5]
-    expected: FAIL
-
   [.inline-flex 6]
     expected: FAIL
+
+  [.inline-flex 3]
+    expected: FAIL
+
+  [.inline-flex 7]
+    expected: FAIL
+
+  [.inline-flex 1]
+    expected: FAIL
+
+  [.inline-flex 5]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-margin-no-collapse.html.ini

@@ -1,2 +0,0 @@
-[flex-margin-no-collapse.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-002.xht.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-002.xht]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-004.xht.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-004.xht]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-007.xht.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-007.xht]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-008.xht.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-008.xht]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-012.html.ini

@@ -1,4 +0,0 @@
-[flex-minimum-height-flex-items-012.html]
-  [.flexbox 1]
-    expected: FAIL
-

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-014.html.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-014.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-019.html.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-019.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-022.html.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-022.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-024.html.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-024.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-026.html.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-026.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-028.html.ini

@@ -1,2 +0,0 @@
-[flex-minimum-height-flex-items-028.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-height-flex-items-030.html.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-030.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-size-001.html.ini

@@ -1,3 +1,6 @@
 [flex-minimum-size-001.html]
   [.flexbox, .inline-flexbox 2]
     expected: FAIL
+
+  [.flexbox, .inline-flexbox 3]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-minimum-width-flex-items-015.html.ini

@@ -1,2 +0,0 @@
-[flex-minimum-width-flex-items-015.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html.ini

@@ -1,7 +1,4 @@
 [flex-one-sets-flex-basis-to-zero-px.html]
-  [.flexbox 3]
-    expected: FAIL
-
   [.flexbox 4]
     expected: FAIL
 
@@ -10,3 +7,9 @@
 
   [.flexbox 6]
     expected: FAIL
+
+  [.flexbox 1]
+    expected: FAIL
+
+  [.flexbox 2]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html.ini

@@ -0,0 +1,3 @@
+[flex-outer-flexbox-column-recalculate-height-on-resize-001.html]
+  [.OuterFlexbox 1]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-wrap-002.html.ini

@@ -1,2 +0,0 @@
-[flex-wrap-002.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-align-self-stretch-vert-001.html.ini

@@ -1,2 +0,0 @@
-[flexbox-align-self-stretch-vert-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-break-request-vert-002a.html.ini

@@ -1,2 +0,0 @@
-[flexbox-break-request-vert-002a.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-break-request-vert-002b.html.ini

@@ -1,2 +0,0 @@
-[flexbox-break-request-vert-002b.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-definite-sizes-005.html.ini

@@ -1,2 +0,0 @@
-[flexbox-definite-sizes-005.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-definite-sizes-006.html.ini

@@ -0,0 +1,2 @@
+[flexbox-definite-sizes-006.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-basis-content-004a.html.ini

@@ -0,0 +1,2 @@
+[flexbox-flex-basis-content-004a.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-basis-content-004b.html.ini

@@ -0,0 +1,2 @@
+[flexbox-flex-basis-content-004b.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html.ini

@@ -0,0 +1,2 @@
+[flexbox-flex-direction-column-percentage-ignored.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-direction-column-reverse.htm.ini

@@ -1,2 +0,0 @@
-[flexbox-flex-direction-column-reverse.htm]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-direction-column.htm.ini

@@ -1,2 +0,0 @@
-[flexbox-flex-direction-column.htm]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-flow-001.html.ini

@@ -1,2 +0,0 @@
-[flexbox-flex-flow-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-flex-flow-002.html.ini

@@ -1,2 +0,0 @@
-[flexbox-flex-flow-002.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-overflow-vert-001.html.ini

@@ -1,2 +0,0 @@
-[flexbox-overflow-vert-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-overflow-vert-002.html.ini

@@ -1,2 +0,0 @@
-[flexbox-overflow-vert-002.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-overflow-vert-003.html.ini

@@ -1,2 +0,0 @@
-[flexbox-overflow-vert-003.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-overflow-vert-004.html.ini

@@ -1,2 +0,0 @@
-[flexbox-overflow-vert-004.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox-writing-mode-001.html.ini

@@ -1,2 +0,0 @@
-[flexbox-writing-mode-001.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox_flow-column-reverse-wrap-reverse.html.ini

@@ -1,2 +0,0 @@
-[flexbox_flow-column-reverse-wrap-reverse.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox_flow-column-reverse-wrap.html.ini

@@ -1,2 +0,0 @@
-[flexbox_flow-column-reverse-wrap.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/flexbox_order.html.ini

@@ -1,2 +0,0 @@
-[flexbox_order.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-002-lr.html.ini

@@ -1,2 +0,0 @@
-[gap-002-lr.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-002-ltr.html.ini

@@ -1,2 +0,0 @@
-[gap-002-ltr.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-002-rl.html.ini

@@ -1,2 +0,0 @@
-[gap-002-rl.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-002-rtl.html.ini

@@ -1,2 +0,0 @@
-[gap-002-rtl.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-003-lr.html.ini

@@ -1,2 +0,0 @@
-[gap-003-lr.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-003-rl.html.ini

@@ -1,2 +0,0 @@
-[gap-003-rl.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-005-lr.html.ini

@@ -1,2 +0,0 @@
-[gap-005-lr.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-005-ltr.html.ini

@@ -1,2 +0,0 @@
-[gap-005-ltr.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-005-rl.html.ini

@@ -1,2 +0,0 @@
-[gap-005-rl.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/gap-005-rtl.html.ini

@@ -1,2 +0,0 @@
-[gap-005-rtl.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-002.html.ini

@@ -8,11 +8,26 @@
   [.flexbox > img 10]
     expected: FAIL
 
-  [.flexbox > img 7]
+  [.flexbox > img 1]
     expected: FAIL
 
-  [.flexbox > img 6]
+  [.flexbox > img 2]
     expected: FAIL
 
-  [.flexbox > img 3]
+  [.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

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-002v.html.ini

@@ -8,11 +8,26 @@
   [.flexbox > img 10]
     expected: FAIL
 
-  [.flexbox > img 7]
+  [.flexbox > img 1]
     expected: FAIL
 
-  [.flexbox > img 6]
+  [.flexbox > img 2]
     expected: FAIL
 
-  [.flexbox > img 3]
+  [.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

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-004.html.ini

@@ -1,7 +1,4 @@
 [image-as-flexitem-size-004.html]
-  [.flexbox > img 15]
-    expected: FAIL
-
   [.flexbox > img 10]
     expected: FAIL
 
@@ -14,9 +11,6 @@
   [.flexbox > img 5]
     expected: FAIL
 
-  [.flexbox > img 4]
-    expected: FAIL
-
   [.flexbox > img 7]
     expected: FAIL
 
@@ -26,20 +20,17 @@
   [.flexbox > img 1]
     expected: FAIL
 
-  [.flexbox > img 3]
-    expected: FAIL
-
-  [.flexbox > img 14]
-    expected: FAIL
-
   [.flexbox > img 12]
     expected: FAIL
 
-  [.flexbox > img 18]
-    expected: FAIL
-
   [.flexbox > img 9]
     expected: FAIL
 
   [.flexbox > img 2]
     expected: FAIL
+
+  [.flexbox > img 11]
+    expected: FAIL
+
+  [.flexbox > img 16]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-004v.html.ini

@@ -1,7 +1,4 @@
 [image-as-flexitem-size-004v.html]
-  [.flexbox > img 15]
-    expected: FAIL
-
   [.flexbox > img 10]
     expected: FAIL
 
@@ -14,9 +11,6 @@
   [.flexbox > img 5]
     expected: FAIL
 
-  [.flexbox > img 4]
-    expected: FAIL
-
   [.flexbox > img 7]
     expected: FAIL
 
@@ -26,20 +20,17 @@
   [.flexbox > img 1]
     expected: FAIL
 
-  [.flexbox > img 3]
-    expected: FAIL
-
-  [.flexbox > img 14]
-    expected: FAIL
-
   [.flexbox > img 12]
     expected: FAIL
 
-  [.flexbox > img 18]
-    expected: FAIL
-
   [.flexbox > img 9]
     expected: FAIL
 
   [.flexbox > img 2]
     expected: FAIL
+
+  [.flexbox > img 11]
+    expected: FAIL
+
+  [.flexbox > img 16]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-006.html.ini

@@ -2,21 +2,6 @@
   [.flexbox > img 15]
     expected: FAIL
 
-  [.flexbox > img 14]
-    expected: FAIL
-
-  [.flexbox > img 17]
-    expected: FAIL
-
-  [.flexbox > img 12]
-    expected: FAIL
-
-  [.flexbox > img 18]
-    expected: FAIL
-
-  [.flexbox > img 9]
-    expected: FAIL
-
   [.flexbox > img 8]
     expected: FAIL
 
@@ -37,18 +22,3 @@
 
   [.flexbox > img 3]
     expected: FAIL
-
-  [.flexbox > img 2]
-    expected: FAIL
-
-  [.flexbox > img 16]
-    expected: FAIL
-
-  [.flexbox > img 11]
-    expected: FAIL
-
-  [.flexbox > img 10]
-    expected: FAIL
-
-  [.flexbox > img 13]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-006v.html.ini

@@ -1,34 +1,7 @@
 [image-as-flexitem-size-006v.html]
-  [.flexbox > img 10]
-    expected: FAIL
-
-  [.flexbox > img 11]
-    expected: FAIL
-
-  [.flexbox > img 13]
-    expected: FAIL
-
-  [.flexbox > img 10]
-    expected: FAIL
-
   [.flexbox > img 15]
     expected: FAIL
 
-  [.flexbox > img 14]
-    expected: FAIL
-
-  [.flexbox > img 17]
-    expected: FAIL
-
-  [.flexbox > img 12]
-    expected: FAIL
-
-  [.flexbox > img 18]
-    expected: FAIL
-
-  [.flexbox > img 9]
-    expected: FAIL
-
   [.flexbox > img 8]
     expected: FAIL
 
@@ -49,9 +22,3 @@
 
   [.flexbox > img 3]
     expected: FAIL
-
-  [.flexbox > img 2]
-    expected: FAIL
-
-  [.flexbox > img 16]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/intrinsic-size/col-wrap-009.html.ini

@@ -0,0 +1,2 @@
+[col-wrap-009.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/item-with-max-height-and-scrollbar.html.ini

@@ -0,0 +1,2 @@
+[item-with-max-height-and-scrollbar.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/justify-content-006.html.ini

@@ -1,4 +0,0 @@
-[justify-content-006.html]
-  [.middle > div 1]
-    expected: FAIL
-

tests/wpt/meta/css/css-flexbox/layout-algorithm_algo-cross-line-002.html.ini

@@ -1,2 +0,0 @@
-[layout-algorithm_algo-cross-line-002.html]
-  expected: FAIL

tests/wpt/meta/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html.ini

@@ -0,0 +1,3 @@
+[orthogonal-writing-modes-and-intrinsic-sizing.html]
+  [.flexbox 2]
+    expected: FAIL

tests/wpt/meta/css/css-flexbox/overflow-auto-006.html.ini

@@ -0,0 +1,12 @@
+[overflow-auto-006.html]
+  [.flexbox, .inline-flexbox 7]
+    expected: FAIL
+
+  [.flexbox, .inline-flexbox 8]
+    expected: FAIL
+
+  [.flexbox, .inline-flexbox 9]
+    expected: FAIL
+
+  [.flexbox, .inline-flexbox 10]
+    expected: FAIL