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

LibWeb: Use grid item used width as available width during track sizing

Browse source 
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 2023-05-18 17:24:46 +03:00 • committed by Andreas Kling
parent 52e9dced1a
commit 82aedfcaf0
12 changed files with 136 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Layout/expected/grid/auto-fill.txt
View file

@ -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"

2
Tests/LibWeb/Layout/expected/grid/auto-fit.txt
View file

@ -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"

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

@ -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
Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt
View file

@ -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"

60
Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt Normal file
View file

@ -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>

4
Tests/LibWeb/Layout/expected/grid/named-tracks.txt
View file

@ -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"

4
Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt
View file

@ -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"

4
Tests/LibWeb/Layout/expected/grid/row-span-2.txt
View file

@ -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

2
Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt
View file

@ -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"