-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
LibWeb/Layout: Unify grid justify-content handling for grid area
- Loading branch information
1 parent
d6a8fc0
commit 9e2b706
Showing
4 changed files
with
197 additions
and
24 deletions.
There are no files selected for viewing
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
133 changes: 133 additions & 0 deletions
133
Tests/LibWeb/Layout/expected/grid/justify-content-fr.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,133 @@ | ||
| Viewport <#document> at (0,0) content-size 800x600 children: not-inline | ||
| BlockContainer <html> at (0,0) content-size 800x252 [BFC] children: not-inline | ||
| Box <body> at (28,28) content-size 744x196 flex-container(row) [FFC] children: not-inline | ||
| Box <div.container> at (30,30) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (30,30) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (135,30) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (240,30) content-size 90x30 [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 (354,30) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (354,30) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (459,30) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (564,30) content-size 90x30 [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,84) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (30,84) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (135,84) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (240,84) content-size 90x30 [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 (354,84) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (354,84) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (459,84) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (564,84) content-size 90x30 [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,138) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (30,138) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (135,138) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (240,138) content-size 90x30 [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 (354,138) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (354,138) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (459,138) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (564,138) content-size 90x30 [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,192) content-size 300x30 flex-item [GFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (30,192) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (135,192) content-size 90x30 [BFC] children: not-inline | ||
| BlockContainer <(anonymous)> (not painted) [BFC] children: inline | ||
| TextNode <#text> | ||
| BlockContainer <div.item> at (240,192) content-size 90x30 [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] | ||
| PaintableWithLines (BlockContainer<HTML>) [0,0 800x252] | ||
| PaintableBox (Box<BODY>) [8,8 784x236] | ||
| PaintableBox (Box<DIV>.container) [28,28 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [30,30 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [135,30 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [240,30 90x30] | ||
| PaintableBox (Box<DIV>.container) [352,28 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [354,30 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [459,30 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [564,30 90x30] | ||
| PaintableBox (Box<DIV>.container) [28,82 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [30,84 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [135,84 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [240,84 90x30] | ||
| PaintableBox (Box<DIV>.container) [352,82 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [354,84 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [459,84 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [564,84 90x30] | ||
| PaintableBox (Box<DIV>.container) [28,136 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [30,138 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [135,138 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [240,138 90x30] | ||
| PaintableBox (Box<DIV>.container) [352,136 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [354,138 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [459,138 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [564,138 90x30] | ||
| PaintableBox (Box<DIV>.container) [28,190 304x34] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [30,192 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [135,192 90x30] | ||
| PaintableWithLines (BlockContainer<DIV>.item) [240,192 90x30] |
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,56 @@ | ||
| <!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, 1fr); | ||
| gap: 15px; | ||
| width: 300px; | ||
| height: 30px; | ||
| border: 2px solid #333; | ||
| } | ||
| .item { | ||
| background-color: rebeccapurple; | ||
| } | ||
| </style> | ||
| <div class="container" style="justify-content: start;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> | ||
| <div class="container" style="justify-content: end;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> | ||
| <div class="container" style="justify-content: center;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> | ||
| <div class="container" style="justify-content: stretch;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> | ||
| <div class="container" style="justify-content: space-between;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> | ||
| <div class="container" style="justify-content: space-around;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> | ||
| <div class="container" style="justify-content: space-evenly;"> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| <div class="item"></div> | ||
| </div> |
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