diff --git a/Tests/LibWeb/Layout/expected/grid/grid-row-height-affected-by-item-margins.txt b/Tests/LibWeb/Layout/expected/grid/grid-row-height-affected-by-item-margins.txt new file mode 100644 index 0000000000..acb4626b8b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-row-height-affected-by-item-margins.txt @@ -0,0 +1,8 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x97.817501 [BFC] children: not-inline + Box at (10,10) content-size 780x79.817501 [GFC] children: not-inline + BlockContainer

at (55.5,32.440000) content-size 689x34.9375 [BFC] children: inline + line 0 width: 492.96875, height: 34.9375, bottom: 34.9375, baseline: 27.0625 + frag 0 from TextNode start: 0, length: 31, rect: [55.5,32.440000 492.96875x34.9375] + "Null publishes fine indie games" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/grid-row-height-affected-by-item-margins.html b/Tests/LibWeb/Layout/input/grid/grid-row-height-affected-by-item-margins.html new file mode 100644 index 0000000000..e24d83af98 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-row-height-affected-by-item-margins.html @@ -0,0 +1,10 @@ +

Null publishes fine indie games

\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 29361bbec4..29eac05321 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1443,7 +1443,9 @@ void GridFormattingContext::resolve_grid_item_heights() box_state.border_bottom = border_bottom; auto const& computed_height = item.box().computed_values().height(); - auto used_height = computed_height.is_auto() ? (containing_block_height - box_state.border_top - box_state.border_bottom - box_state.padding_top - box_state.padding_bottom) : computed_height.to_px(grid_container(), containing_block_height); + auto used_height = computed_height.is_auto() + ? (containing_block_height - box_state.margin_box_top() - box_state.margin_box_bottom()) + : computed_height.to_px(grid_container(), containing_block_height); box_state.set_content_height(used_height); } } @@ -1771,12 +1773,12 @@ CSSPixels GridFormattingContext::calculate_min_content_contribution(GridItem con }(); if (should_treat_preferred_size_as_auto) { - return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension, m_state); + return item.add_margin_box_sizes(calculate_min_content_size(item, dimension), dimension, m_state); } auto preferred_size = get_item_preferred_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state); + return item.add_margin_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state); } CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem const& item, GridDimension const dimension) const @@ -1790,12 +1792,12 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con }(); if (should_treat_preferred_size_as_auto) { - return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension, m_state); + return item.add_margin_box_sizes(calculate_max_content_size(item, dimension), dimension, m_state); } auto preferred_size = get_item_preferred_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state); + return item.add_margin_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state); } CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const @@ -1881,7 +1883,7 @@ CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, Gr AvailableSize const& available_size = dimension == GridDimension::Column ? m_available_space->width : m_available_space->height; auto item_spans_auto_tracks = tracks[item_track_index].min_track_sizing_function.is_auto(available_size); if (item_spans_auto_tracks && !item.box().is_scroll_container()) { - return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension, m_state); + return content_based_minimum_size(item, dimension); } // Otherwise, the automatic minimum size is zero, as usual. @@ -1907,9 +1909,9 @@ CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const& if (should_treat_preferred_size_as_auto) { auto minimum_size = get_item_minimum_size(item, dimension); if (minimum_size.is_auto()) - return automatic_minimum_size(item, dimension); + return item.add_margin_box_sizes(automatic_minimum_size(item, dimension), dimension, m_state); auto containing_block_size = containing_block_size_for_item(item, dimension); - return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension, m_state); + return item.add_margin_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension, m_state); } return calculate_min_content_contribution(item, dimension); diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index d61436890d..74201b7d6b 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -45,14 +45,12 @@ public: return dimension == GridDimension::Column ? m_column : m_row; } - CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension, LayoutState const& state) const + [[nodiscard]] CSSPixels add_margin_box_sizes(CSSPixels content_size, GridDimension dimension, LayoutState const& state) const { - auto& box_state = state.get(box()); - if (dimension == GridDimension::Column) { - return box_state.border_left + box_state.padding_left + content_size + box_state.padding_right + box_state.border_right; - } else { - return box_state.border_top + box_state.padding_top + content_size + box_state.padding_bottom + box_state.border_bottom; - } + auto const& box_state = state.get(box()); + if (dimension == GridDimension::Column) + return box_state.margin_box_left() + content_size + box_state.margin_box_right(); + return box_state.margin_box_top() + content_size + box_state.margin_box_bottom(); } int raw_row() const { return m_row; }