We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

LibWeb/Layout: Implement align-content for grid layout

Neil Viloria 9 months ago
parent
5d00211a86
commit
b9e7c6a2f6
5 changed files with 465 additions and 26 deletions
Split View Show Diff Stats
  1. 301 0
      Tests/LibWeb/Layout/expected/grid/align-content.txt
  2. 98 0
      Tests/LibWeb/Layout/input/grid/align-content.html
  3. 2 0
      Userland/Libraries/LibWeb/CSS/Enums.json
  4. 2 0
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
  5. 62 26
      Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp

+ 301 - 0
Tests/LibWeb/Layout/expected/grid/align-content.txt
View 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 - 0
Tests/LibWeb/Layout/input/grid/align-content.html
View 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>

+ 2 - 0
Userland/Libraries/LibWeb/CSS/Enums.json
View File 

@@ -1,7 +1,9 @@
 
 {
 
   "align-content": [
 
     "normal",
 
+    "start",
 
     "flex-start",
 
+    "end",
 
     "flex-end",
 
     "center",
 
     "space-between",

+ 2 - 0
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File 

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

+ 62 - 26
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View File 

@@ -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 gap_track_count = m_column_gap_tracks.size();
 
-        if (gap_track_count == 0)
 
-            return;
 
+    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 const& gap_space = grid_container().computed_values().column_gap();
 
-        auto const& available_size = m_available_space->width;
 
+    auto gap_track_count = is_column_dimension ? m_column_gap_tracks.size() : m_row_gap_tracks.size();
 
+    if (gap_track_count == 0)
 
+        return;
 
 
-        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;
 
         }
 
+    } else {
 
+        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;
 
+        }
 
+    }
 
 
-        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;
 
+    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));
 
 
-            track.base_size = space_between_tracks;
 
-        }
 
-    } else {
 
-        // TODO: align-content spacing
 
+    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);

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5