RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 17:37:34 +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>