RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:57:45 +00:00
Code Issues Activity Actions

LibWeb: Resolve grid item fixed size paddings in GFC

Browse source 
Adds support for grid items with fixed size paddings. Supporting
percentage paddings will probably require to do second pass of tracks
layout: second pass is needed to recalculate tracks sizes when final
items sizes are known when percentage paddings are already resolved.
This commit is contained in:
Aliaksandr Kalenik 2023-05-18 22:33:40 +03:00 • committed by Andreas Kling
parent f8d6569841
commit 902ceb1675
4 changed files with 84 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

36
Tests/LibWeb/Layout/expected/grid/grid-item-fixed-paddings.txt Normal file
View file

@ -0,0 +1,36 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x355.507812 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x355.507812 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (68,68) content-size 17.050781x32.753906 [BFC] children: inline
line 0 width: 11.894531, height: 32.753906, bottom: 32.753906, baseline: 25.371093
frag 0 from TextNode start: 0, length: 1, rect: [71,68 11.894531x32.753906]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (255.050781,68) content-size 16.523437x32.753906 [BFC] children: inline
line 0 width: 16.523437, height: 32.753906, bottom: 32.753906, baseline: 25.371093
frag 0 from TextNode start: 0, length: 1, rect: [255.050781,68 16.523437x32.753906]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (68,270.753906) content-size 17.050781x32.753906 [BFC] children: inline
line 0 width: 17.050781, height: 32.753906, bottom: 32.753906, baseline: 25.371093
frag 0 from TextNode start: 0, length: 1, rect: [68,270.753906 17.050781x32.753906]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (255.050781,270.753906) content-size 16.523437x32.753906 [BFC] children: inline
line 0 width: 14.53125, height: 32.753906, bottom: 32.753906, baseline: 25.371093
frag 0 from TextNode start: 0, length: 1, rect: [256.050781,270.753906 14.53125x32.753906]
"4"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,363.507812) content-size 784x0 children: inline
TextNode <#text>

22
Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html Normal file
View file

