RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:47:36 +00:00
Code Issues Activity Actions

LibWeb: Consolidate track sizing code for rows and columns in GFC

Browse source 
Although the algorithm for sizing tracks (rows or columns) is defined
once for both dimensions in the specification
(https://www.w3.org/TR/css-grid-2/#algo-track-sizing), we have
implemented it twice separately for sizing rows and columns.

In addition to code duplication, another issue is that these
implementations of the same algorithm have already diverged in some
places, and this divergence is likely to become even worse as our
implementation evolves.

This change unifies code for both dimension into one method that runs
track sizing.

While this change brings a bit of collateral damange (border.html and
minmax.html got changes in layout snaphots) it ultimately brings more
benefits because now we can evolve layout for both rows and colums
without duplicating the code :)
This commit is contained in:
Aliaksandr Kalenik 2023-05-06 04:22:35 +03:00 • committed by Andreas Kling
parent 4c17f22735
commit ced862e16f
4 changed files with 252 additions and 691 deletions
Download patch file Download diff file Expand all files Collapse all files

18
Tests/LibWeb/Layout/expected/grid/borders.txt
View file

@ -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 784x428.28125 children: not-inline
BlockContainer <body> at (8,8) content-size 784x448.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 280x5 [BFC] children: inline
BlockContainer <div.grid-item> at (18,376.28125) content-size 280x25 [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 280x5 [BFC] children: inline
BlockContainer <div.grid-item> at (318,376.28125) content-size 280x25 [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,401.28125) content-size 280x5 [BFC] children: inline
BlockContainer <div.grid-item> at (18,421.28125) content-size 280x25 [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,401.28125 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [18,421.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,401.28125) content-size 280x5 [BFC] children: inline
BlockContainer <div.grid-item> at (318,421.28125) content-size 280x25 [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,401.28125 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [318,421.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 784x20 [GFC] children: not-inline
Box <div.grid-container> at (8,416.28125) content-size 784x40 [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 764x0 [BFC] children: inline
BlockContainer <div.grid-item> at (18,426.28125) content-size 764x20 [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"

148
Tests/LibWeb/Layout/expected/grid/minmax.txt
View file

@ -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 784x272.28125 children: not-inline
BlockContainer <body> at (8,8) content-size 784x222.28125 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
@ -21,148 +21,148 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,25.46875) content-size 784x100 [GFC] children: not-inline
Box <div.grid-container> at (8,25.46875) content-size 784x50 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,25.46875) content-size 300x50 [BFC] children: inline
BlockContainer <div.grid-item> at (8,25.46875) content-size 300x25 [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: [8,25.46875 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (308,25.46875) content-size 300x50 [BFC] children: inline
BlockContainer <div.grid-item> at (308,25.46875) content-size 300x25 [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: [308,25.46875 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,125.46875) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,75.46875) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,125.46875) content-size 784x34.9375 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,125.46875) content-size 0x0 [BFC] children: inline
Box <div.grid-container> at (8,75.46875) content-size 784x34.9375 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,125.46875) content-size 784x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,75.46875) content-size 784x17.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: [8,125.46875 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [8,75.46875 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,125.46875) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,142.9375) content-size 784x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,92.9375) content-size 784x17.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: [8,142.9375 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [8,92.9375 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,125.46875) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,160.40625) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,110.40625) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,160.40625) content-size 784x34.9375 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,160.40625) content-size 0x0 [BFC] children: inline
Box <div.grid-container> at (8,110.40625) content-size 784x34.9375 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,160.40625) content-size 784x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,110.40625) content-size 784x17.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: [8,160.40625 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [8,110.40625 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,160.40625) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,177.875) content-size 784x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,127.875) content-size 784x17.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: [8,177.875 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [8,127.875 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,160.40625) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,145.34375) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,145.34375) content-size 784x50 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,145.34375) content-size 300x25 [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: [8,145.34375 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (308,145.34375) content-size 300x25 [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: [308,145.34375 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,170.34375) content-size 300x25 [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: [8,170.34375 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (308,170.34375) content-size 300x25 [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: [308,170.34375 7.75x17.46875]
"4"
TextNode <#text>
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,195.34375) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,195.34375) content-size 784x50 [GFC] children: not-inline
Box <div.grid-container> at (8,195.34375) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,195.34375) content-size 300x25 [BFC] children: inline
BlockContainer <div.grid-item> at (8,195.34375) content-size 261.333343x17.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: [8,195.34375 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (308,195.34375) content-size 300x25 [BFC] children: inline
BlockContainer <div.grid-item> at (269.333343,195.34375) 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: [308,195.34375 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,195.34375 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,220.34375) content-size 300x25 [BFC] children: inline
BlockContainer <div.grid-item> at (530.666687,195.34375) content-size 261.333312x17.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: [8,220.34375 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,195.34375 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (308,220.34375) content-size 300x25 [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: [308,220.34375 7.75x17.46875]
"4"
TextNode <#text>
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,245.34375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,212.8125) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,245.34375) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,245.34375) content-size 0x0 [BFC] children: inline
Box <div.grid-container> at (8,212.8125) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,245.34375) content-size 261.333343x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (8,212.8125) content-size 56.218711x17.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: [8,245.34375 6.34375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [8,212.8125 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,245.34375) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (269.333343,245.34375) 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: [269.333343,245.34375 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,245.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (530.666687,245.34375) content-size 261.333312x17.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,245.34375 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,245.34375) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,262.8125) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
Box <div.grid-container> at (8,262.8125) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,262.8125) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,262.8125) content-size 56.218711x17.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: [8,262.8125 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,262.8125) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (64.218711,262.8125) content-size 671.5625x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (64.218711,212.8125) content-size 671.5625x17.46875 [BFC] children: inline
line 0 width: 125.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 15, rect: [64.218711,262.8125 125.265625x17.46875]
frag 0 from TextNode start: 0, length: 15, rect: [64.218711,212.8125 125.265625x17.46875]
"Article content"
TextNode <#text>
BlockContainer <(anonymous)> at (8,262.8125) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (735.781188,262.8125) content-size 56.218688x17.46875 [BFC] children: inline
BlockContainer <div.grid-item> at (735.781188,212.8125) content-size 56.218688x17.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: [735.781188,262.8125 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [735.781188,212.8125 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,262.8125) content-size 0x0 [BFC] children: inline
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
TextNode <#text>

755
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

File diff suppressed because it is too large Load diff

22
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
View file

@ -11,6 +11,11 @@
namespace Web::Layout {
enum class GridDimension {
Row,
Column
};
class OccupationGrid {
public:
OccupationGrid(int column_count, int row_count);
@ -45,8 +50,8 @@ public:
int raw_row_span() { return m_row_span; }
int raw_column_span() { return m_column_span; }
int gap_adjusted_row(Box const& parent_box) const;
int gap_adjusted_column(Box const& parent_box) const;
int gap_adjusted_row(Box const& grid_box) const;
int gap_adjusted_column(Box const& grid_box) const;
private:
JS::NonnullGCPtr<Box const> m_box;
@ -65,6 +70,8 @@ public:
virtual CSSPixels automatic_content_width() const override;
virtual CSSPixels automatic_content_height() const override;
Box const& grid_container() const { return context_box(); }
private:
CSSPixels m_automatic_content_height { 0 };
bool is_auto_positioned_row(CSS::GridTrackPlacement const&, CSS::GridTrackPlacement const&) const;
@ -138,13 +145,11 @@ private:
Vector<GridItem> m_grid_items;
Vector<JS::NonnullGCPtr<Box const>> m_boxes_to_place;
CSSPixels get_free_space_x(AvailableSpace const& available_space);
CSSPixels get_free_space_y(Box const&);
CSSPixels get_free_space(AvailableSize const& available_size, Vector<TemporaryTrack> const& tracks) const;
int get_line_index_by_line_name(String const& line_name, CSS::GridTrackSizeList);
CSSPixels resolve_definite_track_size(CSS::GridSize const&, AvailableSpace const&, Box const&);
size_t count_of_gap_columns();
size_t count_of_gap_rows();
size_t count_of_gap_tracks(Vector<TemporaryTrack> const& tracks) const;
CSSPixels resolve_size(CSS::Size const&, AvailableSize const&, Box const&);
int count_of_repeated_auto_fill_or_fit_tracks(Vector<CSS::ExplicitGridTrack> const& track_list, AvailableSpace const&, Box const&);
int get_count_of_tracks(Vector<CSS::ExplicitGridTrack> const&, AvailableSpace const&, Box const&);
@ -158,10 +163,9 @@ private:
void place_item_with_no_declared_position(Box const& child_box, int& auto_placement_cursor_x, int& auto_placement_cursor_y);
void initialize_grid_tracks(Box const&, AvailableSpace const&, int column_count, int row_count);
void calculate_sizes_of_columns(Box const&, AvailableSpace const&);
void calculate_sizes_of_rows(Box const&);
void run_track_sizing(GridDimension const dimension, AvailableSpace const& available_space, Vector<TemporaryTrack>& tracks);
CSSPixels content_based_minimum_height(GridItem const&, Box const& parent_box);
CSSPixels content_based_minimum_height(GridItem const&);
};
}