From 3a11b552869400c9ce727d10e34384b52c0be353 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Wed, 14 Jun 2023 18:35:02 +0200 Subject: [PATCH] LibWeb: Treat % max-width as none when containing block size indefinite 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 --- ...-and-indefinite-containing-block-width.txt | 7 +++++++ ...and-indefinite-containing-block-width.html | 4 ++++ .../LibWeb/Layout/BlockFormattingContext.cpp | 4 ++-- .../LibWeb/Layout/FormattingContext.cpp | 20 +++++++++++++++---- .../LibWeb/Layout/FormattingContext.h | 1 + .../LibWeb/Layout/InlineFormattingContext.cpp | 5 ++--- .../LibWeb/Layout/TableFormattingContext.cpp | 4 ++-- 7 files changed, 34 insertions(+), 11 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/img-with-percentage-max-width-and-indefinite-containing-block-width.txt create mode 100644 Tests/LibWeb/Layout/input/img-with-percentage-max-width-and-indefinite-containing-block-width.html diff --git a/Tests/LibWeb/Layout/expected/img-with-percentage-max-width-and-indefinite-containing-block-width.txt b/Tests/LibWeb/Layout/expected/img-with-percentage-max-width-and-indefinite-containing-block-width.txt new file mode 100644 index 0000000000..ab02b9a790 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/img-with-percentage-max-width-and-indefinite-containing-block-width.txt @@ -0,0 +1,7 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x136 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x120 children: not-inline + BlockContainer
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 at (8,8) content-size 120x120 children: not-inline diff --git a/Tests/LibWeb/Layout/input/img-with-percentage-max-width-and-indefinite-containing-block-width.html b/Tests/LibWeb/Layout/input/img-with-percentage-max-width-and-indefinite-containing-block-width.html new file mode 100644 index 0000000000..4fdf085ea9 --- /dev/null +++ b/Tests/LibWeb/Layout/input/img-with-percentage-max-width-and-indefinite-containing-block-width.html @@ -0,0 +1,4 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 57d230a7d5..db482ff25b 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -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); diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index c11a783060..27a63cf472 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -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(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 diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.h b/Userland/Libraries/LibWeb/Layout/FormattingContext.h index fc5f3fb65a..307e1d9664 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.h @@ -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 layout_inside(Box const&, LayoutMode, AvailableSpace const&); diff --git a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp index ba201757e1..651dbbc952 100644 --- a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp @@ -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); } diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp index 9d7a0d4a63..5d46624bdc 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp @@ -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)); }