mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 06:17:34 +00:00
LibWeb: Resolve grid item fixed size paddings in GFC
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
Andreas Kling
parent
f8d6569841
commit
902ceb1675
4 changed files with 84 additions and 21 deletions
|
|
@ -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
22
Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html
Normal 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>
|
||||
|
|
@ -1360,7 +1360,7 @@ void GridFormattingContext::resolve_grid_item_widths()
|
|||
box_state.border_right = border_right;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1378,7 +1378,7 @@ 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) : 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1404,6 +1404,19 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
|
|||
box_state.set_indefinite_content_width();
|
||||
if (!computed_values.height().is_length())
|
||||
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);
|
||||
|
|
@ -1441,7 +1454,7 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
|
|||
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()));
|
||||
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) {
|
||||
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 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
|
||||
|
|
@ -1709,12 +1722,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);
|
||||
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 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
|
||||
|
|
@ -1799,7 +1812,7 @@ CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, Gr
|
|||
// FIXME: Check all tracks spanned by an item
|
||||
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()) {
|
||||
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.
|
||||
|
|
@ -1827,7 +1840,7 @@ CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const&
|
|||
if (minimum_size.is_auto())
|
||||
return automatic_minimum_size(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);
|
||||
|
|
|
|||
|
|
@ -43,10 +43,6 @@ public:
|
|||
, m_column(column)
|
||||
, 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; }
|
||||
|
|
@ -61,12 +57,13 @@ public:
|
|||
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) {
|
||||
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 {
|
||||
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_column { 0 };
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue