mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 08:07:44 +00:00
LibWeb: Respect "auto flow" property in grid layout
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
Andreas Kling
parent
f9f98016e2
commit
4d8bc16812
14 changed files with 363 additions and 42 deletions
33
Tests/LibWeb/Layout/expected/grid/placement-10.txt
Normal file
33
Tests/LibWeb/Layout/expected/grid/placement-10.txt
Normal 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
33
Tests/LibWeb/Layout/expected/grid/placement-5.txt
Normal 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
33
Tests/LibWeb/Layout/expected/grid/placement-6.txt
Normal 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
33
Tests/LibWeb/Layout/expected/grid/placement-7.txt
Normal 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
33
Tests/LibWeb/Layout/expected/grid/placement-8.txt
Normal 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
33
Tests/LibWeb/Layout/expected/grid/placement-9.txt
Normal 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>)
|
||||
Loading…
Add table
Add a link
Reference in a new issue