From 82aedfcaf0eb1a91c2f604849928c6af783a0a3c Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Thu, 18 May 2023 17:24:46 +0300 Subject: [PATCH] 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. --- .../LibWeb/Layout/expected/grid/auto-fill.txt | 2 +- .../LibWeb/Layout/expected/grid/auto-fit.txt | 2 +- Tests/LibWeb/Layout/expected/grid/borders.txt | 2 +- .../Layout/expected/grid/grid-gap-2.txt | 2 +- .../grid/grid-item-percentage-width-2.txt | 60 +++++++++++++++ .../Layout/expected/grid/named-tracks.txt | 4 +- .../expected/grid/positions-and-spans.txt | 4 +- .../Layout/expected/grid/row-span-2.txt | 4 +- .../grid/template-lines-and-areas.txt | 2 +- .../grid/grid-item-percentage-width-2.html | 16 ++++ .../LibWeb/Layout/GridFormattingContext.cpp | 75 ++++++++++++------- .../LibWeb/Layout/GridFormattingContext.h | 2 + 12 files changed, 136 insertions(+), 39 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt create mode 100644 Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html diff --git a/Tests/LibWeb/Layout/expected/grid/auto-fill.txt b/Tests/LibWeb/Layout/expected/grid/auto-fill.txt index 1bff504c5c..c5b176307e 100644 --- a/Tests/LibWeb/Layout/expected/grid/auto-fill.txt +++ b/Tests/LibWeb/Layout/expected/grid/auto-fill.txt @@ -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 at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/expected/grid/auto-fit.txt b/Tests/LibWeb/Layout/expected/grid/auto-fit.txt index 1bff504c5c..c5b176307e 100644 --- a/Tests/LibWeb/Layout/expected/grid/auto-fit.txt +++ b/Tests/LibWeb/Layout/expected/grid/auto-fit.txt @@ -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 at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/expected/grid/borders.txt b/Tests/LibWeb/Layout/expected/grid/borders.txt index 75f4c52982..6d408e0071 100644 --- a/Tests/LibWeb/Layout/expected/grid/borders.txt +++ b/Tests/LibWeb/Layout/expected/grid/borders.txt @@ -103,7 +103,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline Box 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 at (444.199981,285.34375) content-size 337.800018x17.46875 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt b/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt index 02eb01f635..c043c2f6cf 100644 --- a/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt +++ b/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt @@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer at (8,8) content-size 784x50.9375 children: not-inline Box at (8,8) content-size 784x50.9375 [GFC] children: not-inline - BlockContainer at (434.199981,8) content-size 357.800018x17.46875 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt new file mode 100644 index 0000000000..e47bd3a089 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt @@ -0,0 +1,60 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x0 children: not-inline + Box at (8,8) content-size 200x315.40625 floating [GFC] children: not-inline + BlockContainer 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> diff --git a/Tests/LibWeb/Layout/expected/grid/named-tracks.txt b/Tests/LibWeb/Layout/expected/grid/named-tracks.txt index e0a0414077..c968d268a4 100644 --- a/Tests/LibWeb/Layout/expected/grid/named-tracks.txt +++ b/Tests/LibWeb/Layout/expected/grid/named-tracks.txt @@ -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 at (530.666687,25.46875) content-size 261.333312x50 [BFC] children: inline + BlockContainer 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 at (269.333343,75.46875) content-size 522.666625x25 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt b/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt index c16c4e68f4..758286126e 100644 --- a/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt +++ b/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt @@ -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 at (530.666687,8) content-size 261.333251x17.46875 [BFC] children: inline + BlockContainer 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 at (269.333343,25.46875) content-size 522.666625x17.46875 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/expected/grid/row-span-2.txt b/Tests/LibWeb/Layout/expected/grid/row-span-2.txt index fd01a6aba5..c8fcf92aee 100644 --- a/Tests/LibWeb/Layout/expected/grid/row-span-2.txt +++ b/Tests/LibWeb/Layout/expected/grid/row-span-2.txt @@ -1,7 +1,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline - BlockContainer at (8,8) content-size 784x193.375 children: not-inline - Box at (8,8) content-size 784x193.375 [GFC] children: not-inline + BlockContainer at (8,8) content-size 784x315.40625 children: not-inline + Box 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 at (401.46875,8) content-size 392x131.296875 [BFC] children: inline diff --git a/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt index a94c806bd8..f8229f932c 100644 --- a/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt +++ b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt @@ -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 at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline + BlockContainer 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" diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html new file mode 100644 index 0000000000..701355d272 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html @@ -0,0 +1,16 @@ + +
+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.
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 0adb0d1fe3..b34f37f3d4 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -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); } diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index 0cdf5dfe45..fcf397c626 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -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);