@ -0,0 +1,22 @@
<style>
.grid-container {
display: grid;
grid-template-columns: min-content min-content;
grid-template-rows: auto;
grid-gap: 50px;
}
.grid-item {
background-color: #ddd;
padding: 50px;
text-align: center;
font-size: 30px;
border: 10px solid black;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>

31
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -1360,7 +1360,7 @@ void GridFormattingContext::resolve_grid_item_widths()
box_state.border_right = border_right; box_state.border_right = border_right;
auto const& computed_width = item.box().computed_values().width(); auto const& computed_width = item.box().computed_values().width();
auto used_width = computed_width.is_auto() ? (containing_block_width - box_state.border_left - box_state.border_right) : computed_width.to_px(grid_container(), containing_block_width); auto used_width = computed_width.is_auto() ? (containing_block_width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right) : computed_width.to_px(grid_container(), containing_block_width);
box_state.set_content_width(used_width); box_state.set_content_width(used_width);
} }
} }
@ -1378,7 +1378,7 @@ void GridFormattingContext::resolve_grid_item_heights()
box_state.border_bottom = border_bottom; box_state.border_bottom = border_bottom;
auto const& computed_height = item.box().computed_values().height(); 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) : computed_height.to_px(grid_container(), containing_block_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);
box_state.set_content_height(used_height); box_state.set_content_height(used_height);
} }
} }
@ -1404,6 +1404,19 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
box_state.set_indefinite_content_width(); box_state.set_indefinite_content_width();
if (!computed_values.height().is_length()) if (!computed_values.height().is_length())
box_state.set_indefinite_content_height(); box_state.set_indefinite_content_height();
// NOTE: It is ok to use 0 containing block size to resolve paddings on the first pass when grid areas sizes
// are not known yet.
// FIXME: Do second pass of tracks layout to resolve percentage paddings
box_state.padding_top = computed_values.padding().top().to_px(grid_container(), 0);
box_state.padding_right = computed_values.padding().right().to_px(grid_container(), 0);
box_state.padding_bottom = computed_values.padding().bottom().to_px(grid_container(), 0);
box_state.padding_left = computed_values.padding().left().to_px(grid_container(), 0);
box_state.border_top = computed_values.border_top().width;
box_state.border_right = computed_values.border_right().width;
box_state.border_bottom = computed_values.border_bottom().width;
box_state.border_left = computed_values.border_left().width;
} }
run_track_sizing(available_space, GridDimension::Column); run_track_sizing(available_space, GridDimension::Column);
@ -1441,7 +1454,7 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
y_end += m_grid_rows_and_gaps[i].base_size; y_end += m_grid_rows_and_gaps[i].base_size;
} }
child_box_state.offset = { x_start + child_box_state.border_left, y_start + child_box_state.border_top }; child_box_state.offset = { x_start + child_box_state.border_left + child_box_state.padding_left, y_start + child_box_state.border_top + child_box_state.padding_top };
auto available_space_for_children = AvailableSpace(AvailableSize::make_definite(child_box_state.content_width()), AvailableSize::make_definite(child_box_state.content_height())); auto available_space_for_children = AvailableSpace(AvailableSize::make_definite(child_box_state.content_width()), AvailableSize::make_definite(child_box_state.content_height()));
if (auto independent_formatting_context = layout_inside(child_box, LayoutMode::Normal, available_space_for_children)) if (auto independent_formatting_context = layout_inside(child_box, LayoutMode::Normal, available_space_for_children))
@ -1690,12 +1703,12 @@ CSSPixels GridFormattingContext::calculate_min_content_contribution(GridItem con
}(); }();
if (should_treat_preferred_size_as_auto) { if (should_treat_preferred_size_as_auto) {
return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension); return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension, m_state);
} }
auto preferred_size = get_item_preferred_size(item, dimension); auto preferred_size = get_item_preferred_size(item, dimension);
auto containing_block_size = containing_block_size_for_item(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); return item.add_border_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 CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem const& item, GridDimension const dimension) const
@ -1709,12 +1722,12 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con
}(); }();
if (should_treat_preferred_size_as_auto) { if (should_treat_preferred_size_as_auto) {
return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension); return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension, m_state);
} }
auto preferred_size = get_item_preferred_size(item, dimension); auto preferred_size = get_item_preferred_size(item, dimension);
auto containing_block_size = containing_block_size_for_item(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); return item.add_border_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 CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const
@ -1799,7 +1812,7 @@ CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, Gr
// FIXME: Check all tracks spanned by an item // FIXME: Check all tracks spanned by an item
auto item_spans_auto_tracks = tracks[item_track_index].min_track_sizing_function.is_auto(); auto item_spans_auto_tracks = tracks[item_track_index].min_track_sizing_function.is_auto();
if (item_spans_auto_tracks && !item.box().is_scroll_container()) { if (item_spans_auto_tracks && !item.box().is_scroll_container()) {
return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension); return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension, m_state);
} }
// Otherwise, the automatic minimum size is zero, as usual. // Otherwise, the automatic minimum size is zero, as usual.
@ -1827,7 +1840,7 @@ CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const&
if (minimum_size.is_auto()) if (minimum_size.is_auto())
return automatic_minimum_size(item, dimension); return automatic_minimum_size(item, dimension);
auto containing_block_size = containing_block_size_for_item(item, dimension); 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); return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension, m_state);
} }
return calculate_min_content_contribution(item, dimension); return calculate_min_content_contribution(item, dimension);

16
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
View file

@ -43,10 +43,6 @@ public:
, m_column(column) , m_column(column)
, m_column_span(column_span) , m_column_span(column_span)
{ {
m_border_top = box.computed_values().border_top().width;
m_border_right = box.computed_values().border_right().width;
m_border_bottom = box.computed_values().border_bottom().width;
m_border_left = box.computed_values().border_left().width;
} }
Box const& box() const { return m_box; } Box const& box() const { return m_box; }
@ -61,12 +57,13 @@ public:
return dimension == GridDimension::Column ? m_column : m_row; return dimension == GridDimension::Column ? m_column : m_row;
} }
CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension) const CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension, LayoutState const& state) const
{ {
auto& box_state = state.get(box());
if (dimension == GridDimension::Column) { if (dimension == GridDimension::Column) {
return m_border_left + content_size + m_border_right; return box_state.border_left + box_state.padding_left + content_size + box_state.padding_right + box_state.border_right;
} else { } else {
return m_border_top + content_size + m_border_bottom; return box_state.border_top + box_state.padding_top + content_size + box_state.padding_bottom + box_state.border_bottom;
} }
} }
@ -85,11 +82,6 @@ private:
size_t m_row_span { 1 }; size_t m_row_span { 1 };
size_t m_column { 0 }; size_t m_column { 0 };
size_t m_column_span { 1 }; size_t m_column_span { 1 };
CSSPixels m_border_top;
CSSPixels m_border_right;
CSSPixels m_border_bottom;
CSSPixels m_border_left;
}; };
class GridFormattingContext final : public FormattingContext { class GridFormattingContext final : public FormattingContext {