LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-27 21:21:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Treat % max-width as none when containing block size indefinite

Browse Source 
This is technically "undefined behavior" per CSS 2.2, but it seems
sensible to mirror the behavior of max-height in the same situation.
It also appears to match how other engines behave.

Fixes #19242
This commit is contained in:
Andreas Kling 2023-06-14 18:35:02 +02:00
parent ff1606ffaf
commit 3a11b55286
Notes: sideshowbarker 2024-07-16 21:42:29 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/3a11b55286
Pull-request: https://github.com/SerenityOS/serenity/pull/19398
Issue: https://github.com/SerenityOS/serenity/issues/19242
7 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Tests/LibWeb/Layout/expected/img-with-percentage-max-width-and-indefinite-containing-block-width.txt Normal file
View File

@ -0,0 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x136 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x120 children: not-inline
BlockContainer <div> at (8,8) content-size 784x120 children: inline
line 0 width: 120, height: 120, bottom: 120, baseline: 120
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 120x120]
ImageBox <img> at (8,8) content-size 120x120 children: not-inline

4
Tests/LibWeb/Layout/input/img-with-percentage-max-width-and-indefinite-containing-block-width.html Normal file
View File

@ -0,0 +1,4 @@
<!DOCTYPE html><style>
body { display: max-content; }
img { max-width: 100%; }
</style><body><div><img src="120.png">

4
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View File

@ -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,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
if (!computed_values.max_width().is_none()) {
if (!should_treat_max_width_as_none(box)) {
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);
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,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
if (!computed_values.max_width().is_none()) {
if (!should_treat_max_width_as_none(box)) {
auto max_width = calculate_inner_width(box, available_space.width, computed_values.max_width());
if (width.to_px(box) > max_width.to_px(box))
width = compute_width(max_width);

20
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View File

@ -266,7 +266,7 @@ CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_w
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_max_width = box.computed_values().max_width().is_none() ? 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) ? 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_max_height = should_treat_max_height_as_none(box) ? input_height : box.computed_values().max_height().to_px(box, height_of_containing_block);
@ -452,8 +452,8 @@ CSSPixels FormattingContext::compute_width_for_replaced_element(Box const& box,
// 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'.
auto computed_max_width = box.computed_values().max_width();
if (!computed_max_width.is_none()) {
if (!should_treat_max_width_as_none(box)) {
auto const& computed_max_width = box.computed_values().max_width();
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);
}
@ -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,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
if (!computed_values.max_width().is_none()) {
if (!should_treat_max_width_as_none(box)) {
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)) {
used_width = try_compute_width(max_width);
@ -1655,6 +1655,18 @@ bool box_is_sized_as_replaced_element(Box const& box)
return is<ReplacedBox>(box) || box.has_preferred_aspect_ratio();
}
bool FormattingContext::should_treat_max_width_as_none(Box const& box) const
{
auto const& max_width = box.computed_values().max_width();
if (max_width.is_none())
return true;
if (box.is_absolutely_positioned())
return false;
if (max_width.contains_percentage() && !m_state.get(*box.non_anonymous_containing_block()).has_definite_width())
return true;
return false;
}
bool FormattingContext::should_treat_max_height_as_none(Box const& box) const
{
// https://www.w3.org/TR/CSS22/visudet.html#min-max-heights

1
Userland/Libraries/LibWeb/Layout/FormattingContext.h
View File

@ -99,6 +99,7 @@ protected:
static bool should_treat_width_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_height_as_none(Box const&) const;
OwnPtr<FormattingContext> layout_inside(Box const&, LayoutMode, AvailableSpace const&);

5
Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
View File

@ -149,9 +149,8 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
}
CSSPixels width = unconstrained_width;
auto computed_max_width = box.computed_values().max_width();
if (!computed_max_width.is_none()) {
auto max_width = computed_max_width.to_px(box, width_of_containing_block);
if (!should_treat_max_width_as_none(box)) {
auto max_width = box.computed_values().max_width().to_px(box, width_of_containing_block);
width = min(width, max_width);
}

4
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
View File

@ -188,7 +188,7 @@ void TableFormattingContext::compute_cell_measures(AvailableSpace const& availab
CSSPixels max_width = computed_values.width().is_auto() ? max_content_width : width;
if (!should_treat_max_height_as_none(cell.box))
max_height = min(max_height, computed_values.max_height().to_px(cell.box, containing_block.content_height()));
if (!computed_values.max_width().is_none())
if (!should_treat_max_width_as_none(cell.box))
max_width = min(max_width, computed_values.max_width().to_px(cell.box, containing_block.content_width()));
if (computed_values.height().is_percentage()) {
@ -350,7 +350,7 @@ void TableFormattingContext::compute_table_width()
// 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);
used_width = max(resolved_table_width, used_min_width);
if (!computed_values.max_width().is_none())
if (!should_treat_max_width_as_none(table_box()))
used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
}