mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 00:57:45 +00:00
LibWeb: Resolve % min-sizes against 0 while under min-content constraint
When resolving a percentage min-width or min-height size against a containing block currently under a min-content constraint, we should act as if the containing block has zero size in that axis.
This commit is contained in:
parent
1578121dcb
commit
a988241f3f
7 changed files with 43 additions and 24 deletions
|
@ -0,0 +1,6 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 0x17.46875 children: inline
|
||||||
|
line 0 width: 0, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from ImageBox start: 0, length: 0, rect: [8,21 0x0]
|
||||||
|
ImageBox <img> at (8,21) content-size 0x0 children: not-inline
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!DOCTYPE html><style>
|
||||||
|
body { width: min-content; }
|
||||||
|
img { max-width: 100%; }
|
||||||
|
</style><body><img src="120.png">
|
|
@ -253,7 +253,7 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
|
||||||
|
|
||||||
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
||||||
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
||||||
if (!should_treat_max_width_as_none(box)) {
|
if (!should_treat_max_width_as_none(box, available_space.width)) {
|
||||||
auto max_width = calculate_inner_width(box, remaining_available_space.width, computed_values.max_width());
|
auto max_width = calculate_inner_width(box, remaining_available_space.width, computed_values.max_width());
|
||||||
auto used_width_px = used_width.is_auto() ? remaining_available_space.width.to_px() : used_width.to_px(box);
|
auto used_width_px = used_width.is_auto() ? remaining_available_space.width.to_px() : used_width.to_px(box);
|
||||||
if (used_width_px > max_width.to_px(box)) {
|
if (used_width_px > max_width.to_px(box)) {
|
||||||
|
@ -331,7 +331,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
|
||||||
|
|
||||||
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
||||||
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
||||||
if (!should_treat_max_width_as_none(box)) {
|
if (!should_treat_max_width_as_none(box, available_space.width)) {
|
||||||
auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
|
auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
|
||||||
if (width.to_px(box) > max_width.to_px(box))
|
if (width.to_px(box) > max_width.to_px(box))
|
||||||
width = compute_width(max_width);
|
width = compute_width(max_width);
|
||||||
|
@ -458,7 +458,7 @@ void BlockFormattingContext::compute_height(Box const& box, AvailableSpace const
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!should_treat_max_height_as_none(box)) {
|
if (!should_treat_max_height_as_none(box, available_space.height)) {
|
||||||
auto max_height = calculate_inner_height(box, available_space.height, computed_values.max_height());
|
auto max_height = calculate_inner_height(box, available_space.height, computed_values.max_height());
|
||||||
if (!max_height.is_auto())
|
if (!max_height.is_auto())
|
||||||
height = min(height, max_height.to_px(box));
|
height = min(height, max_height.to_px(box));
|
||||||
|
|
|
@ -256,7 +256,7 @@ FormattingContext::ShrinkToFitResult FormattingContext::calculate_shrink_to_fit_
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_width, CSSPixels input_height, Box const& box) const
|
CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_width, CSSPixels input_height, Box const& box, AvailableSpace const& available_space) const
|
||||||
{
|
{
|
||||||
// 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
|
// 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
|
||||||
|
|
||||||
|
@ -266,9 +266,9 @@ CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_w
|
||||||
auto height_of_containing_block = containing_block_state.content_height();
|
auto height_of_containing_block = containing_block_state.content_height();
|
||||||
|
|
||||||
CSSPixels specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().to_px(box, width_of_containing_block);
|
CSSPixels specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().to_px(box, width_of_containing_block);
|
||||||
CSSPixels specified_max_width = should_treat_max_width_as_none(box) ? input_width : box.computed_values().max_width().to_px(box, width_of_containing_block);
|
CSSPixels specified_max_width = should_treat_max_width_as_none(box, available_space.width) ? input_width : box.computed_values().max_width().to_px(box, width_of_containing_block);
|
||||||
CSSPixels specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().to_px(box, height_of_containing_block);
|
CSSPixels specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().to_px(box, height_of_containing_block);
|
||||||
CSSPixels specified_max_height = should_treat_max_height_as_none(box) ? input_height : box.computed_values().max_height().to_px(box, height_of_containing_block);
|
CSSPixels specified_max_height = should_treat_max_height_as_none(box, available_space.height) ? input_height : box.computed_values().max_height().to_px(box, height_of_containing_block);
|
||||||
|
|
||||||
auto min_width = min(specified_min_width, specified_max_width);
|
auto min_width = min(specified_min_width, specified_max_width);
|
||||||
auto max_width = max(specified_min_width, specified_max_width);
|
auto max_width = max(specified_min_width, specified_max_width);
|
||||||
|
@ -446,13 +446,13 @@ CSSPixels FormattingContext::compute_width_for_replaced_element(Box const& box,
|
||||||
if (computed_width.is_auto() && computed_height.is_auto() && box.has_preferred_aspect_ratio()) {
|
if (computed_width.is_auto() && computed_height.is_auto() && box.has_preferred_aspect_ratio()) {
|
||||||
CSSPixels w = used_width;
|
CSSPixels w = used_width;
|
||||||
CSSPixels h = tentative_height_for_replaced_element(box, computed_height, available_space);
|
CSSPixels h = tentative_height_for_replaced_element(box, computed_height, available_space);
|
||||||
used_width = solve_replaced_size_constraint(w, h, box).width();
|
used_width = solve_replaced_size_constraint(w, h, box, available_space).width();
|
||||||
return used_width;
|
return used_width;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
||||||
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
||||||
if (!should_treat_max_width_as_none(box)) {
|
if (!should_treat_max_width_as_none(box, available_space.width)) {
|
||||||
auto const& computed_max_width = box.computed_values().max_width();
|
auto const& computed_max_width = box.computed_values().max_width();
|
||||||
if (used_width > computed_max_width.to_px(box, width_of_containing_block)) {
|
if (used_width > computed_max_width.to_px(box, width_of_containing_block)) {
|
||||||
used_width = tentative_width_for_replaced_element(box, computed_max_width, available_space);
|
used_width = tentative_width_for_replaced_element(box, computed_max_width, available_space);
|
||||||
|
@ -521,13 +521,13 @@ CSSPixels FormattingContext::compute_height_for_replaced_element(Box const& box,
|
||||||
if (computed_width.is_auto() && computed_height.is_auto() && box.has_preferred_aspect_ratio()) {
|
if (computed_width.is_auto() && computed_height.is_auto() && box.has_preferred_aspect_ratio()) {
|
||||||
CSSPixels w = tentative_width_for_replaced_element(box, computed_width, available_space);
|
CSSPixels w = tentative_width_for_replaced_element(box, computed_width, available_space);
|
||||||
CSSPixels h = used_height;
|
CSSPixels h = used_height;
|
||||||
used_height = solve_replaced_size_constraint(w, h, box).height();
|
used_height = solve_replaced_size_constraint(w, h, box, available_space).height();
|
||||||
return used_height;
|
return used_height;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. If this tentative height is greater than 'max-height', the rules above are applied again,
|
// 2. If this tentative height is greater than 'max-height', the rules above are applied again,
|
||||||
// but this time using the value of 'max-height' as the computed value for 'height'.
|
// but this time using the value of 'max-height' as the computed value for 'height'.
|
||||||
if (!should_treat_max_height_as_none(box)) {
|
if (!should_treat_max_height_as_none(box, available_space.height)) {
|
||||||
auto const& computed_max_height = box.computed_values().max_height();
|
auto const& computed_max_height = box.computed_values().max_height();
|
||||||
if (used_height > computed_max_height.to_px(box, height_of_containing_block)) {
|
if (used_height > computed_max_height.to_px(box, height_of_containing_block)) {
|
||||||
used_height = tentative_height_for_replaced_element(box, computed_max_height, available_space);
|
used_height = tentative_height_for_replaced_element(box, computed_max_height, available_space);
|
||||||
|
@ -688,7 +688,7 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
|
||||||
|
|
||||||
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
||||||
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
||||||
if (!should_treat_max_width_as_none(box)) {
|
if (!should_treat_max_width_as_none(box, available_space.width)) {
|
||||||
auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
|
auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
|
||||||
if (used_width.to_px(box) > max_width.to_px(box)) {
|
if (used_width.to_px(box) > max_width.to_px(box)) {
|
||||||
used_width = try_compute_width(max_width);
|
used_width = try_compute_width(max_width);
|
||||||
|
@ -1655,19 +1655,24 @@ bool box_is_sized_as_replaced_element(Box const& box)
|
||||||
return is<ReplacedBox>(box) || box.has_preferred_aspect_ratio();
|
return is<ReplacedBox>(box) || box.has_preferred_aspect_ratio();
|
||||||
}
|
}
|
||||||
|
|
||||||
bool FormattingContext::should_treat_max_width_as_none(Box const& box) const
|
bool FormattingContext::should_treat_max_width_as_none(Box const& box, AvailableSize const& available_width) const
|
||||||
{
|
{
|
||||||
auto const& max_width = box.computed_values().max_width();
|
auto const& max_width = box.computed_values().max_width();
|
||||||
if (max_width.is_none())
|
if (max_width.is_none())
|
||||||
return true;
|
return true;
|
||||||
if (box.is_absolutely_positioned())
|
if (box.is_absolutely_positioned())
|
||||||
return false;
|
return false;
|
||||||
if (max_width.contains_percentage() && !m_state.get(*box.non_anonymous_containing_block()).has_definite_width())
|
if (max_width.contains_percentage()) {
|
||||||
return true;
|
if (available_width.is_min_content())
|
||||||
|
return false;
|
||||||
|
if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_width())
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
bool FormattingContext::should_treat_max_height_as_none(Box const& box) const
|
bool FormattingContext::should_treat_max_height_as_none(Box const& box, AvailableSize const& available_height) const
|
||||||
{
|
{
|
||||||
// https://www.w3.org/TR/CSS22/visudet.html#min-max-heights
|
// https://www.w3.org/TR/CSS22/visudet.html#min-max-heights
|
||||||
// If the height of the containing block is not specified explicitly (i.e., it depends on content height),
|
// If the height of the containing block is not specified explicitly (i.e., it depends on content height),
|
||||||
|
@ -1678,8 +1683,12 @@ bool FormattingContext::should_treat_max_height_as_none(Box const& box) const
|
||||||
return true;
|
return true;
|
||||||
if (box.is_absolutely_positioned())
|
if (box.is_absolutely_positioned())
|
||||||
return false;
|
return false;
|
||||||
if (max_height.contains_percentage() && !m_state.get(*box.non_anonymous_containing_block()).has_definite_height())
|
if (max_height.contains_percentage()) {
|
||||||
return true;
|
if (available_height.is_min_content())
|
||||||
|
return false;
|
||||||
|
if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_height())
|
||||||
|
return true;
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -99,8 +99,8 @@ protected:
|
||||||
static bool should_treat_width_as_auto(Box const&, AvailableSpace const&);
|
static bool should_treat_width_as_auto(Box const&, AvailableSpace const&);
|
||||||
static bool should_treat_height_as_auto(Box const&, AvailableSpace const&);
|
static bool should_treat_height_as_auto(Box const&, AvailableSpace const&);
|
||||||
|
|
||||||
[[nodiscard]] bool should_treat_max_width_as_none(Box const&) const;
|
[[nodiscard]] bool should_treat_max_width_as_none(Box const&, AvailableSize const&) const;
|
||||||
[[nodiscard]] bool should_treat_max_height_as_none(Box const&) const;
|
[[nodiscard]] bool should_treat_max_height_as_none(Box const&, AvailableSize const&) const;
|
||||||
|
|
||||||
OwnPtr<FormattingContext> layout_inside(Box const&, LayoutMode, AvailableSpace const&);
|
OwnPtr<FormattingContext> layout_inside(Box const&, LayoutMode, AvailableSpace const&);
|
||||||
void compute_inset(Box const& box);
|
void compute_inset(Box const& box);
|
||||||
|
@ -129,7 +129,7 @@ protected:
|
||||||
CSSPixels tentative_height_for_replaced_element(Box const&, CSS::Size const& computed_height, AvailableSpace const&) const;
|
CSSPixels tentative_height_for_replaced_element(Box const&, CSS::Size const& computed_height, AvailableSpace const&) const;
|
||||||
CSSPixels compute_auto_height_for_block_formatting_context_root(Box const&) const;
|
CSSPixels compute_auto_height_for_block_formatting_context_root(Box const&) const;
|
||||||
|
|
||||||
[[nodiscard]] CSSPixelSize solve_replaced_size_constraint(CSSPixels input_width, CSSPixels input_height, Box const&) const;
|
[[nodiscard]] CSSPixelSize solve_replaced_size_constraint(CSSPixels input_width, CSSPixels input_height, Box const&, AvailableSpace const&) const;
|
||||||
|
|
||||||
ShrinkToFitResult calculate_shrink_to_fit_widths(Box const&);
|
ShrinkToFitResult calculate_shrink_to_fit_widths(Box const&);
|
||||||
|
|
||||||
|
|
|
@ -149,7 +149,7 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
|
||||||
}
|
}
|
||||||
|
|
||||||
CSSPixels width = unconstrained_width;
|
CSSPixels width = unconstrained_width;
|
||||||
if (!should_treat_max_width_as_none(box)) {
|
if (!should_treat_max_width_as_none(box, m_available_space->width)) {
|
||||||
auto max_width = box.computed_values().max_width().to_px(box, width_of_containing_block);
|
auto max_width = box.computed_values().max_width().to_px(box, width_of_containing_block);
|
||||||
width = min(width, max_width);
|
width = min(width, max_width);
|
||||||
}
|
}
|
||||||
|
|
|
@ -186,9 +186,9 @@ void TableFormattingContext::compute_cell_measures(AvailableSpace const& availab
|
||||||
|
|
||||||
CSSPixels max_height = computed_values.height().is_auto() ? max_content_height : height;
|
CSSPixels max_height = computed_values.height().is_auto() ? max_content_height : height;
|
||||||
CSSPixels max_width = computed_values.width().is_auto() ? max_content_width : width;
|
CSSPixels max_width = computed_values.width().is_auto() ? max_content_width : width;
|
||||||
if (!should_treat_max_height_as_none(cell.box))
|
if (!should_treat_max_height_as_none(cell.box, available_space.height))
|
||||||
max_height = min(max_height, computed_values.max_height().to_px(cell.box, containing_block.content_height()));
|
max_height = min(max_height, computed_values.max_height().to_px(cell.box, containing_block.content_height()));
|
||||||
if (!should_treat_max_width_as_none(cell.box))
|
if (!should_treat_max_width_as_none(cell.box, available_space.width))
|
||||||
max_width = min(max_width, computed_values.max_width().to_px(cell.box, containing_block.content_width()));
|
max_width = min(max_width, computed_values.max_width().to_px(cell.box, containing_block.content_width()));
|
||||||
|
|
||||||
if (computed_values.height().is_percentage()) {
|
if (computed_values.height().is_percentage()) {
|
||||||
|
@ -355,7 +355,7 @@ void TableFormattingContext::compute_table_width()
|
||||||
// of resolved-table-width, and the used min-width of the table.
|
// of resolved-table-width, and the used min-width of the table.
|
||||||
CSSPixels resolved_table_width = computed_values.width().to_px(table_box(), width_of_table_wrapper_containing_block);
|
CSSPixels resolved_table_width = computed_values.width().to_px(table_box(), width_of_table_wrapper_containing_block);
|
||||||
used_width = max(resolved_table_width, used_min_width);
|
used_width = max(resolved_table_width, used_min_width);
|
||||||
if (!should_treat_max_width_as_none(table_box()))
|
if (!should_treat_max_width_as_none(table_box(), m_available_space->width))
|
||||||
used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
|
used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue