mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-16 15:30:09 +00:00
LibWeb/Layout: Implement align-content for grid layout
This commit is contained in:
Neil Viloria
Alexander Kalenik
parent
5d00211a86
commit
b9e7c6a2f6
Notes:
github-actions[bot]
2024-10-08 19:31:01 +00:00
Author: https://github.com/neil-ptr
Commit: b9e7c6a2f6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1656
Reviewed-by: https://github.com/kalenikaliaksandr
5 changed files with 466 additions and 27 deletions
301
Tests/LibWeb/Layout/expected/grid/align-content.txt
Normal file
301
Tests/LibWeb/Layout/expected/grid/align-content.txt
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x684 [BFC] children: not-inline
|
||||
Box <body> at (28,28) content-size 744x628 flex-container(row) [FFC] children: not-inline
|
||||
Box <div.container> at (30,30) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (75,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (120,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,75) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (75,75) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (120,75) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (75,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (120,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (174,30) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (174,210) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (219,210) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (264,210) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (174,255) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (219,255) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (264,255) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (174,300) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (219,300) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (264,300) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (318,30) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (318,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (363,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (408,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (318,165) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (363,165) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (408,165) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (318,210) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (363,210) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (408,210) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (462,30) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (462,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (507,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (552,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (462,75) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (507,75) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (552,75) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (462,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (507,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (552,120) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (606,30) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (606,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (651,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (696,30) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (606,165) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (651,165) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (696,165) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (606,300) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (651,300) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (696,300) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (30,354) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,389) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (75,389) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (120,389) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,489) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (75,489) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (120,489) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,589) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (75,589) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (120,589) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (174,354) content-size 120x300 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (174,406.5) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (219,406.5) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (264,406.5) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (174,489) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (219,489) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (264,489) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (174,571.5) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (219,571.5) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (264,571.5) content-size 30x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x684]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x684]
|
||||
PaintableBox (Box<BODY>) [8,8 784x668]
|
||||
PaintableBox (Box<DIV>.container) [28,28 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [75,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [120,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,75 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [75,75 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [120,75 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [75,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [120,120 30x30]
|
||||
PaintableBox (Box<DIV>.container) [172,28 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [174,210 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [219,210 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [264,210 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [174,255 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [219,255 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [264,255 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [174,300 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [219,300 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [264,300 30x30]
|
||||
PaintableBox (Box<DIV>.container) [316,28 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [318,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [363,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [408,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [318,165 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [363,165 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [408,165 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [318,210 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [363,210 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [408,210 30x30]
|
||||
PaintableBox (Box<DIV>.container) [460,28 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [462,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [507,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [552,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [462,75 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [507,75 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [552,75 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [462,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [507,120 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [552,120 30x30]
|
||||
PaintableBox (Box<DIV>.container) [604,28 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [606,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [651,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [696,30 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [606,165 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [651,165 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [696,165 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [606,300 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [651,300 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [696,300 30x30]
|
||||
PaintableBox (Box<DIV>.container) [28,352 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,389 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [75,389 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [120,389 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,489 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [75,489 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [120,489 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,589 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [75,589 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [120,589 30x30]
|
||||
PaintableBox (Box<DIV>.container) [172,352 124x304]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [174,406.5 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [219,406.5 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [264,406.5 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [174,489 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [219,489 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [264,489 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [174,571.5 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [219,571.5 30x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [264,571.5 30x30]
|
||||
98
Tests/LibWeb/Layout/input/grid/align-content.html
Normal file
98
Tests/LibWeb/Layout/input/grid/align-content.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 30px);
|
||||
grid-template-rows: repeat(3, 30px);
|
||||
gap:15px;
|
||||
height: 300px;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
.item {
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
</style>
|
||||
<div class="container" style="align-content: start;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="align-content: end;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="align-content: center;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="align-content: stretch;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="align-content: space-between;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="align-content: space-around;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="align-content: space-evenly;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
{
|
||||
"align-content": [
|
||||
"normal",
|
||||
"start",
|
||||
"flex-start",
|
||||
"end",
|
||||
"flex-end",
|
||||
"center",
|
||||
"space-between",
|
||||
|
|
|
|||
|
|
@ -1547,9 +1547,11 @@ void FlexFormattingContext::align_all_flex_lines()
|
|||
CSSPixels gap_size = 0;
|
||||
switch (flex_container().computed_values().align_content()) {
|
||||
case CSS::AlignContent::FlexStart:
|
||||
case CSS::AlignContent::Start:
|
||||
start_of_current_line = 0;
|
||||
break;
|
||||
case CSS::AlignContent::FlexEnd:
|
||||
case CSS::AlignContent::End:
|
||||
start_of_current_line = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
|
||||
break;
|
||||
case CSS::AlignContent::Center:
|
||||
|
|
|
|||
|
|
@ -1674,34 +1674,31 @@ void GridFormattingContext::resolve_grid_item_heights()
|
|||
|
||||
void GridFormattingContext::resolve_track_spacing(GridDimension const dimension)
|
||||
{
|
||||
if (dimension == GridDimension::Column) {
|
||||
auto total_gap_space = m_available_space->width.to_px_or_zero();
|
||||
auto is_column_dimension = dimension == GridDimension::Column;
|
||||
|
||||
for (auto& track : m_grid_columns_and_gaps) {
|
||||
if (track.is_gap)
|
||||
continue;
|
||||
auto total_gap_space = is_column_dimension ? m_available_space->width.to_px_or_zero() : m_available_space->height.to_px_or_zero();
|
||||
|
||||
total_gap_space -= track.base_size;
|
||||
}
|
||||
total_gap_space = max(total_gap_space, 0);
|
||||
auto& grid_tracks = is_column_dimension ? m_grid_columns : m_grid_rows;
|
||||
for (auto& track : grid_tracks) {
|
||||
total_gap_space -= track.base_size;
|
||||
}
|
||||
total_gap_space = max(total_gap_space, 0);
|
||||
|
||||
auto gap_track_count = m_column_gap_tracks.size();
|
||||
if (gap_track_count == 0)
|
||||
return;
|
||||
auto gap_track_count = is_column_dimension ? m_column_gap_tracks.size() : m_row_gap_tracks.size();
|
||||
if (gap_track_count == 0)
|
||||
return;
|
||||
|
||||
auto const& gap_space = grid_container().computed_values().column_gap();
|
||||
auto const& available_size = m_available_space->width;
|
||||
|
||||
CSSPixels space_between_tracks = 0;
|
||||
CSSPixels space_between_tracks = 0;
|
||||
if (is_column_dimension) {
|
||||
switch (grid_container().computed_values().justify_content()) {
|
||||
case CSS::JustifyContent::SpaceBetween:
|
||||
space_between_tracks = CSSPixels(total_gap_space / gap_track_count);
|
||||
break;
|
||||
case CSS::JustifyContent::SpaceAround:
|
||||
space_between_tracks = CSSPixels(total_gap_space / (m_column_gap_tracks.size() + 1));
|
||||
space_between_tracks = CSSPixels(total_gap_space / (gap_track_count + 1));
|
||||
break;
|
||||
case CSS::JustifyContent::SpaceEvenly:
|
||||
space_between_tracks = CSSPixels(total_gap_space / (m_grid_columns.size() + 1));
|
||||
space_between_tracks = CSSPixels(total_gap_space / (gap_track_count + 2));
|
||||
break;
|
||||
case CSS::JustifyContent::Start:
|
||||
case CSS::JustifyContent::End:
|
||||
|
|
@ -1710,17 +1707,36 @@ void GridFormattingContext::resolve_track_spacing(GridDimension const dimension)
|
|||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
space_between_tracks = max(space_between_tracks, gap_space.to_px(grid_container(), available_size.to_px_or_zero()));
|
||||
|
||||
for (auto& track : m_column_gap_tracks) {
|
||||
if (!track.is_gap)
|
||||
continue;
|
||||
|
||||
track.base_size = space_between_tracks;
|
||||
}
|
||||
} else {
|
||||
// TODO: align-content spacing
|
||||
switch (grid_container().computed_values().align_content()) {
|
||||
case CSS::AlignContent::SpaceBetween:
|
||||
space_between_tracks = CSSPixels(total_gap_space / gap_track_count);
|
||||
break;
|
||||
case CSS::AlignContent::SpaceAround:
|
||||
space_between_tracks = CSSPixels(total_gap_space / (gap_track_count + 1));
|
||||
break;
|
||||
case CSS::AlignContent::SpaceEvenly:
|
||||
space_between_tracks = CSSPixels(total_gap_space / (gap_track_count + 2));
|
||||
break;
|
||||
case CSS::AlignContent::Normal:
|
||||
case CSS::AlignContent::Stretch:
|
||||
case CSS::AlignContent::Start:
|
||||
case CSS::AlignContent::FlexStart:
|
||||
case CSS::AlignContent::End:
|
||||
case CSS::AlignContent::FlexEnd:
|
||||
case CSS::AlignContent::Center:
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
auto const& computed_gap = is_column_dimension ? grid_container().computed_values().column_gap() : grid_container().computed_values().row_gap();
|
||||
auto const& available_size = is_column_dimension ? m_available_space->width.to_px_or_zero() : m_available_space->height.to_px_or_zero();
|
||||
space_between_tracks = max(space_between_tracks, computed_gap.to_px(grid_container(), available_size));
|
||||
|
||||
auto& gap_tracks = is_column_dimension ? m_column_gap_tracks : m_row_gap_tracks;
|
||||
for (auto& track : gap_tracks) {
|
||||
track.base_size = space_between_tracks;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1828,8 +1844,26 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item
|
|||
x_end = gap_space;
|
||||
}
|
||||
|
||||
auto grid_container_height = m_available_space->height.to_px_or_zero();
|
||||
CSSPixels sum_base_size_of_rows_and_gaps = 0;
|
||||
for (auto const& row_track : m_grid_rows_and_gaps) {
|
||||
sum_base_size_of_rows_and_gaps += row_track.base_size;
|
||||
}
|
||||
auto const& align_content = grid_container().computed_values().align_content();
|
||||
|
||||
CSSPixels y_start = 0;
|
||||
CSSPixels y_end = 0;
|
||||
if (align_content == CSS::AlignContent::Center || align_content == CSS::AlignContent::SpaceAround || align_content == CSS::AlignContent::SpaceEvenly) {
|
||||
auto free_space = grid_container_height - sum_base_size_of_rows_and_gaps;
|
||||
free_space = max(free_space, 0);
|
||||
y_start = free_space / 2;
|
||||
y_end = free_space / 2;
|
||||
} else if (align_content == CSS::AlignContent::End || align_content == CSS::AlignContent::FlexEnd) {
|
||||
auto free_space = grid_container_height - sum_base_size_of_rows_and_gaps;
|
||||
y_start = free_space;
|
||||
y_end = free_space;
|
||||
}
|
||||
|
||||
for (int i = 0; i < column_start; i++)
|
||||
x_start += m_grid_columns_and_gaps[i].base_size;
|
||||
for (int i = 0; i < column_end; i++)
|
||||
|
|
@ -1914,6 +1948,8 @@ void GridFormattingContext::run(AvailableSpace const& available_space)
|
|||
|
||||
resolve_track_spacing(GridDimension::Column);
|
||||
|
||||
resolve_track_spacing(GridDimension::Row);
|
||||
|
||||
auto const& containing_block_state = m_state.get(*grid_container().containing_block());
|
||||
auto height_of_containing_block = containing_block_state.content_height();
|
||||
auto height_of_container_block_as_available_size = AvailableSize::make_definite(height_of_containing_block);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue