mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 17:37:47 +00:00
LibWeb: Resolve grid item fixed size paddings in GFC
Adds support for grid items with fixed size paddings. Supporting percentage paddings will probably require to do second pass of tracks layout: second pass is needed to recalculate tracks sizes when final items sizes are known when percentage paddings are already resolved.
This commit is contained in:
parent
f8d6569841
commit
902ceb1675
4 changed files with 84 additions and 21 deletions
|
@ -0,0 +1,36 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x355.507812 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x355.507812 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (68,68) content-size 17.050781x32.753906 [BFC] children: inline
|
||||
line 0 width: 11.894531, height: 32.753906, bottom: 32.753906, baseline: 25.371093
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [71,68 11.894531x32.753906]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (255.050781,68) content-size 16.523437x32.753906 [BFC] children: inline
|
||||
line 0 width: 16.523437, height: 32.753906, bottom: 32.753906, baseline: 25.371093
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [255.050781,68 16.523437x32.753906]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (68,270.753906) content-size 17.050781x32.753906 [BFC] children: inline
|
||||
line 0 width: 17.050781, height: 32.753906, bottom: 32.753906, baseline: 25.371093
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [68,270.753906 17.050781x32.753906]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (255.050781,270.753906) content-size 16.523437x32.753906 [BFC] children: inline
|
||||
line 0 width: 14.53125, height: 32.753906, bottom: 32.753906, baseline: 25.371093
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [256.050781,270.753906 14.53125x32.753906]
|
||||
"4"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,363.507812) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
22
Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html
Normal file
22
Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<style>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 50px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #ddd;
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
border: 10px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue