mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-24 10:22:05 -05:00
LibWeb: Use grid item used width as available width during track sizing
This change addresses the incorrect assumption that the available width inside a grid item is equal to the width of the track it belongs to. For instance, if a grid item has a width of 200px, the available width inside that item is also 200px regardless of its column(s) base size. To solve this issue, it was necessary to move the final resolution of grid items to occur immediately after the final column track sizes are determined. By doing so, it becomes possible to obtain correct available width inside grid items while resolving the row track sizes.
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
52e9dced1a
commit
82aedfcaf0
12 changed files with 136 additions and 39 deletions
|
|
@ -18,7 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875]
|
||||
"3"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875]
|
||||
"3"
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.800018x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.799987x17.46875 [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: [444.199981,285.34375 6.34375x17.46875]
|
||||
"1"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ 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 784x50.9375 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
|
||||
BlockContainer <div.item> at (434.199981,8) content-size 357.800018x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.item> at (434.199981,8) content-size 357.799987x17.46875 [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: [434.199981,8 6.34375x17.46875]
|
||||
"1"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
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 784x0 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 200x315.40625 floating [GFC] children: not-inline
|
||||
BlockContainer <div.item> at (8,8) content-size 100x315.40625 [BFC] children: inline
|
||||
line 0 width: 50.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 5, rect: [8,8 50.96875x17.46875]
|
||||
"Lorem"
|
||||
line 1 width: 94.9375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 7, length: 11, rect: [8,25 94.9375x17.46875]
|
||||
"ipsum dolor"
|
||||
line 2 width: 70.9375, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 19, length: 9, rect: [8,42 70.9375x17.46875]
|
||||
"sit amet,"
|
||||
line 3 width: 96.84375, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 29, length: 11, rect: [8,60 96.84375x17.46875]
|
||||
"consectetur"
|
||||
line 4 width: 75.71875, height: 18.34375, bottom: 88.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 41, length: 10, rect: [8,77 75.71875x17.46875]
|
||||
"adipiscing"
|
||||
line 5 width: 28.71875, height: 17.8125, bottom: 105.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 52, length: 5, rect: [8,95 28.71875x17.46875]
|
||||
"elit."
|
||||
line 6 width: 65.40625, height: 18.28125, bottom: 123.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 58, length: 7, rect: [8,112 65.40625x17.46875]
|
||||
"Vivamus"
|
||||
line 7 width: 88.640625, height: 17.75, bottom: 140.03125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 66, length: 11, rect: [8,130 88.640625x17.46875]
|
||||
"eget turpis"
|
||||
line 8 width: 77.40625, height: 18.21875, bottom: 157.96875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 78, length: 9, rect: [8,147 77.40625x17.46875]
|
||||
"eget urna"
|
||||
line 9 width: 53.25, height: 17.6875, bottom: 174.90625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 88, length: 7, rect: [8,165 53.25x17.46875]
|
||||
"feugiat"
|
||||
line 10 width: 84.984375, height: 18.15625, bottom: 192.84375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 96, length: 10, rect: [8,182 84.984375x17.46875]
|
||||
"pretium ut"
|
||||
line 11 width: 65.359375, height: 17.625, bottom: 209.78125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 107, length: 8, rect: [8,200 65.359375x17.46875]
|
||||
"eu ante."
|
||||
line 12 width: 72.46875, height: 18.09375, bottom: 227.71875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 116, length: 8, rect: [8,217 72.46875x17.46875]
|
||||
"Nunc sed"
|
||||
line 13 width: 70.640625, height: 17.5625, bottom: 244.65625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 125, length: 8, rect: [8,235 70.640625x17.46875]
|
||||
"pharetra"
|
||||
line 14 width: 39.015625, height: 18.03125, bottom: 262.59375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 134, length: 5, rect: [8,252 39.015625x17.46875]
|
||||
"diam,"
|
||||
line 15 width: 56.25, height: 17.5, bottom: 279.53125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 140, length: 6, rect: [8,270 56.25x17.46875]
|
||||
"rutrum"
|
||||
line 16 width: 50.546875, height: 17.96875, bottom: 297.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 147, length: 7, rect: [8,287 50.546875x17.46875]
|
||||
"lacinia"
|
||||
line 17 width: 47.5, height: 18.4375, bottom: 315.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 155, length: 7, rect: [8,304 47.5x17.46875]
|
||||
"tellus."
|
||||
TextNode <#text>
|
||||
|
|
@ -32,7 +32,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (530.666687,25.46875) content-size 261.333312x50 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (530.666687,25.46875) content-size 261.333343x50 [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: [530.666687,25.46875 8.8125x17.46875]
|
||||
"2"
|
||||
|
|
@ -46,7 +46,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (269.333343,75.46875) content-size 522.666625x25 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (269.333343,75.46875) content-size 522.666687x25 [BFC] children: inline
|
||||
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,75.46875 7.75x17.46875]
|
||||
"4"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333251x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [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: [530.666687,8 8.8125x17.46875]
|
||||
"2"
|
||||
|
|
@ -32,7 +32,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 522.666625x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 522.666687x17.46875 [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: [269.333343,25.46875 8.8125x17.46875]
|
||||
"2"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
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 784x193.375 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x193.375 [GFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x315.40625 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x315.40625 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item.item-span-one-one> at (401.46875,8) content-size 392x131.296875 [BFC] children: inline
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item-right> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline
|
||||
BlockContainer <div.item-right> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [530.666687,8 21.609375x17.46875]
|
||||
"1fr"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 200px;
|
||||
background-color: pink;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
background-color: palevioletred;
|
||||
}
|
||||
</style>
|
||||
<div class="container"><div class="item">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget turpis eget urna
|
||||
feugiat pretium ut eu ante. Nunc sed pharetra diam, rutrum lacinia tellus.</div></div>
|
||||
|
|
@ -1347,6 +1347,24 @@ void GridFormattingContext::determine_grid_container_height()
|
|||
m_automatic_content_height = total_y;
|
||||
}
|
||||
|
||||
void GridFormattingContext::resolve_grid_item_widths()
|
||||
{
|
||||
for (auto& item : m_grid_items) {
|
||||
CSSPixels containing_block_width = containing_block_size_for_item(item, GridDimension::Column);
|
||||
|
||||
auto border_left = item.box().computed_values().border_left().width;
|
||||
auto border_right = item.box().computed_values().border_right().width;
|
||||
|
||||
auto& box_state = m_state.get_mutable(item.box());
|
||||
box_state.border_left = border_left;
|
||||
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);
|
||||
box_state.set_content_width(used_width);
|
||||
}
|
||||
}
|
||||
|
||||
void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const& available_space)
|
||||
{
|
||||
place_grid_items(available_space);
|
||||
|
|
@ -1355,7 +1373,27 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
|
|||
|
||||
initialize_gap_tracks(available_space);
|
||||
|
||||
for (auto& item : m_grid_items) {
|
||||
auto& box_state = m_state.get_mutable(item.box());
|
||||
auto& computed_values = item.box().computed_values();
|
||||
|
||||
// NOTE: As the containing blocks of grid items are created by implicit grid areas that are not present in the
|
||||
// layout tree, the initial value of has_definite_width/height computed by LayoutState::UsedValues::set_node
|
||||
// will be incorrect for anything other (auto, percentage, calculated) than fixed lengths.
|
||||
// Therefor, it becomes necessary to reset this value to indefinite.
|
||||
// TODO: Handle this in LayoutState::UsedValues::set_node
|
||||
if (!computed_values.width().is_length())
|
||||
box_state.set_indefinite_content_width();
|
||||
if (!computed_values.height().is_length())
|
||||
box_state.set_indefinite_content_height();
|
||||
}
|
||||
|
||||
run_track_sizing(available_space, GridDimension::Column);
|
||||
|
||||
// Once the sizes of column tracks, which determine the widths of the grid areas forming the containing blocks
|
||||
// for grid items, ara calculated, it becomes possible to determine the final widths of the grid items.
|
||||
resolve_grid_item_widths();
|
||||
|
||||
run_track_sizing(available_space, GridDimension::Row);
|
||||
|
||||
determine_grid_container_height();
|
||||
|
|
@ -1384,11 +1422,9 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
|
|||
}
|
||||
|
||||
// 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);
|
||||
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 const& computed_height = child_box.computed_values().height();
|
||||
|
||||
auto border_left = child_box.computed_values().border_left().width;
|
||||
auto border_right = child_box.computed_values().border_right().width;
|
||||
|
|
@ -1400,10 +1436,8 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
|
|||
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 + border_left, y_start + border_top };
|
||||
|
|
@ -1629,33 +1663,18 @@ CSSPixels GridFormattingContext::calculate_max_content_size(GridItem const& item
|
|||
|
||||
CSSPixels GridFormattingContext::containing_block_size_for_item(GridItem const& item, GridDimension const dimension) const
|
||||
{
|
||||
auto const& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
|
||||
auto const track_index = item.raw_position(dimension);
|
||||
return tracks[track_index].base_size;
|
||||
CSSPixels containing_block_size = 0;
|
||||
for_each_spanned_track_by_item(item, dimension, [&](TemporaryTrack const& track) {
|
||||
containing_block_size += track.base_size;
|
||||
});
|
||||
return containing_block_size;
|
||||
}
|
||||
|
||||
AvailableSpace GridFormattingContext::get_available_space_for_item(GridItem const& item) const
|
||||
{
|
||||
CSSPixels column_width = 0;
|
||||
bool has_columns_with_definite_base_size = false;
|
||||
for_each_spanned_track_by_item(item, GridDimension::Column, [&](TemporaryTrack const& track) {
|
||||
column_width += track.base_size;
|
||||
if (track.has_definite_base_size)
|
||||
has_columns_with_definite_base_size = true;
|
||||
});
|
||||
|
||||
AvailableSize available_width = has_columns_with_definite_base_size ? AvailableSize::make_definite(column_width) : AvailableSize::make_indefinite();
|
||||
|
||||
CSSPixels column_height = 0;
|
||||
bool has_rows_with_definite_base_size = false;
|
||||
for_each_spanned_track_by_item(item, GridDimension::Row, [&](TemporaryTrack const& track) {
|
||||
column_height += track.base_size;
|
||||
if (track.has_definite_base_size)
|
||||
has_rows_with_definite_base_size = true;
|
||||
});
|
||||
|
||||
AvailableSize available_height = has_rows_with_definite_base_size ? AvailableSize::make_definite(column_height) : AvailableSize::make_indefinite();
|
||||
|
||||
auto& item_box_state = m_state.get(item.box());
|
||||
AvailableSize available_width = item_box_state.has_definite_width() ? AvailableSize::make_definite(item_box_state.content_width()) : AvailableSize::make_indefinite();
|
||||
AvailableSize available_height = item_box_state.has_definite_height() ? AvailableSize::make_definite(item_box_state.content_height()) : AvailableSize::make_indefinite();
|
||||
return AvailableSpace(available_width, available_height);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -199,6 +199,8 @@ private:
|
|||
void determine_grid_container_height();
|
||||
void determine_intrinsic_size_of_grid_container(AvailableSpace const& available_space);
|
||||
|
||||
void resolve_grid_item_widths();
|
||||
|
||||
AvailableSize get_free_space(AvailableSpace const&, GridDimension const) const;
|
||||
|
||||
int get_line_index_by_line_name(String const& line_name, CSS::GridTrackSizeList);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue