mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 13:36:13 +03:00
LibWeb: Use grid item *outer* size when calculating minimum contribution
Previously we used the border box, which meant that tracks did not grow to accommodate item margins.
This commit is contained in:
parent
741c7aef21
commit
867e04768e
Notes:
sideshowbarker
2024-07-17 10:39:39 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/867e04768e Pull-request: https://github.com/SerenityOS/serenity/pull/19365
@ -0,0 +1,8 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x97.817501 [BFC] children: not-inline
|
||||
Box <body> at (10,10) content-size 780x79.817501 [GFC] children: not-inline
|
||||
BlockContainer <h1> 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>
|
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html><style>
|
||||
* { border: 1px solid black; }
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min(89ch, 100% - 89px) 1fr;
|
||||
}
|
||||
h1 {
|
||||
grid-column: 2 / auto;
|
||||
}
|
||||
</style><body><h1>Null publishes fine indie games</h1>
|
@ -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);
|
||||
|
@ -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; }
|
||||
|
Loading…
Reference in New Issue
Block a user