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);