forked from SerenityOS/serenity
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
LibWeb/Layout: Implement justify-content for column spacing in grid
(cherry picked from commit 4bda65c8b361f74c4576a19a64b3f456d1224e7b)
- Loading branch information
Showing
4 changed files
with
319 additions
and
41 deletions.
There are no files selected for viewing
140 changes: 140 additions & 0 deletions
140
Tests/LibWeb/Layout/expected/grid/justify-content-cols.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| Viewport <#document> at (0,0) content-size 800x600 children: not-inline | ||
| BlockContainer <html> at (0,0) content-size 800x288 [BFC] children: not-inline | ||
| BlockContainer <body> at (8,8) content-size 784x260 children: not-inline | ||
| Box <div.grid.justify-start> at (8,8) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (8,8) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (84,8) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (160,8) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,48) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
| Box <div.grid.justify-end> at (8,48) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (580,48) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (656,48) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (732,48) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,88) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
| Box <div.grid.justify-center> at (8,88) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (294,88) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (370,88) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (446,88) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,128) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
| Box <div.grid.justify-stretch> at (8,128) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (8,128) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (84,128) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (160,128) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,168) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
| Box <div.grid.justify-space-around> at (8,168) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (108.65625,168) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (369.984375,168) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (631.3125,168) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,208) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
| Box <div.grid.justify-space-between> at (8,208) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (8,208) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (370,208) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (732,208) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,248) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
| Box <div.grid.justify-space-evenly> at (8,248) content-size 784x20 [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (159,248) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (370,248) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div> at (581,248) content-size 60x20 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <(anonymous)> at (8,288) content-size 784x0 children: inline | ||
| TextNode <#text> | ||
|
|
||
| ViewportPaintable (Viewport<#document>) [0,0 800x600] | ||
| PaintableWithLines (BlockContainer<HTML>) [0,0 800x288] | ||
| PaintableWithLines (BlockContainer<BODY>) [8,8 784x260] overflow: [8,8 784x280] | ||
| PaintableBox (Box<DIV>.grid.justify-start) [8,8 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [8,8 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [84,8 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [160,8 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,48 784x0] | ||
| PaintableBox (Box<DIV>.grid.justify-end) [8,48 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [580,48 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [656,48 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [732,48 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,88 784x0] | ||
| PaintableBox (Box<DIV>.grid.justify-center) [8,88 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [294,88 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [370,88 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [446,88 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,128 784x0] | ||
| PaintableBox (Box<DIV>.grid.justify-stretch) [8,128 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [8,128 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [84,128 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [160,128 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,168 784x0] | ||
| PaintableBox (Box<DIV>.grid.justify-space-around) [8,168 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [108.65625,168 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [369.984375,168 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [631.3125,168 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,208 784x0] | ||
| PaintableBox (Box<DIV>.grid.justify-space-between) [8,208 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [8,208 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [370,208 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [732,208 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,248 784x0] | ||
| PaintableBox (Box<DIV>.grid.justify-space-evenly) [8,248 784x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [159,248 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [370,248 60x20] | ||
| PaintableWithLines (BlockContainer<DIV>) [581,248 60x20] | ||
| PaintableWithLines (BlockContainer(anonymous)) [8,288 784x0] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!doctype html><style> | ||
| .grid { | ||
| width: 100%; | ||
| height: 20px; | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 60px); | ||
| background-color: #a8d5ba; | ||
| gap: 1rem; | ||
| margin-bottom: 20px; | ||
| } | ||
| .grid > * { | ||
| background-color: rebeccapurple; | ||
| } | ||
| .justify-start { justify-content: start; } | ||
| .justify-end { justify-content: end; } | ||
| .justify-center { justify-content: center; } | ||
| .justify-stretch { justify-content: stretch; } | ||
| .justify-space-around { justify-content: space-around; } | ||
| .justify-space-between { justify-content: space-between; } | ||
| .justify-space-evenly { justify-content: space-evenly; } | ||
| </style> | ||
| <div class="grid justify-start"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div class="grid justify-end"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div class="grid justify-center"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div class="grid justify-stretch"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div class="grid justify-space-around"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div class="grid justify-space-between"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div class="grid justify-space-evenly"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> |
Oops, something went wrong.