1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 04:18:14 +00:00

LibWeb: Flesh out basic support of min-width/height for grid items

This change brings calculate_minimum_contribution() for grid items and
supporting functions.
This commit is contained in:
Aliaksandr Kalenik 2023-05-13 15:17:24 +03:00 committed by Andreas Kling
parent 32a777347f
commit dbafb11a7e
4 changed files with 171 additions and 15 deletions

View file

@ -0,0 +1,14 @@
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 784x0 children: not-inline
Box <div.grid> at (8,8) content-size 102x204 floating [GFC] children: not-inline
BlockContainer <div.first> at (9,9) content-size 100x100 [BFC] children: inline
line 0 width: 36.03125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [9,9 36.03125x17.46875]
"first"
TextNode <#text>
BlockContainer <div.second> at (9,111) content-size 100x100 [BFC] children: inline
line 0 width: 54.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [9,111 54.78125x17.46875]
"second"
TextNode <#text>

View file

@ -0,0 +1,22 @@
<style>
.grid {
float: left;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
}
.first {
background: pink;
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
.second {
background: skyblue;
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
</style><div class="grid"><div class="first">first</div><div class="second">second</div></div>