RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 20:07:35 +00:00
Code Issues Activity Actions

LibWeb: Respect "auto flow" property in grid layout

Browse source 
Before this change, we only considering `grid-auto-flow` to determine
whether a row or column should be added when there was not enough space
in the implicit grid to fit the next unplaced item.

Now, we also choose the direction in which the "auto placement cursor"
is moved, based on the auto flow property.
This commit is contained in:
Aliaksandr Kalenik 2024-03-04 14:04:15 +01:00 • committed by Andreas Kling
parent f9f98016e2
commit 4d8bc16812
14 changed files with 363 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

33
Tests/LibWeb/Layout/expected/grid/placement-10.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x516 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x500 children: not-inline
Box <div.grid> at (8,8) content-size 500x500 [GFC] children: not-inline
BlockContainer <div#a> at (8,8) content-size 100x300 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
BlockContainer <div#b> at (108,8) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,8 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
BlockContainer <div#c> at (108,108) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,108 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <div#d> at (108,208) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,208 7.75x17] baseline: 13.296875
"4"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x516]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x500]
PaintableBox (Box<DIV>.grid) [8,8 500x500]
PaintableWithLines (BlockContainer<DIV>#a) [8,8 100x300]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [108,8 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#c) [108,108 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#d) [108,208 100x100]
TextPaintable (TextNode<#text>)

33
Tests/LibWeb/Layout/expected/grid/placement-5.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x220 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x202 children: not-inline
Box <div.grid> at (11,11) content-size 778x200 [GFC] children: not-inline
BlockContainer <div#a> at (12,12) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,12 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
BlockContainer <div#b> at (12,112) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,112 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
BlockContainer <div#a> at (112,12) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [112,12 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <div#b> at (112,112) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [112,112 7.75x17] baseline: 13.296875
"4"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x222]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x204]
PaintableBox (Box<DIV>.grid) [10,10 780x202]
PaintableWithLines (BlockContainer<DIV>#a) [11,11 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [11,111 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#a) [111,11 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [111,111 100x100]
TextPaintable (TextNode<#text>)

33
Tests/LibWeb/Layout/expected/grid/placement-6.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x220 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x202 children: not-inline
Box <div.grid> at (11,11) content-size 778x200 [GFC] children: not-inline
BlockContainer <div#a> at (12,12) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,12 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
BlockContainer <div#b> at (112,12) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [112,12 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
BlockContainer <div#a> at (12,112) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,112 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <div#b> at (112,112) content-size 98x98 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [112,112 7.75x17] baseline: 13.296875
"4"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x222]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x204]
PaintableBox (Box<DIV>.grid) [10,10 780x202]
PaintableWithLines (BlockContainer<DIV>#a) [11,11 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [111,11 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#a) [11,111 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [111,111 100x100]
TextPaintable (TextNode<#text>)

33
Tests/LibWeb/Layout/expected/grid/placement-7.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x216 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x200 children: not-inline
Box <div.grid> at (8,8) content-size 784x200 [GFC] children: not-inline
BlockContainer <div#a> at (8,8) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
BlockContainer <div#b> at (108,8) content-size 387.453125x200 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,8 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
BlockContainer <div#c> at (495.453125,8) content-size 296.546875x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [495.453125,8 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <div#d> at (495.453125,108) content-size 296.546875x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [495.453125,108 7.75x17] baseline: 13.296875
"4"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x216]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
PaintableBox (Box<DIV>.grid) [8,8 784x200]
PaintableWithLines (BlockContainer<DIV>#a) [8,8 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [108,8 387.453125x200]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#c) [495.453125,8 296.546875x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#d) [495.453125,108 296.546875x100]
TextPaintable (TextNode<#text>)

33
Tests/LibWeb/Layout/expected/grid/placement-8.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x520 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x502 children: not-inline
Box <div.grid> at (11,11) content-size 500x500 [GFC] children: not-inline
BlockContainer <div#a> at (12,12) content-size 98x105.59375 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,12 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
BlockContainer <div#b> at (12,119.59375) content-size 498x282.78125 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,119.59375 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
BlockContainer <div#c> at (12,404.375) content-size 98x105.59375 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,404.375 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <div#d> at (112,404.375) content-size 98x105.59375 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [112,404.375 7.75x17] baseline: 13.296875
"4"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x522]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x504]
PaintableBox (Box<DIV>.grid) [10,10 502x502]
PaintableWithLines (BlockContainer<DIV>#a) [11,11 100x107.59375]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [11,118.59375 500x284.78125]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#c) [11,403.375 100x107.59375]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#d) [111,403.375 100x107.59375]
TextPaintable (TextNode<#text>)

33
Tests/LibWeb/Layout/expected/grid/placement-9.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x516 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x500 children: not-inline
Box <div.grid> at (8,8) content-size 500x500 [GFC] children: not-inline
BlockContainer <div#a> at (8,8) content-size 100x300 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
BlockContainer <div#b> at (108,8) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,8 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
BlockContainer <div#c> at (108,108) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,108 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <div#d> at (108,208) content-size 100x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [108,208 7.75x17] baseline: 13.296875
"4"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x516]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x500]
PaintableBox (Box<DIV>.grid) [8,8 500x500]
PaintableWithLines (BlockContainer<DIV>#a) [8,8 100x300]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#b) [108,8 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#c) [108,108 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#d) [108,208 100x100]
TextPaintable (TextNode<#text>)

19
Tests/LibWeb/Layout/input/grid/placement-10.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html><style>
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
height: 500px;
width: 500px;
}
#a {
grid-column: span 1;
grid-row: span 3;
}
* {
outline: 1px solid black;
}
</style><body><div class="grid"><div id="a">1</div><div id="b">2</div><div id="c">3</div><div id="d">4</div></div></body>

12
Tests/LibWeb/Layout/input/grid/placement-5.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html><style>
.grid {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
grid-auto-flow: column;
}
* {
border: 1px solid black;
}
</style><body><div class="grid"><div id="a">1</div><div id="b">2</div><div id="a">3</div><div id="b">4</div></div></body>

12
Tests/LibWeb/Layout/input/grid/placement-6.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html><style>
.grid {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
grid-auto-flow: row;
}
* {
border: 1px solid black;
}
</style><body><div class="grid"><div id="a">1</div><div id="b">2</div><div id="a">3</div><div id="b">4</div></div></body>

17
Tests/LibWeb/Layout/input/grid/placement-7.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html><style>
.grid {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
grid-auto-flow: column;
}
#b {
grid-column: span 2;
grid-row: span 2;
}
* {
outline: 1px solid black;
}
</style><body><div class="grid"><div id="a">1</div><div id="b">2</div><div id="c">3</div><div id="d">4</div></div></body>

18
Tests/LibWeb/Layout/input/grid/placement-8.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html><style>
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-flow: row;
height: 500px;
width: 500px;
}
#b {
grid-column: span 3;
grid-row: span 3;
}
* {
border: 1px solid black;
}
</style><body><div class="grid"><div id="a">1</div><div id="b">2</div><div id="c">3</div><div id="d">4</div></div></body>

19
Tests/LibWeb/Layout/input/grid/placement-9.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html><style>
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: row;
height: 500px;
width: 500px;
}
#a {
grid-column: span 1;
grid-row: span 3;
}
* {
outline: 1px solid black;
}
</style><body><div class="grid"><div id="a">1</div><div id="b">2</div><div id="c">3</div><div id="d">4</div></div></body>