1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 01:07:35 +00:00

LibWeb: Support grid-auto-columns and grid-auto-rows properties in GFC

Implements assignment of sizes specified in grid-auto-columns/rows for
implicitly created tracks.
This commit is contained in:
Aliaksandr Kalenik 2023-05-21 18:13:33 +03:00 committed by Andreas Kling
parent 6e0601a63e
commit 193290b19a
3 changed files with 61 additions and 6 deletions

View file

@ -0,0 +1,8 @@
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 784x60 children: not-inline
Box <div.grid> at (8,8) content-size 784x60 [GFC] children: not-inline
BlockContainer <div#c1> at (8,8) content-size 23x11 [BFC] children: not-inline
BlockContainer <div#c2> at (8,8) content-size 52x24 [BFC] children: not-inline
BlockContainer <div#c3> at (8,8) content-size 83x41 [BFC] children: not-inline
BlockContainer <div#c4> at (8,8) content-size 120x60 [BFC] children: not-inline

View file

@ -0,0 +1,27 @@
<!-- https://wpt.live/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html -->
<style>
.grid {
display: grid;
grid-template-areas: "a b c" "d e f" "g e h";
grid-template-rows: 11px 13px;
grid-auto-rows: 17px 19px;
grid-template-columns: 23px 29px;
grid-auto-columns: 31px 37px;
}
.grid > div {
background: rgba(0, 0, 0, 0.2);
}
#c1 {
grid-area: 1 / 1 / 2 / 2;
}
#c2 {
grid-area: 1 / 1 / 3 / 3;
}
#c3 {
grid-area: 1 / 1 / 4 / 4;
}
#c4 {
grid-area: 1 / 1 / 5 / 5;
}
</style><div class="grid"><div id="c1"></div><div id="c2"></div><div id="c3"></div><div id="c4"></div></div>