mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
LibWeb: Remove borders from TemporaryTrack in GFC
This change makes grid items be responsible for their borders instead of grid tracks which can not have borders itself. There are changes in layout tests but those are improvements :)
This commit is contained in:
parent
083e61c36b
commit
d6d097b671
Notes:
sideshowbarker
2024-07-16 23:52:22 +09:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/d6d097b671 Pull-request: https://github.com/SerenityOS/serenity/pull/18890
@ -1,6 +1,6 @@
|
||||
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 784x448.28125 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x428.28125 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x74.9375 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
@ -122,40 +122,40 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
Box <div.grid-container> at (8,366.28125) content-size 784x50 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (18,376.28125) content-size 280x25 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (18,376.28125) content-size 280x5 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [18,376.28125 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (318,376.28125) content-size 280x25 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (318,376.28125) content-size 280x5 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [318,376.28125 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (18,421.28125) content-size 280x25 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (18,401.28125) content-size 280x5 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [18,421.28125 8.8125x17.46875]
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [18,401.28125 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (318,421.28125) content-size 280x25 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (318,401.28125) content-size 280x5 [BFC] children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [318,421.28125 8.8125x17.46875]
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [318,401.28125 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,416.28125) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,416.28125) content-size 784x40 [GFC] children: not-inline
|
||||
Box <div.grid-container> at (8,416.28125) content-size 784x20 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,416.28125) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (18,426.28125) content-size 764x20 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (18,426.28125) content-size 764x0 [BFC] children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [18,426.28125 6.34375x17.46875]
|
||||
"1"
|
||||
|
@ -1,10 +1,10 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x35.46875 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <body> at (8,8) content-size 22x19.46875 floating [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 22x0 children: inline
|
||||
BlockContainer <body> at (8,8) content-size 20x19.46875 floating [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 20x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.grid> at (8,8) content-size 22x19.46875 [GFC] children: not-inline
|
||||
Box <div.grid> at (8,8) content-size 20x19.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.whee> at (9,9) content-size 18x17.46875 [BFC] children: inline
|
||||
|
@ -2,13 +2,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x30.46875 [BFC] children: not-inline
|
||||
BlockContainer <body> at (10,10) content-size 780x0 children: not-inline
|
||||
Box <div.grid> at (11,11) content-size 96.421875x19.46875 floating [GFC] children: not-inline
|
||||
BlockContainer <div.whee> at (12,12) content-size 35.953125x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.whee> at (12,12) content-size 37.953125x17.46875 [BFC] children: inline
|
||||
line 0 width: 37.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 4, rect: [12,12 37.953125x17.46875]
|
||||
"whee"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.yeehaw> at (49.953125,12) content-size 56.46875x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.yeehaw> at (51.953125,12) content-size 54.46875x17.46875 [BFC] children: inline
|
||||
line 0 width: 54.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [49.953125,12 54.46875x17.46875]
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [51.953125,12 54.46875x17.46875]
|
||||
"yeehaw"
|
||||
TextNode <#text>
|
||||
|
@ -714,16 +714,10 @@ void GridFormattingContext::resolve_intrinsic_track_sizes(AvailableSpace const&
|
||||
if (dimension == GridDimension::Column) {
|
||||
if (grid_item.gap_adjusted_column(grid_container()) == index && grid_item.raw_column_span() == 1) {
|
||||
grid_items_of_track.append(grid_item);
|
||||
|
||||
track.border_left = max(track.border_left, grid_item.box().computed_values().border_left().width);
|
||||
track.border_right = max(track.border_right, grid_item.box().computed_values().border_right().width);
|
||||
}
|
||||
} else {
|
||||
if (grid_item.gap_adjusted_row(grid_container()) == index && grid_item.raw_row_span() == 1) {
|
||||
grid_items_of_track.append(grid_item);
|
||||
|
||||
track.border_top = max(track.border_top, grid_item.box().computed_values().border_top().width);
|
||||
track.border_bottom = max(track.border_bottom, grid_item.box().computed_values().border_bottom().width);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1362,7 +1356,7 @@ void GridFormattingContext::determine_grid_container_height()
|
||||
{
|
||||
CSSPixels total_y = 0;
|
||||
for (auto& grid_row : m_grid_rows_and_gaps)
|
||||
total_y += grid_row.full_vertical_size();
|
||||
total_y += grid_row.base_size;
|
||||
m_automatic_content_height = total_y;
|
||||
}
|
||||
|
||||
@ -1397,33 +1391,35 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
|
||||
for (int i = 0; i < column_end; i++)
|
||||
x_end += m_grid_columns_and_gaps[i].base_size;
|
||||
for (int i = 0; i < row_start; i++)
|
||||
y_start += m_grid_rows_and_gaps[i].full_vertical_size();
|
||||
y_start += m_grid_rows_and_gaps[i].base_size;
|
||||
for (int i = 0; i < row_end; i++) {
|
||||
if (i >= row_start)
|
||||
y_end += m_grid_rows_and_gaps[i].base_size;
|
||||
else
|
||||
y_end += m_grid_rows_and_gaps[i].full_vertical_size();
|
||||
y_end += m_grid_rows_and_gaps[i].base_size;
|
||||
}
|
||||
|
||||
// A grid item containing block is created by the grid area to which it belongs.
|
||||
auto containing_block_width = max(CSSPixels(0), x_end - x_start - m_grid_columns_and_gaps[column_start].border_left - m_grid_columns_and_gaps[column_start].border_right);
|
||||
auto containing_block_width = max(CSSPixels(0), x_end - x_start);
|
||||
auto containing_block_height = y_end - y_start;
|
||||
|
||||
auto computed_width = child_box.computed_values().width();
|
||||
auto computed_height = child_box.computed_values().height();
|
||||
|
||||
auto used_width = computed_width.is_auto() ? containing_block_width : computed_width.to_px(grid_container(), containing_block_width);
|
||||
auto used_height = computed_height.is_auto() ? containing_block_height : computed_height.to_px(grid_container(), containing_block_height);
|
||||
auto border_left = child_box.computed_values().border_left().width;
|
||||
auto border_right = child_box.computed_values().border_right().width;
|
||||
auto border_top = child_box.computed_values().border_top().width;
|
||||
auto border_bottom = child_box.computed_values().border_bottom().width;
|
||||
|
||||
child_box_state.border_left = border_left;
|
||||
child_box_state.border_right = border_right;
|
||||
child_box_state.border_top = border_top;
|
||||
child_box_state.border_bottom = border_bottom;
|
||||
|
||||
auto used_width = computed_width.is_auto() ? (containing_block_width - child_box_state.border_left - child_box_state.border_right) : computed_width.to_px(grid_container(), containing_block_width);
|
||||
auto used_height = computed_height.is_auto() ? (containing_block_height - child_box_state.border_top - child_box_state.border_bottom) : computed_height.to_px(grid_container(), containing_block_height);
|
||||
|
||||
child_box_state.set_content_width(used_width);
|
||||
child_box_state.set_content_height(used_height);
|
||||
|
||||
child_box_state.offset = { x_start + m_grid_columns_and_gaps[column_start].border_left, y_start + m_grid_rows_and_gaps[row_start].border_top };
|
||||
|
||||
child_box_state.border_left = child_box.computed_values().border_left().width;
|
||||
child_box_state.border_right = child_box.computed_values().border_right().width;
|
||||
child_box_state.border_top = child_box.computed_values().border_top().width;
|
||||
child_box_state.border_bottom = child_box.computed_values().border_bottom().width;
|
||||
child_box_state.offset = { x_start + border_left, y_start + border_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))
|
||||
@ -1461,7 +1457,7 @@ void GridFormattingContext::determine_intrinsic_size_of_grid_container(Available
|
||||
if (available_space.height.is_intrinsic_sizing_constraint()) {
|
||||
CSSPixels grid_container_height = 0;
|
||||
for (auto& track : m_grid_rows) {
|
||||
grid_container_height += track.full_vertical_size();
|
||||
grid_container_height += track.base_size;
|
||||
}
|
||||
m_state.get_mutable(grid_container()).set_content_height(grid_container_height);
|
||||
}
|
||||
@ -1469,7 +1465,7 @@ void GridFormattingContext::determine_intrinsic_size_of_grid_container(Available
|
||||
if (available_space.width.is_intrinsic_sizing_constraint()) {
|
||||
CSSPixels grid_container_width = 0;
|
||||
for (auto& track : m_grid_columns) {
|
||||
grid_container_width += track.full_horizontal_size();
|
||||
grid_container_width += track.base_size;
|
||||
}
|
||||
m_state.get_mutable(grid_container()).set_content_width(grid_container_width);
|
||||
}
|
||||
@ -1673,12 +1669,12 @@ CSSPixels GridFormattingContext::calculate_min_content_contribution(GridItem con
|
||||
}();
|
||||
|
||||
if (should_treat_preferred_size_as_auto) {
|
||||
return calculate_min_content_size(item, dimension);
|
||||
return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension);
|
||||
}
|
||||
|
||||
auto preferred_size = get_item_preferred_size(item, dimension);
|
||||
auto containing_block_size = containing_block_size_for_item(item, dimension);
|
||||
return preferred_size.to_px(grid_container(), containing_block_size);
|
||||
return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension);
|
||||
}
|
||||
|
||||
CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem const& item, GridDimension const dimension) const
|
||||
@ -1692,12 +1688,12 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con
|
||||
}();
|
||||
|
||||
if (should_treat_preferred_size_as_auto) {
|
||||
return calculate_max_content_size(item, dimension);
|
||||
return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension);
|
||||
}
|
||||
|
||||
auto preferred_size = get_item_preferred_size(item, dimension);
|
||||
auto containing_block_size = containing_block_size_for_item(item, dimension);
|
||||
return preferred_size.to_px(grid_container(), containing_block_size);
|
||||
return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension);
|
||||
}
|
||||
|
||||
CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const
|
||||
@ -1782,7 +1778,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 content_based_minimum_size(item, dimension);
|
||||
return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension);
|
||||
}
|
||||
|
||||
// Otherwise, the automatic minimum size is zero, as usual.
|
||||
@ -1810,7 +1806,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 minimum_size.to_px(grid_container(), containing_block_size);
|
||||
return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension);
|
||||
}
|
||||
|
||||
return calculate_min_content_contribution(item, dimension);
|
||||
|
@ -43,6 +43,10 @@ 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; }
|
||||
@ -57,6 +61,15 @@ public:
|
||||
return dimension == GridDimension::Column ? m_column : m_row;
|
||||
}
|
||||
|
||||
CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension) const
|
||||
{
|
||||
if (dimension == GridDimension::Column) {
|
||||
return m_border_left + content_size + m_border_right;
|
||||
} else {
|
||||
return m_border_top + content_size + m_border_bottom;
|
||||
}
|
||||
}
|
||||
|
||||
size_t raw_row() const { return m_row; }
|
||||
size_t raw_column() const { return m_column; }
|
||||
|
||||
@ -72,6 +85,11 @@ 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 {
|
||||
@ -103,21 +121,6 @@ private:
|
||||
bool frozen { false };
|
||||
bool is_gap { false };
|
||||
|
||||
CSSPixels border_left { 0 };
|
||||
CSSPixels border_right { 0 };
|
||||
CSSPixels border_top { 0 };
|
||||
CSSPixels border_bottom { 0 };
|
||||
|
||||
CSSPixels full_horizontal_size() const
|
||||
{
|
||||
return base_size + border_left + border_right;
|
||||
}
|
||||
|
||||
CSSPixels full_vertical_size() const
|
||||
{
|
||||
return base_size + border_top + border_bottom;
|
||||
}
|
||||
|
||||
TemporaryTrack(CSS::GridSize min_track_sizing_function, CSS::GridSize max_track_sizing_function)
|
||||
: min_track_sizing_function(min_track_sizing_function)
|
||||
, max_track_sizing_function(max_track_sizing_function)
|
||||
|
Loading…
Reference in New Issue
Block a user