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>
This commit is contained in:
Martin Robinson 2024-08-14 16:25:09 +02:00 committed by GitHub
parent c059bab6f4
commit 7633bdccd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
124 changed files with 541 additions and 605 deletions

View file

@ -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.

View file

@ -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 shouldnt 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,
min_size,
max_size,
flex_context
.flex_axis
.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 shouldnt 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,
// 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,
}
container_style.clone_flex_direction()
}
// “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 containers inline axis
// https://drafts.csswg.org/css-writing-modes/#orthogonal-flows
assert_eq!(
flex_context.containing_block.style.writing_mode,
self.box_.style().writing_mode,
"Mixed writing modes are not supported yet"
// https://drafts.csswg.org/css-writing-modes/#orthogonal-flows
let container_writing_mode = flex_context.containing_block.style.writing_mode;
assert_eq!(
container_writing_mode,
self.box_.style().writing_mode,
"Mixed writing modes are not supported yet"
);
// … and also the items 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 items 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),
);
FlexItemLayoutResult {
hypothetical_cross_size: cross_size,
fragments,
positioning_context,
FlexItemLayoutResult {
hypothetical_cross_size: cross_size,
fragments,
positioning_context,
// 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,
}
},
// 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,
}
},
FlexAxis::Column => {
todo!()
// Note: this panic shouldnt happen since the start of `FlexContainer::layout`
// forces `FlexAxis::Row`.
IndependentFormattingContext::NonReplaced(non_replaced) => {
let cross_size = match used_cross_size_override {
Some(s) => AuOrAuto::LengthPercentage(s),
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,
content_min_size,
content_max_size,
flex_axis.vec2_to_flex_relative(content_box_size),
flex_axis.vec2_to_flex_relative(content_min_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(
layout_context,
container_writing_mode,
content_box_size,
content_min_size_no_auto,
content_max_size,
pbm_auto_is_zero,
// Compute the min-content and max-content contributions of the item.
// <https://drafts.csswg.org/css-flexbox/#intrinsic-item-contributions>
assert_eq!(
flex_axis,
FlexAxis::Row,
"The main axis should be the inline one"
);
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>,
min_size: LogicalVec2<GenericLengthPercentageOrAuto<Au>>,
max_size: LogicalVec2<Option<Au>>,
content_box_size: FlexRelativeVec2<AuOrAuto>,
min_size: FlexRelativeVec2<GenericLengthPercentageOrAuto<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**
// > If the items preferred main size is definite and not automatic, then the specified
// > size suggestion is that size. It is otherwise undefined.
let specified_size_suggestion = content_box_size.inline.non_auto();
// > **specified size suggestion**
// > If the items preferred main size is definite and not automatic, then the specified
// > size suggestion is that size. It is otherwise undefined.
let specified_size_suggestion = content_box_size.main.non_auto();
// > **transferred size suggestion**
// > If the item has a preferred aspect ratio and its preferred cross size is definite, then the
// > 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 {
let (is_replaced, main_size_over_cross_size_intrinsic_ratio) =
match self.independent_formatting_context {
IndependentFormattingContext::NonReplaced(_) => (false, None),
IndependentFormattingContext::Replaced(ref replaced) => (
true,
replaced
IndependentFormattingContext::Replaced(ref replaced) => {
let ratio = 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
// > 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 its 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.inline)
// > **transferred size suggestion**
// > If the item has a preferred aspect ratio and its preferred cross size is definite, then the
// > 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 (
main_size_over_cross_size_intrinsic_ratio,
content_box_size.cross,
) {
(Some(ratio), AuOrAuto::LengthPercentage(cross_size)) => {
let cross_size = cross_size
.clamp_between_extremums(min_size.cross.auto_is(Au::zero), max_size.cross);
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 its 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)
}
}

View file

@ -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

View file

@ -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, || {
contents.inline_content_sizes(layout_context, style.writing_mode)
})
let size = sizing::outer_inline(
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))
},

View file

@ -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) => {
let style = &non_replaced.style;
let content_sizes = &mut non_replaced.content_sizes;
let contents = &mut non_replaced.contents;
sizing::outer_inline(style, containing_block_writing_mode, || {
*content_sizes.get_or_insert_with(|| {
contents.inline_content_sizes(layout_context, style.writing_mode)
})
})
},
Self::Replaced(replaced) => {
sizing::outer_inline(&replaced.style, containing_block_writing_mode, || {
replaced.contents.inline_content_sizes(&replaced.style)
})
},
Self::NonReplaced(non_replaced) => non_replaced.outer_inline_content_sizes(
layout_context,
containing_block_writing_mode,
get_auto_minimum,
),
Self::Replaced(replaced) => sizing::outer_inline(
&replaced.style,
containing_block_writing_mode,
|| replaced.contents.inline_content_sizes(&replaced.style),
get_auto_minimum,
),
}
}
}
@ -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 {

View file

@ -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() +
padding.inline_start.percentage_relative_to(zero) +
padding.inline_end.percentage_relative_to(zero);
let pb_lengths = Au::from(
border.inline_sum() +
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
.auto_is(Length::zero);
.map(Au::from)
.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());
let clamp = |l: Au| {
l.clamp_between_extremums(min_inline_size.into(), max_inline_size.map(|t| t.into()))
};
.and_then(|lp| lp.to_length())
.map(Au::from);
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::BorderBox => clamp(content_box_size + pb_lengths.into()),
BoxSizing::ContentBox => clamp(content_box_size) + pb_lengths,
BoxSizing::BorderBox => clamp(content_box_size + pb_lengths),
}
}),
};

View file

@ -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",
[

View file

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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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

View file

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

View file

@ -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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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

Some files were not shown because too many files have changed in this diff Show more